ESP WiFi Webserver

S deskami ESP32 a ESP8266 už jste se zajisté setkali v našich starších návodech. Jedno z oblíbených použití těchto čipů je WiFi Webserver. V tomto případě se ESP dokáže připojit na domácí WiFi síť a my pak můžeme v ostatních počítačích či chytrých zařízeních vidět výpis údajů z ESP.
Já jsem si pro tento návod připravil rozšířený webserver, který nejen zobrazuje údaje z analogového pinu, ale dokáže také pomocí dvou odkazů řídit zapnutí a vypnutí LED diody.

Pro univerzálnost jsem v ukázkovém kódu vytvořil 2 varianty pro ESP32 a ESP8266, které jsou podmíněné tím, jestli zadefinujeme text „ESP32“ či nikoliv. Tento define má pak vliv na použité knihovny, piny zařízení a objekt webserveru. Pokud tedy budete používat pro tento příklad desku ESP32, stačí odkomentovat řádek 6. Pokud budete chtít používat desky ESP8266, řádek 6 necháte zakomentovaný.
Na začátku programu se nachází připojení všech potřebných knihoven a vytvoření proměnných s uloženým názvem a heslem pro WiFi síť, do které se budeme připojovat. Jako další je provedena inicializace webserveru na portu 80 a nastaven propojovací pin indikační LED diody a analogového měřícího pinu.
Podprogram zpravaHlavni obsahuje kód, který se provede při přístupu na hlavní stránku. Jako první vytvoříme proměnné s načtením informací o analogové hodnotě z nastaveného pinu společně s časem od spuštění Arduina. Následně vytvoříme proměnnou se zprávou, do které postupně přidáme všechny chtěné informace. Na konci provedeme příkazem send vytištění zprávy se statusem 200, tedy OK.
Podprogram zpravaNeznamy funguje obdobným způsobem, jen slouží pro informování o přístupu na neexistující odkaz webserveru. Opět tedy vypíšeme kompletní informace o neexistujícím odkazu včetně metody a argumentů, s kterými bylo přistupováno.
Podprogram setup na svém začátku obsahuje nastavení LED diody jako výstupní společně s jejím vypnutím. Následně zahájíme komunikaci po sériové lince a zahájíme komunikaci s WiFi routerem pomocí našich uložených přihlašovacích údajů. Po zahájení následuje while smyčka, která vyčkává na potvrzení připojení a v mezičase tiskne tečky po sériové lince. Jakmile jsme úspěšné připojení, vytiskneme informace o připojení po sériové lince včetně názvu připojené sítě a přidělené IP adrese z routeru. Poté proběhne kontrola MDNS responderu. Jako další je nutné přidělit tištění zpráv k jednotlivým adresám. Pro přístup na IP adresu samotnou tedy například přidělíme volání podprogramu zpravaHlavni. Avšak není nutné pro každou zprávu vytvářet podprogram, proto tedy následuje ukázka s odkazem /ukázka, který obsahuje vytištění krátké zprávy. A pro řízení LED diod si přidáme dvě další možnosti, u kterých provedeme taktéž nastavení stavu LED diody a vytištění hlavní stránky. Pro přístup na jakoukoli jinou nedefinovanou stránku slouží nastavení onNotFound, ke kterému přidělíme náš podprogram zpravaNeznamy. Po veškerém nastavení pak stačí už jen zahájit aktivitu webserveru.
Nekonečná smyčka loop v tomto případě obsahuje pouze kontrolování připojených klientů, kdy při detekci klienta už sám program provede veškerou práci skrze nastavení provedená v podprogramu setup. A za tímto příkazem se nachází krátká pauza před novým během smyčky.

// ESP Web Server
// kompatibilní s ESP32 a ESP8266
// navody.dratek.cz

// pro použití s ESP32, odkomentujte řádek níže
// #define ESP32

// připojení potřebných knihoven
#ifdef ESP32
  #include <WiFi.h>
  #include <WiFiClient.h>
  #include <WebServer.h>
  #include <ESPmDNS.h>
#else
  #include <ESP8266WiFi.h>
  #include <WiFiClient.h>
  #include <ESP8266WebServer.h>
  #include <ESP8266mDNS.h>
#endif
// vytvoření proměnných s názvem WiFi sítě a heslem
const char* nazevWifi = "Ardwifi";
const char* hesloWifi = "arduino1234";

// incializace webserveru na portu 80
#ifdef ESP32
  WebServer server(80);
#else
  ESP8266WebServer server(80);
#endif
// propojovací pin indikační LED diody a analogového pinu
#ifdef ESP32
  #define LEDka 31
  #define analogPin 32
#else
  #define LEDka LED_BUILTIN
  #define analogPin A0
#endif

