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

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,

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

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="{{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="" target="_blank">{{msg.tas_release}}</a> (click to download)</p>

<table id="table" border="1">
        <th>Node Name</th> 
        <th>Node Status</th> 
        <th>Last Seen</th> 
        <th>Last boot cause</th>
        <th>Free RAM</th>
    <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>
                <a href="http://{{x.ip}}" target="_blank"> {{x.ip}} </a>


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.

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