Home Automation (2): A Nice and Responsive User Interface

I have decided to start from the end, the Front End.

 

But, before talking about how I have designed and built my UI, I need to give you a quick overview about the Messaging Infrastructure.

The communication between all the devices (equipped with sensors) and the Hub/Gateway is all based on MQTT protocol, over WI-FI.

In the near future I plan to add some Z-Wave devices (lights and plugs), but for now the underlying network is Wi-FI.

I don’t need to spend much time about MQTT, I Have written many blog’s posts on why it is the best and most widely used messaging protocol in IoT (Have a look at my previous posts).

The MQTT broker used is Eclipse Mosquitto 1.4, installed on a Raspberry PI 3 (RPI 3).

Every 30 seconds from each one of the rooms in my House an MQTT msg is sent to a dedicated topic. The serialization format chosen is JSON and a message carries several readings (Temperature, Humidity, Pressure, Light).

In addition, the same messaging approach is used to send commands and configuration changes from the Hub to a device (but I’ll address this side of the communication in another post).

Having said that, every information comes to the MQTT broker. You need only to subscribe to a Topic or a set of Topics and you will receive the information, every 30 sec., in JSON format.

I have setup OpenHAB 2, and OpenHAB has a nice Mobile UI and can directly bind items on the UI to MQTT topics.

But, I wanted also to develop a Nice and Responsive custom UI, without, if possible, writing too much code.

After many investigation, I discovered that there is a set of Node for Node-RED making really easy to develop a Web Front End.

These nodes are part of the module: node-red-dashboard, that I have installed in the Node-RED directory

(see: https://www.npmjs.com/package/node-red-dashboard)

 

After having installed it, you see a nice new set of nodes in the Node-RED palette:

Therefore, these are the main points behind Message Elaboration and UI:

• I have developed a set of Node-RED flows. Almost every flow starts from an MQTT input node: a message on a topic or set of topics (with wildcard) triggers the start of the flow;
• A flow typically transforms the message, extracts the relevant information and sends the message to a Node associated to a Widgets in the UI
• I have used several kind of Widgets: Text, Chart, Gauge, arranged in Groups and Two Tabs

 

All the Widgets are arranged in two Tabs: 

• The first one contains the widgets showing all the data coming from Sensors, arranged by Room;
• The second one contains a set of widgets to enable to keep under control the infrastructure; information displayed are: RTT for sensors, Number of Active Sensors, PI CPU Temperature Free Memory.

 

Here you see a snapshot of the First Tab:  

 

One of the important feature that I have added is a measure of the Air Quality and Gas concentration in the Kitchen (Group in the middle, above), useful, for example, to verify if there is a Gas Leak or if, during cooking for example, the Quality of the Air becomes too bad (can be, if windows are closed).

In the near future I plan to add also Alerts. One possible choice is to implement rules in Node-RED flows. I’m investigating the best way (if you have suggestions, please leave a comment!)

 To have an insight in the Infrastructure, I gather and display several information:

• Ping response time for all the sensors, as measured from the Hub/Gateway;
• Number of Connected Devices (devices with last message sent not older than 5 minutes);
• Timestamp for messages;
• Information relevant to the HUB: CPU temperature (RPI 3 tends to become hot), free memory and number of clients connected to MQTT broker (for now X devices + Node-RED) 

 

All the message elaboration (+ UI generation ) is organized in three flows:

• HomeAuto Main Flow
• Networking
• Hub/Gateway

 

To give you an idea, here you see the flows dedicated to elaborate and display messages coming from the Rooms.

 

To add more details, here you see the flow dedicated to elaborate and display messages coming from the device located in the bathroom

  The flow starts with a MQTT Input Node. This node subscribes to the topic bagno/+/msg.

(bagno, is the Italian word for BathRoom).

The + wildcard is there to enable, in the future, to have more devices in the same room, each one with a dedicated topic.

 

The upper part transforms the MQTT message (a string) in a JSON object. Then the two information (Temperature and Air Pressure) are extracted with a dedicated Change Node. The most important nodes from UI are the last (right). These nodes (coming from node-red-dashboard) implement the UI. Temperature is displayed in a Gauge and Pressure with a Chart (from the point of view of Weather Forecast what is more relevant is the Pressure trend).

The lower part registers the timestamp of the message arrival and display it in a Text Widget. In this way I can easily detect if, for some reason, one device has stopped sending messages.

The nice thing is that the UI is really responsive: every time a new message arrives it is updated and. Information are pushed from Node-RED server to your browser, and you don’t need to refresh the browser.  Really Cool. (I think it is based on WebSocket, but not sure till now).

Well, if you want some more details and code (JSON representation of flows) post a comment and I’ll see.

Stay tuned. This is only the beginning.