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