?? ?零知派（零知開源）是一個專為電子初學者/電子興趣愛好者設計的開源軟硬件平臺，在硬件上提供超高性價比STM32系列開發(fā)板、物聯(lián)網(wǎng)控制板。取消了Bootloader程序燒錄，讓開發(fā)重心從“配置環(huán)境”轉移到“創(chuàng)意實現(xiàn)”，極大降低了技術門檻。零知開源編程軟件，內(nèi)置上千個覆蓋多場景的示例代碼，支持項目源碼一鍵下載，項目文章在線瀏覽。零知派(零知開源)平臺通過軟硬件協(xié)同創(chuàng)新，讓你的創(chuàng)意快速轉化為實物，來動手試試吧！

?訪問零知實驗室，獲取更多實戰(zhàn)項目和教程資源吧！

www.lingzhilab.com

本教程將教你使用ESP32 搭建 Web 服務器，通過網(wǎng)頁端顏色選擇器實時、無刷新控制 RGB LED 燈的顏色，操作簡單、響應流暢，手機 / 電腦瀏覽器均可使用。

一、軟件和硬件

硬件清單

零知派 - ESP32 開發(fā)板

RGB 全彩 LED 模塊（帶限流電阻，3.3V/5V 通用，高電平點亮）

軟件工具

零知派開發(fā)工具

硬件接線

二、完整代碼與使用說明

將代碼中ssid（WiFi 名稱）和password（WiFi 密碼）修改為你自己的 WiFi 信息，其他代碼無需改動。

/**************************************************************************************
 * 文件: LED.ino
 * 作者：零知派（深圳市在芯間科技有限公司）
 * -^^- 零知派，讓電子制作變得更簡單！ -^^-
 * 時間: 2026-5-8 15:36:27
 * 說明: 
 * 功能:
***************************************************************************************/
#include 

// 網(wǎng)絡憑據(jù)
const char* ssid     = "你的WiFi名稱";
const char* password = "你的WiFi密碼";

// Web服務器
WiFiServer server(80);

// 引腳定義
const int redPin = 25;
const int greenPin = 26;
const int bluePin = 27;

// PWM 配置
const int freq = 5000;
const int resolution = 8;

// HTML 網(wǎng)頁（修復亂碼和顏色預覽問題）
const char index_html[] PROGMEM = R"rawliteral(



    
    
    
    
    
        body { padding: 20px; }
        .container { max-width: 600px; margin: 0 auto; }
        .color-preview { 
            width: 100%; 
            height: 100px; 
            margin: 20px 0;
            border: 2px solid #ddd;
            border-radius: 5px;
            background-color: #000;
        }
        #colorPicker {
            width: 100%;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
        }
        .rgb-value {
            margin-top: 10px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
            text-align: center;
            font-family: monospace;
            font-size: 16px;
        }
        .status {
            margin-top: 10px;
            padding: 10px;
            text-align: center;
            font-size: 14px;
            border-radius: 5px;
        }
        .status.success {
            background-color: #d4edda;
            color: #155724;
        }
    


    
        
            
                ESP32 顏色選擇器
            
        
        
            
                
            
        
        
            
                
            
        
        
            
                RGB: 0, 0, 0
            
        
        
            
                
            
        
    
    
    
        var colorPicker = document.getElementById('colorPicker');
        var previewDiv = document.getElementById('colorPreview');
        var rgbDiv = document.getElementById('rgbValue');
        var statusDiv = document.getElementById('status');
        
        // 發(fā)送顏色到ESP32
        function sendColor(r, g, b) {
            var url = '/?r' + r + 'g' + g + 'b' + b + '&';
            
            fetch(url)
                .then(function(response) {
                    // 顯示成功狀態(tài)
                    statusDiv.style.display = 'block';
                    statusDiv.className = 'status success';
                    statusDiv.innerHTML = '? 顏色已更新: RGB(' + r + ', ' + g + ', ' + b + ')';
                    
                    // 2秒后隱藏狀態(tài)
                    setTimeout(function() {
                        statusDiv.style.display = 'none';
                    }, 1000);
                })
                .catch(function(error) {
                    console.log('發(fā)送失敗: ' + error);
                    statusDiv.style.display = 'block';
                    statusDiv.className = 'status';
                    statusDiv.style.backgroundColor = '#f8d7da';
                    statusDiv.style.color = '#721c24';
                    statusDiv.innerHTML = '? 發(fā)送失敗';
                    setTimeout(function() {
                        statusDiv.style.display = 'none';
                    }, 1000);
                });
        }
        
        // 實時更新預覽并發(fā)送顏色（無需點擊按鈕）
        colorPicker.addEventListener('input', function() {
            var hex = this.value;
            
            // 更新預覽
            previewDiv.style.backgroundColor = hex;
            
            // 轉換HEX到RGB
            var r = parseInt(hex.substr(1, 2), 16);
            var g = parseInt(hex.substr(3, 2), 16);
            var b = parseInt(hex.substr(5, 2), 16);
            
            // 顯示RGB值
            rgbDiv.innerHTML = 'RGB: ' + r + ', ' + g + ', ' + b;
            
            // 自動發(fā)送顏色到ESP32
            sendColor(r, g, b);
        });
        
        // 初始化：發(fā)送初始顏色
        var initialHex = colorPicker.value;
        var initialR = parseInt(initialHex.substr(1, 2), 16);
        var initialG = parseInt(initialHex.substr(3, 2), 16);
        var initialB = parseInt(initialHex.substr(5, 2), 16);
        sendColor(initialR, initialG, initialB);
    


)rawliteral";

const long timeoutTime = 2000;

// 初始化 PWM 功能
void setupPWM() {
    Serial.println("正在初始化 PWM...");
    
    // 檢查 ledcAttach 是否可用
    if (ledcAttach(redPin, freq, resolution)) {
        Serial.println("紅色引腳 PWM 初始化成功");
    } else {
        Serial.println("紅色引腳 PWM 初始化失敗");
    }
    
    if (ledcAttach(greenPin, freq, resolution)) {
        Serial.println("綠色引腳 PWM 初始化成功");
    } else {
        Serial.println("綠色引腳 PWM 初始化失敗");
    }
    
    if (ledcAttach(bluePin, freq, resolution)) {
        Serial.println("藍色引腳 PWM 初始化成功");
    } else {
        Serial.println("藍色引腳 PWM 初始化失敗");
    }
}

// 連接 WiFi
void connectWiFi() {
    Serial.println("n=================================");
    Serial.print("正在連接到 WiFi: ");
    Serial.println(ssid);
    
    WiFi.begin(ssid, password);
    
    int attempts = 0;
    while (WiFi.status() != WL_CONNECTED && attempts < 30) {  // 增加嘗試次數(shù)到30
        delay(500);
        Serial.print(".");
        attempts++;
        
        // 每5秒顯示一次狀態(tài)
        if (attempts % 10 == 0) {
            Serial.println();
            Serial.print("仍在嘗試連接... 已嘗試 ");
            Serial.print(attempts);
            Serial.println(" 次");
        }
    }
    
    Serial.println();  // 換行
    
    if (WiFi.status() == WL_CONNECTED) {
        Serial.println("? WiFi 連接成功！");
        Serial.print("IP 地址: ");
        Serial.println(WiFi.localIP());
        Serial.println("=================================");
        Serial.println("n★ 請在瀏覽器中輸入以上 IP 地址 ★");
        Serial.println("例如: http://" + WiFi.localIP().toString());
        Serial.println("=================================n");
    } else {
        Serial.println("? WiFi 連接失??！");
        Serial.print("錯誤代碼: ");
        Serial.println(WiFi.status());
        Serial.println("請檢查：");
        Serial.println("1. WiFi 密碼是否正確");
        Serial.println("2. WiFi 名稱是否正確（注意大小寫）");
        Serial.println("3. ESP32 是否在信號范圍內(nèi)");
    }
}

// 設置 RGB 顏色值
void setColor(int red, int green, int blue) {
    ledcWrite(redPin, red);
    ledcWrite(greenPin, green);
    ledcWrite(bluePin, blue);
}

// 解析 HTTP 請求
bool parseColorRequest(String header, int& red, int& green, int& blue) {
    int rPos = header.indexOf("/?r");
    if (rPos == -1) return false;
    
    int gPos = header.indexOf('g', rPos);
    int bPos = header.indexOf('b', gPos);
    int endPos = header.indexOf('&', bPos);
    
    if (gPos == -1 || bPos == -1 || endPos == -1) return false;
    
    red = header.substring(rPos + 3, gPos).toInt();
    green = header.substring(gPos + 1, bPos).toInt();
    blue = header.substring(bPos + 1, endPos).toInt();
    
    red = constrain(red, 0, 255);
    green = constrain(green, 0, 255);
    blue = constrain(blue, 0, 255);
    
    return true;
}

// 處理客戶端請求
void handleClient(WiFiClient& client) {
    unsigned long currentTime = millis();
    unsigned long previousTime = currentTime;
    String header = "";
    String currentLine = "";
    
    while (client.connected() && currentTime - previousTime <= timeoutTime) {
        currentTime = millis();
        
        if (client.available()) {
            char c = client.read();
            header += c;
            
            if (c == 'n') {
                if (currentLine.length() == 0) {
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-type:text/html;charset=utf-8");
                    client.println("Connection: close");
                    client.println();
                    client.print(index_html);
                    
                    int red, green, blue;
                    if (parseColorRequest(header, red, green, blue)) {
                        setColor(red, green, blue);
                        Serial.printf("顏色已設置為 紅:%d 綠:%d 藍:%dn", red, green, blue);
                    }
                    
                    client.println();
                    break;
                } else {
                    currentLine = "";
                }
            } else if (c != 'r') {
                currentLine += c;
            }
        }
    }
}

