auto generate an online/battery status table

This flow uses MQTT messages to create a table that show the online and battery status for all connected devices in the dashboard:

Table

The flow uses internal topics automatically created by Homie for ESP8266 as well as a topic that publishes the current battery status, using a voltage divider.

Flow

See this discussion for more information: https://groups.google.com/forum/#!topic/node-red/bahx8U3oBdI

[{"id":"b3c692d7.9e1bf","type":"tab","label":"monitor online status"},{"id":"86ef05b.41e0af8","type":"mqtt in","z":"b3c692d7.9e1bf","name":"","topic":"axure/+/$online","qos":"2","broker":"20b4bf75.197a","x":140,"y":100,"wires":[["2be3948.a1bd06c","30d90fac.5b27f"]]},{"id":"2be3948.a1bd06c","type":"debug","z":"b3c692d7.9e1bf","name":"","active":false,"console":"false","complete":"true","x":370,"y":140,"wires":[]},{"id":"2326e758.3682b8","type":"comment","z":"b3c692d7.9e1bf","name":"save messages in array","info":"","x":140,"y":60,"wires":[]},{"id":"bb837253.0a60c","type":"ui_template","z":"b3c692d7.9e1bf","group":"e536ee0f.6b586","name":"","order":6,"width":0,"height":0,"format":"\n<table>\n    <thead>\n        <tr>\n            <th style=\"width: 30%\">Device</th>\n            <th style=\"width: 60%\">Description</th>\n            <th style=\"width: 10%\">Battery</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr ng-repeat=\"entry in msg.payload\" ng-class=\"{online: entry.status == 'online', offline: entry.status == 'offline'}\">\n            <td>{{entry.id}}</td>\n            <td>{{entry.descr}}</td>\n            <td class=\"battery\" ng-class=\"{critical: entry.bPercentage <= 20 , low: (entry.bPercentage > 20 && entry.bPercentage <= 40)}\">\n                {{entry.bPercentage || 0}}%\n            </td>\n        </tr>\n    </tbody>\n</table>\n&nbsp;\n\n<style>\nth {font-weight: normal; text-align: left; border-bottom: 1px solid black; color: grey;}\n\n.offline {color: lightgrey;}\n.online {color: black;}\n\n.battery {text-align: right;}\n.low {color: #daa520;} \n.critical {color: red;} \n\n</style>","storeOutMessages":true,"fwdInMessages":true,"x":920,"y":160,"wires":[[]]},{"id":"a9593998.2937d8","type":"mqtt in","z":"b3c692d7.9e1bf","name":"","topic":"axure/+/$fw/name","qos":"2","broker":"20b4bf75.197a","x":150,"y":200,"wires":[["16b4c6fe.b9c4b9","e48cf930.8ca268"]]},{"id":"16b4c6fe.b9c4b9","type":"debug","z":"b3c692d7.9e1bf","name":"","active":false,"console":"false","complete":"true","x":370,"y":240,"wires":[]},{"id":"e48cf930.8ca268","type":"function","z":"b3c692d7.9e1bf","name":"store description","func":"var deviceStatus = flow.get('deviceStatus') || {};\nvar device = msg.topic.split(\"/\")[1];\n\nif (typeof deviceStatus[device] == 'undefined') {\n    deviceStatus[device] = {};\n}\ndeviceStatus[device].id = device;\ndeviceStatus[device].descr = msg.payload;\n\nflow.set('deviceStatus', deviceStatus);\n","outputs":1,"noerr":0,"x":396,"y":200,"wires":[[]]},{"id":"30d90fac.5b27f","type":"function","z":"b3c692d7.9e1bf","name":"store status","func":"var deviceStatus = flow.get('deviceStatus') || {};\nvar device = msg.topic.split(\"/\")[1];\n\nif (typeof deviceStatus[device] == 'undefined') {\n    deviceStatus[device] = {};\n}\ndeviceStatus[device].id = device;\ndeviceStatus[device].status = (msg.payload == 'true') ? 'online' : 'offline';\n\nflow.set('deviceStatus', deviceStatus);\n\n","outputs":1,"noerr":0,"x":390,"y":100,"wires":[[]]},{"id":"bebeebad.f7b4d8","type":"inject","z":"b3c692d7.9e1bf","name":"","topic":"deviceStatus","payload":"deviceStatus","payloadType":"flow","repeat":"5","crontab":"","once":true,"x":690,"y":160,"wires":[["57f758b5.295a48","bb837253.0a60c"]]},{"id":"57f758b5.295a48","type":"debug","z":"b3c692d7.9e1bf","name":"","active":false,"console":"false","complete":"true","x":910,"y":200,"wires":[]},{"id":"92b4cbf4.9309a8","type":"mqtt in","z":"b3c692d7.9e1bf","name":"","topic":"axure/+/+/bPercentage","qos":"2","broker":"20b4bf75.197a","x":160,"y":300,"wires":[["5f2fe9e8.0e4b88","97f2e964.1f15d8"]]},{"id":"5f2fe9e8.0e4b88","type":"debug","z":"b3c692d7.9e1bf","name":"","active":false,"console":"false","complete":"true","x":350,"y":340,"wires":[]},{"id":"97f2e964.1f15d8","type":"function","z":"b3c692d7.9e1bf","name":"store battery percentage","func":"var deviceStatus = flow.get('deviceStatus') || {};\nvar device = msg.topic.split(\"/\")[1];\n\nif (typeof deviceStatus[device] == 'undefined') {\n    deviceStatus[device] = {};\n}\ndeviceStatus[device].id = device;\ndeviceStatus[device].bPercentage = msg.payload;\n\nflow.set('deviceStatus', deviceStatus);\n","outputs":1,"noerr":0,"x":410,"y":300,"wires":[[]]},{"id":"49ed4218.77fa4c","type":"comment","z":"b3c692d7.9e1bf","name":"auto generate the status table","info":"","x":680,"y":60,"wires":[]},{"id":"20b4bf75.197a","type":"mqtt-broker","z":"","broker":"192.168.42.1","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willRetain":"false","willPayload":"","birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":""},{"id":"e536ee0f.6b586","type":"ui_group","z":"","name":"UI Elements","tab":"3a8ca5f4.05522a","order":1,"disp":true,"width":"8"},{"id":"3a8ca5f4.05522a","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
LennartHennigs

Flow Info

created 3 months ago

Node Types

Core
  • comment (x2)
  • debug (x4)
  • function (x3)
  • inject (x1)
  • mqtt in (x3)
  • mqtt-broker (x1)
Other
  • tab (x1)
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • #mqtt
  • #online_status
  • #dashboard
  • #battery_status
  • homie
  • battery_status
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option