ESP32 jako jednoduchý server

Modul ESP32 je díky integrované Wi-Fi a výhodnému poměru výkon/cena ideálním nástrojem pro projekty internetu věcí (IoT), kde může sloužit jako samostatný webový server pro řízení nebo měření. V roli serveru modul nikam sám aktivně „netelefonuje“, ale pasivně naslouchá a čeká, až se k němu připojí jiné zařízení (klient), kterému následně poskytne data nebo splní jeho příkaz.

V dnešním článku si ukážeme, jak lze poměrně jednoduše pomocí Wi-Fi sítě vzdáleně řídit a načítat výstupy modulu ESP32, který tak může sloužit jako IoT prvek naší inteligentní domácnosti. Také jsme se seznámili s tím, že modul ESP32 se nemusí připojovat pouze ke stávající síti Wi-Fi, ale může také vytvořit vlastní síť, která umožňuje připojení dalších zařízení přímo k ní. Těmto dvěma režimům jsme říkali režim STA (stanice) a režim SoftAP (přístupový bod). Budeme si tedy chtít ukázat, jak modul ESP32 může pracovat jako server v obou těchto různých režimech.

Asi každý očekává, že budeme vzdáleně přes Wi-Fi síť blikat LED 😀.

Tak pojďme na to!

Začneme zapojením, kdy k modulu ESP32 připojíme mezi zemnící pin GND a pin GPIO4 standardní červenou LED přes rezistor o odporu cca 100 Ω (viz následující schéma). Pokud LED ani rezistor nemáme, budeme si muset vystačit s vestavěnou LED na kitu, který pro naše experimenty používáme. Pokud to je standardní vývojový kit, např. Dev Module bývá vestavěná LED na pinu GPIO2 (v případě stařičké DEVKIT DOIT v 1 je to pin GPIO1):

ESP32 jako HTTP server – režim Station (STA)

Jako první příklad si ukážeme, jak nastavit ESP32 do režimu Station (STA) a zasílat webové stránky libovolnému připojenému klientovi v rámci stávající Wi-Fi sítě.

Náš program (píšeme jej v prostředí Arduino IDE) musí začít přidáním knihovny WiFi.h. Tato knihovna poskytuje metody Wi-Fi specifické pro modul ESP32, které potřebujeme volat pro připojení k síti. Poté též přidáme knihovnu WebServer.h, která nám přidá některé metody, které nám pomohou nastavit server a zpracovávat příchozí požadavky HTTP, aniž bychom se museli starat o podrobnosti implementace na nízké úrovni.

Když nastavujeme modul ESP32 v režimu STA musíme nastavit SSID (jméno sítě) a heslo sítě. Jméno Wi-Fi sítě, ke které se chceme připojit a platné heslo při přihlášení vepíšeme do hodnoty proměnných ssid a password:

Dále musíme deklarovat objekt knihovny WebServer, abychom měli přístup k jejím funkcím. Konstruktor tohoto objektu má jako vstupní parametr hodnotu port, což je číslo portu, kde bude server naslouchat. Protože je výchozí hodnota portu pro http obvykle hodnota 80, použijeme tuto hodnotu. Díky tomu můžete přistupovat k serveru, aniž byste museli zadávat port v adrese URL.

Dále musíme deklarovat vše potřebné pro náš projekt, kupříkladu GPIO pin modulu ESP32, ke kterému například připojíme přes patřičný rezistor LED diodu, aby náš ovládací server mohl něco ovládat. Deklarujeme tedy GPIO pin a počáteční stav připojené LED diody.

Tím máme deklarováno vše potřebné. Nyní musíme modul ESP32 připojit k Wi-Fi síti a je třeba se věnovat zachytávání a zpracování požadavků, které nám budou připojení klienti zasílat – v našem jednoduchém příkladu to budou dotazy: zašli ovládací HTML stránku, rozviť LED a zhasni LED.

Funkce uvnitř procedury Setup()

