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 платформу:

    image

    Установка данной платформы также не составляет труда на различный операционных системах и состоит из двух шагов:
    • Установка 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.

    image

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

    image

    Виджет 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.

    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 платформы.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 12

      0
      Как я понял, разработка визуализации (лицензирование) = 0?
      И явно не увидел архивирование тегов, соответственно тренды и алармы…
        0
        Не совсем понял, что вы имеете ввиду насчет лицензирования. Node-red — open source, scadavis.io — Basic plan Free. В этой статье я только показал как использовать вышеупомянутые инструменты для проектирования экранных страниц визализации. Для исторических данных, алармов и ивентов используются другие инструменты, которые я возможно опишу в следующих статьях. Очень удобно для этого использовать time-series database, как InfluxDB c инструментом визуализации Telegraf или Grafana. С помощью Node-red dashboard можно построить простые дашборды с различными видами чартов (трендов), по-моему максимально может кешировать до одного часа.
          0
          по-моему максимально может кешировать до одного часа.

          Там отграничено количество точек, а так — хоть сутки.
        0
        Да, хотел узнать финансовую составляющую разработки, кроме человеко-часов. Это к -«преимущества очевидны».
        Я так понимаю, не захотели использовать сименсовский софт, где преимущества все же более очевидны, из за относительной дороговизны (ну при честном лицензировании). Контроллер (из вашей предыдущей статьи) сименсовский…

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

          0
          Да, действительно, эта статья идет как продолжение предыдущей (про проект с Simatic 1200), но в то же время является самостоятельной. Речь идет о том, что используя связку IoT edge платформу Node-red c такими библиотеками, как scadavis.io можно построить мощный инструмент визуализации. Вы правы, что конкретно для PLC Simatic разработан достаточно хороший софт. Целью статьи не было показать замену WinCC или TIA portal, а лишь альтернативный подход, позволяющий масштабировать систему независимо от вендора. И это не привязано к PLC Siemens, как таковому, более того, Node-red содержит множество плагинов для различных протоколов, а также позволяет написать свои модули. Насчет финансовой состовляющей, если речь идет о конкретном проекте, частично описанном в предыдущей статье, то основной бюджет шкафа автоматики, думаю, занял PLC CPU 1214C DC/DC/DC и SM 1222 DQ16 x 24VDC. Но, как я указал в коментариях, выбор комплектующих выполнял заказчик. И так как система визуализации и контроля не привязана к Simatic, то с моей стороны не составляло никакого труда использовать ее с любыми PLC или микроконтроллерами
          0
          Да, суть статьи я понимаю, хотел выяснить нишу применения данного решения.
          Бесплатно, гибко, для Java ориентированного контингента. Добавьте, поправьте.
            0
            Все верно. Только скорее не для java-разработчиков, а для javascript (Node.js, Angular, VueJs — for uibuilder), если необходимы кастомные решения. А также — эта сфера IIoT (Industrial Internet of Things)
              0
              А разные grafana, kibana и им подобные инструменты не пробовали? Они вроде как open-source, но платные. Я до конца и не понял, как это.
                0
                Пробовал разные подобные инструменты, но в других проектах. Grafana — универсальный open source мощный софт для построения дашбордов, часто используется с Prometheus (платформа позволяющая собирать различные метрики). Kibana (панель визуализации данных) в основном используется с Elasticsearch (поисковый движок с json rest api, использующий Lucene). Мне понравилась связка InfluxDB (база данных с открытым исходным кодом для хранения временных рядов) c инструментом визуализации Chronograf (интервейс для InfluxDB платформы, тоже открытый)
                  0

                  А как работает open source модель grafana? Она открытая, но есть тарифные планы. Или open source только базовый функционал?

          0
          Жду вашей публикации о архивировании + тренды + алармы. В бесплатных решениях — слабое место.

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое