webServer控制RGB_LED-ESP32

tags: `esp32` `rbg` `webserver`

這個項目還有點模糊,但就我的理解還是先紀錄下來

參考-https://randomnerdtutorials.com/esp32-esp8266-rgb-led-strip-web-server/

控制流程

ESP32網絡服務器顯示一個顏色選擇器。
選擇顏色後，瀏覽器會向包含所選顏色的 R、G 和 B 參數的 URL 發出請求。
ESP32接收請求並拆分每個顏色參數的值。
然後，它向控制條帶的 GPIO 發送具有相應值的 PWM 信號。

如果燈條是使用8顆LED以上,要另外加5V電源獨立供電

程式碼


#include <WiFi.h>

//設定wifi帳密

const char* ssid = "---";
const char* password = "----------";


//設定網路伺服器的port

WiFiServer server(80);

//rgb的對應到網路的初始值

String redString = "0";

String greenString = "0";

String blueString = "0";

int pos1 = 0;

int pos2 = 0;

int pos3 = 0;

int pos4 = 0;


//儲存http請求的變量

String header;

  
//RGB的PIN

const int Rpin = 13;
const int Gpin = 12;
const int Bpin = 14;

//設定時間

unsigned long previousTime = 0;
unsigned long currenTime = millis();

void setup(){

    Serial.begin(115200);

    //配置 LED PWM 功能

    ledcSetup(0, 5000, 8);
    ledcSetup(1, 5000, 8);
    ledcSetup(2, 5000, 8);
    ledcAttachPin(Rpin, 0);
    ledcAttachPin(Gpin, 1);
    ledcAttachPin(Bpin, 2);

    //帶入網路連線

    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED){
        Serial.print(".");
        delay(100);
    }

    Serial.println("WiFi connceted success");
    Serial.println(WiFi.localIP());
    server.begin();
}

  
void loop(){
    WiFiClient client = server.available();
    if (client){
        currenTime = millis();
        previousTime = currenTime;
        String currentLine = ""; 
        while (client.connected() && currenTime - previousTime <= 2000){
            currenTime = millis();
            if (client.available()){
                char c = client.read();
                Serial.write(c);
                header += c;
                if (c == '\\n'){
                    //如果字串等於0表示接收完成
                    if (currentLine.length() == 0){
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-type:text/html");
                        client.println("Connection: close");
                        client.println();

                        // 以下網頁的部份目前對我來說難度有點高,尤其調色部份,暫借用學習對象的範例

                        // Display the HTML web page

                        client.println("<!DOCTYPE html><html>");
                        client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");

                        client.println("<link rel=\"icon\" href=\"data:,\">");

                        client.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">");

                        client.println("<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>");

                        client.println("</head><body><div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1></div>");

                        client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> ");

                        client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>");

                        client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);");

                        client.println("document.getElementById(\\"change_color\\").href=\\"?r\\" + Math.round(picker.rgb[0]) + \"g\" +  Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + \"&\";}</script></body></html>");

                        // The HTTP response ends with another blank line
                        client.println();
                        // Request sample: /?r201g32b255&
                        // Red = 201 | Green = 32 | Blue = 255
                        //搜尋字串裡的關鍵字,如果有的話就將它串接在一起
                        if (header.indexOf("GET /?r") >= 0){
                            pos1 = header.indexOf('r');
                            pos2 = header.indexOf('g');
                            pos3 = header.indexOf('b');
                            pos4 = header.indexOf('&');
                            redString = header.substring(pos1+1, pos2);
                            greenString = header.substring(pos2+1, pos3);
                            blueString = header.substring(pos3+1, pos4);
                            ledcWrite(0, redString.toInt());
                            ledcWrite(1, greenString.toInt());
                            ledcWrite(2, blueString.toInt());
                        }
                        break;
                    }else{
                        //否則當前的行為空
                        currentLine = "";
                    }
                //如果c為空行,則c加入當前行
                }else if (c != '\\r'){
                    currentLine += c;
                }
            }
        }
        header = "";
        client.stop();
        Serial.println("Client disconnected.");
        Serial.println("");
    }
}