ThingsBoard 动态更改简单卡片小部件元素的背景颜色
ThingsBoard change background color of simple card widget element dynamically
在我的 ThingsBoard 仪表板中,我有一个简单的卡片小部件元素。我想根据发送的值动态更改此元素的背景颜色。
有人知道如何实现这种行为吗?
非常感谢。
您需要创建自定义小部件才能执行此操作。您可以只保存简单的卡片小部件来创建它的可编辑副本。
在那个新的小部件中,您可以像这样更改小部件的背景颜色:
self.ctx.$container[0].style.backgroundColor = "#ff0000";
默认情况下,小部件元素在内容容器中有一个填充。您可以在小部件设置中将填充设置为零,让容器填满整个小部件区域。
每当数据更新时,都会调用小部件回调 onDataUpdated()
,您可以在其中根据您的值实现颜色更改。这是简单卡片小部件的实现。我添加了背景颜色的更新(值 < 0 时为红色,值 > 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();
}
}
}
}
};
在我的 ThingsBoard 仪表板中,我有一个简单的卡片小部件元素。我想根据发送的值动态更改此元素的背景颜色。
有人知道如何实现这种行为吗?
非常感谢。
您需要创建自定义小部件才能执行此操作。您可以只保存简单的卡片小部件来创建它的可编辑副本。
在那个新的小部件中,您可以像这样更改小部件的背景颜色:
self.ctx.$container[0].style.backgroundColor = "#ff0000";
默认情况下,小部件元素在内容容器中有一个填充。您可以在小部件设置中将填充设置为零,让容器填满整个小部件区域。
每当数据更新时,都会调用小部件回调 onDataUpdated()
,您可以在其中根据您的值实现颜色更改。这是简单卡片小部件的实现。我添加了背景颜色的更新(值 < 0 时为红色,值 > 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();
}
}
}
}
};