Виджеты являются самостоятельными программными модулями, которые загружаются в приложение «ДАШБОРД» динамически из раздела МАГАЗИН ВИДЖЕТОВ.
Порядок работы с магазином виджетов описан в Руководстве пользователя, ниже приведены сведения по конфигурированию виджетов в приложении «ДАШБОРД».
Атрибут | Описание |
---|---|
Название виджета | Любая текстовая строка. При установке флажка «СКРЫТЬ ЗАГОЛОВОК» название виджета не показывается |
Список изображений | Поле со списком изображений фона, доступных для выбора из библиотеки |
Список параметров | Перечень параметров, представленных на виджете. В зависимости от виджета, количество параметров может быть фиксированным, либо любым. |
Название параметра | Любая текстовая строка |
Строка форматирования | Текстовый шаблон, задающий правила вывода значений параметра (см. инструкцию по применению шаблона вывода значения) |
Добавить ссылку на дашборд | Гиперссылка перехода на другой дашборд |
Правила по форматированию параметра в виджете см. в разделе Использование Cron
Библиотека платформы содержит следующие виджеты:
Назначение: отображение 3D-модели сервиса Autodesk Forge.
Настройка виджета:
Ниже рассмотрены следующие темы:
Назначение: отображение устройств на интерактивном 2D-плане помещения.
Логика представления:
На виджете представлены интерактивные устройства, расположенные на подложке-изображении (планы офиса, этажей, зон, схемы).
Устройства сгруппированы по зонам.
Устройства содержат параметры, набор и отображение которых отличается для разных типов устройств.
В виджете значения параметров меняется в режиме реального времени по приходу новых значений в платформу.
Если для параметра настроена контрольная процедура, то значение параметра выдается на цветном фоне, соответствующем статусу параметра:
ЗЕЛЕНЫЙ – статус «Норма» (NORMAL);
ОРАНЖЕВЫЙ – статус «Предупреждение» (WARNING);
КРАСНЫЙ – статусы «Ошибка», «Критический» (ERROR, CRITICAL);
СЕРАЯ ПОЛОСКА – «Недостоверно» (FALSEVALUE).
Если для параметра настроено отображение иконки, представляющей статусы состояний (NORMAL, WARNING,…), то рядом со значением выводится такая иконка.
Для параметров с признаком управления в некоторых устройствах предусмотрена возможность переключения режима (Ручной/Авто) и состояния (Вкл./Выкл.).
До начала работы с виджетами «Plan 2D» выполните следующие действия:
Вы можете ознакомиться с функциями и приемами работы в Figma по ссылке https://tilda.education/articles-figma#Dlya_chego_nuzhna_Figma
1.1. Откройте по ссылке https://www.figma.com/ форму регистрации и нажмите на кнопку «Sign up» (либо «Sign in», если учетная запись уже есть).
1.2. В процессе регистрации в окне «Tell us about yourself» укажите сведения о себе.
1.3. В полученном электронном письме с темой «Verify your email address» нажмите на кнопку «Verify email».
1.4. В открывшемся окне «Welcome to Figma» введите название вашей команды в поле «Team name» и нажмите на кнопку «Name my team».
1.5. В окне «Invite your collaborators» («Пригласите своих сотрудников») пропустите заполнение формы, нажав на ссылку «Skip this step».
1.6. В окне «Choose a plan for your team» («Выберите план для вашей команды») выберите свободный доступ, нажав на ссылку «Start for free».
1.7. В окне «What would you like to do first» («С чего Вы хотите начать?») выберите режим самостоятельного ознакомления с работой ПО, нажав на ссылку «I’ll explore by myself».
2.1. В основном меню программы перейдите по ссылке «Get desktop app».
2.2. Cкачайте на локальный диск ПК, запустите установочный файл FigmaSetup.exe (для ОС Windows) или Figma.app (для MacOS) и завершите установку приложения Figma.
3.1. Запустите файл Figma.exe (Figma.app)
3.2. На странице приветствия «Welсome to Figma» нажмите на кнопку «Log in with browser».
3.3. На странице подтверждения «Log in as <Ваш_логин>» нажмите на кнопку «Open the desktop app».
4.1. В отдельном окне или в новой вкладке Вашего браузера перейдите по ссылке https://github.com/inspark/figma_plugin_2dplan/releases/latest
4.2. Под заголовком «Assets» Щелкните по ссылке с названием файла v<номер_версии>.zip, сохраните архив и распакуйте его на локальном диске ПК; в состав плагина должны входить следующие файлы:
Рассмотрим пример создания виджета «Plan 2D» в Личном кабинете с помощью плагина конструктора:
1.1. На странице приветствия «Welcome to Figma» нажмите на кнопку «Log in with browser».
1.2. В открывшейся вкладке браузера нажмите на кнопку «Open the desktop app».
Откройте из распакованного архива файл plan-2d-constructor.fig (библиотека устройств). В появившемся информационном окне «Import files» с сообщением «File imported successfully» нажмите на кнопку «Done».
На домашней странице Figma откройте загруженный файл plan-2d-constructor двойным кликом по левой верхней плитке с условным изображением этого файла.
5.1. На вкладке «Layers» в блоке со слоями (под блоком «Pages») найдите фрейм «plan-example (export me)», щелкните по стрелке слева, чтобы раскрыть и просмотреть список слоев, из которых состоит пример плана: «Kitchen», «Meeting room» – зоны, внутри которых находятся устройства, «image» – подложка плана (изображение).
Для корректной выгрузки конфигурации в виджет ЛК должна быть соблюдена описанная структура:
Frame > Group (группа, зона) > Component (устройства со страницы «components»).
5.2. Раскройте группу «Kitchen», внутри которой находятся устройства: датчик протечки (reedswitch) и мультидатчик (multisensor).
Чтобы увеличить масштаб изображения, в правом верхнем углу окна Figma выберите из списка значение «Zoom to 100%».
5.3. На вкладке «Assets» просмотрите списки устройств, доступных для выбора при создании виджета.
Вы также можете найти эти устройства и их описание на вкладке «Layers», пункт «components».
6.1. Откройте щелчком правой кнопки мыши контекстное меню Plugins/Development, выберите пункт «Import plugin from manifest…». В окне проводника перейтиде в папку со скачанным и распакованным плагином (см. п. 3.3.2) и выберите файл manifest.json. Нажмите на кнопку «Открыть».
6.2. Откройте меню Plugins/Development и убедитесь в том, что в списке добавился пункт «Plan Constructor».
7.1. Выделите внешний фрейм plan-example (export me), откройте в контекстном меню «Plugins/Development/Plan Constructor/Export Plan Assets». Система предложит сохранить zip-файл.
7.2. Перейдите к выгруженному файлу и распакуйте его. Распакованная папка содержит два файла:
Чтобы создать собственный виджет плана помещения «Plan 2D», выполните следующие действия:
В приложении Figma откройте файл plan-2d-constructor, как описано выше (см. п. 3.2.3).
Добавьте новую страницу для создаваемого виджета (опционально, можно создавать план на любой странице): на левой панели напротив заголовка «Pages» нажмите на кнопку «+» («Add new page»).
Введите название для новой страницы: например, «New Plan 2D».
Создайте изображение плана помещения в приложении Figma, пользуясь инструментами на верхней панели приложения, или в любом графическом редакторе.
Если изображение плана создано не в Figma, то импортируйте его:
5.1. Скопируйте изображение в формате PNG или JPEG в стороннем редакторе в буфер обмена;
5.2. В приложении Figma откройте щелчком правой кнопки мыши контекстное меню над площадью листа и вставьте на лист изображение плана, выбрав в меню пункт «Paste here».
В результате на левой боковой панели все элементы изображения будут сгруппированы под заголовком «# Frame 1».
Для всех устройств в виджет выгружаются их координаты и название (из названия слоя устройства). Также для некоторых устройств Вы можете задать дополнительные настройки, которые также будут выгружены в виджет в ЛК. Ниже описаны доступные дополнительные настройки для следующих устройств:
Экземпляр универсального устройства на плане не содержит дополнительных настроек.
Вы можете задать для каждого варианта этого устройства:
Для изменения иконки раскройте слои варианта на левой панели и выберите слой, определяющий иконку.
На правой панели найдите раскрывающийся список с названием иконки и выберите иконку из списка.
Чтобы добавить новую иконку, на левой боковой панели перейдите на страницу «icons». Создайте новый компонент с нужной векторной иконкой и задайте ему уникальное название, используя приставку «icons/» («icons/<Название>»). Требования к иконке:
Чтобы сделать иконку подходящей для выгрузки:
После создания компонента-иконки она станет доступна для выбора в варианте устройства.
Имеет 3 состояния:
Дополнительные настройки:
Для завершения создания виджета выполните следующие действия:
1.1. Щелкните указателем мыши по одному из компонентов;
1.2. Нажмите на клавиатуре и удерживайте клавишу SHIFT;
1.3. Продолжите щелкать указателем мыши по остальным устройствам, которые необходимо включить в группу какой-то зоны помещения;
1.4. Установите указатель мыши внутри выделенной группы, откройте правой кнопкой контекстное меню и выберите пункт «Group selection»;
1.5. Сгруппируйте остальные компоненты в других зонах помещения, повторив действия по пп. 1.1.-1.4.
Устройства, включенные в одну группу, не должны входить в состав других групп (вложение зон не поддерживается).
Устройства, не включенные в группы, не могут быть в дальнейшем экспортированы в ЛК.
Чтобы перенести созданный виджет в ЛК, выполните следующие действия:
3.1. Откройте раздел «СИСТЕМА / Библиотека изображений»;
3.2. В окне «Наборы изображений» создайте тестовый набор изображений, нажав на кнопку «+», в открывшейся форме справа в поле «ИМЯ» напишите название набора и нажмите на кнопку «Создать»;
3.3. Нажмите на кнопку «Выбрать», выберите и загрузите сохраненный на Вашем компьютере файл изображения 2D-плана, либо перетащите его указателем мыши в область изображений, после чего нажмите на кнопку «Загрузить».
В Личном кабинете АСКД в разделе «ДАШБОРД» создайте новый дашборд или откройте существующий дашборд и добавьте на него виджет «Plan 2D», как описано в «Руководстве пользователя».
Настройте виджет:
5.1. Откройте дашборд в режиме редактирования;
5.2. Скорректируйте название виджета в поле «ЗАГОЛОВОК ВИДЖЕТА» или установите флажок «СКРЫТЬ ЗАГОЛОВОК»;
5.3. В выпадающем списке поля «Список изображений» выберите каталог с добавленным ранее 2D-планом (см. п. 13). Нажмите на отобразившейся план.
5.4. Нажмите на надпись «Настройки плана». Откроется окно для вставки текста. Распакуйте zip-архив, выгруженный из Figma, откройте файл «plan_settings.txt» любым простейшим текстовым редактором (но не MS Word). Скопируйте содержимое файла и вставьте его в поле настроек в виджете. Нажимите кнопку Сохранить внизу окна.
5.5. Под заголовком «JSON» нажмите на кнопку «Выбрать файл», добавьте конфигурационный файл виджета 2D-плана «plan_configuration.json» и нажмите на кнопку «Сохранить», находящуюся в нижней части формы.
При загрузке нового файла конфигурации JSON все привязки параметров плана к параметрам ЛК будут удалены.
Ниже описаны различные настройки устройств и их возможные значения.
Наименование | Описание | Возможные значения |
---|---|---|
title | Название устройства | Текст, числа, пробелы, спецсимволы |
top | Координата по вертикали от верхнего края плана в % от высоты плана | Число от 0 до 100 |
left | Координата по горизонтали от левого края плана в % от ширины плана | Число от 0 до 100 |
placement | Расположение тултипа, появляющегося при нажатии на устройство | auto, left, right, top, bottom, top-left, top-right, bottom-left, bottom-right |
device_type_en, device_type_en | Наименование типа устройства в фильтре виджета (только для универсального компонента) | Текст |
device_type_description_en, device_type_description_ru | Описание типа устройства, показывается при наведении на фильтр | Текст |
icon_path | SVG path иконки (атрибут d) | Json |
icon_path_x, icon_path_y | Координаты расположения иконки в элементе устройства и кнопке фильтра | Число |
description (у вентиляции) | Сопоставление значению параметра текстового описания | JSON |
direction, rotation_angle | Угол поворота устройства | Число |
Назначение: отображение схемы вентиляции.
Назначение: вывод изображения.
Логика представления: изображение должно иметь формат масштабируемой векторной графики (SVG).
Назначение: отображение данных от системы видеонаблюдения AxxonSoft.
Логика представления:
Назначение: вывод значений параметров на временном графике.
Логика представления:
Назначение: отображение названия для группы виджетов.
Логика представления: текст произвольный, объем текстового файла до 2 кБ. Виджет может использоваться для наименования группы виджетов, либо выделения справочной информации.
Назначение: вывод значения параметра на интервале.
Логика представления:
Назначение: отображение значений входных и выходных параметров настраиваемого ИБП.
Логика представления:
{ "Disabled": 1, "Power": 2, "Battery": 3, "Fault": 4, "Bypass": 5 }
По приходу числового значения статуса ИБП на виджете отобразится соответствующее ему текстовое название.
Назначение: отображение изображения с камеры видеонаблюдения.
Логика представления:
Назначение: отображение списка параметров с двумя типами схем получения данных: Текущие и Интервальные.
Логика представления:
Назначение: отображение круговой диаграммы значений параметров, зарегистрированных в течение определенного интервала времени.
Логика представления:
Назначение: отображение круговой диаграммы текущих значений параметров.
Логика представления:
Назначение: виджет выводит сигналы-переключатели в виде плашек с учетом значения сигнала и возможных его состояний.
Логика представления:
ЗЕЛЕНЫЙ
- статус «Норма» (NORMAL);ОРАНЖЕВЫЙ
- статус «Предупреждение» (WARNING);КРАСНЫЙ
- статусы «Ошибка», «Критический» (ERROR, CRITICAL);СЕРЫЕ ПОЛОСКИ
– статус «Недостоверно» (FALSEVALUE).КРАСНЫЙ
, 1 – ЗЕЛЕНЫЙ
цвет;СЕРЫЙ
, 1 – ЗЕЛЕНЫЙ
цвет.Назначение: индикация на одной плашке наихудшего статуса в группе параметров.
Статусы «Falsevalue» и «Disabled» не рассматриваются.
Назначение: индикация на трех плашках суммарного количества параметров, находящихся в разных статусах.
Логика представления:
Внутри плашек отображается количество параметров, значения которых находятся в соответствующем статусе:
ЗЕЛЕНЫЙ
- статус «Норма» (NORMAL);ОРАНЖЕВЫЙ
- статус «Предупреждение» (WARNING);КРАСНЫЙ
- статусы «Ошибка», «Критический» (ERROR, CRITICAL).Значения текущих параметров меняются в режиме реального времени по приходу новых значений в платформу;
Отображаемые параметры: концентрация CO2, температура в серверной, температура в щитовой.
Назначение: текстовое уведомление о достижении параметрами критических значений в виде ленты событий.
Логика представления:
Назначение: отображение общего состояния микроклимата и состояния отдельных параметров (температура, влажность, шум, освещенность, концентрация CO2).
Логика представления:
ЗЕЛЕНЫЙ
- статус «Норма» (NORMAL);ОРАНЖЕВЫЙ
- статус «Предупреждение» (WARNING);КРАСНЫЙ
- статусы «Ошибка», «Критический» (ERROR, CRITICAL);СЕРЫЕ ПОЛОСКИ
– статус «Недостоверно» (FALSEVALUE).Назначение: виджет выводит сигналы-переключатели в виде плашек с учетом возможных состояний сигналов.
Логика представления:
ЗЕЛЕНЫЙ
- статус «Включено» (On);СЕРЫЙ
- статус «Выключено» (Off).Назначение: виджет выводит состояние сигнала по цвету его текущего статуса (Normal, Warning, …). Иконка рисуется в соответствии со статусом; если ее нет, то отображается выключатель. При статусе «Normal» отображается выключатель в состоянии «Включено», в остальных случаях – «Выключено».
Логика представления:
ЗЕЛЕНЫЙ
- статус «Норма» (NORMAL);ОРАНЖЕВЫЙ
- статус «Предупреждение» (WARNING);КРАСНЫЙ
- статусы «Ошибка», «Критический» (ERROR, CRITICAL);СЕРЫЕ ПОЛОСКИ
– статус «Недостоверно» (FALSEVALUE).Назначение: отображение параметров в форме таблицы.
Логика представления:
ЗЕЛЕНЫЙ
- статус «Норма» (NORMAL);ОРАНЖЕВЫЙ
- статус «Предупреждение» (WARNING);КРАСНЫЙ
- статусы «Ошибка», «Критический» (ERROR, CRITICAL);СЕРЫЕ ПОЛОСКИ
– статус «Недостоверно» (FALSEVALUE).Назначение: отображение произвольного текста.
Логика представления: возможно добавить любой текст.
Назначение: отображение значения параметра в текущий момент времени.
Логика представления:
ЗЕЛЕНЫЙ
- статус «Норма» (NORMAL);ОРАНЖЕВЫЙ
- статус «Предупреждение» (WARNING);КРАСНЫЙ
- статусы «Ошибка», «Критический» (ERROR, CRITICAL);СЕРЫЕ ПОЛОСКИ
- статус «Недостоверно» (FALSEVALUE).Описание конфигурационных полей: виджет содержит стандартный набор полей (см. Общие атрибуты для всех виджетов). Дополнительно можно указать фоновую картинку из библиотеки изображений.
Назначение: дистанционное управление кондиционером через ИК-датчик. Особенностью такого управления является отсутствие обратного ответа от ИК-датчика о статусе выполнения команды и статусе параметров кондиционера. Виджет дает возможность отображать текущую температуру от внешнего датчика в качестве контрольного параметра.
Настройка виджета
{ 'cool':[18,20,22,24,26,28], 'heat':[20,22,24,26,28], 'auto':[18,20,22,24,26,28] }
Всего можно задать 6 значений для режимов cool, heat, auto. Каждый элемент массива привязывается к параметру ИК-датчика, который устанавливает режим и нужное значение.
Логика представления:
Назначение: дистанционное управление состоянием сигнальных параметров с учетом прав пользователя.
Логика представления:
ЗЕЛЕНЫЙ
- статус «Норма» (NORMAL);ОРАНЖЕВЫЙ
- статус «Предупреждение» (WARNING);КРАСНЫЙ
- статусы «Ошибка», «Критический» (ERROR, CRITICAL);СЕРЫЕ ПОЛОСКИ
– статус «Недостоверно» (FALSEVALUE).Назначение: дистанционное управление фанкойлом.
(THERMOKON - Fan Coil Thermostat with Touch Display)
Логика представления представлена в таблице.
Параметр | Текущее значение | Описание |
---|---|---|
Вкл/Выкл | 170 | Статус «Включен» |
85 | Статус «Вsключен» | |
Режим работы | 1 | Охлаждение (cool) |
4 | Вентиляция (fan) | |
8 | Нагрев (heat) | |
16 | Автоматический выбор (auto) | |
Температура в помещении | Х . Х | Измеренное значение с точностью до десятых долей градусов Цельсия (℃) от датчика температуры |
Скорость вентилятора | 2 | Низкая (low) |
4 | Средняя (medium) | |
8 | Высокая (high) | |
128 | Автоматическая установка (auto) | |
Блокировка | 0 | Разблокировано |
1 | Заблокировано | |
Установка температуры | - | Изменяется кнопками «+» и «–» при значениях атрибутов «Ручной режим» = «Да», «Признак управления» = «Да» |
Ошибка по температуре | 0 | Статус опроса фанкойла «Нет ошибок» |
1 | Статус опроса фанкойла «Есть ошибка» |
Назначение: виджет показывает текущее направление движения в виде компаса и один дополнительный параметр
Внешний вид:
Логика представления представлена в таблице.
Параметр | Текущее значение | Описание |
---|---|---|
Направление | 0 | Параметр, который изменяется на интервале от 0-360 гр |
Сила | 0 | Обычно параметр силы ветра, но может быть любой |
Назначение: виджет показывает направление и силу ветра в виде диаграммы за заданный интервал
Внешний вид:
Логика представления представлена в таблице.
Параметр | Текущее значение | Описание |
---|---|---|
Период | Day, Week, Month | Период/интервал показа данных |
Сдвиг | 0 | сдвиг периода от текущей даты |
Линия | не используется | |
Item1 | 0 | Направление ветра |
Item2 | 0 | Скорость ветра |
Графический онлайн-редактор для совместного проектирования сайтов, приложений и других дизайнерских продуктов. Все файлы Figma хранятся в облаке. В онлайн-режиме можно наблюдать рабочий процесс, оставлять комментарии и обсуждать макет. ↩︎