8. diel - Spracovanie dát z HTML formulára na module ESP-32

V predchádzajúcej lekcii, Odoslanie obrázkov na webový server na module ESP-32 , sme si predstavili spôsob nahrania obrázkov na webový server cez rozhranie SPIFFS.

V tomto tutoriále Internetu vecí s ESP-32 sa budeme opäť venovať práci s webovým serverom as rozhraním SPIFFS. Konkrétne si ukážeme, ako spracovať obsah jednotlivých polí z HTML formulára a ako s nimi pracovať ďalej.

Spracovanie dát z HTML formulára

Počas tohto projektu využijeme opäť nami už dobre známe rozhranie Serial Peripheral Interface Flash File System (SPIFFS), ktoré si už len veľmi stručne zrekapitulujeme. Toto rozhranie je v podstate flash pamäť na ukladanie súborov alebo obrázkov, ktorá má obmedzenú veľkosť. Minule sme vďaka nemu nahrali na server obrázky, v tejto lekcii však nahráme opäť klasické súbory, konkrétne súbor vo formáte HTML. Pre jednoduchosť CSS štýl vpíšeme do hlavičky HTML súboru.

V tomto projekte sa opäť nemusíme zaoberať žiadnymi schémami a zapájaním obvodov, vystačí nám iba samotný mikrokontrolér. Vrhneme sa teda na HTML súbor, ktorý bude obsahovať formuláre a štýl stránky.

Tvorba HTML súboru

Obsah tohto súboru je možné vyriešiť viacerými spôsobmi, my konkrétne vytvoríme tri samostatné formuláre s jediným textovým inputom, aby sme si ukázali princíp práce s viacerými formulármi na jednej stránke.

HTML súbor sa dá nahradiť priamo v kóde pre mikrokontrolér jediným reťazcom s rovnakým obsahom ako má externý HTML súbor. Pri použití externého súboru sa však čitateľnosť kódu pre ESP32 veľmi zlepší a navyše celý projekt rozčleníme do čiastkových súčastí.

Do tohto súboru, ako už bolo spomenuté vyššie, zahrnieme aj jednoduché CSS štylovanie stránky. Konečný súbor index.html bude vyzerať takto:

Zdarne sme zostavili štruktúru našej stránky, poďme sa teraz vrhnúť na hlavnú časť projektu, a to na program pre mikrokontroléry.

Program pre ESP-32

Kód bude opäť veľmi podobný programu z lekcie Odoslanie obrázkov na webový server na module ESP-32. Líšiť sa budú len a iba spôsoby spracovania požiadaviek z webového klienta. Začnime však klasicky hlavičkou programu:

Knižnice, ktoré používame, sú nám už aj dôverne známe. Napriek tomu si ich poďme opäť ľahko zrekapitulovať. Knižnica WiFi.h je v základnom IDE už zahrnutá a poskytuje funkcie pre pripojenie mikrokontroléra k Wi-Fi sieti. Knižnica ESPAsynchWebServer.h v základnej výbave IDE nie je, a preto je dôležité ju stiahnuť a nainštalovať. Z minulých lekcií už vieme ako. A konečne, knižnica SPIFFS.h nám poskytuje funkcie pre prácu s rozhraním SPIFFS.

Keďže v našom projekte používame externý HTML súbor, potrebujeme zahrnúť knižnicou SPIFFS.h, ak externé súbory využívať nebudeme, nie je potrebné ju zahrnúť, čím sa uvoľní miesto v pamäti mikrokontroléra.

Funkcia setup()

Ako už bolo skôr spomenuté, táto funkcia sa nebude veľmi líšiť od funkcií setup() z minulých lekcií, poďme si ju ale aj napriek tomu prejsť krok po kroku:

Najskôr zo všetkého si nastavme počet Baudov na sériovom monitore na hodnotu 115200. Na sériovom monitore tiež neskôr zistíme aktuálnu IP adresu nášho mikrokontroléra. Potom pripojíme mikrokontrolér k Wi-Fi sieti pomocou ssid a hesla, ktoré sme uviedli do pripravených reťazcov v hlavičke programu. Po pripojení skontrolujeme či funguje rozhranie SPIFFS, vypíšeme IP adresu do sériového monitora a pustíme sa do vyhodnocovania požiadaviek z klienta:

Najprv určíme serveru, ktorý súbor má zobraziť po načítaní stránky. V našom prípade je to súbor index.html.

Skontrolujeme teda, ktorý formulár resp. input bol vyplnený a uložíme jeho názov a hodnotu do premennej. Tieto informácie vypíšeme na stránku. Na to využijeme už klasický reťazec s HTML kódom, do ktorého zakomponujeme dve premenné s uloženými dátami. Ak sa vyskytne chyba, vypíše sa chybové hlásenie.

Je dôležité, aby sa parameter funkcie pozadavek->hasParam() zhodoval s hodnotou atribútu name pri jednotlivých inputoch v HTML dokumente. V prípade nezhody nebude projekt fungovať správne a budú vyskakovať neošetrené chyby o zlej konfigurácii stránky.

Funkcia loop() zostane opäť prázdna, pretože všetka logika sa odohráva vo funkcii setup(), takže iba pre poriadok:

Testovanie programu

Program zostavíme, skompilujeme a nahráme na mikrokontrolér. Je tiež dôležité nahrať súbor index.html kliknutím v Arduino IDE na Nástroje a potom na ESP32 Sketch Data Upload. Teraz si zobrazíme výslednú webovú stránku, ktorá bude vyzerať takto:

Keď teraz vložíme akýkoľvek textový obsah do jedného z troch inputov, zobrazí sa informácia, o ktorý input sa jedná a vypíše sa aj jeho hodnota:

Mikrokontrolér je teraz schopný rozpoznať, do ktorého inputu sme vložili informáciu a dokáže s ňou manipulovať podľa našich potrieb.

Všetky zdrojové kódy sú k dispozícii na stiahnutie pod lekciou.

V budúcej lekcii, Webový server na module ESP-32 - Autentizácia užívateľa , sa budeme venovať webovému serveru, ktorý zabezpečíme prihlasovacím menom a heslom.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.