George2017: создание новой страницы

2020-01-20T19:38:59Z

создание новой страницы

Новая страница

[[Category:Модули]]

== Модуль планы==

[https://connect.smartliving.ru/tasks/405.html Модуль планы]

https://mjdm.ru/forum/viewtopic.php?f=7&t=6178

'''Модуль планы''' - предназначен для создания динамических графических интерфейсов на базе векторных изображений в формате SVG. Изначально предполагалось, что в качестве базовых изображений будут использоваться планы домов/квартир, однако, вы можете работать с любыми изображениями для создания уникальных динамичных интерфейсов.

Основые возможности модуля:

Работа с исходным изображением в формате SVG
Установка стилей отображения отдельных элементов изображения по заданным условиям (показать/скрыть, прозначность, анимация и т.п.)
Установка реакции на нажатия на отдельные элементы изображения (запуск метода, кода, открытие меню, окна и т.п.)
Динамичные шаблоны текстовых элементов (авто-подстановка значений по данным из системы)
Использование готовых интерактивных компонентов
Обновление состояния всех элементов в реальном времени (технология websockets)
Интерфейс "зумирования" Плана (отключаемо)
Автоматическое изменение масштаба Плана под размер экрана (отключаемо)
Отдельная ссылка для просмотра Плана
Встраивание Плана в другие типы интерфейсов (сцены, меню и т.п.)
Неограниченное количество Планов
Работа с Планом строится вокруг файла в формате SVG, который вы можете создать в любом векторном редакторе. Мы рекомендуем открытый и бесплатный редактор InkScape (все примеры ниже приведены с использованием данного ПО). Дополнительно могут использоваться изображения, найденные в сети или любые другие редакторы для создания отдельных элементов (3D Max, SweetHome3D и т.д.)

Разберём процесс создания интерфейса на примере данного изображения:

[[Файл:403qot2.png|800px|мини|центр|Планы]]

Текстовые элементы

[[Файл:403qP2T.jpg|800px|мини|центр|Модуль планы]]

Для установки динамических текстовых элементов достаточно в самом тексте использовать конструкцию авто-подстановки вида "%Объект.Свойство%". При выводе данного элемента будет произведена авто-замена на данные из системы. Кроме того, при изменении данных в системе, текст на изображении так же будет меняться автоматически. Вы можете использовать данную конструкцию не только отдельно, но и как часть предложения, например: "Сейчас %ThisComputer.TimeNow%" будет автоматически заменено на "Сейчас 10:35". В графическом редакторе вы можете производить любые манипуляции над самим элементов -- устанавливать шрифты, эффекты и т.п.

==Графические элементы==

[[Файл:403r9SJ.png|800px|мини|центр|Модуль планы]]

SVG-изображение может состоять из множества графических элементов (объектов). Элементы можно рисовать самостоятельно, используя инструменты редактора, импортировать из каких-то библиотек в виде готовых векторных или растровых изображений. Кроме того, элементы можно объединять в группы, располагать на различных слоях и многое другое. Важной особенностью в нашем контексте является то, что в самом изображении все элементы хранятся как отдельные объекты с уникальным идентификатором (ID). Соответственно, чтобы мы могли в дальнейшем работать с отдельными элементами и легко их находить, необходимо выставить им понятные идентификаторы:

[[Файл:403rjj3.png|800px|мини|центр|Модуль планы]]

Редактор сам добавляет идентификаторы на все элементы, но созданные автоматически ID не несут смысловой нагрузки и будет неудобно в дальнейшем их искать для работы с ними в модуле MajorDoMo.

Таким образом, создаваемое изображение должно содержать все возможные элементы интерфейса. Также обратите внимание, что для изображения необходимо задать его размер: Файл > Свойства документа:

[[Файл:403rRoI.png|800px|мини|центр|Модуль планы]]

По окончанию работы с изображением его необходимо сохранить в формате SVG.

==Создание Плана==

Для создания Плана необходимо перейти в Панель управления MajorDoMo, раздел Объекты > Планы.

Основные данные плана:

[[Файл:403s2hy.png|800px|мини|центр|Модуль планы]]

Название -- название проекта
Изображение -- созданный в графическом редакторе SVG-файл
Управление масштабом -- признак необходимости элемента управления масштабом (кнопки увеличения/уменьшения)
Авто-масштабирование -- признак необходимости автоматического масштабирования под размер устройства (используется при выводе Плана по отдельной ссылке).

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

После сохранения формы появляются дополнительные закладки для дополнительной настройки:

[[Файл:405KMSa.png|800px|мини|центр|Модуль планы]]

==Общее -- общие настройки Плана==
Состояния -- настройки динамического состояния элементов Плана
Компоненты -- вставка на план элементов из библиотеки компонентов
Дополнительный код CSS -- дополнительные стили отображения (не обязательно)
Дополнительный код Javasсript -- дополнительные сценарии для динамики (не обязательно)
Просмотр -- просмотр результата настройки и варианты использования Плана в системе (ссылка на План, код встраивания)

==Работа с состояниями Плана==

Переключившись на закладку Состояния мы можем настраивать динамику работы нашего Плана. Основной смысл в том, чтобы задать условное поведение отдельных элементов SVG-изображения путём установки того или иного стиля отображения в зависимости от данных системы. При добавлении нового состояния предлагается следующая форма:

[[Файл:403sRMc.png|800px|мини|центр|Модуль планы]]

Название -- произвольное название состояния
Элемент изображения -- ID элемента изображения (см. выше про установку ID в графическом редакторе)
Связанный объект.Свойство -- источник данных для проверки условий применения состояния
Условие -- тип условия
Значение -- сравнительное значение для условия
Применить стиль -- стиль отображения, который будет применён к элементу в случае успешного выполнения условия (не обязательно)
Применить стиль ("иначе") -- стиль отображения, который будет применён к элементу в случае невыполнения условия (не обязательно)
Выполнить при клике -- реакция на нажатие на элемент (не обязательно). В качестве реакции может быть: выполнение сценария, запуск метода объекта, выполнение PHP-кода, отображение элемента Меню, отображение Домашней страницы, открытие произвольной ссылки.

Приведённый выше пример устанавливает следующее поведение: графический элемент Motion1 (иконка человека) будет моргать при обнаружении движения (свойство Motion17.status=1) и скроется по окончанию движения.

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

==Работа с компонентами==

Основная суть компонентов -- выборочная замена элементов изображения на настраиваемые объекты из библиотеки компонентов. Каждый компонент представляет собой графический объект с возможностью корректировки его отображения и работы с помощью настроек, производимых пользователем. Для вставки компонента на План, необходимо предварительно на изображение добавить графический элемент (например, обычный прямоугольник), а в настройках компонента выбрать название этого элемента, чтобы при формировании плана он был заменён соответствующим компонентом. Компонент в большинстве случаев использует базовые характеристики исходного элемента при размещении на Плане (координаты, размеры).

Пример использования компонента:

Создадим на нашем плане два прямоугольника tempBox и tempBox2

[[Файл:40tErc8.png|800px|мини|центр|Модуль планы]]

Загрузим новое изображение в наш План, перейдём в закладку компоненты и добавим новый компонент, задав название и выбрав в качестве типа компонента Gauge, а в качестве заменяемого элемента tempBox:

[[Файл:40tECHG.png|800px|мини|центр|Модуль планы]]

После добавления нам становятся доступны дополнительные настройки компонента (в данном случае это стрелочный индикатор):

[[Файл:40tEM6n.png|800px|мини|центр|Модуль планы]]

Мы можем указать источник данных и дополнительные параметры изображения (единицы измерения, мин/макс значение, цвета и т.п.).

После сохранения мы можем продублировать настройки (кнопка Создать копию) и по аналогии настроить новый компонент, задав новые настройки и привязав его уже к элементу tempBox2:

[[Файл:40tFhKq.png|800px|мини|центр|Модуль планы]]

В итоге при просмотре нашего Плана, на месте созданных в графическом редакторе прямоугольников мы увидим наши настроенные компоненты:

[[Файл:40tFuAl.jpg|800px|мини|центр|Модуль планы]]

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

Кроме того, пользователь может настроить действие по нажатию на экземпляр компонента таким же образом, как это делалось при настройке состояний:

[[Файл:40tFJTK.png|800px|мини|центр|Модуль планы]]

Библиотека компонентов пополняется разработчиками (здесь будет ссылка на документацию).

==Дополнительный код CSS==

Данный раздел позволяет добавить свои настройки отображения отдельных элементов/состояний.

Например, можно добавить следующий код для того, чтобы элемент с идентификатором #roof1 был всегда с зелёной заливкой:

<pre>#roof1 {
fill:green !important;
}</pre>

