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, Enterprise. Основные характеристики 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 платформу:

Установка данной платформы также не составляет труда на различный операционных системах и состоит из двух шагов:

• Установка Node.js: nodejs.org
• Установка Node-red: npm install -g --unsafe-perm node-red

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



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



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

Создание SCADA-страницы с помощью Template виджета

<div id="office"></div> 
<script src="https://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 для построения визуальных страниц SCADA-системы. Однако это не единственный возможный вариант. Как известно из самого описания, редактор построен на базе 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.



Согласно описанию 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

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

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



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

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

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

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

Преимущества использования Node-red в качестве Web-SCADA подобной системы очевидны. Node-red – популярная open-source IoT платформа, имеющая огромное сообщество, множество различных плагинов и решений, возможность интегрировать различные протоколы. На ресурсе support.industry.siemens также есть мануал по использованию Node-red и обсуждение использования платформы. SCADA-фреймворк типа scadavis.io является удачным примером интеграции хорошо известного среди специалистов подхода визуализации — SCADA-систем и IoT edge платформы.