Автоматизация систем отопления, вентиляции и кондиционирования воздуха

Фрагменты курса. Часть 4

Журнал «Мир климата» продолжает публикацию фрагментов новой учебной программы ДПО Учебно-консультационного центра «УНИВЕРСИТЕТ КЛИМАТА» под названием «Автоматизация систем отопления, вентиляции и кондиционирования воздуха».

Ранее мы подробно описали работу с приложениями современной среды разработки CAREL c.Suite. Теперь расскажем о разработке пользовательских интерфейсов диспетчеризации в среде c.Web

Разработка пользовательских интерфейсов диспетчеризации в   среде c.Web

Средства диспетчеризации

Номенклатура продукции компании CAREL включает различные средства диспетчеризации как локального, так и глобального уровня.

Свободнопрограммируемые контроллеры семейства c.pCO


Контроллеры семейства c.pCO, оснащенные встроенным портом Ethernet, предоставляют возможность непосредственной диспетчеризации через Интернет за счет встроенного веб-сервера.

Пользовательский интерфейс сервера может быть как стандартным, предоставляемым компанией CAREL бесплатно, так и разработанным в соответствии с требованиями конкретного заказчика.

Стандартного пользовательского интерфейса достаточно для мониторинга работы установки, управления ею и анализа поведения оборудования во времени за счет встроенной функции ведения журнала (лога) значений выбранных параметров с последующим просмотром их в виде графиков.



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



Сервер диспетчеризации уровня объекта BOSS

Все контроллеры семейства c.pCO, независимо от модификации, имеют как минимум один встроенный порт RS485, который может быть использован для интеграции контроллера в шину диспетчеризации по протоколам ModBus или BACnet.

Сбор, хранение, отображение информации от полевых контроллеров и уведомление персонала объекта о требующих внимания ситуациях должны осуществляться сервером системы диспетчеризации BOSS.

Особенностями и достоинствами сервера системы диспетчеризации BOSS являются:

  • доступ через любой веб-браузер с  ПК, планшета или смартфона;
  • встроенная точка доступа Wi-Fi позволяет удаленно работать с  BOSS как с   мобильного устройства так с   персонального компьютера;
  • при необходимости возможно подключение монитора через разъемы Display Port или VGA, а  также клавиатуры и   мыши через порты USB;
  • автоматическое масштабирование страниц сервера под разрешение экрана устройства, с  которого происходит доступ;
  • интегрированная поддержка протоколов Modbus (Master и  Slave) и   BACnet (Client и   Server) по   шинам MS/TP (RS485) и   TCP/IP;
  • максимально упрощенная процедура развертывания системы диспетчеризации на  основе BOSS за   счет визуализации данных с   помощью шаблонных страниц.


Решение с использованием BOSS ориентировано на объекты, где необходима интеграция в единый интерфейс диспетчеризации десятков — ​сотен контроллеров как производства CAREL, так и сторонних, поддерживающих наиболее распространенные в настоящее время коммуникационные протоколы ModBus и BACnet.

Облачный сервис диспетчеризации tERA


Облачный сервис диспетчеризации tERA, использующий возможности Интернета для взаимодействия с полевыми контроллерами, расположенными в различных местах, — ​универсальное решение для объектов любого масштаба, а также для сетей объектов.

Достоинства tERA:

  • отсутствие необходимости размещения какого-либо серверного оборудования на  местах;
  • доступ к  интернет-порталу tERA возможен с   любого устройства, подключенного в   глобальной сети;
  • не  требуется специальная настройка сетевого оборудования на   объекте, где установлены системы автоматизации, которые предполагается контролировать;
  • детализация информации по  оборудованию и   возможности управления зависят от   типа пользователя, устанавливаемого локальным администратором;
  • автоматическое создание отчетов как по  расписанию, так и   при наступлении определенных событий, требующих вмешательства обслуживающего персонала;
  • поддержка обновления программного обеспечения полевых контроллеров;
  • встроенный инструментарий анализа поведения оборудования путем сравнения параметров во  времени и   между различными объектами;
  • пользовательский интерфейс может быть как минималистичным, состоящим только из  таблиц и   графиков, так и   оформленным с   учетом пожеланий конкретного заказчика.



