To Build NODEMCU ESP32 Web Server

Hello i would like to add 4 buttons in html code for running leds, i have tried but it didn't work. Whatever i do additional 2 buttons doesn't show in web server, when i change the code only 2 buttons show and work . I don't have enough knowledge about html. I would be very happy if you could help me.

Code:

#include <WiFi.h>
#include <WebServer.h>

/* Put your SSID & Password */
const char* ssid = "ESP32";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

WebServer server(80);

uint8_t LED1pin = 4;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

uint8_t LED3pin = 16;
bool LED3status = LOW;

uint8_t LED4pin = 17;
bool LED4status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);
  pinMode(LED3pin, OUTPUT);
  pinMode(LED4pin, OUTPUT);
  
  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
  
  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.on("/led3on", handle_led3on);
  server.on("/led3off", handle_led3off);
  server.on("/led4on", handle_led4on);
  server.on("/led4off", handle_led4off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
  
  if(LED3status)
  {digitalWrite(LED3pin, HIGH);}
  else
  {digitalWrite(LED3pin, LOW);}
    
  if(LED4status)
  {digitalWrite(LED4pin, HIGH);}
  else
  {digitalWrite(LED4pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}
void handle_led3on() {
  LED1status = HIGH;
  Serial.println("GPIO16 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED4status)); 
}

void handle_led3off() {
  LED1status = LOW;
  Serial.println("GPIO16 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED4status)); 
}

void handle_led4on() {
  LED2status = HIGH;
  Serial.println("GPIO17 Status: ON");
  server.send(200, "text/html", SendHTML(LED3status,true)); 
}

void handle_led4off() {
  LED2status = LOW;
  Serial.println("GPIO17 Status: OFF");
  server.send(200, "text/html", SendHTML(LED3status,false)); 
}


void handle_NotFound(){
  server.send(404, "text/plain", "Not found");

}

String SendHTML(uint8_t led1stat,uint8_t led2stat, uint8_t led3stat,uint8_t led4stat){
  String ptr1 = "<!DOCTYPE html> <html>\n";
  ptr1 +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr1 +="<title>LED CONTROL</title>\n";
  ptr1 +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr1 +="body{margin-top: 30px;} h1 {color: #444444;margin: 30px auto 30px;} h3 {color: #444444;margin-bottom: 30px;}\n";
  ptr1 +=".button {display: block;width: 40px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr1 +=".button-on {background-color: #3498db;}\n";
  ptr1 +=".button-on:active {background-color: #2980b9;}\n";
  ptr1 +=".button-off {background-color: #34495e;}\n";
  ptr1 +=".button-off:active {background-color: #2c3e50;}\n";
  ptr1 +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr1 +="</style>\n";
  ptr1 +="</head>\n";
  ptr1 +="<body>\n";
  ptr1 +="<h1>ESP32 Web Server</h1>\n";
  ptr1 +="<h3>NODEMCU CONTROL</h3>\n";
  
  if(led1stat)
  {ptr1 +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr1 +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}
  
  if(led3stat)
  {ptr1 +="<p>LED3 Status: ON</p><a class=\"button button-off\" href=\"/led3off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED3 Status: OFF</p><a class=\"button button-on\" href=\"/led3on\">ON</a>\n";}

  if(led4stat)
  {ptr1 +="<p>LED4 Status: ON</p><a class=\"button button-off\" href=\"/led4off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED4 Status: OFF</p><a class=\"button button-on\" href=\"/led4on\">ON</a>\n";}
  
  ptr1 +="</body>\n";
  ptr1 +="</html>\n";
  return ptr1;
}

String SendHTML(uint8_t led1stat,uint8_t led2stat, uint8_t led3stat,uint8_t led4stat)

if that is the function, you are not passing all arguments when you call

SendHTML(LED3status,false)); 

In fact, you pass 'LED3status' to 'led1stat' and 'led2stat' = false
The HTML seems ok, but the code does not compile.
What you probably meant to do is something like this

String SendHTML(uint8_t lednr, bool state)

and then decide which ledstate you want to pass.
or you can just pass all states when you call the function.

Why do the LED3 functions change 'LED1status' and why do they send 'LED4status'?!? Similarly, the LED4 functions change 'LED2status' and send 'LED3status';

I've not seen an ESP32 Node - can you provide a link to the exact board you are using please, as hardware differences can mean some I/O connections are not implemented.
eg

I fixed the errors but when i add the LED3status and LED4status to string function and server it doesn't work, i get "too few arguments to function 'String SendHTML(uint8_t, uint8_t, uint8_t, uint8_t)' " error.

  server.send(200, "text/html", SendHTML(LED4status,false));
String SendHTML(uint8_t LED1status,uint8_t LED2status,uint8_t LED3status,uint8_t LED4status)

What should i do to work it? Is it necessary to divide the string function to run, then how should i write the html code in two string? I couldn't run it with two string function, it didn't show four buttons.

main code:

#include <WiFi.h>
#include <WebServer.h>

/* Put your SSID & Password */
const char* ssid = "ESP32";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

WebServer server(80);

uint8_t LED1pin = 4;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

uint8_t LED3pin = 16;
bool LED3status = LOW;

uint8_t LED4pin = 17;
bool LED4status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);
  pinMode(LED3pin, OUTPUT);
  pinMode(LED4pin, OUTPUT);
  
  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
  
  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.on("/led3on", handle_led3on);
  server.on("/led3off", handle_led3off);
  server.on("/led4on", handle_led4on);
  server.on("/led4off", handle_led4off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
  
  if(LED3status)
  {digitalWrite(LED3pin, HIGH);}
  else
  {digitalWrite(LED3pin, LOW);}
    
  if(LED4status)
  {digitalWrite(LED4pin, HIGH);}
  else
  {digitalWrite(LED4pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED1status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED1status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED2status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED2status,false)); 
}
void handle_led3on() {
  LED3status = HIGH;
  Serial.println("GPIO16 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED3status)); 
}

void handle_led3off() {
  LED3status = LOW;
  Serial.println("GPIO16 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED3status)); 
}

void handle_led4on() {
  LED4status = HIGH;
  Serial.println("GPIO17 Status: ON");
  server.send(200, "text/html", SendHTML(LED4status,true)); 
}

void handle_led4off() {
  LED4status = LOW;
  Serial.println("GPIO17 Status: OFF");
  server.send(200, "text/html", SendHTML(LED4status,false)); 
}


void handle_NotFound(){
  server.send(404, "text/plain", "Not found");

}

String SendHTML(uint8_t LED1status,uint8_t LED2status,uint8_t LED3status,uint8_t LED4status){
  String ptr1 = "<!DOCTYPE html> <html>\n";
  ptr1 +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr1 +="<title>LED CONTROL</title>\n";
  ptr1 +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr1 +="body{margin-top: 30px;} h1 {color: #444444;margin: 30px auto 30px;} h3 {color: #444444;margin-bottom: 30px;}\n";
  ptr1 +=".button {display: block;width: 40px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr1 +=".button-on {background-color: #3498db;}\n";
  ptr1 +=".button-on:active {background-color: #2980b9;}\n";
  ptr1 +=".button-off {background-color: #34495e;}\n";
  ptr1 +=".button-off:active {background-color: #2c3e50;}\n";
  ptr1 +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr1 +="</style>\n";
  ptr1 +="</head>\n";
  ptr1 +="<body>\n";
  ptr1 +="<h1>ESP32 Web Server</h1>\n";
  ptr1 +="<h3>NODEMCU CONTROL</h3>\n";
  
  if(LED1status)
  {ptr1 +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(LED2status)
  {ptr1 +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}
  
  if(LED3status)
  {ptr1 +="<p>LED3 Status: ON</p><a class=\"button button-off\" href=\"/led3off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED3 Status: OFF</p><a class=\"button button-on\" href=\"/led3on\">ON</a>\n";}

  if(LED4status)
  {ptr1 +="<p>LED4 Status: ON</p><a class=\"button button-off\" href=\"/led4off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED4 Status: OFF</p><a class=\"button button-on\" href=\"/led4on\">ON</a>\n";}
  
  ptr1 +="</body>\n";
  ptr1 +="</html>\n";
  return ptr1;
}

Why are the arguments to SenfHTML() reversed between LED1/2Status and LED3/4Status?

How about yuo just do it like this

server.send(200, "text/html", SendHTML(LED1status, LED2status, LED3status, LED4status)); 

That should compile if you use that line consistently as a server.send() And like that you pass the LEDxstatus to the function sendHTML()
Of course there is no real need to pass those arguments since the variables LED1status are global, but this is the easiest fix to give you.

as a footnote

bool LED1status = LOW;

a boolean is either true or false, LOW & HIGH are integer values 0 & 1, It works just fine like that, but it is not quite correct.
Better change the type from 'bool' to 'int' or 'uint8_t'

As i said i get "too few arguments to function 'String SendHTML(uint8_t, uint8_t, uint8_t, uint8_t)'
" error, it doesn't work like that.

SendHTML() takes four arguments . Why do you keep calling it with two?!?

Can you give me an example of four arguments calling?

You call the SendHTML() function correctly in handle_OnConnect():

I fixed the all error but still get same error.

Here it is the last edith:

#include <WiFi.h>
#include <WebServer.h>

/* Put your SSID & Password */
const char* ssid = "ESP32";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

WebServer server(80);

uint8_t LED1pin = 4;
int LED1status = LOW;

uint8_t LED2pin = 5;
int LED2status = LOW;

uint8_t LED3pin = 16;
int LED3status = LOW;

uint8_t LED4pin = 17;
int LED4status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);
  pinMode(LED3pin, OUTPUT);
  pinMode(LED4pin, OUTPUT);
  
  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
  
  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.on("/led3on", handle_led3on);
  server.on("/led3off", handle_led3off);
  server.on("/led4on", handle_led4on);
  server.on("/led4off", handle_led4off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
  
  if(LED3status)
  {digitalWrite(LED3pin, HIGH);}
  else
  {digitalWrite(LED3pin, LOW);}
    
  if(LED4status)
  {digitalWrite(LED4pin, HIGH);}
  else
  {digitalWrite(LED4pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF | GPIO16 Status: OFF | GPIO17 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED1status,false,LED2status,false,LED3status,false,LED4status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED1status,false,LED2status,false,LED3status,false,LED4status)); 
}

void handle_led1off() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED1status,false,LED2status,false,LED3status,false,LED4status)); 
}

void handle_led2on() {
  LED1status = LOW;
  LED2status = HIGH;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status,false,LED1status,false,LED3status,false,LED4status)); 
}

void handle_led2off() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status,false,LED1status,false,LED3status,false,LED4status)); 
}
void handle_led3on() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = HIGH;
  LED4status = LOW;
  Serial.println("GPIO16 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED3status,false,LED2status,false,LED1status,false,LED4status)); 
}

