Ionic IOT ( MQTT ) Client using Eclipse Paho – Part 4

This app will help you monitor sensor datas uploaded to cloud via MQTT and visualize it in  the form of Spline.

Use-case scenario:

The app’s primary objective is to monitor elder peoples health condition from remote periodicaly. In-fact, we wanted to integrate more sensors in the device, like Temperature, GPS etc. This could also be integrated with Artificial Pace maker for patients. In a sense, this is a starter project that can be adapted to wider scopes.

Please read my tutorial series on IOT.

Libraries used:

  1. Eclipse Paha  (MQTT javascript Library)
  2. HighChart       (Used for displaying graph)
  3. Time               (Used to get current time)
  4. Firebase         (Used to save the subscribed device information, and user authentication)

You can download the complete project from my github.

Donwload

NOTE :

1. We  need to use websocket port for communicating to MQTT server using Eclipse Paho.

In Cloud MQTT :

cloudmqttdetails2

This is because

“The Paho JavaScript Client is an MQTT browser-based client library written in Javascript that uses WebSockets to connect to an MQTT Broker.”

Ionic :

INDEX PAGE

index.html

navigation

Replace the firebase variable with your credentials.

app.js

  • Make sure, that you include firebase in the app.js.
  • Also add $rootscope.extra  //used for hiding authentic user elements

Controller.js

I created a custom controller for index page, to check the user login status.

Make sure you make the ng-controller for index.html as

In the controller add the following,

LOGIN / SIGNUP PAGE

login

login.html

register

signup.html

Controller.js

loginCtrl

signupCtrl

Before we discuss further, let us see the code for

service.js

Topics: topics

topics-list.html

Controller.js [ topicsCtrl ]

We are going to load the list of topics from the firebase database.

This page also contains: add, delete and update functionalities.

SETTINGS :

We use this page to save and update the MQTT broker credentials.

settings

settings.html

Controller.js [ settingsCtrl ]

GRAPH :

This is the place where we get real time data visualisation. Here we are taking getting heart rate every 10 seconds. I have used highchart library to configure a spline graph.

graphs

graph.html

controller.js [ graphCtrl ]

 

FINALLY:

support

Please read my tutorial series on IOT.

Follow me on Github, to get the latest updates.