HOME ESP32 ESP8266 ESP32-CAM RASPBERRY PI MICROPYTHON RPi PICO ARDUINO REVIEWS

ESP32/ESP8266: Control Outputs with Web Server and a Physical Button Simultaneously

This tutorial shows how to control the ESP32 or ESP8266 outputs using a web server and a physical button simultaneously. The output state is updated on the web page whether it is changed via physical button or web server.

ESP32 ESP8266 NodeMCU: Control Outputs with Web Server and a Physical Button Simultaneously Arduino IDE

Recommended reading: Input Data on HTML Form ESP32/ESP8266 Web Server

The ESP32/ESP8266 boards will be programmed using Arduino IDE. So make sure you have these boards installed:

Project Overview

Let’s take a quick look at how the project works.

ESP32 ESP8266 NodeMCU Web Server With Physical Button Project Overview
  • The ESP32 or ESP8266 hosts a web server that allows you to control the state of an output;
  • The current output state is displayed on the web server;
  • The ESP is also connected to a physical pushbutton that controls the same output;
  • If you change the output state using the physical puhsbutton, its current state is also updated on the web server.

In summary, this project allows you to control the same output using a web server and a push button simultaneously. Whenever the output state changes, the web server is updated.

Schematic Diagram

Before proceeding, you need to assemble a circuit with an LED and a pushbutton. We’ll connect the LED to GPIO 2 and the pushbutton to GPIO 4.

Parts Required

Here’s a list of the parts to you need to build the circuit:

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

ESP32 Schematic

ESP32 Digital Input and Digital Output Schematic Circuit LED Pushbutton

ESP8266 NodeMCU Schematic

ESP8266 NodeMCU Digital Input and Digital Output Schematic Circuit LED Pushbutton

Installing Libraries – Async Web Server

To build the web server you need to install the following libraries:

These libraries aren’t available to install through the Arduino Library Manager, so you need to copy the library files to the Arduino Installation Libraries folder. Alternatively, in your Arduino IDE, you can go to Sketch > Include Library > Add .zip Library and select the libraries you’ve just downloaded.

ESP Web Server Code

Copy the following code to your Arduino IDE.

/*********
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-web-server-physical-button/
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*********/

// Import required libraries
#ifdef ESP32
  #include <WiFi.h>
  #include <AsyncTCP.h>
#else
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const char* PARAM_INPUT_1 = "state";

const int output = 2;
const int buttonPin = 4;

// Variables will change:
int ledState = LOW;          // the current state of the output pin
int buttonState;             // the current reading from the input pin
int lastButtonState = LOW;   // the previous reading from the input pin

// the following variables are unsigned longs because the time, measured in
// milliseconds, will quickly become a bigger number than can be stored in an int.
unsigned long lastDebounceTime = 0;  // the last time the output pin was toggled
unsigned long debounceDelay = 50;    // the debounce time; increase if the output flickers

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <title>ESP Web Server</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 3.0rem;}
    p {font-size: 3.0rem;}
    body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
    .switch {position: relative; display: inline-block; width: 120px; height: 68px} 
    .switch input {display: none}
    .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px}
    .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}
    input:checked+.slider {background-color: #2196F3}
    input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
  </style>
</head>
<body>
  <h2>ESP Web Server</h2>
  %BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) {
  var xhr = new XMLHttpRequest();
  if(element.checked){ xhr.open("GET", "/update?state=1", true); }
  else { xhr.open("GET", "/update?state=0", true); }
  xhr.send();
}

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var inputChecked;
      var outputStateM;
      if( this.responseText == 1){ 
        inputChecked = true;
        outputStateM = "On";
      }
      else { 
        inputChecked = false;
        outputStateM = "Off";
      }
      document.getElementById("output").checked = inputChecked;
      document.getElementById("outputState").innerHTML = outputStateM;
    }
  };
  xhttp.open("GET", "/state", true);
  xhttp.send();
}, 1000 ) ;
</script>
</body>
</html>
)rawliteral";

// Replaces placeholder with button section in your web page
String processor(const String& var){
  //Serial.println(var);
  if(var == "BUTTONPLACEHOLDER"){
    String buttons ="";
    String outputStateValue = outputState();
    buttons+= "<h4>Output - GPIO 2 - State <span id=\"outputState\"></span></h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"output\" " + outputStateValue + "><span class=\"slider\"></span></label>";
    return buttons;
  }
  return String();
}

