В базовом веб-интерфейсе WB5 / WB6 доступна настройка виджетов, в которых можно собрать по смыслу данные с разных устройств, а также оформить эти данные html и текстом.
Такие виджеты можно добавить в Комнаты / Rooms, что поможет создать порядок в интерфейсе.
Инструкция годится для версии интерфейса < 2.0 .
Для реализации, есть готовые шаблоны на вкладке Widgets (кнопка Add Widget -> заполнить параметры).
Если не хватает стандартных, можно написать свой шаблон виджета.
Для этого:
-
/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>
-
/var/www/scripts/controllers/widgetController.js
в конец добавить конструкцию по образцу:
.directive('widgetCustomw', function(){
return{
restrict: 'A',
templateUrl: 'views/widgets/templates/widget-customw.html'
};
})
-
/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’}
}},
-
/var/www/views/widgets/templates/template.html - добавить строчку по образцу
<div widget-customw ng-switch-when=“customw”></div>
Пример реализации:
