arduino ide Multiple html pages
Posted: Tue Feb 12, 2019 6:18 pmHello 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
joseph
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();
}