Мнемосхемы SVG - Главная страница


Сайт посвящен отображению мнемосхем технологических объектов в браузере посредством технологии SVG без использования традиционно применяемых для этого SCADA систем - отсюда и название проекта NoSCADA.

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


Новости сайта


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

New! 23.04.2016
Новость задним числом - вроде бы уже не новость, но все же:
03.11.2015 проект полностью выложен на GitHub. Какой-либо документации по прежнему нет и, увы, в обозримом будущем ее появление маловероятно.


Оглавление



Введение


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

  • Существенная стоимость конечного продукта. Большинство производителей SCADA систем требуют приобритения лицензии как на среду разработки, так и на среду исполнения, причем на каждое рабочее место. Есть конечно и немногочисленные исключения в виде бесплатной среды разработки и даже полностью свободные продукты, но последние, как правило, довольно сырые и вообще их можно пересчитать по пальцам.
  • Платформа, на которой функционирует рабочее место, обычно ограничена операционными системами семейства Microsoft Windows со всеми присущими им недостатками, да и стоимость опять же возрастает. А сейчас (март 2014), в связи с накаляющейся международной обстановкой и введением всяческих санкций против нашей страны, попадание в зависимость от проприетарных продуктов вероятного противника партнера, выглядит, мягко говоря, необдуманным.
  • В ряде случаев, как это не пародоксально звучит, существенно возрастает время разработки - да-да, если при построении первого в жизни проекта, SCADA система, как и любой инструмент с низким порогом вхождения, позволяет быстро получить работающий результат, то при многократном проектировании подобных, но не полностью идентичных систем, традиционные методы программирования, имеющие дело с текстом, а не с мышью, имеют неоспоримое преимущество по сокращению многократно повторяемой рутинной работы.

Давайте посмотрим, а всегда ли использование SCADA системы так уж необходимо? Современные WEB-обозреватели представляются универсальным и почти идеальным средством отображения любого контента, в том числе и графической информации о состоянии технологического процесса в реальном времени. Это достигается благодаря поддержки ими таких спецификаций, как HTML5, CSS3, SVG, AJAX. И недаром наиболее прогрессивные разработчики SCADA систем в последнее время все чаще обращают свой взор в сторону WEB-технологий. Каковы же положительные стороны использования указанных технологий для отображения состояния технологического процесса?

  • Снижение стоимости конечного продукта. Все указанные технологии имеют открытую спецификацию и свободные реализации. Большинство современных WEB-обозревателей так же распространяются бесплатно.
  • Приложение получается истинно кросплатформенным. Клиентское рабочее место может функционировать поверх любой операционной системы, для которой существуют WEB-обозреватели, а это любая операционная система для настольных компьютеров. Так же возможно функционирование на платформе мобильных устройств - планшетов и смартфонов.
  • Отсутствует какое-либо ограничение на количество рабочих мест - все ограничено только производительностью серверного оборудования и пропускной способностью сети.
  • Поскольку WEB-технологии изначально разрабатывались для работы в сети Интернет, то рабочие места могут функционировать в любой точке мира, где есть подключение к сети. Тут наверное мне бы напомнили о проблемах безопасности такого подхода. Для разграничения доступа может использоваться, в зависимости от предъявляемых требований, от простой авторизации с помощью логина и пароля, до использования сертификатов, VPN и т. д.. В конце концов никто не запрещает ограничиться одним сегментом локальной сети.
  • Использование SVG, имеющего векторныю природу, позволяет не заботиться о разрешении экрана на рабочем месте конечного пользователя - изображение будет смасштабировано для экрана любого разрешения и выглядеть одинаково что на экране обычного монитора, что на большой панели коллективного пользования, что на мобильном устройстве.

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

В начало страницы

Страница «Демонстрация»


На данной странице демонстрируются возможности отображения мнемосхем и их элементов. На левой панели страницы присутствует меню в виде дерева. Свернутые ветви дерева (в виде знака «+») раскрываются кликом мышки. Посредством данного меню выбирайте мнемосхемы и их элементы для просмотра в правой части страницы.

Папка меню «Элементы»

