Long gone the days when thinking of a modern interface we certainly would fall back on seven segments LED displays and rotary switches…
Nowadays there are much more options, many types of LCD displays and with touch function can replace completely the physical buttons. Old ones like vacuum fluorescent displays are still in use. It was very popular in VCRs, can be found in audio equipment nowadays. You probably have one of them in your home, glowing that nice bluish-green color. With all these options the choose; depends of the project needs.
But how about an interface project you can carry in the pocket, access from on the smart TV or any device with a display and connected to network?
This code is a sum of basic ideas of how to implement it.
So let’s see…
How it works:
The interface simulates a control for a pump connected to an in-ground tank and pumping to a roof top tank. When pointing a browser to IOT device address (‘device IP’/index.html) it will reply the web page is stored in the memory (the interface). When the page is loaded data can be sent to or receive from IOT device. Auto/Manual button defines the operation mode, default mode is Auto, It also interlock the on/off button. By putting mode switch to Manual enables on/off button to work. By putting on/off button to ‘on’ starts demo mode by ramp up gauges at 10% steps. Case you want to try it for real, there are two bonus functions updateControls() and getControls() already defined in project file ..\DualGauges.WEBGUI\Scripts\WEBGUI.Script.js.
updateControls() sends data related to switches position and can be enabled by setting demo variable to ‘false’. This one is on first line of file WEBGUI.Script.js.
getControls() reads the status of switches and gauge values from IOT device, then writes it on respective objects. This can be enabled by uncommenting function getControlsInterval() at end of file WEBGUI.Script.js and the call for this function at line 51 of Index.html. It is set to call getControls() in every 10 seconds. All data transference is done using json in RESTful mode service. The IOT device server-side code should have methods to handle and reply to the those calls accordingly.
Remember: Due Same-Origin policy implemented on all the browsers it will not be possible to send and receive json objects straight from/to your own computer. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page’s Document Object Model. Not this case, of course. It would be necessary to use a webserver running in the computer thru virtual machine or in other computer then access this code stored in it, to circumvent this.
It is much faster (and easier) use ready-made objects, instead of building all the objects from scratch. That’s why I chosen JQuery library and JQWidgets framework. JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and other clever things. JQWidgets framework provides a comprehensive solution for building professional web sites and mobile apps. Both are built entirely on open standards and technologies. I used just basic features of this framework here; there is much more such as integration with other frameworks and libraries on the sites.
The pump icon is an animated jpeg photo using JQuery. Another a bonus feature is, the pump warning icon and respective animation code is already in the package. Let say for some reason the pump didn’t start; the IOT device should detect the fault and reply a number in Json key ErrorCode wich should set pumpWarnAnimation to ‘true’. This was left for the audience to implement…
The second tab (Building 2) has an example of how flexible and easy to integrate other objects on this framework. The gauge labeled as In-Ground tank 2 is not from jQWidgets framework, I got it from a work published by Christian Effenberger Here and integrate with jQWidgets Tab object declaration, function initWidgets(). It worked nicely as if it belonged to JQWidgets framework.
This time I published in a VSTS (Visual Studio Team Service) repository. The whole project can be found in This Link .
There is an even nicer way to build this kind of interface, wich is; move this code on to a cloud server or even better, build the widgets itself in a cloud server such as Power BI or Google Cloud IOT. But this, is subject for future post…
Tips For IOT 