Применение сервиса tERA особенно актуально для сетей объектов малого и среднего масштаба, где нецелесообразно применение физических серверов диспетчеризации из-за малого количества оборудования на каждом из объектов, а количество самих объектов велико, что делает затруднительным прямое подключение к каждому из них.

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


Средства разработки пользовательских интерфейсов

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

Важной составляющей пользовательского интерфейса оператора является графическое оформление, от удобства, наглядности и эргономичности которого зависит эффективность работы диспетчера.

Кроме того, к современным средствам визуализации информации в системах BMS предъявляются требования по обеспечению кроссплатформенности и поддержки мобильных устройств.

Всем перечисленным требованиям соответствует среда разработки пользовательских интерфейсов CAREL c.Web, имеющая следующие основные характеристики:

поддержка современных кроссплатформенных технологий визуализации — ​используется стандартный код HTML и SVG графика, поддерживаемая всеми современными платформами — ​в отличие от FLASH и ряда других технологий;

процесс разработки максимально оптимизирован для использования библиотечных элементов с минимально необходимым объемом программирования. В то же время опытному разработчику предоставляются широкие возможности настройки;

предусмотрена поддержка мобильных устройств с точки зрения удобства для оператора при работе с экранами малого размера;

защита интеллектуальной собственности — ​учтены интересы разработчиков — ​в целевое устройство загружается откомпилированный HTML-код, в то время как исходный проект остается у автора;

c.Web является единым унифицированным инструментом разработки пользовательских интерфейсов для средств диспетчеризации различного уровня производства CAREL вплоть до возможности переноса проектов из одной системы в другую с сохранением функциональных возможностей и минимальными доработками.

c.Web

Запуск c.Web и создание проекта


Для запуска c.Web следует выбрать соответствующий ярлык в панели задач и запустить его от имени администратора:

После этого меню приобретет вид:


Следует выбрать Project Console, что приведет к появлению соответствующего окна:


Если предполагается работать с уже выбранным проектом, то следует нажать кнопку Builder. Если требуется изменить текущий проект, следует нажать красную кнопку остановки сервера.


Далее следует выбрать нужный проект из списка ранее созданных или пункт Add Project из выпадающего меню:


В открывшемся окне следует указать имя нового проекта и папку, в которой он будет находиться:


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


Далее следует нажать зеленую кнопку запуска сервера,


а затем — ​кнопку Builder для запуска собственно редактора c.Web.

Если сервер ранее не был сконфигурирован, появится окно параметров, в котором необходимо назначить имя сервера, его адрес и тип.


В нашем случае тип должен быть Carel, а имя и IP-адрес целевого контроллера мы указываем, исходя из собственных предпочтений.


На закладке Advanced необходимо указать пути к папкам, содержащим таблицы параметров контроллера, доступных для диспетчеризации, и к папкам, куда редактор поместит готовый проект.


При наличии связи с контроллером по локальной сети удобно загружать готовый проект непосредственно в котроллер с помощью встроенного FTP-сервера, поэтому в качестве целевых папок указываем соответствующие папки в контроллере.


Для заполнения поля Config Source необходимо создать файл конфигурации переменных контроллера, что можно сделать, только имея исходный проект.

Для этого следует вернуться к проекту приложения контроллера и открыть его в среде разработки c.Suite, в программе c.design.


Далее в пункте tERA/Web Editor необходимо убедиться, что интересующие нас переменные имеют атрибуты Read или Read/Write, то есть доступны для внешней среды.


Устанавливаем галочку Enable c.Web — ​это необходимо для корректной работы проекта пользовательского интерфейса после загрузки в контроллер:


Экспортируем переменные проекта в формате, соответствующем редактору c.Web:


Откроется окно, в котором следует указать папку, куда мы намерены сохранить конфигурационный файл.


После выполнения указанных действий появится сообщение вида:


Поскольку мы внесли изменения в проект приложения контроллера, его необходимо перезагрузить:


Теперь мы можем вернуться к настройке редактора c.Web, указав в поле Config Source путь к папке, куда был сохранен файл конфигурации переменных из c.design:


В итоге указанное окно примет вид:


На закладке Distribution рекомендуется поставить галочки Compress files и Write only changed files.