Náš budoucí ovládací/měřící server se musí před jeho skutečným spuštěním ještě nakonfigurovat. K tomu slouží procedura Setup(), která se spouští jen jednou po startu modulu. V této proceduře nejdříve otevřeme sériové připojení pro účely ladění a nastavíme GPIO pin, na kterém je LED, na režim OUTPUT (digitální výstup).

Nyní již nezbývá, než se připojit k Wi-Fi síti. V následující ukázce kódu to řešíme pomocí několika příkazů, ale v článku Wi-Fi přístup k modulu ESP32 jsme si ukazovali, jak vytvořit vlastní modul, který do projektu přidává funkci řešící připojení. Takže je zde možné použít i toto rozšíření.

Připojení k Wi-Fi síti provádíme pomocí funkce WiFi.begin(). Zatímco se ESP32 pokouší připojit k síti, kontrolujeme stav připojení pomocí funkce WiFi.status(). Čekáme, až funkce vrátí stav odpovídající konstantě WL_CONNECTED, což odpovídá úspěšnému připojení k síti Wi-Fi.

Tento způsob řešení není dobrý, neboť pokud nedojde k připojení, například kvůli neplatným údajům SSID a hesla, program uvízne v nekonečné smyčce. V tomto směru by bylo lepší použít alespoň nějaký čítač průběhu smyčkou a po jeho určité hodnotě smyčku ukončit. Zde se však chceme zabývat funkcí serveru, takže nám tento způsob připojení nyní dostačuje.

Jakmile se modul ESP32 připojí k síti, vytiskneme na Serial Monitor IP adresu modulu pomocí funkce WiFi.localIP().

Abychom mohli zpracovávat příchozí požadavky HTTP, musíme určit, který kód se má spustit, když je zaslán dotaz na konkrétní URL adresu. K tomu použijeme metodu server.on, která má dva parametry. První z nich je zaslaná URL a druhá je název funkce, kterou při tomto dotazu provést. Zadaná adresa URL je relativní cesta   ukážeme si to přímo na programovém kódu.

Například první řádek níže uvedené části kódu ukazuje, že když server obdrží požadavek HTTP na cestu root (tedy relativní cesta:  / ), spustí proceduru nazvanou handle_OnConnect(), kterou ještě budeme muset naprogramovat.

Z uvedené ukázky kódu také vidíme, že jsme přiřadili dotazu /ledon proceduru pro rozsvícení LED (nazvanou handle_ledon()) a adrese /ledoff proceduru pro zhasnutí (handle_ledoff()).

O.K, ale co to znamená? A co z toho plyne?

To už je právě ta možnost vzdáleného řízení. Bude-li mít náš server tvořený modulem ESP32 a připojený do naší domácí Wi-Fi kupříkladu přiřazenou IP adresu 192.168.8.105, můžeme si na libovolném zařízení (mobil, tablet, PC, jiný modul ESP32 apod.) se na tuto adresu připojit – například běžným webovým prohlížečem. Zkrátka do adresní řádky libovolného webového prohlížeče (Chrome, Firefox, Safari…) napíšeme: http://192.168.8.105 a odešleme. Jelikož je toto dotaz na základní adresu (tzv. root), spustí se na modulu ESP32 procedura handle_OnConnect(). A ta může dělat cokoliv. Třeba, jak dále uvidíme, vrátit našemu webovému prohlížeči nějakou webovou stránku.

Jakmile odešleme na náš server dotaz na adresu http://192.168.8.105/ledoff spustí se na modulu ESP32 funkce handle_ledoff(). Tak jsme to přece nyní nastavili! Ale co tato funkce udělá, je zcela na nás. Nám nyní asi bude stačit, když nastaví pin GPIO4 na hodnotu HIGH, čímž rozsvítí připojenou LED.

