«Прелюдия»
В продолжение предыдущей истории, я расскажу о создании средства отображения информации в моей квартире (HMI, SCADA называйте как хотите).
На текущий момент я не встретил SCADA –системы, которые отвечали моим требованиям:
— клиентская часть должна работать на любой платформе, а особенно на мобильной платформе;
— бесплатность системы
— доступ к данным от ПЛК по OPC — технологии.
Итого поискав варианты SCADA (с крэком и без) я понял, что варианты в основном корявые или дорогие. Решил, что надо идти другим путем и путь этот называется «свой костыль плюс framework». Дальше я рыл гугл — Node ModBus-клиенты, самопальные PHP скрипты и т. д. И из чего что было я выбрал CSWorks. Установил, настроил, работает и вроде неплохо работает + HTML5. Лицензия распространяется «Бесплатно 999 переменных, 1 сессия» и это меня устроило. И я остановился на CSWorks.
Ниже я постарался сделать не большую инструкцию по настройке CSWorks.Наверно инженерам по промышленной автоматики, будет полезна эта инструкция, так как вы сможете сделать достаточные простые (и сложные) проекты через web интерфейс;
Все свои действия я буду описывать на следующем оборудовании:
ПК: Win 10, OPC Codesys v2, IIS 10
ПЛК: ABB AC500 PM554-Ethernet
«Установка, настройка серверного приложения»
Подготовка к установки CSWorks:
— Устанавливаем дополнительные компоненты (IIS и ASP) в «установка и удаление программы»,
— Дальше перегружаемся и заходим в настройки IIS проверяем, включен ли сервер IIS и включен ли ASP.NET
— Делаем в DefaultAppPool по умолчанию ASP.NET v4.0 Classic
— если у вас 64 битная система делаем вот так
Установка платформы CSWorks (далее по тексту ЦС)
— Заходим на сайт CSWorks
— Выбирает разрядность системы X86,X64, скачиваем. Все должно быть без ошибок. Дальше перегружаем систему.
Настраиваем компоненты
— Надо настроить DCOM для OPC сервера Codesys v2 в системе (гугл в помощь вам). Перегрузить и проверить доступность его из вне.
— CSWorks у вас должен появиться в службах винды. В основном, я использую LiveData, остальные службы CSWorks можно отключить.
Настраиваем конфигурацию CSWorks
— Заходим в папку C:\Program Files\CSWorks\Framework\Server (путь может быть различен у Х86 и Х64)
— Видим файл под названием CSWorks.Server.LiveDataService.exe.config, открываем.
— Находим строчку
<opcLiveDataSources type="CSWorks.Server.DataSource.Opc.OpcLiveDataSource, CSWorks.Server.OpcProvider">
И меняем параметры ЦС-а под себя — мой пример
<opcLiveDataSources type="CSWorks.Server.DataSource.Opc.OpcLiveDataSource, CSWorks.Server.OpcProvider"> <opcLiveDataSource name="PLC" hostName="localhost" progId="CoDeSys.OPC.02" subscriptionUpdateRate="1000" resetTimeout="5"> <templates> <template name="AnalogAI" type="Double" readPath="PLC:($tagName)" canWrite="true" /> <template name="AnalogINT" type="Int16" readPath="PLC:($tagName)" canWrite="true" /> <template name="Bool" type="Boolean" readPath="PLC:($tagName)" canWrite="true" /> <template name="String" type="String" readPath="PLC:($tagName)" canWrite="true" /> </templates> </opcLiveDataSource> </opcLiveDataSources>
Что тут надо менять
— Настройка привязки к серверу
<opcLiveDataSource name="НАЗЫВАЕМ СОЕД. КАК ВЫ ХОТИТЕ" hostName="Расположение в IP или локалхост" progId="Название опс сервера как называется в OPC клиентах" subscriptionUpdateRate="1000" resetTimeout="5">
— Строчки объявления типов данных, с привязкой их к OPC серверу
<template name="Называем как хотим" type="Тип данных в ЦС" readPath="название переменной в OPC" canWrite="Разрешить на запись да или нет" />
То есть, в конфигурации ЦС-а мы указываем, то что у него есть имя оно ассоциируется с типом данных «таким». Например, с типом данных int16 и с внутреннем именованием в javascript AnalogINT. Сами переменные мы будет прописывать позже.
— Дальше мы идем в папку C:\Program Files\CSWorks\Web\WebServices\Rest и открываем файл web.config. Тут надо указать ЦС-у, к какому OPC серверу подключиться:
liveDataPartition name="partition1" primaryLiveDataServer="liveDataServer_1_primary" secondaryLiveDataServer=""> <dataSources> <dataSource name="PLC"/> </dataSources>
Как вы видите, в dataSource name=«PLC» прописан источник данных под названием PLC — это название которое мы указали в opcLiveDataSource name=«PLC».
— Аналогично делаем в C:\Program Files\CSWorks\Web\WebServices\Soap\LiveData
<liveDataTopology> <liveDataPartitions> <liveDataPartition name="partition1" primaryLiveDataServer="liveDataServer_1_primary" secondaryLiveDataServer=""> <dataSources> <dataSource name="PLC"/> </dataSources> </liveDataPartition> </liveDataPartitions>
Этап настройки закончили, перезагружаем ОСь. После загрузки ОСи проверяем, что служба ЦС запустилась и она инициализировала OPC сервер и обмен данными идет.
Настраиваем веб страницу, подключаем скрипты:
— Переносим из C:\Program Files\CSWorks\Framework\Client\Html5 скрипт csworks.core.js в папку сервера IIS. C:\inetpub\wwwroot\JS (для удобства надо создать папку для скриптов например JS и туда их все поместить)
Для работы ЦС надо скачать и подключить к странице следующие скрипты (версии любые):
а) jquery-2.1.1.js
б) knockout-2.3.0.min.js
— Создаем HTML страницу (для удобства разработки страниц, устанавливаем Subline) с именем index.html с текстом:
<!doctype html> <html> <head> <title>НАША СТРАНИЦА</title> <meta charset="UTF-8"> <xmlns="http://www.w3.org/2000/svg"> <xmlns:xlink="http://www.w3.org/1999/xlink"> <!—Начало - Ниже подключаем скрипты на страницу --> <script type="text/javascript" src=" JS/jquery-2.1.1.js"></script> <script type="text/javascript" src=" JS/knockout-2.3.0.min.js "></script> <script type="text/javascript" src="JS/csworks.core.js"></script> <!—Конец - Ниже подключаем скрипты на страницу --> <!— Ниже подключаем скрипт объявления переменных ЦС на страницу --> <script type="text/javascript" src="JS/PLC.js"></script> </head> <body> <!— Тут у нас будет визуализация, мы вернемся сюда позже--> </body> </html>
— Сохраняем страницу и переходим к объявлению переменных. В саблайне создаем скрипт под названием PLC.js (можете назвать его как вы хотите главное подключите его).Ниже будет представлен простой пример на 4 переменные с разными типами.
function dataManagerUpdateHandler(responseItems) { } function dataManagerErrorHandler(data, httpStatus) { } function MyViewModel() { // начало - Вот начинаем объявлять переменные this.AI_T_ULICA = new $.csworks_core.FloatDataItem("fddc58f7-a215-406c-8909-4bfe4728a9fc", "PLC", "AnalogAI", "tagName=.OUT_T_ULICASUN;", 1); this.setpoint_T_SPALNYA = new $.csworks_core.IntDataItem("57e71dd1-169b-4ece-917b-e5906c674522", "PLC", "AnalogINT", "tagName=.setpoint_T_SPALNAY;", 0); this.KM8_POL_TUALET = new $.csworks_core.BoolDataItem("a8cf572e-843d-400a-83a5-7171062ed96b", "PLC", "Bool", "tagName=.KM8_POL_TUALET;"); this.door_event1= new $.csworks_core.StringDataItem("2566ed88-c5af-40e1-ab6c-429c7402b5cf", "PLC", "String", "tagName=.door_event1;"); // конец - Вот начинаем объявлять переменные } var g_vm = new MyViewModel(); var g_dm = new $.csworks_core.LiveDataManager("8a93ccaa-1a4b-482a-92cc-f1ed590fb033", 250, 5000, "../CSWorksRest/LiveData/", dataManagerUpdateHandler, dataManagerErrorHandler); // начало - Вот начинаем добавлять в модель кнокаута g_dm.addDataItem(g_vm.AI_T_ULICA); g_dm.addDataItem(g_vm. setpoint_T_SPALNYA); g_dm.addDataItem(g_vm. KM8_POL_TUALET); g_dm.addDataItem(g_vm. door_event1); // конец - Вот начинаем добавлять в модель кнокаута ko.applyBindings(g_vm); g_dm.start();
Вот тут мы сохраняем скрипт и начинаем разбирать ху из ху тут:
— Объявляем переменные в строке
this.”1название переменной используется в веб сервере» = new $.csworks_core.”Тут описывается тип данных”DataItem("” здесь забиваем GUID код которые генерируем из гугла”", "Название ситочника данных сервера", "Опять тип переменных из конфигурации", "tagName=”Название переменной из OPC сервера, у меня начинаются с точки”;", “Тут кол-во цифр после точки 0,1101”);
GUID — генерировать надо для каждой переменной свой, но GUID код сервера не меняем.
-Дальше ниже эту переменную заносим в модель кнокаута
g_dm.addDataItem(g_vm.” 1название переменной используется в веб сервере ”);
-Теперь все готово, возвращаемся к шаблону index.html и ниже я приведу немного примеров, как работать с переменными из HTML и javascript.
Работаем с переменными из web сервера
Сделаем индикацию состояния лампы
1) С помощью SVG графики (гугл вам в помощь что это) используем прямоугольник
В боди шаблона добавляем
<svg> <rect y="100" x="100" data-bind="attr: { fill:( KM8_POL_TUALET.value() > '0') ? '#dee2e2' : '#33FF99'}" height="200px" width="200px" ></rect> </svg>
Как вы видите тут используется jquery для управления свойством заливка — fill для прямоугольники. И используется условие — если значение больше 0, тогда это свойства присвоить значение: Цвет такой то, если нет то другой. Сохраняем, проверяем
2) Картинка отображает состояние переменной
<img width="100" height="100" data-bind="attr: { src:( KM8_POL_TUALET.value() > '0') ? 'img/pol_ico_0.png' :'img/pol_ico_1.png'}" style='top: 495px; left: 659px; opacity: 0.9' >
3) Выводим температуру, аналоговое значение
<a href="#">Темп-ра на улице: <span data-bind="text: AI_T_ULICA.value()"></span> C° </a> <br>
4) Выводим текстовую переменную
Дверь открывалась:<span data-bind="text: door_event1.value" y="20" x="25"> </span>
5) Вот пример кнопки в javascript:
$("#toggle_bms_zal_lustra").click(function () { g_vm.bms_zal_lustra.writeValue(!g_vm.bms_zal_lustra.value()); setTimeout("g_vm.bms_zal_lustra.writeValue(0);", 500); })
<div id="toggle_bms_zal_lustra" style="padding:11px 32px; border:solid 3px #004F72; border-radius:4px; color:#E5FFFF; ">КНОПКА </div>
Основные правила работать с переменными:
— если вы используете переменную из HTML, то обращайтесь к ней прямо door_event1
— если вы обращаетесь из JavaScript, то g_vm.door_event1
— запись в переменную пишем .writeValue(ЗНАЧЕНИЕ), если считываем значение переменной, то value().
Рекомендации:
— для анализа кода страницы или поиска ошибок в скриптах используйте дебагеры для браузерах, например Firebug для Firefox.
— нормальная работа цс в дебагере выглядит вот так:
Итого
Данный фримворк у меня работает больше 1,5 года на разных системам Win 7, 8, 10 и впринципе замечаний нет (единственное замечание — это очень трудная для понимания документация)). Производитель поддерживает разработку для Silverlight, поддержка серверов архива, алармы, но мне это не пригодилось.
На данный момент, я не остановился на использовании этого фриворка в рамках проекта своей квартиры и попробовал применить в качестве суппорта для SCADA — системы, интегрированной на нашем последнем объекте (торговый центр). Итог всей работы — это быстрое создание дополнительное рабочие места (без возможности управления) для руководства торгового цента.
ссылка на оригинал статьи https://habrahabr.ru/post/278111/
Добавить комментарий