Это многостраничный печатный вид этого раздела. Нажмите что бы печатать.

Вернуться к обычному просмотру страницы.

Интерфейс

1 - Стартовый экран

По-умолчанию стартовый экран для пользователя представляет собой веб-страницу, состояющую из нескольких секций:

Поведение (тип стартового экрана) можно изменить зайдя в Панель управления → Настройки → Общие настройки → Homepage Layout

Типы стартовых экранов:

Пользователь получит выбранный стартовый экран при открытии веб-интерфейса системы (при переходе на http://IP-адрес-сервера/)

2 - Сцены

Сцена представляет собой область для размещения элементов интерфейса пользователя. Элементы могут быть разных типов и служить как для иформирования о состоянии системы, так и для управления различным оборудованием и режимами функционирования. В системе может быть множество сцен. Все сцены вместе доступны по ссылке:

http://IP_адрес_сервера/popup/scenes.html

В таком случае, для переключения между сценами можно использовать соответствующий переключатель в нижней части экрана. Кроме того, каждая сцена может быть открыта в отдельности по ссылке вида:

http://IP_адрес_сервера/popup/scenes/{ID}.html

(вместо {ID} указывается цифровой идентификатор сцены)

Общие настройки

Детали сцены включают:

  • Название – наименование сцены
  • Приоритет – приоритет сцены в общем списке (чем больше значение, тем раньше показывается сцена)
  • Флаг Не включать в список переключающихся сцен – при использовании, сцена будет исключена из общего списка переключаемых сцен и может быть показана только по прямой ссылке.
  • Режим Автоматически изменять размер сцены – при включении масштаб сцены будет автоматически изменён под экран устройства
    • По ширине и высоте – с учётом ширины и высоты (чтобы сцена отображалась целиком)
    • По ширине – только с учётом ширины (возможен вертикальный скроллинг)
    • По высоте – только с учётом высоты (возможен горизонтальный скроллинг)
  • Фоновое изображение – ???
  • Обои – ???
    • fixed – ???
    • no repeat – ???
  • Фон для устройств (Тема) – светлая/тёмная тема для отображения устройств
  • Контроль доступа – доступ к сцене (см. раздел Контроль доступа)

Так же для сцены доступны функции:

  • Создать копию (клонировать) – создание новой сцены с копией всех элементов текущей;
  • Экспорт – экспорт сцены и элементов в файл;
  • Просмотр – открытие данной сцены в режиме просмотра отдельно от остальных сцен;

Элементы

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

На экране с общим списком элементов сцены они могут быть выбраны по отдельности и экспортированы в файл – функция экспорта вызывается по клавише в нижней части списка. Также доступна обратная функция – импорта элементов из файла. Файл экспорта может быть использован для копирования нескольких элементов из одной сцены в другую, а также для передачи настроек элементов между системами различных пользователей.

Основные характеристики элементов (доступность некоторых характеристик зависит от типа элемента):

  • Название
  • Приоритет
  • Сцена
  • Тип
  • Связанный объект / метод / свойство
  • Использовать элемент
  • Стиль
  • Анимация появления
  • Позиционирование
    • Абсолютное
    • Друг за другом
  • Позиционировать относительно
  • Отступ слева
  • Отступ сверху
  • Расположить в контейнере
  • Авто-повтор
  • Контроль доступа – подробнее в разделе Контроль доступа
  • Состояния (см. ниже)

Состояния элемента

  • Название
  • Код
  • Выполнить при клике
    • Ничего не делать
    • Выполнить сценарий
    • Запускать объект.метод
    • Код
    • Показать меню при клике
    • Показать домашнюю страницу при клике
    • Показать другую сцену
    • Открыть ссылку при клике
  • Условие отображение
    • n/a (всегда показывать)
    • Простое
    • Расширенное
    • Переключить на сцену при активации
  • Приоритет

Ниже приведены основные типы элементов сцен.

Устройство

Добавление на сцену Простого Устройства (ПУ). Добавление данного типа элемента аналогично использованию вкладки Устройства (см. ниже описание), но позволяет дополнительно настроить позиционирование и эффект появления на сцене.

Выключатель

Элемент с иконкой, названием и отображением состояния объекта в зависимости от значения связанного свойства. Также данный элемент вызывает методы turnOn/turnOff по нажатии на него.

Информер

Элемент предназначен для отображения значений. Возможна настройка состояний при выходе за установленный пороги минимальных и/или максимальных значений.

Уведомление

Отображение сообщения на сцене при наступлении заданных условий.

Изображение

Элемент вывода изображения.

HTML

Один из самых гибких элементов – позволяет использовать произвольный HTML-код для состояний. Дополнительно можно подключить использование CSS и JavaScript-кодов, которые будут общими для всех состояний элемента.

Контейнер

Контейнер является специальным элементом, позволяющим объединять другие элементы в группу и настраивать поведение этой группы. Данный элемент удобно использовать для установки общего условия отображения группы, а так же для того, чтобы позиционировать элементы внутри контейнера, независимо от позиции самого контейнера на сцене.

Редактирование элемента:

Слайдер

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

Настройка Анимация появления отвечает за тип анимации слайдера (Справа-на-лево, Снизу-вверх, Моргание).

Блок Дополнительный код Javascript позволяет задать опции слайдера (полный список опций

Индикатор режима

Элемент для отображения состояния объекта, например одного из режимов работы системы. После добавления и указания связанного объекта будет автоматически создано два состояния (on/off), привязаны зависимости отображения к свойству active и указаны методы выполнения при нажатии на состояние (activate/deactivate).

Через изменение стиля можно задать иконку, отвечающую за указанный режим.

Редактирование элемента:

Клавиша

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

Редактирование элемента:

Нав. ссылка (новое окно/переход)

Два схожих элемента, служат для навигации.

При использовании элемента типа Навигационная ссылка (новое окно) по клику на сцене открывается дополнительное окно, внутри которого открывается заданная ссылка.

Если использовать элемент типа Навигационная ссылка (переход), то по клику будет осуществлён переход по ссылке.

Редактирование элемента:

Элемент вставки меню управления на сцену.

Редактирование элемента:

Объект

Элемент служит для вставки Объекта. Для показа объекта используется его Шаблон отображения.

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

Редактирование элемента:

Устройства

Закладка Устройства позволяет оперативно добавить на сцену элементы управлений Простых Устройств. При добавлении устройства можно выбрать тип шаблона отображения (полный/мини). Непосредственное расположение элементов на сцене необходимо изменить открыв сцену в режиме редактирования (см. ниже).

Виджеты

Виджеты являются альтернативой Элементов. Они, с одной стороны, менее гибкие в плане возможных настроек отображения, однако, с другой стороны, более простые в использовании и дают возможность размещать информацию на сцене указав минимальное количество параметров.

Пример интерфейса настройки виджета Текстовый блок:

Работа со сценой в режиме редактирования

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

3 - Меню управления

Меню управления – один из вариантов организации пользовательского интерфейса по работе с системой. Исторически это был первый вариант пользовательского интерфейса системы MajorDoMo, сохранившийся как один из возможных на данный момент.

По-умолчанию меню располагается в левой секции стартового экрана, но может быть открыто напрямую по ссылке:

http://IP_адрес_сервера/menu.html

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

http://IP_адрес_сервера/menu.html?parent={ID}

{ID} – идентификатор элемента

Пример внешнего вида меню:

Настройка меню осуществляется в разделе Панель управления → Объекты → Меню управления.

Структурно меню является деревом элементов различных типов. Детали каждого типа элементов представлены ниже.

Основные параметры элемента меню

Доступность отдельных параметров зависит от типа используемого элемента.

  • ID – ???
  • Родительский пункт меню – ???
  • Название – ???
  • Приоритет – ???
  • Тип – ???
  • Иконка – ???
  • Период автообновления– определяет частоту, с которой интерфейс будет обращаться к серверу для обновления собственного состояния. Актуально в случае недоступности протокола веб-сокетов, иначе обновление элемента происходит в реальном времени, независимо от установленного значения.
  • Использовать элемент – позволяет повторно использовать уже созданный ранее элемент со всеми его настройками на месте данного
  • Только чтение – при включении данной опции, элемент отражает значение привязанного свойства, но не изменяет его. При этом связанный метод и сценарий будут вызваны (если они заданы).
  • Авто-повтор – позволяет автоматически дублировать элемент меню, используя все доступные объекты класса, к которому принадлежит Связанный объект данного пункта меню.
  • Связанный объект – ???
  • Свойство – ???
  • Метод – ???
  • Сценарий – ???
  • Код – ???
  • Задержка при ротации – определяет период времени, в течении которого будет виден данный элмент перед тем, как будет заменён другим, у которого так же установлено значение данного поля. Ротируемые элементы должны находиться на одном уровне и идти друг за другом. Ротация элементов позволяет автоматически менять выводимые данные, не расширяя размер физической области, занимаемой элементами.
  • Загружать дочерние элементы в раскрывающуюся область – ???
  • Контроль доступа – ???

Типы элементов меню

Подпись

Объект

Ссылка (+новое окно)

Новое окно

Javascript-команда

Клавиша

Выключатель

Поле выбора (select)

Поле выбора (radio)

Слайдер

Плюс-минус

Выбор времени

Дата

Текстовое поле

Выбор цвета

HTML-блок

4 - Домашние страницы

Раздел Домашние страницы позволяет создать навигационное меню между различными страницами управления системой.

Данный интерфейс доступен по ссылке

http://IP_адрес_сервера/pages.html

Пример навигатора домашних страниц:

Панель управления домашними страницами:

Редактирование настроек отдельной страницы:

Основные свойства страницы:

  • Название - ???
  • Приоритет - ???
  • опция Скрыть - ???
  • Период автообновления, секунд - ???
  • Иконка - ???
  • Тип - ???
    • HTML Code - ???
    • Application - ???
    • URL - ???
    • Dashboard - ???
  • Ссылка - ???
  • Контроль доступа - ???
  • Ссылка (preview) - ???

5 - Дашборды

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

У дашборда два режима – просмотра и управление. В режиме просмотра просто показываются все виджеты, а в режиме управления их можно организовывать – перетаскивать панели, менять порядок виджетов внутри панели, менять количество колонок, добавлять/удалять виджеты.

Виджеты – то, что располагается на панелях дашборда. Фактически, это небольшие блоки, отображающие какие-то данные и выполняющие какие-то функции. Есть ряд предустановленных виджетов, однако сторонние модули могут вводить в систему собственные виджеты в любом количестве, если оно необходимо.

Предустановленные виджеты:

  • Часы (цифровые часы с днём недели и датой)
  • Изображение (ссылка на внешнюю картинку)
  • HTML (просто HTML-блок любого содержания)
  • Scripts (кнопка запуска выбранного сценария)
  • Menu (элемент из меню или группа элементов)
  • Application (одно из установленных приложений)
  • IFrame (ссылка на любую страницу – так можно, например, сцену вставить в виде виджета)
  • Chart (график, созданный в модуле Charts)
  • Device (устройство из модуля Простые устройства)

У каждого виджета есть собственные настройки отображения. Чуть позже будет перевод интерфейса работы с дашбордом на русский (пока многое на английском, но в целом достаточно понятно).

Ссылка на обсуждение дашбордов на форуме

6 - Планы

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

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

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

Работа с Планом строится вокруг файла в формате SVG, который вы можете создать в любом векторном редакторе. Мы рекомендуем открытый и бесплатный редактор InkScape (все примеры ниже приведены с использованием данного ПО). Дополнительно могут использоваться изображения, найденные в сети или любые другие редакторы для создания отдельных элементов (3D Max, SweetHome3D и т.д.)

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

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

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

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

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

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

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

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

Создание плана

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#roof1 {
    fill:green !important;
}

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

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

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

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

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

Данная секция предоставляет прямую ссылку на просмотр плана, а также код, который можно использовать для вставки плана в сцену или другие разделы.

Ссылка на ветку обсуждения планов на форуме

7 - Приложения

Отдельные модули системы могут быть представлены пользователю в виде приложений.

Список установленных приложений доступен по ссылке:

http://IP_адрес_сервера/apps.html

Техническая информация о том, как создавать модули/приложения представлена в разделе Структура модулей