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

.. Условия выполнения операции
.. ~~~~~~~~~~~~~~~~~~~~~~~~~~~
.. Система установлена и успешно функционирует

.. Подготовительные действия
.. ~~~~~~~~~~~~~~~~~~~~~~~~~

.. Отсутствуют

.. Основные действия
.. ~~~~~~~~~~~~~~~~~

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

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

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

.. image:: screenshots/ssh-1.png
        :width: 600
        :height: 340
        :align: center

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

.. image:: screenshots/ssh-2.png
        :width: 600
        :height: 340
        :align: center

Результат

.. image:: screenshots/ssh-3.png
        :width: 600
        :height: 340
        :align: center

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

.. image:: screenshots/ssh-4.png
        :width: 600
        :height: 340
        :align: center

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

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

.. image:: screenshots/ssh-5.png
        :width: 600
        :height: 340
        :align: center

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

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

.. image:: screenshots/ssh-6.png
        :width: 600
        :height: 340
        :align: center

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

.. image:: screenshots/ssh-7.png
        :width: 600
        :height: 340
        :align: center

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

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

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

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

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

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

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

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

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

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

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

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

.. image:: screenshots/ssh-8.png
        :width: 600
        :height: 340
        :align: center

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

.. image:: screenshots/ssh-9.png
        :width: 600
        :height: 340
        :align: center

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

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

.. image:: screenshots/ssh-10.png
        :width: 600
        :height: 340
        :align: center

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

.. image:: screenshots/ssh-11.png
        :width: 600
        :height: 340
        :align: center

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

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

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

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

Переходим в папку ``/opt/services/scada/data/source/scada/{lightning}`` и создаем файл ``light_house_2.yaml``
            
      .. code-block:: 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`` - имя сервера с установленной системой). Откроется экран визуализации:

.. image:: screenshots/ssh-12.png
        :width: 600
        :height: 340
        :align: center

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

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

.. image:: screenshots/ssh-13.png
        :width: 600
        :height: 340
        :align: center

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

.. image:: screenshots/ssh-14.png
        :width: 600
        :height: 340
        :align: center