WeMOS AD-eksempel

Fra HTX Arduino
Spring til navigation Spring til søgning
WeMOS WiFi Processor
WeMOS Server Connection - Simpel Server - Flere SSID - ESP8266 - Watchdog - Interrupt
Anvendelse LED-eksempel - AD-eksempel - Mail - POST metode - Web Publicering

Dette eksempel tager udgangspunkt i en simpel Webserver applikation[1], 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: 

// Define SSID with password to get access
#include "WifiHome.h"

Man kan se det i de forskellige faneblade hvor include-filerne er, som vist her:
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: 

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: "
};

De forskellige blokke kan så sendes til clienten som følger: 

  for (int n = 0; n < startLength; n++) {
    client.println(start_response[n]);
  }

AJAX koden

Som omtalt på w3schools, så er AJAX[2] 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: 

  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();
  }

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: 

  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>");
  }

Resultatet er at der kommer en visning som her:
Visning fra en WeMOS, hvor AD-tallet opdateres hvert halve sekund
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 

#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("");
 
}

Referencer

  1. ↑ Webserver eksempel med LED ON/OFF
  2. ↑ AJAX introduktion ved w3schools.com
Hentet fra "https://www.htxarduino.dk/index.php?title=WeMOS_AD-eksempel&oldid=1744"