Posted by В одной из наших предыдущих заметок в блоге были рассмотрены типы и основные сферы применения тепловых карт, алгоритмы создания пространственных карт с непрерывным распределением визуализируемой величины, приведены примеры развитого программного обеспечения для построения тепловых карт с картинами визуализации.
Во второй части представляются некоторые из имеющихся в программном комплексе «Центральный Пульт» возможности работы с тепловыми картами разных типов. Приводится информация о двух программных расширениях, позволяющих создавать и настраивать отрисовку тепловых карт помещений с непрерывным цветовым окрашиванием, а также временных тепловых карт.
Тепловые карты помещений
Обсудим сперва вопросы реализации и практического использования настраиваемой отрисовки тепловых карт помещений с непрерывным цветовым окрашиванием по всей площади/границе помещения с помощью специального программного расширения (плагина) floorheatmap, включаемого по запросу в сборку дистрибутива программного комплекса “Центральный Пульт” (SAYMON).
Методики и принципы работы в веб-интерфейсе программного комплекса отражены в официальной документации, свободно доступной в сети Интернет. Укажем здесь только, что типичная последовательность действий применительно к процессу подготовки данных и настройки тепловой карты включает следующие этапы:
- создание нового класса объекта (“температурный сенсор”)
- загрузка в систему схемы (плана) помещения в виде растрового или векторного SVG-изображения
- создание и позиционирование объектов класса “температурный сенсор” (соответствуют местам расположения датчиков измерения и контроля температуры или другого интересующего параметра)
- настройка правил перехода состояний объектов (для изменения цвета отображения объектов на карте при смене состояния)
- настройка получения данных от датчиков (например, по протоколу MQTT)
Результатом работы является виджет с тепловой картой, который можно встраивать в веб-страницы с помощью HTML-тега iframe, используя в нем относительный URL следующего вида:
/saymon.local/widgets/heatfloor/?id=60e6ad28eacb09424762d0c4&uperiod=15&opacity=6&blur=8&radius=40&controls=true
Следующий способ подключения через функционал встраивания виджетов в обобщенной форме
/saymon.local/widgets/heatfloor/?id={{id}}&uperiod={{property.updateperiod}}&opacity={{property.opacity}}&blur={{property.blur}}&radius={{property.radius}}&controls={{property.controls}}
удобен, если в программном комплексе определены соответствующие свойства объектов (рис. 1).
Рисунок 1. Свойства объектов и отображение тепловой карты помещения на их основе
Виджет воспринимает идентификатор объекта из адресной строки и может получать по нему историю состояний объекта из программного комплекса.
Описание параметров запроса тепловой карты:
- id – идентификатор объекта
- opacity – степень прозрачности карты и органов управления (диапазон изменения – от 1 до 10, что соответствует реальным значениям от 0.1 до 1.0)
- radius – радиус точек тепловой карты
- blur – степень размытия точек тепловой карты
- controls – значения true/false, показ/скрытие элементов управления (ползунки для изменения значений radius, opacity, blur)
- uperiod – временной интервал запроса (в секундах) на обновление состояний объектов (показателей датчиков) с перерисовкой карты при изменении значений (по умолчанию – 30 секунд)
- showvalues – значения true/false, управление выводом “popover”, всплывающего текста со статусами объектов (значениями отображаемой величины): вывод информации для всех датчиков / вывод информации только для конкретного датчика при перемещении мышкой по карте
- metric – отрисовываемая на карте метрика (по умолчанию – temperature)
В качестве исходной информации для визуализации цветом с показом изолиний на карте могут использоваться значения метрик в объекте (присылаемые датчиками) или заданные в системе цвета состояний объектов (рис. 2). В плагине реализовано несколько способов отображения тепловых карт на основе разных методов интерполяции данных, в том числе метод обратных взвешенных расстояний (Inverse Distance Weighting, IDW) и метод ближайшего соседа (Nearest-Neighbour Interpolation, NNI) с соответствующими наборами управляющих отрисовкой параметров.
Рисунок 2. Примеры отрисовки тепловой карты помещения и шкалы измерений с разной степенью прозрачности
В отношении возможных направлений развития функционала плагина планируется реализация построения 3D тепловых карт для зданий и помещений с возможностью просмотра непрерывных распределений величин в 2D сечениях (отдельные этажи, помещения, телекоммуникационные стойки и т.п.), дополнение набора управляющих параметров для методов интерполяции и некоторые другие улучшения.
Временные тепловые карты
В программном комплексе “Центральный Пульт” можно создавать временные тепловые карты с настраиваемой “интеллектуальной” визуализацией изменяющихся во времени метрик в пределах выбираемого пользователем интервала с его разделением на карте на меньшие промежутки времени (рис. 3, 4). Однотонное окрашивание отдельных ячеек (обычно имеющих форму квадратов или прямоугольников) может производиться путем простого осреднения данных измерений или на основании специальных алгоритмов, которые учитывают накопленные данные о состояниях наблюдаемых объектов, их распределение по состояниям в пределах временной ячейки и назначенную приоритетность состояний.
Рисунок 3. Пример простого виджета с временной тепловой картой, визуализирующей историю состояний объекта за последние 60 минут
Рисунок 4. Пример встраивания виджета с временной тепловой картой через iFrame
Характерной чертой такого подхода является показ истории относительно бегущего времени (“человеческого” календаря), а не факта смены состояний наблюдаемых объектов: не пользователь вынужден адаптироваться под предлагаемый интерфейсом системы вид картинки, а сам интерфейс адаптирует отображение, ориентируясь на ожидания и особенности восприятия пользователя.
Как и в случае с тепловой картой помещения, в результате совершения необходимых действий в интерфейсе программного комплекса и выбора настроек отображения будет создан виджет для встраивания через iframe в веб-страницы с помощью относительного URL следующего вида:
/saymon.local/widgets/heatmap2/?id=60e6ad28eacb09424762d0c4&period=day&rotate=60&compact=true
Виджет управляется следующим набором параметров адресной строки браузера:
- id – идентификатор объекта
- period – периодичность обновления карты (возможные значения hour, week, month, по умолчанию – hour)
- rotate – периодичность автоматической ротации карты (в секундах), режим “слайд-шоу” (по умолчанию – раз в 30 секунд, значение параметра 0 отменяет ротацию)
- compact – значения true/false, активация/деактивация компактного режима отображения виджета (по умолчанию – false)
Фон виджета меняется при наведении на него мыши. Карту можно листать с помощью стрелок, переходя к интересующему интервалу времени (рис. 5). Наведение мыши на ту или иную ячейку карты активирует отображение всплывающего текста с информацией о соответствующем ей временном диапазоне (“popover”). Ячейки являются интерактивными – клик мышью по конкретной ячейке последовательно “погружает” пользователя во вложенные, более короткие временные периоды (месяц/неделя в день, день в час и т.п.).
Рисунок 5. Линейки виджета с временной тепловой картой за разные периоды времени
Используя дополнительные параметры в адресной строке вызова виджета (#uptime, #warning, #alarm), можно инициировать показ на карте значений (в процентах), отражающих относительное время нахождения в объекта соответствующем состоянии за выбранный период времени.
С помощью параметра rotate можно активировать автоматическую ротацию временных периодов (режим “слайд-шоу”), при которой последовательно с заданным интервалом будет производиться переключение карт на разные промежутки времени, например, час – сутки – неделя, с повтором в циклическом режиме.
Виджет может демонстрироваться в компактном виде (регулируется параметром compact), что удобно, например, при желании организовать одновременный показ истории изменения интересующей метрики на разных временных промежутках или сразу для нескольких метрик (рис. 7). Компактный вид предполагает уменьшение высоты линейки с ячейками, отсутствие отступов и надписей сверху и снизу от линейки, скрытие стрелок, вывод слева названия объекта и справа – суммарного значения нахождения объекта в состоянии “uptime”.
Рисунок 7. Пример компактного отображения виджета
Пример составного виджета с визуализацией динамики погоды в Санкт-Петербурге с помощью различных элементов, включая временную тепловую карту, линейный график и текущее значение температуры показан на рис. 8.
Рисунок 8. Пример составного виджета с визуализацией динамики погоды в Санкт-Петербурге с помощью различных элементов
Функционал временных тепловых карт подлежит дальнейшему развитию, ожидаются улучшения в отношении дизайна, появление дополнительных способов группировки ячеек и управляющих элементов.
На этом завершаем рассказ о тепловых картах, оставайтесь с нами, следите за появлением новых публикаций в нашем блоге и обращайтесь за консультациями по вопросам использования развитых инструментов визуализации на основе тепловых карт, доступных в программном комплексе “Центральный Пульт”!