Grafana Floor Panel + T-HMI Sensors

Panel Grafana vẽ sơ đồ mặt bằng và tô màu từng phòng theo nhiệt độ, độ ẩm. Dữ liệu đến từ các node cảm biến ESP32-S3 qua MQTT.

WORK PROJECTGrafanaTypeScriptReactESP32-S3MQTTClickHouse
Kiến trúc ↓
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 · 25/10/2026
Bản vẽ sơ đồ, không theo tỷ lệ.
Commit (panel + firmware)
66
Phòng trên sơ đồ mẫu lớn nhất
39
Chu kỳ đọc cảm biến
1 s
Phiên bản Grafana
10.3+
01 / Tổng quan

Bài toán và cách giải

Lab kiểm thử hay xưởng sản xuất có nhiều phòng, mỗi phòng có ngưỡng nhiệt độ và độ ẩm riêng. Nhìn bảng số liệu cảm biến thì khó thấy ngay phòng nào đang vượt ngưỡng. Panel này vẽ sơ đồ mặt bằng ngay trong Grafana và tô màu từng phòng theo một điểm từ 0 đến 100. Điểm cho biết nhiệt độ và độ ẩm đang nằm ở đâu trong ngưỡng riêng của cảm biến: 0 là ở ngưỡng dưới, 100 là chạm hoặc vượt ngưỡng trên. Phòng có vấn đề hiện ra ngay, bấm vào là mở trang chi tiết.

Panel chạy trên dashboard của một lab kiểm thử và các xưởng sản xuất. Repo có 9 sơ đồ mẫu, sơ đồ lớn nhất có 39 phòng.

Ghi chú kỹ thuật đầy đủ

Cách hoạt động

Node T-HMI đọc nhiệt độ và độ ẩm mỗi giây. Mặc định cứ 5 phút node gửi số đo lên MQTT broker một lần. Nếu nhiệt độ đổi 1 °C hoặc độ ẩm đổi 5 %RH thì node gửi ngay. Kho time-series lưu số đo: trước là InfluxDB, nay là ClickHouse. Dashboard Grafana truy vấn kho này, còn panel tô màu từng phòng trên sơ đồ SVG.

Dashboard mẫu làm mới mỗi 30 giây. Giữa hai lần làm mới, một bộ đếm 3 giây đẩy màu của từng phòng dần về điểm mới. Panel không dùng Grafana Live streaming.

Tính năng của panel

  • Dùng được mọi sơ đồ vẽ bằng phần mềm vector. Mỗi phòng là một hình SVG có id theo quy ước room:. DOMPurify làm sạch SVG trước khi hiển thị.
  • Mỗi phòng có điểm từ 0 đến 100, tính theo vị trí của nhiệt độ và độ ẩm trong ngưỡng của từng cảm biến. Ngưỡng mặc định là 18 đến 30 °C và 30 đến 70 %RH. Ngưỡng gửi kèm dữ liệu sẽ thay ngưỡng mặc định.
  • Chế độ gradient tô mỗi phòng bằng một gradient toả tròn, lấy màu từ bảng màu Grafana hoặc các mức threshold. Chế độ theo dải tô mỗi phòng một màu. Nhãn chú thích đổi được.
  • Phòng không có dữ liệu hiện “Disconnected” và để trống.
  • Rê chuột lên phòng sẽ thấy vị trí, thiết bị, nhiệt độ, độ ẩm, ngưỡng, điểm và lần cập nhật cuối.
  • Bấm vào phòng mở một URL chi tiết cấu hình được, điền sẵn phòng, vị trí, cảm biến và thiết bị.
  • Mỗi phòng có một dropdown để chọn cảm biến từ kết quả truy vấn. Thứ tự cảm biến giữ nguyên giữa các lần làm mới.
  • Panel đọc kết quả InfluxDB (Flux) hoặc các dòng SQL có cột nhiệt độ và độ ẩm.
  • CI ký mỗi bản build thành plugin Grafana riêng tư và đóng gói thành file zip.

Node cảm biến

T-HMI là board LilyGO dùng ESP32-S3, màn hình cảm ứng 2,8 inch và cảm biến Sensirion SHT35/SHT85. Màn hình hiện số đo cùng trạng thái WiFi, MQTT, pin và cập nhật. Hiệu chuẩn chạy hai bước: theo từng đoạn, rồi tuyến tính. Mỗi lần đọc có kiểm tra CRC, và một bộ lọc bỏ các giá trị nhảy vọt. Node nhận lệnh khởi động lại, cập nhật và đồng bộ giờ qua MQTT, và tự cập nhật firmware OTA. Có thể gắn thêm cảm biến chênh áp.

