Ich habe das Ganze kopiert und umgeschrieben. Es ist spät geworden und ich hoffe, dass es vollständig ist. Probieren kann ich nichts. Ich habe das HTML aber auf meinem lokalen Server getestet und das dann übertragen.
Mir sind verschiedene Sachen aufgefallen:
"<br />" - was immer das sein soll, ich kanns nicht deuten, dem Browser ist es egal
Der Übersichtlichkeit halber habe ich statt Gänsefüßchen in manchen Ausdrücken der HTML-Syntax das Hochkomma verwendet. Das sollte übersichtlicher sein und ist in HTML möglich.
Dann gabs ein: font face=""courier"" .... habe ich nicht verstanden und deshalb in .. font face='courier' ... geändert.
Das script=""; am Ende ist eventuell überflüssig. Hab's trotzdem nicht entfernt.
" <wbr> <wbr> <wbr> " - halte ich für überflüssig.
weiter geht's:
Dort, wo die Werte rein sollen, habe ich überall ein span-tag verwendet (wie: <span id='temp'>). Zwischen <span> und </span> steht dann der Wert.
Die Funktion change(a,b) ändert jeweils auf der Seite den Inhalt der <SPAN>s, per "innerHTML". Da die ja eine ID haben, können die angesprochen werden. Wie bei: change('valD8','On'). Das erste ist die ID, das Zweite der Wert.
/GETSTATE dient als Indikator, dass nicht die gesamte Seite aufgebaut werden soll, sondern nur geändert wird. Geändert wird mittels HTML und JavaScript im iframe, den ich hinzugefügt habe.
Warum hier ein Leerzeichen davor steht, bei " /LED7=OFF" und diesen anderen Strings weiß ich nicht. Ich habs so beibehalten, vielleicht hat es einen Sinn?
Die Variable isState dient zur Unterscheidung, was gefordert ist. Ob die gesamte Seite neu aufgebaut werden soll oder eben nicht. Dementsprechend wird entweder der IF-Zweig abgearbeitet (if (isState==-1)...) oder der dazugehörige ELSE-Zweig. Bei ELSE sollen nur die Werte über den iframe aktualisiert werden. Somit soll zu Anfang die Seite vollständig zum Browser geschickt werden und ab dann nur noch aktualisiert werden. Der Refresh findet deshalb im iframe statt, also nur in dem ELSE-Zweig, wo zuvor isState geprüft wird. Wo "gesamte Seite" steht, ist die Refresh-Zeile auskommentiert.
Code:
#include <ESP8266WiFi.h>
WiFiServer server(80);
IPAddress timeServer(132, 163, 4, 101); // time-a.timefreq.bldrdoc.gov
#include <TimeLib.h>
#include <WiFiUdp.h>
#include <Timezone.h>
//...
#define led7 D7
#define led8 D8
String datestr, timestr;
int tempc1, humid1,
tempc2, humid2;
void handleWebsite(){
volatile static int isState=-1, valD7=-1, valD8=-1;
//---------------------------------------
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
//---------------------------------------
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Match the request
if (request.indexOf("/GETSTATE") != -1) {
isState = 1;
}
if (request.indexOf("/LED7=ON") != -1) {
digitalWrite(led7, HIGH);
valD7 = HIGH; isState = 1;
}
if (request.indexOf("/LED7=OFF") != -1) {
digitalWrite(led7, LOW);
valD7 = LOW; isState = 1;
}
if (request.indexOf("/LED8=ON") != -1) {
digitalWrite(led8, HIGH);
valD8 = HIGH; isState = 1;
}
if (request.indexOf("/LED8=OFF") != -1) {
digitalWrite(led8, LOW);
valD8 = LOW; isState = 1;
}
//---------------------------------------
// Return the response
String script="";
script += ("HTTP/1.1 200 OK \n");
if (isState==-1) {
// Gesamte Seite
script += ("Content-Type: text/html \n");
script += (" \n"); // do not forget this one
script += ("<!DOCTYPE HTML> \n");
script += ("<html> \n");
script += ("<head> \n");
// autom. Aktualisierung alle 30 sec.
// script += ("<meta http-equiv=\"refresh\" content=\"30; URL=http://192.168.xxx.yyy\"> \n");
// utf-8 für "°" Zeichen
script += ("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"> \n");
script += ("<meta http-equiv=\"Content-Script-Type\" content=\"text/javascript\"> \n");
script += ("<meta http-equiv=\"Content-Style-Type\" content=\"text/css\"> \n");
script += ("<title>mysite</title> \n");
script += ("</head> \n");
script += ("<body> \n");
script += ("<h1><p style=""color:rgb(255,0,191);""> hello!</p> </h1> \n");
script += ("<h1><p style=""color:rgb(255,0,191);""> Welcome to my website! </p> </h1> \n");
script += ("<h2><p style=""color:rgb(0,204,102);""> ");
script += (datestr + " <wbr> <wbr> <wbr> " + timestr + "</p> </h2>");
script += ("<br><br> \n");
script += ("Led D7 is now: <span id='valD7'>");
if(valD7 == HIGH) { script += ("On </span> <wbr> <wbr> <wbr> "); }
else { script += ("Off </span> <wbr> <wbr> <wbr> "); }
script += ("<button onclick=\"document.myframe.location.href=' /LED7=ON'\">Turn On </button>\n");
script += ("<button onclick=\"document.myframe.location.href=' /LED7=OFF'\">Turn Off </button><br /> \n");
script += ("<br><br> \n");
script += ("Led D8 is now: <span id='valD8'>");
if(valD8 == HIGH) { script += ("On </span> <wbr> <wbr> <wbr> "); }
else { script += ("Off </span> <wbr> <wbr> <wbr> "); }
script += ("<button onclick=\"document.myframe.location.href=' /LED8=ON'\">Turn On </button>\n");
script += ("<button onclick=\"document.myframe.location.href=' /LED8=OFF'\">Turn Off </button><br /> \n");
script += ("<br><br> \n");
script += ("<p><font face='courier'> \n");
script += ("<h2>DHT Sensor 1: Temperat.: <span id='temp1'>"+(String)tempc1 + "</span>°C ");
script += (" <wbr> <wbr> <wbr> Feuchtigk.: <span id='feucht1'>"+(String)humid1+"</span> </h2> \n");
script += ("<h2>DHT Sensor 2: Temperat.: <span id='temp2'>"+(String)tempc2 + "</span>°C ");
script += (" <wbr> <wbr> <wbr> Feuchtigk.: <span id='feucht2'>"+(String)humid2+"</span> </h2> \n");
script += ("</font></p> \n");
script += ("<iframe name='myframe' src=' /GETSTATE' style='visibility:hidden' width='0' height='0'></iframe> \n");
script += ("</body> \n");
script += ("</html> \n");
}
else {
// Aktualisierungsseite
script += ("Content-Type: text/html \n");
script += (" \n"); // do not forget this one
script += ("<!DOCTYPE HTML> \n");
script += ("<html><head>\n");
// autom. Aktualisierung alle 30 sec.
script += ("<meta http-equiv=\"refresh\" content=\"30; URL=http://192.168.xxx.yyy/GETSTATE\"> \n");
// utf-8 für "°" Zeichen
script += ("<meta http-equiv=\"Content-Script-Type\" content=\"text/javascript\"> \n");
script += ("<script type=\"text/javascript\">function change(a,b){parent.document.getElementById(a).innerHTML=b;}");
if(valD7 == HIGH) { script += ("change('valD7','On');"); }
else { script += ("change('valD7','Off');"); }
if(valD8 == HIGH) { script += ("change('valD8','On');"); }
else { script += ("change('valD8','Off');"); }
script += ("change('temp1','"+(String)tempc1+"');");
script += ("change('temp2'',"+(String)tempc2+"');");
script += ("change('feucht1','"+(String)humid1+"');");
script += ("change('feucht2','"+(String)humid2+"');");
script += ("</script></head><body></body></html> \n");
}
client.print(script);
script="";
isState=-1;
}
Dieser Code und alle ähnlichen, in der Hauptseite könnte auch ersetzt werden:
Code:
script += ("Led D7 is now: <span id='valD7'>");
if(valD7 == HIGH) { script += ("On </span> <wbr> <wbr> <wbr> "); }
else { script += ("Off </span> <wbr> <wbr> <wbr> "); }
daraus wird dann:
Code:
script += ("Led D7 is now: <span id='valD7'></span> ");
Habe dann alles noch ein wenig überarbeitet, aber die <wbr> drin gelassen:
Code:
#include <ESP8266WiFi.h>
WiFiServer server(80);
IPAddress timeServer(132, 163, 4, 101); // time-a.timefreq.bldrdoc.gov
#include <TimeLib.h>
#include <WiFiUdp.h>
#include <Timezone.h>
//...
#define led7 D7
#define led8 D8
String datestr, timestr;
int tempc1, humid1,
tempc2, humid2;
void handleWebsite(){
volatile static int isState=-1, valD7=-1, valD8=-1;
//---------------------------------------
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
//---------------------------------------
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Match the request
if (request.indexOf("/GETSTATE") != -1) {
isState = 1;
}
if (request.indexOf("/LED7=ON") != -1) {
digitalWrite(led7, HIGH);
valD7 = HIGH; isState = 1;
}
if (request.indexOf("/LED7=OFF") != -1) {
digitalWrite(led7, LOW);
valD7 = LOW; isState = 1;
}
if (request.indexOf("/LED8=ON") != -1) {
digitalWrite(led8, HIGH);
valD8 = HIGH; isState = 1;
}
if (request.indexOf("/LED8=OFF") != -1) {
digitalWrite(led8, LOW);
valD8 = LOW; isState = 1;
}
//---------------------------------------
// Return the response
String script="";
script += ("HTTP/1.1 200 OK \n");
if (isState==-1) {
// Gesamte Seite
script += ("Content-Type: text/html \n");
script += (" \n"); // do not forget this one
script += ("<!DOCTYPE HTML> \n");
script += ("<html> \n");
script += ("<head> \n");
// autom. Aktualisierung alle 30 sec.
// script += ("<meta http-equiv=\"refresh\" content=\"30; URL=http://192.168.xxx.yyy\"> \n");
// utf-8 für "°" Zeichen
script += ("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"> \n");
script += ("<meta http-equiv=\"Content-Script-Type\" content=\"text/javascript\"> \n");
script += ("<meta http-equiv=\"Content-Style-Type\" content=\"text/css\"> \n");
script += ("<title>mysite</title></head><body> \n");
script += ("<h1><p style='color:rgb(255,0,191);'> hello! </p></h1> \n");
script += ("<h1><p style='color:rgb(255,0,191);'> Welcome to my website! </p></h1> \n");
script += ("<h2><p style='color:rgb(0,204,102);'> ");
script += (<span id='datum'></span> <wbr> <wbr> <wbr> <span id='zeit'></span></p> </h2><br><br> \n");
script += ("Led D7 is now: <span id='valD7'></span> <wbr>");
script += ("<button onclick=\"document.myframe.location.href=' /LED7=ON'\">Turn On </button> \n");
script += ("<button onclick=\"document.myframe.location.href=' /LED7=OFF'\">Turn Off </button> \n");
script += ("<br><br> \n");
script += ("Led D8 is now: <span id='valD8'></span> <wbr>");
script += ("<button onclick=\"document.myframe.location.href=' /LED8=ON'\">Turn On </button> \n");
script += ("<button onclick=\"document.myframe.location.href=' /LED8=OFF'\">Turn Off </button> \n");
script += ("<br><br> \n");
script += ("<p><font face='courier'> \n");
script += ("<h2>DHT Sensor 1: Temperat.: <span id='temp1'></span>°C ");
script += (" <wbr> <wbr> <wbr> Feuchtigk.: <span id='feucht1'></span> </h2> \n");
script += ("<h2>DHT Sensor 2: Temperat.: <span id='temp2'></span>°C ");
script += (" <wbr> <wbr> <wbr> Feuchtigk.: <span id='feucht2'></span> </h2> \n");
script += ("</font></p> \n");
script += ("<iframe name='myframe' src=' /GETSTATE' style='visibility:hidden' width='0' height='0'></iframe> \n");
script += ("</body></html> \n");
}
else {
// Aktualisierungsseite
script += ("Content-Type: text/html \n");
script += (" \n"); // do not forget this one
script += ("<!DOCTYPE HTML> \n");
script += ("<html><head>\n");
// autom. Aktualisierung alle 30 sec.
script += ("<meta http-equiv=\"refresh\" content=\"30; URL=http://192.168.xxx.yyy/GETSTATE\"> \n");
// utf-8 für "°" Zeichen
script += ("<meta http-equiv=\"Content-Script-Type\" content=\"text/javascript\"> \n");
script += ("<script type=\"text/javascript\">function change(a,b){parent.document.getElementById(a).innerHTML=b;}");
if(valD7 == HIGH) { script += ("change('valD7','On');"); }
else { script += ("change('valD7','Off');"); }
if(valD8 == HIGH) { script += ("change('valD8','On');"); }
else { script += ("change('valD8','Off');"); }
script += ("change('temp1','"+(String)tempc1+"');");
script += ("change('temp2','"+(String)tempc2+"');");
script += ("change('feucht1','"+(String)humid1+"');");
script += ("change('feucht2','"+(String)humid2+"');");
script += ("change('datum','"+datestr+"');");
script += ("change('zeit','"+timestr+"');");
script += ("</script></head><body></body></html> \n");
}
client.print(script);
script="";
isState=-1;
}
Zitieren
Lesezeichen