Pull to refresh

Мой «Умный дом» на ПЛК и с веб-интерфейсом. Часть 2. Веб-интерфейс

JavaScriptHTMLSCADA
Tutorial

«Прелюдия»



В продолжение предыдущей истории, я расскажу о создании средства отображения информации в моей квартире (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) в «установка и удаление программы»,
см. рис.
image

— Дальше перегружаемся и заходим в настройки IIS проверяем, включен ли сервер IIS и включен ли ASP.NET
см. рис.
image

— Делаем в DefaultAppPool по умолчанию ASP.NET v4.0 Classic
— если у вас 64 битная система делаем вот так
см. рис.
image


Установка платформы CSWorks (далее по тексту ЦС)

— Заходим на сайт CSWorks
— Выбирает разрядность системы X86,X64, скачиваем. Все должно быть без ошибок. Дальше перегружаем систему.

Настраиваем компоненты

— Надо настроить DCOM для OPC сервера Codesys v2 в системе (гугл в помощь вам). Перегрузить и проверить доступность его из вне.
— CSWorks у вас должен появиться в службах винды. В основном, я использую LiveData, остальные службы CSWorks можно отключить.

см. рис.
image


Настраиваем конфигурацию 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.
— нормальная работа цс в дебагере выглядит вот так:
image

Итого

Данный фримворк у меня работает больше 1,5 года на разных системам Win 7, 8, 10 и впринципе замечаний нет (единственное замечание — это очень трудная для понимания документация)). Производитель поддерживает разработку для Silverlight, поддержка серверов архива, алармы, но мне это не пригодилось.
На данный момент, я не остановился на использовании этого фриворка в рамках проекта своей квартиры и попробовал применить в качестве суппорта для SCADA — системы, интегрированной на нашем последнем объекте (торговый центр). Итог всей работы — это быстрое создание дополнительное рабочие места (без возможности управления) для руководства торгового цента.
Можно увидеть скриншот веб страницы ТЦ.


Tags:SCADA PLC WEB умный дом
Hubs: JavaScript HTML SCADA
Total votes 4: ↑2 and ↓2 0
Views9.5K

Comments 6

Only those users with full accounts are able to leave comments. Log in, please.

Popular right now

HTML-5 разработчик
from 80,000 to 100,000 ₽PiRL VenturesСанкт-ПетербургRemote job
JavaScript разработчик
from 180,000 ₽SportrecsМоскваRemote job
JavaScript разработчик
from 100,000 to 200,000 ₽МТС КассаУльяновскRemote job
JavaScript Developer
from 120,000 to 180,000 ₽JuicyScoreМоскваRemote job
Разработчик JavaScript
from 160,000 to 200,000 ₽ТЭК электрониксМоскваRemote job

Top of the last 24 hours