0

I'm programming a ESP32 modue and I have a code that generates an Access Point and displays an html with two buttons that changes the state of 3 leDs. I want to insert a button that calls a second html code that is within (void engine() ) and on this page has the following text ( This page turns on the engine ). Detail: The page that is already displaying in the browser has to be updated by the new html code of the second html page. How can I change my Code to get this third button ?

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

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

WiFiServer server(80);

String header;

String output26State = "off";
String output27State = "off";

const int output26 = 26;
const int output27 = 27;


void setup() 
{
 Serial.begin(115200);

 pinMode(output26, OUTPUT);
 pinMode(output27, OUTPUT);

 digitalWrite(output26, LOW);
 digitalWrite(output27, LOW);

 WiFi.softAP(ssid, password);
 delay(10);

 IPAddress IP = WiFi.softAPIP();
 Serial.print("IP Address: ");
 Serial.println(IP);

 server.begin();

}

void one()
{
  WiFiClient client = server.available();
  client.println("<h1>Page One</h1>");
  client.println("<p><a href=\"/two\"><button class=\"button\">Pag Two 2</button></a></p>");
  client.println();
}

void two()
{
  WiFiClient client = server.available();   // Listen for incoming clients
  client.println("<body><h1>Page Two</h1>");
  client.println("<p><a href=\"/one\"><button class=\"button\">Page One 1</button></a></p>");
  client.println();
}

void loop()
{
 WiFiClient client = server.available();   // Listen for incoming clients

 if (client) 
 {                             // If a new client connects,
  Serial.println("New Client.");          // print a message out in the serial port
  String currentLine = "";                // make a String to hold incoming data from the client
  while (client.connected())              // loop while the client's connected
  {
   if (client.available())               // if there's bytes to read from the client,
   {
    char c = client.read();             // read a byte, then
    Serial.write(c);                    // print it out the serial monitor
    header += c;
    if (c == '\n')                      // if the byte is a newline character
    {
      if (currentLine.length() == 0)
      {

       client.println("HTTP/1.1 200 OK");
       client.println("Content-type:text/html");
       client.println("Connection: close");
       client.println("<!DOCTYPE html><html>");
       client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
       client.println("<link rel=\"icon\" href=\"data:,\">");
       client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
       client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
       client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
       client.println(".button2 {background-color: #555555;}</style></head>");
       client.println("<body>");
       client.println();

       if (header.indexOf("GET /one") >= 0) 
       {
        Serial.println("Page One");
        output26State = "on";
        digitalWrite(output26, HIGH);
        one();
       }
       else if (header.indexOf("GET /two") >= 0) 
       {
        Serial.println("Page Two");
        output26State = "off";
        digitalWrite(output26, LOW);
        two();
       }
       client.println("<p><a href=\"/two\"><button class=\"button\">Page Two</button></a></p>");
       client.println("</body></html>");
       client.println();
       // Break out of the while loop
       break;         
      } 
      else // if you got a newline, then clear currentLine
      { 
        currentLine = "";
      }
    } 
    else if (c != '\r')      // if you got anything else but a carriage return character,
    {
      currentLine += c;      // add it to the end of the currentLine
    }
  }
}

 header = "";
 client.stop();
 Serial.println("Client OFF.");
 }

}

Thank You

  • Did I understand you correctly? You want a button that links to another page and at the same action you want to toggle (or only turn on) the engine? – Sim Son Jan 23 at 18:51
  • why don't you use the same html code as the other two buttons? ... just make the necessary changes to make the code unique – jsotola Jan 23 at 19:28
  • 369/5000 I'm sorry, I didn't express myself very well, let's simplify my doubts. For example, in my code there is (void one ()) and (void two ()). I want to insert a button that calls (void one ()) and insert an html code inside (void one ()), when (void one ()) is called it displays the html replacing the code of the main page that is inside (void loop ()). – Code Maker Jan 23 at 21:10
  • this is an XY problem ... you are asking for help with what you consider to be a solution to your problem, instead of asking for help with the problem ... there are other more effective ways to update a web page ... google arduino html button led ... that will show you how to interact between a web page and a function ... here is one of the hits that may help startingelectronics.org/articles/arduino/… – jsotola Jan 24 at 0:13
  • you could have 3 buttons on a webpage and simply make one or more of them invisible ... that way you would not have to reload the web page – jsotola Jan 24 at 0:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.