Установка галочки Cleanup dataroot приведет к очистке папки, куда в контроллер будут загружаться файлы проекта, поэтому, если в процессе работы туда будут помещаться какие-либо дополнительные файлы, не входящие в проект c.Web, они будут удалены. В ряде случаев это нежелательно, поэтому данную галочку лучше не устанавливать.


На вкладке Layout выберем подходящий формат страниц с учетом разрешения экрана, на котором, вероятнее всего, будет отображаться создаваемый пользовательский интерфейс:


После нажатия OK откроется основное окно редактора:


Получение точек данных и привязка к объектам

Первое, что необходимо сделать — ​загрузить информацию о точках данных, которые мы планируем использовать в нашем проекте. Для этого следует щелкнуть правой кнопкой мыши по имени проекта и выбрать Acquire Datapoints:


При успешном выполнении процедуры появится окно вида:


Прочитанные переменные можно увидеть в разделе OBJECTS дерева проекта:


Собственно пользовательский интерфейс начнем создавать на странице Main. Перенесем объект Circular Meter из библиотеки на страницу проекта:


Свойства выбранного объекта отображаются в соответствующем окне редактора. Для привязки переменной к объекту для отображения значения переменной необходимо использовать свойство Base.


Привяжем к имеющемуся объекту переменную, содержащую значение текущей температуры:


И поменяем ряд других параметров, определяющих внешний вид и поведение объекта:


Загрузка в контроллер

Чтобы убедиться, что механизм импорта переменных сработал правильно, загрузим полученный проект с одним объектом в целевой контроллер.

Для этого необходимо щелкнуть правой кнопкой по имени проекта и выбрать Distribute:


После этого начнется загрузка:


По ее окончании, открыв браузер и указав IP-адрес контроллера, мы сможем убедиться, что загрузка прошла успешно и данные корректно отображаются в веб-интерфейсе контроллера:


Для изменения заголовков страниц веб-интерфейса следует модифицировать соответствующую строку в коде объекта index.htm, находящегося в разделе Library — ​ATVISE — ​Resources:


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

Таким объектом может быть, например, Read/Write Variable — ​он особенно удобен для использования на сенсорных экранах, так как содержит крупные кнопки уменьшения и увеличения значения, а также движок регулятора.

Поместим указанный объект на страницу, привяжем к переменной уставки температуры и модифицируем вид объекта в соответствии с своими предпочтениями:


После загрузки обновленного проекта в контроллер появится возможность изменять заданное значение через веб-интерфейс:


Добавим переключатель для изменения состояния дискретной переменной и привяжем его к включению и выключению установки:


Динамическая индикация тревоги

Добавим индикацию тревоги. Для этого нарисуем круг с помощью инструмента Add circle.


Для ряда графических объектов в c.Web имеется набор готовых шаблонов, в частности это касается кругов: выделив круг и выбрав в меню Templates, можно применить формат шаблона к выбранному объекту.


Сделаем круг красным с градиентной заливкой.


Для изменения состояния индикатора тревоги в зависимости от ситуации воспользуемся механизмом Add Simple Dynamic, встроенным в c.Web.


В пункте EVENT укажем значение переменной состояния тревоги, а в пункте ACTION — ​сопоставим состоянию наличия тревоги мигание выбранного объекта и состояние его невидимости при отсутствии тревоги.


Фактически механизм Simple Dynamics представляет собой мастер, который простыми визуальными средствами позволяет создавать определенные последовательности действий, требующих программирования. Simple Dynamics позволяет упростить этот процесс, однако на выходе возникает скрипт, который может быть использован как основа и в дальнейшем вручную модифицирован разработчиком.

Для отображения и редактирования скрипта следует нажать кнопку Script на панели c.Web:


Полученный скрипт можно проанализировать и дополнить.


Для более развернутого уведомления оператора о наличии тревоги к визуальному уведомлению — ​мигающему красному индикатору целесообразно добавить акустический сигнал.

Для этого добавим в папку Resources файл, содержащий сигнал тревоги:


Кроме того, добавим еще один индикатор — ​зеленый, который должен светиться, когда тревога отсутствует:


