Відео: адмінський пульт управління Хабром. Дозволяє регулювати карму, рейтинг, та банити користувачів.
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
- Найдоступніші пристрої, побудовані на базі операційної системи реального часу HMI RTOS. Серія представлена моделями WebOP-///, з діагоналлю екрану 4,3 дюйми, 7 дюймів, 8 дюймів і 10.1 дюйми відповідно.
- Найбільш просунуті моделі, на базі операційної системи Windows CE. Від серії 2000T відрізняються великою кількістю апаратних інтерфейсів, що мають на борту CAN-інтерфейс. Пристрої працюють у розширеному діапазоні температур (-20~60°C) та мають антистатичну захист (Air: 15KV/Contact: 8KV). Лінійка повністю відповідає вимогам стандарту IEC-61000, що дозволяє використовувати пристрої у напівпровідниковому виробництві, де статичні розряди є проблемою. Серія представлена моделями WebOP-//, з діагоналлю екрану 7 дюймів, 10.1 дюйма та 12.1 дюйма відповідно.
Середовище розробки WebAccess/HMI Designer
З коробки термінал WebOP — це просто малопотужний ARM-комп'ютер, на якому можна запускати будь-яке ПЗ, але вся суть цього рішення у фірмовому середовищі розробки промислових інтерфейсів WebAcess/HMI. Система складається з двох компонентів:
- HMI Designer - Середовище розробки інтерфейсів та програмування логіки. Працює під Windows на комп'ютері програміста. Підсумкова програма компілюється в один файл і передається на термінал для виконання рантаймом. Програма доступна російською мовою.
- Час виконання HMI - рантайм для запуску скомпільованої програми на кінцевому терміналі. Може працювати не тільки на терміналах WebOP, але також на комп'ютерах Advantech UNO, MIC та звичайних десктопних комп'ютерах. Існують версії рантайму під Linux, Windows, Windows CE.
Hello world – створення проекту
Почнемо створення тестового інтерфейсу для нашого пульта керування Хабром. Я запускатиму програму на терміналі під керуванням 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 можна завантажити
→
Джерело: habr.com