Русский
Русский
English
Статистика
Реклама

HMI на основе Node-red и Scadavis.io

В настоящее время в связи с ростом популярности концепции IoT и развитем сопутствующих технологий многие производители программного обеспечения для промышленной автоматизации используют это в своих продуктах. Доступ к SCADA-системам через web-интерефейс идея и реализация не новая. Еще лет 10 назад Citect scada позволяла это делать с помощью веб-браузера IE. Но идея IoT это не только доступ к ресурсам через web, а также возможность агрегировать различные сетевые проводные и беспроводные интерфейсы, совмещать различные уровни архитектуры: field, edge, cloud. В поисках возможных решений использования совместного open-source IoT edge платформы и SCADA системы я наткнулся на интересную связку платформы Node-red и SCADA-фреймворк scadavis.io

Scadavis.io


Начну описание scadavis с той информации, которая представлена в официальных источниках. На странице сайта scadavis.io указано: Powerful SCADA-like visualization tools, free-form synoptic graphics for real-time data display. A pure HTML5 solution, mobile friendly, framework agnostic, with no special server requirements needed. All your data and graphics stay on your servers and clients. (Мощные SCADA-подобные инструменты визуализации, сводные графики произвольной формы для отображения данных в реальном времени. Чистое решение HTML5, мобильное, независимое от фреймворка, без особых требований к серверу. Все ваши данные остаются на ваших серверах и клиентах.)

Далее представлены примеры страниц, которые можно спроектировать.

Затем идет информация о графическом редакторе построения экранных страниц SCADAvis.io Synoptic Editor, который можно преобрести в Microsoft Store.



Также на сайте показана таблица, в которой представлены планы использования Scadavis.io. Система имеет три плана: Basic, Pro, Enterprice. Основные отличия Basic плана: стоимость бесплатный, нет технической поддержки, исходный код расположен на SCADAvis.io.

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

На момент исследования набор файлов был следующий:
  • Основной скрипт synopticapi.js, в котором орпеделена функция основного объекта для работы с svg страницами находится на ресурсе scdavis.io.
  • На этом же ресурсе расположены скрипты symbol_webreflection.js, содержащий функции для работы с символами и их свойствами.
  • А также, насколько я понимаю, две проприетарные обфусцированные библиотеки o1.js и o2.js. Детально разбираться в них я не стал, так как особо времени и желания не было.
  • Фреймом для подключения библиотек и отображения визуализации служит synoptic.html файл, расположенный там же.

Подключение скрипта проекта, документация API и Synoptic Editor представлены на ресурсе scadavis.io/learn.html

Далее проект содержит ряд open source библиотек для работы с svg, с различной визуализацией и графиками:
  • Vega-min.js, vega-lite.js vega.github.io/vega С помощью Vega вы можете описать внешний вид и интерактивное поведение визуализации в формате JSON, а также создавать веб-представления с использованием Canvas или SVG.
  • snap.svg-min.js snapsvg.io SVG позволяет создавать интерактивную, независимую от разрешения векторную графику, которая будет отлично смотреться на экране любого размера.
  • jquery.min.js jquery.com jQuery это быстрая, небольшая и многофункциональная библиотека JavaScript.
  • d3.js d3js.org Сочетает мощные компоненты визуализации и управляемый данными подход к манипулированию DOM.
  • chroma.min.js gka.github.io/chroma.js Это небольшая библиотека JavaScript без внешних зависимостей для всех видов преобразования цветов и цветовых шкал.


Node-red


Node-red чрезвычайно популярная платформа. В просторах сети находится огромное количество статей и видеороликов по ней. На wikihandbk.com следующее определение Node-RED это инструмент визуального программирования для интернета вещей, позволяющий подключать друг к другу устройства, API и онлайн-сервисы. Сами авторы позиционируют Node-red как IoT edge платформу:

image

Установка данной платформы также не составляет труда на различный операционных системах и состоит из двух шагов:
  • Установка Node.js: nodejs.org
  • Установка Node-red: npm install -g --unsafe-perm node-red


В блоге Ricardo Olsen показаны шаги по интеграции системы Scadavis.io и платформы Node-red, а также представлены исходные файлы экранных страниц формата svg. Автор рекомендует использовать плагин для Node-red node-red-contrib-uibuilder, который позволяет создвать динамический веб-интерфейс, используя различные js-библиотеки, а также использовать веб-фреймворк VueJS.

image

Однако это не единственный способ, позволяющий построить пользовательский интерфейс на базе Node-red. Имеется достаточно популярный модуль, содержащий ряд нод для создания дашбордов в реальном времени от создателей самой платформы node-red-dashboard.

image

Виджет Template может содержать любые допустимые директивы html и Angular / Angular-Material.Этот узел можно использовать для создания динамического элемента пользовательского интерфейса, который изменяет свой внешний вид на основе входного сообщения и может отправлять сообщения обратно в Node-RED. С помощью ноды Template можно создать объект экранной страницы Scadavis, задать необходимые свойства, эмулировать поведение объекта и связать теги (переменные) экранной страницы с внешней средой

