Changing the color of table cell based on value

I have packets comming in via MQTT from several devices.
msg.topic is changed to reflect the device's ID
then the message is passed through the collector and only passed to the filter values have changed or another devices comes online.

The msg is then sent to a ui_template with the following.

<table ng-app >
  <tr>
    <td>deviceName</td>
    <td>rssi</td>
    <td>loRaSNR</td>
    <td>battery</td>
    <td>Peak</td>
    <td>Avg</td>
    <td>Int</td>
    <td>alertLevel</td>
    <td>alertState</td>
  </tr>
  <tr ng-repeat="device in msg.payload" ng-class-odd="'odd'" ng-class-even="'even'" >
    <td>{{device.deviceName}}</td>
    <td>{{device.rxInfo.rssi}}</td>
    <td>{{device.rxInfo.loRaSNR}}</td>
    <td>{{device.object.battery/1000}}</td>
    <td>{{device.object.hotPixelValue*0.25}}</td>
    <td>{{device.object.rawAverage*0.25}}</td>
    <td>{{device.object.internalTemp*.0625}}</td>
   <td>{{device.object.alertLevel}}</td>
    <td ng-click="send({payload: device.deviceName})">{{device.object.alertState}}</td>
  </tr>
</table>

What i would like to do is alter the background colour of the alertLevel cell depending on the value.

My first thoughts were to add some javascript that watches the cell and changes it if the value is === 0, 1, 2 etc.. but that changes all the alert cells.
I then added an ID tag based on the device ID. the issue there was that I was not able to get the device name in to the javascript in order for it to update the cell.

If anyone has any sugestions as to how best to do this I would appreciate it.

Hi,
maybe you can use Angular to add an appropriate class to the cell and then use css to style it

for example if device.object.alertLevel > 70 add red style :

...
<style>
.red-cell  {
background-color: red;
}
.green-cell  {
background-color: green;
}
</style>
...

<td ng-class="device.object.alertLevel > 70 ? 'red-cell' : 'green-cell'" >{{device.object.alertLevel}}</td>
...
2 Likes

Could you achieve your desired outcome using a ui_table instead of a template?

That seemed to work perfetly thanks!

I will give that a try as well, currently the page has already been built using template. will however try it and see if it runs better than template