UI RU

Пользовательский интерфейс (UI) OWLOS.

Введение

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

Где скачать?

Актуальная версия UI расположена здесь GitHub

Как воспользоваться OWLOS UI?

Как Вы уже, наверное, знаете, одна из основных идей OWLOS - дать возможность решать одни и те же задачи несколькими способами, OWLOS UI не исключение. Существует несколько возможностей и вариантов ее использования:

UI в файлах на локальном диске.

Самый простой и доступный способ использовать UI, к тому же он - очень быстрый. Скопируйте файлы UI к себе на локальный диск. Отредактируйте файл restclientcore.js укажите в качестве host - адрес корневого OWLOS узла в вашей локальной сети. Для использования откройте в web браузере файл index.html.

UI расположено в OWLOS SPIFFS

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

1. используйте загрузку файлов через веб сервер OWLOS. Если UI еще не находится в SPIFFS, вам придется грузить файл за файлом http://owlnode_host:8084/upload или http://192.168/4/1:8084/upload в случае, если OWLOS - в режиме WiFi точки доступа.

2. используйте USB и плагин для работы со SPIFFS для Arduino Studio, например, Arduino ESP8266 filesystem uploader

3. используйте OWLOS сtarter - это - небольшая прошивка от авторов OWLOS, она позволяет установить OWLOS и UI на микроконтроллер из сети Интернет.

Размещенние UI на Веб-сервере

Если у Вас есть Web Server, то поместите файлы UI как статический сайт на хостинг этого сервера. В этом случае вам будет необходимо настроить путь к вашему корневому OWLOS узлу так же, как и в первом случае использования UI.

Организация UI

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

Пункты главного меню.

Пункт меню "Панель устройств".

Содержит виджеты, отображающие состояние устройств - узлов OWLOS, подключенных к UI. О виджетах - ссылка.

Кнопка сохранить Сохраняет изменения, которые пользователь внес в виджеты. Не видна, если изменений нет.

Кнопка выбора режимов просмотра/редактирования Позволяет переключать виджеты между режимами "просмотр" и "редактирование". При активации режима редактирования у виджетов появятся дополнительные пиктограммы.

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

Кнопка добавить виджет Открывает диалог добавления нового виджета.

Пункт меню "Узлы"

Управления узлами, подключенными к UI. На верхнем уровне находится пункт меню добавить узел, его активация приводит к открытию диалога добавления нового узла.

• путь - URL адрес, по которому расположен узел. (локальная сеть или интернет)
• название узла - для отображения в меню "Узлы". Добавление узла требует сохранения.

<<<<<<< HEAD Далее идут пункты, связанные с конкретными подключенными OWLOS узлами, при этом все пункты узлов организованы одинаково.

Далее идут пункты связанные с конкретными подключенными OWLOS узлами, при этом все пункты узлов организованы одинаково.

bcfaa4b30a949d45e1c877b06aa87794a5ecc94b

Важно! По умолчанию создается один узел с именем local. Это - тот узел, с которого загружено UI, или он указан в restcore.js как host узел.

Пункт "Свойства узла"

отображает панель свойств узла - расписать.

После изменения параметра необходимо нажать на кнопку "Set" (Установить), что приведет к передаче значения параметра OWLOS узлу. При этом в момент передачи кнопка "Set" станет недоступной. В случае успеха надпись снова станет зеленой, при неудаче - красной.

• Панель A. Настройка OWLOS RESTful сервера и RESTful клиента. OWLOS обладает встроенным RESTful сервером. Если Вы отключите RESTful сервер на каком-нибудь из узлов OWLOS, UI потеряет с ним связь. Будьте осторожны. При этом RESTful сервер является частью Web Server a.

1. Переключатель включает или выключает OWLOS Web(RESTful) сервер. <<<<<<< HEAD
2. Логин, пароль и порт Web(RESTful) сервера. При изменении порта, если это делается для корневого узла, Вам придется переподключить UI и изменить host корневого узла. =======
3. Логин, пароль и порт Web(RESTful) сервера. При изменении порта, в случае если это делается для корневого узла - вам придется пере подключить UI и изменить host корневого узла.

bcfaa4b30a949d45e1c877b06aa87794a5ecc94b

3. Настройки RESTful клиента на стороне OWLOS узла.

• Панель B. Настройка OWLOS MQTT клиента. Настройки подключения к MQTT брокеру.

