ThingsBoard change background color of simple card widget element dynamically

In my ThingsBoard dashboard i have a simple card widget element. I want to change the background color of this element dynamically regarding of the value that is sent.

Does anyone know how to implement this behavior?

Thank you very much.

Answer

You will need to create a custom widget to do this. You can just save the simple card widget to create an editable copy of it.

In that new widget you can change the background color of your widget like this:

self.ctx.$container[0].style.backgroundColor = "#ff0000";

By default the widget element has a padding to the content container. You can set that padding to zero in the widget settings to let the container fill up the whole widget area.

Whenever the data is updated the widget-callback onDataUpdated() is called where you can implement the color change based on your values. Here is its implementation of the simple card widget. I added an update of the background color (red color for values < 0, grenn color for values > 0).

self.onDataUpdated = function() {
    
    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    if (self.ctx.valueCell && self.ctx.data.length > 0) {
        var cellData = self.ctx.data[0];
        if (cellData.data.length > 0) {
            var tvPair = cellData.data[cellData.data.length -
                1];
            var value = tvPair[1];
            var txtValue;
            if (isNumber(value)) {
                var decimals = self.ctx.decimals;
                var units = self.ctx.units;
                if (self.ctx.datasources.length > 0 && self.ctx.datasources[0].dataKeys.length > 0) {
                    dataKey = self.ctx.datasources[0].dataKeys[0];
                    if (dataKey.decimals || dataKey.decimals === 0) {
                        decimals = dataKey.decimals;
                    }
                    if (dataKey.units) {
                        units = dataKey.units;
                    }
                }

                // Change background color to red (v<0) or green (v>=0)
                self.ctx.$container[0].style.backgroundColor = value > 0 ? "#00ff00" : "#ff0000";
                
                txtValue = self.ctx.utils.formatValue(value, decimals, units, true);
            } else {
                txtValue = value;
            }
            self.ctx.valueCell.html(txtValue);
            var targetWidth;
            var minDelta;
            if (self.ctx.labelPosition === 'left') {
                targetWidth = self.ctx.datasourceContainer.width() - self.ctx.labelCell.width();
                minDelta = self.ctx.width/16 + self.ctx.padding;
            } else {
                targetWidth = self.ctx.datasourceContainer.width();
                minDelta = self.ctx.padding;
            }
            var delta = targetWidth - self.ctx.valueCell.textWidth();
            var fontSize = self.ctx.valueFontSize;
            if (targetWidth > minDelta) {
                while (delta < minDelta && fontSize > 6) {
                    fontSize--;
                    self.ctx.valueCell.css('font-size', fontSize+'px');
                    delta = targetWidth - self.ctx.valueCell.textWidth();
                }
            }
        }
    }    
    
};