Node-red in workplace. What are you using it for?

General
29

color the lines something like this?

38%20PM
Screen Shot 2019-09-13 at 1.06.38 PM.png771×541 80.6 KB

the 'node name and node status colors are based on the node status. I used a ui_template node to build the table and ng-if's too do the coloring

<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="row in msg.payload">
            <td ng-if='row[0] ==  1' class="device_online" >{{row[1]}}</td>
            <td ng-if='row[0] ==  0' class="device_offline">{{row[1]}}</td>
            
            <td ng-if='row[0] ==  1' class="device_online" >On Line</td>
            <td ng-if='row[0] ==  0' class="device_offline" >Off Line</td>
            
            <td ng-if="(row[8] == 'espeasy' && row[2] ==  msg.esp_release)" class="device_online"> {{row[2]}} </td>
            <td ng-if="(row[8] == 'espeasy' && row[2] !=  msg.esp_release)" class="warning_color"> {{row[2]}} </td>
            <td ng-if="(row[8] == 'tasmota' && row[2] ==  msg.tas_release)" class="device_online"> {{row[2]}} </td>
            <td ng-if="(row[8] == 'tasmota' && row[2] !=  msg.tas_release)" class="warning_color"> {{row[2]}} </td>
            
            <td ng-if='row[0] ==  1'  > {{row[7]}} </td>
            <td ng-if='row[0] ==  0'  >- - -</td>
            
            <td ng-if='row[0] ==  1'  > {{row[3]}} </td>
            <td ng-if='row[0] ==  0'  >- - - - -</td>
            
            <td ng-if='row[0] ==  1'  > {{row[4]}} </td>
            <td ng-if='row[0] ==  0'  >- - - - - - -</td>
            
            <td ng-if='row[0] ==  1'  > {{row[5]}} </td>
            <td ng-if='row[0] ==  0'  >- - - - -</td>
            <td>
                <a href="http://{{row[6]}}" target="_blank"> {{row[6]}} </a>
            </td>
        </tr>
    </tbody>
</table>

</div>

then some CSS to control the colors

    .device_offline {
        background-color: #ffa0a8;
    }
    .device_online {
        background-color: #dcffcc; 
        color: #000000;
    }
    .warning_color {
        background-color: #f3ffb8;
    }

you can see the whole flow here: 'ET Display Home' a flow to help manage your ESPeasy and Sonoff/Tasmota flashed devices (now at v0.1.13)
the dashboard tab is where to look.

1 Like