В Thingsboard Можем ли мы использовать единый цифровой виджет для отображения данных с 4 устройств?

Question

] 3

Я создал псевдоним сущности для типа устройства (предположим, что имеется 4 устройства типа датчиков света). Можно ли скопировать виджет цифровой калибровки Thingsboard, создать новый виджет и изменить его таким образом, чтобы он мог отображать данные из 4 или n устройств (Динамически создавайте датчики в зависимости от длины массива источников данных).

Answer 1

Да, мы можем:)

Для виджетов-манометров тезисная доска использует вспомогательный объект с именем TbCanvasDigitalGauge.Эта вещь рисует датчик для widgetContext.data[0] на существующем элементе canvas.

На основе одного из существующих виджетов датчика и кода 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 для виджетапусто, поскольку скрипт создает элементы canvas динамически.