在開始本課程前,請先確認好你已經完成 EasySense 燒錄韌體, 設定好 WIFI , 並請已經設定好MQTT伺服器,且已經驗證完成,設備已正常運作,有把相關數據發送到 MQTT 伺服器上。
此外記得記下你的設備名稱,例如 esense_XXXXXX 開始新增儀表時會用到。這裡的 XXXXXX 一般就是六個字母或數字組成的。
再引言一次相關提取變數與其功能,稍後再新增儀表板時比較方便你的輸入與設定。
狀態數據點 Topic: tele/你的設備名稱/STATE
- Time:時間,提取變數 => $.Time
- Uptime:運行時間,提取變數 => $.Uptime
- UptimeSec:運行秒數,提取變數 => $.UptimeSec
- Heap:堆疊記憶體,提取變數 => $.Heap
- SleepMode:睡眠模式,提取變數 => $.SleepMode
- Sleep:睡眠狀態,提取變數 => $.Sleep
- LoadAvg:平均負載,提取變數 => $.LoadAvg
- MqttCount:MQTT 連接次數,提取變數 => $.MqttCount
- Wifi.AP:Wi-Fi 接入點,提取變數 => $.Wifi.AP
- Wifi.SSId:Wi-Fi SSID ,提取變數 => $.Wifi.SSId
- Wifi.BSSId:Wi-Fi BSSID ,提取變數 => $.Wifi.BSSId
- Wifi.Channel:Wi-Fi 頻道,提取變數 => $.Wifi.Channel
- Wifi.Mode:Wi-Fi 模式,提取變數 => $.Wifi.Mode
- Wifi.RSSI:Wi-Fi 信號強度(RSSI),提取變數 => $.Wifi.RSSI
- Wifi.Signal:Wi-Fi 信號品質,提取變數 => $.Wifi.Signal
- Wifi.LinkCount:Wi-Fi 連線次數,提取變數 => $.Wifi.LinkCount
- Wifi.Downtime:Wi-Fi 停機時間,提取變數 => $.Wifi.Downtime
感測器數據點 Topic: tele/你的設備名稱/SENSOR
- 二氧化碳濃度 (單位:ppm) 提取變數: $.SCD30.CarbonDioxide
- 等效二氧化碳濃度 (單位:ppm) 提取變數: $.SCD30.eCO2
- 溫度 (單位: °C) 提取變數: $.SCD30.Temperature
- 濕度 (單位: %) 提取變數: $.SCD30.Humidity
- 露點溫度 (單位: °C) 提取變數: $.SCD30.DewPoint
一、 開啟 網頁版 MqTT Iot 儀表板
詳細連線教學請參考【教學】, 請先連線 MQTT 伺服器。後直接新增幾個儀表。
一、新增折線圖
這裡我們拿 二氧化碳濃度 顯示這個折線圖,點擊 Add Subscription(新增訂閱主題) 按鈕
感測器數據點 Topic: tele/你的設備名稱/SENSOR 提取變數: $.SCD30.CarbonDioxide
看到下圖,這裡訂閱的 Topic 主題 輸入 tele/你的設備名稱/SENSOR ,資料是 Json 需打勾。JsonPath 輸入提取變數。儀錶板下拉式選單,選擇【折線圖】。這裡有需要注意的地方,就是【名稱 ID】這個欄位,就是不能與其他儀表板重複,它必須是唯一獨立個一個識別字串。區間值在折線圖可以忽略,最後單位就是這個數值的單位是什嗎,例如二氧化碳的濃度單位為 ppm 。 完成設定後點擊【訂閱主題】這個按鈕送出,你就會在 儀表板 的區塊看到你所建立的折線圖了。
折線圖的效果如下
新增溫度類型儀表
感測器數據點 Topic: tele/你的設備名稱/SENSOR 提取變數: $.SCD30.Temperature
這裡的新增方式與折線圖大同小異,需要注意的部分。區間在這裡是有效變數,你可以輸入你的區間,一般室溫的範圍應該落於 0-60 這個區間,比較容易透過圖示即可適意目前的溫度高低,此外還是要再次提示一次,就是【名稱 ID】這個欄位,就是不能與其他儀表板重複,它必須是唯一獨立個一個識別字串。
呈現的效果如下
新增水位圖儀表
感測器數據點 Topic: tele/你的設備名稱/SENSOR 提取變數: $.SCD30.Humidity
水位圖可以適用於偵測水位或者溼度等數值的儀表,它有區間值 0% – 100% 的示意圖形。以下為建立水位圖的方式。
這裡的新增方式與折線圖大同小異,需要注意的部分。區間在這裡是有效變數,你可以輸入你的區間,一般濕度的範圍應該落於 0-100 這個區間,比較容易透過圖示即可適意目前的濕度高低,此外還是要再次提示一次,就是【名稱 ID】這個欄位,就是不能與其他儀表板重複,它必須是唯一獨立個一個識別字串。
效果如下:
新增甜甜圈儀表
感測器數據點 Topic: tele/你的設備名稱/SENSOR 提取變數: $.SCD30.DewPoint
甜甜圈儀表可以適用於顯示表達呈現數值有區間範圍的數值。以下為建立甜甜圈的方式。
這裡的新增方式與折線圖大同小異,需要注意的部分。區間在這裡是有效變數,你可以輸入你的區間,一般露點的範圍應該落於 0-100 這個區間,比較容易透過圖示即可適意目前的濕度高低,此外還是要再次提示一次,就是【名稱 ID】這個欄位,就是不能與其他儀表板重複,它必須是唯一獨立個一個識別字串。
效果呈現:
新增柱狀長條圖儀表
感測器數據點 Topic: tele/你的設備名稱/SENSOR 提取變數: $.SCD30.eCO2
這裡的新增方式與折線圖大同小異,需要注意的部分。區間值在這裡無效,此外還是要再次提示一次,就是【名稱 ID】這個欄位,就是不能與其他儀表板重複,它必須是唯一獨立個一個識別字串。
效果如下:
以上為常用的圖表功能,當然有其他類型的圖表,可依照你的需求自行新增。
網頁型 MqTT Iot 儀表板 可以儲存已經製作好的儀表圖
當你建立了一系列的圖表之後,在儀表區 你可以點擊 【Dashboard儲存】 這個功能,就可以把建立好的儀表,儲存成一個網頁檔,下載到你的電腦PC 上,下次你在點擊你儲存的網頁檔,就可以立即看到這些儀表,不用在二次建立或設定。