======================== Архитектура визуализации ======================== Используемые Web технологии --------------------------- Данная система полностью построена на WEB технологии используя в своей основе файлы SVG и CSS. SVG (Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. CSS (Cascading Style Sheets «каскадные таблицы стилей») — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG. Библиотека элементов в формате SVG ---------------------------------- Для создания визуализаций необходимо наполнить библиотеку подготовленными (как подготовить файлы смотри в разделе "Подготовка SVG") элементами в формате SVG. Сами элементы могут быть созданы в любой программе векторной графики, но мы рекомендуем для создания и редактирования элементов SVG использовать инструмент Penpot (входит в платформу 4iot) или облачное приложение Figma. Подготовка SVG элементов ------------------------ Для редактирования файла SVG его можно открыть любым текстовым редактором. Для целей визуализации данных, предусмотрены следующие типы анимаций: #. Изменение цвета в зависимости от состояния сигнала, связанного с элементом ("normal"-зеленый цвет, "fault"- серый цвет, "overridden" – желтый цвет, "in-alarm" - красный цвет) – применимо ко всем типам сигналов; #. Показать-скрыть элемент (либо его часть) в зависимости от значения, связанного сигнала("True"- показать, "False"-скрыть или наоборот) – применимо для бинарных сигналов; #. Вращение элемента (либо его части) в зависимости от значения, связанного сигнала("True"- вращается, "False"- стоит) – применимо для бинарных сигналов; #. Отображение значений (например значение температуры) в зависимости от значения, связанного сигнала – применимо для аналоговых сигналов; #. Изменение размера элемента по осям X или Y в зависимости от значения, связанного сигнала – применимо для аналоговых сигналов; #. Элемент с мультисостояниями, которые отображаются в зависимости от значения, связанного сигнала – применимо для multistate сигналов; #. Мигание элемента (либо его части) например «авария» - применимо для бинарных сигналов; В одном svg-элементе может быть использовано несколько различных анимаций, каждая из которых связана со своим сигналом. Все анимации построены на изменении свойств элементов с использованием CSS классов и стилей. Примеры создания простых элементов ---------------------------------- Создание бинарного элемента ^^^^^^^^^^^^^^^^^^^^^^^^^^^ Создание бинарного элемента, который в зависимости от состояния связанного сигнала показывает надпись ON или OFF: .. image:: img/on_off_state.png Исходный код .. code-block:: xml Адаптированый код .. code-block:: xml Блок CSS кода .. code-block:: css /* Стили флагов состояний */ /* зеленый цвет */ .normal { fill: #4CD964; color:#4CD964; } /* серый цвет */ .fault { fill: #E2E7E9; color: #E2E7E9; } /* красный цвет */ .in-alarm { fill: #FF0000; color: #FF0000; } /* желтый цвет */ .overridden, .out-of-service { fill: #FFCC00; color: #FFCC00; } /* Скрыть-Показать элемент */ /* Скрыть */ .active .animation-hide, .inactive .animation-display, { display: none; } /* Отобразить */ .inactive .animation-hide, .active .animation-display, { display: block; } * Описание изменений, сделанных в исходном коде svg-файла: #. Из исходного кода удаляем свойство ``fill="green"``, делая элемент бесцветным. Цвет будет подставляться в зависимости от флага состояния (``status-flag``) связанного сигнала. #. Заключаем оба состояния (OFF и ON) в группу с помощью тэга ```` и задаем этой группе ``class="fault inactive"`` – это класс для элемента по-умолчанию. ``"fault"`` = флаг состояния и ``inactive`` = значение связанного сигнала (система изменит эти два класса в зависимости от реального состояния связанного сигнала). #. С помощью тэга ```` задаем классы (``class``) каждой из двух групп (````): ``class`` для OFF ``“animation-hide”`` – в случае если значение, связанного сигнала = ``"true"``, эта часть svg-файла будет скрыта (невидима), а если значение, связанного сигнала= inactive, эта часть svg-файла будет отображена (видна); class для ON ``“animation-display”`` – в случае если значение, связанного сигнала = ``"false"``, эта часть svg-файла будет скрыта(невидима), а если ``presentValue`` связанного сигнала= ``active``, эта часть svg-файла будет отображена(видна); #. ``reference="DATA"`` – это ссылка для связывания с сигналом. Сервер распознает тэг ``reference`` и изменяет значения в ``class="fault inactive"`` на соответствующие связанному сигналу состояния (``fault`` будет заменен на реальный ``status-flag``, ``inactive`` на реальное значение). Создание текстового элемента ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Создание текстового элемента, который отображает текущее аналоговое (числовое) значение связанного элемента: .. image:: img/analog_bar.png Исходный код .. code-block:: xml ... Адаптированый код .. code-block:: xml ... Блок CSS кода .. code-block:: css /* Стили флагов состояний */ /* зеленый цвет */ .normal { fill: #4CD964; color:#4CD964; } /* серый цвет */ .fault { fill: #E2E7E9; color: #E2E7E9; } /* красный цвет */ .in-alarm { fill: #FF0000; color: #FF0000; } /* желтый цвет */ .overridden, .out-of-service { fill: #FFCC00; color: #FFCC00; } * Описание изменений, сделанных в исходном коде svg-файла: #. Из исходного кода удаляем свойство ``fill="green"``, делая текст бесцветным. Цвет будет подставляться в зависимости от флага состояния(``status-flag``) связанного сигнала. #. Заключаем ```` в группу с помощью тэга ```` и задаем этой группе ``id="SENSOR", class="fault", format="%.1f", reference="DATA":`` - ``id="SENSOR"`` – требуется для задания стиля текста, который будет отображать значение; - ``class="fault"`` - класс для элемента по-умолчанию (система изменит этот класс в зависимости от реального состояния, связанного сигнала); - ``format="%.1f"`` - задается формат числа для отображения (в данном случае это чмсло с одним знаком после запятой); - ``reference="DATA"`` – это ссылка для связывания с сигналом. Система распознает тэг ``reference`` и изменяет содержание тэга ```` на значение связанного сигнала. #. Спомощью тэга ``