-->
Page 1 of 2

arduino ide Multiple html pages

PostPosted: Tue Feb 12, 2019 6:18 pm
by josephchrzempiec
Hello i been searching online how to do multiple html pages in the esp8266 and so far I'm lost. Can someone please help me out and point me in the right direction?



joseph

Re: arduino ide Multiple html pages

PostPosted: Tue Feb 12, 2019 11:01 pm
by rudy
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();
}

Re: arduino ide Multiple html pages

PostPosted: Tue Feb 12, 2019 11:41 pm
by josephchrzempiec
Hello Thank you so much for that. It helps me a lot. Been trying to figure it out for a few days now almost banged my head on the desk.

Re: arduino ide Multiple html pages

PostPosted: Wed Feb 13, 2019 7:23 am
by rudy
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.