1. Переключатель включает или выключает OWLOS MQTT клиент.
2. Адрес и порт MQTT брокера.
3. Идентификатор клиента, логин и пароль для подключения к MQTT брокеру.

• Панель C. Настройка OWLOS OTA клиента. Позволяет включить использование OTA - прошивки узла через WiFi.

• Панель D. Настройка режимов WiFi модуля из UI. Примечания: - UI способно одновременно управлять несколькими OWLOS узлами. При этом доступны настройки WiFi для каждого узла.

- Очевидно, что OWLOS узлы доступны для UI только если они находятся в одной сети. Когда Вы меняете настройки WiFi, есть риск потерять связь с OWLOS, а значит - и управление. Будьте осторожны.

- Рекомендуем перезагружать OWLOS узел, после изменения настроек WiFi, в этом случае изменения быстрее вступят в силу. Используйте кнопку "Reset" в панели "Свойства узла"

Настройки WiFi в UI находятся в разделе меню "Настройки/[имя_узла]/Свойства/Свойства WiFi узла" (Settings/[Node name]/Properties/node WiFi properties)

На рисунке представлена панель "Свойства WiFi узла".

1. Переключатель, включает или выключает использование WiFi в режиме точки доступа.
2. Настройки SSID и пароля WiFi точки доступа.
3. Переключатель, включает или выключает использование WiFi в режиме станции.
4. Настройки SSID, пароля и IP адреса для подключения к WiFi точке доступа - роутеру или другому модулю ESP8266.

• если UI подключено к OWLOS через одну и ту же точку доступа и ошибиться в этих настройках или ввести другую точку доступа - связь с OWLOS для UI будет утеряна.
• то же самое произойдет, если отключить режим станции.
• IP адрес будет выдан WiFi точкой доступа автоматически. Вы можете изменить его, но возможность это сделать зависит от точки доступа и ее настроек.
• если вы используете в качестве точки доступа роутер с возможностью привязки IP адресов к MAC адресам - сделайте такую привязку для всех ваших OWLOS узлов, это поможет избежать путаницы с адресацией и добавить больше порядка в вашу сеть.

5. Уровень WiFi сигнала точки доступа, если этот режим включен (уровень сигнала точки доступа, к которой подключена OWLOS как станция).

• **Панель E. ** Настройка OWLOS UI для данного узла. Важно. Настройки могут быть изменены для любого узла, но само UI считывает и использует настройки только для корневого узла. Другими словами, Вы измените некорневой узел, переподключитесь к нему, только в этом случае будут видны изменения.

1. Настройки UI узла.
2. Сброс узла. Вы можете сбросить любой из подключенных узлов, вызвав в его микроконтроллере Software Reset.

• **Панель F. ** Настройка и получение обновлений.

1. Информация о текущей версии OWLOS и UI, а так же - адрес сервера обновлений.
2. Информация о доступности обновлений на указанном сервере.

Пункт меню "Драйверы"

содержит список подпунктов. Главный пункт "Добавить драйвер" приводит к появлению диалога добавления драйвера устройства в микроконтроллер.

• Тип драйвера
• ID драйвера
• Разъемы.

Далее - пункты со списком драйверов, существующих в узле.

Стандартные драйверы - wifi, esp, network.

Информация о свойствах драйвера представлена в табличном виде. К каждой таблице прикреплены фильтры:

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

Сами таблицы свойств драйверов носят не только информационный характер, но позволяют также управлять текущими значениями свойств, а значит - управлять устройствами, к которым подключен драйвер. Еще одна роль таблиц RESTful API - помощь. Если кликать по полям "Свойства" или "Значение", будут вызываться соответствующие RESTful API.

В одной строке таблицы - одно свойство драйвера. Колонки:

• "#" номер строки - помогает при сортировке.
• Свойство (Property) - название свойства устройства.
• Значение (Value).
• Новое значение (New value).
• "Установить" (Set).
• "Получить" (Get).

Пункт "Скрипт".

Управление скриптами, исполняемыми узлом. Расписать.

Файлы.

доступ к файлам узла. Можно загружать, скачивать и удалять. Привести примеры полезных файлов (логи, списки драйверов, настройки WiFi)

Пункт "Консоль".

Отображает консоль UI (не путать с логом узла).

Режимы работы OWLOS