Grafana Floor Panel + T-HMI Sensors

A Grafana panel that draws a floor plan and colours each room by temperature and humidity. ESP32-S3 sensor nodes feed it over MQTT.

WORK PROJECTGrafanaTypeScriptReactESP32-S3MQTTClickHouse
Architecture ↓
source.yamlAI build
provider:
azure-devops
visibility:
private
built_at:
2026-10-25
sources:
private work repo: Grafana panel plugin (read-only) private work repo: T-HMI sensor firmware (read-only) private work repo: ClickHouse data platform (read-only)
approved:
Khoa · Oct 25, 2026
Schematic drawing, not to scale.
Commits (panel + firmware)
66
Rooms on the largest sample plan
39
Sensor read interval
1 s
Grafana version
10.3+
01 / Overview

The problem and the approach

A test lab or a factory floor has many rooms, each with its own temperature and humidity limits. A table of sensor readings does not show which room is out of range. This panel draws the floor plan inside Grafana and colours each room by a score from 0 to 100. The score marks where temperature and humidity sit within the sensor’s own limits: 0 at the lower limit, 100 at or above the upper one. Problem rooms stand out, and a click opens their details.

The panel serves dashboards for a test lab and production floors. The repo holds 9 sample floor plans. The largest has 39 rooms.

Full technical notes

How it works

T-HMI nodes read temperature and humidity every second. By default a node publishes to an MQTT broker every 5 minutes. It publishes at once when temperature moves by 1 °C or humidity by 5 %RH. Readings land in a time-series store: InfluxDB first, ClickHouse now. A Grafana dashboard queries the store, and the panel paints each room on the SVG plan.

The sample dashboard refreshes every 30 s. Between refreshes, a 3-second timer moves each room’s colour toward its new score. The panel does not use Grafana Live streaming.

Panel features

  • Any floor plan drawn in a vector editor works. Rooms are SVG shapes whose ids follow a room: naming pattern. DOMPurify cleans the SVG before it renders.
  • Each room scores 0 to 100 by where its temperature and humidity sit inside per-sensor limits. The defaults are 18 to 30 °C and 30 to 70 %RH. Limits sent with the data override them.
  • Gradient mode fills each room with a radial gradient. Its colours come from the Grafana colour scheme or the threshold steps. Banded mode fills each room with a single colour. Legend labels are editable.
  • A room with no data shows “Disconnected” and stays unfilled.
  • Hovering a room shows location, device, temperature, humidity, limits, score and last update.
  • A click opens a configurable detail URL with the room, location, sensor and device filled in.
  • A dropdown per room maps a sensor from the query result to that room. The sensor order stays stable between refreshes.
  • The panel reads InfluxDB (Flux) results or SQL rows with temperature and humidity columns.
  • CI signs each build as a private Grafana plugin and packages it as a zip.

Sensor node

The T-HMI is a LilyGO board with an ESP32-S3, a 2.8 inch touch screen and a Sensirion SHT35/SHT85 sensor. The screen shows the readings plus WiFi, MQTT, battery and update status. Calibration runs in two steps: piecewise, then linear. Reads are CRC-checked, and a filter drops spikes. The node takes restart, update and time-sync commands over MQTT and updates its firmware over the air. An optional differential-pressure sensor is supported.

Origin

The panel builds on an open-source indoor air quality panel (Apache-2.0). Khoa renamed it Environment Quality Floor and extended it. All 66 commits are by Khoa. The panel has 22, from July 2025 to June 2026. The firmware has 44, from February 2025 to July 2026. 8 of the 66 list an AI pair programmer as co-author. The code lives in private work repos, so this page has no source link.

Stack from the repo
GrafanaTypeScriptReactESP32-S3MQTTClickHouse
02 / Architecture

How data moves through the system

Drawn from the compose file, folder structure and config in the repo.

  1. edgeT-HMI sensor nodeESP32-S3, SHT35/SHT85, 2.8 inch touch screen
  2. transportMQTT brokerMQTT, JSON payloads
  3. storageTime-series storeInfluxDB, now ClickHouse
  4. queryGrafana data sourceFlux (InfluxDB) or SQL
  5. panelEnvironment Quality Floor panelReact 18, Grafana 10.3 plugin SDK, SVG
03 / Main modules

Main folders in the repo

panel/src/module.tsPlugin entryRegisters the panel and its options: colour scheme, thresholds, gradient mode, floor plan SVG, detail link, legend labels.
panel/src/components/SimplePanel.tsxFloor rendererCleans and draws the SVG, scores each room, animates the colours, and draws the legend, tooltip and click-through.
panel/src/components/RoomSensorPicker.tsxSensor mapping editorLists the rooms found in the SVG. You pick a sensor from the query result for each room.
panel/sample/Data simulatorsPython scripts that publish fake MQTT readings or write InfluxDB sample data, for testing without hardware.
firmware/src/mqttHelper.cppMQTT clientPublishes readings and status. Takes remote commands: restart, update, force update, time sync, status.
firmware/src/screenHelper.cppOn-device displayLVGL screen with temperature, humidity, and WiFi, MQTT, battery and update status.
firmware/src/configHelper.cppProvisioningLoads settings from SD card, flash and a device API. Stores network credentials encrypted.
firmware/src/OTAHelper.cppOver-the-air updatesChecks for new firmware every 30 minutes and shows a progress bar on screen.
04 / Recent activity
fw 2.3Jul 16, 2026Thread-safe MQTT and a filter that drops reading spikes.
panel 1.0.8Jun 2, 2026Stable sensor order in the room picker. This is the current plugin version.
fw 1.29–1.36Jun 1, 2026Update progress bar on screen, a forced re-install command, two-step calibration.
panel 1.0.xJun 1, 2026Clickable rooms, a direct MQTT/SQL data layout, hover tooltip, sensor picker with locations.
fw 1.28Mar 4, 2026Device code and location description added to the device config.
ciOct 21, 2025CI pipeline builds and signs the plugin.
panel initJul 30, 2025The panel starts from an open-source indoor air quality panel and gains SVG floor plan support.
fw initFeb 27, 2025First commit of the T-HMI sensor firmware.
$ cat HOW_THIS_PAGE_WAS_BUILT
  1. 01
    Read the repo
  2. 02
    Analyse README, docs, compose, package files
  3. 03
    Write the page, filter out internal details
  4. 04
    Reviewer agent checks it against the sources
  5. 05
    Khoa approves the page, then it deploys
← All projects