// 初始化
void setup() {
    Serial.begin(115200);
    delay(1000);  // 等待串口就緒
    
    Serial.println("nn=================================");
    Serial.println("ESP32 RGB LED 控制器啟動中...");
    Serial.println("=================================");
    
    setupPWM();
    connectWiFi();
    server.begin();
    
    Serial.println("HTTP 服務器已啟動");
    
    // 初始化為關閉狀態(tài)
    setColor(0, 0, 0);
    
    // 如果 WiFi 連接成功，閃爍 LED 提示
    if (WiFi.status() == WL_CONNECTED) {
        for (int i = 0; i < 3; i++) {
            setColor(255, 255, 255);  // 白光
            delay(200);
            setColor(0, 0, 0);        // 關閉
            delay(200);
        }
    }
}

// 主循環(huán)
void loop() {
    WiFiClient client = server.available();
    
    if (client) {
        Serial.println("新客戶端已連接");
        handleClient(client);
        client.stop();
        Serial.println("客戶端已斷開");
    }
}
/******************************************************************************
 * 深圳市在芯間科技有限公司
 * 淘寶店鋪：在芯間科技零知板
 * 店鋪網(wǎng)址：https://shop533070398.taobao.com
 * 版權說明：
 *  1.本代碼的版權歸【深圳市在芯間科技有限公司】所有，僅限個人非商業(yè)性學習使用。
 *  2.嚴禁將本代碼或其衍生版本用于任何商業(yè)用途（包括但不限于產(chǎn)品開發(fā)、付費服務、企業(yè)內(nèi)部使用等）。
 *  3.任何商業(yè)用途均需事先獲得【深圳市在芯間科技有限公司】的書面授權，未經(jīng)授權的商業(yè)使用行為將被視為侵權。
******************************************************************************/

三、上傳與使用步驟

新建工程：打開零知派開發(fā)工具，新建一個空白工程。

粘貼代碼：將上方完整代碼復制到工程中，修改 WiFi 名稱和密碼。

選擇開發(fā)板：在軟件右側開發(fā)板列表中，選擇ESP32。

編譯上傳：點擊「驗證」→「上傳」，將程序燒錄到 ESP32 開發(fā)板。

查看服務器地址：打開軟件串口調(diào)試窗口，等待 WiFi 連接成功，復制打印的IP 地址（如：192.168.3.165）。

網(wǎng)頁控制：用手機 / 電腦瀏覽器（需和 ESP32 連接同一個 WiFi），輸入復制的 IP 地址，打開控制頁面。

實時調(diào)色：點擊顏色選擇器，無需刷新頁面、無需點擊按鈕，LED 會實時同步你選擇的顏色，同時頁面顯示當前 RGB 數(shù)值和操作狀態(tài)。

四、功能亮點

無刷新實時控制：選擇顏色的瞬間，LED 立即變色，操作流暢無延遲。

可視化操作：網(wǎng)頁自帶顏色預覽框、RGB 數(shù)值顯示、操作成功 / 失敗提示。

自適應界面：手機、電腦瀏覽器均可完美適配，操作簡單。

安全穩(wěn)定：PWM 軟件調(diào)光，保護 LED 不被燒壞，WiFi 連接穩(wěn)定。

狀態(tài)提示：串口打印連接日志、網(wǎng)頁實時提示操作結果。

五、常見問題排查

WiFi 連接失敗：檢查 WiFi 名稱 / 密碼是否正確、ESP32 是否在 WiFi 信號范圍內(nèi)。

網(wǎng)頁打不開：確保手機 / 電腦和 ESP32 連接同一個 WiFi，IP 地址輸入無誤。

LED 不亮：檢查接線是否對應（紅 25、綠 26、藍 27），確認 RGB 模塊是高電平點亮。

顏色異常：檢查引腳接線是否松動，PWM 初始化是否正常（查看串口日志）。

總結

核心原理：ESP32 開啟 WiFi+Web 服務器，網(wǎng)頁通過fetch無刷新發(fā)送顏色數(shù)據(jù)，ESP32 解析后用 PWM 控制 RGB LED。

操作極簡：修改 WiFi 信息→上傳代碼→瀏覽器訪問 IP→實時調(diào)色，全程無需額外硬件。

擴展性強：可自行修改網(wǎng)頁樣式、添加開關、調(diào)整 PWM 參數(shù)，適配更多 RGB 燈模塊。

?審核編輯 黃宇