Nguồn gốc

Panel phát triển từ một panel chất lượng không khí trong nhà mã nguồn mở (Apache-2.0). Khoa đổi tên thành Environment Quality Floor rồi mở rộng thêm. Cả 66 commit đều do Khoa viết. Panel có 22 commit, từ tháng 7/2025 đến tháng 6/2026. Firmware có 44 commit, từ tháng 2/2025 đến tháng 7/2026. 8 trong 66 commit ghi một AI pair programmer là đồng tác giả. Mã nguồn nằm trong repo công việc riêng tư, nên trang này không có link mã nguồn.

Stack lấy từ repo
GrafanaTypeScriptReactESP32-S3MQTTClickHouse
02 / Kiến trúc

Dữ liệu đi qua hệ thống thế nào

Vẽ lại từ file compose, cấu trúc thư mục và config trong repo.

  1. edgeNode cảm biến T-HMIESP32-S3, SHT35/SHT85, màn hình cảm ứng 2,8 inch
  2. transportMQTT brokerMQTT, payload JSON
  3. storageKho dữ liệu time-seriesInfluxDB, nay là ClickHouse
  4. queryData source GrafanaFlux (InfluxDB) hoặc SQL
  5. panelPanel Environment Quality FloorReact 18, Grafana 10.3 plugin SDK, SVG
03 / Module chính

Các thư mục chính trong repo

panel/src/module.tsĐiểm vào pluginĐăng ký panel và các tuỳ chọn: bảng màu, threshold, chế độ gradient, sơ đồ SVG, link chi tiết, nhãn chú thích.
panel/src/components/SimplePanel.tsxVẽ sơ đồLàm sạch và vẽ SVG, chấm điểm từng phòng, chuyển màu dần, vẽ chú thích, tooltip và link khi bấm vào phòng.
panel/src/components/RoomSensorPicker.tsxGán cảm biến cho phòngLiệt kê các phòng có trong SVG. Mỗi phòng chọn một cảm biến từ kết quả truy vấn.
panel/sample/Giả lập dữ liệuScript Python gửi số đo giả qua MQTT hoặc ghi dữ liệu mẫu vào InfluxDB, để thử khi chưa có phần cứng.
firmware/src/mqttHelper.cppMQTT clientGửi số đo và trạng thái. Nhận lệnh từ xa: khởi động lại, cập nhật, ép cập nhật, đồng bộ giờ, hỏi trạng thái.
firmware/src/screenHelper.cppMàn hình trên thiết bịMàn hình LVGL hiện nhiệt độ, độ ẩm và trạng thái WiFi, MQTT, pin, cập nhật.
firmware/src/configHelper.cppNạp cấu hìnhĐọc cấu hình từ thẻ SD, bộ nhớ flash và API thiết bị. Mã hoá thông tin mạng khi lưu.
firmware/src/OTAHelper.cppCập nhật OTAKiểm tra firmware mới mỗi 30 phút, hiện thanh tiến trình trên màn hình.
04 / Hoạt động gần đây
fw 2.316/07/2026MQTT chạy an toàn giữa các luồng, thêm bộ lọc bỏ giá trị nhảy vọt.
panel 1.0.802/06/2026Thứ tự cảm biến cố định trong ô chọn. Đây là phiên bản plugin hiện tại.
fw 1.29–1.3601/06/2026Thanh tiến trình khi cập nhật trên màn hình, lệnh ép cài lại, hiệu chuẩn hai bước.
panel 1.0.x01/06/2026Bấm vào phòng để xem chi tiết, kiểu dữ liệu MQTT/SQL trực tiếp, tooltip, ô chọn cảm biến có hiện vị trí.
fw 1.2804/03/2026Thêm mã thiết bị và mô tả vị trí vào cấu hình thiết bị.
ci21/10/2025Pipeline CI build và ký plugin.
panel init30/07/2025Panel bắt đầu từ một panel chất lượng không khí trong nhà mã nguồn mở, rồi có thêm sơ đồ SVG.
fw init27/02/2025Commit đầu tiên của firmware cảm biến T-HMI.
$ cat HOW_THIS_PAGE_WAS_BUILT
  1. 01
    Đọc repo
  2. 02
    Phân tích README, docs, compose, package
  3. 03
    Viết nội dung, bỏ thông tin nội bộ
  4. 04
    Reviewer agent đối chiếu với nguồn
  5. 05
    Khoa duyệt trang, rồi deploy
← Tất cả dự án