網頁控制LED燈-ESP32
網頁控制LED燈-ESP32
先上程式碼
#include <WiFi.h>
const char* ssid="基地台名稱";
const char* password="基地台密碼";
WiFiServer server(80);
String header;
String output2="off";
const int output=2;
unsigned long currentTime=millis();
unsigned long previousTime=0;
void setup(){
pinMode(output, OUTPUT);
digitalWrite(output, LOW);
WiFi.begin(ssid, password);
Serial.begin(115200);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("已連線到基地台");
Serial.print("基地台名稱: ");
Serial.println(ssid);
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client=server.available();
if (client){
currentTime=millis();
previousTime=currentTime;
Serial.println("新的客戶端");
String currentLine="";
while (client.connected()&¤tTime-previousTime<=2000)
{
currentTime=millis();
if (client.available()){
char c=client.read();
Serial.write(c);
header+=c;
if (c=='\n'){
if (currentLine.length()==0){
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
if (header.indexOf("GET /2/on")>=0){
Serial.println("on");
output2="on";
digitalWrite(output, HIGH);
}else if (header.indexOf("GET /2/off")>=0){
Serial.println("off");
output2="off";
digitalWrite(output, LOW);
}
client.println("<!DOCTYPE html><html>");
client.println("<style>html {text-align: center;font-family: Arial;display: inline-block;margin: auto;}");
client.println(".button {background-color: #e0e252; border: none;color: white;padding: 15px 35px;");
client.println("text-align: center;text-decoration: none;display: inline-block;font-size: 16px;}");
client.println(".button2 {background-color: #b0b1a2;padding: 15px 32px;}</style></head>");
client.println("<body><h1>ESP32 Web Server</h1>");
client.println("<p>GPIO-2 "+output2+"</p>");
if (output2=="off") {
client.println("<p><a href=\"/2/on\"><button class=\"button\">ON</button></a></p>");
client.println("<p><a href=\"/2/off\"><button class=\"button button2\">OFF</button></a></p>");
} else if (output2=="on"){
client.println("<p><a href=\"/2/on\"><button class=\"button button2\">ON</button></a></p>");
client.println("<p><a href=\"/2/off\"><button class=\"button\">OFF</button></a></p>");
}
client.println("</body></html>");
client.println();
break;
}else{
currentLine="";
}
}
}
}
header="";
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
解析
匯入WIFI的庫
#include <WiFi.h>
定義基地台名稱和密碼
const char* ssid="基地台名稱";
const char* password="基地台密碼";
定義伺服器的端口
WiFiServer server(80);
建立存放接數到的檔頭
String header;
網址列預設內建LED為off
例如:http://localhost/off
String output2="off";
建立LED腳位,紀錄當下時間,和過去的時間
const int output=2;
unsigned long currentTime=millis();
unsigned long previousTime=0;
主要是建立WiFi連線到基地台的初始化
包含伺服端的初始化,如果連線成功後,
會在監控視窗上顯示IP
void setup(){
pinMode(output, OUTPUT);
digitalWrite(output, LOW);
WiFi.begin(ssid, password);
Serial.begin(115200);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("已連線到基地台");
Serial.print("基地台名稱: ");
Serial.println(ssid);
Serial.println(WiFi.localIP());
server.begin();
}
在void loop(){}裡面
先建立客服端的監聽
WiFiClient client=server.available();
如果客戶端和伺服端能成功建立溝通,伺服端會一直監聽客服端所給予的請求
這個請求是以字串被存入變數並存放於內,如果得到on就回應開燈,女果得到off
就關燈
if (client){
currentTime=millis();
previousTime=currentTime;
Serial.println("新的客戶端");
String currentLine="";
while (client.connected()&¤tTime-previousTime<=2000)
{
currentTime=millis();
if (client.available()){
char c=client.read();
Serial.write(c);
header+=c;
if (c=='\n'){
if (currentLine.length()==0){
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
if (header.indexOf("GET /2/on")>=0){
Serial.println("on");
output2="on";
digitalWrite(output, HIGH);
}else if (header.indexOf("GET /2/off")>=0){
Serial.println("off");
output2="off";
digitalWrite(output, LOW);
}
以下是html
client.println("<!DOCTYPE html><html>");
client.println("<style>html {text-align: center;font-family: Arial;display: inline-block;margin: auto;}");
client.println(".button {background-color: #e0e252; border: none;color: white;padding: 15px 35px;");
client.println("text-align: center;text-decoration: none;display: inline-block;font-size: 16px;}");
client.println(".button2 {background-color: #b0b1a2;padding: 15px 32px;}</style></head>");
client.println("<body><h1>ESP32 Web Server</h1>");
client.println("<p>GPIO-2 "+output2+"</p>");
if (output2=="off") {
client.println("<p><a href=\"/2/on\"><button class=\"button\">ON</button></a></p>");
client.println("<p><a href=\"/2/off\"><button class=\"button button2\">OFF</button></a></p>");
} else if (output2=="on"){
client.println("<p><a href=\"/2/on\"><button class=\"button button2\">ON</button></a></p>");
client.println("<p><a href=\"/2/off\"><button class=\"button\">OFF</button></a></p>");
}
client.println("</body></html>");
最後完成回應,終止客戶端對伺服端的請求
client.stop();
留言
張貼留言