ThingsBoard change background color of simple card widget element dynamically

Question

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.

score 2 · Accepted Answer · answered Jun 03 '21 at 14:13

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();
                }
            }
        }
    }    
    
};

I don't know where to put the command "self.ctx.$container[0].style.backgroundColor = "#ff0000";" My simple card only have the "Use data-post processing function" editor. In the "Settings" or "Advanced" tab there aren't any editors to add code — DanLand, Jun 08 '21 at 11:32
And inside the "Use data-post processing function" editor i get the error "self.ctx is undefined" — DanLand, Jun 08 '21 at 11:41
As I said: You need to create a custom widget for this by editing the card widget in the widgets library and saving it with a new name. You might need to create a widget bundle first. Check out the widgets development guide: https://thingsboard.io/docs/user-guide/contribution/widgets-development/ — lupz, Jun 15 '21 at 15:22
Ah now i got it. I had to go to the widget library in the menu on the left side. There i could create a new widget bundle and then i exported and imported the cards bundle and edited the simple card widget. Thank you very much. — DanLand, Jun 16 '21 at 11:26

ThingsBoard change background color of simple card widget element dynamically

1 Answers1