ThingsBoard dynamicky mění barvu pozadí prvku widgetu jednoduché karty

Na hlavním panelu ThingsBoard mám jednoduchý prvek widgetu karty. Chci dynamicky změnit barvu pozadí tohoto prvku s ohledem na odeslanou hodnotu.

Ví někdo, jak toto chování implementovat?

Děkuji mnohokrát.

Odpověď

K tomu budete muset vytvořit vlastní widget. Jednoduchý widget karet si můžete uložit a vytvořit jeho kopii, kterou lze upravit.

V tomto novém widgetu můžete změnit barvu pozadí widgetu takto:

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

Ve výchozím nastavení má prvek widgetu výplň do kontejneru obsahu. Toto odsazení můžete nastavit na nulu v nastavení widgetu, aby kontejner zaplnil celou oblast widgetu.

Kdykoli jsou data aktualizována, widget-callback onDataUpdated() se nazývá, kde můžete implementovat změnu barvy na základě vašich hodnot. Zde je jeho implementace jednoduchého widgetu karet. Přidal jsem aktualizaci barvy pozadí (červená barva pro hodnoty <0, barva grenn pro hodnoty> 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();
                }
            }
        }
    }    
    
};