javascript - 在 Thingsboard 中，我们可以使用单个数字仪表小部件来显示来自 4 个设备的数据吗

Question

] 3

我在设备类型上创建了一个实体别名（假设有 4 个光传感器类型的设备），是否可以复制 Thingsboard 的数字仪表小部件并制作一个新小部件并对其进行修改，使其可以显示来自 4 个设备的数据或 n 个设备（根据数据源数组的长度动态创建仪表）。？

标签： javascripthtml5-canvaswidgetthingsboard

Answer 1

我们可以 ：）

对于仪表小部件，thingsboard 使用一个名为TbCanvasDigitalGauge. widgetContext.data[0]这个东西在现有的画布元素上绘制了一个仪表。

基于一个现有的仪表小部件和TbCanvasDigitalGauge我想出为每个仪表设置一个假上下文以反映每个已解析实体的代码。因此，每个已解析实体的数据都映射到fakeCtx.data[0]每个仪表。

这是我的多仪表小部件的 javascript 部分：

self.createGauge = function(data, idx) {
    let elementId, canvas, fakeCtx;

    elementId = ['gauge', self.ctx.$scope.$id, idx].join('_');

    // Canvas for the gauge.
    canvas    = document.createElement('CANVAS');
    canvas.id = elementId;
    self.ctx.$container.append(canvas);

    // Fake context for the gauge helper object.
    fakeCtx = {
        $container: self.ctx.$container,
          settings: self.ctx.settings,
              data: [data],
          decimals: self.ctx.decimals,
             units: self.ctx.units,
          isMobile: self.ctx.isMobile,
            $scope: self.ctx.$scope,
             width: self.ctx.width,
            height: self.ctx.height
    };

    return new TbCanvasDigitalGauge(fakeCtx, elementId);
};

self.onInit = function() {
    // Create a gauge for each resolved entity.
    self.ctx.$scope.gauges = self.ctx.defaultSubscription.data.map(self.createGauge);
};

self.onDataUpdated = function() {
    self.ctx.$scope.gauges.forEach(gauge => gauge.update());
};

self.onResize = function() {
    self.ctx.$scope.gauges.forEach(gauge => gauge.resize());
};

self.getSettingsSchema = function() {
    return TbCanvasDigitalGauge.settingsSchema;
};

self.typeParameters = function() {
    return {
        maxDatasources: 1,
        maxDataKeys: 1
    };
};

self.onMobileModeChanged = function() {
    self.ctx.$scope.gauges.forEach(gauge => gauge.mobileModeChanged());
};

小部件的 html 是空的，因为脚本会动态创建画布元素。