ESP32 je výkonný mikrokontrolér s integrovaným Wi-Fi, díky kterému může fungovat například jako jednoduchý webový server. V tomto návodu si ukážeme, jak vytvořit webovou stránku běžící přímo na ESP32, ze které můžete ovládat připojené komponenty – například LED diody nebo relé.
Po nahrání programu se k ESP32 připojíte přes webový prohlížeč pomocí jeho IP adresy v lokální síti. Na webové stránce se zobrazí tlačítka, která umožní zapínat nebo vypínat výstupy na mikrokontroléru.
Tento projekt je ideální základ pro IoT projekty, domácí automatizaci nebo vzdálené ovládání zařízení.
Co je cílem
Webový server běžící na ESP32 dokáže:
- ovládat dvě LED diody připojené na GPIO piny
- zobrazit webovou stránku přístupnou z telefonu, počítače nebo tabletu
- reagovat na HTTP požadavky z prohlížeče
- změnit stav výstupů okamžitě po kliknutí na tlačítko
V ukázce se používají piny GPIO 26 a GPIO 27, ale lze použít téměř jakékoliv jiné digitální piny.
Potřebné součástky
Pro vytvoření tohoto projektu budete potřebovat několik základních komponent:
- vývojovou desku ESP32
- dvě LED diody
- dva rezistory přibližně 330 Ω
- nepájivé pole (breadboard)
- propojovací vodiče
LED diody se připojují k výstupním pinům ESP32 a slouží jako jednoduchý příklad zařízení, které budeme ovládat přes web.
Zapojení
Zapojení je velmi jednoduché. Každá LED dioda je připojena k jednomu GPIO pinu přes rezistor.
První LED je připojena k GPIO 26, druhá LED k GPIO 27. Druhý konec LED vede přes rezistor do země (GND).
Před zapojením je dobré zkontrolovat pinout vaší konkrétní ESP32 desky, protože některé modely mohou mít jiné označení pinů.
Program pro ESP32 Web Server
Následující kód vytvoří jednoduchý webový server, který umožní ovládat dvě LED diody přes webový prohlížeč.
1#include <WiFi.h>
2
3// přihlašovací údaje k WiFi
4const char* ssid = "YOUR_SSID";
5const char* password = "YOUR_PASSWORD";
6
7// web server na portu 80
8WiFiServer server(80);
9
10// proměnná pro uložení HTTP požadavku
11String header;
12
13// výstupní piny
14const int output26 = 26;
15const int output27 = 27;
16
17// stav výstupů
18String output26State = "off";
19String output27State = "off";
20
21void setup() {
22 Serial.begin(115200);
23
24 pinMode(output26, OUTPUT);
25 pinMode(output27, OUTPUT);
26
27 digitalWrite(output26, LOW);
28 digitalWrite(output27, LOW);
29
30 Serial.print("Connecting to WiFi");
31
32 WiFi.begin(ssid, password);
33
34 while (WiFi.status() != WL_CONNECTED) {
35 delay(500);
36 Serial.print(".");
37 }
38
39 Serial.println("");
40 Serial.println("WiFi connected.");
41
42 server.begin();
43
44 Serial.println("IP address:");
45 Serial.println(WiFi.localIP());
46}
47
48void loop() {
49
50 WiFiClient client = server.available();
51
52 if (client) {
53 Serial.println("New Client.");
54 String currentLine = "";
55
56 while (client.connected()) {
57 if (client.available()) {
58
59 char c = client.read();
60 Serial.write(c);
61 header += c;
62
63 if (c == '\n') {
64
65 if (currentLine.length() == 0) {
66
67 if (header.indexOf("GET /26/on") >= 0) {
68 output26State = "on";
69 digitalWrite(output26, HIGH);
70 }
71
72 if (header.indexOf("GET /26/off") >= 0) {
73 output26State = "off";
74 digitalWrite(output26, LOW);
75 }
76
77 if (header.indexOf("GET /27/on") >= 0) {
78 output27State = "on";
79 digitalWrite(output27, HIGH);
80 }
81
82 if (header.indexOf("GET /27/off") >= 0) {
83 output27State = "off";
84 digitalWrite(output27, LOW);
85 }
86
87 client.println("HTTP/1.1 200 OK");
88 client.println("Content-type:text/html");
89 client.println();
90
91 client.println("<!DOCTYPE html><html>");
92 client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
93 client.println("<style>body{font-family:Helvetica;text-align:center;} .button{padding:16px 40px;font-size:30px;margin:2px;background:#4CAF50;color:white;border:none;} .button2{background:#555555;}</style></head>");
94
95 client.println("<h1>ESP32 Web Server</h1>");
96
97 client.println("<p>GPIO 26 - State " + output26State + "</p>");
98 if (output26State=="off") {
99 client.println("<a href=\"/26/on\"><button class=\"button\">ON</button></a>");
100 } else {
101 client.println("<a href=\"/26/off\"><button class=\"button button2\">OFF</button></a>");
102 }
103
104 client.println("<p>GPIO 27 - State " + output27State + "</p>");
105 if (output27State=="off") {
106 client.println("<a href=\"/27/on\"><button class=\"button\">ON</button></a>");
107 } else {
108 client.println("<a href=\"/27/off\"><button class=\"button button2\">OFF</button></a>");
109 }
110
111 client.println("</html>");
112 client.println();
113
114 break;
115 } else {
116 currentLine = "";
117 }
118 } else if (c != '\r') {
119 currentLine += c;
120 }
121 }
122 }
123
124 header = "";
125 client.stop();
126 Serial.println("Client disconnected.");
127 }
128}