В данной папке присутствуют вложенные папки по категориям элементов мнемосхем. В нижней части экранов мнемосхем и их элементов присутствуют ссылки source, script и кнопка Динамика. Их назначение:

  • По ссылке source можно открыть страницу с исходным кодом мнемосхемы. Обращаю внимание, что это не SVG, а XML, из которого генерируется SVG посредством транслятора, написанного на языке XSL Transformations (XSLT).
  • По ссылке script можно открыть страницу с исходным кодом скрипта динамизации мнемосхемы. Код написан на языке JavaScript. Данная ссылка присутствует только на мнемосхемах, содержащих динамические элементы.
  • Кнопкой Динамика можно запустить скрипт динамихации. Данная кнопка присутствует только на мнемосхемах, содержащих динамические элементы.

Папка меню «Элементы → Статические»

В данной папке показаны элементы мнемосхем, предназначенные для вывода статических изображений:

  • 3D тела
  • Трубы
  • Емкости, как сплошные, так и с вырезом для индикации уровня
  • Панели
  • Шкалы
  • Рамки
  • SVG графика - показана возможность вставки в исходный код произвольных фрагментов SVG. См. исходный код мнемосхемы.
  • SVG анимация - показана возможность вставки в исходный код SVG анимации.
  • Группы - показана возможность определения групп, содержащих несколько элементов и последующего многократного их использования. См. исходный код мнемосхемы.

Папка меню «Элементы → Динамические»

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

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

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

Представлены следующие динамические элементы:

  • Светодиоды
  • Насосы
  • Клапаны
  • Вентиляторы
  • Питание
  • Стрелки
  • Надписи
  • Дисплеи
  • Переключатели
  • Столбики
  • Измерители
  • Уровни
  • SVG графика - показана возможность вставки в исходный код произвольных фрагментов SVG и последующей их динамизацией. См. исходный код мнемосхемы.
  • Группы - показана возможность определения групп, содержащих несколько элементов и последующего многократного их использования. См. исходный код мнемосхемы.

Папка меню «Элементы → Управляющие»

В данной папке показаны элементы мнемосхем, предназначенные для управления. В настоящий моммент сюда входит единственный элемент:

  • Кнопки

Папка меню «Элементы → Библиотека SVG»

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

  • Башни - различные виды водонапорных башен.
  • Емкости бет. - различные виды бетонных емкостей.
  • Емкости кирп. - различные виды кирпичных емкостей.
  • Емкости к/б - различные виды емкостей с кирпичными стенами и бетонными перекрытиями.

Пункт меню «Элементы → Справка»

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

Папка меню «Мнемосхемы»

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

  • КНС - простейшая канализационная насосная станция.
  • КНС-3 - канализационная насосная станция с 3 одинаковыми насосными агрегатами.
  • КНС-3.1 - канализационная насосная станция с 3 насосными агрегатами разной производительности.
  • New! КНС + График - канализационная насосная станция с 3 насосными агрегатами разной производительности. Помимо мнемосхемы, на странице отображены графики уровня в РСВ и состояния насосов.
  • Башня - водопроводная башня, питаемая скважинным насосом.
В начало страницы

Требования к WEB-обозревателю


HTML5 CSS3 Javascript
Для корректного отображения мнемосхем требуется браузер, поддерживающий современные WEB-технологии: HTML5, CSS3, JavaScript, SVG. На данный момент проверена работоспособность со свежими версиями следующих браузеров:
Пиктограмма Mozilla Firefox Mozilla Firefox (Iceweasel)
Пиктограмма Google Chrome Google Chrome
Пиктограмма Apple Safari Apple Safari
Пиктограмма Opera Opera
Пиктограмма Microsoft Internet Explorer Microsoft Internet Explorer (начиная с 9 версии)

В начало страницы

История


В данный раздел будут перемещаться записи из раздела «Новости сайта», когда они будут переставать быть новостями.

10.04.2014
На странице «Статьи» появилась вторая часть статьи «Как оживить SVG, азы для начинающих»

03.04.2014
На странице «Статьи» появился материал «Как оживить SVG, азы для начинающих»

03.04.2014
На странице «Демонстрация» появилась мнемосхема «КНС + График», демонстрирующая одновременное отображение на одной WEB-странице мнемосхемы и графиков

В начало страницы

добавить сайт