Создание виджета для мониторинга устройства

В этом уроке рассказывается о процессе создания простого виджета с целью осуществления мониторинга устройства. В данном случае мы предполагаем, что устройство - это цифровой датчик температуры/влажности, который связан с SberMobile Server по протоколу SNMP. Наш виджет будет показывать текущую температуру или влажность в режиме реального времени.

Этот раздел не содержит информацию о связи сенсора с сервером и его конфигурации, мы исходим из того, что сенсор уже находится в режиме online, а система распознает/видит его как устройство.

Перед тем как приступить к созданию виджета, найдите узел устройства в Системном дереве (). Перетащите его на узел Виджеты ():

Эта операция отобразит Свойства: окно Виджета. Установите имя Виджета как thmonitor, a Описание виджета как Temperature/Humidity Monitor. Если кликнуть OK, откроется редактор виджетов с пустым шаблоном виджета. Если перетащить устройство на узел Виджеты, только что созданный виджет будет доступен для каждого контекста устройства.

Давайте добавим некоторые компоненты в виджет. О том, как обращаться с компонентами виджета, можно узнать из раздела Редактирование разметки виджета.

Перетащите компонент Надпись () из палитры компонентов в корневую панель виджета на рабочей форме:

Добавьте еще одну надпись, перетащив его мышью под текущий в колонке  0, ряду 1 корневой панели:

Добавьте еще одну надпись в колонку 1, ряд 0:

Затем добавьте компонент Регулятор () в колонку 1, ряд 1:

Кликните по надписи 1 в рабочей форме и измените его свойство Текст в окне свойств на "Temperature: ".

Измените текст Надписи 2 на "Humidity: ". Затем измените текст Надписи 3 на 0.

Затем правой кнопкой мыши кликните по Надписи 3 в Окне ресурсов и выберите Переименовать из контекстного меню. Задайте имя temperature.

Переименуйте регулятор 1 на humidity аналогичным образом.

А теперь откройте свойство Шрифт ярлыка 1 в окне Свойства. Проверьте Использовать особый шрифт, установите имя на Arial, размер на 20 отметьте Полужирный шрифт.

Установите тот же шрифт для надписи2 (label2) и температуру (бывшая label3).

Установите Включенное свойство регулятора на false (неправильно), чтобы не допустить его перемещения.  

Выберите все четыре компонента, один за другим, и установите их точку привязки слева, щелкнув в инструментальной панели по кнопке .

Затем отредактируйте ограничения надписей температуры и влажности и установите Левое поле на 15.

Вы также можете редактировать поля при помощи мышки, см. раздел Редактирование разметки виджета.

Теперь Ваш виджет должен выглядеть следующим образом:

На этом этапе вы будете заниматься привязкой компонентов виджета к реальным данным. Эти данные представлены в форме переменных контекста. У нашего сенсора есть две доступные переменные:

• Temperature*10 , которая содержит значение температуры, выраженное в градусах Цельсия и умноженное на 10 до целого числа (т.е. значение 234 соответствует 23.4 градусам Цельсия);
• Humidity*10 , которая содержит значение относительной влажности в процентах, умноженное на 10 до целого числа ( т.е. значение 456 соответствует относительной влажности 45.6%).

Давайте сначала привяжем поле переменной Temperature*10 к надписи температуры. Найдите эту переменную в окне селектора объектов под контекстом устройства по умолчанию (должно быть выделено жирным шрифтом). Разверните его, чтобы увидеть поле Temperature*10. Перетащите это поле на надпись температуры:

Вы увидите сообщение о том, какие привязки были созданы:

Аналогичным образом привяжите поле Humidity*10 переменной Humidity*10 к полосе прокрутки при помощи мыши.

А теперь нам необходимо вручную отредактировать созданные привязки. Выберите Корневую панель, кликнув по Корню в верхнем левом углу рабочей формы и откройте его свойство Все привязки в окне свойств.

В таблице должно быть четыре привязки:

Привязки 1 и 3 следует удалить, поскольку они будут пытаться записывать новые значения температуры и влажности в устройство. Эта операция не разрешена, и сервер будет ее блокировать. Удалите эти привязки, кликнув по их числам, а затем кликните Удалить ряд () в инструментальной панели Редактора таблиц данных.

А теперь мы должны исправить значения температуры и влажности, которые были умножены на 10. Отредактируйте поле выражений в оставшихся привязках, добавив в них / 10:

• {.:temperaturei$temperaturei} => {.:temperaturei$temperaturei} / 10
• {.:humidityi$humidityi} => {.:humidityi$humidityi} / 10

Кроме того, необходимо удалить активаторы оставшихся привязок так, чтобы они обрабатывались каждый раз, когда происходит изменение показателя температуры или влажности. Установите для активаторов пустые строки.

Таблица с получившимися в итоге привязками:

Кликните OK, чтобы сохранить таблицу.

Кликните по элементу Переключить оформление () в инструментальной панели. Виджет в рабочей форме станет похож на то, как он выглядел во время обычной операции.

Выберите корневую панель, кликнув по Корню в верхнем левом углу рабочей формы. Установите ширину Окна на 370 , а высоту Окна приложения на 120.

Можно также изменить размер виджета и его компонентов при помощи мыши.  См. Редактировать разметку виджета.

В итоге, шаблон будет выглядеть следующим образом:

Шаблон готов. Кликните Done (готово) ().

Теперь должен быть создан новый контекст виджета (), который появится в Системном дереве:

Пора увидеть наш новый виджет в действии. Щелкните правой кнопкой мыши по любому узлу Системного дерева для устройства (). Вы должны увидеть в контекстом меню новое действие Запустить виджет:

Выберите действие Запустить виджет для определенного сенсора температуры/влажности. В SberMobile IIoT Platform Client появится новое содержащее виджет плавающее окно:

Вот и все! Новый виджет действует, а Вы теперь можете отслеживать текущую температуру и влажность. Информацию о том, как автоматически запустить виджет при запуске SberMobile IIoT Platform Client см в разделе Как создать информационную панель для мониторинга устройства в реальном времени.