SAMSUNG_112021 SAMSUNG_112021 SAMSUNG_112021 Advertisement

IoT a robotika: webový server na mikrokontroléri ESP32

0

U mnohých zariadení s mikrokontrolérmi je dôležité mať možnosť ovládania na diaľku pomocou smartfónu, alebo počítača a taktiež sledovania prevádzkových, prípadne diagnostických údajov. Pri ovládaní mobilnou aplikáciou využívajúcou pripojenie k riadiacej doske s mikrokontrolérom cez bluetooth, ktoré sme ukázali v predchádzajúcom čísle, musí byť smartfón, prípadne tablet v dosahu signálu, čiže maximálne 10 - 15 metrov od zariadenia.

Video ukazuje ako funguje webový server na vývojovej doske s ESP 32

Aby ste sa mohli k zariadeniu pripojiť odkiaľkoľvek, musí mať pripojenie k internetu a disponovať softvérom, ktorý takéto ovládanie a zobrazovanie hodnôt umožní. Najjednoduchšie a najuniverzálnejšie z pohľadu používateľa je ovládanie pomocou webového prehliadača, ktorý disponuje každý smartfón, tablet aj počítač bez ohľadu na platformu.  Používateľovi v takom prípade stačí zadať URL adresu priradenú zariadeniu, autentifikovať sa a môže zo zariadením interagovať prostredníctvom ovládacích prvkov zobrazených na webovej stránke. Aby to mohlo takto fungovať musí riadiaca jednotka okrem ovládania hardvéru zariadenia plniť aj funkciu webového servera Webový server v riadiacej jednotke bude generovať kompletné používateľské rozhranie, čiže textové, prípadne grafické prvky na zobrazovanie rôznych údajov vo vhodnej forme a taktiež prvky na ovládanie rôznych funkcií, či nastavovanie parametrov.

Vývojová doska s ESP32

WiFi režimy ESP32

Základným predpokladom ovládania cez webové rozhranie je, aby použitá mikrokontrolérová platforma podporovala pripojenie k internetu, či už cez eternetový kábel, alebo cez WiFi. Pripojenie cez WiFi je vo väčšine prípadov praktickejšie.

Mikrokontrolérová platforma ESP 32 podporuje tri prevádzkové režimy Wi-Fi:

Režim stanice (STA) v ktorom sa ESP32 pripája k existujúcej WiFi sieti rovnako ako počítače, smartfóny a iné zariadenia, ktoré máme v domácnosti. Na pripojenie k routeru musí kód aplikácie obsahovať SSID siete a heslo. Router modulu ESP32 priradí lokálnu IP adresu.

Režim soft prístupového bodu (AP) - modul ESP32 vytvára vlastnú sieť WiFi ako bezdrôtový router, takže sa k nej môžu pripojiť ďalšie stanice, ako sú smartfóny, počítače, prípadne aj ďalšie moduly ESP32 v režime STA. Pri konfigurácii ESP32 v režime AP musíte nastaviť SSID a heslo pre sieť, aby sa k tejto sieti mohli pomocou týchto autentifikačných údajov pripojiť ďalšie zariadenia. Prívlastok soft znamená, že klienti sú pripojení len k ESP32 a nemajú internetové pripojenie.

Režim Station + Soft AP  kde ESP32 funguje ako stanica aj ako prístupový bod.

Pre webový server môžete využiť režimy STA aj AP, avšak výhodnejší je režim STA, kde všetky zariadenia a aj ESP32 sú pripojené k routru, takže majú prístup nielen na lokálny webový server bežiaci na ESP32, ale aj k internetu. V našom príklade použijeme režim STA. Aby sme mohli simulovať ovládanie zariadenia, využijeme LED na prototypovej doske, ktorá je u väčšiny dosiek pripojená na pin GPIO2. Ak doska, ktorú budete využívať internú LED nemá, pripojíte LED k vhodnému voľnému portu, napríklad GPIO 16 cez obmedzovací rezistor 220 – 330 Ω.

Komunikácia klienta s webovým serverom

Skôr než začneme programovať webový server pre mikrokontrolérovú platformu ESP32, vysvetlíme ako komunikuje webový server webovým klientom. Komunikácia využíva protokol HTTP (Hyper Text Transfer Protocol). Komunikáciu zahajuje klient, ktorý odošle požiadavku na informácie zo servera. Webový server, ktorý môžeme nazvať aj listener, pretože počúva, čiže je čaká na požiadavku od klienta a odpovie na ňu vhodnou webovou stránkou. Ak sa požadovaná stránka nenájde, server odpovie známou chybou HTTP 404. Požiadavka aj odpoveď je v textovom formáte, takže je zrozumiteľná aj pre človeka.

