Как создать виджет с произвольными параметрами на вкладке Widgets

В базовом веб-интерфейсе WB5 / WB6 доступна настройка виджетов, в которых можно собрать по смыслу данные с разных устройств, а также оформить эти данные html и текстом.
Такие виджеты можно добавить в Комнаты / Rooms, что поможет создать порядок в интерфейсе.
Инструкция годится для версии интерфейса < 2.0 .

Для реализации, есть готовые шаблоны на вкладке Widgets (кнопка Add Widget -> заполнить параметры).
Если не хватает стандартных, можно написать свой шаблон виджета.

Для этого:

  1. /var/www/views/widgets/templates/template-customw.html - создать файл, в нем описать html виджета, например

    <a style = “color: red;”>{{widget.controls.slot0.topic.value}} °C</a><br/>
    <span>{{widget.controls.slot1.topic.value}} %, RH</span><br/>
    <span>{{widget.controls.slot2.topic.value}} lux</span><br/>
    <span>{{widget.controls.slot3.topic.value}} dB</span><br/>
    <span>{{widget.controls.slot4.topic.value}} ppm</span>

  2. /var/www/scripts/controllers/widgetController.js
    в конец добавить конструкцию по образцу:

.directive('widgetCustomw', function(){ return{ restrict: 'A', templateUrl: 'views/widgets/templates/widget-customw.html' }; })
  1. /var/www/scripts/services/dataService.js - прописать параметры слотов:

    customw: { uid: ‘customw’, name: ‘customw’,
    options: {},
    slots: {
    slot0: {name: ‘Temperature sensor’, uid: ‘slot0’},
    slot1: {name: ‘Humidity sensor’, uid: ‘slot1’},
    slot2: {name: ‘Lux meter’, uid: ‘slot2’},
    slot3: {name: ‘Sound pressure sensor’, uid: ‘slot3’},
    slot4: {name: ‘CO2 sensor’, uid: ‘slot4’}
    }},

  2. /var/www/views/widgets/templates/template.html - добавить строчку по образцу

    <div widget-customw ng-switch-when=“customw”></div>

Пример реализации:

3 Симпатий

Полезный топик по общим соображениям.
Но не работает в данной редакции.
Проверьте пожалуйста на ошибки и дополните недостающими директивами до полного.

По п.1 видимо имеется ввиду файл /var/www/views/widgets/templates/template-customw.html
По п.2 видимо имеется ввиду файл /var/www/scripts/controllers/widgetController.js
По п.4 такого файла также нет.
Видимо имелся ввиду /var/www/views/widgets/templates/template.html

Кроме того, в ниспадающем меню не появился пункт с опцией кастомного шаблона, видимо где-то ещё что-то необходимо добавить.

При использовании внесенных мной корректировок в пути к файлам работает!
Перед проверкой на работоспособность необходимо сделать “Clear Cash” в браузере.

Полезный рабочий пример термостата:

2 Симпатий

Спасибо, исправила пути к файлам. Добавила картинку.
Инструкция годится для версий интерфейса < 2.0 .

Чтобы эта инструкция была совместима с интерфейсом >2.0

Необходимо добавить еще строку в файл:

/var/www/views/dashboards/widget-template.html - добавить строчку по образцу
<div widget-customw ng-switch-when=“customw”></div>