String outputState(){
  if(digitalRead(output)){
    return "checked";
  }
  else {
    return "";
  }
  return "";
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);

  pinMode(output, OUTPUT);
  digitalWrite(output, LOW);
  pinMode(buttonPin, INPUT);
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

  // Send a GET request to <ESP_IP>/update?state=<inputMessage>
  server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    String inputParam;
    // GET input1 value on <ESP_IP>/update?state=<inputMessage>
    if (request->hasParam(PARAM_INPUT_1)) {
      inputMessage = request->getParam(PARAM_INPUT_1)->value();
      inputParam = PARAM_INPUT_1;
      digitalWrite(output, inputMessage.toInt());
      ledState = !ledState;
    }
    else {
      inputMessage = "No message sent";
      inputParam = "none";
    }
    Serial.println(inputMessage);
    request->send(200, "text/plain", "OK");
  });

  // Send a GET request to <ESP_IP>/state
  server.on("/state", HTTP_GET, [] (AsyncWebServerRequest *request) {
    request->send(200, "text/plain", String(digitalRead(output)).c_str());
  });
  // Start server
  server.begin();
}
  
void loop() {
  // read the state of the switch into a local variable:
  int reading = digitalRead(buttonPin);

  // check to see if you just pressed the button
  // (i.e. the input went from LOW to HIGH), and you've waited long enough
  // since the last press to ignore any noise:

  // If the switch changed, due to noise or pressing:
  if (reading != lastButtonState) {
    // reset the debouncing timer
    lastDebounceTime = millis();
  }

  if ((millis() - lastDebounceTime) > debounceDelay) {
    // whatever the reading is at, it's been there for longer than the debounce
    // delay, so take it as the actual current state:

    // if the button state has changed:
    if (reading != buttonState) {
      buttonState = reading;

      // only toggle the LED if the new button state is HIGH
      if (buttonState == HIGH) {
        ledState = !ledState;
      }
    }
  }

  // set the LED:
  digitalWrite(output, ledState);

  // save the reading. Next time through the loop, it'll be the lastButtonState:
  lastButtonState = reading;
}

View raw code

You just need to enter your network credentials (SSID and password) and the web server will work straight away. The code is compatible with both the ESP32 and ESP8266 boards and controls GPIO 2 – you can change the code to control any other GPIO.

How the Code Works

We’ve already explained in great details how web servers like this work in previous tutorials (DHT Temperature Web Server), so we’ll just take a look at the relevant parts for this project.

Network Credentials

As said previously, you need to insert your network credentials in the following lines:

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Button State and Output State

The ledState variable holds the LED output state. For default, when the web server starts, it is LOW.

int ledState = LOW; // the current state of the output pin

The buttonState and lastButtonState are used to detect whether the pushbutton was pressed or not.

int buttonState;            // the current reading from the input pin
int lastButtonState = LOW;  // the previous reading from the input pin

Button (web server)

We didn’t include the HTML to create the button on the the index_html variable. That’s because we want to be able to change it depending on the current LED state that can also be changed with the pushbutton.

So, we’ve create a placeholder for the button %BUTTONPLACEHOLDER% that will be replaced with HTML text to create the button later on the code (this is done in the processor() function).

<h2>ESP Web Server</h2>
%BUTTONPLACEHOLDER%

processor()

The processor() function replaces any placeholders on the HTML text with actual values. First, it checks whether the HTML texts contains any placeholders %BUTTONPLACEHOLDER%.

