Использование редактора визуализаций

В качестве инструкции приведен пример создания визуализации.

Примечание: пути и ссылки условные, зависят от структуры, созданной для конкретной задачи

Перейти по ссылке http://scada.localhost/admin/#Visio:lightning/house_2 (где localhost - имя сервера, на котором установлена система) и откроется страница редактора:

Так как визуализация еше не создана, ее надо создать нажав на кнопку «+ Создать новую».

Результат

Визуализация создана, пока она пустая. Трубуется наполнить ее содержимым.

Нажать на иконку «карандаша» в верхнем правом углу - активируется редактор

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

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

Зажать клавишу "Shift" и нажать на пустой элемент (белый квадрат). Откроется панель редактирования элемента.

Описание панели редактирования элемента:

Название - Название svg-элемента (латиницей), произвольное

Тип - произвольное описание

Описание - название svg-элемента (латиницей, кириллицей), произвольное

px - координаты элемента по оси x

py - координаты элемента по оси y

sx - масштабирование (изменение размера) по оси x

sy - масштабирование (изменение размера) по оси y

Поворот - поворот элемента на заданный угол

SVG (uri or reference) - требуется выбрать элемент из svg-библиотеки, нажав на черточки слева от поля. Откроется панель со всеми svg-элементами библиотеки. Выбрать нужный.

reference - если по клику на элемент требуется переход на другую визуализацию, то вписать в это поле url визуализации.

кнопка «УДАЛИТЬ» - позволяет удалить созданый элемент

кнопка «КЛОНИРОВАТЬ» - позволяет создавать копии элементов, с сохранением всех параметров родителя. После создания параметры можно отредактировать

Нажать иконку «дискета» (созранить) в правом верхнем углу. И пустой элемент заменится на выбранный.

Теперь можно мышкой (drag`n`drop`) перетащить изображение в нужное место экрана

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

Для привязки сигнала к элементу «лампа». зажать "Shift" и кликнуть по элементу. Откроется панель редактирования элемента.

В поле «STATE» вписать переменную (например «lamp1-state») с которой свяжется элемент.

«STATE» - это «reference» svg - элемента (см. Examples). Название этого поля берется из библиотечного svg-файла и название может быть другим.

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

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

Переходим в папку /opt/services/scada/data/source/scada/{lightning} и создаем файл light_house_2.yaml

---
description: Освещение здания ;2
reference: Visio:lightning/house_2
data: "mqtt:ws://user@user:mq.4iot.pro:15675/ws#data/lightning-2"
...

Переходим по ссылке http://scada.localhost/#Scada (где localhost - имя сервера с установленной системой). Откроется экран визуализации:

Папки на экране представляют собой созданную структуру (описано выше).

Выбрать папку и кликнуть по ней. Откроется набор визуализаций, которые находятся внутри папки, в данном случае «scada/ventilation» (Вентиляция)

Далее кликаем по нужной визуализации и она отобразится на экране