Czech English
Robot klub Rychnov » Průvodce » IoT » 3. ESP8266 webserver

3. ESP8266 webserver

Martin Locker, 2019-07-17
připojujeme se do sítě

V minulém díle jsme přeložili a rozběhli první program. Dnes si použijeme wifi ESP8266 a naprogramujeme si jednoduchý webserver. Vyzkoušíme si přes webovou stránku ovládat LED a zobrazovat aktuální hodnotu vstupu.

Webserver - Hello World

Nejprve si zkusíme zprovoznit jednoduchý webserver na ESP8266. Ve zdrojovém kódu nastavíme správné údaje pro připojení do wifi sítě.
ESP8266_HelloWorld.ino
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

// Wi-Fi Settings
const char* ssid = "REPLACE_WITH_YOUR_SSID"; // Nahradte vasim jmenem site SSID
const char* password = "REPLACE_WITH_YOUR_PASSWORD"; // Nahradte heslem do vasi site

ESP8266WebServer server(80);

String html = "";
int count = 0;

void generateHTML()
{
  html="";
  html+= "<!DOCTYPE html>\n";
  html+= "<head>\n";
  html+= "</head>\n";
  html+= "<html>\n";
  html+= "<body>\n";
  html+= "\n";
  html+= "Hello World ";
  html+= count;
  html+= "\n";
  html+= "</body>\n";
  html+= "</html>\n";
}

//**********************************************************************
void handleRoot() {  
  count++;
  generateHTML();
  server.send(200, "text/html", html);
}

//************************************************************************
void handleNotFound(){
  server.send(200, "text/plain", "Invalid page");   
}

//*************************************************************** 
void setup(void){
  Serial.begin(115200);

  WiFi.mode(WIFI_STA);
  WiFi.persistent(false); 
  WiFi.begin(ssid, password);
  
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");
}

//*********************************************************************
void loop(void){   
  server.handleClient();
}


Přeložíme a nahrajeme program do vývojové desky a poté spustíme Sériový monitor a zkontrolujeme, zda se zařízení připojilo do naší sítě. Nyní již pouze do adresního řádku webového prohlížeče zadáme IP adresu, na kterou naše zařízení obdrželo. Zobrazená webová stránka obsahuje text "Hello World" a číslo, které informuje o počtu načtení stránky.

Ovládání led přes webovou stránku

Další aplikace bude webová stránka se dvěma tlačítky, která budou vzdáleně ovládat LED připojenou k ESP8266. Zapojení bude stejné jako v minulém díle, tj. LED připojená na pin D3.
V kódu tedy kromě požadavku na načtení stránky musíme ještě obsloužit požadavek na "stránku" s příkazem.
ESP8266_LedOnOff.ino
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

// Wi-Fi Settings
const char* ssid = "REPLACE_WITH_YOUR_SSID"; // Nahradte vasim jmenem site SSID
const char* password = "REPLACE_WITH_YOUR_PASSWORD"; // Nahradte heslem do vasi site

ESP8266WebServer server(80);

#define LED D3

String html = "";

void generateHTML()
{
  html="";
  html+= "HTTP/1.1 200 OK\n";
  html+= "Content-Type: text/html\n";  
  html+= "\n";
  html+= "<!DOCTYPE html>\n";
  html+= "<html>\n";
  html+= "<head>\n";
  html+= "</head>\n";
  html+= "\n";
  html+= "<body>\n";
  html+= "<a href=\"/output?led=on\"><button>Led ON</button></a>\n";
  html+= "<a href=\"/output?led=off\"><button>Led OFF</button></a>\n";
  html+= "</body>\n";
  html+= "</html>\n";
}

//**********************************************************************
void handleRoot() {  
  generateHTML();
  server.send(200, "text/html", html);
}

//**********************************************************************
void handleOutput() { 
  if (server.arg("led") != "") {   
    if (server.arg("led") == "on") {
      digitalWrite(LED, 1);
    } 
    if (server.arg("led") == "off") {
      digitalWrite(LED, 0);
    }     
  }
  handleRoot();
}

//************************************************************************
void handleNotFound(){
  server.send(200, "text/plain", "Invalid page");   
}

//*************************************************************** 
void setup(void){
  pinMode(LED, OUTPUT);
  Serial.begin(115200);

  WiFi.mode(WIFI_STA);
  WiFi.persistent(false); 
  WiFi.begin(ssid, password);
  
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/output", handleOutput); 
  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");
}

//*********************************************************************
void loop(void){   
  server.handleClient();
}


Po kontrole připojení v sériovém monitoru, zkusíme ve webovém prohlížeči načíst stránku. Po stisku tlačítek by se měl měnit stav připojené LED. To je způsobeno požadavkem na načtení stránky s parametrem /output?led=on, resp. /output?led=off.

Zobrazování měřených hodnot na webové stránce

Pro zobrazování měřených hodnot budeme potřebovat nějaký vstupní prvek. Proto si na analogový vstup ESP8266 připojíme podle obrázku potenciometr zapojený jako dělič napětí.
Schéma zapojení
Schéma zapojení
Zapojení na nepájivém kontaktním poli
Zapojení na nepájivém kontaktním poli
Zdrojový kód programu:
ESP8266_Potenciometr.ino
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

// Wi-Fi Settings
const char* ssid = "REPLACE_WITH_YOUR_SSID"; // Nahradte vasim jmenem site SSID
const char* password = "REPLACE_WITH_YOUR_PASSWORD"; // Nahradte heslem do vasi site

ESP8266WebServer server(80);

#define POTENCIOMETER A0

String html = "";
int value;

void generateHTML()
{
  html="";
  html+= "HTTP/1.1 200 OK\n";
  html+= "Content-Type: text/html\n";  
  html+= "\n";
  html+= "<!DOCTYPE html>\n";
  html+= "<html>\n";
  html+= "<head>\n";
  html+= "</head>\n";
  html+= "\n";
  html+= "<body>\n";
  html+= "Naměřená hodnota na analogovém vstupu: ";
  html+= value;
  html+= "</body>\n";
  html+= "</html>\n";
}

//**********************************************************************
void handleRoot() {  
  value = analogRead(POTENCIOMETER);
  generateHTML();
  server.send(200, "text/html", html);
}

//************************************************************************
void handleNotFound(){
  server.send(200, "text/plain", "Invalid page");   
}

//*************************************************************** 
void setup(void){
  pinMode(POTENCIOMETER, INPUT);
  Serial.begin(115200);

  WiFi.mode(WIFI_STA);
  WiFi.persistent(false); 
  WiFi.begin(ssid, password);
  
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");
}

//*********************************************************************
void loop(void){   
  server.handleClient();
}


Nyní se nám po načtení stránky v prohlížeči zobrazí aktuální hodnota na analogovém vstupu procesoru. Pro aktualizaci zobrazované hodnoty musíme znovu načíst stránku.

WWW stránky s inspirací

[1] Lampička ovládaná přes internet
Další díl ...