Создание SCADA-страницы с помощью Template виджета
<div id="office"></div> <script src="http://personeltest.ru/aways/scadavis.io/synoptic/synopticapi.js">var office = new scadavis({  container: "office", //Указание созданного ранее контейнера  iframeparams: 'frameborder="0" height="610" width="687"',  svgurl: "drawing.svg" //SVG страница});office.zoomTo(0.82); //Масштабирование изображения        //Эмуляция поведения тегов        setInterval(function () {office.storeValue("TAG2", 100 + Math.random() * 80);office.storeValue("TAG3", 120 + Math.random() * 60);office.storeValue("TAG4", 150 + Math.random() * 60);office.storeValue("TAG5", 110 + Math.random() * 30);office.storeValue("TAG6", 200 + Math.random() * 100);office.storeValue("TAG7", 130 + Math.random() * 40);office.updateValues();value = 130 + Math.random() * 40;}, 5000);</script>


В статье Node-RED Dashboard Template Examples (AngularJS) хорошо показаны примеры взаимодействия ноды Template с другими нодами, которые обмениваются сообщениями msg в контексте Angular Scope.
Допустим, мы ходим в качестве свойства объекта msg.topic передавать имя тега, а в качестве значения msg.payload. И при каждом событии изменения объекта msg обновляем объект SCADA с помощью методов storeValue и updateValues

 (function(scope) {        scope.$watch('msg', function(msg) {            if (msg)                 office.storeValue(msg.topic, msg.payload);                office.updateValues();            }        });        })(scope);    

Также используя пример с ресурса https://scadavis.io/learn.html и функционал ноды Template можно обрабатывать различные события SCADA-объекта и передавать их другим нодам, например так:
(function(scope) {substationsynoptic.on("click", function (event, tag) {    var v = substationsynoptic.getValue(tag);    if (event.currentTarget.id === "TAPUP")        substationsynoptic.setValue(tag, v + 1, false, false);    else        if (event.currentTarget.id === "TAPDOWN")            substationsynoptic.setValue(tag, v - 1, false, false);    if (event.currentTarget.id === "XCBROPEN")        substationsynoptic.setValue(tag, false, false, false);    else        if (event.currentTarget.id === "XCBRCLOSE")            substationsynoptic.setValue(tag, true, false, false);    if (v === true)        substationsynoptic.setValue(tag, false, false, false);    else        if (v === false)            substationsynoptic.setValue(tag, true, false, false);    scope.send( {'payload':{ 'tag': tag, 'value': v }} );});})(scope);


Графический редактор


Пару слов о графическом редакторе построения визуальных страниц для СКАДА-системы. Как уже упоминалось выше на офсайте предлагается приобрести SCADAvis.io Synoptic Editor. Одняко, опять же это не единственный возможный вариант. Как известно из самого описания редактор построен на базе Inkscape SVG Editor. Практически это Inkscape с плагином позволяющий назначать теги (переменные) и другие свойства различным графическим компонентам svg файла. Т.е. для простого отображения странице в контексте scadavis достаточно иметь svg файл, который можно редактировать в любом удобном редакторе. Но на этом не все. Находится большое сходство между редактором компании ECAVA INTEGRAXOR www.integraxor.com Inkscape 0.91 SAGE 4.16 распостраняющимся бесплатно (необходимо только зарегистрироваться на сайте) и Synoptic Editor. Как в итоге оказалось, действительно возможно создавать и редактировать svg файлы для Scadavis, используя Inkscape 0.91 SAGE 4.16. Разница наблюдается при проектировании скриптовой анимации и некоторых других специфических вещах, которые отсутствуют в Object properties редактора SAGE.

image

Согласно описанию SCADAvis.io Synoptic Editor, для того чтобы назначить цвет объектов по условию включения, необходимо в колонке Limit указать цифру 2:

  • 0 not initialized state
  • 1 false (off) state
  • 2 true (on) state
  • 129 false (off) state plus failed value
  • 130 true (on) state plus failed value

image

Плагин для работы с PLC Siemens


В арсенале Node-red имеется плагин для работы с PLC Siemens node-red-contrib-s7, основанный на фреймворке nodeS7. Плагин достаточно прост и интуитивно понятен в использовании. Он содержит три ноды: S7 in, S7 out, S7 control. В основном используются первые две ноды для чтения и записи тегов в PLC. Один ньюанс, который нужно учитывать при работе с S7-1200, описан в доке к плагину. Я с этим сталкнулся ранее, когда использовал библиотеку Snap7

image

Необходимы некоторые дополнительные шаги настройки в ПЛК:

Optimized block access должен быть отключен для тех DB блоков, к которым мы хотим получить доступ
image

В разделе Защита свойств ЦП установите флажок Разрешить доступ с помощью PUT / GET
image

Краткое заключение


Преимущества подхода использования Node-red в качестве Web-SCADA подобной системы очевидны. Node-red популярная open-source IoT платформа, имеющая огромное сообщество, множество различных плагинов и решений, возможность интегрировать различные протоколы. На ресурсе support.industry.siemens также есть мануал по использованию Node-red и обсуждение использования платформы. SCADA-фреймворк такой, как scadavis.io является хорошим примером интеграции хорошо известного среди специалистов подхода визуализации SCADA-систем и IoT edge платформы.
Источник: habr.com
К списку статей
Опубликовано: 22.06.2020 20:08:04
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Angular

Scada

Интернет вещей

Промышленное программирование

Iot platform

Node-red

Siemens

Javascript

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru