Home About us Support Partners SIGN UP NOW
 Home    Blog    Build your IoT Application

Build your IOT Application in a Day

by Hema


iot application

IoT Application development is required today at all levels. People with very low coding knowledge needs to build what is needed for them. MQTT broker helps customers to embed their ML & AI algorithms and create their own application. MQTT broker helps you host and manage your application easily. This just leaves your development challenge for your IOT Server application. MQTT Broker comes with a default user interface, however visualization needs to be built for specific vertical. We recently run an internal hackathon at Bevywise to build applications over our framework. Interestingly, we were able to build an IOT application in a day. The application built was a Industrial Furnace monitoring. This blog portrays the hacks used to build the application.

IoT Application for Industrial Temperature Monitoring

Monitoring and controlling the temperature of the furnaces is crucial with respect to its usage in the industries as it directly affects the quality of the product that is being created. We created a simulated device similar to a monitoring edge device which pushes data to the MQTT Broker. The goals set for the application were:


  • Live graph of the incoming temperature
  • Historical hourly average of the temperature
  • Alarm when the temperature exceeds a range
  • Alarm when current temperature exceeds the previous hour average

Live Temperature View

MQTT Broker is programmed in a way that it pushes the incoming device data to the user interface using the web socket. You will be able to add your own code to create live graphs. In this hackathon, plotly is used by the developer. The data on temperature of the furnace collected is presented as a line graph in the dashboard. This is done by configuring custom_ui_server.py file.

reference code for line graph

xaxis: {
type: ‘date’,
range: [olderTime, futureTime]
}
};
Plotly.relayout (graph_id, minuteView);
Plotly.extendTraces (graph_id, update, d)


live temperature data

Historical data Analysis

The historical graph on hourly average data can be created by the Data Crunching process. The schedule module is used to automate the creation of hourly average data. Custom implementation for the average of data developed in a separate method and configured in the schedule to be called every 60 minutes in custom_scheduler.py

file.

def schedule_conf( ):
schedules={}
schedules={
‘STATUS’ : ‘DISABLE’,
‘SCHEDULES’ : [
{‘OnceIn’ : 1,‘methodtocall’ :
oneminschedule },
{‘OnceIn’ : 5,‘methodtocall’ : fiveminschedule } ] }
return schedules

After processing the data, the data is pushed to the user interface through the web socket. The bar graph is created using plotly to display the crunched data

reference code for bar graph

x:[ data1 [i] [‘time1’] ]
y:[ data1 [i] [‘value’] ]
Plotly.newPlot ( ‘history’, data123,layout, {displayModeBar:false, responsive:true},
{scrollZoom: true} );

We believe you will be able to add your own algorithm similar to the above.

hourly average chart

Generate Event Alarms

The variation in the temperature can be noted and displayed in a widgets. For a certain range of temperature values the data will be shown in varied colors to alarm for a temperature variations. Here, the data will be shown as red colored text if the temperature is above 500 degree Celsius (default value) and blue colored text if the temperature is below 500 degree Celsius. The default temperature range set can be changed according to your need. You can add your own widgets and notifications to the user interface by customizing custom_ui_server.py file. To schedule your alarms use custom_scheduler.py.

reference code for text-widget

if ( key ==“message-integer” || key ==“message-float” || key ==“message-string” ) {
var message = data1 [key] [‘message’][0] ;
document.getElementById(id).innerHTML = message + String.fromCharCode(176)+unit+ ;
}


live temperature data

Alerts for the Shop floor operators

The comparison of incoming data with the previous hourly average data is done. Alerts can be created based on the compared data. If the temperature exceeds the hourly average temperature then the data blinks by creating an alert. This can be done by adding event based triggers using the scheduling module. Add your own algorithm to create alerts in custom_scheduler.py.

reference code for alarm_widget

if ( p_avg < data3 [‘msg’] [‘message’] [0] ){
document.getElementById (“alert”).innerHTML=data3 [‘msg’] [‘message’] [0] +“ALERT!” + “Temperature High”;
}



creating an alert

Dashboard for IOT Application in a day

All the widgets created by the developer was put on a separate page, as it can be used as a dashboard to be projected/displayed on to a bigger screen. This has been done as a custom URL inside the custom_ui_server.py similar to the following code snippet.

Add your URL here

def custom_urls():
urllist={
“AUTHENTICATION”:’DISABLE’,
“urls”:[{“/extend/Dashboard”:dashboard}]
}
return urllist

The hackathon IoT Application built in a day is available on GitHub for trying it out. Try our MQTT Broker now to start building your application today.