ESP-01 GPIO Web page not control and change State Button
Posted: Sun Jul 28, 2019 3:01 am#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
ESP8266WebServer server(80);
//SSID and Password of your WiFi router
char* ssid = "NameWiFi";
char* password = "PassWiFi";;
String XML;
// Assign output variables to GPIO pins
const int output0 = 0;
const int output2 = 2;
const char webSite[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<SCRIPT>
var xml2 = "";
var xmlHttp=createXmlHttpObject();
function createXmlHttpObject(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
xmlHttp.open('PUT','xml',true);
xmlHttp.onreadystatechange=handleServerResponse;
xmlHttp.send(null);
}
setTimeout('process()',1000);
}
function handleServerResponse(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
xmlResponse=xmlHttp.responseXML;
// XML file received - contains analog values, switch values and LED states
// Relay 1
if (this.xmlResponse.getElementsByTagName('LED')[0].childNodes[0].nodeValue === "checked") {
document.getElementById("IO0").checked = true;
}
else {
document.getElementById("IO0").checked = false;
}
// Relay 2
if (this.xmlResponse.getElementsByTagName('LED')[1].childNodes[0].nodeValue === "checked") {
document.getElementById("IO2").checked = true;
}
else {
document.getElementById("IO2").checked = false;
}
}
}
</SCRIPT>
<style>
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
</style>
<title>ThangHC Web Server</title>
</head>
<body onload="process()">
<h1>ThangHC Web Server</h1>
<h2>Relay 01</h2>
<div class="onoffswitch">
<input type="checkbox" onclick="handleServerResponse()" name="onoffswitch" class="onoffswitch-checkbox" id="IO0">
<label class="onoffswitch-label" for="IO0">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<h2>Relay 02</h2>
<div class="onoffswitch">
<input type="checkbox" onclick="handleServerResponse()" name="onoffswitch" class="onoffswitch-checkbox" id="IO2">
<label class="onoffswitch-label" for="IO2">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</body>
</html>
)=====";
void buildXML(){
XML="<?xml version='1.0'?>";
XML+="<inputs>";
// checkbox LED states
// LED1
XML+="<LED>";
if (digitalRead(output0)) {
XML+="checked";
digitalWrite(output0, HIGH);
}
else {
XML+="unchecked";
digitalWrite(output0, LOW);
}
XML+="<LED>";
if (digitalRead(output2)) {
XML+="checked";
digitalWrite(output2, HIGH);
}
else {
XML+="unchecked";
digitalWrite(output2, LOW);
}
XML+="</LED>";
XML+="</inputs>";
}
String millis2time(){
String Time="";
unsigned long ss;
byte mm,hh;
ss=millis()/1000;
hh=ss/3600;
mm=(ss-hh*3600)/60;
ss=(ss-hh*3600)-mm*60;
if(hh<10)Time+="0";
Time+=(String)hh+":";
if(mm<10)Time+="0";
Time+=(String)mm+":";
if(ss<10)Time+="0";
Time+=(String)ss;
return Time;
}
void handleWebsite(){
server.send(200,"text/html",webSite);
}
void handleXML(){
buildXML();
server.send(200,"text/xml",XML);
}
void setup() {
Serial.begin(115200);
pinMode(output0, OUTPUT);
pinMode(output2, OUTPUT);
// Set outputs to LOW
//digitalWrite(output0, LOW);// Đóng relay ngay
//digitalWrite(output2, LOW);// Đóng relay ngay
digitalWrite(output0, HIGH);// Không đóng relay ngay
digitalWrite(output2, HIGH);// Không đóng relay ngay
Serial.println("");
Serial.println("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid,password);
while(WiFi.status()!=WL_CONNECTED)
{
Serial.print(".");
delay(500);
}
Serial.println("");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
server.on("/",handleWebsite);
server.on("/xml",handleXML);
server.begin();
}
void loop() {
server.handleClient();
}
#include <ESP8266WebServer.h>
ESP8266WebServer server(80);
//SSID and Password of your WiFi router
char* ssid = "NameWiFi";
char* password = "PassWiFi";;
String XML;
// Assign output variables to GPIO pins
const int output0 = 0;
const int output2 = 2;
const char webSite[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<SCRIPT>
var xml2 = "";
var xmlHttp=createXmlHttpObject();
function createXmlHttpObject(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
xmlHttp.open('PUT','xml',true);
xmlHttp.onreadystatechange=handleServerResponse;
xmlHttp.send(null);
}
setTimeout('process()',1000);
}
function handleServerResponse(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
xmlResponse=xmlHttp.responseXML;
// XML file received - contains analog values, switch values and LED states
// Relay 1
if (this.xmlResponse.getElementsByTagName('LED')[0].childNodes[0].nodeValue === "checked") {
document.getElementById("IO0").checked = true;
}
else {
document.getElementById("IO0").checked = false;
}
// Relay 2
if (this.xmlResponse.getElementsByTagName('LED')[1].childNodes[0].nodeValue === "checked") {
document.getElementById("IO2").checked = true;
}
else {
document.getElementById("IO2").checked = false;
}
}
}
</SCRIPT>
<style>
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
</style>
<title>ThangHC Web Server</title>
</head>
<body onload="process()">
<h1>ThangHC Web Server</h1>
<h2>Relay 01</h2>
<div class="onoffswitch">
<input type="checkbox" onclick="handleServerResponse()" name="onoffswitch" class="onoffswitch-checkbox" id="IO0">
<label class="onoffswitch-label" for="IO0">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<h2>Relay 02</h2>
<div class="onoffswitch">
<input type="checkbox" onclick="handleServerResponse()" name="onoffswitch" class="onoffswitch-checkbox" id="IO2">
<label class="onoffswitch-label" for="IO2">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</body>
</html>
)=====";
void buildXML(){
XML="<?xml version='1.0'?>";
XML+="<inputs>";
// checkbox LED states
// LED1
XML+="<LED>";
if (digitalRead(output0)) {
XML+="checked";
digitalWrite(output0, HIGH);
}
else {
XML+="unchecked";
digitalWrite(output0, LOW);
}
XML+="<LED>";
if (digitalRead(output2)) {
XML+="checked";
digitalWrite(output2, HIGH);
}
else {
XML+="unchecked";
digitalWrite(output2, LOW);
}
XML+="</LED>";
XML+="</inputs>";
}
String millis2time(){
String Time="";
unsigned long ss;
byte mm,hh;
ss=millis()/1000;
hh=ss/3600;
mm=(ss-hh*3600)/60;
ss=(ss-hh*3600)-mm*60;
if(hh<10)Time+="0";
Time+=(String)hh+":";
if(mm<10)Time+="0";
Time+=(String)mm+":";
if(ss<10)Time+="0";
Time+=(String)ss;
return Time;
}
void handleWebsite(){
server.send(200,"text/html",webSite);
}
void handleXML(){
buildXML();
server.send(200,"text/xml",XML);
}
void setup() {
Serial.begin(115200);
pinMode(output0, OUTPUT);
pinMode(output2, OUTPUT);
// Set outputs to LOW
//digitalWrite(output0, LOW);// Đóng relay ngay
//digitalWrite(output2, LOW);// Đóng relay ngay
digitalWrite(output0, HIGH);// Không đóng relay ngay
digitalWrite(output2, HIGH);// Không đóng relay ngay
Serial.println("");
Serial.println("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid,password);
while(WiFi.status()!=WL_CONNECTED)
{
Serial.print(".");
delay(500);
}
Serial.println("");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
server.on("/",handleWebsite);
server.on("/xml",handleXML);
server.begin();
}
void loop() {
server.handleClient();
}