Дашборды с типом “По объектам”

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

1 - Добавить новый виджет: Добавить виджет на рабочую область
2 - Сохранить: Сохранить изменения дашборда
3 - Автообновление включено/выключено:
Если индикатор активен, значит автообновление включено и виджеты на дашборде обновляются в режиме реального времени при получении новых пакетов данных, если они соответствуют выбранному интервалу просмотра. Если индикатор неактивен, значит автообновление выключено и данные на виджете актуализируются только после обновления страницы или переключении между вкладками платформы
4 - Интервал просмотра данных: Настроить период просмотра данных на дашборде
5 - Настройки: Управлять автообновлением и включением сетки для рабочей области
6 - Экспорт .json: Экспортировать дашборд в файл формата JSON
7 - На весь экран: Открыть рабочую область на весь экран

Создание виджета

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

💡

В дашборде можно создать не более 15 виджетов.

Выберите тип виджета. В зависимости от него формируются соответствующие поля формы для последующего заполнения.

Возможные типы виджетов:

Линейная диаграмма - график изменения данных во времени. Такой виджет можно использовать для отслеживания температуры, потребления энергии и других показателей датчиков;
Круговая диаграмма - круг, разделенный на сектора, где каждый сектор отражает долю (процент) значения одного аргумента относительно суммы значений всех аргументов, выбранных в качестве источника данных. Такой виджет позволяет быстро сравнить небольшой набор величин и оценить долю каждого значения по сравнению с другими секторами и со всей круговой диаграммой. Например, его можно использовать для отображения длительности работы оборудования в разных режимах, причин инцидентов по категориям;
Спидометр - половинная кольцевая диаграмма, разделенная на сектора, где каждый сектор отражает один из уровней, заданных в модели для аргумента, выбранного в качестве источника данных. Такой виджет позволяет быстро увидеть, в каком из интервалов находится значение в пределах заданного диапазона. Например, его можно использовать для отображения скорости движения транспортного средства в пределах установленных ограничений;
Проценты - кольцевая диаграмма, где по окружности цветом выделяется процентная доля заполнения для аргумента, выбранного в качестве источника данных. Такой виджет позволяет визуально оценить величину в интервале от 0 до 100 процентов. Например, его можно использовать для оценки зарядка аккумулятора, прогресса выполнения задачи, степени загруженности оборудования;
Столбчатая диаграмма - график в виде вертикальных или горизонтальных столбцов, где высота или длина каждого столбца соответствует значению выбранного для него аргумента. Такой виджет удобно использовать для составления рейтинга, когда надо сравнить величины между собой и акцентировать внимание на лучших и худших показателях, или для сравнения значений по разным категориям;
Счетчик - числовое значение аргумента с заданным цветом, который может меняться согласно уровням;
LED - виртуальный светодиод, который сигнализирует о состоянии аргумента;
Текст - обычный текст или текст в формате Markdown (opens in a new tab). Такой виджет позволяет добавить контекстную информацию и описания. Например, его можно использовать
- для важных ссылок или полезных аннотаций;
- для инструкций или рекомендаций по интерпретации различных виджетов, настройке параметров или выполнению конкретных действий на основе отображаемых данных;
- для объявления о запланированном обслуживании или простое;
Батарея, Колба, Термометр - схематичные изображения батареи, колбы и термометра соответственно, где цветом выделяется процентная доля заполнения для аргумента, выбранного в качестве источника данных;
Ползунок предназначен для отправки команды с переменным числовым значением. Например, его можно использовать для изменения интенсивности света, скорости работы двигателя, задания определенного номера программы;
Переключатель представляет собой двухпозиционную кнопку для включения/выключения чего-либо;
Кнопка предназначена для отправки любой команды объекта;
Степпер, подобно ползунку, позволяет отправить команду с переменным числовым значением, но в данном случае это значение можно изменять только с заранее определенным шагом;
Виджет Цвет отлично подходит для выбора точного цвета по схеме RGB - например, для установки цвета светодиода или лампы.

