Modern Gauge — продвинутый круговой индикатор рабочего поля RealIoT. Он показывает одно,
два или три числовых значения одновременно: основную шкалу и дополнительные внутреннюю или внешнюю дуги.
Подходит для температуры, влажности, давления, мощности и других аналоговых параметров.
Важно: виджет отображает текущее значение источника. Кнопка
«Открыть график» открывает историю параметра через встроенный график RealIoT
(VirtualGraph). Если у параметра нет истории, график будет пустым, но текущее значение на шкале может
отображаться.
📷 Место для снимка готового виджета Modern Gauge на рабочем поле
(одна, две или три шкалы)
(одна, две или три шкалы)
Пример Modern Gauge с основной и дополнительными шкалами
Возможности
- основное значение и до двух дополнительных шкал (вторая и третья);
- типы шкалы: Standard 270°, Half 180°, Full 360°;
- источники: устройства рабочего пространства или виртуальные датчики Node-RED;
- независимый выбор устройства и параметра для каждой шкалы;
- цветные сегменты с порогами
from, цветом и подписью; - плавные сегменты и градиентные переходы цветов;
- стрелка, маркер значения на дуге, адаптивный цвет цифр и подписи;
- кнопка «Открыть график» для просмотра истории параметра;
- сброс внешнего вида с сохранением имени, подписей, единиц и привязок источников.
Добавление на рабочее поле
1
Откройте список виджетов
- Откройте нужное рабочее поле и вкладку.
- Включите режим редактирования.
- Нажмите «Добавить иконку».
- В разделе «Продвинутые виджеты» найдите Modern Gauge.
📷 Место для снимка карточки Modern Gauge в разделе «Продвинутые виджеты»
Виджет находится в разделе «Продвинутые виджеты»
2
Разместите виджет
- Выберите Modern Gauge в списке.
- Разместите виджет на рабочем поле.
- При необходимости измените размер перетаскиванием углов или полями Ширина / Высота в свойствах.
Панель свойств
Откройте свойства виджета (правый клик → свойства или двойной клик, как для других иконок). Основные параметры находятся в главной панели, дополнительные — в отдельных окнах.
📷 Место для снимка главной панели свойств Modern Gauge
Главная панель: имя, размер, основное значение и базовые настройки шкалы
Имя, описание и размер
| Поле | Назначение |
|---|---|
| Имя | Заголовок виджета на рабочем поле. |
| Описание | Произвольный комментарий (не влияет на отображение шкалы). |
| Ширина / Высота | Размер виджета в пикселях. По умолчанию 300×330. |
Источник данных
Для каждой шкалы (основной, второй и третьей) источник настраивается отдельно.
| Поле | Значение |
|---|---|
| Тип источника |
Устройства — физические и виртуальные устройства текущего рабочего
пространства. Узлы Node-RED — виртуальные датчики Node-RED этого workspace. |
| Источник | Устройство или узел Node-RED. Для устройств доступен поиск по имени и Device SN. |
| Параметр | Числовой параметр выбранного источника (например, temperature,
humidity).
|
3
Подключите основное значение
- В блоке «Основное значение» выберите тип источника.
- Выберите устройство или узел Node-RED.
- Укажите параметр.
- При необходимости нажмите «Открыть график», чтобы посмотреть историю.
📷 Место для снимка блока «Основное значение» с выбором устройства и параметра
Источник и параметр основной шкалы
⚠️ Нет актуальных данных. Если источник не выбран, параметр пуст или значение пока не
пришло, под значением отображается сообщение «Нет актуальных данных». Проверьте привязку
устройства и имя параметра.
Основные настройки шкалы
Блок «Основные настройки» задаёт вид и диапазон главной дуги.
| Параметр | Описание |
|---|---|
| Min / Max | Диапазон основной шкалы. Max должен быть больше Min. |
| Ед. изм. | Единица рядом со значением (°C, %, Вт и т.д.). Чекбокс включает или скрывает отображение. |
| Подпись | Текстовая метка под (или рядом) значением. Чекбокс управляет видимостью. |
| Заголовок | Положение имени: Сверху или Снизу. |
| Тип шкалы |
Standard 270° — классическая дуга; Half 180° — полукруг; Full 360° — полное кольцо (доступен поворот шкалы). |
| Знаков п. з. | Число знаков после запятой: от 0 до 4. |
| Стрелка | Показывает стрелку (needle) на основной шкале. |
| Показывать значение | Отображает числовое значение в центре. |
| Цвет фоновой / основной дуги | Цвет серой (фоновой) дорожки и активной заливки значения. |
📷 Место для снимка блока «Основные настройки» (Min/Max, тип шкалы, цвета)
Основные настройки главной шкалы
Вторая и третья шкалы
Дополнительные шкалы позволяют показать связанные параметры на одном виджете — например, температуру, влажность и давление.
4
Добавьте дополнительную шкалу
- В свойствах нажмите «Добавить вторую шкалу» или «Добавить третью шкалу».
- В открывшемся окне выберите источник и параметр.
- В поле Дуга выберите:
- Внутренняя дуга — шкала внутри основной;
- Внешняя дуга — шкала снаружи основной;
- Не показывать — скрыть дугу (можно оставить только цифры).
- Задайте Min/Max, цвет дуги, подпись, единицу измерения и сегменты.
📷 Место для снимка окна «Вторая шкала» / «Третья шкала»
Отдельное окно настройки дополнительной шкалы
Подсказка: после первой настройки подписи кнопок меняются на
«Настроить вторую шкалу» и «Настроить третью шкалу». Каждая шкала
может брать данные с другого устройства.
Дополнительные настройки основной шкалы
Кнопка «Дополнительные настройки основной шкалы» открывает окно геометрии, поведения и сегментов цвета.
📷 Место для снимка окна «Дополнительные настройки основной шкалы»
Геометрия, поведение и сегменты основной шкалы
Геометрия
| Параметр | Описание |
|---|---|
| Радиус | Радиус основной дуги. |
| Дуга толщ. | Толщина дуги шкалы в пикселях. |
| Фон непрозрачность | Непрозрачность фоновой дуги: 0 — прозрачная, 1 — непрозрачная. |
| Сегм непрозрачность | Непрозрачность цветных сегментов: 0 — прозрачные, 1 — непрозрачные. |
| Заголовок px / Цифры px / Метка px | Размеры шрифтов заголовка, числового значения и подписи. |
Поведение
| Опция | Действие |
|---|---|
| Плавные сегменты | Сглаживает границы цветных сегментов на дуге. |
| Градиентные переходы цветов | Плавный переход цвета между соседними сегментами. |
| Начинать от нуля | Заполнение дуги считается от нуля, а не от Min (удобно для относительных шкал). |
| Инвертировать шкалу | Меняет направление заполнения дуги. |
| Адаптивный цвет значения | Цвет цифр совпадает с цветом основной дуги (foregroundColor) текущей шкалы. |
| Адаптивный цвет подписи | Цвет текстовой подписи следует цвету основной дуги. |
Адаптивные цвета берут цвет самой шкалы (цвет основной дуги), а не цвет
активного сегмента. Сегменты окрашивают дугу и маркер значения, а цифры и подпись при включённой
адаптации используют цвет дуги.
Сегменты цвета
Сегменты задают цветовые зоны шкалы. Для основной, второй и третьей шкалы сегменты настраиваются независимо.
5
Настройте сегменты
- Откройте дополнительные настройки нужной шкалы.
- В блоке сегментов нажмите «Добавить сегмент».
- Для каждого сегмента укажите:
- from — значение, с которого начинается зона;
- цвет — цвет сегмента на дуге;
- подпись — необязательная текстовая метка зоны.
- Лишние сегменты удалите кнопкой удаления в строке сегмента.
📷 Место для снимка редактора сегментов (from / цвет / подпись)
Пример: зелёная зона с 20, жёлтая с 50, красная с 70
Пример для температуры: Min = 0, Max = 40; сегменты from = 18 (зелёный), 25 (жёлтый),
30 (красный). Включите «Градиентные переходы цветов» и подберите «Сегм непрозрачность» около 0,5.
Маркер значения и стрелка
- Маркер на дуге — короткая отметка текущего значения на активной шкале. Показывается, когда значение корректно получено.
- Стрелка — классический указатель (needle). Включается отдельно для основной и дополнительных шкал.
📷 Место для снимка крупным планом: маркер значения и/или стрелка на дуге
Маркер текущего значения на дуге
График истории
У каждого настроенного источника есть кнопка «Открыть график». Она открывает стандартный график истории RealIoT для выбранного Device SN и параметра.
6
Откройте историю параметра
- Выберите источник и параметр шкалы.
- Нажмите «Открыть график».
- В графике выберите период и при необходимости дождитесь загрузки точек.
📷 Место для снимка графика, открытого из свойств Modern Gauge
История параметра, открытая кнопкой «Открыть график»
⚠️ Для графика нужна история. Текущее значение на шкале может отображаться даже без
накопленной истории. Если график пуст, проверьте запись истории параметра в настройках устройства или
Node-RED.
Сброс настроек
Кнопка «Сбросить настройки» возвращает внешний вид и геометрию к значениям по умолчанию. При этом сохраняются:
- имя виджета;
- подписи и единицы измерения;
- привязки источников (устройства/Node-RED и параметры) для всех шкал.
Внимание: сброс меняет цвета, сегменты, тип шкалы, радиусы, непрозрачность и флаги
поведения. Перед сбросом убедитесь, что хотите вернуть стандартный вид.
Рекомендуемая первая настройка
Быстрый старт для одного датчика
- Добавьте Modern Gauge из «Продвинутые виджеты».
- В «Основное значение» выберите устройство и параметр.
- Задайте Min/Max и единицу измерения.
- Выберите тип шкалы Standard 270°.
- Откройте дополнительные настройки и при необходимости отредактируйте сегменты.
- При двух связанных параметрах добавьте вторую шкалу (внутренняя или внешняя дуга).
Рекомендуемый старт: одна основная шкала Standard 270°, адаптивный цвет значения
включён, плавные сегменты и градиент включены, сегментная непрозрачность 0,5.
Решение проблем
На виджете «Нет актуальных данных»
- Проверьте, выбран ли источник и параметр.
- Убедитесь, что устройство онлайн и публикует выбранный параметр.
- Для Node-RED проверьте Device SN и что узел относится к текущему workspace.
Дополнительная шкала не видна
Откройте настройку второй/третьей шкалы и убедитесь, что в поле Дуга выбрано «Внутренняя дуга» или «Внешняя дуга», а не «Не показывать». Проверьте радиус и Min/Max.
Цвета сегментов почти не видны
Увеличьте Сегм непрозрачность в дополнительных настройках. При необходимости отключите градиент, чтобы границы зон были контрастнее.
Цифры не меняют цвет при смене зоны
Адаптивный цвет значения следует цвету дуги, а не цвету сегмента. Чтобы цифры выделялись, задайте нужный Цвет основной дуги или отключите адаптацию и используйте оформление рабочего поля.
Узлы Node-RED не появились в списке
Убедитесь, что виртуальный датчик относится к текущему рабочему пространству и имеет Device SN. Закройте и снова откройте свойства виджета.
График пустой, хотя шкала показывает значение
Текущее значение приходит в реальном времени, а график строится по истории. Включите запись истории для параметра и дождитесь накопления точек.
✅ Modern Gauge настроен. Теперь вы можете собрать компактную приборную панель с одной
или несколькими шкалами прямо на рабочем поле RealIoT.