Откуда растут корни проблемы

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

Откуда растут корни проблемы

Стандартные блоки в MasterSCADA4D информативны, но жёстко ограничены. Набор элементов скуден, адаптировать интерфейс под тёмную или светлую тему практически невозможно, скрыть ненужные части объекта - отдельная задача со звёздочкой. Любое нестандартное оборудование требовало создания нескольких растровых изображений: отдельная картинка под режим работы, отдельная под останов, отдельная под аварию. Затем логика переключения между ними прописывалась вручную на языке ST. И так - каждый раз, для каждого нового элемента.

Главная беда такого подхода даже не в трудоёмкости. Кастомные объекты визуально выбивались из общего стиля интерфейса: другой стиль, никакой анимации, а попытка сымитировать переходы через поочерёдное отображение картинок давала заметный «рваный» эффект. Службы эксплуатации всё настойчивее просили добавить тёмную тему и возможность цветовой кастомизации.

Как работает механика изнутри

Решение строится на связке двух файлов. Файл SVG содержит всю графику, разбитую на функциональные группы с понятными идентификаторами: power_on, power_off, alarm_pmp_on, temp_visible и так далее. Внутри того же файла, в теге style, прописаны каскадные CSS-правила, которые управляют видимостью этих групп в зависимости от CSS-класса корневого элемента. Файл XML с тем же именем описывает внешние параметры: какая переменная из проекта SCADA за что отвечает, к какому атрибуту SVG-элемента она привязана и какие значения принимает.

Принцип переключения состояний прост и элегантен: SCADA меняет класс у корневого тега, CSS-правила реагируют мгновенно, нужные группы появляются или скрываются. Например, при появлении класса Alarm прячутся группы power_off, power_on и mode_visible, а на их место выходит alarm_pmp_on - мигающая красная рамка с текстом «АВАРИЯ». Никаких скриптов, никаких внешних обработчиков.

Анимация без единой строчки JavaScript

Вращение рабочего колеса насоса реализовано через встроенный SVG-механизм animateTransform: синяя дуга вращается вокруг центра с периодом два секунды, бесконечно. Группа находится внутри power_on - пока SCADA держит класс Stop, группа скрыта и анимации нет. Как только присваивается класс Start, дуга появляется и сразу начинает крутиться. Аварийное мигание устроено через animate по атрибуту opacity: значения 0.2 - 0.8 - 0.2 с периодом одна секунда создают живой пульсирующий сигнал.

Динамический текст - показания мощности, статус, единицы измерения, значения датчиков - подключается через параметры XML с типом STRING и путём content. Это означает, что любой текстовый элемент внутри SVG можно напрямую связать с тегом из проекта без каких-либо дополнительных надстроек. Цвет индикаторов тоже управляется параметрами - через тип HMI.SolidColorType и атрибут stroke, что открывает возможность переключения тем оформления без создания отдельных графических файлов.

Что пришлось сделать, чтобы это заработало

Документация MasterSCADA4D описывала механизм создания собственных устройств поверхностно: как именно привязать анимацию к элементу, какие эффекты поддерживаются и как их реализовать - этого в справке не было. Команда запросила через техническую поддержку исходники нескольких стандартных устройств и разобрала их код вручную. Именно так была восстановлена полная картина того, как система обрабатывает SVG и XML-описания.

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