Далее можно указать имя и описание виджета. Имя отобразится вверху в окне виджета, описание - внизу.

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

Настройка	Где используется	Описание
Показать рамку	Все виджеты	Показать или скрыть рамку по периметру виджета
Цвет рамки	Все виджеты	Задать цвет рамки виджета
Количество знаков после запятой	Линейная диаграмма, Гистограмма, Круговая диаграмма, Спидометр, Столбчатая диаграмма, Счетчик, Батарея, Колба, Термометр	Выбрать количество знаков после запятой для данных виджета
Стиль	Линейная диаграмма	Выбрать стиль отображения данных виджета на графике: По умолчанию, Только точки, Закрашенная область, Пунктир, Закругленный
Ширина линии	Линейная диаграмма	Выбрать ширину линии для графика данных виджета: 1px, 2px, 4px, 8px
Радиус точки	Линейная диаграмма	Выбрать размер точек для графика данных виджета: Не показывать, 1px, 2px, 4px `Размер точки на графике = Ширина линии + 2*Радиус точки`
Показать единицы измерения	Линейная диаграмма, Гистограмма, Круговая диаграмма, Спидометр, Столбчатая диаграмма, Счетчик, Батарея, Колба, Термометр	Показать или скрыть единицы измерения для данных виджета
Показать легенду	Линейная диаграмма, Гистограмма, Круговая диаграмма, Столбчатая диаграмма	Показать или скрыть легенду виджета
Параметры легенды	Линейная диаграмма, Гистограмма, Круговая диаграмма, Столбчатая диаграмма	Выбрать параметры, отображаемые в легенде виджета: MIN, MAX, FIRST, LAST, AVG, DIFF, SUM
Расположение легенды	Линейная диаграмма, Гистограмма, Круговая диаграмма, Столбчатая диаграмма	Задать расположение легенды виджета: Сверху, Справа, Снизу, Слева
Min, Max	Столбчатая диаграмма, Батарея, Колба, Термометр	Установить граничные значения для отображения данных виджета
Порядок вывода данных	Столбчатая диаграмма	Задать порядок сортировки данных виджета: По умолчанию - порядок зафиксирован и соответствует очередности добавленных источников данных; По возрастанию/По убыванию - порядок динамический и зависит от значений источников данных
Использовать значение из модели	Счетчик, Батарея, Колба, Термометр	Установить количество знаков после запятой для аргумента, выбранного в качестве источника данных виджета, таким, как оно задано в модели.

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

💡

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

Каждый виджет напрямую связан с параметрами и командами конкретных объектов. Выбор источников данных и настройка их отображения происходит в разделе Данные виджета и зависит от типа виджета.

Линейная диаграмма

Выберите один или несколько интересующих вас объектов. Для каждого объекта задайте аргументы, значения которых будут использоваться в качестве источников данных. В списке возможных для выбора параметров доступны только те, у которых в модели указан тип данных Число. Суммарно по всем объектам можно добавить до 20 аргументов. Также вы можете переименовать название источника данных и задать свой цвет для каждого аргумента.

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

💡

Для настройки стиля графика перейдите в Настройки отображения виджета и воспользуйтесь опциями Стиль, Ширина линии и Радиус точки. В разделе Пример отображения отобразится график, соответствующий вашим настройкам. Когда закончите редактировать виджет, нажмите кнопку Сохранить.

При наведении на точку графика она становится крупнее и выводится информация о времени получения этого пакета данных, источнике данных и значении аргумента.

Круговая диаграмма

Нажмите кнопку Сохранить. На дашборде появится новый виджет. Значение каждого аргумента на виджете визуально представлено в виде сектора круга.

При наведении на сектор круга он становится ярче, выводится название аргумента, его значение и сумма всех аргументов диаграммы.

Спидометр

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