if(var == "BUTTONPLACEHOLDER"){

Then, call the outputState() function that returns the current output state. We save it in the outputStateValue variable.

String outputStateValue = outputState();

After that, use that value to create the HTML text to display the button with the right state:

buttons+= "<h4>Output - GPIO 2 - State <span id=\"outputState\"><span></h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"output\" " + outputStateValue + "><span class=\"slider\"></span></label>";

HTTP GET Request to Change Output State (JavaScript)

When you press the button, the toggleCheckbox() function is called. This function will make a request on different URLs to turn the LED on or off.

function toggleCheckbox(element) {
  var xhr = new XMLHttpRequest();
  if(element.checked){ xhr.open("GET", "/update?state=1", true); }
  else { xhr.open("GET", "/update?state=0", true); }
  xhr.send();
}

To turn on the LED, it makes a request on the /update?state=1 URL:

if(element.checked){ xhr.open("GET", "/update?state=1", true); }

Otherwise, it makes a request on the /update?state=0 URL.

HTTP GET Request to Update State (JavaScript)

To keep the output state updated on the web server, we call the following function that makes a new request on the /state URL every second.

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var inputChecked;
      var outputStateM;
      if( this.responseText == 1){ 
        inputChecked = true;
        outputStateM = "On";
      }
      else { 
        inputChecked = false;
        outputStateM = "Off";
      }
      document.getElementById("output").checked = inputChecked;
      document.getElementById("outputState").innerHTML = outputStateM;
    }
  };
  xhttp.open("GET", "/state", true);
  xhttp.send();
}, 1000 ) ;

Handle Requests

Then, we need to handle what happens when the ESP32 or ESP8266 receives requests on those URLs.

When a request is received on the root / URL, we send the HTML page as well as the processor.

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

The following lines check whether you received a request on the /update?state=1 or /update?state=0 URL and changes the ledState accordingly.

server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
  String inputMessage;
  String inputParam;
  // GET input1 value on <ESP_IP>/update?state=<inputMessage>
  if (request->hasParam(PARAM_INPUT_1)) {
    inputMessage = request->getParam(PARAM_INPUT_1)->value();
    inputParam = PARAM_INPUT_1;
    digitalWrite(output, inputMessage.toInt());
    ledState = !ledState;
  }
  else {
    inputMessage = "No message sent";
    inputParam = "none";
  }
  Serial.println(inputMessage);
  request->send(200, "text/plain", "OK");
});

When a request is received on the /state URL, we send the current output state:

server.on("/state", HTTP_GET, [] (AsyncWebServerRequest *request) {
  request->send(200, "text/plain", String(digitalRead(output)).c_str());
});

loop()

In the loop(), we debounce the pushbutton and turn the LED on or off depending on the value of the ledState variable.

digitalWrite(output, ledState);

Demonstration

Upload the code to your ESP32 or ESP8266 board.

Then, open the Serial Monitor at a baud rate of 115200. Press the on-board EN/RST button to get is IP address.

ESP32 ESP8266 NodeMCU Web Server IP Address Arduino IDE Serial Monitor

Open a browser on your local network, and type the ESP IP address. You should have access to the web server as shown below.

ESP32 ESP8266 NodeMCU Control Outputs with Web Server and a Physical Button Simultaneously Turn Off

You can toggle the button on the web server to turn the LED on.

ESP32 ESP8266 NodeMCU Control Outputs with Web Server and a Physical Button Simultaneously Turn On

You can also control the same LED with the physical pushbutton. Its state will always be updated automatically on the web server.

ESP32 Input Output Button Pressed LED On Arduino IDE

Watch the next quick video for a live demonstration:


Wrapping Up

In this tutorial you’ve learned how to control ESP32/ESP8266 outputs with a web server and a physical button at the same time. The output state is always updated whether it is changed via web server or with the physical button.

Other projects you may like:

Learn more about the ESP32 and ESP8266 with our resources:

Thanks for reading.



SMART HOME with Raspberry Pi ESP32 and ESP8266 Node-RED InfluxDB eBook

SMART HOME with Raspberry Pi, ESP32, ESP8266 [eBook]

Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »
Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »

Recommended Resources

Build a Home Automation System from Scratch » With Raspberry Pi, ESP8266, Arduino, and Node-RED.

Home Automation using ESP8266 eBook and video course » Build IoT and home automation projects.

Arduino Step-by-Step Projects » Build 25 Arduino projects with our course, even with no prior experience!

What to Read Next…


Enjoyed this project? Stay updated by subscribing our newsletter!

