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


#1

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

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


#2

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

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


#3

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


#4

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

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

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


#5

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

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


#6

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


#7

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


#8

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

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


#9

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

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

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

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

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


#10

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


#11

Особо не напрягаясь “запилил” стандартный 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


Ввод значений для устройства через web-интерфейс
#12

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

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

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


#13

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

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


#14

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


#15

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