- \n
- Bare minimum<\/a><\/li>\n
- Extended Hello World sketch<\/a><\/li>\n<\/ul>\n<\/li>\n
- Switching one LED via browser<\/a><\/li>\n
- Three LEDs + PWM + analogRead<\/a>\n
- \n
- More beautiful with CSS<\/a><\/li>\n
- More convenient with JavaScript<\/a><\/li>\n<\/ul>\n<\/li>\n
- Controlling multiple ESP32s<\/a>\n
- \n
- Option 1: Everything via HTTP (Async WebServer)<\/a><\/li>\n
- Option 2a: Async WebServer and ESP-NOW Serial (“STA-only”)<\/a><\/li>\n
- Option 2b: Async WebServer and ESP-NOW Serial (STA\/AP)<\/a><\/li>\n
- Complete version ESP-NOW Serial (“STA-only”)<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n
Async WebServer vs. classic WebServer<\/h2>\n
Perhaps some of you have read my article WLAN with ESP8266 and ESP32<\/a>. There I used a simple, classic web server to control ESP8266 and ESP32 boards. So why another post about the Async WebServer? <\/p>\n
A significant difference between the two web server variants is that the classic web server works in a blocking manner, unlike the Async WebServer. This is illustrated in the following diagram: <\/p>\n\n
![\"Classic](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/async_webserver_vs_webserver-1024x425.png\")
<\/a>Classic WebServer vs. Async WebServer<\/figcaption><\/figure>\n With the classic web server, the server is handled in
loop()<\/code> and is continuously queried withserver.handleClient()<\/code>. In the case of a client request (e.g., the PC browser accesses the web server), the request is processed and then the response is sent. Meanwhile, the program is blocked, which can lead to problems if other time-dependent tasks need to be completed. <\/p>\nThe Async WebServer, on the other hand, works event-based. If it receives a request, it is only very briefly interrupted from its current tasks and initiates the processing of the request (callback function) in a separate task. <\/p>\n
For simple applications, e.g. when there is only one customer and only a few non-time-critical tasks that need to be completed per unit of time, there is nothing to be said against the classic web server. Otherwise, you should rather use the Async WebServer. <\/p>\n\n
Preparations<\/h2>\n
I use “esp32<\/a>” from Espressif as the board package for the ESP32. Click here<\/a> for installation instructions. The boards used were ESP-WROOM-32-based development boards. In principle, the examples in this article should work with all ESP32 boards. <\/p>\n
For the Async WebServer, I use the ESP Async WebServer<\/a> and Async TCP<\/a> libraries, both from ESP32Async. You can easily install them in the Arduino IDE using the library manager. <\/p>\n\n
Introduction: “Hello World”<\/h2>\n\n
Bare minimum<\/h3>\n\n
We start with a simple sketch that displays “Hello World” in your browser. Customize it by entering the name of your WiFi network and the password (look for the comments: “TODO”). <\/p>\n<\/p>\n
#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\n\/\/ insert your credentials\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/ TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/ TODO\n\nAsyncWebServer server(80);\n\nvoid connectWiFiSTA() {\n WiFi.mode(WIFI_STA);\n WiFi.begin(WIFI_SSID, WIFI_PASS);\n\n Serial.print(\"Verbinde mit WLAN \");\n Serial.print(WIFI_SSID);\n Serial.print(\" ... \");\n\n while (WiFi.status() != WL_CONNECTED) {\n delay(250);\n Serial.print(\".\");\n }\n Serial.println();\n \n Serial.print(\"Connected, IP: \");\n Serial.println(WiFi.localIP()); \n}\n\nvoid setup() {\n Serial.begin(115200);\n delay(200);\n\n connectWiFiSTA();\n\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send(200, \"text\/html\", \"Hello World\");\n });\n\n server.begin();\n Serial.println(\"Server started.\");\n}\n\nvoid loop() {}<\/pre>\n\n
The IP address assigned by the router is displayed in the serial monitor. If nothing appears in your serial monitor, press the reset button on the board or insert
delay()<\/code> (few seconds) at the beginning ofsetup()<\/code>. <\/p>\n\n![\"Output](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/11\/output-async_webserver_hello_world_bare_minimum.png\")
<\/a>Output of async_webserver_hello_world_bare_minimum.ino<\/figcaption><\/figure>\n\n Then go to the browser of your choice and type the IP into the address bar. A simple “Hello World” should appear. <\/p>\n\n
Explanations of the “Bare Minimum Sketch”<\/h3>\n
- \n
AsyncWebServer server(80)<\/code> creates the web server, which is accessible via port 80.<\/li>\n- Use
WiFi.mode(WIFI_STA)<\/code> to set the station mode. In this mode, the ESP32 connects to a WiFi network and receives its IP address from it. We will come to the AP mode (= Access Point) later, in which the ESP32 itself provides the WiFi network. <\/li>\nWiFi.begin()<\/code> – enter the name of the network and the password.<\/li>\nWiFi.status() != WL_CONNECTED<\/code> is false as long as there is no connection to the network. <\/li>\n<\/ul>\n\nExplanations of server.on()<\/h4>\n
The way server.on() is called may be a little unfamiliar: <\/p>\n
server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send(200, \"text\/html\", \"Hello World\");\n});<\/pre>\nThis is – in principle – the short form of:<\/p>\n\n
void handleRoot(AsyncWebServerRequest *request) {\n request->send(200, \"text\/html\", \"Hello World\");\n}\n\nvoid setup() {\n ...\n server.on(\"\/\", HTTP_GET, handleRoot);\n}\n<\/pre>\n\nIn the short form, the third parameter of
server.on()<\/code>, i.e.[](AsyncWebServerRequest *request) {...}<\/code> is a lambda function. It is also referred to as an anonymous function as it has no name. Lambda functions are written directly at the point where they are used instead of defining them separately. This is above all short and flexible. More on this would go too far at this point. <\/p>\nThat’s actually all you need to know about the Async WebServer! Everything else is mainly about replacing “Hello World” with text, HTML, CSS and JavaScript code. <\/em><\/strong><\/p>\n\n
Extended Hello World – Sketch<\/h3>\n\n
Before we continue with the actual topic, I would like to introduce some useful extensions to the “Hello World” sketch.<\/p>\n
- \n
- With
WiFi.config(ip, gateway, subnet);<\/code> you specify the IP address. I do this in most sketches. The function must be called beforeWiFi.begin()<\/code>. <\/li>\n- If calling up the IP address is too cryptic for you, you can use
MDNS.begin(HOSTNAME)<\/code> to assign a nicer name. To do this, you must include the ESPmDNS library. You can then call up the website with http:\/\/HOSTNAME.local<\/em>. <\/li>\nserver.onNotFound()<\/code> defines what happens if the path is not found. You can pass the 404 here. <\/li>\n- If the ESP32 does not connect to the network, it may make sense to restart it. This is exactly what the sketch does. <\/li>\n<\/ol>\n
I think everything else is self-explanatory. This is the sketch:<\/p>\n<\/p>\n
\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <ESPmDNS.h>\n\nIPAddress ip(192,168,178,112); \/\/TODO: IP address of your choice\nIPAddress gateway(192,168,178,1); \/\/TODO: Router address\nIPAddress subnet(255,255,255,0); \/\/TODO: subnet mask, probably OK as is.\n\n\/\/ insert your credentials\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/TODO\nconstexpr char HOSTNAME[] = \"MyESP32-Server\"; \/\/TODO: Server name of your choice\n\nAsyncWebServer server(80);\n\nvoid connectWiFiSTA() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS);\n\n Serial.print(\"Verbinde mit WLAN \");\n Serial.print(WIFI_SSID);\n Serial.print(\" ... \");\n\n \/\/ wait max 10 seconds\n uint32_t start = millis();\n while (WiFi.status() != WL_CONNECTED && millis() - start < 10000) {\n delay(250);\n Serial.print(\".\");\n }\n Serial.println();\n\n if (WiFi.status() == WL_CONNECTED) {\n Serial.print(\"Connected, IP: \");\n Serial.println(WiFi.localIP());\n } else {\n Serial.println(\"WiFi Connection failed (timeout). Restart in 5s \u2026\");\n delay(5000);\n ESP.restart();\n }\n\n if (!MDNS.begin(HOSTNAME)) {\n Serial.println(\"Error starting mDNS\");\n return;\n }\n \/\/ MDNS.addService(\"http\", \"tcp\", 80); \/\/ may be needed\n Serial.print(\"MDNS responder started at http:\/\/\");\n Serial.print(HOSTNAME);\n Serial.println(\".local\");\n}\n\nvoid setup() {\n Serial.begin(115200);\n delay(200);\n\n connectWiFiSTA();\n\n \/\/ Route: GET \/\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send(200, \"text\/html\", \"Hello World\");\n });\n\n \/\/ Optional: 404\n server.onNotFound([](AsyncWebServerRequest *request) {\n request->send(404, \"text\/html\", \"Not found\");\n });\n\n server.begin();\n Serial.println(\"Server started.\");\n}\n\nvoid loop() {}\n<\/pre>\n\u00a0<\/p>\n<\/div>\n
\n\n
You will see an output like this on the serial monitor:<\/p>\n\n
![\"Async](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/11\/output_aws_hello_world_extended.png\")
<\/a>Output of hello_world_extended.ino<\/figcaption><\/figure>\n\n Switching one LED via browser<\/h2>\n
In the next step, we will switch one LED attached to GPIO2 of the ESP32 on and off via the browser. I’m deliberately only using one LED and no CSS to illustrate the principle with this simple sketch. Here is the sketch:<\/p>\n<\/p>\n
\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\nIPAddress ip(192,168,178,112); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your Password\"; \/\/TODO\n\nconst int ledPin = 2;\nbool ledOn = false;\n\nAsyncWebServer server(80);\n\nvoid setLed(bool on) {\n ledOn = on;\n digitalWrite(ledPin, on);\n}\n\nString page() {\n if (ledOn) {\n return String(F(\"<a href=\\\"\/off\\\">Switch LED off<\/a>\"));\n } else {\n return String(F(\"<a href=\\\"\/on\\\">Switch LED on<\/a>\"));\n }\n}\n\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS);\n Serial.printf(\"Connecting to %s\", WIFI_SSID);\n while (WiFi.status() != WL_CONNECTED) {\n delay(250); Serial.print(\".\");\n }\n Serial.println();\n Serial.print(\"IP: \"); Serial.println(WiFi.localIP());\n}\n\nvoid setup() {\n Serial.begin(115200);\n pinMode(ledPin, OUTPUT);\n setLed(false);\n\n connectWiFi();\n\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *req){\n req->send(200, \"text\/html\", page());\n });\n\n server.on(\"\/on\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(true);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/off\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(false);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.begin();\n Serial.println(\"Server ready.\");\n}\n\nvoid loop() {}<\/pre>\n<\/div>\n\n
And this is what the output looks like in my browser:<\/p>\n\n
![\"Async](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/11\/firefox_one_led.png\")
<\/a>Browser output of switch_one_led.ino<\/figcaption><\/figure>\n\n Explanations of switch_one_led.ino<\/h3>\n
Please understand that this article is not a lesson in HTML, CSS and JavaScript. It would simply go too far if I were to go into detail. I will focus on the Arduino code. <\/p>\n
The variable
ledOn<\/code> saves the status of the LED, namelyfalse<\/code> for off andtrue<\/code> for on. In the default state, the LED is off. <\/p>\nIn the browser, the LED is controlled via links. The first call to the website via the IP address leads to the main path “\/”. Therefore,
server.on(\"\/\", ...<\/code> is used. The send functionreq->send()<\/code> transmits the following to the client: <\/p>\n- \n
- The HTTP status code 200 \u2192 everything OK.<\/li>\n
- “text\/html” \u2192 this means that the message is interpreted as HTML.<\/li>\n
- A string returned by the
page()<\/code> function. AsledOn<\/code> is true, the link to “\/off” is sent. <\/li>\n<\/ul>\nYou will see the link text “Switch LED Off” in the browser. If you now click on this link,
server.on(\"\/off\", ...)<\/code> takes effect. The Lambda function first calls the functionsetLed(false)<\/code>, which setsledOn<\/code> tofalse<\/code> and switches the LED off.req->send()<\/code> calls the functionpage()<\/code> again. AsledOn<\/code> isfalse<\/code> this time, the link to “\/on” is returned. The link text “Switch LED on” appears in the browser. And so you can now switch back and forth. <\/p>\nAs an alternative to
req->send(200, \"text\/html\", page())<\/code>, you could return to the main path withreq->redirect(\"\/\")<\/code>, which in turn calls upreq->send()<\/code>. <\/p>\n\nThree LEDs + PWM + analogRead<\/h2>\n
We set the bar higher by switching three LEDs, dimming one LED via PWM and query the voltage on one pin. This still leaves us with (almost) pure HTML code. We’ll make it nicer and more user-friendly later. <\/p>\n\n
![\"Circuit](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/async_webserver_circuit-1024x441.png\")
<\/a>Circuit for the following sketches<\/figcaption><\/figure>\n\n Switching \/ controlling the LEDs <\/h4>\n
Switching three LEDs is actually just a bit more paperwork. The principle remains the same, except that we handle the LED pins and the LED status (ledOn) as an array. As before, each switching operation has its own directory, i.e. \/led0_on, \/led0_off, \/led1_on etc. <\/p>\n
We pass the PWM value using a form (
<form>...<\/form><\/code>). As I have set the PWM resolution to 255, aanalogWrite()<\/code> would also have been sufficient here. However, this way you can also apply the code to other PWM applications. <\/p>\n\nQuerying and displaying the analogueRead() value<\/h4>\n
Determining and outputting the voltage of just one pin is simple. However, this raises the question of how to update the voltage automatically. In principle, you can reload the whole page periodically by inserting
<html><head><meta http-equiv='refresh' content='5'><\/head><\/code> (for 5 seconds) at the beginning of the web page. However, this clashes with the PWM input. If the refresh occurs while you are inputting, your input field will be empty again. <\/p>\nOne solution is using an iframe (= inline frame). This is another website embedded in the website, so to speak. If you only apply the refresh to the embedded web page, it will not interfere with the rest. <\/p>\n
But here’s the sketch first:<\/p>\n<\/p>\n
\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\nIPAddress ip(192,168,178,112); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/TODO\n\nconst int ledPin[] = {2,4,18};\nconst int analogReadPin = 34;\nconst int pwmLedPin = 5; \nint pwmValue = 0;\nbool ledOn[] = {false, false, false};\n\nAsyncWebServer server(80);\n\nvoid setLed(int num, bool on) {\n ledOn[num] = on;\n digitalWrite(ledPin[num], on);\n}\n\nString page() {\n String myPage = \"\";\n for(int i=0; i<3; i++){\n if (ledOn[i]) {\n myPage += String(F(\"<a href=\\\"\/led\"));\n myPage += String(i);\n myPage += String(F(\"_off\\\">Switch LED \"));\n myPage += String(i);\n myPage += String(F(\" off<\/a><\/BR><\/BR>\"));\n } else {\n myPage += String(F(\"<a href=\\\"\/led\"));\n myPage += String(i);\n myPage += String(F(\"_on\\\">Switch LED \"));\n myPage += String(i);\n myPage += String(F(\" on<\/a><\/BR><\/BR>\"));\n }\n }\n \n myPage += \"<\/BR><form action='\/set'>\";\n myPage += \"PWM: <input name='value' type='number' min='0' max='255'>\";\n myPage += \"<input type='submit' value='Submit'>\";\n myPage += \"<\/form>\";\n myPage += \"Current PWM value: \";\n myPage += String(pwmValue); \n\n myPage += \"<\/BR><\/BR><\/BR>\";\n myPage += \"<iframe src='\/value' width='200' height='40' frameborder='0'><\/iframe><\/BR><\/BR>\";\n \n return myPage;\n}\n\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS);\n Serial.printf(\"Connecting to %s\", WIFI_SSID);\n while (WiFi.status() != WL_CONNECTED) {\n delay(250); Serial.print(\".\");\n }\n Serial.println();\n Serial.print(\"IP: \"); Serial.println(WiFi.localIP());\n}\n\nvoid setup() {\n Serial.begin(115200);\n \n for(int i=0; i<3; i++) {\n pinMode(ledPin[i], OUTPUT);\n setLed(i, false);\n }\n pinMode(analogReadPin, INPUT);\n ledcAttach(pwmLedPin, 5000, 8);\n\n connectWiFi();\n\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *req){\n req->send(200, \"text\/html\", page());\n });\n\n server.on(\"\/led0_on\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(0, true);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/led0_off\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(0, false);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/led1_on\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(1, true);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/led1_off\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(1, false);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/led2_on\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(2, true);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/led2_off\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(2, false);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/set\", HTTP_GET, [](AsyncWebServerRequest *request){\n if (request->hasParam(\"value\")) {\n pwmValue = request->getParam(\"value\")->value().toInt();\n pwmValue = constrain(pwmValue, 0, 255);\n ledcWrite(pwmLedPin, pwmValue);\n request->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n }\n });\n \n server.on(\"\/value\", HTTP_GET, [](AsyncWebServerRequest *req){\n float voltage = 3.3 * analogRead(analogReadPin) \/ 4096.0;\n String html = \"\";\n html += \"<html><head><meta http-equiv='refresh' content='5'><\/head>\";\n html += \"<body style='margin:0; padding:0; text-align:left;'>\";\n html += \"Voltage [V]: \";\n html += String(voltage, 2);\n html += \"<\/body><\/html>\";\n\n req->send(200, \"text\/html\", html);\n });\n \n server.begin();\n Serial.println(\"Server ready.\");\n}\n\nvoid loop() {}<\/pre>\n<\/div>\n\n
However, I should explain one more point, namely how the PWM value makes it from the form into the request.<\/p>\n
With
request->hasParam(\"value\")<\/code>, the web server checks whether the HTTP request contains a parameter with the namevalue<\/code>, which comes from the input field of the HTML form.request->getParam(\"value\")->value()<\/code> reads the text entered by the user from this form field.toInt()<\/code> then converts this text into an integer.<\/p>\n\nAnd this is what the output looks like in my browser:<\/p>\n\n
![\"Async](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/11\/firefox_3leds_pwm_analogread.png\")
<\/a>Browser output of switch_three_leds_plus_pwm_plus voltage.ino<\/figcaption><\/figure>\n\n More beautiful with CSS<\/h3>\n
HTML offers many design options. However, this can quickly make the code confusing. The solution to this is CSS (Cascading Style Sheets). <\/p>\n
CSS definitions are stored separately from the actual page content (
<body>...<\/body><\/code>) in the header area of the web document (<head>...<\/head><\/code>) within a separate section (<style>...<\/style><\/code>) or in an external file.<\/p>\nBasically, there are two main things you can do with CSS:<\/p>\n
- \n
- Make global settings for existing HTML elements:\n
- \n
- e.g. for the h1 heading:
h1 { font-size: 24px; margin: 0 0 10px 0; text-align: center; }<\/code>
The advantage: The definition only needs to be made once and then applies to all corresponding elements.<\/li>\n<\/ul>\n<\/li>\n- Define your own classes:\n
- \n
- e.g. a subheading:
.subtitle { text-align: center; font-size: 13px; color: #666; margin-bottom: 20px; }<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\nThe classes can then be used in HTML elements, e.g.:
<div class=\"subtitle\">...<\/div><\/code>. It is also possible to combine several classes. <\/p>\nNot familiar with CSS and don’t have the time or inclination to familiarize yourself with it? No problem in times of artificial intelligence. I also used ChatGPT for the visual design. ChatGPT may have one or two gaps in its knowledge, but my experience with this AI for programming HTML, CSS and JavaScript is extremely good. Nevertheless, it is, of course, always better to have at least basic knowledge. <\/em><\/p>\n<\/p>\n
\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\nIPAddress ip(192,168,178,112); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your Password\"; \/\/TODO\n\nconst int ledPin[] = {2,4,18};\nconst int analogReadPin = 34;\nconst int pwmLedPin = 5; \nint pwmValue = 0;\nbool ledOn[] = {false, false, false};\n\nAsyncWebServer server(80);\n\nvoid setLed(int num, bool on) {\n ledOn[num] = on;\n digitalWrite(ledPin[num], on);\n}\n\nString page() {\n String myPage = \"\";\n\n \/\/ head + CSS + container start\n myPage += F(\n \"<!DOCTYPE html><html><head><meta charset='UTF-8'>\"\n \"<meta name='viewport' content='width=device-width, initial-scale=1.0'>\"\n \"<title>ESP32 LED & PWM Control<\/title>\"\n \"<style>\"\n \"body{font-family:Arial,Helvetica,sans-serif;background:#f0f2f5;margin:0;padding:0;}\"\n \".container{max-width:600px;margin:40px auto;padding:20px;background:#ffffff;\"\n \"border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.08);}\"\n \"h1{font-size:24px;margin:0 0 10px 0;text-align:center;}\"\n \".subtitle{text-align:center;font-size:13px;color:#666;margin-bottom:20px;}\"\n \".section{margin:20px 0;}\"\n \".section-title{font-weight:bold;margin-bottom:8px;font-size:15px;color:#333;}\"\n \".led-grid{display:flex;gap:12px;justify-content:center;}\"\n \".led-tile{flex:1;padding:18px 10px;text-align:center;border-radius:10px;\"\n \"font-weight:bold;text-decoration:none;color:#ffffff;\"\n \"transition:background-color 0.2s,transform 0.1s,box-shadow 0.1s;\"\n \"box-shadow:0 2px 4px rgba(0,0,0,0.1);font-size:14px;}\"\n \".led-on{background:#e53935;}\"\n \".led-on:hover{background:#b71c1c;}\"\n \".led-off{background:#43a047;}\"\n \".led-off:hover{background:#1b5e20;}\"\n \".led-tile:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,0.2);}\"\n \".pwm-form{display:flex;flex-direction:column;gap:8px;}\"\n \".pwm-form label{font-size:14px;color:#333;}\"\n \".pwm-form input[type='number']{width:100%;padding:8px 10px;border-radius:6px;\"\n \"border:1px solid #ccc;box-sizing:border-box;font-size:14px;}\"\n \".pwm-form input[type='submit']{align-self:flex-start;padding:8px 14px;border:none;\"\n \"border-radius:6px;cursor:pointer;background:#1976d2;color:#ffffff;font-weight:bold;font-size:14px;\"\n \"transition:background-color 0.2s;}\"\n \".pwm-form input[type='submit']:hover{background:#0d47a1;}\"\n \".pwm-value{margin-top:6px;font-size:14px;color:#333;}\"\n \".voltage-box{background:#1565c0;border-radius:10px;padding:8px 10px;}\"\n \".voltage-box iframe{border:0;width:100%;height:50px;}\"\n \"<\/style>\"\n \"<\/head><body><div class='container'>\"\n \"<h1>ESP32 LED & PWM Control<\/h1>\"\n \"<div class='subtitle'>Control LEDs, set LED brightness and display voltage<\/div>\"\n \"<div class='section'><div class='section-title'>LEDs<\/div>\"\n \"<div class='led-grid'>\"\n );\n\n \/\/ LED icons\n for(int i=0; i<3; i++){\n if (ledOn[i]) {\n myPage += String(F(\"<a href=\\\"\/led\"));\n myPage += String(i);\n myPage += String(F(\"_off\\\" class='led-tile led-on'>LED \"));\n myPage += String(i);\n myPage += String(F(\" is ON<\/a>\"));\n } else {\n myPage += String(F(\"<a href=\\\"\/led\"));\n myPage += String(i);\n myPage += String(F(\"_on\\\" class='led-tile led-off'>LED \"));\n myPage += String(i);\n myPage += String(F(\" is OFF<\/a>\"));\n }\n }\n\n myPage += F(\"<\/div><\/div>\"); \/\/ Ende LED-Section\n\n \/\/ PWM section\n myPage += F(\n\"<div class='section'><div class='section-title'>PWM for LED (Pin 5)<\/div>\"\n\"<form class='pwm-form' action='\/set'>\"\n\"<label for='pwmInput'>PWM value (0 \u2013 255):<\/label>\"\n\"<input id='pwmInput' name='value' type='number' min='0' max='255' placeholder='e.g. 128'>\"\n\"<input type='submit' value='Set PWM'>\"\n\"<\/form>\"\n );\n myPage += F(\"<div class='pwm-value'>Current PWM value: \");\n myPage += String(pwmValue);\n myPage += F(\"<\/div><\/div>\");\n\n \/\/ voltage section\n myPage += F(\n\"<div class='section'><div class='section-title'>Voltage at Pin 34<\/div>\"\n\"<div class='voltage-box'>\"\n\"<iframe src='\/value'><\/iframe>\"\n\"<\/div><\/div>\"\n );\n\n \/\/ page end\n myPage += F(\"<\/div><\/body><\/html>\");\n\n return myPage;\n}\n\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS);\n Serial.printf(\"Connecting to %s\", WIFI_SSID);\n while (WiFi.status() != WL_CONNECTED) {\n delay(250); Serial.print(\".\");\n }\n Serial.println();\n Serial.print(\"IP: \"); Serial.println(WiFi.localIP());\n}\n\nvoid setup() {\n Serial.begin(115200);\n \n for(int i=0; i<3; i++) {\n pinMode(ledPin[i], OUTPUT);\n setLed(i, false);\n }\n pinMode(analogReadPin, INPUT);\n ledcAttach(pwmLedPin, 5000, 8);\n\n connectWiFi();\n\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *req){\n req->send(200, \"text\/html\", page());\n });\n\n server.on(\"\/led0_on\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(0, true);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/led0_off\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(0, false);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/led1_on\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(1, true);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/led1_off\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(1, false);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/led2_on\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(2, true);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/led2_off\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(2, false);\n req->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n });\n\n server.on(\"\/set\", HTTP_GET, [](AsyncWebServerRequest *request){\n if (request->hasParam(\"value\")) {\n pwmValue = request->getParam(\"value\")->value().toInt();\n pwmValue = constrain(pwmValue, 0, 255);\n ledcWrite(pwmLedPin, pwmValue);\n request->send(200, \"text\/html\", page());\n \/\/ req->redirect(\"\/\"); \/\/ alternative to the line above\n }\n });\n \n server.on(\"\/value\", HTTP_GET, [](AsyncWebServerRequest *req){\n float voltage = 3.3 * analogRead(analogReadPin) \/ 4096.0;\n String html = \"\";\n html += \"<html><head><meta http-equiv='refresh' content='5'>\";\n html += \"<meta charset='UTF-8'><style>\";\n html += \"body{margin:0;font-family:Arial,Helvetica,sans-serif;}\";\n html += \".voltage-box{background:#1565c0;color:#ffffff;padding:8px 10px;\";\n html += \"display:flex;align-items:center;justify-content:space-between;\";\n html += \"height:100%;box-sizing:border-box;font-size:14px;}\";\n html += \".label{font-weight:bold;margin-right:8px;}\";\n html += \"<\/style><\/head>\";\n html += \"<body><div class='voltage-box'><span class='label'>Voltage [V]:<\/span><span>\";\n html += String(voltage, 2);\n html += \"<\/span><\/div><\/body><\/html>\";\n\n req->send(200, \"text\/html\", html);\n });\n \n server.begin();\n Serial.println(\"Server ready.\");\n}\n\nvoid loop() {}<\/pre>\n<\/div>\n\n
Here is the result:<\/p>\n\n
![\"Async](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/nicer_with_css-1024x429.png\")
<\/a>Browser output of nicer_with_css.ino<\/figcaption><\/figure>\n\n More convenient with JavaScript<\/h3>\n
In addition to HTML and CSS, there is also JavaScript for website design. As the name suggests, this is a scripting language. JavaScript makes interacting with the website even more convenient and effective. I use JavaScript in the following sketch for the LED buttons and replace the input of the PWM value with a slider. JavaScript code is inserted within a
<script>...<\/script><\/code> element. <\/p>\nA nice effect of the JavaScript code is that in this version the page does not have to be rebuilt again and again. Where previously the whole page was returned:
<\/x>, only an OK is sent in this version: <\/x>. JavaScript takes care of updating the sliders and buttons. <\/p>\n Again, no problem if you are not familiar with JavaScript. ChatGPT can do that for you. I also only have basic knowledge of JavaScript. <\/p>\n<\/p>\n
\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\nIPAddress ip(192,168,178,112); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/TODO\n\nconst int ledPin[] = {2, 4, 18};\nconst int analogReadPin = 34;\nconst int pwmLedPin = 5;\nint pwmValue = 0;\nbool ledOn[] = {false, false, false};\n\nAsyncWebServer server(80);\n\nvoid setLed(int num, bool on) {\n ledOn[num] = on;\n digitalWrite(ledPin[num], on);\n}\n\nString page() {\n String myPage;\n\n myPage += F(\n \"<!DOCTYPE html><html><head><meta charset='UTF-8'>\"\n \"<meta name='viewport' content='width=device-width, initial-scale=1.0'>\"\n \"<title>ESP32 LED & PWM Control<\/title>\"\n \"<style>\"\n \"body{font-family:Arial,Helvetica,sans-serif;background:#f0f2f5;margin:0;padding:0;}\"\n \".container{max-width:600px;margin:40px auto;padding:20px;background:#ffffff;\"\n \"border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.08);}\"\n \"h1{font-size:24px;margin:0 0 10px 0;text-align:center;}\"\n \".subtitle{text-align:center;font-size:13px;color:#666;margin-bottom:20px;}\"\n \".section{margin:20px 0;}\"\n \".section-title{font-weight:bold;margin-bottom:8px;font-size:15px;color:#333;}\"\n \".led-grid{display:flex;gap:12px;justify-content:center;}\"\n \".led-button{flex:1;padding:18px 10px;text-align:center;border-radius:10px;\"\n \"font-weight:bold;border:none;cursor:pointer;color:#ffffff;\"\n \"transition:background-color 0.2s,transform 0.1s,box-shadow 0.1s;\"\n \"box-shadow:0 2px 4px rgba(0,0,0,0.1);font-size:14px;}\"\n \".led-on{background:#e53935;}\"\n \".led-on:hover{background:#b71c1c;}\"\n \".led-off{background:#43a047;}\"\n \".led-off:hover{background:#1b5e20;}\"\n \".led-button:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,0.2);}\"\n \".pwm-form{display:flex;flex-direction:column;gap:8px;}\"\n \".pwm-form label{font-size:14px;color:#333;}\"\n \".pwm-form input[type='range']{width:100%;}\"\n \".voltage-box{background:#1565c0;border-radius:10px;padding:8px 10px;}\"\n \".voltage-box iframe{border:0;width:100%;height:50px;}\"\n \"<\/style>\"\n \"<\/head><body><div class='container'>\"\n \"<h1>ESP32 LED & PWM Control<\/h1>\"\n \"<div class='subtitle'>Control LEDs, set LED brightness and display voltage<\/div>\"\n \"<div class='section'><div class='section-title'>LEDs<\/div>\"\n \"<div class='led-grid'>\"\n );\n\n \/\/ LED Buttons\n for (int i = 0; i < 3; i++) {\n myPage += \"<button type='button' class='led-button \";\n if (ledOn[i]) {\n myPage += \"led-on\";\n } else {\n myPage += \"led-off\";\n }\n myPage += \"' data-index='\";\n myPage += String(i);\n myPage += \"' data-state='\";\n myPage += (ledOn[i] ? \"1\" : \"0\");\n myPage += \"'>\";\n myPage += \"LED \";\n myPage += String(i);\n myPage += (ledOn[i] ? \" is ON\" : \" is OFF\");\n myPage += \"<\/button>\";\n }\n\n myPage += F(\"<\/div><\/div>\"); \/\/ Ende LED-Section\n\n \/\/ PWM section (Slider)\n myPage += F(\n \"<div class='section'><div class='section-title'>PWM for LED (Pin 5)<\/div>\"\n \"<div class='pwm-form'>\"\n \"<label for='pwmSlider'>PWM value (0 \u2013 255): <span id='pwmValueLabel'><\/span><\/label>\"\n );\n\n myPage += \"<input id='pwmSlider' type='range' min='0' max='255' value='\";\n myPage += String(pwmValue);\n myPage += \"'>\";\n\n myPage += F(\"<\/div><\/div>\");\n\n \/\/ Voltage section (iframe)\n myPage += F(\n \"<div class='section'><div class='section-title'>Voltage at Pin 34<\/div>\"\n \"<div class='voltage-box'>\"\n \"<iframe src='\/value'><\/iframe>\"\n \"<\/div><\/div>\"\n );\n\n \/\/ JavaScript for buttons & slider\n myPage += F(\n \"<script>\"\n \"document.addEventListener('DOMContentLoaded', function(){\"\n \"\/\/ LED Buttons\\n\"\n \"var ledButtons = document.querySelectorAll('.led-button');\"\n \"ledButtons.forEach(function(btn){\"\n \"btn.addEventListener('click', function(){\"\n \"var index = btn.getAttribute('data-index');\"\n \"var state = btn.getAttribute('data-state') === '1';\"\n \"var url = '\/led' + index + '_' + (state ? 'off' : 'on');\"\n \"fetch(url)\"\n \".then(function(){\"\n \"var newState = !state;\"\n \"btn.setAttribute('data-state', newState ? '1' : '0');\"\n \"btn.classList.toggle('led-on', newState);\"\n \"btn.classList.toggle('led-off', !newState);\"\n \"btn.textContent = 'LED ' + index + (newState ? ' is ON' : ' is OFF');\"\n \"})\"\n \".catch(function(err){console.error(err);});\"\n \"});\"\n \"});\"\n\n \"\/\/ PWM Slider\\n\"\n \"var slider = document.getElementById('pwmSlider');\"\n \"var valueLabel = document.getElementById('pwmValueLabel');\"\n \"if(slider && valueLabel){\"\n \"var updateLabel = function(v){\"\n \"valueLabel.textContent = v;\"\n \"};\"\n \"updateLabel(slider.value);\"\n \"slider.addEventListener('input', function(e){\"\n \"updateLabel(e.target.value);\"\n \"});\"\n \"slider.addEventListener('change', function(e){\"\n \"var v = e.target.value;\"\n \"fetch('\/set?value=' + v)\"\n \".catch(function(err){console.error(err);});\"\n \"});\"\n \"}\"\n \"});\"\n \"<\/script>\"\n );\n\n myPage += F(\"<\/div><\/body><\/html>\");\n\n return myPage;\n}\n\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS);\n Serial.printf(\"Connecting to %s\", WIFI_SSID);\n while (WiFi.status() != WL_CONNECTED) {\n delay(250);\n Serial.print(\".\");\n }\n Serial.println();\n Serial.print(\"IP: \");\n Serial.println(WiFi.localIP());\n}\n\nvoid setup() {\n Serial.begin(115200);\n\n for (int i = 0; i < 3; i++) {\n pinMode(ledPin[i], OUTPUT);\n setLed(i, false);\n }\n pinMode(analogReadPin, INPUT);\n\n \/\/ PWM initialization\n ledcAttach(pwmLedPin, 5000, 8); \n\n connectWiFi();\n\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *req){\n req->send(200, \"text\/html\", page());\n });\n\n \/\/ LED endpoint: only \"OK\" is send, no complete refresh\n server.on(\"\/led0_on\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(0, true);\n req->send(200, \"text\/plain\", \"OK\");\n });\n\n server.on(\"\/led0_off\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(0, false);\n req->send(200, \"text\/plain\", \"OK\");\n });\n\n server.on(\"\/led1_on\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(1, true);\n req->send(200, \"text\/plain\", \"OK\");\n });\n\n server.on(\"\/led1_off\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(1, false);\n req->send(200, \"text\/plain\", \"OK\");\n });\n\n server.on(\"\/led2_on\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(2, true);\n req->send(200, \"text\/plain\", \"OK\");\n });\n\n server.on(\"\/led2_off\", HTTP_GET, [](AsyncWebServerRequest *req){\n setLed(2, false);\n req->send(200, \"text\/plain\", \"OK\");\n });\n\n \/\/ PWM endpoint, now for the slider\n server.on(\"\/set\", HTTP_GET, [](AsyncWebServerRequest *request){\n if (request->hasParam(\"value\")) {\n pwmValue = request->getParam(\"value\")->value().toInt();\n pwmValue = constrain(pwmValue, 0, 255);\n ledcWrite(pwmLedPin, pwmValue);\n request->send(200, \"text\/plain\", \"OK\");\n } else {\n request->send(400, \"text\/plain\", \"Missing value\");\n }\n });\n\n \/\/ Voltage page, kept iframe\n server.on(\"\/value\", HTTP_GET, [](AsyncWebServerRequest *req){\n float voltage = 3.3 * analogRead(analogReadPin) \/ 4096.0;\n String html = \"\";\n html += \"<html><head><meta http-equiv='refresh' content='5'>\";\n html += \"<meta charset='UTF-8'><style>\";\n html += \"body{margin:0;font-family:Arial,Helvetica,sans-serif;}\";\n html += \".voltage-box{background:#1565c0;color:#ffffff;padding:8px 10px;\";\n html += \"display:flex;align-items:center;justify-content:space-between;\";\n html += \"height:100%;box-sizing:border-box;font-size:14px;}\";\n html += \".label{font-weight:bold;margin-right:8px;}\";\n html += \"<\/style><\/head>\";\n html += \"<body><div class='voltage-box'><span class='label'>Voltage [V]:<\/span><span>\";\n html += String(voltage, 2);\n html += \"<\/span><\/div><\/body><\/html>\";\n\n req->send(200, \"text\/html\", html);\n });\n\n server.begin();\n Serial.println(\"Server ready.\");\n}\n\nvoid loop() {}<\/pre>\n<\/div>\n\n
Here is the result:<\/p>\n\n
![\"Browser](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/convenient_with_script-1024x384.png\")
<\/a>Browser output of more_convenient_with_script.ino<\/figcaption><\/figure>\n\n Alternative version of the sketch with JavaScript<\/h4>\n
Or would you like a different style for the LED buttons? That’s in the next sketch. I have also changed the method of the voltage update here. Instead of the iframe, JavaScript with a “fetch” function is used here. The update interval is set with
setInterval(updateVoltage, 5000);<\/code>. <\/p>\n<\/p>\n\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\nIPAddress ip(192,168,178,112); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your Password\"; \/\/TODO\n\nconst int ledPin[] = {2, 4, 18};\nconst int analogReadPin = 34;\nconst int pwmLedPin = 5;\nint pwmValue = 0;\nbool ledOn[] = {false, false, false};\n\nAsyncWebServer server(80);\n\nvoid setLed(int num, bool on) {\n ledOn[num] = on;\n digitalWrite(ledPin[num], on);\n}\n\nString page() {\n String myPage;\n\n myPage += F(\n \"<!DOCTYPE html><html><head><meta charset='UTF-8'>\"\n \"<meta name='viewport' content='width=device-width, initial-scale=1.0'>\"\n \"<title>ESP32 LED & PWM Control<\/title>\"\n \"<style>\"\n \"body{font-family:Arial,Helvetica,sans-serif;background:#f0f2f5;margin:0;padding:0;}\"\n \".container{max-width:600px;margin:40px auto;padding:20px;background:#ffffff;\"\n \"border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.08);}\"\n \"h1{font-size:24px;margin:0 0 10px 0;text-align:center;}\"\n \".subtitle{text-align:center;font-size:13px;color:#666;margin-bottom:20px;}\"\n \".section{margin:20px 0;}\"\n \".section-title{font-weight:bold;margin-bottom:8px;font-size:15px;color:#333;}\"\n\n \/* LED rows + switches *\/\n \".led-list{display:flex;flex-direction:column;gap:10px;}\"\n \".led-row{display:flex;align-items:center;justify-content:space-between;\"\n \"padding:10px 12px;border-radius:8px;background:#f7f7f7;}\"\n \".led-label{font-size:14px;font-weight:bold;color:#333;}\"\n\n \/* LED switch toggle *\/\n \".switch{position:relative;display:inline-block;width:46px;height:24px;}\"\n \".switch input{opacity:0;width:0;height:0;}\"\n \".slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;\"\n \"background-color:#ccc;transition:.2s;border-radius:24px;}\"\n \".slider:before{position:absolute;content:'';height:18px;width:18px;\"\n \"left:3px;bottom:3px;background-color:white;transition:.2s;border-radius:50%;}\"\n \"input:checked + .slider{background-color:#43a047;}\" \/* ON color *\/\n \"input:checked + .slider:before{transform:translateX(22px);}\"\n\n \".pwm-form{display:flex;flex-direction:column;gap:8px;}\"\n \".pwm-form label{font-size:14px;color:#333;}\"\n \".pwm-form input[type='range']{width:100%;}\"\n\n \".voltage-box{background:#1565c0;border-radius:10px;padding:8px 10px;\"\n \"color:#ffffff;display:flex;align-items:center;justify-content:space-between;}\"\n \".label{font-weight:bold;margin-right:8px;}\"\n \"<\/style>\"\n \"<\/head><body><div class='container'>\"\n \"<h1>ESP32 LED & PWM Control<\/h1>\"\n \"<div class='subtitle'>Control LEDs, set LED brightness and display voltage<\/div>\"\n \"<div class='section'><div class='section-title'>LEDs<\/div>\"\n \"<div class='led-list'>\"\n );\n\n for (int i = 0; i < 3; i++) {\n myPage += \"<div class='led-row'>\";\n myPage += \"<span class='led-label'>LED \";\n myPage += String(i);\n myPage += \"<\/span>\";\n myPage += \"<label class='switch'>\";\n myPage += \"<input type='checkbox' class='led-toggle' data-index='\";\n myPage += String(i);\n myPage += \"'\";\n if (ledOn[i]) {\n myPage += \" checked\";\n }\n myPage += \">\";\n myPage += \"<span class='slider'><\/span>\";\n myPage += \"<\/label>\";\n myPage += \"<\/div>\";\n }\n\n myPage += F(\"<\/div><\/div>\"); \/\/ end LED switches\n\n \/\/ PWM section (Slider)\n myPage += F(\n \"<div class='section'><div class='section-title'>PWM for LED (Pin 5)<\/div>\"\n \"<div class='pwm-form'>\"\n \"<label for='pwmSlider'>PWM value (0 \u2013 255): <span id='pwmValueLabel'><\/span><\/label>\"\n );\n\n myPage += \"<input id='pwmSlider' type='range' min='0' max='255' value='\";\n myPage += String(pwmValue);\n myPage += \"'>\";\n\n myPage += F(\"<\/div><\/div>\");\n\n \/\/ Voltage section (JSON + fetch)\n myPage += F(\n \"<div class='section'><div class='section-title'>Voltage at Pin 34<\/div>\"\n \"<div class='voltage-box'>\"\n \"<span class='label'>Voltage [V]:<\/span>\"\n \"<span id='voltageValue'>--.--<\/span>\"\n \"<\/div><\/div>\"\n );\n\n \/\/ JavaScript for LEDs, PWM slider & voltage update\n myPage += F(\n \"<script>\"\n \"document.addEventListener('DOMContentLoaded', function(){\"\n \"\/\/ LED Toggles\\n\"\n \"var toggles = document.querySelectorAll('.led-toggle');\"\n \"toggles.forEach(function(cb){\"\n \"cb.addEventListener('change', function(){\"\n \"var index = cb.getAttribute('data-index');\"\n \"var state = cb.checked ? 1 : 0;\"\n \"fetch('\/api\/led?index=' + index + '&state=' + state)\"\n \".then(function(res){\"\n \"if(!res.ok) throw new Error('LED request failed');\"\n \"})\"\n \".catch(function(err){\"\n \"console.error(err);\"\n \"cb.checked = !cb.checked;\" \n \"});\"\n \"});\"\n \"});\"\n\n \"\/\/ PWM Slider\\n\"\n \"var slider = document.getElementById('pwmSlider');\"\n \"var valueLabel = document.getElementById('pwmValueLabel');\"\n \"if(slider && valueLabel){\"\n \"var updateLabel = function(v){\"\n \"valueLabel.textContent = v;\"\n \"};\"\n \"updateLabel(slider.value);\"\n \"slider.addEventListener('input', function(e){\"\n \"updateLabel(e.target.value);\"\n \"});\"\n \"slider.addEventListener('change', function(e){\"\n \"var v = e.target.value;\"\n \"fetch('\/set?value=' + v)\"\n \".catch(function(err){console.error(err);});\"\n \"});\"\n \"}\"\n\n \"\/\/ Voltage via JSON + fetch\\n\"\n \"var voltageSpan = document.getElementById('voltageValue');\"\n \"function updateVoltage(){\"\n \"fetch('\/api\/voltage')\"\n \".then(function(res){\"\n \"if(!res.ok) throw new Error('Voltage request failed');\"\n \"return res.json();\"\n \"})\"\n \".then(function(data){\"\n \"if(voltageSpan && typeof data.voltage === 'number'){\"\n \"voltageSpan.textContent = data.voltage.toFixed(2);\"\n \"}\"\n \"})\"\n \".catch(function(err){console.error(err);});\"\n \"}\"\n \"updateVoltage();\"\n \"setInterval(updateVoltage, 5000);\"\n \"});\"\n \"<\/script>\"\n );\n\n myPage += F(\"<\/div><\/body><\/html>\");\n\n return myPage;\n}\n\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS);\n Serial.printf(\"Connecting to %s\", WIFI_SSID);\n while (WiFi.status() != WL_CONNECTED) {\n delay(250);\n Serial.print(\".\");\n }\n Serial.println();\n Serial.print(\"IP: \");\n Serial.println(WiFi.localIP());\n}\n\nvoid setup() {\n Serial.begin(115200);\n\n for (int i = 0; i < 3; i++) {\n pinMode(ledPin[i], OUTPUT);\n setLed(i, false);\n }\n pinMode(analogReadPin, INPUT);\n\n ledcAttach(pwmLedPin, 5000, 8);\n\n connectWiFi();\n\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *req){\n req->send(200, \"text\/html\", page());\n });\n\n \/\/ generic LED endpoint: \/api\/led?index=0&state=1\n server.on(\"\/api\/led\", HTTP_GET, [](AsyncWebServerRequest *req){\n if (req->hasParam(\"index\") && req->hasParam(\"state\")) {\n int index = req->getParam(\"index\")->value().toInt();\n int state = req->getParam(\"state\")->value().toInt();\n if (index >= 0 && index < 3) {\n setLed(index, state != 0);\n req->send(200, \"text\/plain\", \"OK\");\n } else {\n req->send(400, \"text\/plain\", \"Invalid index\");\n }\n } else {\n req->send(400, \"text\/plain\", \"Missing index or state\");\n }\n });\n\n \/\/ PWM endpoint \n server.on(\"\/set\", HTTP_GET, [](AsyncWebServerRequest *request){\n if (request->hasParam(\"value\")) {\n pwmValue = request->getParam(\"value\")->value().toInt();\n pwmValue = constrain(pwmValue, 0, 255);\n ledcWrite(pwmLedPin, pwmValue);\n request->send(200, \"text\/plain\", \"OK\");\n } else {\n request->send(400, \"text\/plain\", \"Missing value\");\n }\n });\n\n \/\/ JSON endpoint for voltage\n server.on(\"\/api\/voltage\", HTTP_GET, [](AsyncWebServerRequest *req){\n float voltage = 3.3 * analogRead(analogReadPin) \/ 4096.0;\n String json = \"{\\\"voltage\\\":\";\n json += String(voltage, 3);\n json += \"}\";\n req->send(200, \"application\/json\", json);\n });\n\n server.begin();\n Serial.println(\"Server ready.\");\n}\n\nvoid loop() {}\n<\/pre>\n<\/div>\n\n
Here is the output in the browser:<\/p>\n\n
![\"Async](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/script_advanced-1024x449.png\")
<\/a>Browser output of alternative_sketch_with_script.ino<\/figcaption><\/figure>\n As you can see, the whole thing no longer has much to do with the actual topic, the Async WebServer. The complexity of the last sketches is rather due to their HTML, CSS and JavaScript content. <\/p>\n\n
Controlling multiple ESP32s<\/h2>\n
If you want to control several ESP32s, you could create a web page for each of them. But that would be rather inconvenient. To combine everything on one website, use one of the ESP32 boards as the master. The other ESP32 boards (the “workers”) serve the master. However, the master also takes on worker tasks and therefore has a dual role. In relation to the device that displays the website, the master ESP32 is the server. <\/p>\n
There are various ways in which the workers and the master communicate with each other. I would like to introduce the following: <\/p>\n
- \n
- The workers are Async WebServers. Accordingly, the master is a client in relation to the workers. <\/li>\n
- Communication between master and client via ESP-NOW Serial(see article<\/a>). ESP-NOW(see article<\/a>) works in the same way, but ESP-NOW Serial is somewhat easier to use and is sufficient for this purpose.\n
- \n
- All communication is via the router. The ESP32 boards work in STA mode and are part of the router’s network. <\/li>\n
- The master ESP32 works in combined STA and AP mode. It connects to the router’s network, but also provides a network itself into which the workers can connect. The workers only “see” the master ESP32. <\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
To focus on the essential aspects in this section, I will not use CSS and JavaScript in the following examples. You can do this yourself according to your wishes – or consult an AI. We also only switch one LED per board. PWM control and voltage measurement are retained. We have dispensed with automatic updating of the voltage value here. <\/p>\n
At the very end of the article<\/a> there is a more stylish version with CSS, JavaScript and automatic refresh. <\/p>\n\n
Option 1: Everything via HTTP (Async WebServer)<\/h3>\n
In this variant, Master-ESP32 is a server for the PC and a client for the workers. All ESP32 boards receive their IP address from the router. <\/p>\n\n
![\"Three](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/PC_Router_3xESP32-1024x550.png\")
<\/a>Three ESP32, communication via HTTP (using the Async WebServer) <\/figcaption><\/figure>\n Now we need three sketches, namely one for the master\/worker 1 and one each for worker 2 and worker 3, whereby the latter only differ slightly. <\/p>\n\n
Concept of the sketch for the Master\/Worker 1<\/h4>\n
Switching and dimming the LEDs and determining the voltage on the master\/worker 1 are nothing new in principle. Clicking on the corresponding links and sending the PWM value triggers the functions
setLocalLed()<\/code>,setLocalPwm()<\/code> andreadLocalVoltage()<\/code>. <\/p>\nThings get more interesting when controlling workers 2 and 3. Clicking on the links to switch the LEDs and sending a PWM value leads to the helper function
callWorkerSimple(url)<\/code>. The URL is made up of the IP of the called worker, the relevant directory and the value. <\/p>\nThe voltage values are queried for two seconds in
loop()<\/code>. The function
is executed for this purpose. Within this function, the voltages of the workers are determined via the helper functionreadWorker(url)<\/code>. Here, the URL consists of the IP of the worker and the voltage directory. However, the measured values in the browser are only updated when you click on the “Refresh page” link. <\/p>\nWhat our browser does automatically when we call up a website, we now have to do “manually”, namely send a GET request. This is done by the helper functions. However, for the master to be able to send a GET request at all, it must become a client. An HTTP client object is created for this purpose. This is also done by the helper functions. <\/p>\n\n
Concept of the sketch for the Worker 2 and Worker 3<\/h4>\n
The sketches for Worker 2 and Worker 3 contain nothing new. They generate an Async WebServer that responds to the client’s requests. They themselves do not take care of the visual display in the browser, but switch and dim the LED and return the voltage value. <\/p>\n<\/p>\n
\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <HTTPClient.h>\n\nIPAddress ip(192,168,178,112); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/TODO\n\n\/\/ IP addresses of the two worker ESP32 boards\nconst char* ESP2_IP = \"192.168.178.113\"; \/\/TODO\nconst char* ESP3_IP = \"192.168.178.114\"; \/\/TODO\n\n\/\/ Local pins on the master (also acts as worker)\nconst int LED_PIN = 2;\nconst int PWM_PIN = 5;\nconst int ANALOG_PIN = 34;\n\nint localPwmValue = 0;\nString masterVoltage = \"\";\nString worker1Voltage = \"\";\nString worker2Voltage = \"\"; \n\nAsyncWebServer server(80);\n\n\/\/ Interval for voltage updates (in ms)\nconst unsigned long VOLTAGE_UPDATE_INTERVAL = 2000;\nunsigned long lastVoltageUpdate = 0;\n\n\/\/ ---------------- WiFi ----------------\n\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS);\n Serial.print(\"Connecting to WiFi\");\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(\".\");\n }\n Serial.println();\n Serial.print(\"Connected. IP address: \");\n Serial.println(WiFi.localIP());\n}\n\n\/\/ ---------------- HTTP helpers ----------------\n\n\/\/ Helper: call a worker URL (we ignore the response)\nvoid callWorkerSimple(const String& url) {\n HTTPClient http;\n if (http.begin(url)) {\n int code = http.GET();\n Serial.print(\"Request to \");\n Serial.print(url);\n Serial.print(\" -> HTTP code \");\n Serial.println(code);\n http.end();\n } else {\n Serial.print(\"Could not connect to \");\n Serial.println(url);\n }\n}\n\n\/\/ Helper: read a worker URL and return its response as String\nString readWorker(const String& url) {\n HTTPClient http;\n String body = \"\";\n if (http.begin(url)) {\n int code = http.GET();\n if (code > 0) {\n body = http.getString();\n }\n http.end();\n } else {\n Serial.print(\"Could not connect to \");\n Serial.println(url);\n }\n return body;\n}\n\n\/\/ ---------------- Local helpers (master as worker) ----------------\n\nvoid setLocalLed(int state) {\n digitalWrite(LED_PIN, state ? HIGH : LOW);\n}\n\nvoid setLocalPwm(int value) {\n if (value < 0) value = 0;\n if (value > 255) value = 255;\n localPwmValue = value;\n ledcWrite(PWM_PIN, localPwmValue);\n}\n\nfloat readLocalVoltage() {\n int raw = analogRead(ANALOG_PIN);\n float voltage = 3.3f * raw \/ 4096.0f;\n return voltage;\n}\n\n\/\/ ---------------- Voltage update (periodic) ----------------\n\nvoid readAllVoltages() {\n masterVoltage = String(readLocalVoltage(), 2);\n\n String worker1Url = String(\"http:\/\/\") + ESP2_IP + \"\/voltage\";\n worker1Voltage = readWorker(worker1Url);\n worker1Voltage.trim();\n\n String worker2Url = String(\"http:\/\/\") + ESP3_IP + \"\/voltage\";\n worker2Voltage = readWorker(worker2Url);\n worker2Voltage.trim();\n\n Serial.print(\"Voltages updated: master=\");\n Serial.print(masterVoltage);\n Serial.print(\" V, worker1=\");\n Serial.print(worker1Voltage);\n Serial.print(\" V, worker2=\");\n Serial.print(worker2Voltage);\n Serial.println(\" V\");\n}\n\n\/\/ ---------------- HTML page ----------------\n\nString buildMainPage() {\n String html;\n html += \"<!DOCTYPE html><html><head><meta charset='UTF-8'>\";\n html += \"<title>ESP32 Master Control<\/title><\/head><body>\";\n html += \"<h1>ESP32 Master Control<\/h1>\";\n html += \"<p><a href='\/'>Refresh page<\/a><\/p>\";\n\n \/\/ Device 1: Master itself\n html += \"<h2>Device 1 (Master ESP32)<\/h2>\";\n html += \"<p><a href='\/esp1\/led?state=1'>Turn LED ON<\/a><br>\";\n html += \"<a href='\/esp1\/led?state=0'>Turn LED OFF<\/a><\/p>\";\n html += \"<form action='\/esp1\/pwm' method='get'>\";\n html += \"PWM value (0-255): <input type='text' name='value'>\";\n html += \"<input type='submit' value='Set PWM'>\";\n html += \"<\/form>\";\n html += \"<p>Voltage [V]: \";\n html += masterVoltage;\n html += \"<\/p><hr>\";\n\n \/\/ Device 2: Worker 1\n html += \"<h2>Device 2 (Worker ESP32 #2)<\/h2>\";\n html += \"<p><a href='\/esp2\/led?state=1'>Turn LED ON<\/a><br>\";\n html += \"<a href='\/esp2\/led?state=0'>Turn LED OFF<\/a><\/p>\";\n html += \"<form action='\/esp2\/pwm' method='get'>\";\n html += \"PWM value (0-255): <input type='text' name='value'>\";\n html += \"<input type='submit' value='Set PWM'>\";\n html += \"<\/form>\";\n html += \"<p>Voltage [V]: \"; \n html += worker1Voltage;\n html += \"<\/p><hr>\";\n\n \/\/ Device 3: Worker 2\n html += \"<h2>Device 3 (Worker ESP32 #3)<\/h2>\";\n html += \"<p><a href='\/esp3\/led?state=1'>Turn LED ON<\/a><br>\";\n html += \"<a href='\/esp3\/led?state=0'>Turn LED OFF<\/a><\/p>\";\n html += \"<form action='\/esp3\/pwm' method='get'>\";\n html += \"PWM value (0-255): <input type='text' name='value'>\";\n html += \"<input type='submit' value='Set PWM'>\";\n html += \"<\/form>\";\n html += \"<p>Voltage [V]: \"; \n html += worker2Voltage;\n html += \"<\/p><hr>\";\n\n html += \"<\/body><\/html>\";\n return html;\n}\n\n\/\/ ---------------- Setup & routes ----------------\n\nvoid setup() {\n Serial.begin(115200);\n\n pinMode(LED_PIN, OUTPUT);\n digitalWrite(LED_PIN, LOW);\n pinMode(ANALOG_PIN, INPUT);\n\n ledcAttach(PWM_PIN, 5000, 8); \/\/ 5 kHz, 8-bit (0..255)\n ledcWrite(PWM_PIN, 0);\n\n connectWiFi();\n\n \/\/ initial voltage read to not produce an empty first page\n readAllVoltages();\n lastVoltageUpdate = millis();\n\n \/\/ Main page\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest* request) {\n request->send(200, \"text\/html\", buildMainPage());\n });\n\n \/\/ ----------- Device 1 (Master itself) routes -----------\n\n server.on(\"\/esp1\/led\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"state\")) {\n request->send(400, \"text\/plain\", \"Missing state parameter\");\n return;\n }\n int state = request->getParam(\"state\")->value().toInt();\n setLocalLed(state);\n request->redirect(\"\/\");\n });\n\n server.on(\"\/esp1\/pwm\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"value\")) {\n request->send(400, \"text\/plain\", \"Missing value parameter\");\n return;\n }\n int value = request->getParam(\"value\")->value().toInt();\n setLocalPwm(value);\n request->redirect(\"\/\");\n });\n\n \/\/ ----------- Device 2 (Worker ESP2) routes -----------\n\n server.on(\"\/esp2\/led\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"state\")) {\n request->send(400, \"text\/plain\", \"Missing state parameter\");\n return;\n }\n String state = request->getParam(\"state\")->value();\n String url = String(\"http:\/\/\") + ESP2_IP + \"\/led?state=\" + state;\n callWorkerSimple(url);\n request->redirect(\"\/\");\n });\n\n server.on(\"\/esp2\/pwm\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"value\")) {\n request->send(400, \"text\/plain\", \"Missing value parameter\");\n return;\n }\n String value = request->getParam(\"value\")->value();\n String url = String(\"http:\/\/\") + ESP2_IP + \"\/pwm?value=\" + value;\n callWorkerSimple(url);\n request->redirect(\"\/\");\n });\n\n \/\/ ----------- Device 3 (Worker ESP3) routes -----------\n\n server.on(\"\/esp3\/led\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"state\")) {\n request->send(400, \"text\/plain\", \"Missing state parameter\");\n return;\n }\n String state = request->getParam(\"state\")->value();\n String url = String(\"http:\/\/\") + ESP3_IP + \"\/led?state=\" + state;\n callWorkerSimple(url);\n request->redirect(\"\/\");\n });\n\n server.on(\"\/esp3\/pwm\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"value\")) {\n request->send(400, \"text\/plain\", \"Missing value parameter\");\n return;\n }\n String value = request->getParam(\"value\")->value();\n String url = String(\"http:\/\/\") + ESP3_IP + \"\/pwm?value=\" + value;\n callWorkerSimple(url);\n request->redirect(\"\/\");\n });\n\n server.begin();\n Serial.println(\"Master server ready.\");\n}\n\n\/\/ ---------------- Loop ----------------\n\nvoid loop() {\n unsigned long now = millis();\n if (now - lastVoltageUpdate >= VOLTAGE_UPDATE_INTERVAL) {\n lastVoltageUpdate = now;\n readAllVoltages();\n }\n\n delay(1);\n}\n<\/pre>\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\nIPAddress ip(192,168,178,113); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/TODO\n\nconst int LED_PIN = 2;\nconst int PWM_PIN = 5;\nconst int ANALOG_PIN = 34;\n\nint pwmValue = 0;\n\nAsyncWebServer server(80);\n\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS);\n Serial.print(\"Connecting to WiFi\");\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(\".\");\n }\n Serial.println();\n Serial.print(\"Connected. IP address: \");\n Serial.println(WiFi.localIP());\n}\n\nvoid setup() {\n Serial.begin(115200);\n\n pinMode(LED_PIN, OUTPUT);\n digitalWrite(LED_PIN, LOW);\n\n pinMode(ANALOG_PIN, INPUT);\n\n \/\/ Simple PWM setup\n ledcAttach(PWM_PIN, 5000, 8); \/\/ 5 kHz, 8-bit resolution\n ledcWrite(PWM_PIN, 0);\n\n connectWiFi();\n\n \/\/ Optional simple root page (for debugging)\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest* request) {\n String html = \"<!DOCTYPE html><html><head><meta charset='UTF-8'><title>ESP32 Worker<\/title><\/head><body>\";\n html += \"<h1>ESP32 Worker<\/h1>\";\n html += \"<p>This device is controlled by a master ESP32.<\/p>\";\n html += \"<p>Endpoints:<\/p>\";\n html += \"<ul>\";\n html += \"<li>\/led?state=0|1<\/li>\";\n html += \"<li>\/pwm?value=0..255<\/li>\";\n html += \"<li>\/voltage<\/li>\";\n html += \"<\/ul>\";\n html += \"<\/body><\/html>\";\n request->send(200, \"text\/html\", html);\n });\n\n \/\/ \/led?state=0|1\n server.on(\"\/led\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (request->hasParam(\"state\")) {\n int state = request->getParam(\"state\")->value().toInt();\n digitalWrite(LED_PIN, state ? HIGH : LOW);\n String msg = \"LED state set to \";\n msg += (state ? \"1\" : \"0\");\n request->send(200, \"text\/plain\", msg);\n } else {\n request->send(400, \"text\/plain\", \"Missing state parameter\");\n }\n });\n\n \/\/ \/pwm?value=0..255\n server.on(\"\/pwm\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (request->hasParam(\"value\")) {\n pwmValue = request->getParam(\"value\")->value().toInt();\n if (pwmValue < 0) pwmValue = 0;\n if (pwmValue > 255) pwmValue = 255;\n ledcWrite(PWM_PIN, pwmValue);\n String msg = \"PWM value set to \";\n msg += String(pwmValue);\n request->send(200, \"text\/plain\", msg);\n } else {\n request->send(400, \"text\/plain\", \"Missing value parameter\");\n }\n });\n\n \/\/ \/voltage -> return voltage as plain text, e.g. \"1.23\"\n server.on(\"\/voltage\", HTTP_GET, [](AsyncWebServerRequest* request) {\n int raw = analogRead(ANALOG_PIN);\n float voltage = 3.3f * raw \/ 4096.0f;\n String msg = String(voltage, 2); \/\/ e.g. \"1.23\"\n request->send(200, \"text\/plain\", msg);\n });\n\n server.begin();\n Serial.println(\"Worker server ready.\");\n}\n\nvoid loop() {}\n<\/pre>\n<\/div>\n\n
Here is the output:<\/p>\n\n
![\"Async](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/3esp32_asyncwebserver_only-1024x513.png\")
<\/a>Browser output of three_esp32_asyncwebserver_only_master.ino<\/figcaption><\/figure>\n As mentioned before, this is a step backwards in terms of appearance and comfort, but my intention was to illustrate the principle.<\/p>\n\n
Option 2a: Async WebServer and ESP-NOW Serial (“STA-only”)<\/h3>\n
In this constellation, too, the master\/worker 1 is a server in relation to the device that displays the website in the browser. ESP-NOW communication between master\/worker 1 and worker 2 or 3 takes place in the router’s network. Workers 2 and 3 must also be assigned IP addresses, but the MAC address is decisive for ESP-NOW communication. I have described how to determine the MAC address here<\/a>. <\/p>\n\n
![\"\"](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/3_ESP32_STA-1024x550.webp\")
<\/a>Three ESP32, communication via Async WebServer and ESP-NOW Serial, “STA-only”<\/figcaption><\/figure>\n\n Sketch for the Master\/Worker 1<\/h4>\n
I will not go into the details of ESP-NOW Serial. You can read about that here<\/a> if you need to. In principle, the sketch is structured in the same way as the previous master sketch. Only the communication between Master\/Worker 1 and Worker 2 or 3 is “translated” to ESP-NOW Serial. The data to and from the workers is transmitted as structures. <\/p>\n
And so that the output is not too boring, we present everything here in table form. <\/p>\n<\/p>\n
\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\n#include \"ESP32_NOW_Serial.h\"\n#include \"MacAddress.h\"\n\n\n#define ESPNOW_WIFI_CHANNEL 1 \/\/ TODO: router channel\n#define VOLTAGE_UPDATE_PERIOD 2000 \/\/ local voltage update every 2s\n\n\/\/ ---------- Pins ----------\nconst int LED_PIN = 2;\nconst int PWM_PIN = 5;\nconst int ANALOG_PIN = 34;\n\nIPAddress ip(192,168,178,112); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\n\/\/ ---------- WiFi STA config ----------\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/TODO\n\n\/\/ ---------- Worker MAC addresses ----------\nconst MacAddress worker2_mac({0x94, 0x3C, 0xC6, 0x34, 0xCF, 0xA4}); \/\/ TODO\nconst MacAddress worker3_mac({0xC8, 0xC9, 0xA3, 0xCA, 0x22, 0x70}); \/\/ TODO\n\n\/\/ ---------- ESP-NOW Serial ----------\nESP_NOW_Serial_Class NowSerial2(worker2_mac, ESPNOW_WIFI_CHANNEL, WIFI_IF_STA);\nESP_NOW_Serial_Class NowSerial3(worker3_mac, ESPNOW_WIFI_CHANNEL, WIFI_IF_STA);\n\n\/\/ ---------- Packet structures ----------\nstruct WorkerStatusPacket {\n float voltage;\n uint8_t pwm;\n uint8_t ledOn;\n};\n\nstruct WorkerCommandPacket {\n uint8_t pwm;\n uint8_t ledOn;\n};\n\n\/\/ ---------- Node data for UI ----------\nstruct NodeData {\n bool ledOn;\n int pwm;\n float voltage;\n};\n\n\/\/ index: 0=master, 1=worker2, 2=worker3\nNodeData nodes[3];\n\nunsigned long lastLocalVoltageMillis = 0;\n\nAsyncWebServer server(80);\n\n\n\/\/ ========== Helpers ==========\n\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS, ESPNOW_WIFI_CHANNEL);\n Serial.print(\"Connecting to WiFi\");\n while (WiFi.status() != WL_CONNECTED) {\n Serial.print(\".\");\n delay(400);\n }\n Serial.println();\n Serial.println(WiFi.localIP());\n}\n\nfloat readLocalVoltage() {\n int raw = analogRead(ANALOG_PIN);\n return 3.3f * raw \/ 4096.0f;\n}\n\nvoid processWorkerSerial(ESP_NOW_Serial_Class &serial, NodeData &data) {\n while (serial.available() >= (int)sizeof(WorkerStatusPacket)) {\n WorkerStatusPacket pkt;\n serial.readBytes((uint8_t*)&pkt, sizeof(pkt));\n data.voltage = pkt.voltage;\n data.pwm = pkt.pwm;\n data.ledOn = (pkt.ledOn != 0);\n }\n}\n\nvoid sendCommandToWorker(ESP_NOW_Serial_Class& serial, NodeData& node) {\n WorkerCommandPacket cmd;\n cmd.pwm = node.pwm;\n cmd.ledOn = node.ledOn ? 1 : 0;\n serial.write((uint8_t*)&cmd, sizeof(cmd));\n}\n\n\n\/\/ ========== Simple HTML page (NO auto-refresh) ==========\n\nString buildMainPage() {\n String html;\n html += \"<!DOCTYPE html><html><head><meta charset='UTF-8'><title>ESP32 Master Control<\/title><\/head><body>\";\n\n html += \"<h1>ESP32 Master Control (ESP-NOW Serial)<\/h1>\";\n html += \"<p><a href='\/'>Refresh page<\/a><\/p>\";\n\n html += \"<table border='1' cellpadding='4' cellspacing='0'>\";\n html += \"<tr><th>Device<\/th><th>LED<\/th><th>PWM<\/th><th>Voltage [V]<\/th><\/tr>\";\n\n \/\/ -------- Master (index 0) --------\n html += \"<tr><td>ESP1 (Master)<\/td><td>\";\n html += (nodes[0].ledOn ? \"ON\" : \"OFF\");\n html += \" (\";\n html += \"<a href='\/esp1\/led?state=1'>ON<\/a> | \";\n html += \"<a href='\/esp1\/led?state=0'>OFF<\/a>)\";\n html += \"<\/td><td>\";\n html += String(nodes[0].pwm);\n html += \"<br><form action='\/esp1\/pwm' method='get'>Set PWM: \";\n html += \"<input type='text' name='value' size='4'><input type='submit' value='Set'><\/form>\";\n html += \"<\/td><td>\";\n html += String(nodes[0].voltage, 2);\n html += \"<\/td><\/tr>\";\n\n \/\/ -------- Worker 2 (index 1) --------\n html += \"<tr><td>ESP2 (Worker)<\/td><td>\";\n html += (nodes[1].ledOn ? \"ON\" : \"OFF\");\n html += \" (\";\n html += \"<a href='\/esp2\/led?state=1'>ON<\/a> | \";\n html += \"<a href='\/esp2\/led?state=0'>OFF<\/a>)\";\n html += \"<\/td><td>\";\n html += String(nodes[1].pwm);\n html += \"<br><form action='\/esp2\/pwm' method='get'>Set PWM: \";\n html += \"<input type='text' name='value' size='4'><input type='submit' value='Set'><\/form>\";\n html += \"<\/td><td>\";\n html += String(nodes[1].voltage, 2);\n html += \"<\/td><\/tr>\";\n\n \/\/ -------- Worker 3 (index 2) --------\n html += \"<tr><td>ESP3 (Worker)<\/td><td>\";\n html += (nodes[2].ledOn ? \"ON\" : \"OFF\");\n html += \" (\";\n html += \"<a href='\/esp3\/led?state=1'>ON<\/a> | \";\n html += \"<a href='\/esp3\/led?state=0'>OFF<\/a>)\";\n html += \"<\/td><td>\";\n html += String(nodes[2].pwm);\n html += \"<br><form action='\/esp3\/pwm' method='get'>Set PWM: \";\n html += \"<input type='text' name='value' size='4'><input type='submit' value='Set'><\/form>\";\n html += \"<\/td><td>\";\n html += String(nodes[2].voltage, 2);\n html += \"<\/td><\/tr>\";\n\n html += \"<\/table><\/body><\/html>\";\n return html;\n}\n\n\n\/\/ ========== Setup ==========\n\nvoid setupWiFiAndEspNow() {\n connectWiFi();\n NowSerial2.begin(115200);\n NowSerial3.begin(115200);\n}\n\nvoid setup() {\n Serial.begin(115200);\n\n pinMode(LED_PIN, OUTPUT);\n digitalWrite(LED_PIN, LOW);\n\n pinMode(ANALOG_PIN, INPUT);\n\n ledcAttach(PWM_PIN, 5000, 8);\n ledcWrite(PWM_PIN, 0);\n\n for (int i = 0; i < 3; i++) {\n nodes[i].ledOn = false;\n nodes[i].pwm = 0;\n nodes[i].voltage = 0.0f;\n }\n\n setupWiFiAndEspNow();\n\n \/\/ -------- Web routes --------\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest* request) {\n request->send(200, \"text\/html\", buildMainPage());\n });\n\n \/\/ Master LED\n server.on(\"\/esp1\/led\", HTTP_GET, [](AsyncWebServerRequest* request) {\n int s = request->getParam(\"state\")->value().toInt();\n nodes[0].ledOn = (s != 0);\n digitalWrite(LED_PIN, nodes[0].ledOn ? HIGH : LOW);\n request->redirect(\"\/\");\n });\n\n \/\/ Master PWM\n server.on(\"\/esp1\/pwm\", HTTP_GET, [](AsyncWebServerRequest* request) {\n int val = request->getParam(\"value\")->value().toInt();\n if (val < 0) val = 0;\n if (val > 255) val = 255;\n nodes[0].pwm = val;\n ledcWrite(PWM_PIN, nodes[0].pwm);\n request->redirect(\"\/\");\n });\n\n \/\/ Worker 2 LED\n server.on(\"\/esp2\/led\", HTTP_GET, [](AsyncWebServerRequest* request) {\n int s = request->getParam(\"state\")->value().toInt();\n nodes[1].ledOn = (s != 0);\n sendCommandToWorker(NowSerial2, nodes[1]);\n request->redirect(\"\/\");\n });\n\n \/\/ Worker 2 PWM\n server.on(\"\/esp2\/pwm\", HTTP_GET, [](AsyncWebServerRequest* request) {\n int val = request->getParam(\"value\")->value().toInt();\n if (val < 0) val = 0;\n if (val > 255) val = 255;\n nodes[1].pwm = val;\n sendCommandToWorker(NowSerial2, nodes[1]);\n request->redirect(\"\/\");\n });\n\n \/\/ Worker 3 LED\n server.on(\"\/esp3\/led\", HTTP_GET, [](AsyncWebServerRequest* request) {\n int s = request->getParam(\"state\")->value().toInt();\n nodes[2].ledOn = (s != 0);\n sendCommandToWorker(NowSerial3, nodes[2]);\n request->redirect(\"\/\");\n });\n\n \/\/ Worker 3 PWM\n server.on(\"\/esp3\/pwm\", HTTP_GET, [](AsyncWebServerRequest* request) {\n int val = request->getParam(\"value\")->value().toInt();\n if (val < 0) val = 0;\n if (val > 255) val = 255;\n nodes[2].pwm = val;\n sendCommandToWorker(NowSerial3, nodes[2]);\n request->redirect(\"\/\");\n });\n\n server.begin();\n Serial.println(\"Master ready.\");\n}\n\n\n\/\/ ========== Loop ==========\n\nvoid loop() {\n unsigned long now = millis();\n\n \/\/ Update master's own voltage\n if (now - lastLocalVoltageMillis > VOLTAGE_UPDATE_PERIOD) {\n lastLocalVoltageMillis = now;\n nodes[0].voltage = readLocalVoltage();\n }\n\n \/\/ Process worker packets\n processWorkerSerial(NowSerial2, nodes[1]);\n processWorkerSerial(NowSerial3, nodes[2]);\n\n delay(1);\n}\n<\/pre>\n#include <WiFi.h>\n#include \"ESP32_NOW_Serial.h\"\n#include \"MacAddress.h\"\n\n#define ESPNOW_WIFI_CHANNEL 1 \/\/ same as master \/ router\n#define STATUS_SEND_PERIOD 2000 \/\/ [ms]\n\n\/\/ same pins as on master\nconst int LED_PIN = 2;\nconst int PWM_PIN = 5;\nconst int ANALOG_PIN = 34;\n\nIPAddress ip(192,168,178,113); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\n\/\/ ---------- WiFi STA config ----------\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/TODO\n\n\/\/ ---------- MAC of master (STA interface) ----------\nconst MacAddress master_mac({0xC8, 0xC9, 0xA3, 0xC6, 0xFE, 0x54}); \/\/ TODO\n\nESP_NOW_Serial_Class NowSerial(master_mac, ESPNOW_WIFI_CHANNEL, WIFI_IF_STA);\n\n\/\/ data packets\nstruct WorkerStatusPacket {\n float voltage;\n uint8_t pwm;\n uint8_t ledOn;\n};\n\nstruct WorkerCommandPacket {\n uint8_t pwm;\n uint8_t ledOn;\n};\n\n\/\/ local state\nuint8_t currentPwm = 0;\nbool currentLedOn = false;\n\nunsigned long lastStatusSent = 0;\n\n\/\/ ---------- helpers ----------\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS, ESPNOW_WIFI_CHANNEL);\n Serial.print(\"Connecting to WiFi\");\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(\".\");\n }\n Serial.println();\n Serial.print(\"Connected. IP address: \");\n Serial.println(WiFi.localIP());\n}\n\nfloat readVoltage() {\n int raw = analogRead(ANALOG_PIN);\n float voltage = 3.3f * raw \/ 4096.0f;\n return voltage;\n}\n\nvoid applyCommand(const WorkerCommandPacket& cmd) {\n currentPwm = cmd.pwm;\n currentLedOn = (cmd.ledOn != 0);\n\n ledcWrite(PWM_PIN, currentPwm);\n digitalWrite(LED_PIN, currentLedOn ? HIGH : LOW);\n}\n\nvoid sendStatus() {\n WorkerStatusPacket pkt;\n pkt.voltage = readVoltage();\n pkt.pwm = currentPwm;\n pkt.ledOn = currentLedOn ? 1 : 0;\n\n int ok = NowSerial.write((uint8_t*)&pkt, sizeof(pkt));\n if (!ok) {\n Serial.println(\"Status send failed\");\n }\n}\n\n\/\/ ---------- setup() ----------\nvoid setup() {\n Serial.begin(115200);\n\n pinMode(LED_PIN, OUTPUT);\n digitalWrite(LED_PIN, LOW);\n\n pinMode(ANALOG_PIN, INPUT);\n\n ledcAttach(PWM_PIN, 5000, 8);\n ledcWrite(PWM_PIN, 0);\n\n connectWiFi();\n\n \/\/ ESP-NOW Serial on STA interface\n NowSerial.begin(115200);\n\n Serial.println(\"Worker ready.\");\n}\n\n\/\/ ---------- loop() ----------\nvoid loop() {\n unsigned long now = millis();\n\n \/\/ periodic status to master\n if (now - lastStatusSent > STATUS_SEND_PERIOD) {\n lastStatusSent = now;\n sendStatus();\n }\n\n \/\/ incoming commands\n while (NowSerial.available() >= (int)sizeof(WorkerCommandPacket)) {\n WorkerCommandPacket cmd;\n NowSerial.readBytes((uint8_t*)&cmd, sizeof(cmd));\n applyCommand(cmd);\n }\n\n delay(1);\n}\n<\/pre>\n<\/div>\n\n\n
And this is the output:<\/p>\n\n
![\"Async](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/3esp32_esp_now_serial.png\")
<\/a>Browser output of three_esp32_espnow_sta_master.ino<\/figcaption><\/figure>\n\n Option 2b: Async WebServer and ESP-NOW Serial (STA\/AP)<\/h3>\n
In this constellation, we have to set up an Async WebServer on the master ESP32 as usual. In addition, the master ESP32 provides a network to which Worker 2 and Worker 3 can connect. You assign a name and password of your choice for this network. <\/p>\n
An important point is that the SoftAP MAC address of the master ESP32 is used for ESP-NOW serial communication. I have described how to determine it here<\/a>. Normally you only have to add 1 to the last number of the MAC address. <\/p>\n\n
![\"\"](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/3_ESP32_ESPNOW_Serial_STA_AP-1024x512.webp\")
<\/a>Three ESP32, communication via Async WebServer and ESP-NOW Serial, “AP_STA-Mode”<\/figcaption><\/figure>\n The network is set up in the
startAPForWorkers()<\/code> function. This should be fairly self-explanatory. What you may notice is that in this version we specify the ESPNOW_WIFI_CHANNEL for all participants. This is necessary because we have two networks and the Wi-Fi channels of the two could differ when automatically selected. <\/p>\nNot much changes on the worker side, except that the SSID and password of the network of the master ESP32 are used. <\/p>\n<\/p>\n
\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\n#include \"ESP32_NOW_Serial.h\"\n#include \"MacAddress.h\"\n#include \"esp_wifi.h\"\n\n#define ESPNOW_WIFI_CHANNEL 1 \/\/ All ESP32 and the master's AP use this channel\n#define VOLTAGE_UPDATE_PERIOD 2000 \/\/ [ms] local voltage update period\n\n\/\/ ---------- Pins ----------\nconst int LED_PIN = 2;\nconst int PWM_PIN = 5;\nconst int ANALOG_PIN = 34;\n\n\/\/ ---------- WiFi STA (home network) ----------\nIPAddress ip(192,168,178,112); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/TODO\n\n\/\/ ---------- WiFi AP (for the workers) ----------\nconst char* AP_SSID = \"ESP32-Master\"; \/\/ TODO: choose AP SSID for workers\nconst char* AP_PASS = \"12345678\"; \/\/ TODO: choose AP password (>= 8 chars)\n\n\/\/ ---------- Worker MAC addresses (STA interface of ESP2 and ESP3) ----------\nconst MacAddress worker2_mac({0x94, 0x3C, 0xC6, 0x34, 0xCF, 0xA4}); \/\/ TODO\nconst MacAddress worker3_mac({0xC8, 0xC9, 0xA3, 0xCA, 0x22, 0x70}); \/\/ TODO\n\n\/\/ ---------- ESP-NOW Serial on MASTER: use AP interface ----------\nESP_NOW_Serial_Class NowSerial2(worker2_mac, ESPNOW_WIFI_CHANNEL, WIFI_IF_AP);\nESP_NOW_Serial_Class NowSerial3(worker3_mac, ESPNOW_WIFI_CHANNEL, WIFI_IF_AP);\n\n\/\/ ---------- Packet structures ----------\nstruct WorkerStatusPacket {\n float voltage;\n uint8_t pwm;\n uint8_t ledOn;\n};\n\nstruct WorkerCommandPacket {\n uint8_t pwm;\n uint8_t ledOn;\n};\n\n\/\/ ---------- Node data for UI ----------\nstruct NodeData {\n bool ledOn;\n int pwm;\n float voltage;\n};\n\n\/\/ index: 0 = master, 1 = worker2, 2 = worker3\nNodeData nodes[3];\n\nunsigned long lastLocalVoltageMillis = 0;\n\nAsyncWebServer server(80);\n\n\n\/\/ ================== Helper functions ==================\n\nvoid connectWiFiSTA() {\n \/\/ Master connects as STA to your home router\n WiFi.mode(WIFI_AP_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS, ESPNOW_WIFI_CHANNEL);\n Serial.print(\"Connecting to home WiFi (STA)\");\n while (WiFi.status() != WL_CONNECTED) {\n Serial.print(\".\");\n delay(400);\n }\n Serial.println();\n Serial.print(\"STA IP address (use this in browser): \");\n Serial.println(WiFi.localIP());\n}\n\nvoid startAPForWorkers() {\n \/\/ Master starts an AP for the worker ESP32 boards\n bool ok = WiFi.softAP(AP_SSID, AP_PASS, ESPNOW_WIFI_CHANNEL);\n if (!ok) {\n Serial.println(\"Error starting AP. Restarting...\");\n delay(2000);\n ESP.restart();\n }\n Serial.print(\"AP started. SSID: \");\n Serial.println(AP_SSID);\n Serial.print(\"AP IP: \");\n Serial.println(WiFi.softAPIP());\n}\n\nfloat readLocalVoltage() {\n int raw = analogRead(ANALOG_PIN);\n return 3.3f * raw \/ 4096.0f;\n}\n\nvoid processWorkerSerial(ESP_NOW_Serial_Class &serial, NodeData &data) {\n while (serial.available() >= (int)sizeof(WorkerStatusPacket)) {\n WorkerStatusPacket pkt;\n serial.readBytes((uint8_t*)&pkt, sizeof(pkt));\n data.voltage = pkt.voltage;\n data.pwm = pkt.pwm;\n data.ledOn = (pkt.ledOn != 0);\n }\n}\n\nvoid sendCommandToWorker(ESP_NOW_Serial_Class& serial, NodeData& node) {\n WorkerCommandPacket cmd;\n cmd.pwm = (uint8_t)node.pwm;\n cmd.ledOn = node.ledOn ? 1 : 0;\n serial.write((uint8_t*)&cmd, sizeof(cmd));\n}\n\n\n\/\/ ================== HTML page (no auto-refresh, no last-update) ==================\n\nString buildMainPage() {\n String html;\n html += \"<!DOCTYPE html><html><head><meta charset='UTF-8'>\";\n html += \"<title>ESP32 Master Control<\/title><\/head><body>\";\n\n html += \"<h1>ESP32 Master Control (ESP-NOW Serial, AP+STA)<\/h1>\";\n html += \"<p>STA IP address: \";\n html += WiFi.localIP().toString();\n html += \"<\/p>\";\n html += \"<p><a href='\/'>Refresh page<\/a><\/p>\";\n\n html += \"<table border='1' cellpadding='4' cellspacing='0'>\";\n html += \"<tr><th>Device<\/th><th>LED<\/th><th>PWM<\/th><th>Voltage [V]<\/th><\/tr>\";\n\n \/\/ ----- ESP1 (Master \/ Worker #1) -----\n html += \"<tr><td>ESP1 (Master)<\/td><td>\";\n html += (nodes[0].ledOn ? \"ON\" : \"OFF\");\n html += \" (\";\n html += \"<a href='\/esp1\/led?state=1'>ON<\/a> | \";\n html += \"<a href='\/esp1\/led?state=0'>OFF<\/a>)\";\n html += \"<\/td><td>\";\n html += String(nodes[0].pwm);\n html += \"<br><form action='\/esp1\/pwm' method='get'>Set PWM: \";\n html += \"<input type='text' name='value' size='4'>\";\n html += \"<input type='submit' value='Set'>\";\n html += \"<\/form>\";\n html += \"<\/td><td>\";\n html += String(nodes[0].voltage, 2);\n html += \"<\/td><\/tr>\";\n\n \/\/ ----- ESP2 (Worker) -----\n html += \"<tr><td>ESP2 (Worker)<\/td><td>\";\n html += (nodes[1].ledOn ? \"ON\" : \"OFF\");\n html += \" (\";\n html += \"<a href='\/esp2\/led?state=1'>ON<\/a> | \";\n html += \"<a href='\/esp2\/led?state=0'>OFF<\/a>)\";\n html += \"<\/td><td>\";\n html += String(nodes[1].pwm);\n html += \"<br><form action='\/esp2\/pwm' method='get'>Set PWM: \";\n html += \"<input type='text' name='value' size='4'>\";\n html += \"<input type='submit' value='Set'>\";\n html += \"<\/form>\";\n html += \"<\/td><td>\";\n html += String(nodes[1].voltage, 2);\n html += \"<\/td><\/tr>\";\n\n \/\/ ----- ESP3 (Worker) -----\n html += \"<tr><td>ESP3 (Worker)<\/td><td>\";\n html += (nodes[2].ledOn ? \"ON\" : \"OFF\");\n html += \" (\";\n html += \"<a href='\/esp3\/led?state=1'>ON<\/a> | \";\n html += \"<a href='\/esp3\/led?state=0'>OFF<\/a>)\";\n html += \"<\/td><td>\";\n html += String(nodes[2].pwm);\n html += \"<br><form action='\/esp3\/pwm' method='get'>Set PWM: \";\n html += \"<input type='text' name='value' size='4'>\";\n html += \"<input type='submit' value='Set'>\";\n html += \"<\/form>\";\n html += \"<\/td><td>\";\n html += String(nodes[2].voltage, 2);\n html += \"<\/td><\/tr>\";\n\n html += \"<\/table><\/body><\/html>\";\n return html;\n}\n\n\n\/\/ ================== Setup ==================\n\nvoid setup() {\n Serial.begin(115200);\n\n pinMode(LED_PIN, OUTPUT);\n digitalWrite(LED_PIN, LOW);\n pinMode(ANALOG_PIN, INPUT);\n\n ledcAttach(PWM_PIN, 5000, 8);\n ledcWrite(PWM_PIN, 0);\n\n \/\/ init node data\n for (int i = 0; i < 3; i++) {\n nodes[i].ledOn = false;\n nodes[i].pwm = 0;\n nodes[i].voltage = 0.0f;\n }\n\n \/\/ combined STA (home WiFi) + AP (for workers)\n connectWiFiSTA();\n startAPForWorkers();\n\n \/\/ ESP-NOW Serial uses AP interface on the master\n NowSerial2.begin(115200);\n NowSerial3.begin(115200);\n\n \/\/ ---------- Web routes ----------\n\n \/\/ main page\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest* request) {\n request->send(200, \"text\/html\", buildMainPage());\n });\n\n \/\/ ---- Master LED ----\n server.on(\"\/esp1\/led\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"state\")) {\n request->send(400, \"text\/plain\", \"Missing state parameter\");\n return;\n }\n int s = request->getParam(\"state\")->value().toInt();\n nodes[0].ledOn = (s != 0);\n digitalWrite(LED_PIN, nodes[0].ledOn ? HIGH : LOW);\n request->redirect(\"\/\");\n });\n\n \/\/ ---- Master PWM ----\n server.on(\"\/esp1\/pwm\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"value\")) {\n request->send(400, \"text\/plain\", \"Missing value parameter\");\n return;\n }\n int val = request->getParam(\"value\")->value().toInt();\n if (val < 0) val = 0;\n if (val > 255) val = 255;\n nodes[0].pwm = val;\n ledcWrite(PWM_PIN, nodes[0].pwm);\n request->redirect(\"\/\");\n });\n\n \/\/ ---- Worker 2 LED ----\n server.on(\"\/esp2\/led\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"state\")) {\n request->send(400, \"text\/plain\", \"Missing state parameter\");\n return;\n }\n int s = request->getParam(\"state\")->value().toInt();\n nodes[1].ledOn = (s != 0);\n sendCommandToWorker(NowSerial2, nodes[1]);\n request->redirect(\"\/\");\n });\n\n \/\/ ---- Worker 2 PWM ----\n server.on(\"\/esp2\/pwm\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"value\")) {\n request->send(400, \"text\/plain\", \"Missing value parameter\");\n return;\n }\n int val = request->getParam(\"value\")->value().toInt();\n if (val < 0) val = 0;\n if (val > 255) val = 255;\n nodes[1].pwm = val;\n sendCommandToWorker(NowSerial2, nodes[1]);\n request->redirect(\"\/\");\n });\n\n \/\/ ---- Worker 3 LED ----\n server.on(\"\/esp3\/led\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"state\")) {\n request->send(400, \"text\/plain\", \"Missing state parameter\");\n return;\n }\n int s = request->getParam(\"state\")->value().toInt();\n nodes[2].ledOn = (s != 0);\n sendCommandToWorker(NowSerial3, nodes[2]);\n request->redirect(\"\/\");\n });\n\n \/\/ ---- Worker 3 PWM ----\n server.on(\"\/esp3\/pwm\", HTTP_GET, [](AsyncWebServerRequest* request) {\n if (!request->hasParam(\"value\")) {\n request->send(400, \"text\/plain\", \"Missing value parameter\");\n return;\n }\n int val = request->getParam(\"value\")->value().toInt();\n if (val < 0) val = 0;\n if (val > 255) val = 255;\n nodes[2].pwm = val;\n sendCommandToWorker(NowSerial3, nodes[2]);\n request->redirect(\"\/\");\n });\n\n server.begin();\n Serial.println(\"Master (AP+STA) ready.\");\n\n Serial.print(\"Soft AP MAC address: \");\n Serial.println(WiFi.softAPmacAddress()); \/\/ Master-AP-MAC f\u00fcr master_ap_mac\n}\n\n\n\/\/ ================== Loop ==================\n\nvoid loop() {\n unsigned long now = millis();\n\n \/\/ Update master's own voltage every 2 s\n if (now - lastLocalVoltageMillis > VOLTAGE_UPDATE_PERIOD) {\n lastLocalVoltageMillis = now;\n nodes[0].voltage = readLocalVoltage();\n }\n\n \/\/ Process worker packets\n processWorkerSerial(NowSerial2, nodes[1]);\n processWorkerSerial(NowSerial3, nodes[2]);\n\n delay(1);\n}\n<\/pre>\n#include <WiFi.h>\n#include \"ESP32_NOW_Serial.h\"\n#include \"MacAddress.h\"\n#include \"esp_wifi.h\"\n\n#define ESPNOW_WIFI_CHANNEL 1\n#define STATUS_SEND_PERIOD 2000 \/\/ [ms]\n\n\/\/ Same pins as on master\nconst int LED_PIN = 2;\nconst int PWM_PIN = 5;\nconst int ANALOG_PIN = 34;\n\n\/\/ -------- WiFi STA: connect to master's AP --------\nconst char* AP_SSID = \"ESP32-Master\"; \/\/ must match master's AP_SSID\nconst char* AP_PASS = \"12345678\"; \/\/ must match master's AP_PASS\n\nconst MacAddress master_ap_mac({0xC8, 0xC9, 0xA3, 0xC6, 0xFE, 0x55}); \/\/ TODO: adjust\n\n\/\/ ESP-NOW Serial on worker: use STA interface\nESP_NOW_Serial_Class NowSerial(master_ap_mac, ESPNOW_WIFI_CHANNEL, WIFI_IF_STA);\n\n\/\/ ---------- Data packets ----------\nstruct WorkerStatusPacket {\n float voltage;\n uint8_t pwm;\n uint8_t ledOn;\n};\n\nstruct WorkerCommandPacket {\n uint8_t pwm;\n uint8_t ledOn;\n};\n\nuint8_t currentPwm = 0;\nbool currentLedOn = false;\n\nunsigned long lastStatusSent = 0;\n\n\n\/\/ ================== Helper functions ==================\n\nvoid connectToMasterAP() {\n WiFi.mode(WIFI_STA);\n WiFi.begin(AP_SSID, AP_PASS, ESPNOW_WIFI_CHANNEL);\n Serial.print(\"Connecting to master AP\");\n while (WiFi.status() != WL_CONNECTED) {\n Serial.print(\".\");\n delay(400);\n }\n Serial.println();\n Serial.print(\"Worker STA IP (not really needed for ESP-NOW): \");\n Serial.println(WiFi.localIP());\n}\n\nfloat readVoltage() {\n int raw = analogRead(ANALOG_PIN);\n return 3.3f * raw \/ 4096.0f;\n}\n\nvoid applyCommand(const WorkerCommandPacket& cmd) {\n currentPwm = cmd.pwm;\n currentLedOn = (cmd.ledOn != 0);\n\n ledcWrite(PWM_PIN, currentPwm);\n digitalWrite(LED_PIN, currentLedOn ? HIGH : LOW);\n}\n\nvoid sendStatus() {\n WorkerStatusPacket pkt;\n pkt.voltage = readVoltage();\n pkt.pwm = currentPwm;\n pkt.ledOn = currentLedOn ? 1 : 0;\n\n int ok = NowSerial.write((uint8_t*)&pkt, sizeof(pkt));\n if (!ok) {\n Serial.println(\"Status send failed\");\n }\n}\n\n\n\/\/ ================== Setup ==================\n\nvoid setup() {\n Serial.begin(115200);\n\n pinMode(LED_PIN, OUTPUT);\n digitalWrite(LED_PIN, LOW);\n\n pinMode(ANALOG_PIN, INPUT);\n\n ledcAttach(PWM_PIN, 5000, 8);\n ledcWrite(PWM_PIN, 0);\n\n connectToMasterAP();\n\n NowSerial.begin(115200);\n\n Serial.println(\"Worker ready (STA \u2192 master AP).\");\n}\n\n\n\/\/ ================== Loop ==================\n\nvoid loop() {\n unsigned long now = millis();\n\n \/\/ periodically send status to master\n if (now - lastStatusSent > STATUS_SEND_PERIOD) {\n lastStatusSent = now;\n sendStatus();\n }\n\n \/\/ handle incoming commands\n while (NowSerial.available() >= (int)sizeof(WorkerCommandPacket)) {\n WorkerCommandPacket cmd;\n NowSerial.readBytes((uint8_t*)&cmd, sizeof(cmd));\n applyCommand(cmd);\n }\n\n delay(1);\n}\n<\/pre>\n<\/div>\n\n\n
Complete version ESP-NOW Serial (“STA-only”) <\/h3>\n\n
I would like to provide a complete version, i.e. with sliders and switches for the “STA-only” version with ESP-NOW Serial. <\/p>\n<\/p>\n
\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n\n#include \"ESP32_NOW_Serial.h\"\n#include \"MacAddress.h\"\n\n\/\/ ================== CONFIG ==================\n\n#define ESPNOW_WIFI_CHANNEL 1\n#define VOLTAGE_UPDATE_PERIOD 2000\n\n\/\/ ---------- Pins ----------\nconst int LED_PIN = 2;\nconst int PWM_PIN = 5;\nconst int ANALOG_PIN = 34;\n\n\/\/ ---------- Network ----------\nIPAddress ip(192,168,178,112); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/TODO\n\n\/\/ ---------- Worker MACs ----------\nconst MacAddress worker2_mac({0x94,0x3C,0xC6,0x34,0xCF,0xA4}); \/\/TODO\nconst MacAddress worker3_mac({0xC8,0xC9,0xA3,0xCA,0x22,0x70}); \/\/TODO\n\n\/\/ ---------- ESP-NOW Serial ----------\nESP_NOW_Serial_Class NowSerial2(worker2_mac, ESPNOW_WIFI_CHANNEL, WIFI_IF_STA);\nESP_NOW_Serial_Class NowSerial3(worker3_mac, ESPNOW_WIFI_CHANNEL, WIFI_IF_STA);\n\n\/\/ ================== DATA ==================\n\nstruct WorkerStatusPacket {\n float voltage;\n uint8_t pwm;\n uint8_t ledOn;\n};\n\nstruct WorkerCommandPacket {\n uint8_t pwm;\n uint8_t ledOn;\n};\n\nstruct NodeData {\n bool ledOn;\n int pwm;\n float voltage;\n};\n\n\/\/ index: 0 = master, 1 = worker2, 2 = worker3\nNodeData nodes[3];\n\nunsigned long lastLocalVoltageMillis = 0;\n\nAsyncWebServer server(80);\n\n\/\/ ================== HELPERS ==================\n\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS, ESPNOW_WIFI_CHANNEL);\n Serial.print(\"Connecting to WiFi\");\n while (WiFi.status() != WL_CONNECTED) {\n delay(400);\n Serial.print(\".\");\n }\n Serial.println();\n Serial.print(\"IP: \");\n Serial.println(WiFi.localIP());\n}\n\nfloat readLocalVoltage() {\n int raw = analogRead(ANALOG_PIN);\n return 3.3f * raw \/ 4096.0f;\n}\n\nvoid processWorkerSerial(ESP_NOW_Serial_Class &serial, NodeData &data) {\n while (serial.available() >= (int)sizeof(WorkerStatusPacket)) {\n WorkerStatusPacket pkt;\n serial.readBytes((uint8_t*)&pkt, sizeof(pkt));\n data.voltage = pkt.voltage;\n data.pwm = pkt.pwm;\n data.ledOn = pkt.ledOn != 0;\n }\n}\n\nvoid sendCommandToWorker(ESP_NOW_Serial_Class &serial, NodeData &node) {\n WorkerCommandPacket cmd;\n cmd.pwm = node.pwm;\n cmd.ledOn = node.ledOn ? 1 : 0;\n serial.write((uint8_t*)&cmd, sizeof(cmd));\n}\n\n\/\/ ================== HTML UI ==================\n\nString buildMainPage() {\n String html;\n html += F(R\"rawliteral(\n<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>ESP32 ESP-NOW Control<\/title>\n<style>\nbody{font-family:Arial,Helvetica,sans-serif;background:#f0f2f5;margin:0}\n.container{max-width:900px;margin:30px auto;background:#fff;\npadding:20px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.1)}\nh1{text-align:center;margin-bottom:10px}\ntable{width:100%;border-collapse:collapse}\nth,td{padding:10px;text-align:center;border-bottom:1px solid #ddd}\n\n.switch{position:relative;display:inline-block;width:50px;height:26px}\n.switch input{display:none}\n.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:34px}\n.slider:before{content:\"\";position:absolute;height:20px;width:20px;left:3px;bottom:3px;\nbackground:white;border-radius:50%;transition:.2s}\ninput:checked+.slider{background:#4CAF50}\ninput:checked+.slider:before{transform:translateX(24px)}\n\n.pwm-box{display:inline-flex;align-items:center;gap:8px;width:260px}\ninput[type=range]{width:180px}\n\n.value{\n font-variant-numeric: tabular-nums;\n display:inline-block;\n width:3ch;\n text-align:right;\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"container\">\n<h1>ESP32 ESP-NOW Control<\/h1>\n\n<table>\n<tr><th>Device<\/th><th>LED<\/th><th>PWM<\/th><th>Voltage [V]<\/th><\/tr>\n\n<script>\nasync function refreshState(){\n const r = await fetch('\/api\/state',{cache:'no-store'});\n const s = await r.json();\n [1,2,3].forEach(d=>{\n const n=s['dev'+d];\n document.getElementById('led'+d).checked=n.ledOn;\n document.getElementById('pwm'+d).value=n.pwm;\n document.getElementById('pwmt'+d).textContent=n.pwm;\n document.getElementById('v'+d).textContent=n.voltage.toFixed(2);\n });\n}\nasync function setLed(dev,val){\n await fetch(`\/api\/set?dev=${dev}&led=${val}`);\n}\nasync function setPwm(dev,val){\n await fetch(`\/api\/set?dev=${dev}&pwm=${val}`);\n}\nsetInterval(refreshState,5000);\nwindow.onload=refreshState;\n<\/script>\n)rawliteral\");\n\n const char* names[]={\"ESP1 (Master)\",\"ESP2 (Worker)\",\"ESP3 (Worker)\"};\n\n for(int i=1;i<=3;i++){\n html += \"<tr><td>\"+String(names[i-1])+\"<\/td>\";\n\n html += \"<td><label class='switch'><input type='checkbox' id='led\"+String(i)+\"' \";\n html += \"onchange='setLed(\"+String(i)+\",this.checked?1:0)'>\";\n html += \"<span class='slider'><\/span><\/label><\/td>\";\n\n html += \"<td><div class='pwm-box'>\";\n html += \"<input type='range' min='0' max='255' id='pwm\"+String(i)+\"' \";\n html += \"oninput='pwmt\"+String(i)+\".textContent=this.value' \";\n html += \"onchange='setPwm(\"+String(i)+\",this.value)'>\";\n html += \"<span class='value' id='pwmt\"+String(i)+\"'>0<\/span>\";\n html += \"<\/div><\/td>\";\n\n html += \"<td><span class='value' id='v\"+String(i)+\"'>0.00<\/span><\/td><\/tr>\";\n }\n\n html += \"<\/table><\/div><\/body><\/html>\";\n return html;\n}\n\n\/\/ ================== JSON API ==================\n\nString jsonState() {\n String j=\"{\";\n for(int i=0;i<3;i++){\n j+=\"\\\"dev\"+String(i+1)+\"\\\":{\";\n j+=\"\\\"ledOn\\\":\"+String(nodes[i].ledOn?1:0)+\",\";\n j+=\"\\\"pwm\\\":\"+String(nodes[i].pwm)+\",\";\n j+=\"\\\"voltage\\\":\"+String(nodes[i].voltage,3)+\"}\";\n if(i<2) j+=\",\";\n }\n j+=\"}\";\n return j;\n}\n\n\/\/ ================== SETUP ==================\n\nvoid setup() {\n Serial.begin(115200);\n\n pinMode(LED_PIN, OUTPUT);\n pinMode(ANALOG_PIN, INPUT);\n\n ledcAttach(PWM_PIN, 5000, 8);\n ledcWrite(PWM_PIN, 0);\n\n for(int i=0;i<3;i++){\n nodes[i]={false,0,0.0f};\n }\n\n connectWiFi();\n NowSerial2.begin(115200);\n NowSerial3.begin(115200);\n\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest* r){\n r->send(200,\"text\/html\",buildMainPage());\n });\n\n server.on(\"\/api\/state\", HTTP_GET, [](AsyncWebServerRequest* r){\n r->send(200,\"application\/json\",jsonState());\n });\n\n server.on(\"\/api\/set\", HTTP_GET, [](AsyncWebServerRequest* r){\n int dev=r->getParam(\"dev\")->value().toInt();\n bool hasLed=r->hasParam(\"led\");\n bool hasPwm=r->hasParam(\"pwm\");\n\n if(dev==1){\n if(hasLed){ nodes[0].ledOn=r->getParam(\"led\")->value().toInt(); digitalWrite(LED_PIN,nodes[0].ledOn); }\n if(hasPwm){ nodes[0].pwm=r->getParam(\"pwm\")->value().toInt(); ledcWrite(PWM_PIN,nodes[0].pwm); }\n }\n if(dev==2){\n if(hasLed) nodes[1].ledOn=r->getParam(\"led\")->value().toInt();\n if(hasPwm) nodes[1].pwm=r->getParam(\"pwm\")->value().toInt();\n sendCommandToWorker(NowSerial2,nodes[1]);\n }\n if(dev==3){\n if(hasLed) nodes[2].ledOn=r->getParam(\"led\")->value().toInt();\n if(hasPwm) nodes[2].pwm=r->getParam(\"pwm\")->value().toInt();\n sendCommandToWorker(NowSerial3,nodes[2]);\n }\n r->send(200,\"text\/plain\",\"OK\");\n });\n\n server.begin();\n Serial.println(\"Master ready.\");\n}\n\n\/\/ ================== LOOP ==================\n\nvoid loop() {\n unsigned long now=millis();\n\n if(now-lastLocalVoltageMillis>VOLTAGE_UPDATE_PERIOD){\n lastLocalVoltageMillis=now;\n nodes[0].voltage=readLocalVoltage();\n }\n\n processWorkerSerial(NowSerial2,nodes[1]);\n processWorkerSerial(NowSerial3,nodes[2]);\n\n delay(1);\n}\n<\/pre>\n#include <WiFi.h>\n#include \"ESP32_NOW_Serial.h\"\n#include \"MacAddress.h\"\n\n#define ESPNOW_WIFI_CHANNEL 1 \/\/ same as master \/ router\n#define STATUS_SEND_PERIOD 2000 \/\/ [ms]\n\n\/\/ same pins as on master\nconst int LED_PIN = 2;\nconst int PWM_PIN = 5;\nconst int ANALOG_PIN = 34;\n\nIPAddress ip(192,168,178,113); \/\/TODO\nIPAddress gateway(192,168,178,1); \/\/TODO\nIPAddress subnet(255,255,255,0); \/\/TODO\n\n\/\/ ---------- WiFi STA config ----------\nconstexpr char WIFI_SSID[] = \"Your SSID\"; \/\/TODO\nconstexpr char WIFI_PASS[] = \"Your password\"; \/\/TODO\n\/\/ ---------- MAC of master (STA interface) ----------\n\nconst MacAddress master_mac({0xC8, 0xC9, 0xA3, 0xC6, 0xFE, 0x54}); \/\/ TODO\n\nESP_NOW_Serial_Class NowSerial(master_mac, ESPNOW_WIFI_CHANNEL, WIFI_IF_STA);\n\n\/\/ data packets\nstruct WorkerStatusPacket {\n float voltage;\n uint8_t pwm;\n uint8_t ledOn;\n};\n\nstruct WorkerCommandPacket {\n uint8_t pwm;\n uint8_t ledOn;\n};\n\n\/\/ local state\nuint8_t currentPwm = 0;\nbool currentLedOn = false;\n\nunsigned long lastStatusSent = 0;\n\n\/\/ ---------- helpers ----------\nvoid connectWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.config(ip, gateway, subnet);\n WiFi.begin(WIFI_SSID, WIFI_PASS, ESPNOW_WIFI_CHANNEL);\n Serial.print(\"Connecting to WiFi\");\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(\".\");\n }\n Serial.println();\n Serial.print(\"Connected. IP address: \");\n Serial.println(WiFi.localIP());\n}\n\nfloat readVoltage() {\n int raw = analogRead(ANALOG_PIN);\n float voltage = 3.3f * raw \/ 4096.0f;\n return voltage;\n}\n\nvoid applyCommand(const WorkerCommandPacket& cmd) {\n currentPwm = cmd.pwm;\n currentLedOn = (cmd.ledOn != 0);\n\n ledcWrite(PWM_PIN, currentPwm);\n digitalWrite(LED_PIN, currentLedOn ? HIGH : LOW);\n}\n\nvoid sendStatus() {\n WorkerStatusPacket pkt;\n pkt.voltage = readVoltage();\n pkt.pwm = currentPwm;\n pkt.ledOn = currentLedOn ? 1 : 0;\n\n int ok = NowSerial.write((uint8_t*)&pkt, sizeof(pkt));\n if (!ok) {\n Serial.println(\"Status send failed\");\n }\n}\n\n\/\/ ---------- setup() ----------\nvoid setup() {\n Serial.begin(115200);\n\n pinMode(LED_PIN, OUTPUT);\n digitalWrite(LED_PIN, LOW);\n\n pinMode(ANALOG_PIN, INPUT);\n\n ledcAttach(PWM_PIN, 5000, 8);\n ledcWrite(PWM_PIN, 0);\n\n connectWiFi();\n\n \/\/ ESP-NOW Serial on STA interface\n NowSerial.begin(115200);\n\n Serial.println(\"Worker ready.\");\n}\n\n\/\/ ---------- loop() ----------\nvoid loop() {\n unsigned long now = millis();\n\n \/\/ periodic status to master\n if (now - lastStatusSent > STATUS_SEND_PERIOD) {\n lastStatusSent = now;\n sendStatus();\n }\n\n \/\/ incoming commands\n while (NowSerial.available() >= (int)sizeof(WorkerCommandPacket)) {\n WorkerCommandPacket cmd;\n NowSerial.readBytes((uint8_t*)&cmd, sizeof(cmd));\n applyCommand(cmd);\n }\n\n delay(1);\n}<\/pre>\n\u00a0<\/p>\n<\/div>\n
\n\n
- Define your own classes:\n
- e.g. for the h1 heading:
- Make global settings for existing HTML elements:\n
- If calling up the IP address is too cryptic for you, you can use
- Use
- Option 2a: Async WebServer and ESP-NOW Serial (“STA-only”)<\/a><\/li>\n
- More convenient with JavaScript<\/a><\/li>\n<\/ul>\n<\/li>\n
- Extended Hello World sketch<\/a><\/li>\n<\/ul>\n<\/li>\n
![\"Async](\"https:\/\/wolles-elektronikkiste.de\/wp-content\/uploads\/2025\/12\/3esp32_asw_espnow_st_only_complete.png\")
<\/a>