Webový server požiadavku spracuje a pošle odpoveď. Tá sa začína príslušnou hlavičkou http protokolu a za ňou nasleduje kód webovej stránky vo formáte jazyka HTML (Hyper Text Markup Language). Jazyk HTML obsahuje údaje medzi takzvanými párovými značkami, nazývanými tagy. Prvý riadok stránky informuje prehliadač klienta, že nasledujúce informácie budú v  jazyku HTML. Obsah stránky je ohraničený tagmi a . Štandardne obsahuje hlavičku medzi tagmi  a a telo stránky zapuzdrené v tagoch a .

Klasické webové servery majú HTML kódy stránok aj ďalšie súbory, napríklad obrázky uložené vo svojom súborovom systéme. Stránky môžu byť aj aktívne, čiže môžu obsahovať JavaScriptový kód, ktorý sa interpretuje na strane klienta. 

Jednoduchý webový server ESP32 môže obsahovať HTML kód webovej stránky ako súčasť kódu aplikácie ktorá realizuje funkciu webového servera. Ak klient vykoná nejakú akciu napríklad klikne na tlačidlo, sever by mal vykonať požadovanú činnosť, napríklad rozsvietiť LED diódu, zopnúť relé, spustiť motor, natočiť hriadeľ servomotora, prípadne odmerať nejakú veličinu a výsledok poslať na server.

ESP32 s webovým serverom môžete ovládať z počítača, tabletu, smartfónu... z čohokoľvek, čo má vebový prehliadač 

Skôr než sa dostaneme ku generovaniu HTML stránok pre klientov, musíme najskôr vytvoriť kód na pripojenie ESP32 k WiFi. Využijeme knižnicu WiFi, ktorá je súčasťou implementácie podpory ESP32 do vývojového prostredia Arduino IDE. Pripojenie vytvoríme v procedúre setup(), ktorá sa aktivuje po spustení programu

#include
const char* ssid = "ssid_mojho_routra";
const char* password = "heslo";
WiFiServer espServer(80); //inštancia WiFi serveru na porte 80
 
void setup()
{
  WiFi.mode(WIFI_STA); //mód STA
  WiFi.begin(ssid, password);
  while(WiFi.status() != WL_CONNECTED)
  {
    delay(100);
  }
  delay(2000);
  espServer.begin();
  Serial.println("ESP32 Web Server spusteny");
}

Je to plne funkčný kód, avšak pripojenie k WiFi nejaký čas trvá a používateľ netuší čo sa deje a nedozvie sa ani IP adresu, ktorú zariadeniu s ESP32 pridelil router. Preto je vhodné používateľovi nejakým spôsobom zobraziť priebeh a výsledok pripojenia, napríklad na displeji, ak zariadenie nejaký displej má, rozsvietením LED označenej popisom Wifi. Aby sme v príklade zameranom na vytvorenie webového serveru neriešili okrajové veci, budeme stav signalizovať výpisom cez sériový port. Výpis budeme zobrazovať na vývojárskom počítači tak, že v menu  Nástroje aktivujeme položku Monitor sériového portu. Počas čakania na pripojenie budeme zobrazovať hviezdičky pribúdajúce v intervale 0,1 sekundy. Takže kód na pripojenie k WiFi doplnený o výpis cez sériový port bude

void setup()
{
  Serial.begin(115200);
  Serial.print("Pripájanie k: ");
  Serial.println(ssid);
  WiFi.mode(WIFI_STA); //mód STA
  WiFi.begin(ssid, password);
  while(WiFi.status() != WL_CONNECTED)
  {
    Serial.print("*");
    delay(100);
  }
  Serial.print("\n");
  Serial.print("Pripojené k: ");
  Serial.println(WiFi.SSID()); Serial.print("\n");
  delay(2000);
  Serial.println("Štart web servera...");
  espServer.begin();
  Serial.println("Server spustený");
  Serial.print("URL adresa: http://");
  Serial.println(WiFi.localIP()); Serial.print("\n");
}

V okne monitora sériového portu sa zobrazí

**********
Pripojené k: TP-Link_NZPRX
 
Spustanie web servera...
Web server spusteny
URL adresa: http:// 192.168.0.148

Ukážme príklad kódu jednoduchej HTML stránky, ktorú bude webový server posielať klientovi. Obsahuje informáciu o stave jednej LED a zobrazuje tlačidlo. Vynechali sme záhlavie obsahujúce definovanie štýlu a farby tlačidla

ESP32 Web Server

 

LED Vypnuta

Text HTML stránky sa generuje pomocou príkazu client.print("text"). Napríklad riadok

by sme vygenerovali príkazom

