How to Change the Background Color of a Group in Node-RED Dashboard Based on Test Results?

[ElectronB]

Hello everyone,

I'm currently working on a project in Node-RED where I have built a functional tester for electronic components. The Node-RED dashboard displays the status of 8 different electronic components. I would like to adjust the background color of the respective groups in the dashboard to visually represent the status of the components:

1. Dark grey when the component is in idle mode.
2. Green if the test was successful.
3. Red if there were errors in the test.

I'm unsure how to dynamically change the background color of the groups based on the test results. Here are some specific questions I have on this:

1. Is there a standardized method in Node-RED to change the background color of a group in the dashboard based on variable states?
2. Can this be achieved using Function nodes and/or Template nodes?
3. Would it be possible to see an example if someone has already implemented something similar?

Any help or guidance would be greatly appreciated. Thanks in advance for your support!

Best regards,
ElektronB

[zenofmud]

This might help you. Take a look at this project I created quite awhile ago

'ET Display Home' a flow to help manage your ESPeasy, Sonoff/Tasmota and Homie flashed devices (now on GitHub)

This project is designed to help you keep your Wemos and Sonoff devices under control by providing a dashboard with a link to the latest ESPeasy ano/or Sonoff Tasmota release, the node name, status, current software version (devices with older versions are hi-lighted), The current RSSI value, a link to each online device's configuration page and other infomation that will seem reasonable to provide. [ethd_v019_display] The project uses two tables in an SQLite database and is designed that, i…

the 'magic' is done in a ui-template node with this code:

<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_ESP82xx_{{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/Tasmota-firmware/raw/main/release-firmware/tasmota/tasmota-display.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>Last Seen</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.node_status ==  1' class="device_last_seen"  >{{x.last_seen}} </td>
            <td ng-if='x.node_status ==  0' class="device_last_seen"  >{{x.last_seen}} </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>

So the way it works is that each device is an object which contains node_status. The node_status determines the color in the table.

Hopefully this will help you out.