Skip to content

Widgets RU

Konstantin Brul edited this page Mar 16, 2020 · 16 revisions

Виджеты

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

Типы виджетов: Сенсор (Sensor) | Актуатор (Actuator) | Освещение (Light) | Задымленность (Smoke) | Движение (Motion) | Температура (Temperature) | Влажность (Humidity) | График (Graph) | ЖК дисплей (LCD) | Радиальный индикатор (Gauge) | Универсальный виджет (Info)

Добавление нового виджета

Настройка свойств, перемещение и удаление виджета

OWLOS Widgets

Пример размещения виджетов на панели устройств

Существуют следующие типы виджетов:

Sensor

Сенсор

Отображает состояние контактного разъема (Pin), передаваемое драйвером подключенного сенсора.

OWLOS Widgets

Использование виджета сенсор, для отображения текущего состояния контакта, передаваемого драйвером сенсора. Значение влажности отображается в виде текстового значения. Изменение цветового оформления виджета, в зависимости от состояния сетевого подключения узла (1 – в сети, 2 – установка соединения, 3 – не в сети).

Actuator

Актуатор

Отображает состояние бинарного переключателя (кнопки, реле), позволяет управлять переключателем (кнопкой, реле).

OWLOS Widgets

Визуализация управления светильником с помощью виджета "Актуатор". Отображение текущего состояния светильника "вкл." (1) /"выкл." (2). Изменение цветового оформления виджета "Актуатор", в зависимости от состояния сетевого подключения узла (1,2 – в сети, 3 – установка соединения, 4 – не в сети).

Light

Освещение

Отображает значение освещенности, передаваемые драйвером подключенного сенсора освещенности.

OWLOS Widgets

Использование виджета "Освещение" для отображения текущего значения, передаваемого драйвером сенсора освещенности. Значение освещенности отображается в виде визуальной компоненты и сопровождается текстом. Изменение цветового оформления виджета в зависимости от состояния сетевого подключения узла (1,2 – в сети, 3 – установка соединения, 4 – не в сети).

Smoke

Задымленность

Отображает значение задымленности, передаваемое драйвером соответствующего сенсора.

OWLOS Widgets

Использование виджета "Задымленность" для отображения текущего значения, передаваемого драйвером сенсора задымленности. Значение задымленности отображается в виде визуальной компоненты и сопровождается текстом. Изменение цветового оформления виджета, в зависимости от состояния сетевого подключения узла (1,2,3 – в сети, 4 – установка соединения, 5 – не в сети) и ошибки (6).

Motion

Движение

Отображает значения, передаваемые драйвером подключенного детектора движения.

OWLOS Widgets

Отображение текущего значения, передаваемого драйвером сенсора движения. Значение отображается в виде визуальной компоненты и сопровождается текстом. Изменение цветового оформления виджета, в зависимости от состояния сетевого подключения узла (1,2 – в сети, 3 – установка соединения, 4 – не в сети) и ошибки (5).

Temperature

Температура

Отображает значение температуры, полученные от драйвера сенсора температуры (DHT).

OWLOS Widgets

Визуализация данных, полученных от драйвера сенсора температуры, при помощи виджета "Температура". Значение температуры отображается в градусах Цельсия. Изменение цветового оформления виджета "Температура", в зависимости от состояния сетевого подключения узла (1 – в сети, 2 – установка соединения, 3 – не в сети).

Humidity

Влажность

Отображает значение (в %) влажности, полученные от драйвера подключенного сенсора влажности.

OWLOS Widgets

Использование виджета "Влажность" для отображения текущего значения данных, передаваемых драйвером сенсора влажности. Значение влажности отображается в %. Изменение цветового оформления виджета, в зависимости от состояния сетевого подключения узла (1 – в сети, 2 – установка соединения, 3 – не в сети).

Graph

График

Отображает числовые данные в виде графика.

OWLOS Widgets

Использование виджета "График" для отображения накопленых значений температуры (1) и влажности (2).

LCD

ЖК дисплей

