一. 前言

Smart Display作為人機介面，透過 UART 串列通訊與 ESP32-C3 模組溝通，由 ESP32-C3 負責 WiFi 連線並呼叫 Nanoleaf Shapes 智能燈板的 Open API，實現燈光控制與場景查詢的測試過程。本文重點放在 Smart Display 端發送自訂 UART 指令給 ESP32-C3 進行初步測試，驗證 UART 通訊、WiFi 連網以及 Nanoleaf API 呼叫的可行性。此階段為後續完整智慧顯示控制系統的基礎，證明 UART 橋接與物聯網 API 整合的可靠性。

二. 系統架構

Smart Display ↔ UART ↔ ESP32-C3 ↔ WiFi ↔ Nanoleaf Shapes (Open API)

三. 硬體需求

1.Smart Display

• WINSTAR 智慧顯示器(支援 TouchGFX GUI)

2.ESP32-C3-DevKitC-02

• 電源轉換器，輸入 5 V，輸出 3.3 V。

3.Nanoleaf Shapes

• 通訊協定： WiFi (2.4 GHz b/g/n)
• 電壓： 100VAC - 240VAC
• 最大電源功率： 42W
• 每面板最大耗能: 2W

四. PC控制測試

1.設定nanoleaf shapes

⏹︎ 手機登入shapes設備(IOS)

• 首先在 App Store 找到官方的 Nanoleaf 應用程式
• 配對你的畫布
  • 在儀表板上，點擊右上角的鉛筆圖示。
  • 點擊「新增裝置+」
  • 應用程式會自動打開配對視窗。
  • 請依照螢幕上的指示操作：
    選項A: 掃描 QR 碼
    選項B: 輸入你 Canvas 電源供應器、控制器或快速啟動指南/歡迎卡上找到的 8 位數配對碼
    選項C: 使用NFC Tap，方法是將手機頂部放在控制器的按鈕上方
• 您的 Nanoleaf Canvas 現在應該已經連接好，隨時可以使用

 

⏹︎ 下載燈板場景到Nanoleaf shapes

2.設定esp32-c3

⏹︎ 透過PC設定esp32-c3

PC-->USB to UART converter-->esp32-c3

⏹︎ 設定Station 模式

ESP32-C3 的 WiFi 模式與 ESP32、ESP8266 類似，同樣支援以下三種常見工作模式：

• Station 模式(STA 模式): ESP32-C3 作為客戶端，連接至現有的 WiFi 路由器（例如家用網路）。在此模式下，裝置可上網或與網路內其他設備通訊，但不會建立自己的熱點。 應用範例：感測器將資料上傳至雲端（如 MQTT、HTTP）。
• SoftAP 模式(AP 模式，Soft Access Point): ESP32-C3 本身變成一個 WiFi 熱點，其他裝置（如手機、電腦）可直接連接它。通常用於初次配網或本地控制。 預設 SSID 通常為「ESP32-AP」之類，預設 IP 為 192.168.4.1。 ESP32-C3 支援最多 4 個同時連接的客戶端（比 ESP8266 略少）。 應用範例：使用手機 App（如 EspTouch、Web 配網頁面）輸入家用 WiFi 帳號密碼。
• Station + SoftAP 模式（STA+AP 併發模式）: 同時開啟 STA 和 AP 模式。ESP32-C3 一邊連上路由器上網，一邊提供自己的熱點供手機直接連接。 這是最常見的智慧家居應用模式：正常上雲端報資料，同時允許手機在無網路環境下也能本地控制。 注意：ESP32-C3 只有單天線，兩模式共用同一頻道，效能會略低於單一模式，但對大多數應用已足夠。

 

AT: AT+CWMODE=1

⏹︎ 連接 Nanoleaf Shapes 熱點(配對模式下無密碼)

• AT+CWJAP: ESP32-C3 (Station 模式) 連上指定的 WiFi 存取點。
• "Shapes 4992": 這是 Nanoleaf Shapes 燈板的 WiFi SSID。
• "": 密碼為空（Nanoleaf 燈板在首次設定或重置後的配對模式下，WiFi 熱點通常是開放的、無密碼）。

 

AT: AT+CWJAP="Shapes 4992",""

⏹︎ 查詢取得IP

ESP32-C3 會取得燈板分配的 IP（通常是 192.168.x.x 網段）。

AT: AT+CIPSTA?

⏹︎ 取得Nanoleaf token （長按控制器進入配對模式）

• 地址固定為燈板熱點的 http://192.168.2.1:16021/api/v1/new。
• 成功會回應 JSON 如 {"auth_token":"你的長token"}。

 

先讓shapes進入搜尋配對模式

獲取shapes token:

AT:AT+HTTPCLIENT=3,0,"http://192.168.2.1:16021/api/v1/new",,,1,""

⏹︎ 獲取所下載的Nanoleaf shapes場景列表

AT+HTTPCLIENT 是常用的 HTTP 客戶端指令，適合用來與 Nanoleaf API 互動（例如取得資訊、查詢場景列表等）

AT:AT+HTTPCLIENT=2,1,"http://192.168.2.1:16021/api/v1/FXzbb1CapQ3e0GJsxrga6RvVKWXVjrbA/effects/effectsList",,,1

⏹︎ 控制shapes開燈

使用HTTP PUT 發送請求開燈

AT:AT+HTTPCPUT="http://192.168.2.1:16021/api/v1/FXzbb1CapQ3e0GJsxrga6RvVKWXVjrbA/state",23,2,"connection: keep-alive","content-type: application/json"

AT: {"on": {"value": true}}

⏹︎ 控制shapes關燈

使用HTTP PUT 發送請求關燈

AT:AT+HTTPCPUT="http://192.168.2.1:16021/api/v1/FXzbb1CapQ3e0GJsxrga6RvVKWXVjrbA/state",24,2,"connection: keep-alive","content-type: application/json"

AT: {"on": {"value": false}}

五. 整合測試 (Smart Display + ESP32-C3)

開發環境：

• STM32CubeIDE: 1.16.0
• TouchGFX : 4.24.2 Designer

1.TouchGFX設計(建立一個Button)

2.程式實作（winstar_screenView.cpp）

新增 UART 發送函式，自訂簡單指令協定

Button 點擊事件：切換狀態並發送對應 UART 指令

3.測試開燈與關燈

點擊 Button1：首次開燈，再次點擊關燈。

六. 結語

本測試成功驗證 Smart Display 透過 UART 串列指令，能有效控制 ESP32-C3 模組連網並呼叫 Nanoleaf Shapes API，快速的實現開關Nanoleaf Shapes燈板功能，為後續開發觸控式圖形介面（GUI）控制燈光奠定基礎。系統延遲低、穩定性高、通訊可靠，未來可擴展至完整燈光控制（如亮度調整、顏色變換、動態場景切換），並在 Smart Display 上顯示燈板狀態、即時回饋或自訂控制面板，進一步整合更多物聯網應用。

七. 參考資料

• ESP32-C3-DevKitC-02
• Nanoleaf 官方網站