client.print("

"); 

Nakoľko text je v príkaze client.print("...") zapuzdrený v úvodzovkách, takže ďalšie úvodzovky, ktoré sú súčasťou HTML kódu vo vnútri textu by spôsobili problém. Preto pred úvodzovkami vo vnútri je znak obráteného lomítka.

HTML kód v našom príklade je statický. V reálnej aplikácii však webový server generuje stránky podľa aktuálnej situácie. V príklade je kód pre stav kedy LED nesvieti a na stránke klienta sa zobrazuje červené tlačidlo na zapnutie. Po jeho zapnutí server vygeneruje iný kód, ktorý signalizuje, že LED svieti a zobrazí zelené tlačidlo na jej vypnutie. Fragment kódu pre generovanie tela HTML stránky

//telo HTML stranky
client.println("");
client.println("

ESP32 Web Server

");
 
if(LEDPinHodnota == LOW)
{
  client.println("

LED vypnuta

");
  client.print("

"); 
}
else
{
  client.println("

LED zapnuta

");
  client.print("

");
}
client.println("");
client.println("");     

Aby ste sa dozvedeli pridelenú URL adresu spustite vo vývojovom prostredí Arduino IDE  monitor sériového portu Po preložení programu a jeho zavedení do ESP32 sa mikrokontrolér pokúsi na základe zadaných autentifikačných údajov pripojiť k vášmu routru. Ak sa mu to podarí, vypíše URL adresu. Túto adresu zadajte do prehliadača v ľubovoľnom zariadení a môžete cez webovú stránku ovládať LED a v reálnom zariadení samozrejme aj ďalšie funkcie.

Kompletný kód

#include
 
#define LedPin 2 //LED na doske na porte GPIO2
const char* ssid = "TP-Link_B9F8";
const char* password = "86618199";
int LEDPinHodnota;
 
WiFiServer espServer(80); //inštancia WiFi serveru na porte 80
String request;
 
void setup()
{
  Serial.begin(115200);
  pinMode(LedPin, OUTPUT);
  digitalWrite(LedPin, LOW);
  Serial.print("Pripajanie k: ");
  Serial.println(ssid);
  WiFi.mode(WIFI_STA); //mód STA
  WiFi.begin(ssid, password);
  while(WiFi.status() != WL_CONNECTED)
  {
    Serial.print("*");
    delay(100);
  }
  Serial.print("\n");
  Serial.print("Pripojené k: ");
  Serial.println(WiFi.SSID()); Serial.print("\n");
  delay(2000);
  Serial.println("Štart web servera...");
  espServer.begin();
  Serial.println("Server spustený");
  Serial.print("URL adresa: http://");
  Serial.println(WiFi.localIP()); Serial.print("\n");
  }
 
void loop()
{
  WiFiClient client = espServer.available(); //je klient dostupný?
  if(!client) {return;}
 
  Serial.println("Nový klient");
  boolean currentLineIsBlank = true;
  while (client.connected())
  {
    if (client.available())
    {
      char c = client.read();
      request += c;
      Serial.write(c);
      if (c == '\n' && currentLineIsBlank)  //novy alebo prazdny riadok ukonci poziadavku
      {
        // spracovanie requestu IP + LedPortON alebo LedPortOFF
        if (request.indexOf("/LedPortON") != -1)
        {
          Serial.println("LED zapnuta");
          digitalWrite(LedPin, HIGH);
          LEDPinHodnota = HIGH;
        }
        if (request.indexOf("/LedPortOFF") != -1)
        {
          Serial.println("LED vypnuta");
          digitalWrite(LedPin, LOW);
          LEDPinHodnota = LOW;
        }
       
       
        // HTTP Response
        client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/html");
        client.println("Connection: close");
        client.println(); //  prázdny riadok
 
        client.println("");
        client.println("");
        //hlavicka stranky s definíciami stylu tlacidiel
        client.println("");
        client.println("");
        client.println("");
        client.println("");
        client.println("");
        //telo HTML stranky
        client.println("");
        client.println("

ESP32 Web Server

");
       
        if(LEDPinHodnota == LOW)
        {
          client.println("

LED vypnuta

");
          client.print("

"); 
        }
        else
        {
          client.println("

LED zapnuta

");
          client.print("

");
        }
        client.println("");
        client.println("");     
        break;       
    }
    if(c == '\n')
    {
      currentLineIsBlank = true;
    }
    else if(c != '\r')
    {
      currentLineIsBlank = false;
    }
    }
  }
 
  delay(1);
  request = "";
  //client.flush();
  client.stop();
  Serial.println("Klient odpojeny");
  Serial.print("\n");
}

Po zadaní URL adresy do webového prehliadača sa zobrazí hlavná stránka, ktorú vygeneroval webový server. Ak nie je webový server pripojený do domény tak počítač, tablet, či smartfón, z ktorého sa k webovému serveru pripájate musí byť pripojený v tej istej sieti ako mikrokontrolér ESP 32.  

Ak si chcete vyskúšať zobrazovanie nameraných údajov, priamo na čipe ESP32 je integrovaný senzor merajúci intenzitu magnetického poľa, takže nemusíte zapájať žiadny hardvér, na zmenu zobrazovaných hodnôt stačí pohybovať doskou (v magnetickom poli Zeme), alebo nejakým magnetickým predmetnom okolo dosky.

Zobrazit Galériu

Luboslav Lacko

Všetky autorove články
ESP 32 IoT ESP32 robotika webový server webová aplikácia

Pridať komentár

Mohlo by vás zaujímať

Mohlo by vás zaujímať