MIN/MAX - минимальное/максимальное значение этого аргумента за выбранный период;
FIRST/LAST - первое/последнее значение этого аргумента за выбранный период;
AVG - среднее значение этого аргумента за выбранный период;
DIFF - разница между последним и первым значением этого аргумента за выбранный период;
SUM - сумма всех значений этого аргумента, полученных на объекте за выбранный период. Вы можете включить режим Показывать крайние интервалы, тогда кольцевая диаграмма разделится на цветные сектора в соответствии с уровнями, заданными в модели для этого аргумента. Если данный режим выключен, то диаграмма полностью окрашена в цвет уровня, соответствующего отображаемому значению аргумента. Если у выбранного аргумента еще не заданы уровни в модели или вам не подходят границы интервалов и их цвет, нажмите кнопку **Перейти в модель и настроить уровни **. После сохранения новых уровней в модели цвета секторов на диаграмме также обновятся.

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на сектор спидометра он становится ярче и выводится информация об источнике данных и текущем интервале.

Проценты

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на виджет выводится информация об источнике данных.

Столбчатая диаграмма

Нажмите кнопку Сохранить. На дашборде появится новый виджет. Значение каждого аргумента на виджете визуально представлено в виде столбца.

💡

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

Если максимум не установлен, то по умолчанию за него принимается наибольшее текущее значение аргумента в столбцах.

При наведении на столбцы выводится информация об источнике данных.

Счетчик

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

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на виджет выводится информация об источнике данных.

LED

Выберите один интересующий вас объект. Из списка параметров этого объекта определите тот аргумент, текущее значение которого будет использоваться в качестве источника данных. В списке возможных для выбора параметров доступны только те, у которых в модели указан тип данных Логический. Вы можете включить Показать значение, тогда под изображением светодиода будет отображаться значение Да/Нет. По умолчанию зеленый цвет светодиода соответствует Да, красный - Нет. Если данное цветовое решение или текст не подходит под вашу задачу, включите Использовать цвета из уровней. Если у выбранного аргумента еще не заданы уровни в модели или вам хочется изменить их цвет и отображаемый текст, нажмите кнопку Перейти в модель и настроить уровни. После сохранения новых уровней в модели цвет и соответствующий текст состояния светодиода на виджете также обновится.

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на виджет выводится информация об источнике данных.

Текст

Данный виджет - единственный, в котором не нужно выбирать ни объект, ни аргумент. Просто напишите свой текст в обычном формате или используйте разметку Markdown.

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

Батарея, Колба, Термометр

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

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

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

💡

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

В этом случае процент заполнения цветом на виджете рассчитывается от ваших значений.

Ползунок

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

💡

В списке возможных для выбора команд присутствуют только те, у которых в модели задан строго один параметр, значение которого можно указать непосредственно при отправке команды. Для создания такого параметра необходимо при создании команды в модели объявить его в фигурных скобках {{param_name}}.

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

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на шкалу ползунка выводится информация о текущем значении ползунка и источнике данных.

Переведите ползунок в необходимое положение для отправки команды. При успешном выполнении или неудаче появится соответствующее уведомление.

Переключатель

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

💡

В списке возможных для выбора команд отсутствуют команды с параметрами, которые можно указать непосредственно при отправке команды. Такие команды используются в качестве источников данных только для виджетов Ползунок, Степпер и Цвет.

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на переключатель выводится информация об источнике данных.

Переведите переключатель в необходимое положение для отправки команды. При успешном выполнении или неудаче появится соответствующее уведомление.

Кнопка

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

💡

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на кнопку выводится информация об источнике данных.

Нажмите на кнопку для отправки команды. При успешном выполнении или неудаче появится соответствующее уведомление.

💡

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

Степпер

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

💡

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

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на степпер выводится информация об источнике данных.

Установите необходимое число для отправки команды. При успешном выполнении или неудаче появится соответствующее уведомление.

💡

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

Цвет

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

💡

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

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на цвет выводится информация об источнике данных.

Установите необходимый цвет для отправки команды. При успешном выполнении или неудаче появится соответствующее уведомление.

💡

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

Однако, независимо от выбранного способа, в команде цвет будет отправлен в шестнадцатеричном формате.