衆所周知，掌控板在創客教育中用的非常廣泛，它是一塊基於 ESP32 的學習開發板。大家對掌控板編程，用的比較多的都是圖形化編程的方式，比如 mPython、Mind+ 等。但是，既然掌控板是基於 ESP32 芯片的，所以我們也可以用 Arduino 軟件對其編程。所以，有時間的話，我準備給大家分享一系列用 Arduino 代碼對掌控板（ESP32）編程的教程：用Arduino玩轉ESP32與掌控板系列
本系列歷史文章目錄：
本期給大家帶來的是：掌控板 Siri 語音識別智能終端。
不好意思，用這種標題黨的方式把你吸引進來，不到 100 行代碼的確有點誇張，因爲實際上核心代碼：
不到 50 行！
不到 50 行！
不到 50 行！
國際慣例，訪問鏈接查看演示效果：
https://www.bilibili.com/video/av93961105/
項目概述
前一段時間，掌控板 2.0 正式上市了，但是呢第一批產品生產數量有限，所以很多朋友買不到最新版的板子。拿着手裏的 1.0 版本，卻只能眼巴巴看着別人用掌控板 2.0 玩語音識別了。
所以我們要堅決對這種行爲說不！在這篇文章中，我就教大家讓任何版本的掌控板（或其他基於 ESP32、ESP8266 芯片的開發板）實現語音識別，而且識別的效果更好！
在項目開始講解之前，我們先來看一下完整思路。在這個項目中，我們將掌控板 ESP32 設置爲一個 Web 服務器，當用戶在網頁上訪問這個服務器 IP 地址的時候，就會跳出如下界面。
我們可以通過點擊 Light On 或者 Light Off 按鍵，來控制掌控板上的 RGB LED 的亮滅，也可以訪問這兩個按鍵的對應 IP 地址，來控制 LED 燈的亮滅。這樣就完成了基本的通過 Web 頁面控制掌控板的功能。
在這基礎之後，我們可以進一步通過設置一些語音助手，比如 Siri、天貓語音精靈等，通過語音命令訪問這些 IP 地址，從而實現語音識別開關燈的功能。
庫文件安裝
這個項目需要用到 3 個 Arduino 庫：Adafruit_NeoPixel、ESPAsyncWebServer、AsyncTCP。
Arduino 庫安裝的教程不是本篇的重點，這裏不再贅述，只給出 3 個庫的網址，大家可以自行百度查找 Arduino 怎麼安裝庫。
- Adafruit_NeoPixel：https://github.com/adafruit/Adafruit_NeoPixel
- ESPAsyncWebServer：https://github.com/me-no-dev/ESPAsyncWebServer
- AsyncTCP：https://github.com/me-no-dev/AsyncTCP
Arduino 代碼
先把完整的程序放出來，再進行講解。
在程序的開頭，我們首先引入了需要用到的庫函數：
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <Adafruit_NeoPixel.h>
然後設置網絡的賬號和密碼：
const char *ssid = "wifi_name";
const char *password = "wifi_password";
接着定義了 NeoPixel 對象（RGB LED 燈）和 WebServer 對象：
Adafruit_NeoPixel pixels(3, 17, NEO_GRB + NEO_KHZ800);
AsyncWebServer server(80);
在初始化函數 setup() 中，我們首先對串口和 RGB 燈進行了初始化：
Serial.begin(9600);
pixels.begin();
然後將掌控板連接到網絡，並把 IP 地址在串口中打印出來：
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(1000);
Serial.println("Connecting to WiFi..");
}
Serial.println("WiFi connected");
// Print ESP32 Local IP Address and Some Tips
Serial.print("Open your brower, and visit: http://");
Serial.println(WiFi.localIP());
Serial.println();
最後就是最重要的 Web 服務器設置。關於 Web 服務器設置的詳細教程，可以查看官網：https://github.com/me-no-dev/ESPAsyncWebServer
這裏只放出本文需要的代碼。當訪問根目錄“/”時，顯示一些提示語；當訪問“/on”目錄時，設置 LED 燈爲亮，並在串口和網頁端顯示提示語；當訪問“/off”目錄時，設置 LED 燈爲滅，並在串口和網頁端顯示提示語。
// Root / Webpage
server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send_P(200, "text/plain", "Turn On Light: IP/on\nTurn Off Light: IP/off");
});
// Webpage to turn on light
server.on("/on", HTTP_GET, [](AsyncWebServerRequest * request) {
pixels.setPixelColor(0, 0xFF0000);
pixels.setPixelColor(1, 0xFF0000);
pixels.setPixelColor(2, 0xFF0000);
pixels.show();
Serial.println("Light is on");
request->send_P(200, "text/plain", "Light is on");
});
// Webpage to turn off light
server.on("/off", HTTP_GET, [](AsyncWebServerRequest * request) {
pixels.clear();
Serial.println("Light is off");
request->send_P(200, "text/plain", "Light is off");
});
在 setup() 函數的最後，運行 Web 服務器：
server.begin();
至此，整個程序就編寫完成了，在 loop() 函數中，不需要做任何事，當然你也可以運行其他你想要的代碼。
程序上傳
在 Arduino 中選擇掌控板或者 ESP32 相關的芯片，然後將程序上傳，打開串口監視器，我們可以看到串口監視器中提示我們訪問相應的網址。（如果沒看到相應信息，可以按一下掌控板後面的 RST 按鍵，重啓程序）
打開電腦瀏覽器或者手機瀏覽器，訪問相應的 IP 地址，這裏是：192.168.10.202，我們可以看到網頁上顯示了相應的提示信息。訪問地址 192.168.10.202/on 可以打開 LED 燈，訪問地址 192.168.10.202/off 可以關閉 LED 燈。
嘗試訪問對應的地址，當訪問 192.168.10.202/on 時，瀏覽器和串口監視器中，都輸出了相應的提示信息，同時我們也可以看到掌控板上的 RGB 燈也亮了起來。
當訪問 192.168.10.202/off 時，瀏覽器和串口監視器中，也都輸出了相應的提示信息，同時掌控板上的 RGB 燈也熄滅了。
網頁設計
這部分不是本文的重點，也不會影響最終語音控制的效果，所以如果您對網頁設計不感興趣，也可以略過，直接跳轉到下一節。
在上文中，我們已經基本完成了通過網頁來控制 LED 燈的相關功能，但是這個網頁畢竟還是太簡陋了。所以我們對網頁稍微進行一些優化。
HTML 是用來設計網頁的代碼，它可以控制我們在瀏覽器中看到的網頁的外觀樣式。由於本人對網頁設計也不擅長，所以這裏只放一個基礎的外觀改進代碼。
上述代碼最終形成的效果如下。我們可以直接點擊 Light On 和 Light Off 兩個按鈕（或鏈接）來控制 LED 的亮滅，從而避免了手動輸入網址的麻煩。
當然在這個項目中，不用設計 HTML 代碼也是完全沒有問題的，我們只是爲了方便在網頁上控制。
設計完網頁，我們要怎麼加到代碼中去呢？其實也很簡單。
我們在程序開頭定義一個字符串變量，將網頁的代碼保存到這個變量中：
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html {
text-align: center;
}
</style>
</head>
<body>
<h2>mPython Light Switch</h2>
<a href="/on">Light On</a>
<p></p>
<a href="/off">Light Off</a>
</body>
</html>)rawliteral";
然後將幾處 server.on() 代碼中的 request->send_P() 部分都修改爲如下代碼即可：
request->send_P(200, "text/html", index_html);
這個時候，重新上傳程序，再去訪問相應的網頁，你就可以看到網頁編程上圖所示的樣子了。
放個預告
如果你對網頁設計比較擅長的話，你也可以設計好看一些的頁面，比如：
我們不僅可以在網頁中控制 LED 燈的亮滅，也可以顯示各種傳感器的信息，這些內容以後再講。
語音助手設置
前面說了那麼多，終於來到語音識別設置部分了。
你是不是很好奇，代碼中完全沒有語音識別相關的部分，我們怎麼做到語音識別呢？其實也很簡單，既然可以通過網頁訪問相應的網址，我們是不是也可以讓語音助手來訪問相應的網址呢？
由於筆者手上沒有其他語音助手或者智能音箱類產品，所以這裏以 Siri 爲例。
打開 iOS 系統自帶的捷徑 App（英文名稱 Shortcuts），沒有沒有的話，也可以去 App Store 免費下載：
然後分別設置兩個捷徑，命名爲開燈和關燈。兩個捷徑的設置都很簡單，就是訪問給定的 URL 地址。
由於 iPhone 中的捷徑是支持 Siri 語音識別調用的，所以我們可以直接通過 Siri 來運行這兩個捷徑，從而達到語音開關燈的效果。
效果演示
喚醒你的 Siri 看看效果吧。不過這裏需要注意的是，你的 iPhone 和掌控板，必須處於同一局域網中。
總結
在本章中，我們學習了：
- WebServer 的基礎用法，可以通過瀏覽器網頁來控制 LED 燈的亮滅；
- 然後通過設計 HTML 網頁代碼，讓交互界面更加友好方便；
- 最後通過 iOS 的捷徑應用，實現了語音識別間接控制 LED 燈的功能
通過類似的方法，我們還能同時控制更多的 LED 燈、其他執行器，甚至通過語音識別來獲得相應傳感器的信息。當然你也可以將 Siri 語音識別的文字返回給掌控板，實現更多複雜好玩的創意。
代碼下載
點擊下方鏈接，查看完整代碼下載地址：