Демонстрационный веб-интерфейс

Здравствуйте, Коллеги.
Изучая данный форум, я узнал, что у WB5 обновился web-интерфейс и добавилась поддержка новых устройств.
Очень хотелось бы увидеть хотя бы часть нововведений в вашем демонстрационном веб-интерфейсе, пары выложенных картинок явно недостаточно для понимания текущих возможностей устройства “из коробки”. Мне, например, очень хотелось бы узнать - отображается ли состояние подключенного аккумулятора, уровень gsm-сигнала, внутр.температура самого контроллера, иная системная информация.

Спасибо.
С уважением,
Алексей.

Да, спасибо, проблему осознаём, работаем над этим.

По конкретным вопросам: по аккумулятору отображается статус присутствия, статус зарядки, напряжение. По напряжению можно понять, когда ему остаётся жить недолго. Уровень сигнала GSM сейчас в веб-интерфейс не протаскивается по-умолчанию, но это можно тривиально написать на движке правил. Внутренняя температура не измеряется, есть только данные по температуре процессора (на кристалле), но они сейчас тоже не протаскиваются в веб-интерфейс. Можно подключить прямо на разъём 1-wire копеечный датчик DS18B20, он начнёт показывать температуру в интерфейсе.
Иная системная информация: ip-адреса по интерфейсам, аптайм, версия прошивки

Евгений, это важно!
У нас, например, большинство закупок происходит через демонстрации их свойств и обсуждения.
Не могли бы вы назвать примерные сроки? Неделя, месяц, квартал?
Спасибо.

Неделя-две. Мы прямо сейчас над этим работаем, соответствующие разделы сейчас наполняются.

Вот тут, например, появилось актуальное описание и много скриншотов: http://contactless.ru/wiki/index.php/Веб-интерфейс_Wiren_Board

До настроек ещё не дошли.

Добрый день, Евгений.
С момента создания данной темы прошел уже 1 месяц, а демонстрационный web-интерфейс находится в изначальном состоянии. К сожалению, не работает и стенд-онлайн(видео).
Прошу прощения за навязчивость, но хотелось бы узнать о планах и примерных сроках обновления данных ресурсов.

Спасибо.
С уважением,
Алексей.

Стенд закрыт на обновление, пересобираем.
Про новый веб-интерфейс появилось очень подробное описание в вики, со скриншотами, посмотрите: http://contactless.ru/wiki/index.php/Веб-интерфейс_Wiren_Board

Добавьте, пожалуйста, на стенд: электрический счетчик, магнитный или электромеханический замок и датчик движения. Очень интересно увидеть их работу - сбор статистики и логи, открытие/закрытие замка, реакцию системы на движение или смс.

Есть, 4 штуки разных.

Добавлять скорее всего не будем: дорого, и совсем не наглядно. По способу подключения электромагнитный замок полностью идентичен лампочке на 12В. А лампочки на 12В у нас там стоят. Можно просто в интерфейсе одну из них обозначить “замок” и смотреть когда он открыт и когда закрыт.

Хотел спросить у форумчан. Есть ли какая-то вменяемая альтернатива встроенному интерфейсу от WB? Чтобы выводить данные с ПЛК в виде таблиц, графиков, сообщений.

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

Из того, что удалось найти на форуме пока схема выглядит так:

  1. WB -> MQTT-брокер на облачном сервисе -> UI к этому сервису
  2. Какой-то скрипт внутри WB -> локальная БД -> UI к этой базе данных

А почему нельзя сделать UI, который будет сразу читать данные по MQTT c WB?

Ну в п.1 можно убрать “MQTT-брокер на облачном сервисе” и получите что вам нужно. Большинство сервисов умеют работать не только со своим брокером.

Особо не напрягаясь “запилил” стандартный WebUI


Потом сделал простенькое приложение на Android, чтобы выводило только одну страничку из WebView и прикрепил на стенку щита.

На втором этаже похожий, только без контроллера.(связаны по RS232)
Переименовал /var/www/index.html в service.html, а вместо него выложил урезанный index.html
index.txt (9,4 КБ)

в папку /var/www/styles/ добавил custom.css
custom.txt (3,1 КБ)

Чтобы работала настройка температуры в директорию /usr/share/wb-mqtt-confed/schemas добавить схему wb-mqtt-setpoints.schema.json
wb-mqtt-setpoints.schema.json (3,3 КБ)
в директорию /mnt/data/etc добавить данные wb-mqtt-setpoints.conf
wb-mqtt-setpoints.conf (6,0 КБ)

в директорию /etc добавить ярлык с именем wb-mqtt-setpoints.conf, ссылающийся на адрес /mnt/data/etc/wb-mqtt-setpoints.conf

2 лайка

Flagman, а на новом интерфейсе вы пробовали сделать тоже самое.

Мне нужно сделать экран примерно такой, как ваш экран “Настройки температуры”,
но я не понимаю, как это сделать, а в документации не нашел объяснения.

Как связываются файлы html и conf между собой? Как задается внешний вид формочек: размеры, цвет? Если я хочу выводить не только прямоугольники, но и круги, тексты, поля ввода, кнопки, то как это сделать? Связка между файлами html и conf - это особенность AngularJS или WB UI?

На WebUI 2.0 сделал попытку, но с ходу не смог разобраться.
Экран “Настройки температуры” программно будет такой же как и в первой версии, главное это то, как его вызывать из меню. WebUI построен по принципу MVC, когда есть некая “рамка” внутри которой существует программный движок, “подтягивающий” содержимое в зависимости от сформированного запроса. По этому запросу берется шаблон, частью которого является conf файл и движок динамически “рисует” html файл, который уже понимает браузер и может его вывести пользователю.

Что касается внешнего вида, то он уже давно задается атрибутами внутри html-тегов вида “nav-brand” или “navbar-collapse”, записанных в css файлах. Это как бы табличка именованных стилей, которые “подтягиваются” в html-тег в процессе отрисовки страницы. Раньше эти стили просто вписывали внутрь тега и это было очень громоздко, теперь достаточно указать ссылку на требуемый набор, чтобы он применился к тэгу. А в страничку в начале вписывается только ссылки на файлы css, в которых движку указывается где искать эти наборы. Подробнее про это по поиску “Bootstrap”.
WebUI построен с использованием фреймворка AngularJS, соответственно чтобы понимать что и как там можно изменить, видимо необходимо ознакомиться хотя бы с основами работы в этой среде.
Как соберусь, сделаю видео, чтобы было понятнее и выложу на канал Wirenboard Setpoint.
По конкретике - пишите на мыло controllerwirenboard@gmail.com.

1 лайк

Насколько я понимаю, внутри AngularJS должны быть какие-то примитивы, из которых можно сделать простую мнемосхему?

Точно не могу сказать, так как именно этот фреймворк не знаю.
Мне пока представляется, что надо понять на каких конвенциях принято в Wirenboard строить интерфейс.
Но то что свои странички с настройками можно написать и увидеть, это да!