Client program to access a multi web page
Posted: Sat Nov 07, 2020 7:53 amI'm trying to create client program on ESP8266 to respond with multiple html web page; when a client make a button selection. Basically a different page for different set of LED controls. I'm using the WiFiClient client to create the connection to the server. However I do not understand why new html web pages cannot be triggered depending on the connection from the client. The server keep hosting the default html page.
Please refer below to my codes below.
=======================================
#include <ESP8266WiFi.h>
char ssid[] = "xxxxx"; // your network SSID (name)
char passwd[] = "xxxxx"; // your network password
WiFiServer server(80);
String header = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
String html_1 = R"=====(
<!DOCTYPE html>
<html>
<head>
<style>
body {font-size:140%; }
#main {display: table; margin: auto; padding: 0 5px 0 5px; }
h2 {text-align:center; }
input[type="button2"] { width: 4em; font-size: 50%; }
.green { background-color: #50FF50; }
.red { background-color: #FF5050; }
table {width: 100%; }
</style>
<script>
function switchmode1()
{
var button_mode1 = document.getElementById("man_button").style.background;
if (button_mode1="#FF5050") //red
{
document.getElementById("man_button").style.background = "#50FF50";
document.getElementById("timer_button").style.background = "#FF5050";
ajaxLoad('L38');
}
}
function switchmode2()
{
var button_mode2 = document.getElementById("timer_button").style.background;
if (button_mode2="#FF5050") //red
{
document.getElementById("man_button").style.background = "#FF5050";
document.getElementById("timer_button").style.background = "#50FF50";
ajaxLoad('L39');
}
}
var ajaxRequest = null;
if (window.XMLHttpRequest) { ajaxRequest =new XMLHttpRequest(); }
else { ajaxRequest =new ActiveXObject("Microsoft.XMLHTTP"); }
function ajaxLoad(ajaxURL)
{
if(!ajaxRequest){ alert("AJAX is not supported."); return; }
ajaxRequest.open("GET",ajaxURL,true);
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4 && ajaxRequest.status==200)
{
var ajaxResult = ajaxRequest.responseText;
}
}
ajaxRequest.send();
}
</script>
<title>LED Control</title>
</head><body> <div id='main'> <h2>LED Control</h2>
<table id = "controls">
<tr><td width="70%">Mode</td>)=====";
String html_2 = R"=====(
<td> <input type='button2' id='man_button' value='Manual' class='red' onclick='switchmode1()' /><input type='button2' id='timer_button' value='Timer' class='green' onclick='switchmode2()' /> </td></tr>)=====";
String html_3 = R"=====(
<tr> <td >LED 3</td><td> <input value='OFF'/></td></tr>)=====";
String html_4 = R"=====(
<tr> <td >LED 4</td><td> <input value='OFF'/></td></tr>)=====";
String html_5 = R"=====(
<tr><td >LED 5</td><td> <input value='OFF'/></td></tr>)=====";
String html_7 = R"=====(
</table> </div></body></html>)=====";
void setup()
{
Serial.begin(115200);
// Connect to a WiFi network
WiFi.begin(ssid, passwd);
while (WiFi.status() != WL_CONNECTED)
{
Serial.print(".");
delay(500);
}
Serial.print("Connected to ");Serial.println(ssid);
Serial.print("IP address:");
Serial.println(WiFi.localIP());
server.begin();
}
void loop()
{
String request = "";
// Check if a client has connected
WiFiClient client = server.available();
delay (10);
while (client)
{
// Read the first line of the request
request = client.readStringUntil('\r');
Serial.print("request: "); Serial.println(request);
if ( request.indexOf("L38") > 0 )
{
Serial.println("Received L38");
client.flush();
client.print( header );
client.print( html_1 );
client.print( html_2 );
client.print( html_3 ); //LED3 only
client.print( html_7 );
delay(5);
client.println();
client.stop();
break;
}
else if ( request.indexOf("L39") > 0 )
{
Serial.println("Received L39");
client.flush();
client.print( header );
client.print( html_1 );
client.print( html_2 );
client.print( html_4 ); //LED4 only
client.print( html_7 );
delay(5);
client.println();
client.stop();
break;
}
else
{
Serial.println("... else");
client.flush();
client.print( header );
client.print( html_1 );
client.print( html_2 );
client.print( html_3 ); //LED3
client.print( html_4 ); //LED4
client.print( html_5 ); //LED5
client.print( html_7 );
delay(5);
client.println();
client.stop();
break;
}
}
}
===========================
Note that when a new GET is none, I want to enable different set of LED html controls. Howeve the web server does not want to create the new web page selected. For example... when "GET /L38 HTTP/1.1" and "GET /39 HTTP/1.1", only the specific LED html strings were not display. It kept displaying LED controls from the original web page.
I want the server to host a different html page that changes depending on the selection from GET. There must be something I'm doing wrong. Appreciate inputs here.
regards
Please refer below to my codes below.
=======================================
#include <ESP8266WiFi.h>
char ssid[] = "xxxxx"; // your network SSID (name)
char passwd[] = "xxxxx"; // your network password
WiFiServer server(80);
String header = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
String html_1 = R"=====(
<!DOCTYPE html>
<html>
<head>
<style>
body {font-size:140%; }
#main {display: table; margin: auto; padding: 0 5px 0 5px; }
h2 {text-align:center; }
input[type="button2"] { width: 4em; font-size: 50%; }
.green { background-color: #50FF50; }
.red { background-color: #FF5050; }
table {width: 100%; }
</style>
<script>
function switchmode1()
{
var button_mode1 = document.getElementById("man_button").style.background;
if (button_mode1="#FF5050") //red
{
document.getElementById("man_button").style.background = "#50FF50";
document.getElementById("timer_button").style.background = "#FF5050";
ajaxLoad('L38');
}
}
function switchmode2()
{
var button_mode2 = document.getElementById("timer_button").style.background;
if (button_mode2="#FF5050") //red
{
document.getElementById("man_button").style.background = "#FF5050";
document.getElementById("timer_button").style.background = "#50FF50";
ajaxLoad('L39');
}
}
var ajaxRequest = null;
if (window.XMLHttpRequest) { ajaxRequest =new XMLHttpRequest(); }
else { ajaxRequest =new ActiveXObject("Microsoft.XMLHTTP"); }
function ajaxLoad(ajaxURL)
{
if(!ajaxRequest){ alert("AJAX is not supported."); return; }
ajaxRequest.open("GET",ajaxURL,true);
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4 && ajaxRequest.status==200)
{
var ajaxResult = ajaxRequest.responseText;
}
}
ajaxRequest.send();
}
</script>
<title>LED Control</title>
</head><body> <div id='main'> <h2>LED Control</h2>
<table id = "controls">
<tr><td width="70%">Mode</td>)=====";
String html_2 = R"=====(
<td> <input type='button2' id='man_button' value='Manual' class='red' onclick='switchmode1()' /><input type='button2' id='timer_button' value='Timer' class='green' onclick='switchmode2()' /> </td></tr>)=====";
String html_3 = R"=====(
<tr> <td >LED 3</td><td> <input value='OFF'/></td></tr>)=====";
String html_4 = R"=====(
<tr> <td >LED 4</td><td> <input value='OFF'/></td></tr>)=====";
String html_5 = R"=====(
<tr><td >LED 5</td><td> <input value='OFF'/></td></tr>)=====";
String html_7 = R"=====(
</table> </div></body></html>)=====";
void setup()
{
Serial.begin(115200);
// Connect to a WiFi network
WiFi.begin(ssid, passwd);
while (WiFi.status() != WL_CONNECTED)
{
Serial.print(".");
delay(500);
}
Serial.print("Connected to ");Serial.println(ssid);
Serial.print("IP address:");
Serial.println(WiFi.localIP());
server.begin();
}
void loop()
{
String request = "";
// Check if a client has connected
WiFiClient client = server.available();
delay (10);
while (client)
{
// Read the first line of the request
request = client.readStringUntil('\r');
Serial.print("request: "); Serial.println(request);
if ( request.indexOf("L38") > 0 )
{
Serial.println("Received L38");
client.flush();
client.print( header );
client.print( html_1 );
client.print( html_2 );
client.print( html_3 ); //LED3 only
client.print( html_7 );
delay(5);
client.println();
client.stop();
break;
}
else if ( request.indexOf("L39") > 0 )
{
Serial.println("Received L39");
client.flush();
client.print( header );
client.print( html_1 );
client.print( html_2 );
client.print( html_4 ); //LED4 only
client.print( html_7 );
delay(5);
client.println();
client.stop();
break;
}
else
{
Serial.println("... else");
client.flush();
client.print( header );
client.print( html_1 );
client.print( html_2 );
client.print( html_3 ); //LED3
client.print( html_4 ); //LED4
client.print( html_5 ); //LED5
client.print( html_7 );
delay(5);
client.println();
client.stop();
break;
}
}
}
===========================
Note that when a new GET is none, I want to enable different set of LED html controls. Howeve the web server does not want to create the new web page selected. For example... when "GET /L38 HTTP/1.1" and "GET /39 HTTP/1.1", only the specific LED html strings were not display. It kept displaying LED controls from the original web page.
I want the server to host a different html page that changes depending on the selection from GET. There must be something I'm doing wrong. Appreciate inputs here.
regards