Máme tedy definováno, co má server dělat, když zadáme „ty správné“ adresy. Ale pro správný běh serveru bychom měli specifikovat i to, co by měl server dělat, pokud klient požaduje jinou adresu URL, než je uvedeno pomocí server.on() – tedy nějakou tu „nesprávnou“ adresu. V tom případě potřebujeme, aby server odpověděl stavem HTTP 404 (Nenalezeno) a příslušnou zprávou pro uživatele. To učiníme pomocí funkce server.onNotFound(), kde určíme, co by se mělo v takovou chvíli spustit (zde procedura handle_NotFound):

Máme-li vše připravené, můžeme spustit náš server.

Funkce uvnitř procedury loop()

Abychom zvládli obsloužit skutečné příchozí požadavky HTTP, musíme cyklicky volat proceduru handleClient() objektu serveru. Ve smyčce loop() také budeme měnit stav LED podle logické proměnné LEDstatus, kterou budeme nastavoval ve funkcích handle_on() a handle_ledoff(). Pokud bychom v těchto funkcích přímo nastavovali příslušný GPIO pin, nemuselo by se toto řešit zde. Obecně (podobně jako u rutin přerušení) se ale většinou v těchto funkcích řeší jen rychlé nastavení příznaků a náročnější práce jen až v hlavní smyčce. Svým způsobem to i více zapadá do filozofie stylu programování tzv. stavového automatu (FSM), o které si píšme ve článku: Programujeme ESP32 jako stavový automat.

Tím máme hlavní nekonečnou smyčku loop() vyřízenou.

Spousta práce nás ale ještě čeká. Nyní musíme vytvořit funkci, kterou jsme připojili k URL adrese root ( / ) pomocí server.on. Vzpomínáte si?

Kromě nastavení stavu LED na zhasnuto (počáteční stav LED) se spíše zaměřme na to, abychom mohli reagovat na HTTP požadavek připojeného klienta. K tomu použijeme metodu server.send(), která připojenému zařízení odešle odpověď.

Přestože tuto metodu lze volat s různou sadou argumentů, její nejjednodušší forma se skládá se ze tří argumentů: z kódu odpovědi HTTP, typu obsahu a samotného obsahu. V našem případě tedy posíláme kód 200, což je jeden ze stavových kódů HTTP, který zde odpovídá odpovědi OK. Typ obsahu nastavujeme jako text/html a nakonec, jako třetí parametr voláme funkci SendHTML(), která nám dynamicky vytvoří stránku HTML obsahující stav LED diody.

Stejně tak musíme vytvořit funkce pro zpracování požadavků na zapnutí/vypnutí LED a chybovou stránku 404.

Zobrazení webové stránky HTML

Funkce SendHTML() je určená pro generování webové stránky, kterou zobrazí server ESP32, kdykoli obdrží požadavek od webového klienta. Tato funkce vytvoří kód HTML jako textový řetězec, který vrátí funkci server.send() (viz dříve). Funkce SendHTML() přebírá stav LED diody jako parametr pro dynamické generování obsahu HTML.

První text, který byste měli při odesílání HTML stránky vždy odeslat, je deklarace <! DOCTYPE>, která označuje, že odesíláme kód HTML.

Další prvek <meta> činí webovou stránku responzivní v libovolném webovém prohlížeči. Dále pak značka <title> nastavuje název stránky. Toto není žádné programování modulu ESP32, toto je psaní webové stránky, tedy běžné HTML   jen jej nyní skládáme do řetězové proměnné pro odeslání odpovědi serveru.

Aby naše webová stránka vypadala „trochu k světu“, přidáme i nějaké to CSS pro stylování vzhledu webové stránky. Vybereme písmo „monospace“, definujeme obsah, který má být zobrazen jako vložený blok a zarovnán uprostřed.

Následující kód pak nastaví barvu, písmo a okraj kolem textu, HTML značek H1, H3 a p.

Na tlačítko se aplikuje také určitý styl s vlastnostmi, jako je barva, velikost, okraj atd. Tlačítko ZAPNOUT a VYPNOUT má jinou barvu pozadí, zatímco vlastnost „action“ zajišťuje efekt kliknutí na tlačítko.

