MQTT IOT Panel 手機儀表板整合

在開始本課程前，請先確認好你已經完成 EasySense 燒錄韌體, 設定好 WIFI , 並請已經設定好MQTT伺服器，且已經驗證完成，設備已正常運作，有把相關數據發送到 MQTT 伺服器上。

此外你也已經完成 安裝 MQTT IOT Panel 這個 APP到你的手機或平板上。如果還沒有請參考這一篇 安裝教學 ，以上都完成後，我們接著開始進行儀表板的配置。

此外記得記下你的設備名稱，例如 esense_XXXXXX 開始新增儀表時會用到。這裡的 XXXXXX 一般就是六個字母或數字組成的。

再引言一次相關提取變數與其功能，稍後再新增儀表板時比較方便你的輸入與設定。

一、 開啟 MQTT IOT Panel 這個 APP 軟體

如果你已經完成前面提到的教學，那此時你應該已經完成了新增伺服器並已經連線。目前是一個沒有任何儀表板的狀態。開始新增一些要查看的資訊吧，以下只單純簡單的範例，上面提到的數據點你都可以導入並設定。

開啟 APP 後，先前提到會讓你設定 (Add Connection) MQTT伺服器的部分，當你完成後你會看到一個你剛建立的的面板項目，點擊進入後你會看到如下的畫面，依照站片中的提示完成預設 prefix topic 的設定，這裡指的 prefix topic 就是剛上一節提到 感測器數據點 Topic: tele/你的設備名稱/SENSOR， 在 prefix topic 先設定好 【tele/設備名稱】 這樣你稍後設定儀表板時會比較方便一點，當然你也可以忽略不設，稍後在各儀表板設定時就完整路徑輸入也可以。

開始新增儀表板

點擊【ADD PANEL】之後，你會看到很多種儀表板供你選擇，我們先針對二氧化碳套件會用到的部分教學，你也可以利用本套件提供的數據點，依照你的喜好去配置你的儀表板。

1. 新增二氧化碳字卡表: 選擇 【Text Log】 ，看到 Topic 的項目，我們這裡只輸入 /SENSOR 是因為我們已經於面板設定了 prefix topic ，實際上訂閱的主題就是 tele/設備名稱/SENSOR，看到【Payload is Json】打勾，欄位輸入我們要呼叫的數據點，例如二氧化碳濃度 數據變數名稱為: $.SCD30.CarbonDioxide ，完成後點擊【Save】。此時你應該可以看到新增來的二氧化碳濃度字卡，不過這裡字卡寬度佔滿一行，我們可以在針對寬度變更，點擊畫面下方有個_Panel Width “Full screen” 改為 1/2 “screen width” 就佔滿半格。以上操作如下方截圖。

依序如上一步驟的流程，我們建立了 【Text Log] 等校二氧化碳的濃度，接著我們要新增另一種不同型態的儀表板【 Line graph 】溫度折線圖。

溫度數據變數名稱為: $.SCD30.Temperature，如下提設定這個歷史折線要記錄 50 個數據點，可以在 Max persistence 設定你要記錄的數量，此外關於 Sow Plot area, 跟 Show points and tooltip 是設定折線圖是否要顯示各數據點的數值，以及是否要用顏色覆蓋折線圖的面積。Smooth curve 是指折線是否要平滑顯示。完成後點擊【Save】。效果如下圖

接下來我們嘗試新增兩個儀表，都採用 【Gauge】類比儀表功能，將溫度與濕度的即時數據用 Gauge 儀表的方式來呈現。Gauge 儀表，可以設定最小值與最大值並用半圓形加上指針的方式來呈現。 Arc color 設定當不同數值的時候顯示不同顏色的方式，其中 Arc color 就是代表設定區間值跟顏色的差異，例如下圖中所示，0-33.33 呈現灰色,33.33-66.67 呈水藍色,高於 66.67 – 100 區間則顯示深藍色。

這裡舉例另一種儀表格式【Bar graph 柱狀圖】，我們同時添加了三種變數【溫度】、【濕度】、【露點溫度】在一個圖表內用柱狀圖顯示數值與對比性。