Webserver - Schalten von Ausgängen
Es ist eigentlich nur ein Exkurs - Das Schalten von Ausgängen am ESP8266 mittels Webserver. Damit das Beispiel vollständig ist, zeige ich einen Ansatz wie man Schaltvorgänge auf der Weboberfläche auslösen kann.
Die Verwaltung der einzelnen Seiten ist uns nun geläufig - es braucht einen Handler und eine Funktion die eine Seite ausgibt. Selbiges können wir auch nutzen um einen GPIO eines ES8266 zu schalten. Da mir eine ganze Seite für einen einzigen GPIO etwas overkill erscheint, übergebe ich alle Schaltaufgaben an einen zentralen "Commander" c.php und teile mittels Parameter mit, welcher Ausgang wie geschaltet werden soll.
Eine Anmerkung: Am ESP8266 läuft kein PHP. Die Dateiendung dient nur zur Unterscheidung, dass hier keine HTML Ausgabe erfolgen wird, sondern dass der Webserver eine Resource zur Verfügung stellt (nämlich einen Zugang zu den GPIO's).
Wir ergänzen also wieder einen Handler im setup()
server.on("/c.php", handleCommand); // process commands
sowie den entsprechenden "Commander":
void handleCommand() {
// receive command and handle accordingly
Serial.println(F("D223 handleCommand"));
for (uint8_t i = 0; i < server.args(); i++) {
Serial.print(server.argName(i));
Serial.print(F(": "));
Serial.println(server.arg(i));
}
if (server.argName(0) == "toggle") // the parameter which was sent to this server
{
if (server.arg(0) == "1") // the value for that parameter
{
Serial.println(F("D232 toggle output1"));
if (digitalRead(OUTPUT1_PIN)) { // toggle: if the pin was on - switch it of and vice versa
digitalWrite(OUTPUT1_PIN, LOW);
} else {
digitalWrite(OUTPUT1_PIN, HIGH);
}
}
if (server.arg(0) == "2") // the value for that parameter
{
Serial.println(F("D232 toggle output2"));
if (digitalRead(OUTPUT2_PIN)) {
digitalWrite(OUTPUT2_PIN, LOW);
} else {
digitalWrite(OUTPUT2_PIN, HIGH);
}
}
}
else if (server.argName(0) == "CMD" && server.arg(0) == "RESET") // Example how to reset the module. Just send ?CMD=RESET
{
Serial.println(F("D238 will reset"));
ESP.restart();
}
server.send(204, "text/plain", "No Content"); // this page doesn't send back content --> 204
}
Von diesem Commander erwarten wir keine HTML-Ausgabe, daher setze ich den HTML-Response auf "204 No Content".
Im HTML einer Seite kann somit mit einem einfachen HREF eine Aktion ausgeführt werden:
message += F("<h2>Switch</h2>\n" // example how to switch/toggle an output
"<p>Example how to switch/toggle outputs, or to initiate actions. "
"The buttons are 'fake' buttons and only styled by CSS. Click to toggle the output.</p>\n"
"<p class='off'><a href='c.php?toggle=1' target='i'>Output 1</a></p>\n"
"<p class='off'><a href='c.php?toggle=2' target='i'>Output 2</a></p>\n"
"<iframe name='i' style='display:none' ></iframe>\n" // hack to keep the button press in the window
);
Das Ziel des "Links" leite ich an ein unsichtbares IFRAME. Das kann man später auch schöner machen. Dazu brauchen wir aber noch etwas mehr JavaScript. Daher belassen wir es zunächst bei dem einfachen HREF mit target Angabe.
Umgesetzt ist ein reines "Umschalten" (toggle). Man kann natürlich auch andere Befehle erfinden z.B. on für einschalten - und richtig off für das ausschalten von GPIOs.
Es geht weiter mit: Webclient - Senden mittels HTTP-POST