Po nastavení CSS stylu můžeme uzavřít hlavičku HTML dokumentu a v části BODY je nastaven zobrazovaný obsah webové stránky.

K dynamickému generování tlačítek a stavu LED používáme příkaz if. V závislosti na stavu GPIO pinu se tedy zobrazí tlačítko ON/OFF.

Obdobně bychom vytvořili odezvu pro zadání špatné stránky (kód 404). Asi už bude nejlepší se podívat na celý kód jako celek.

Níže je uveden kód celý, stačí jej zkopírovat do Arduino IDE a nahrát do modulu ESP32:

Kód (mód STA):

#include <WiFi.h>
#include <WebServer.h>

const char* ssid = "Tady-ma-byt-jmeno-site";  // Enter SSID here
const char* password = "Sem-je-treba-napsat-heslo";  //Enter Password here

WebServer server(80);

uint8_t LEDpin = 4;
bool LEDstatus = LOW;

void setup() {
   Serial.begin(115200);
   delay(100);
   pinMode(LEDpin, OUTPUT);

   WiFi.mode(WIFI_STA);

   Serial.println("Connecting to ");
   Serial.println(ssid);

   //connect to your local wi-fi network
   WiFi.begin(ssid, password);

   //check wi-fi is connected to wi-fi network
   while (WiFi.status() != WL_CONNECTED) {
      delay(1000);
      Serial.print(".");
   }

   Serial.println();
   Serial.println("Wi-Fi connected!");
   Serial.print("Got IP: ");
   Serial.println(WiFi.localIP());

   server.on("/", handle_OnConnect);
   server.on("/ledon", handle_ledon);
   server.on("/ledoff", handle_ledoff);
   server.onNotFound(handle_NotFound);

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

void loop() {
   server.handleClient();
   if(LEDstatus) {
      digitalWrite(LEDpin, HIGH);
   } else {
      digitalWrite(LEDpin, LOW);
   }
}

void handle_OnConnect() {
   LEDstatus = LOW;
   server.send(200, "text/html", SendHTML(LEDstatus));
}

void handle_ledon() {
   LEDstatus = HIGH;
   Serial.println("GPIO4 Status: ON");
   server.send(200, "text/html", SendHTML(true));
}

void handle_ledoff() {
   LEDstatus = LOW;
   Serial.println("GPIO4 Status: OFF");
   server.send(200, "text/html", SendHTML(false));
}

void handle_NotFound(){
   server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t ledstat) {
   String ptr = "<!DOCTYPE html>\n<html>\n";
   ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
   ptr +="<title>LED Control</title>\n";
   ptr +="<style>\nhtml {font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
   ptr +="body{margin-top: 50px;} h1 {color: #444;margin: 50px auto 30px;} h3 {color: #444;margin-bottom: 50px;}\n";
   ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;";
   ptr +="text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
   ptr +=".button-on {background-color: #3498db;}\n";
   ptr +=".button-on:active {background-color: #2980b9;}\n";
   ptr +=".button-off {background-color: #34495e;}\n";
   ptr +=".button-off:active {background-color: #2c3e50;}\n";
   ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
   ptr +="</style>\n";
   ptr +="</head>\n";
   ptr +="<body>\n";
   ptr +="<h1>ESP32 Web Server</h1>\n";
   ptr +="<h3>Using Station(STA) Mode</h3>\n";

   if (ledstat) {
      ptr +="<p>LED Status: ON</p><a class=\"button button-off\" href=\"/ledoff\">OFF</a>\n";
   } else {
      ptr +="<p>LED Status: OFF</p><a class=\"button button-on\" href=\"/ledon\">ON</a>\n";
   }

   ptr +="</body>\n";
   ptr +="</html>\n";

   return ptr;
}

Po nahrání programu do modulu ESP32 otevřete Sériový monitor s přenosovou rychlostí 115200 a stiskněte na modulu ESP32 tlačítko RESET. Pokud je vše v pořádku, modul se přihlásí do Wi-Fi sítě a získá z vašeho Wi-Fi routeru dynamickou IP adresu, kterou zobrazí společně se zprávou: HTTP server started.

Poté otevřete internetový prohlížeč na zařízení (PC, tablet, mobil) připojeném na téže Wi-Fi. Do adresního řádku zadejte IP adresu modulu ESP32. Měla by se načíst webová stránka, která ovládá a zobrazuje aktuální stav LED.

Jakmile kliknete na tlačítko ON modul ESP32 obdrží požadavek /ledon. Tím zapne LED a zobrazí webovou stránku s aktualizovaným stavem LED.

ESP32 jako HTTP server – režim Access Point (AP)

Jak naznačuje nadpis, tento příklad ukazuje, jak z modulu ESP32 udělat přístupový bod (AP) a odesílat webové stránky libovolnému připojenému klientovi. Nebude tedy třeba se přihlašovat k existující Wi-Fi, ale modul ESP32 si vytvoří Wi-Fi svojí.

Program je obdobný předešlému, jediný rozdíl je v nastavení Wi-Fi. Začínáme tedy stejně, tedy knihovnami WiFi.h a WebServer.h.

Podobně předešlému, i když nastavujeme ESP32 v režimu přístupového bodu (AP), musíme nastavit SSID, heslo. Zde nejde o jméno a heslo sítě, do které se potřebujeme modulem ESP32 přihlásit, ale název a heslo sítě, kterou modul vytvoří. Tyto údaje budou muset znát zařízení, které se budou moci připojit do sítě modulu ESP32. Na rozdíl od předešlého příkladu, kde byl modul ESP32 v režimu STA, tedy byla IP přiřazena dynamicky, zde si nastavíme IP adresu, masku podsítě IP a bránu IP napevno.

Proč?

Z jednoduchého a prostého důvodu – abychom ji věděli. Pokud bychom tuto adresu nenastavili napevno, modul ESP32 by si mohl vytvořit svou – zpravidla to bývá výchozí hodnota 192.168.4.1. Pevné nastavení IP zde není nutné, protože se nám IP pak ukáže v sériovém monitoru prostředí Arduino. Ale pokud by modul ESP32 pracoval jako AP samostatně, bez jakéhokoliv výstupu, na kterém by IP mohla zobrazit, museli bychom ji hledat v podrobnostech připojení na straně klienta. Takto máme jistotu!

Další změna programu se odehrává až v proceduře Setup(), kde nastavíme měkký přístupový bod pro vytvoření sítě Wi-Fi. To provedeme za pomoci deklarovaných proměnných SSID, hesla, IP adresy, masky podsítě IP a brány IP.

Tím máme hotovo!

Další část programu je totožná s předchozím příkladem. Můžeme se tedy podívat na celý kód:

Kód (mód AP):

#include <WiFi.h>
#include <WebServer.h>

/* Put your SSID & Password */
const char* ssid = "Sit modulu ESP32";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

WebServer server(80);

uint8_t LEDpin = 4;
bool LEDstatus = LOW;

void setup() {
   Serial.begin(115200);
   pinMode(LEDpin, OUTPUT);

   WiFi.mode(WIFI_AP);
   WiFi.softAPConfig(local_ip, gateway, subnet);
   WiFi.softAP(ssid, password);
   delay(100);

   server.on("/", handle_OnConnect);
   server.on("/ledon", handle_ledon);
   server.on("/ledoff", handle_ledoff);
   server.onNotFound(handle_NotFound);

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

void loop() {
   server.handleClient();
   if (LEDstatus) {
      digitalWrite(LEDpin, HIGH);
   } else {
      digitalWrite(LEDpin, LOW);
   }
}

void handle_OnConnect() {
   LEDstatus = LOW;
   server.send(200, "text/html", SendHTML(LEDstatus));
}

void handle_ledon() {
   LEDstatus = HIGH;
   Serial.println("GPIO4 Status: ON");
   server.send(200, "text/html", SendHTML(true));
}

void handle_ledoff() {
   LEDstatus = LOW;
   Serial.println("GPIO4 Status: OFF");
   server.send(200, "text/html", SendHTML(false));
}

void handle_NotFound(){
   server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t ledstat){
   String ptr = "<!DOCTYPE html>\n<html>\n";
   ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
   ptr +="<title>LED Control</title>\n";
   ptr +="<style>\nhtml {font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
   ptr +="body {margin-top: 50px;} h1 {color: #444;margin: 50px auto 30px;} h3 {color: #444;margin-bottom: 50px;}\n";
   ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;";
   ptr +="text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
   ptr +=".button-on {background-color: #3498db;}\n";
   ptr +=".button-on:active {background-color: #2980b9;}\n";
   ptr +=".button-off {background-color: #34495e;}\n";
   ptr +=".button-off:active {background-color: #2c3e50;}\n";
   ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
   ptr +="</style>\n";
   ptr +="</head>\n";
   ptr +="<body>\n";
   ptr +="<h1>ESP32 Web Server</h1>\n";
   ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

   if (ledstat) {
      ptr +="<p>LED Status: ON</p><a class=\"button button-off\" href=\"/ledoff\">OFF</a>\n";
   } else {
      ptr +="<p>LED Status: OFF</p><a class=\"button button-on\" href=\"/ledon\">ON</a>\n";
   }

   ptr +="</body>\n";
   ptr +="</html>\n";

   return ptr;
}

Přístup na webový server v režimu AP

Po nahrání programu zprvu postupujte jako v předešlém případě, tedy: otevřete Sériový monitor s přenosovou rychlostí 115200 a stiskněte tlačítko RESET na modulu ESP32. Pokud je vše v pořádku, zobrazí se zpráva HTTP server started.

Dále vezměte jakékoli zařízení, kterým se můžete připojit k síti Wi-Fi (mobil, tablet, PC atd.). Vyhledejte síť s názvem „Sit modulu ESP32“ a připojte se heslem 12345678.

Po připojení k síti „Sit modulu ESP32“ spusťte na svém zařízení internetový prohlížeč a odkažte na adresu modulu ESP32, tedy na 192.168.1.1. Modul ESP32 by měl zobrazit webovou stránku pro ovládání LED diody.

Postup ovládání je již stejný – kliknutím na tlačítko ON obdrží modul ESP32 požadavek /ledon, poté zapne LED a zobrazí webovou stránku s aktualizovaným stavem LED.

Poznámka na konec

• V případě režimu AP jsme si jistě všimli pevného nastavení IP adresy, které má svůj význam. Pevné nastavení IP je však možné i v případě STA. V naší výše uvedené ukázce režimu STA byla IP adresa přiřazena dynamicky, ale někdy (kupříkladu kvůli požadavku správce sítě) je třeba i v případě STA nastavit IP adresu napevno.
  
  Kód pak bude vypadat následovně (čísla IP adres se mohou lišit dle požadavků Vašeho správce sítě):

Závěrem

Tento článek měl za úkol představit dvě základní možnosti vzdáleného řízení modulu ESP32 pomocí Wi-Fi sítě. Pochopitelně výše uvedené kódy nejsou dogma a lze je jakkoliv modifikovat podle potřeby pro konkrétní projekt. Snad v některém z dalších článků se pustíme do nějaké konkrétní a „užitečné“ aplikace. Myslím, že modul ESP32 včetně mnoha svých modifikací si naši pozornost ještě zaslouží.

Modul ESP32 začíná být na internetu poměrně dobře dokumentován a objevuje se řada příkladů a tipů na různé aplikace. Bohužel zatím jde většinou jen o anglické webové stránky, tak snad tento článek aspoň trochu pomohl rozšířit tu publikační českou minoritu.