Отображает состояние ЖК дисплея (LCD), позволяет выводить сообщения на экран ЖК дисплея и управлять ими.

OWLOS Widgets

Использование виджета ЖК для вывода текста на ЖК экран, подключенный через драйвер. Изменение цветового оформления виджета, в зависимости от состояния сетевого подключения узла (1 – в сети, 2 – установка соединения, 3 – не в сети) и ошибки (4).

Gauge

Радиальный индикатор

Отображает полученное значение в радиальном масштабе допустимых значений.

OWLOS Widgets

Один из примеров возможного использование виджета "Радиальный индикатор" – отображение уровня WiFi сигнала узла. Значение отображается в том виде, в котором оно получено от драйвера WiFi модуля узла. Изменение цветового оформления виджета, в зависимости от состояния сетевого подключения узла (1 – в сети, 2 – установка соединения, 3 – не в сети) и ошибки (4).

Info

Универсальный виджет

Отображает числовое или текстовое значение, полученное от драйвера подключенного устройства (например, DHT).

OWLOS Widgets

Визуализация текстовых и численных данных, полученных от драйверов подключенных сенсоров, при помощи универсального виджета. Изменение цветового оформления виджета, в зависимости от состояния сетевого подключения узла (1,2 – в сети, 3 – установка соединения, 4 – не в сети) и ошибки (5).

New_widget

Добавление нового виджета

Чтобы вывести через пользовательский интерфейс (UI) информацию, передаваемую драйвером подключенного устройства, достаточно нажать на кнопку «Добавить виджет» в правой верхней части панели устройств. В открывшемся диалоговом окне из списка необходимо выбрать нужный узел/драйвер, его свойство и тип виджета для отображения, а затем нажать на кнопку «Добавить».

OWLOS Widgets

На панели устройств появиться новый виджет. Чтобы сохранить изменения, внесенные в пользовательский интерфейс, нажмите на кнопку «Сохранение», которая появится в правой верхней части панели устройств.

Важно! Виджет будет автоматически добавлен к содержимому окна пользовательского интерфейса, если при добавлении нового драйвера подключенного устройства установлен флажок «Добавить виджет».

OWLOS Widgets

Setup_widget

Настройка свойств, перемещение и удаление виджета

Настройка свойств, перемещение и удаление виджета доступны в режиме редактирования. Для перехода к режиму редактирования необходимо нажать на кнопку «Режим редактирования» на панели устройств. При активации этого режима у виджетов появятся дополнительные пиктограммы.

OWLOS Widgets

**Настройка свойств. Чтобы перейти к настройке свойств виджета, достаточно щёлкнуть по пиктограмме «гаечный ключ». После этого появится отдельное окно со свойствами виджета.

OWLOS Widgets

Число доступных для настройки свойств зависит от типа виджета. Внесенные изменения будут отображаться в текущем окне. Их можно применить как для текущего виджета, так и для всех виджетов, нажав соответственно на кнопку «Применить» или «Применить ко всем». Сохраните изменения, внесенные в пользовательский интерфейс, нажав на кнопку «Сохранение» в правой верхней части панели устройств. Вернитесь в режим просмотра, нажав на кнопку "Режим просмотра" в правой верхней части панели устройств.

Перемещение

Для перемещения виджета на одну позицию влево или вправо нужно кликнуть по соответствующей пиктограмме-стрелке в левом или правом нижнем углу виджета.

OWLOS Widgets

Чтобы сохранить изменения, внесенные в пользовательский интерфейс, нажмите на кнопку «Сохранение», которая появилась в правой верхней части панели устройств. Вернитесь в режим просмотра, нажав на кнопку "Режим просмотра" в правой верхней части панели устройств.

Удаление

Для удаления виджета необходимо щёлкнуть по пиктограмме в правом верхнем углу виджета.

OWLOS Widgets

Чтобы сохранить изменения, внесенные в пользовательский интерфейс, нажмите на кнопку «Сохранение», которая появилась в правой верхней части панели устройств. Вернитесь в режим просмотра, нажав на кнопку "Режим просмотра" в правой верхней части панели устройств.