在 ESP32 專題(二) 智慧植栽 – 自動澆灌裝置(上)中，我們已經認識了自動澆灌裝置的組裝方式和運作原理了，現在就跟著我們更進一步從程式設計到網頁的使用介面設計，一起把自動澆灌裝置完成吧！
九、程式設計
所有程式碼可從 CIRCUSPi /Smart_Sprinkler 取得。
1. Arduino 相關程式說明
Arduino 程式主要執行以下工作：
(1) 啟用 Wi-Fi
(2) 啟用 OTA
(3) 啟用 WebServer
(4) 運行主邏輯程式
(1) 啟用 Wi-Fi
在程式初始化執行，預設會先使用 STA Mode 連線，若連線失敗則改用 AP Mode 連線方式。
(2) 啟用 OTA
在 Wi-Fi 連線完成後執行，OTA（Over-the-air programming），意思是「空中編程」，可利用 Wi-Fi 無線上傳程式碼，不再需要將裝置拆開或預留燒錄介面即可快速更新程式。
(3) 啟用 WebServer
在 OTA 順利初始化後，我們將運行 WebServer，成功啟用後將註冊所有 HTTP Handler。
‧ HTTP API List
下表列出這次會用到的 HTTP API。
| URL | Method | Handler | 說明 |
| / | GET | GetMainPage | 取得主頁面 |
| /waterVal | GET | GetWaterVal_handler | 取得水分百分比與原始ADC數值 |
| /setVal | GET | GetSetVal_handler | 取得所有已設定參數 |
| /save | POST | SetSave_handler | 設定儲存目前參數 |
| /bumpOn | GET | SetBumpON_handler | 啟動抽水馬達 |
| /bumpOff | GET | SetBumpOFF_handler | 關閉抽水馬達 |
| /mode | POST | SetMode_handler | 設定當前模式 |
‧ HTTP API 參數說明如下
‧ 主頁面 API 參數
|
/ 取得主頁面（GET），Format：None |
|
|
Name |
Description |
‧ waterVal API 參數
|
/waterVal 取得水分百分比與原始ADC數值（GET），Format：JSON |
|
|
Name |
Description |
|
valP |
經過上下限設定後計算出的水分百分比 |
|
raw |
感測器原始ADC數值 |
‧ setVal API 參數
|
/setVal 取得所有已設定參數（GET），Format：JSON |
|
|
Name |
Description |
|
mode |
當前設定模式 |
|
highVal |
當前設定最高水量數值 |
|
lowVal |
當前設定最低水量數值 |
|
lowLimit |
當前設定自動澆水下限水分百分比 |
|
interval |
當前設定定時澆水時間間隔 |
|
waterSec |
當前設定定時澆水持續秒數 |
‧ save API 參數
|
/save 設定儲存目前參數（POST），Format：JSON |
|
|
Name |
Description |
|
highVal |
設定最高水量數值 |
|
lowVal |
設定最低水量數值 |
|
lowLimit |
設定自動澆水下限水分百分比 |
|
interval |
設定定時澆水時間間隔 |
|
waterSec |
設定定時澆水持續秒數 |
‧ bumpOn API 參數
|
/bumpOn 啟動抽水馬達（GET），Format：None |
|
|
Name |
Description |
|
|
|
‧ bumpOff API 參數
|
/bumpOff 關閉抽水馬達（GET） ，Format：None |
|
|
Name |
Description |
‧ mode API 參數
|
/mode 設定當前模式（POST） ，Format：Raw Text |
|
|
Name |
Description |
|
mode |
模式（0：自動，1：手動，2：定時） |
(4) 運行主邏輯程式
主程式主要會根據當前模式執行各項澆水動作，分別有「自動」、「手動」、「定時」三種模式可以設定，三種模式動作說明如下：
- 自動：此模式會根據使用者設定的「自動澆水下限百分比」與土壤當前水分百分比比對並自動澆水，其中有用到模糊控制演算法，比例為 10%。
- 手動：此模式完全交由使用者手動操作開啟或停止澆水。
- 定時：此模式會根據使用者設定的「定時澆水間隔」與「澆水持續秒數」定時澆水。
2. Web(HTML、CSS、JavaScript)
Web程式主要執行以下工作：
(1) 渲染 UI（HTML）
(2) 設定元件樣式（CSS設定）
(3) 根據選擇模式切換UI元件（JavaScript）
(4) 透過異步HTTP發送對應請求（JavaScript）
(5) 定時請求資料（JavaScript）
(1) 渲染 UI
使用 HTML 設計我們需要的元件，程式如下：
(2) 設定元件樣式
使用 CSS 設定我們的元件樣式，讓元件外觀更佳美觀，程式如下：
(3) 根據選擇模式切換 UI 元件
根據使用者所選的模式切換要顯示的元件，程式如下：
(4) 透過異步 HTTP 發送對應請求
透過異步 HTTP XMLHttpRequest 發送指定 Json 資料到 Server 端，程式如下：
(5) 定時請求資料
透過 setInterval 方法，每 2 秒定時呼叫 function GetWaterVal ，取得最新資料，程式如下：
十、燒錄程式
1. 安裝開發板
從 Arduino IDE 開發板管理員安裝「M5Stack」系列開發板，其中包含我們這次會用到的「STAMP-PICO」開發板。
- M5Stack ( V2.0.4 )
2. 安裝 Library
自動澆灌裝置會需要使用到下列 Library，可從 Arduino Library Manager 安裝。
- ArduinoJson ( V6.19.4 )
- STAMP-PICO ( V0.0.2 )
- FastLED ( V3.5.0 )
- WiFiManager ( V2.0.12-beta )
3. 有線燒錄
初次燒錄或程式內沒有 OTA 更新程序，就需要藉由有線燒錄的方式，透過 USB 轉 TTL 工具燒錄程式，詳細燒錄請依照下列流程：
(1) 準備「CP2102 模組USB轉TTL」模組，依照下列對照表接線。
| M5Stamp-PICO | CP2102模組 |
| +5V | 5V |
| GND | G |
| RXD | G1 |
| TXD | G3 |
(2) 準備一個「短路跳帽」，將「G0」接地（與 GND 連接），如下圖所示：
(3) 透過 Arduino IDE 開啟程式「Smart_Sprinkler.ino」並上傳，如下圖所示：
(4) 移除「短路跳帽」並重新上電啟動。
4. 無線燒錄
無線燒錄必須要在程式內部事先埋好 OTA 燒錄的程式，初次拿到套件 M5Stamp-PICO 時，內部不會有 OTA 燒錄程式，必須先使用有線燒錄，在程式碼內加入 OTA 燒錄的程式後，即可使用 OTA 無線燒錄，詳細燒錄請依照下列流程：
(1) 將「M5Stamp-PICO」上電，「G1、G3」可不接，無須插入「短路跳帽」。
(2) 使用 Wi-Fi 將電腦連接到「Smart_Sprinkler_AP」或與它處於相同區域網路。
(3) 關閉電腦「Public network」防火牆，如下圖所示，進行相關動作：
(4) 開啟 Arduino IDE，選擇目標 「Network ports」燒錄序列埠裝置 IP。
(5) 如同一般燒錄過程，其中若中間要求輸入密碼請輸入「12345678」（使用者可自行透過程式修改）。
(6) 等待上傳完畢即可。
十一、設定 Wi-Fi
自動澆灌裝置連線模式分成「AP Mode」、「STA Mode」兩種，使用情境不同，詳細介紹及操作方式請參考下列說明：
1. AP Mode 說明
- 自動澆灌裝置本身會當作 AP（Access Point，Wi-Fi 來源），使用者需要自行開啟 Wi-Fi 連到此裝置。
- 若裝置開機時無法連接到指定 AP 將自動切換為 AP Mode。
- 此模式適合在無任何 Wi-Fi 環境下使用。
- 預設 SSID 為「Smart_Sprinkler_AP」，無密碼。
- 連接 IP 為「192.168.4.1」。
2. STA Mode 說明
- 使用者可將自動澆灌裝置連到指定Wi-Fi （路由器），使用者裝置（電腦或移動裝置）只需要在同一區網即可相互連接存取。
- 按下自動澆灌裝置上的「Wi-Fi 設定按鈕」即可進入STA Mode Wi-Fi 設定模式。
3. STA Mode Wi-Fi 設定流程
(1) 按下自動澆灌裝置上的「 Wi-Fi 設定按鈕」，並連接到「Smart_Sprinkler_AP」Wi-Fi熱點。
(2) 連上後會自動開啟瀏覽器轉到設定頁面，若沒有自動轉跳則自行開啟瀏覽器輸入 IP 「192.168.4.1」。
Wi-Fi Manager 提供四個操作選項：
- Configure Wi-Fi：設定 Wi-Fi
- Info：取得系統資訊
- Exit：離開
- Update：更新韌體
(3) 選擇「Configure Wi-Fi」，選擇目標 Wi-Fi 來源，輸入密碼後按下「Save」存檔。
(4) 存檔後將自動澆灌裝置將會開始連線到指定 Wi-Fi。
4. AP Mode Wi-Fi 設定流程
預設會在此模式，若想從 STA 模式切換至 AP 模式只須清除已記錄的 Wi-Fi 來源，詳細步驟請依照下列操作方式：
(1) 依照「STA Mode Wi-Fi 設定流程」1~2 流程操作。
(2) 「STA Mode Wi-Fi 設定流程」第二步驟改選「Info」，滑到下方選擇「Erase Wi-Fi Config」清除 Wi-Fi 設定。
(3) 清除後裝置將會自動重新啟動，此時將沒有已記錄的 Wi-Fi 來源，裝置將會自動切換到 AP 模式。
5. Wi-Fi IP 查看方式
將自動澆灌裝置連接到 CP2102 模組，並透過任意序列埠工具（ex:Arduino IDE Serial Monitor）開啟即可取得目前 IP 位置。
十二、燈號說明
為了即時了解目前裝置連線方式，我們利用 M5Stamp Pico 內建的 RGB LED 來作為狀態指示燈，下表為各個燈號對應的連線狀態。
| 燈號 | 狀態 |
| RED | Wi-Fi 設定中 |
| GREEN | STA Mode |
| BLUE | AP Mode |
十三、網頁操作
1. 連線方式
依照「Wi-Fi IP查看方式」取得裝置 IP，裝置操作將會需要透過瀏覽器連入指定 IP 網頁，依照上面範例，我的裝置 IP 為「192.168.1.55」，若裝置處於 AP 模式則裝置 IP 固定為「192.168.4.1」。
2. 水量百分比校正
若要得到準確的水量百分比，需要先根據實際環境量測並設定「最低水量數值」（土壤最乾燥的實際數值）、「最高水量數值」（土壤最濕潤的實際數值），程式將會根據此範圍換算以後對應的水量百分比。
3. 自動模式設定頁面
自動模式會根據「自動澆水下限」百分比自動澆水，低於百分比 10% 將會開始澆水，高於百分比 10%，將會停止澆水。
4. 手動模式設定頁面
手動模式將交由使用者自行啟動或停止澆水。
5. 定時模式設定頁面
定時模式會根據「定時澆水間隔（以分鐘為單位）」定時澆水，可透過設定「定時澆水秒數」，設定每次澆水的持續時間（以秒為單位）。
十四、小結
以上就是這次的 ESP32 專題-自動澆灌裝置，有了自動澆灌裝置後，不管是想要遠端澆水、自動澆水、查看水量、定時澆水都非常方便，透過簡單的設定頁面即可設定想要的模式；其中製作過程了解到物聯網裝置的設計方式，盡可能簡化裝置設定方式，讓對程式不熟悉使用者也能輕易操作，本次的 ESP32 專題分享就到這邊，我們下次見~
