Bar: 1 version importeret

2022-10-21T12:36:38Z

1 version importeret

← Ældre version	Versionen fra 21. okt. 2022, 14:36
(Ingen forskel)

htx_>Bar med 16. nov. 2020, 12:51

2020-11-16T12:51:07Z

Ny side

{{template:WeMOS-software}}
Den simple måde at sende data til WeMOS er at skrive dem med i URL'en, men det giver sikkerhedsproblemer, og det begrænser også noget hvad man kan sende.

At skrive data i URL'en lægger op til GET-metoden. Hvis man vil undgå det, så skal man bruge '''POST'''-metoden.

Dette eksempel tager udgangspunkt i et eksempel fundet ved techtutorialsx.com<ref>[https://techtutorialsx.com/2017/03/26/esp8266-webserver-accessing-the-body-of-a-http-request/ Eksempel på anvendelse af POST-metoden]</ref>.

Formålet er at opbygge en kode, så man kan sende forskellige ting ind til siden ved hjælp af siden selv.

Hele den gennemgåede kode kan findes i [[media:Wifi-post.zip|Denne ZIP-fil]]

==Variabler og biblioteker==
<source lang="C">
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80);

/*
const char* ssid = "ssid-name";
const char* password = "ssid-password";
*/
#include "WifiHome.h"

boolean LED = LOW;
int ledPin = 2;
</source>
==Server Connection==
Til at begynde med sættes LED'en lige op og der klargøres til at skrive ud i [[Serial Monitor]].

Som beskrevet i [[WeMOS Server Connection]] forbindes til Wifi og der sættes en server op. Det er primært i [[setup()]] det sker.

Derefter skrives en hjælpetekst til brugeren:
<source lang="C">
void setup() {

pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);

Serial.begin(115200);
WiFi.begin(ssid, password); //Connect to the WiFi network

while (WiFi.status() != WL_CONNECTED) { //Wait for connection

delay(500);
Serial.println("Waiting to connect...");

}

Serial.print("IP address: ");
Serial.println(WiFi.localIP()); //Print the local IP

Serial.print("Page Address: http://");
Serial.print(WiFi.localIP());
Serial.println("/home"); //Print the local IP
}
</source>

Det næste er lidt specielt for denne måde at håndtere server på, hvor der etableres forbindelse mellem en del af URL'en (home) og en funktion der servicerer den henvendelse. Det gøres med server.on metoden. :
<source lang="C">
server.on("/home", handleHome); //Associate the handler function to the path
</source>

Til slut i setup() aktiveres serveren, så man kan henvende sig til den:
<source lang="C">
server.begin(); //Start the server
Serial.println("Server listening");
}
</source>

==Connection response==
Det eneste der sker i [[loop()]] er at der spørges til om en client har henvendt sig med noget. Det er det der sikrer at handleHome bliver kaldt:
<source lang="C">
void loop() {
server.handleClient(); //Handling of incoming requests
}
</source>

==Servicering af home henvendelsen==
Først sættes det første af svaret til clienten op, som en start på HTML-koden der skal vises:
<source lang="C">
void handleHome() { //Handler for the body path

String message = "<!DOCTYPE HTML>";
message += "<html>";
</source>

Som det øverste på siden angives om der er sket en henvendelse til siden, og hvis der er, så angives indholdet af henvendelsen:
<source lang="C">
if (server.hasArg("tekst")== false){ //Check if body received
message += "Ingen data fra afsender<br />";
} else {
message += "Der er sendt teksten:";
message += server.arg("tekst");
message += "<br />";
message += "LED saettes til: ";
message += server.arg("led");
message += "<br />";
}
</source>

Hvis der er sendt et argument med i led-feltet, så sættes LED efter det der sendes, og LED'en sættes til det den nu er blevet:
<source lang="C">
if (server.arg("led") == "ON") {
LED = HIGH;
} else if (server.arg("led") == "OFF") {
LED = LOW;
}
digitalWrite(ledPin, ! LED); // LED tændes ved at trække lavt, derfor inverteringen
</source>

LED'ens status skrives så i indholdet hvad status er på LED'en:
<source lang="C">
message += "LED er ";
if(LED == HIGH) {
message += "On<br />";
} else {
message += "Off<br />";
}
</source>

Som det sidste indhold sættes en HTML-FORM op, så man faktisk kan sende noget til serveren - der er to input-texter, en til en tekst, der bares skrives i henvendelsen, og så en til led, der kan tænde og slukke LED'en med ON og OFF - det skal skrives med stort, ellers ignoreres det. Til slut sendes indholdet tilbage til clienten:
<source lang="C">
message += "<br />";
message += "<form action='/home' method='POST'>";
message += "Input tekst:<input type='text' name='tekst' value='Test af POST'><br>";
message += "LED ON/OFF:<input type='text' name='led' value='ON'><br>";
message += "<input type='submit' value='Submit'></form>";
message += "</html>";

server.send(200, "text/html", message);
}
</source>

==Test af POST-metoden==
Ved en simpel henvendelse til serveren med URL: "http://192.168.0.14/home" får man følgende visning:<br />
[[fil:responsePost1.png|300px|Response på en simpel henvendelse]]<br />
''Response på en simpel henvendelse''

Hvis man blot klikker Submit får man følgende visning og LED'en tændes:<br />
[[fil:responsePost2.png|300px|Response på en henvendelse med ON til LED'en]]<br />
''Response på en henvendelse med ON til LED'en''

får man følgende visning:<br />
[[fil:responsePost3.png|300px|Response på en henvendelse med OFF til LED'en]]<br />
''Response på en henvendelse med OFF til LED'en''

==Videre udvikling med flere undersider==
Hvis man ønsker at WeMOS'en skal kunne håndtere mere komplekse ting, så kan man lave forskellig respons ved at lave forskellige undersider. Det gøres ved at der etableres ekstra forbindelse til URL'en (fx activate) og en funktion handleActivate() der servicerer den henvendelse. Det gøres ved at lave to kald til server.on metoden. :
<source lang="C">
server.on("/home", handleHome); //Associate the handler function to the path

server.on("/activate", handleActivate); //Associate the handler function to the path
</source>

For at man kan komme til at bruge siden activate, og måske sende noget til den, så etableres en ekstra HTML-form inde i handleHome funktionen. Den skal have en ny action der henviser til activate som viste her:
<source lang="C">
message += "<form action='/activate' method='POST'>";
message += "Akteverings-tekst:<input type='text' name='ac' value='Start'><br>";
message += "<input type='submit' value='Aktiver'></form>";
</source>

Der skal så også oprettes den handleActivate, der giver responsen på activate siden - her er den bare lavet uden at den laver noget, men det viser princippet med at man kan komme tilbage til home-siden
<source lang="C">
void handleActivate() { //Handler for the acticate path

String message = "<!DOCTYPE HTML>";
message += "<html>";

if (server.hasArg("ac")== false){ //Check if activate received
message += "Ingen data fra afsender<br />";
} else {
message += "Der er sendt Aktiveringsteksten:";
message += server.arg("ca");
message += "<br />";
}
message += "Det laver ikke noget i programmet.<br />";
message += "<form action='/home' method='POST'>";
message += "<input type='submit' value='Retur'></form>";
message += "</html>";

server.send(200, "text/html", message);
}
</source>

==Udvidelse med løbende opdatering af siden==
Denne udvidelse tager udgangspunkt i [[WeMOS AD-eksempel]], men bliver modificeret så det passer ind i strukturen med ESP8266WebServer biblioteket.

I [[setup()]] tilføjes en handler til den henvendelse der skal kunne opdatere en værdi på siden - her en AD-værdi:
<source lang="C">
server.on("/ad", handleAD); //Associate the handler function to the path
</source>

Til handleren skal der være en handleAD() funktion der blot skal svare med AD tallet i plain text:
<source lang="C">
void handleAD() { //Handler for the ad path

String message = String(analogRead(A0)); // Svaret er bare AD-tallet som tekst

server.send(200, "text/plain", message);
}
</source>

Inde i visningen af siden skal man have tilføjet et felt, hvor værdien skal vises - her vises AD-værdien, så den får en visning fra starten, og span-tagget får et ID='demo', så AJAX funktionaliteten kan udskifte indholdet i dette felt:
<source lang="C">
message += "<p>AD-tallet: <span id='demo'>";
message += String(analogRead(A0));
message += "</span></p>";
</source>

I starten af siden tilføjes et head-tag, der indeholder en javascript-funktion, der kan foretage en HTTP Request, som beder om AD-siden. Når den returnerer AD-værdien, så sætter funktionen den AD-værdi ind i span-tagget med ID'et demo.
<source lang="C">
message += "<head>";
message += "<script>";
message += "function loadDoc() {";
message += " var xhttp = new XMLHttpRequest();";
message += " xhttp.onreadystatechange = function() {";
message += " if (this.readyState == 4 && this.status == 200) {";
message += " document.getElementById('demo').innerHTML =";
message += " this.responseText;";
message += " }";
message += " };";
message += " xhttp.open('GET', 'ad', true);";
message += " xhttp.send();";
message += "}";
message += "</script>";
message += "</head>";
</source>

Endelig skal den sidste del af AJAX-teknikken etableres ved at der indføres et javascript på siden, som opdaterer siden ved at loadDoc() funktionen kaldes hvert sekund:
<source lang="C">
message += "<script>";
message += "setInterval(loadDoc, 1000)";
message += "</script>";
</source>

==Opdatering af Funktionalitet med forms==
Hvis man gerne vil lave en form-visning afhængig af en værdi i WeMOS'en, så er det lidt mere tricky, for så kan man ikke bare smide HTML-koden ind på siden, når tilstanden er der - det vil gribe forstyrrende ind i indtastningen af værdien. Dette skal løses med en lidt anden teknik.

Her laves således at man kan indtaste et setpunkt på hvornår formen skal vises, så man kan indtaste hvis AD-værdien er over setpunktet, og formen er ikke vist hvis AD-værdien er under setpunktet.

Her skal laves en henvendelse der angiver om formen skal vises. Der skal etableres en handler i [[setup()]]:
<source lang="C">
server.on("/visning", handleVisning); //Associate the handler function to the path
</source>

Hertil skal der så være en handler-funktion handleVisning(), der svarer om formen skal vises:
<source lang="C">
void handleVisning() { //Handler for the visning path

String message = " ";
if (analogRead(A0) >= setpunkt) {
message += "Vis"; // Svaret er bare Vis
}

server.send(200, "text/plain", message);
}
</source>

Der skal tilføjes en variabel der indeholder setpunktet, og den initialiseres til 512, som er midt i AD-området:
<source lang="C">
int setpunkt = 512;
</source>

Sammen med javascript-funktionen loadDoc() etableres en ny loadDoc2():
<source lang="C">
message += "function loadDoc2() {";
message += " var xhttp2 = new XMLHttpRequest();";
message += " xhttp2.onreadystatechange = function() {";
message += " if (this.readyState == 4 && this.status == 200) {";
message += " if (this.responseText.indexOf('Vis') > -1) {";
message += " document.getElementById('setForm').style.display = 'block';";
message += " } else {";
message += " document.getElementById('setForm').style.display = 'none';";
message += " }";
message += " }";
message += " };";
message += " xhttp2.open('GET', 'visning', true);";
message += " xhttp2.send();";
message += "}";
</source>

Sammen med håndteringen af de andre argumenter på siden laves en håndtering af setp-argumentet fra formen med Setpunkt. Der skal også beskyttes mod at man sætter for højt et setpunkt, så man kan komme til at vise formen igen:
<source lang="C">
if (server.hasArg("setp") == true) {
setpunkt = server.arg("setp").toInt();
if (setpunkt >= 1024) {
setpunkt = 512;
}
}
</source>

Under visningen af LED'en status laves en visning af hvad setpunkt variablen indeholder:
<source lang="C">
message += "Setpunkt er : ";
message += String(setpunkt, DEC);
message += "<br />";
</source>

Mellem de andre forms placeres en ny form, der har et id='setForm', for at man kan henvende sig til den fra loadDoc2(), og den startes med visningen slået fra ved at sætte style til display=none, så man ikke lige får visningen ved første henvendelse, men først når det er konstateret om AD-værdien er over setpunktet:
<source lang="C">
message += "<form action='/home' method='POST' id='setForm' style='display=none'>";
message += "Visnings-setpunkt (1 - 1024):<input type='text' name='setp' value='512'><br>";
message += "<input type='submit' value='Nyt Setpunkt'></form>";
</source>

Visningen i browseren når AD-tallet er over setpunktet er som vist her:<br />
[[fil:wemosServerMedSetpunkt.png|350px|Visningen i browseren af webserveren bygget med WeMOS]]<br />
''Visningen i browseren af webserveren bygget med WeMOS''

==Udvidelse med sending af mail ved ændring af setpunkt==
For at kunne sende information skal der tilføjes en HTTP Client som et bibliotek:
<source lang="C">
#include <ESP8266HTTPClient.h>
</source>

Det skal oprettes en instans af HTTP Cienten, angives en URL hvor der skal sendes og en variabel:
<source lang="C">
HTTPClient http;

const String serverAddress = "http://htx-elev.ucholstebro.dk/HX-17-el/bar/"; // web address for the webserver

int httpCode;
</source>

Der hvor man læser setpunktet ind fra formen og ændrer setpunkt-variablen skal man sende den henvendelse til siden, der kan sende mail som det er beskrevet i [[WeMOS Mail]].
<source lang="C">
String stringToSend = serverAddress; // Serveradressen der skal henvendes til
stringToSend += "sendMailSetpunkt.php?setpunkt="; // Filnavnet og parameter-navn
stringToSend += String(setpunkt); // Indholdet der skal sendes
http.setTimeout(2000); // Use 2 seconds timeout for HTTP connection
http.begin(stringToSend); // Start HTTP connection and send HTTP header
httpCode = http.GET(); // Get response from HTTP request
digitalWrite(ledPin, !digitalRead(ledPin));
if(httpCode > 0) // httpCode will be negative on error
{
Serial.printf("[HTTP] GET... code: %d\n", httpCode); // Response from server is not an error
if(httpCode == HTTP_CODE_OK) { // Response from server is HTTP CODE 200
String payload = http.getString();
Serial.println(payload);
}
} else {
Serial.printf("[HTTP] GET... failed, error: %s\n", http.errorToString(httpCode).c_str());
}
http.end();
}
</source>

For at det skal fungere, så skal der selvfølgelig ligge den PHP-fil der henvises til, og den skal kunne sende en mail. Her er det lavet så det er en fast mailadresse den bruger, så vær lige venlig ikke at bruge samme adresse (jeg videresender ikke). Indholdet af PHP-filen ser ud som følger:
<source lang="PHP">
<?php
/*
* Mail example
* Bent Arnoldsen, Holstebro HTX 2018
*/

if (isset($_GET['setpunkt'])) {
$setpunkt = $_GET['setpunkt'];
mail("bar@ucholstebro.dk", "Mail fra Alarmsystem", "Der er sat nyt setpunkt : " . $setpunkt);
}
?>
<html>
<h2>Mail-System til Setpunkt</h2>
</html>
</source>

Den samlede kode med alle udvidelserne sammen kan hentes i [[media:wifi-post-test2.zip|denne ZIP-fil]].

==Referencer==
<references />
[[Kategori:WeMOS]]

WeMOS POST metode - Versionshistorie

Bar: 1 version importeret

htx_>Bar med 16. nov. 2020, 12:51