webServer控制RGB燈-ESP32
webServer控制RGB_LED-ESP32
這個項目還有點模糊,但就我的理解還是先紀錄下來
控制流程
ESP32網絡服務器顯示一個顏色選擇器。
選擇顏色後，瀏覽器會向包含所選顏色的 R、G 和 B 參數的 URL 發出請求。
ESP32接收請求並拆分每個顏色參數的值。
然後，它向控制條帶的 GPIO 發送具有相應值的 PWM 信號。
選擇顏色後，瀏覽器會向包含所選顏色的 R、G 和 B 參數的 URL 發出請求。
ESP32接收請求並拆分每個顏色參數的值。
然後，它向控制條帶的 GPIO 發送具有相應值的 PWM 信號。
程式碼
#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("");
}
}
留言
張貼留言