Дополнительный код Javascript

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

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

<pre>function checkZoomLevel() {
var zoomLevel=panZoom.getZoom();
if (zoomLevel>2) {
$('#roof1').hide();
} else {
$('#roof1').show();
}
setTimeout('checkZoomLevel()',1000);
}
setTimeout('checkZoomLevel()',1000);</pre>

==Просмотр и использование Плана==

[[Файл:403tDoV.png|800px|мини|центр|Модуль планы]]

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

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

P.S. В качестве идей :

[[Файл:403w54i.jpg|800px|мини|центр|Рис.1]]

[[Файл:403wcIo.jpg|800px|мини|центр|Рис.2]]

[[Файл:403who4.png|800px|мини|центр|Рис.3]]

[[Файл:403wkP0.jpg|800px|мини|центр|Рис.4]]

[[Файл:403woGa.jpg|800px|мини|центр|Рис.5]]

[[Файл:403wrDg.png|800px|мини|центр|Рис.6]]

[[Файл:403wwqc.jpg|800px|мини|центр|Рис.7]]

[[Файл:403wD58.jpg|800px|мини|центр|Рис.8]]

[[Файл:403wHlA.jpg|800px|мини|центр|Рис.9]]

[[Файл:403wLnK.jpg|800px|мини|центр|Рис.10]]

[[Файл:403wQ62.jpg|800px|мини|центр|Рис.11]]

Планы модуль - История изменений

George2017: создание новой страницы