Видео: админский пульт управления Хабром. Позволяет регулировать карму, рейтинг, и банить пользователей.
TL;DR: в статье я попробую создать шуточный пульт управления Хабром, используя среду разработки промышленных интерфейсов Webaccess/HMI Designer и терминал WebOP.
Человеко-машинный интерфейс (англ. Human-machine interface, HMI) — это набор систем для взаимодействия человека с управляемыми машинами. Обычно этот термин применяется для промышленных систем, в которых есть оператор и пульт управления.
WebOP — автономный промышленный терминал для создания человеко-машинных интерфейсов. Используется для создания пультов управления производством, систем мониторинга, диспетчерских, контроллеров умного дома, и т.д. Поддерживает прямое подключение к промышленному оборудованию, может работать в составе SCADA-системы.
Терминал WebOP — аппаратная часть
Терминал WebOP — это маломощный компьютер на базе ARM-процессора, в едином корпусе с монитором и тачскрином, предназначенный для запуска программы с графическим интерфейсом, созданной в HMI Designer. В зависимости от модели, терминалы имеют на борту различные промышленные интерфейсы: RS-232/422/485, CAN-шину для подключения к автомобильным системам, порт USB Host для подключения дополнительной периферии, порт USB Client для подключения терминала к компьютеру, аудиовход и аудиовыход, картридер MicroSD для энергонезависимой памяти и переноса настроек. Устройства позиционируются в качестве бюджетной замены моноблоков, для задач, не требующих мощных процессоров и ресурсов полноценного десктопного компьютера. WebOP может работать как автономный терминал для управления и ввода/вывода данных, в паре с другими WebOP, или в составе SCADA-системы.
Терминал WebOP может подключаться напрямую к промышленным устройствам
Пассивное охлаждение и защита IP66
Благодаря низкому тепловыделению, некоторые модели WebOP выполнены полностью без активного воздушного охлаждения. Это позволяет монтировать устройства на объектах, критических к уровню шума, и снижает количество пыли, попадающее внутрь корпуса.
Лицевая панель выполнена без зазоров и стыков, имеет уровень защиты IP66, и допускает прямое попадание воды под напором.
Задняя панель терминала WOP-3100T
Энергонезависимая память
Для предотвращения потери данных в WebOP есть 128Кб энергонезависимой памяти, с которой можно работать так же, как с RAM. В ней можно хранить показания счетчиков и другие критически важные данные. В случае сбоя питания, данные будут сохранены, и восстановятся после перезагрузки.
Удаленное обновление
Программу, запущенную на терминале, можно обновлять удаленно по Ethernet-сети или через последовательные интерфейсы RS-232/485. Это упрощает обслуживание, так как избавляет от необходимости обходить все терминалы для обновления ПО.
Модели WebOP
Серия 2000T — наиболее доступные устройства, построенные на базе операционной системы реального времени HMI RTOS. Серия представлена моделями WebOP-2040T/2070T/2080T/2100T, с диагональю экрана 4,3 дюйма, 7 дюймов, 8 дюймов и 10.1 дюйма соответственно.
Серия 3000T — более продвинутые модели, на базе операционной системы Windows CE. От серии 2000T отличаются большим числом аппаратных интерфейсов, имеют на борту CAN-интерфейс. Устройства работают в расширенном диапазоне температур (-20~60°C) и имеют антистатическую защиту (Air: 15KV/Contact: 8KV). Линейка полностью отвечает требованиям стандарта IEC-61000, что позволяет использовать устройства в полупроводниковом производстве, где статические разряды являются проблемой. Серия представлена моделями WebOP-3070T/3100T/3120T, с диагональю экрана 7 дюймов, 10.1 дюйма и 12.1 дюйма соответственно.
Среда разработки WebAccess/HMI Designer
Из коробки терминал WebOP — просто маломощный ARM-компьютер, на котором можно запускать любое ПО, но вся суть этого решения в фирменной среде разработки промышленных интерфейсов WebAcess/HMI. Система состоит из двух компонентов:
- HMI Designer — среда разработки интерфейсов и программирования логики. Работает под Windows, на компьютере программиста. Итоговая программа компилируется в один файл и передается на терминал, для выполнения рантаймом. Программа доступна на русском языке.
- HMI Runtime — рантайм для запуска скомпилированной программы на конечном терминале. Может работать не только на терминалах WebOP, но также на компьютерах Advantech UNO, MIC, и обычных десктопных компьютерах. Существуют версии рантайма под Linux, Windows, Windows CE.
Hello world — создание проекта
Начнем создание тестового интерфейса для нашего пульта управления Хабром. Я буду запускать программу на терминале WebOP-3100T под управлением WinCE. Для начала создадим новый проект в HMI Designer. Для запуска программы на WebOP важно выбрать корректную модель, от этого будет зависеть формат итогового файла. На данном шаге можно также выбрать десктопную архитектуру, тогда итоговый файл будет скомпилирован под рантайм X86.
Создание нового проекта и выбор архитектуры
Выбор коммуникационного протокола, по которому будет происходить загрузка скомпилированной программы в WebOP. На данном шаге можно выбрать последовательный интерфейс, либо указать IP-адрес терминала.
Интерфейс создания проекта. В левой части — древовидная схема из компонентов будущей программы. Пока нас интересует только пункт Screens, это непосредственно экраны с элементами графического интерфейса, которые будут выводится на терминал.
Для начала создадим два экрана с текстом «Hello World» и возможностью переключаться между ними с помощью кнопок. Для этого добавим новый экран Screen #2, и на каждый экран добавим текстовый элемент и две кнопки переключения между экранами (Screen Buttons). Каждую кнопку настроим на переключение на следующий экран.
Интерфейс настройки кнопки переключения между экранами
Программа «Hello World» готова, теперь можно ее скомпилировать и запустить. На этапе компиляции могут быть ошибки в случае неправильно указанных переменных или адресов. Любая ошибка считается фатальной, программа будет скомпилирована только в случае отсутствия ошибок.
В среде предусмотрена возможность симуляции терминала, для того, чтобы можно было отлаживать программу на компьютере локально. Есть два вида симуляции:
- Онлайн-симуляция — все внешние источники данных, указанные в программе, будут задействованы. Это могут быть УСО или устройства, подключенные по последовательным интерфейсам или Modbus TCP.
- Офлайн-симуляция — симуляция без использования внешних устройств.
Пока внешних данных у нас нет, используем офлайн-симуляцию, предварительно скомпилировав программу. Итоговая программа будет находится в папке проекта, с именем ИмяПроекта_ИмяПрограммы.px3
Запущенная в симуляции программа может управляться курсором мыши так же, как бы это происходило на тачскрине терминала WebOP. Видим, что все работает, как и задумано. Отлично.
Для загрузки программы на физический терминал достаточно нажать кнопку Download. Но так как я не настраивал подключение терминала к среде разработки, можно просто перенести файл, используя USB-флешку или карту памяти MicroSD.
Интерфейс программы интуитивно понятен, я не стану разбирать каждый графический блок. Создание фонов, фигур, текста будет понятно любому, кто использовал программы, похожие на Word. Для создания графического интерфейса не требуется навыка программирования, все элементы добавляются перетаскиванием мышью на форму.
Работа с памятью
Теперь, когда мы умеем создавать графические элементы, изучим работу с динамическим содержимым и скриптовым языком. Создадим столбчатую диаграмму, с отображением данных из переменной U$100. В настройках диаграммы выберем тип данных: 16-битное целое число, и диапазон значений диаграммы: от 0 до 10.
Программа поддерживает написание скриптов на трех языках: VBScript, JavaScript и собственный язык. Я буду использовать третий вариант, потому что для него есть примеры в документации и автоматическая справка по синтаксису сразу в редакторе.
Добавим новый макрос:
Напишем простой код для постепенного изменения данных в переменной, которую можно будет отслеживать на диаграмме. Будем прибавлять 10 к переменной, и обнулять, когда она будет больше 100.
$U100=$U100+10
IF $U100>100
$U100=0
ENDIF
Для выполнения скрипта в цикле, установим его в настройках General Setup как Main Macro, с интервалом выполнения 250ms.
Скомпилируем и запустим программу в симуляторе:
На данном этапе мы научились манипулировать данными в памяти и отображать их в наглядном виде. Этого уже достаточно, чтобы создать простую систему мониторинга, получая данные с внешних устройств (датчиков, контроллеров) и записывая их в память. В HMI Designer доступны разные блоки отображения данных: в виде круговых циферблатов со стрелками, различных диаграмм, графиков. С помощью скриптов на JavaScript можно реализовать загрузку данных из внешних источников по HTTP.
Пульт управления Хабром
Используя полученные навыки, сделаем шуточный интерфейс админского пульта управления Хабром.
Наш пульт должен уметь:
- Переключать профили пользователей
- Хранить данные кармы и рейтинга
- Изменять значения кармы и рейтинга с помощью ползунков
- При нажатии кнопки «забанить» профиль должен помечаться как забаненный, аватарка должна меняться на зачеркнутую
Каждый профиль будем выводить на отдельной странице, поэтому создадим по странице для каждого профиля. Карму и рейтинг будем хранить в локальных переменных в памяти, которые будут инициализироваться с помощью Setup Macro при запуске программы.
Картинка кликабельна
Регулировка кармы и рейтинга
Для регулировки кармы будем использовать ползунок (Slide Switch). В качестве адреса записи указываем переменную, инциализированную в Setup Macro. Ограничим диапазон значений ползунка от 0 до 1500. Теперь при движении ползунка новые данные будут записываться в память. При этом изначальное состояние ползунка будет соответствовать значениям переменной в памяти.
Для вывода числовых значений кармы и рейтинга будем использовать элемент Numeric display. Принцип его работы аналогичен диаграмме из примера программы «Hello World», просто указываем адрес переменной в Monitor Address.
Кнопка «забанить»
Кнопка «забанить» реализована с помощью элемента Toggle Switch. Принцип хранения данных аналогичен примерам выше. В настройках можно выбрать разный текст, цвет или изображение, в зависимости от состояния кнопки.
В момент нажатия кнопки, аватарка должна зачеркиваться красным. Это легко реализовать с помощью блока Picture Display. Он позволяет задать несколько изображений, привязанных к состоянию кнопки Toggle Switch. Для этого блоку указывается такой же адрес, как у блока с кнопкой, и количество состояний. Аналогичным образом настроена картинка с шильдиками под аватаркой.
Заключение
В целом, продукт мне понравился. Ранее у меня был опыт использования для аналогичных задач планшета на Android, но разработка интерфейса для него существенно сложнее, а браузерные API не позволяют полноценно получить доступ к периферии. Один терминал WebOP может заменить связку из Android-планшета, компьютера и контроллера.
HMI Designer, несмотря на архаичный дизайн, довольной продвинут. Без особенных навыков программирования можно быстро набросать работающий интерфейс. В статье не рассматриваются все графические блоки, которых там очень много: анимированные трубы, баллоны, графики, тумблеры. Он из коробки поддерживает множество популярных промышленных контроллеров, содержит коннекторы баз данных.
Ссылки
Среду разработки WebAccess/HMI Designer и Runtime можно скачать здесь
→ Исходники проекта пульта управления Хабром