// podprogram s hlavní zprávou, která je vytištěna
// při zadání IP adresy do prohlížeče
void zpravaHlavni() {
  // načtení hodnoty analogového pinu a času
  // od spuštění Arduina ve formátu String
  String analog = String(analogRead(analogPin));
  String cas = String(millis() / 1000);
  // vytvoření zprávy, která bude vytištěna
  // v prohlížeči (<br> znamená nový řádek)
  String zprava = "Ahoj Arduino svete!<br>";
  zprava += "Analogovy pin A0: ";
  zprava += analog;
  zprava += "<br>Cas od spusteni Arduina je ";
  zprava += cas;
  zprava += " vterin.<br><br>";
  zprava += "Stav LED: ";
  zprava += digitalRead(LEDka);
  zprava += "<br><br>";
  zprava += "<a href=\"/ledON\"\">Zapni LEDku</a><br><br>";
  zprava += "<a href=\"/ledOFF\"\">Vypni LEDku</a>";
  // vytištění zprávy se statusem 200 - OK
  server.send(200, "text/html", zprava);
}

// podprogram s chybovou zprávou, která je vytištěna
// při zadání IP adresy s neexistující podstránkou
void zpravaNeznamy() {
  // vytvoření zprávy s informací o neexistujícím odkazu
  // včetně metody a zadaného argumentu
  String zprava = "Neexistujici odkaz\n\n";
  zprava += "URI: ";
  zprava += server.uri();
  zprava += "\nMetoda: ";
  zprava += (server.method() == HTTP_GET) ? "GET" : "POST";
  zprava += "\nArgumenty: ";
  zprava += server.args();
  zprava += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    zprava += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  // vytištění zprávy se statusem 404 - Nenalezeno
  server.send(404, "text/plain", zprava);
}

void setup() {
  // nastavení LED diody jako výstupní a její vypnutí
  pinMode(LEDka, OUTPUT);
  digitalWrite(LEDka, LOW);
  // zahájení komunikace po sériové lince
  Serial.begin(115200);
  // zahájení komunikace po WiFi s připojením
  // na router skrze zadané přihl. údaje
  WiFi.begin(nazevWifi, hesloWifi);
  // čekání na úspěšné připojení k routeru,
  // v průběhu čekání se vytiskne každých
  // 500 milisekund tečka po sériové lince
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // odřádkování a výpis informací o úspěšném připojení
  // včetně přidelené IP adresy od routeru
  Serial.println("");
  Serial.print("Pripojeno k WiFi siti ");
  Serial.println(nazevWifi);
  Serial.print("IP adresa: ");
  Serial.println(WiFi.localIP());
  // kontrola funkčnosti MDNS
  if (MDNS.begin("espwebserver")) {
    Serial.println("MDNS responder je zapnuty.");
  }
  // nastavení vytištění hlavní zprávy po přístupu
  // na samotnou IP adresu
  server.on("/", zpravaHlavni);
  // pokud chceme vytisknout pouze menší zprávy, není
  // nutné je vytvářet v podprogramech jako zpravaHlavni,
  // viz. ukázka níže

  // nastavení vytištění jiné zprávy po přístupu na
  // podstránku ukazka, tedy např. 10.0.0.31/ukazka
  server.on("/ukazka", []() {
    String zprava = "Ukazka odkazu pro vice stranek.";
    server.send(200, "text/plain", zprava);
  });
  // nastavení stavu LED diody na zapnuto
  server.on("/ledON", []() {
    // zapnutí LED diody
    digitalWrite(LEDka, HIGH);
    Serial.println("Zapni LED.");
    // vytištění hlavní stránky
    zpravaHlavni();
  });
  // nastavení stavu LED diody na vypnuto
  server.on("/ledOFF", []() {
    // vypnutí LED diody
    digitalWrite(LEDka, LOW);
    Serial.println("Vypni LED.");
    // vytištění hlavní stránky
    zpravaHlavni();
  });
  // nastavení vytištění informací o neznámém
  // odkazu pomocí podprogramu zpravaNeznamy
  server.onNotFound(zpravaNeznamy);
  // zahájení aktivity HTTP serveru
  server.begin();
  Serial.println("HTTP server je zapnuty.");
}

void loop() {
  // pravidelné volání detekce klienta,
  // v případě otevření stránky se provedou
  // funkce nastavené výše
  server.handleClient();
  // krátká pauza před novým během smyčky
  delay(10);
}

Po nahrání uvedeného ukázkového kódu do Arduino ESP desky dostaneme například tento výsledek v Sériovém monitoru a v prohlížeči při přístupu na samotnou IP adresu:

..
Pripojeno k WiFi siti Ardwifi
IP adresa: 192.168.1.18
MDNS responder je zapnuty.
HTTP server je zapnuty.
Zapni LED.
Vypni LED.

Ahoj Arduino svete!
Analogovy pin A0: 0
Cas od spusteni Arduina je 236 vterin.

Stav LED: 0

Zapni LEDku

Vypni LEDku

ESP WiFi webserver je šikovná aplikace desek ESP32 a ESP8266, díky které můžeme vytvořit nejen měřící, ale řídící bezdrátové zařízení. Může se tedy hodit například pro řízení osvětlení, spínání zátěže pomocí relé a další. A při použití služby MDNS si ani nemusíme pomatovat přidělenou IP adresu, protože stačí do prohlížeče zadat název http://espwebserver/.

Seznam použitých komponent:
https://dratek.cz/arduino/1581-esp-32s-esp32-development-board-2-4ghz-dual-mode-wifi-bluetooth-antenna-module-1493028819.html
https://dratek.cz/arduino/1457-esp8266-esp-12e-ota-wemos-d1-ch340-wifi-arduino-ide-uno-r3.html