void handle_led3off() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO16 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED3status,false,LED1status,false,LED2status,false,LED4status)); 
}

void handle_led4on() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = HIGH;
  Serial.println("GPIO17 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED4status,false,LED3status,false,LED2status,false,LED1status)); 
}

void handle_led4off() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO17 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED4status,false,LED3status,false,LED2status,false,LED1status)); 
}


void handle_NotFound(){
  server.send(404, "text/plain", "Not found");

}

String SendHTML(int LED1status,int LED2status,int LED3status,int LED4status){
  String ptr1 = "<!DOCTYPE html> <html>\n";
  ptr1 +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr1 +="<title>LED CONTROL</title>\n";
  ptr1 +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr1 +="body{margin-top: 30px;} h1 {color: #444444;margin: 30px auto 30px;} h3 {color: #444444;margin-bottom: 30px;}\n";
  ptr1 +=".button {display: block;width: 40px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr1 +=".button-on {background-color: #3498db;}\n";
  ptr1 +=".button-on:active {background-color: #2980b9;}\n";
  ptr1 +=".button-off {background-color: #34495e;}\n";
  ptr1 +=".button-off:active {background-color: #2c3e50;}\n";
  ptr1 +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr1 +="</style>\n";
  ptr1 +="</head>\n";
  ptr1 +="<body>\n";
  ptr1 +="<h1>ESP32 Web Server</h1>\n";
  ptr1 +="<h3>NODEMCU CONTROL</h3>\n";
  
  if(LED1status)
  {ptr1 +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(LED2status)
  {ptr1 +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}
  
  if(LED3status)
  {ptr1 +="<p>LED3 Status: ON</p><a class=\"button button-off\" href=\"/led3off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED3 Status: OFF</p><a class=\"button button-on\" href=\"/led3on\">ON</a>\n";}

  if(LED4status)
  {ptr1 +="<p>LED4 Status: ON</p><a class=\"button button-off\" href=\"/led4off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED4 Status: OFF</p><a class=\"button button-on\" href=\"/led4on\">ON</a>\n";}
  
  ptr1 +="</body>\n";
  ptr1 +="</html>\n";
  return ptr1;
}

You are passing 8 arguments to a function that takes 4 arguments. Why did you change the one place where you were calling the function correctly?!?

1 Like