arduino ide Multiple html pages

Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

 Reply

User avatar

Re: arduino ide Multiple html pages

By rudy
- Tue Feb 12, 2019 11:01 pm #80548 I took one of my form examples and I added another page to it.

Look at this in the setup(). The first parameter is the available page at your IP, the second is the content.
Code: Select all  webserver.on("/", handleRoot);
  webserver.on("/save", handleSave);
  webserver.on("/example", handleExample);

  webserver.onNotFound(handleNotFound);  // this is a special case, but still a webpage


These are simple pages. They are separate, no links to other pages. That is html code and not really a ESP8266 web server detail. The ESP8266 gets a request and handles it, provides the content if it has it.

If would like to have given you more, different examples, but this was all I had time for.


Code: Select all//  http://www.esp8266.com/viewtopic.php?f=8&t=4897&start=5

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

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

//const char* ssid = "esp-net";  //  your network SSID (name)
//const char* password = "123456789";   // your network password

ESP8266WebServer webserver(80);

//---------------------------------------------------------
static const char PROGMEM INDEX_HTML[] = R"rawliteral( 
<!DOCTYPE html>
<html>
<head>
<title>Clock Settings</title>
</head>
<body>
<form method="post" action="/save" >
Turn on time:<br><input name="onTime" type="text" size="16" value="" ><br><br>
Turn off time:<br><input name="offTime" type="text" size="16" value="" ><br><br>
<input type="submit" name="clk_action" value="accept">
</form>
</body>
</html>
)rawliteral";

//---------------------------------------------------------
void handleRoot() {
  webserver.send(200, "text/html", INDEX_HTML);
}

//---------------------------------------------------------
void handleNotFound() {
  webserver.send(404, "text/plain", "Page not found ...");
}

//---------------------------------------------------------
void handleSave() {
  String str = "Settings Saved ...\r\n";
 
  Serial.print("number of arguments ");
  Serial.println(webserver.args());                    // number of arguments
 
  if (webserver.args() > 0 ) {
    for ( uint8_t i = 0; i < webserver.args(); i++ ) {
      str += webserver.argName(i) + " = " + webserver.arg(i) + "\r\n";
     
      Serial.println("Arg "+ String(i)+"="+ webserver.argName(i));     
      Serial.println("Arg "+ String(i)+"="+ webserver.arg(i));
    }
  }
  webserver.send(200, "text/plain", str.c_str());
}


//---------------------------------------------------------
static const char PROGMEM EXAMPLE_HTML[] = R"rawliteral(
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                color: #434343;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                font-size: 14px;
                line-height: 1.42857142857143;
                padding: 20px;
            }

            .container {
                margin: 0 auto;
                max-width: 400px;
            }

            form .field-group {
                box-sizing: border-box;
                clear: both;
                padding: 4px 0;
                position: relative;
                margin: 1px 0;
                width: 100%;
            }

            form .field-group > label {
                color: #757575;
                display: block;
                margin: 0 0 5px 0;
                padding: 5px 0 0;
                position: relative;
                word-wrap: break-word;
            }

            input[type=text] {
                background: #fff;
                border: 1px solid #d0d0d0;
                border-radius: 2px;
                box-sizing: border-box;
                color: #434343;
                font-family: inherit;
                font-size: inherit;
                height: 2.14285714em;
                line-height: 1.4285714285714;
                padding: 4px 5px;
                margin: 0;
                width: 100%;
            }

            input[type=text]:focus {
                border-color: #4C669F;
                outline: 0;
            }

            .button-container {
                box-sizing: border-box;
                clear: both;
                margin: 1px 0 0;
                padding: 4px 0;
                position: relative;
                width: 100%;
            }

            button[type=submit] {
                box-sizing: border-box;
                background: #f5f5f5;
                border: 1px solid #bdbdbd;
                border-radius: 2px;
                color: #434343;
                cursor: pointer;
                display: inline-block;
                font-family: inherit;
                font-size: 14px;
                font-variant: normal;
                font-weight: 400;
                height: 2.14285714em;
                line-height: 1.42857143;
                margin: 0;
                padding: 4px 10px;
                text-decoration: none;
                vertical-align: baseline;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 style="text-align: center;">Wifi Details</h1>
            <form method="post" action="/">
                <div class="field-group">
                    <label>SSID</label>
                    <input name="ssid" type="text" length=32>
                </div>
                <div class="field-group">
                    <label>Password</label>
                    <input name="password" type="text" length=64>
                </div>
                <div class="button-container">
                    <button type="submit">Save</button
                </div>
            </form>
        </div>
    </body>
</html>
)rawliteral";

//---------------------------------------------------------
void handleExample() {
  webserver.send(200, "text/html", EXAMPLE_HTML);
}



//=========================================================
void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

 
  webserver.on("/", handleRoot);
  webserver.on("/save", handleSave);
  webserver.onNotFound(handleNotFound);
  webserver.on("/example", handleExample);
 
  webserver.begin();
  Serial.println("Web server has started");
}

void loop() {
  webserver.handleClient();
}
User avatar

Re: arduino ide Multiple html pages

By rudy
- Wed Feb 13, 2019 7:23 am #80553 I had a hard time with it also. And as you found, there are lots of examples of single pages on the internet. And with sketches with multiple pages they are usually complex and it makes it hard to see what is going on.
 Reply
Return to General Discussions