Размеры зеленого индикатора зададим такими же, как и красного, а для точного расположения обоих индикаторов друг над другом воспользуемся инструментами выравнивания:


Доработаем скрипт следующим образом:


Дополнительные сведения о доступных командах и синтаксисе скриптов доступны во встроенной справке.

Добавим еще один регулятор, который привяжем к переменной, определяющей порог срабатывания тревоги.


И добавим подписи к элементам индикации и управления:


Для повышения эстетичности создаваемого веб-интерфейса добавим градиентный фон, воспользовавшись инструментом Add Rectangle в панели управления c.Web.


Зададим параметры прямоугольника и расположим его под уже имеющимися объектами:


После загрузки в контроллер веб-интерфейс будет иметь вид:


Встраивание готовых страниц

Дальнейшее расширение функциональных возможностей веб-интерфейса возможно с использованием готовых шаблонов, доступных для скачивания из раздела c.Web портала ksa.carel.com:


В частности, доступны готовые страницы с отображением встроенного дисплея контроллера WebpGD, графиков логов и тревог.

Для применения указанных шаблонов соответствующие файлы необходимо загрузить в файловую систему контроллера по FTP. Для этого можно использовать программу FileZilla:


Заранее скачанные папки следует подготовить для копирования в папку HTTP контроллера.


Если до этого момента в контроллер уже был загружен веб-интерфейс, данная папка не будет пустой, и папки шаблонов следует добавить к уже имеющимся файлам:


По завершении процесса передачи данных папка HTTP контроллера будет иметь вид:


Чтобы воспользоваться шаблонами предлагается добавить на главную страницу пользовательского интерфейса меню с тремя пунктами: WebpGD, Тренды и Тревоги.


Также добавим новую страницу, назвав ее WebpGD.


В меню File выберем пункт Settings для настройки параметров новой страницы:


Установим размеры страницы 900 на 500 пикселей, после чего воспользуемся инструментом Add Foreign Object:


Нарисуем прямоугольник размером 460 на 800 пикселей — ​это зона, где будет отображаться экран контроллера и кнопки управления.

Щелкнув по данной зоне, получим окно редактирования скрипта объекта, куда добавим команду обращения к ранее загруженной шаблонной странице:

<div xmlns=„http://www.w3.org/1999/xhtml“ style=„width:100%; height:100%“>

<iframe style=„width:100%; height:100%; border:0px“ src=„web_pgd/webpgd.htm“/>

</div>


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

Выберем действие Open PopUp Display:



И свяжем его с страницей WebpGD:


В результате получим:


Для отображения трендов и тревог создадим соответствующие страницы:


Скрипт:

<div xmlns=„http://www.w3.org/1999/xhtml“ style=„width:100%; height:100%“>

<iframe style=„width:100%; height:100%; border:0px“ src=„logger_cweb.htm“/>

</div>


Скрипт:

<div xmlns=„http://www.w3.org/1999/xhtml“ style=„width:100%; height:100%“>

<iframe style=„width:100%; height:100%; border:0px“ src=„web_alarms/alarmlist.htm“/>

</div>

Свяжем их с меню на славной странице с помощью гиперссылок:


и


соответственно.

Для возврата на главную страницу, разместим на новых страницах кнопку НАЗАД с соответствующей гиперссылкой:



Полученный веб-интерфейс примет вид:


Плавающее окно с отображением информации с экрана контроллера может быть перемещено в удобное место и закрыто.

Страницы с трендами и тревогами:



Оптимизация работы при низкой скорости связи

Следует отметить, что при низкой скорости связи (например, при подключении мобильными устройствами в зонах с плохим покрытием сотовой сети) периодически может появляться сообщение о потере связи с контроллером:


Для увеличения допустимого времени ответа от удаленного контроллера можно использовать команду

webMI.setConfig(„data.requesttimeout«, 3000);

в скрипте страницы Default:


Эта команда увеличивает длительность допустимой задержки до 3 секунд.

В следующем номере мы продолжим публиковать фрагменты нового учебного курса по автоматизации, входящего в программу обучения в Учебно-консультационном центре «УНИВЕРСИТЕТ КЛИМАТА».



наши проекты
  • АПИК
  • Университет климата
  • Выставка «Мир климата»
  • АПИК-тест