85 thoughts on “ESP32/ESP8266: Control Outputs with Web Server and a Physical Button Simultaneously”

  1. Hi, I am using your code for LED and simple web server. I have issue that ESP is disconnected from wifi after circa 3 days. Its happening on all devices. Any idea what it can be?

    Martin

    Reply

  2. This project is fantastic, it will be highly appreciated if the hard coding is avoided for
    WI-FI Credentials by using wi-fi manager

    Reply

  3. Nice! I had just done a very similar project using the AdvancedWebServer example, and range sliders to dim leds using both switches as well as a web page. Instead of XMLHttpRequest, I used ‘fetch’. I also used POST instead of GET to send data from the browser to the ESP32. I wouldn’t have been able to tackle this project without your earlier tutorials to give me the encouragement to try it. So, thanks!

    Reply

  4. Hi, i’am fan of all your projects. They are always very clear explained. I use arduino and the esp8266/esp32 already for a long time, but I’m very bad with internet and javascript. So do you have a example like this to have multiple switches on the page and the update from the esp to the page is given in a json format. So you can update all the switches in 1 go. Thanks in advance.

    Reply

  5. Hi
    I am trying to set this up using and ESP-01. I have tried the button on GPIO2 and 3. If the buttons are connected to the board at bootup, the webserver does not appear to start. If I unplug the button, boot the system up, I can then browse to the webserver. I plug the button in and eveything then works as it should. Not sure what I might be missing.

    Reply

  7. Hi Rui,
    Awesome Project.
    Wifi Manager does not support.
    How to modify code to use without SSID PW hard coding.

    Reply

  8. Hi Rui,
    very helpful project, thank you! Is it possible to update the output state on the web server whenever the switch is pressed using the interrupt function (and not checking the led state every second)?

    Reply

  9. Hello dear friend, wishing you many successes in everything, I love all your projects, they are always excellent, I am just starting with this interesting technological world and I think it is a marvel in this project, the control of outputs with a web server and a physical button simultaneously seems very good to me. The only thing that has been very difficult for me is to add other buttons so that I have 2 or more together with the physical buttons. Please, if you could guide me and help me with that, I appreciate it. Best regards. Jesus Eliecer Tineo Gamboa. Greetings in advance.

    Reply

  10. Hi Rui and Sara, I too have had great success this last month following your tutorials, thankyou, especially learning from and then modifying these tutorial examples:
    “ESP8266 Web Server with Arduino IDE” and
    “ESP32/ESP8266: Control Outputs with Web Server and a Physical Button Simultaneously”
    You have mentioned in the comments above that one of your readers has posted another tutorial about “web sockets”, but it does not use Arduino IDE. I too would be very keen to see you publish a tutorial in your teaching style please on web sockets and multiple inputs and outputs as I have tried to combine elements of the above two tutorials together, but just cant get there. Otherwise again, great content. Thankyou.

    Reply

  11. In this line, the HTML contains 3x span and only one terminating /span. Shouldn’t the second span be a terminating?
    buttons+= ”

    Output – GPIO 2 – State

    “;

    Reply

    • Hi.
      Yes, you are right.
      The second should be a closing span tag. The code is now fixed.
      Thanks for taking the time to let us know.
      Regards,
      Sara

      Reply

  12. How to update the webpage when a slider has changed state? The value is changed, and only if reload of page manually. How to do it automaticly?

    Reply

    • Hi.
      I’m sorry, but I didn’t understand your question.
      The state is automatically updated when you move the slider.
      What’s the web browser you’re using?
      This week we’ll be posting a new tutorial with another way to update the web page in all clients using websockets.
      So, stay tuned.
      Regards,
      Sara

      Reply

    • Hi Martin.
      We don’t delete comments.
      When you submit a comment for the first time, it is waiting approval.
      Only after we approve the comment, it will show up.
      We try to answer as many comments we can, but sometimes it is impossible to do that.
      We receive lots of messages every day and it can be hard to keep track of all of them.
      I hope you understand.
      Thanks for following our work.
      Regards,
      Sara

      Reply

  14. Okay. First, thank You for the Async Webserver. It seems usefull. I am setting the Async Webserver for an Esp8266, and MD-Parola slideshow. There are many sliders and one Button, in working condition. Then there is Table content with cells, to make the webpage look sorted. 20 variables are added through one input field and a numeric pulldown menu, because there are 20 lines to add, that the slideshow can do with.
    There is a table with cells, also making the page looking nice, but the String variables does not show at the webpage, though they are same variable types as one that is working. Is something blocking variables to reach, when inside table cells?

    Reply

  15. Well, by fideling around with the webpage by Async Webserver and the slideshow, the webpage is being observed by Google Chrome Browser. It is rare, but updates for Chrome can be later than the Edge Browser. The variable output from the Strings to the Slider messurement / status indication, sometimes stay out , until the Browser has been reloaded. Messure to update Browser on change received, is send at once optained, and not using sockets, and not repporting to any pinout, since its not needed to get around that way for this project. The script to provide a message what has been put to input field has also been removed. It should make the Browser send respond asap to the page, when change take place. So ill be happy for some new ideas, how to make the page update.

    Reply

  17. Hi all,
    I am trying to add more pairs of buttons and LEDs.
    Is it possible? I don’t understand the -setInterval (function () function.
    this statement – if (this.responseText == 1).
    How it’s working? What do we need to change if I want to add more pairs of buttons and LEDs.
    Thanks for the response.

    Reply

  18. Hi Sara,

    Is there any chance you might be able to do this same tutorial using micropython? There is a lot of interest in the community, but no reasonable examples that anyone seems to be able to find. People have been asking for an example like this in micropython for a few years (at least since 2016 based on my googling).

    Thank you!

    Reply

  19. Sara
    Como podría hacer para hacer funcionar estas funciones con la libreria SPIFFS
    Podrías hacer un ejemplo para analizarlo porfavor

    Reply

  20. Dear Rui and Sara!
    Thank you for the wonderful tutorials.
    Everything is working.
    For this tutorial I would have a question. In this code the html is in the arduino code. I would like to put all html and javascript into a separate file (e.g. index html) and upload it to the SPIFFS (like in one of yours previouse tutorial before about spiffs). Is that possible to adjust this code so? I think the %BUTTONPLACEHOLDER% / processor() part should be than modified somehow, or something…I dont know. Could you please give a few hints/advises which way to start to achieve my goal? Thank you in advance wishing all the best to you

    Reply

    • Hi Viktor.

      You can still use the processor.
      If you have the HTML with placeholders, make sure you serve it like this:

      server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request){
      request->send(SPIFFS, “/index.html”, “text/html”, false, processor);
      });

      I hope this helps.
      Regards,
      Sara

      Reply

  21. Same question repeat
    Hi all,
    I am trying to add more pairs of buttons and LEDs.
    Is it possible? I don’t understand the -setInterval (function () function.
    this statement – if (this.responseText == 1).
    How it’s working? What do we need to change if I want to add more pairs of buttons and LEDs.
    Thanks for the response.

    Reply

  22. Is there any easy way to swap those sliders to buttons? Say if I put buttons, with onclick event. I can not use onchange, because it doesn’t exist for buttons, nothing is changed, only clicked. In that case in XML HttpRequest how to check if it is clicked. Here you use if element checked. Can I use something as if element clicked?

    Reply

  25. Hi,
    This tutorial is amazing but i tried to implement with 4 leds and 4 more push button, but the code of the additional leds conflicts.
    Does anyone have a solution?
    Thanks

    Reply

  26. Hi. I tried using the LED_BUILTIN from ESP8266 board, that lights with low level. It seems simple to invert the signal in the “digitalWrite(output, ledState)” command. But it does not work. The web page keeps showing ON and OFF reversed. Any ideas on where to do this reversal? Thanks!!

    Reply

    • Hi Alessandro,
      i did it this way:
      – change all “digitalWrite(output, ledState)” to “digitalWrite(output, !ledState)”
      – change all “digitalRead(output)” to “!digitalRead(output)”
      – change these two lines:
      “digitalWrite(output, inputMessage.toInt());
      ledState = !ledState;”
      to:
      “ledState = inputMessage.toInt();
      digitalWrite(output, !ledState);”

      Reply

    • For anybody who might stumble accross this with the same problem:
      You might just have switched the values in the javascript section of the webcode:

      function toggleCheckbox(element) {
      var xhr = new XMLHttpRequest();
      if(element.checked){ xhr.open(“GET”, “/update?state=0”, true); }
      else { xhr.open(“GET”, “/update?state=1”, true); }
      xhr.send();

      replace the state=0 with state=1 and vice versa or just replace the original script section with above code, where this is already taken care of.

      Reply

  28. Hi and hope you guys are doing well.
    I opened the Serial Monitor at a baud rate of 115200 and pressed the on-board EN/RST button to get the IP address. The IP address is 10.1.1.138
    When I type this IP address into my Google chrome browser, the following message appears:

    This site can’t be reached
    10.1.1.138 took too long to respond.

    Try:

    Checking the connection
    Checking the proxy and the firewall
    Running Windows Network Diagnostics
    ERR_CONNECTION_TIMED_OUT

    Can you please tell me how to fix this issue?
    Thank you for your reply!

    Reply

    • Hi.
      Did you copy the IP address correctly?
      Is your ESP board on the same network as your web browser?
      Make sure the ESP board is relatively close to your router so that it gets a good wi-fi connection.
      Regards,
      Sara

      Reply

  29. Hi Sara and Rui, the tutorial is excelent! congrat and thanks!!
    I want to change the push button for a switch button, in order to change de state if button is on “on” or “off” is it possible? Wich part of code must be modified?
    Thank you so much!

    Reply

  30. Hi Sara and Rui,
    I’ve noticed, that you’re still ignoring the questions about adding addititional buttons an LEDs/relais. So again. I would like to add additiona buttons/LEDs but I don’t have a clou how this can be done. I canged some part of the code, but nothing happens. Renamed the Buttonplacheholder for the additional Buttons and Buttonstates, but I don’t get it.
    If you can help with one example of a second button I think Iwill get it.
    Thank you for you tutorials
    Ralph

    Reply

    • Hi Ralph.
      At the moment, we don’t have any examples with multiple buttons.
      I’ll try to create that example soon.
      Regards,
      Sara

      Reply

      • hello, good morning, it would be great to be able to have several leds and relays to control, I have also tried to modify the code but I have not had good results, the excellent work of sara and rui is great and I am always aware of their wonderful projects, I hope they can carry out one like this soon add several buttons and relay for the control of various equipment greetings sincerely

        Reply

  31. Hello Sara and Rui, your website is excellent, especially this project. I would like to know how I can add more buttons to place more devices.

    Reply

  33. hello sara and rui could you add more buttons to this project is to connect it to a greenhouse system greetings.

    Reply

      • A verry nice tutorial. It works fine.
        I can use this in my project to control relais
        Is it possible to add more buttons to control more relais.
        I’m a newbee wit this code.
        Can you help me?

        Reply

      • Hi Sara
        I followed your on of your articles: ESP32/ESP8266: Control Outputs with Web Server and a Physical Button Simultaneously with great interesting.
        I do not have much(say: none) experience with writing code for a web Server but with your examples, which are clearly explained, I learned
        to read the working.
        Now I tried to add an extra(later on more) physical button (copy/paste/change)

        What I tried in you code:
        – I added a second line in:
        String processor(const String& var){
        outputStateValue = outputState1();
        buttons += ”

        Output – GPIO 2 – State

        “;
        outputStateValue = outputState2();
        buttons += ”

        Output – GPIO 19 – State

        “;

        and and an extra function:
        String outputState2() {
        // outputPin2 = 16
        if (digitalRead(outputPin2)) {
        return “checked”;
        } else {
        return “”;
        }
        return “”;
        }

        With some other changes it worked: I can control the 2-nd led on the web-side page!!!
        Only the refreshment of the webside-page, when I change the status of the second physical button(i.e buttonPin2 = 16;), does not work.

        Is it due that the code in Setinterval is made for reading one button?

        setInterval(function ( ) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        var inputChecked;
        var outputStateM;
        if( this.responseText == 1){
        inputChecked = true;
        outputStateM = “On”;
        }
        else {
        inputChecked = false;
        outputStateM = “Off”;
        }
        document.getElementById(“output”).checked = inputChecked;
        document.getElementById(“outputState”).innerHTML = outputStateM;
        }
        };
        xhttp.open(“GET”, “/state”, true);
        xhttp.send();
        }, 1000 ) ;

        At this point my knowledge is stoped.
        I think that this function is not build for more buttons.
        It only returns the content for:
        document.getElementById(“output”).checked = inputChecked;
        document.getElementById(“outputState”).innerHTML = outputStateM;

        To return the content the second button to like
        document.getElementById(“output2”).checked = inputChecked;
        document.getElementById(“outputState2”).innerHTML = outputStateM;
        I think that I have to select in the code first the right ID when I read “this.responseText”

        How do I do that if my thought for the change to more than one button are correct?
        Thanks for your advice anyway

        Reply

        • Hi.

          If you want to put everything on the same function, the response must contain the states for the multiple buttons. Then, in that javascript function you must handle how you get the state for each button (maybe sending a JSON with the GPIO number and corresponding state).

          Regards,
          Sara

          Reply

      • Hi, Sara and Rui! Thank you for all your hard work! Your tutorials are invaluable!
        I just wanted to mention that the question of multiple buttons is still relevant and also to ask if there is any progress? Regards

        Reply

        • Hi.
          I’m sorry.
          I didn’t make that yet.
          I already have post lined up for the next month.
          Maybe in July… but I can’t promise it..
          Regards,
          Sara

          Reply

          • Hi Sara, I’m keen too please to see this tutorial and the web socket tutorial have added a code example of multiple buttons. Its easy to learn and modify your code but knowing exactly what to change or add, and what not to touch to expand beyond one IO is difficult. Thankyou.

  34. Hello, thank you for putting up this great resource, I really like your work!
    I have however a question, I would like to display a count of how many times i have pressed the physical button but I cant seem to figure this out. Could you point me to another resource where I could find how to solve this?
    Thank you in advance for your time, and have a great weekend!

    Reply

  35. Is it possible to have one single webpage-monitor (the client) where we can see the status of the LEDs of multiple ESP32 devices? (each ESP32 device will have only one button so if clicked the LED of that device will light up and only the particular slider switch will change state, not the rest switches that the monitor shows off.)

    So, each ESP32 device could affect only its own slider switch from the single webpage (many switches) via pressing its button and of course lighting up at the same time its LED.

    Reply

  36. A verry nice tutorial. It works fine.
    I can use this in my project to control relais
    Is it possible to add more buttons to control more relais.
    I’m a newbee wit this code.
    Can you help me?

    Reply

  37. I don’t know why the signal from the physical button can be sent to the Webserver and how it can synchronize with the button on the Web. Can you explain it to me? pls

    Reply

  38. I have an esp32 with a led light that has a sequence once it is triggered. The sequence runs for 30 seconds then stops. Right now I trigger it from my web interface

    I want to add a hardwired momentary push button.

    So when you push the button and release the button it signals the esp32 to begin the same as sequence currently that is ran from my web interface.

    Lolin esp d32 is what I am using specifically. So what pins would I connect the 2 wires to for the push button

    So specifically . What lines do I add to my existing code and where? Can I add a few lines before/after the code where my virtual push button is ? Or what?

    And what does this code look like any help would. Be great.

    Reply

  39. i made control LEDs using QR Code with ESP32 Cam, I’m trying to get it activated by QR and Web synchronously, I tried to combine the two codes but failed, can you help me

    Reply

  40. hello, this code is so helpful.
    but i want to know if there is any tutorial on how to store the toggle switch data (on/off) in mysql database (0/1)

    Reply

  41. Hello, the code does not compile in VS Code with PlatformIO
    error:

    src/main.cpp:105:28: error: ‘outputState’ was not declared in this scope
    String outputStateValue = outputState();
    ^~~~~~~~~~~
    src/main.cpp:105:28: note: suggested alternative: ‘OutputState’
    String outputStateValue = outputState();
    ^~~~~~~~~~~
    OutputState
    *** [.pio\build\esp32dev\src\main.cpp.o] Error 1

    Can you help me?

    Reply

    • You need to move the function String outputState() above the function String processor(const String& var) then it should compile in the example above the function String processor(const String& var) is calling a not yet defined function

      Reply

  42. Hi – What is the easiest way to duplicate the controls on the webpage if I wanted to create like 10 toggle buttons in a grid? 5 top / 5 bottom

    Reply

Leave a Comment

Download Our Free eBooks and Resources

Get instant access to our FREE eBooks, Resources, and Exclusive Electronics Projects by entering your email address below.