Table overview of sensors

Hi, I want to get a table displayed on the dashboard showing live values coming from sensors (window/door contact). The Table should have columns like Room, Battery Level, Status (open, closed)

Please help, I don't know how to begin here.

Many Thanks

maybe https://flows.nodered.org/node/node-red-node-ui-table would be a place to start ?

1 Like

I tried following

[{"id":"270f707d.c61be","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"8999c43.1513cb8","type":"change","z":"270f707d.c61be","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"true","fromt":"bool","to":"open","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"false","fromt":"bool","to":"closed","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":120,"wires":[["589ce109.1ba84"]]},{"id":"d2c401d7.4fed58","type":"inject","z":"270f707d.c61be","name":"","topic":"","payload":"false","payloadType":"bool","repeat":"4","crontab":"","once":true,"onceDelay":"0.5","x":230,"y":140,"wires":[["8999c43.1513cb8"]]},{"id":"5fc4614c.2adf88","type":"inject","z":"270f707d.c61be","name":"open","topic":"","payload":"true","payloadType":"bool","repeat":"2","crontab":"","once":true,"onceDelay":"0.3","x":230,"y":100,"wires":[["8999c43.1513cb8"]]},{"id":"589ce109.1ba84","type":"debug","z":"270f707d.c61be","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":670,"y":120,"wires":[]},{"id":"28e31de5.5a5a2a","type":"inject","z":"270f707d.c61be","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":290,"y":300,"wires":[["deea536c.5e4dc"]]},{"id":"deea536c.5e4dc","type":"function","z":"270f707d.c61be","name":"build array (2)","func":"var arr =[[\"Kitchen\",85,\"open\"],[\"Living Room\",\"50\",\"closed\"]];\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":300,"wires":[["87214bc7.7debe"]]},{"id":"ab16ec6c.49b328","type":"debug","z":"270f707d.c61be","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":990,"y":300,"wires":[]},{"id":"87214bc7.7debe","type":"ui_template","z":"270f707d.c61be","group":"f8b6ab9.ed1f758","name":"Two dimension array table","order":1,"width":"6","height":"6","format":"<table id=\"table\" border=\"1\">\n <tr>\n <th>Room</th> \n <th>Battery Level</th>\n <th>Status</th>\n </tr>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\">\n <td ng-repeat=\"item in row\" >{{item}}</td>\n </tr>\n </tbody>\n</table>\n\n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":680,"y":300,"wires":[["ab16ec6c.49b328"]]},{"id":"f8b6ab9.ed1f758","type":"ui_group","z":"","name":"Two dimension Array","tab":"eca9193d.cf7e","order":2,"disp":true,"width":"6","collapse":false},{"id":"eca9193d.cf7e","type":"ui_tab","z":"","name":"Table Examples","icon":"dashboard","order":1}]

How can get the variable (open/closed) dynamically in the table?

Here is an example of how I set different ooptions in my 'ET Display Home' a flow to help manage your ESPeasy, Sonoff/Tasmota and Homie flashed devices (now on GitHub) project. I use ng-if statements

<div id="et_home">
<h2 style="text-align: center;">ET Display Home {{msg.etdh_version}}</h2>
<p style="text-align: center;">ESPeasy current release: <a href="https://github.com/letscontrolit/ESPEasy/releases/download/{{msg.esp_release}}/ESPEasy_{{msg.esp_release}}.zip" target="_blank">{{msg.esp_release}}</a> (click to download)</p>
<p style="text-align: center;">Tasmota current release: <a href="https://github.com/arendst/Sonoff-Tasmota/releases/download/v{{msg.tas_release}}/sonoff.bin" target="_blank">{{msg.tas_release}}</a> (click to download)</p>

<br/>
<table id="table" border="1">
    <tr>
        <th>Node Name</th> 
        <th>Node Status</th> 
        <th>Version</th>
        <th>RSSI</th>
        <th>Uptime</th>
        <th>Last boot cause</th>
        <th>Free RAM</th>
        <th>IP</th>
    </tr>
    <tbody style="text-align: center">
        <tr ng-repeat="x in msg.payload">
            <td ng-if="x.node_status ==  'database is empty'" class="warning_red" >DATABASE IS EMPTY</td>
 
            <td ng-if='x.node_status ==  1' class="device_online" >{{x.node_name}}</td>
            <td ng-if='x.node_status ==  0' class="device_offline">{{x.node_name}}</td>
            
            <td ng-if='x.node_status ==  1' class="device_online"  >On Line </td>
            <td ng-if='x.node_status ==  0' class="device_offline" >Off Line</td>
            
            <td ng-if="(x.firmware_type == 'espeasy' && x.firmware_build ==  msg.esp_release)" class="device_online"> {{x.firmware_build}} </td>
            <td ng-if="(x.firmware_type == 'espeasy' && x.firmware_build !=  msg.esp_release)" class="warning_color"> {{x.firmware_build}} </td>
            <td ng-if="(x.firmware_type == 'tasmota' && x.firmware_build ==  msg.tas_release)" class="device_online"> {{x.firmware_build}} </td>
            <td ng-if="(x.firmware_type == 'tasmota' && x.firmware_build !=  msg.tas_release)" class="warning_color"> {{x.firmware_build}} </td>
            <td ng-if="(x.firmware_type == 'homie'   && x.firmware_build ==  msg.hom_release)" class="device_online"> {{x.firmware_build}} </td>
            <td ng-if="(x.firmware_type == 'homie'   && x.firmware_build !=  msg.hom_release)" class="warning_color"> {{x.firmware_build}} </td>
             
            <td ng-if='x.node_status ==  1'  > {{x.rssi}} </td>
            <td ng-if='x.node_status ==  0'  >- - -</td>
            
            <td ng-if='x.node_status ==  1'  > {{x.uptime}} </td>
            <td ng-if='x.node_status ==  0'  >- - - - -</td>
            
            <td ng-if='x.node_status ==  1'  > {{x.last_boot_cause}} </td>
            <td ng-if='x.node_status ==  0'  >- - - - - - -</td>
            
            <td ng-if='x.node_status ==  1'  > {{x.free_ram}} </td>
            <td ng-if='x.node_status ==  0'  >- - - - -</td>
            <td>
                <a href="http://{{x.ip}}" target="_blank"> {{x.ip}} </a>
            </td>
        </tr>
    </tbody>
</table>

</div>

Hopefully it will give you some ideas and help you figure out what you need to do.

One thing, to update the table, you will have to send data to it again.

I tried to understand flow variables. In the dashboard and function sensorlist, i got the variable temperatur but i have no idea how to get the variable humidtiy in there.

flows(8).json (2.5 KB)

Thanks for helping

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.