Bar med 11. okt. 2022, 12:08

2022-10-11T12:08:18Z

← Ældre version		Versionen fra 11. okt. 2022, 14:08
Linje 22:		Linje 22:
	"<!DOCTYPE HTML>",		"<!DOCTYPE HTML>",
	};		};

	const int htmlLength = 8;		const int htmlLength = 8;
	const String html_response [] = {		const String html_response [] = {

Bar: 1 version importeret

2022-10-11T11:42:55Z

1 version importeret

Ny side

{{template:WeMOS-software}}
Dette eksempel tager udgangspunkt i en simpel Webserver applikation<ref>[http://www.esp8266learning.com/wemos-webserver-example.php Webserver eksempel] med LED ON/OFF</ref>, men med en udvidelse, der anvender AJAX teknikken til at lave opdatering på siden, så man kan få en varierende værdi ind på siden.
==Opsætning af Server==
I dette eksempel connectes til WiFi og Serveren startes på samme måde som beskrevet under [[WeMOS Server Connection]].

I den konkrete anvendelse er der gjort det lettere at skifte mellem forskellige trådløse netværk, ved at der er oprettet en include-fil til hvert netværk, der få kan includes som følger:
<source lang="C">
// Define SSID with password to get access
#include "WifiHome.h"
</source>
Man kan se det i de forskellige faneblade hvor include-filerne er, som vist her:<br />
[[fil:wifi-includes.png|300px|tabs med include-filer]]

==Struktur i HTML-koden==
For at gøre det lettere at overskue de enkelte dele af HTML-koden er der oprettet blokke med HTML-kode som vist her:
<source lang="C">
const int startLength = 4;
const String start_response [] = {
"HTTP/1.1 200 OK",
"Content-Type: text/html",
"",
"<!DOCTYPE HTML>",
};

const int htmlLength = 8;
const String html_response [] = {
"<html>",
"<script>",
"setInterval(loadDoc, 500)",
"</script>",
"Click <a href=\"/LED=ON\">here</a> turn the LED on pin 2 ON<br>",
"Click <a href=\"/LED=OFF\">here</a> turn the LED on pin 2 OFF<br>",
"<br><br>",
"Led pin is now: "
};
</source>

De forskellige blokke kan så sendes til clienten som følger:
<source lang="C">
for (int n = 0; n < startLength; n++) {
client.println(start_response[n]);
}
</source>

==AJAX koden==
Som omtalt på w3schools, så er AJAX<ref>[https://www.w3schools.com/js/js_ajax_intro.asp AJAX introduktion] ved w3schools.com</ref> ikke et kodesprog, men en kombination af forskellige teknikker, hvor XMLHttpRequest object (der henter data fra en webserver) er en central del, kombineret med [[javaScript]], der kan opdatere HTML-elementer.

Der placeres et script "setInterval(loadDoc, 500);" på siden, der kalder en funktion loadDoc() hvert halve sekund.

Funktionen loadDoc er implementeret som følger:
<source lang="javaScript">
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('demo').innerHTML =
this.responseText;
}
};
xhttp.open('GET', 'AD', true);
xhttp.send();
}
</source>

Funktionen gør det at den sender en GET med AD som request-linje afsted til serveren, der så svarer med AD-tallet. Når svaret kommer tilbage med en status 200 (siden loadet), så tager den responsen (AD-tallet) og placerer i det spantag der har ID'et demo.

==Opbygning af response på en AD-request==
Når der kommer en request med AD som indhold, så returneres AD-tallet indlejret i HTML-kode som vist her:
<source lang="C">
if (request.indexOf("/AD") != -1){
// Return the response for AD
for (int n = 0; n < startLength; n++) {
client.println(start_response[n]);
}
client.println("<html>");
client.println(analogRead(A0));
client.println("</html>");
}
</source>

Resultatet er at der kommer en visning som her:<br />
[[fil:AJAX-AD-visning.png|400px|Visning fra en WeMOS, hvor AD-tallet opdateres hvert halve sekund]]<br />
''Visning fra en WeMOS, hvor AD-tallet opdateres hvert halve sekund''

Siden har stadig den grundlæggende funktionalitet der kan tænde og slukke for en LED.

==Samlet kode==
Her er den samlede totale kode
<source lang="C">
#include <ESP8266WiFi.h>

// Define SSID with password to get access
const char* ssid = "ssid name";
const char* password = "ssid password";

int ledPin = 2;
WiFiServer server(80);

const int startLength = 4;
const String start_response [] = {
"HTTP/1.1 200 OK",
"Content-Type: text/html",
"",
"<!DOCTYPE HTML>",
};

const int scriptLength = 15;
const String script_response [] = {
"<head>",
"<script>",
"function loadDoc() {",
" var xhttp = new XMLHttpRequest();",
" xhttp.onreadystatechange = function() {",
" if (this.readyState == 4 && this.status == 200) {",
" document.getElementById('demo').innerHTML =",
" this.responseText;",
" }",
" };",
" xhttp.open('GET', 'AD', true);",
" xhttp.send();",
"}",
"</script>",
"</head>"
};

const int htmlLength = 8;
const String html_response [] = {
"<html>",
"<script>",
"setInterval(loadDoc, 500)",
"</script>",
"Click <a href=\"/LED=ON\">here</a> turn the LED on pin 2 ON<br>",
"Click <a href=\"/LED=OFF\">here</a> turn the LED on pin 2 OFF<br>",
"<br><br>",
"Led pin is now: "
};

void setup() {
Serial.begin(115200);
delay(10);

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

// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");

// Start the server
server.begin();
Serial.println("Server started");

// Print the IP address
Serial.print("Use this URL : ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");

}

void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}

// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
delay(1);
}

// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();

// Match the request

int value = LOW;
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(ledPin, LOW); // Inverted output Low to turn LED ON
value = HIGH;
}
if (request.indexOf("/LED=OFF") != -1){
digitalWrite(ledPin, HIGH); // Inverted output High to turn LED OFF
value = LOW;
}

if (request.indexOf("/AD") != -1){
// Return the response for AD
for (int n = 0; n < startLength; n++) {
client.println(start_response[n]);
}
client.println("<html>");
client.println(analogRead(A0));
client.println("</html>");
} else {
// Return the response
for (int n = 0; n < startLength; n++) {
client.println(start_response[n]);
}
for (int n = 0; n < scriptLength; n++) {
client.println(script_response[n]);
}
for (int n = 0; n < htmlLength; n++) {
client.println(html_response[n]);
}

if(value == HIGH) {
client.print("On");
} else {
client.print("Off");
}
client.print("<br>Analog indgang: <span id='demo'>");
client.print(analogRead(A0));
client.println("</span>");
client.println("</html>");
}
delay(1);
Serial.println("Client disconnected");
Serial.println("");

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

WeMOS AD-eksempel - Versionshistorie

Bar med 11. okt. 2022, 12:08

Bar: 1 version importeret