HaWe
22.06.2017, 14:10
hallo,
ich verwende jetzt meinen nodeMCU für IoT mit html code. Die Website wird korrekt aufgebaut, man kann über 2 Website-Buttons 2 getrennte Verbraucher schalten (2 LEDs D7 und D8 ) und ein paar sonstige Daten betrachten (DHT Sensoren, Datum, Zeit).
Unschön ist aber, dass nach dem Schalten der Verbraucher immer die komplette Website neu aufgebaut werden muss, anstatt nur 1 Zeile zu aktualisieren (genau die, wo der aktuelle LED-Status nach Button-Click angezeigt wird).
Kennt jemand einen Weg, diese Werte direkt auf der Seite zu aktualisieren und den Rest einfach zu lassen, wie er ist?
So sieht die Website-Funktion zur Zeit aus (sie wird über loop() aufgerufen):
#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 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("/LED7=ON") != -1) {
digitalWrite(led7, HIGH);
valD7 = HIGH;
}
if (request.indexOf("/LED7=OFF") != -1) {
digitalWrite(led7, LOW);
valD7 = LOW;
}
if (request.indexOf("/LED8=ON") != -1) {
digitalWrite(led8, HIGH);
valD8 = HIGH;
}
if (request.indexOf("/LED8=OFF") != -1) {
digitalWrite(led8, LOW);
valD8 = LOW;
}
//---------------------------------------
// Return the response
String script="";
script += ("HTTP/1.1 200 OK \n");
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 += ("<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: ");
if(valD7 == HIGH) { script += ("On <wbr> <wbr> <wbr> "); }
else { script += ("Off <wbr> <wbr> <wbr> "); }
script += ("<a href=\" /LED7=ON\"\"><button>Turn On </button></a> \n");
script += ("<a href=\" /LED7=OFF\"\"><button>Turn Off </button></a><br /> \n");
script += ("<br><br> \n");
script += ("Led D8 is now: ");
if(valD8 == HIGH) { script += ("On <wbr> <wbr> <wbr> "); }
else { script += ("Off <wbr> <wbr> <wbr> "); }
script += ("<a href=\" /LED8=ON\"\"><button>Turn On </button></a> \n");
script += ("<a href=\" /LED8=OFF\"\"><button>Turn Off </button></a><br /> \n");
script += ("<br><br> \n");
script += ("<p><font face=""courier""> \n");
script += ("<h2>DHT Sensor 1: Temperat.: "+(String)tempc1 + "°C ");
script += (" <wbr> <wbr> <wbr> Feuchtigk.: "+(String)humid1+" </h2> \n");
script += ("<h2>DHT Sensor 2: Temperat.: "+(String)tempc2 + "°C ");
script += (" <wbr> <wbr> <wbr> Feuchtigk.: "+(String)humid2+" </h2> \n");
script += ("</font></p> \n");
script += ("<body> \n");
script += ("</html> \n");
client.print(script);
script="";
}
ich verwende jetzt meinen nodeMCU für IoT mit html code. Die Website wird korrekt aufgebaut, man kann über 2 Website-Buttons 2 getrennte Verbraucher schalten (2 LEDs D7 und D8 ) und ein paar sonstige Daten betrachten (DHT Sensoren, Datum, Zeit).
Unschön ist aber, dass nach dem Schalten der Verbraucher immer die komplette Website neu aufgebaut werden muss, anstatt nur 1 Zeile zu aktualisieren (genau die, wo der aktuelle LED-Status nach Button-Click angezeigt wird).
Kennt jemand einen Weg, diese Werte direkt auf der Seite zu aktualisieren und den Rest einfach zu lassen, wie er ist?
So sieht die Website-Funktion zur Zeit aus (sie wird über loop() aufgerufen):
#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 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("/LED7=ON") != -1) {
digitalWrite(led7, HIGH);
valD7 = HIGH;
}
if (request.indexOf("/LED7=OFF") != -1) {
digitalWrite(led7, LOW);
valD7 = LOW;
}
if (request.indexOf("/LED8=ON") != -1) {
digitalWrite(led8, HIGH);
valD8 = HIGH;
}
if (request.indexOf("/LED8=OFF") != -1) {
digitalWrite(led8, LOW);
valD8 = LOW;
}
//---------------------------------------
// Return the response
String script="";
script += ("HTTP/1.1 200 OK \n");
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 += ("<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: ");
if(valD7 == HIGH) { script += ("On <wbr> <wbr> <wbr> "); }
else { script += ("Off <wbr> <wbr> <wbr> "); }
script += ("<a href=\" /LED7=ON\"\"><button>Turn On </button></a> \n");
script += ("<a href=\" /LED7=OFF\"\"><button>Turn Off </button></a><br /> \n");
script += ("<br><br> \n");
script += ("Led D8 is now: ");
if(valD8 == HIGH) { script += ("On <wbr> <wbr> <wbr> "); }
else { script += ("Off <wbr> <wbr> <wbr> "); }
script += ("<a href=\" /LED8=ON\"\"><button>Turn On </button></a> \n");
script += ("<a href=\" /LED8=OFF\"\"><button>Turn Off </button></a><br /> \n");
script += ("<br><br> \n");
script += ("<p><font face=""courier""> \n");
script += ("<h2>DHT Sensor 1: Temperat.: "+(String)tempc1 + "°C ");
script += (" <wbr> <wbr> <wbr> Feuchtigk.: "+(String)humid1+" </h2> \n");
script += ("<h2>DHT Sensor 2: Temperat.: "+(String)tempc2 + "°C ");
script += (" <wbr> <wbr> <wbr> Feuchtigk.: "+(String)humid2+" </h2> \n");
script += ("</font></p> \n");
script += ("<body> \n");
script += ("</html> \n");
client.print(script);
script="";
}