martinayotte wrote:Simply add new handlers for that new URL, and add buttons to webpage which have onClick calling some Ajax with those URL :Code: Select allserver.on("/gpio-high", handleGPIO_HIGH);
server.on("/gpio-low", handleGPIO_LOW);
I tried to try a button to turn the led on or off but when the led on or off webpage
was not updated the temperature and humidity information, help me. I'm not good at html
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DHT.h>
ESP8266WebServer server(80);
const char* ssid="F1T1P1";
const char* password="adwchhhhccv21A";
String webSite,javaScript,XML;
unsigned long wait000=0UL,wait001=1000UL;
unsigned long time1 = 0;
// Khai Bao Dimmer Led
// LED FET
#define ledPIN 13
int led_delay = 0;
#define time_at_colour 1200
unsigned long TIME_LED = 0;
int LED, dimled;
int LED_A = 0;
#define INPUT_PIN 14// Cam bien chuyen dong PIR
bool oldInputState;//Cho cam bien PIR
String PIR;
int inputState;
#define DHTPIN 12 // what pin we're connected to
DHT dht;
float h, t, l;
int LED1=4;
int sliderVal=0,blinkSpeed=1000;
void buildJavascript(),cambienDHT22(),cambienAnhSang(),cambienpir(),LED_CHANGE(),handlebatled(),handletatled(),handleblinkled();
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 buildWebsite(){
buildJavascript();
webSite="<!DOCTYPE HTML>\n";
webSite+="<META name='viewport' content='width=device-width, initial-scale=1'>\n";
webSite+=javaScript;
webSite+="<BODY onload='process()'>\n";
webSite+="<BR>This is the ESP website ...<BR>\n";
webSite+="Runtime = <A ID='runtime'></A><BR><BR>\n";
webSite+= "<h1>Cam bien</h1>";
webSite+= "Light: <A ID='light'></A><BR><BR>\n";
webSite+= "Tem: <A ID='tem'></A><BR><BR>\n";
webSite+= "Hum: <A ID='hum'></A><BR><BR>\n";
webSite+= "PIR:<A ID='pir'></A><BR><BR>\n";
webSite+= "<hr />";
webSite+= "<h1>Dieu Khien</h1>";
/*
webSite+= "<input type='submit' style='height:10%;width:100px' name='action' ID='led1on' value='Led On'></A><BR><BR>\n";
//webSite+=" Led1on= <A ID='led1on'>0</A><BR>\n";
webSite+= "<input type='submit' style='height:10%;width:100px' name='action' ID='led1off' value='Led Off'></A><BR><BR>\n";
//webSite+=" Led1off= <A ID='led1off'>0</A><BR>\n";
webSite+= "<input type='submit' style='height:10%;width:100px' name='action' ID='led1blink' value='Led Blink'></A><BR>\n";
*/
webSite+="<form action='/led1/1' method='POST'><input style='width:20%; height:10%' type='submit' name='action' value='Led On'></form>\r\n";
webSite+="<form action='/led1/0' method='POST'><input style='width:20%; height:10%' type='submit' name='action' value='Led Off'></form><BR>\n";
webSite+="<INPUT style='width:100%; height:50px' ID='slider' min='0' max='100' value='0' TYPE='range' ONCHANGE='Slider()'><BR>\n";
webSite+="Slidervalue = <A ID='Sliderval'>0</A><BR>\n";
webSite+="Blinkspeed = <A ID='Blinkspeed'></A> milliseconds<BR>\n";
webSite+="</BODY>\n";
webSite+="</HTML>\n";
}
void buildJavascript(){
javaScript="<SCRIPT>\n";
javaScript+="xmlHttp=createXmlHttpObject();\n";
javaScript+="function createXmlHttpObject(){\n";
javaScript+=" if(window.XMLHttpRequest){\n";
javaScript+=" xmlHttp=new XMLHttpRequest();\n";
javaScript+=" }else{\n";
javaScript+=" xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');\n";
javaScript+=" }\n";
javaScript+=" return xmlHttp;\n";
javaScript+="}\n";
javaScript+="function process(){\n";
javaScript+=" if(xmlHttp.readyState==0||xmlHttp.readyState==4){\n";
javaScript+=" xmlHttp.onreadystatechange=function(){\n";
javaScript+=" if(xmlHttp.readyState==4&&xmlHttp.status==200){\n";
javaScript+=" xmlDoc=xmlHttp.responseXML;\n";
javaScript+=" xmlmsg=xmlDoc.getElementsByTagName('millistime')[0].firstChild.nodeValue;\n";
javaScript+=" document.getElementById('runtime').innerHTML=xmlmsg;\n";
javaScript+=" xmlmsg=xmlDoc.getElementsByTagName('lightval')[0].firstChild.nodeValue;\n";
javaScript+=" document.getElementById('light').innerHTML=xmlmsg;\n";
javaScript+=" xmlmsg=xmlDoc.getElementsByTagName('temval')[0].firstChild.nodeValue;\n";
javaScript+=" document.getElementById('tem').innerHTML=xmlmsg;\n";
javaScript+=" xmlmsg=xmlDoc.getElementsByTagName('humval')[0].firstChild.nodeValue;\n";
javaScript+=" document.getElementById('hum').innerHTML=xmlmsg;\n";
javaScript+=" xmlmsg=xmlDoc.getElementsByTagName('pirval')[0].firstChild.nodeValue;\n";
javaScript+=" document.getElementById('pir').innerHTML=xmlmsg;\n";
/*
javaScript+=" xmlmsg=xmlDoc.getElementsByTagName('led1on')[0].firstChild.nodeValue;\n";
javaScript+=" document.getElementById('led1on').innerHTML=xmlmsg;\n";
javaScript+=" xmlmsg=xmlDoc.getElementsByTagName('led1off')[0].firstChild.nodeValue;\n";
javaScript+=" document.getElementById('led1off').innerHTML=xmlmsg;\n";
*/
javaScript+=" xmlmsg=xmlDoc.getElementsByTagName('sliderval')[0].firstChild.nodeValue;\n";
javaScript+=" document.getElementById('slider').value=xmlmsg;\n";
javaScript+=" xmlmsg=xmlDoc.getElementsByTagName('sliderval')[0].firstChild.nodeValue;\n";
javaScript+=" document.getElementById('Sliderval').innerHTML=xmlmsg;\n";
javaScript+=" xmlmsg=xmlDoc.getElementsByTagName('blinkspeed')[0].firstChild.nodeValue;\n";
javaScript+=" document.getElementById('Blinkspeed').innerHTML=xmlmsg;\n";
javaScript+=" }\n";
javaScript+=" }\n";
javaScript+=" xmlHttp.open('PUT','xml',true);\n";
javaScript+=" xmlHttp.send(null);\n";
javaScript+=" }\n";
javaScript+=" setTimeout('process()',1000);\n";
javaScript+="}\n";
javaScript+="function Slider(){\n";
javaScript+=" sliderVal=document.getElementById('slider').value;\n";
javaScript+=" document.getElementById('Sliderval').innerHTML=sliderVal;\n";
javaScript+=" document.getElementById('Blinkspeed').innerHTML=9*(100-sliderVal)+100;\n";
javaScript+=" if(xmlHttp.readyState==0||xmlHttp.readyState==4){\n";
javaScript+=" xmlHttp.open('PUT','setBlinkspeed?val='+sliderVal,true);\n";
//javaScript+=" xmlHttp.open('PUT','/led1/1',true);\n";
//javaScript+=" xmlHttp.open('PUT','/led1/0',true);\n";
javaScript+=" xmlHttp.send(null);\n";
javaScript+=" }\n";
javaScript+="}\n";
javaScript+="</SCRIPT>\n";
}
void buildXML(){
XML="<?xml version='1.0'?>";
XML+="<xml>";
XML+="<millistime>";
XML+=millis2time();
XML+="</millistime>";
XML+="<lightval>";
XML+=String(l);
XML+="</lightval>";
XML+="<temval>";
XML+=String(t);
XML+="</temval>";
XML+="<humval>";
XML+=String(h);
XML+="</humval>";
XML+="<pirval>";
XML+=PIR;
XML+="</pirval>";
/*
XML+="<led1on>";
XML+="</led1on>";
XML+="<led1off>";
XML+="</led1off>";
*/
XML+="<sliderval>";
XML+=String(sliderVal);
XML+="</sliderval>";
XML+="<blinkspeed>";
blinkSpeed=9*(100-sliderVal)+100;
XML+=String(blinkSpeed);
XML+="</blinkspeed>";
XML+="</xml>";
}
void handleWebsite(){
buildWebsite();
server.send(200,"text/html",webSite);
}
void handleXML(){
buildXML();
server.send(200,"text/xml",XML);
}
void handleBlinkspeed(){
sliderVal=server.arg("val").toInt();
buildXML();
server.send(200,"text/xml",XML);
}
void cambienpir(){
//cam bien PIR
inputState = digitalRead(INPUT_PIN);
/*
Serial.print("PIR = ");
Serial.println(inputState);
*/
if (inputState == HIGH)
{
PIR = "Have movement";
}
else
{
PIR = "No movement";
}
}
void cambienDHT22()
{
// Use WiFiClient class to create TCP connections for Humidity++++++++++++++++++++++++++
h = dht.getHumidity();
/*
Serial.print("Hum from DHT = ");
Serial.println(h);
*/
if (isnan(h)) {
//Serial.println("Failed to read from DHT sensor!");
return;
}
delay(50);
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// Use WiFiClient class to create TCP connections for Temperature
t = dht.getTemperature();
/*
Serial.print("Tem from DHT = ");
Serial.println(t);
*/
delay(50);
/*
// Read all the lines of the reply from server and print them to Serial
while(client1.available()){
String line = client1.readStringUntil('\r');
Serial.print(line);
}
while(client2.available()){
String line = client2.readStringUntil('\r');
Serial.print(line);
}
*/
}
void cambienAnhSang()
{
l = analogRead(A0);// đọc giá trị quang trở
/*
Serial.print("Light = ");
Serial.println(l);
*/
if (isnan(l)) {
//Serial.println("Failed to read from light sensor!");
return;
}
delay(50);
/*
// Read all the lines of the reply from server and print them to Serial
while(client3.available()){
String line = client3.readStringUntil('\r');
Serial.print(line);
}
*/
}
void LED_CHANGE()
{
if(LED != LED_A){
if(LED_A > LED) LED_A = LED_A - 1;
if(LED_A < LED) LED_A++;
analogWrite(ledPIN, LED_A);
}
}
void handlebatled() {
digitalWrite(LED1,HIGH);
int led1stay = digitalRead(LED1);
Serial.print("LED1 = ");
Serial.println(led1stay);
handleWebsite();
handleXML();
}
void handletatled() {
digitalWrite(LED1,LOW);
int led1stay = digitalRead(LED1);
Serial.print("LED1 = ");
Serial.println(led1stay);
handleWebsite();
handleXML();
}
void handleblinkled() {
if(millis()>wait001){
digitalWrite(LED1,!digitalRead(LED1));
wait001=millis()+blinkSpeed;
}
buildWebsite();
server.send(200,"text/html",webSite);
}
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
void setup() {
Serial.begin(115200);
dht.setup(DHTPIN);
pinMode(ledPIN, OUTPUT); //Chan Led Dimmer
pinMode(INPUT_PIN, INPUT);//Chan cam bien PIR
oldInputState = !digitalRead(INPUT_PIN);
pinMode(LED1,OUTPUT);
WiFi.begin(ssid,password);
while(WiFi.status()!=WL_CONNECTED)delay(500);
WiFi.mode(WIFI_STA);
Serial.println("\n\nBOOTING ESP8266 ...");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("Station IP address: ");
Serial.println(WiFi.localIP());
server.on("/",handleWebsite);
server.on("/xml",handleXML);
server.on("/setBlinkspeed",handleBlinkspeed);
server.on("/led1/1", handlebatled);
server.on("/led1/0", handletatled);
server.on("/led1/blink", handleblinkled);
server.begin();
}
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
void loop() {
server.handleClient();
cambienpir();
if(millis()>wait000){
buildXML();
wait000=millis()+1000UL;
}
LED = constrain(sliderVal,0,1023);
int diff_led = abs(LED-LED_A);
if(diff_led > 0){
led_delay = time_at_colour / abs(LED-LED_A);
}else{
led_delay = time_at_colour / 100;
}
if(millis() - TIME_LED >= led_delay){
TIME_LED = millis();
LED_CHANGE();
}
if ( (unsigned long) (millis() - time1) > 5000 ){
cambienDHT22();
cambienAnhSang();
time1 = millis();
}
server.handleClient();
}