我們於上一單元已經完成了 MQTT 伺服器的配置,接下來開始要查新增一些儀表板並訂閱在 HiveMQ 部屬的感測器,取得即時數據並且可視化這些數據。

以下影片是採用 EasySense 感測器為例,如果你有自己已經連接到 MQTT 伺服器的感測器,操作上也是大同小異。以下範例是基於 EasySense 設備,我們將二氧化碳感測器取得的數據已經發佈至 HiveMQ ,並新增可視化儀表。當你完成新增與編輯後。這些儀表會儲存,下一次你在打開 MQTT Desk 你就可以直接查閱你已經存檔的儀表查看數據。

由於篇幅的問題,本課程僅只舉例一些常用的儀表,還有很多功能有待你實際操作。以下是目前 MQTT Desk 提供的儀表中英文對照表與其功能解說。

MqttDesk 提供 27 種不同的小工具,用來視覺化 MQTT 資料。這些小工具包括文字、數值顯示、滑桿、按鈕、開關、組合框、LED 指示燈、圖表等,能夠訂閱或發佈來自不同 MQTT 客戶端的訊息。它適合顯示設備狀態、溫度、壓力等資料,並支持圖像顯示、顏色控制及即時數據輸出。用戶可以透過這些工具來控制 IoT 裝置,如 Raspberry Pi、ESP32 等,並能以互動式儀表板呈現即時資料。

 

文字(Text)
用於訂閱來自其他客戶端的文字數據,而非數值數據,透過 MQTT 協議。例如,像是 Raspberry Pi、ESP32、Arduino 基於 MQTT 的客戶端會發佈內部警報訊息,如「電池故障」或「電池充滿」。

數值(Value)
數值小工具僅訂閱數值數據以進行監控。可使用數學函數來達到更準確的視覺化效果。

滑桿(Slider)
橫向或縱向滑桿可用於發佈或訂閱來自其他客戶端的主題。用戶可以根據小工具中定義的最小值和最大值傳送類比數值,例如「0 到 10000」或「10.10 到 550.20」的數值發佈到任何 MQTT 客戶端。

按鈕(Button)
用於向其他智慧家庭自動化系統發送已配置的訊息。

開關(Switch)
此小工具用於開啟或關閉任何 IIoT 或 IoT 裝置。預設為簡單的開關,但你可以從 1106 種不同的圖示中選擇作為開關。例如,用於控制連接到 ESP32、ESP8266、Raspberry Pi 或 Arduino 控制器的 LED 燈。

組合框(Combo Box)
用於向單一主題發佈和訂閱多個負載。

單選按鈕(Radio Button)
用於向單一主題發佈和訂閱多個負載。

多狀態指示器(Multi-state Indicator)
用於訂閱並顯示 IoT 裝置的兩種以上狀態。

LED 指示器(Led Indicator)
透過 MQTT broker 顯示 IoT 或 IIoT 裝置的開啟/關閉狀態。

文字輸入(Text Input)
此小工具用於向任何裝置發佈訊息,或作為向其他 MQTT 客戶端發送訊息的發送器。

URI
訂閱主題並僅在小工具中顯示 URL 連結。由於 iframe 限制,URL 的視覺化效果有限。

圖片(Image)
透過 MQTT 協議監控攝影機的靜態影像到 MqttDesk,因 MQTT 協議使用低位元組傳輸協議。小工具上可顯示靜態影像,無需 MQTT 或透過訂閱主題顯示靜態影像。你也可以將圖片推送到其他 MQTT 客戶端。

文字日誌(Text Log)
用於顯示訂閱主題的日誌,並查看無限數量的點。

垂直進度條(Vertical Progress)
這是一個僅供訂閱的小工具,用於視覺化溫度、水位、壓力等數據。使用數學函數以達到更準確的視覺化效果。

圓形進度條(Circular Progress)
用於訂閱溫度、水位、壓力等數據。

量具(Gauge)
以不同顏色視覺化類比數值的不同範圍(0-30-60-100),如水位、壓力和溫度。

色彩選擇器(Color Picker)
透過 MQTT 協議向其他 MQTT 客戶端發佈顏色,並可用於控制 LED 燈帶的顏色。

時間選擇器(Time Picker)
向其他 MQTT 客戶端發佈時間及當前時間。

節點狀態(Node Status)
用於透過 MQTT 協議視覺化連接的其他 MQTT 客戶端的狀態,並與其同步以獲取 MQTT 客戶端的實際狀態。

折線圖(Line Graph)
折線圖訂閱多種數據在 X-Y 軸上的表示方式。X 軸為時間,Y 軸為數值。可在小工具中選擇點、區域和線條。即時數據可匯出為 CSV 格式至桌面,並可在圖表上配置縮放和平移。數學函數僅適用於單一數據。

圖表(Chart)
用於訂閱數據並以餅圖和甜甜圈圖形式視覺化及分析多種數據。

條形圖(Bar Chart)
橫向和縱向條形圖,用於訂閱多種數據以進行視覺化和分析。

直方圖(Histogram)
視覺化多種訂閱數據的區間和頻率。

地圖(Map)
訂閱經度和緯度主題,僅視覺化資產的位置。

資訊文字(Informative Text)
用於訂閱帶有條件表達式的文字數據,如在小工具上顯示「高溫」警報。