7. diel - Odoslanie obrázkov na webový server na module ESP-32

V predchádzajúcej lekcii, SPI Flash File System pre webový server na ESP-32 , sme sa zoznámili s SPI Flash File System pre webový server na module ESP32 a predviedli sme si ho na príklade.

V tomto tutoriále Internetu vecí s ESP-32 si predstavíme, ako jednoduchým spôsobom nahrať obrázky na webový server. Naučíme sa ich tiež ako ich zobraziť v prehliadači. Opäť použijeme nám už známe rozhranie SPIFFS.

Nahranie obrázkov na webový server cez SPIFFS

Rozhranie Serial Peripheral Interface Flash File System (SPIFFS) už poznáme, preto si ho teraz len trochu zrekapitulujeme. Toto rozhranie si možno predstaviť ako prídavné úložisko na čipe ESP-32, na ktoré môžeme ukladať súbory, obrázky atď. V tomto tutoriále do neho nahráme niekoľko obrázkov, aby sme si vyskúšali, ako sa s ním v tomto prípade pracuje.

Keďže teraz nebudeme cez webový server nijako ovládať akékoľvek hardvérové periférie, bude nám stačiť samotný čip. Tým sa nám veľmi znížila obtiažnosť projektu, pretože nemusíme riešiť schému zapojenia. Poďme si teraz najprv vytvoriť HTML dokument.

Štruktúra HTML dokumentu

Keďže už máme nejaké skúsenosti s nahrávaním súborov na webový server, vieme, že je dôležité si pred začiatkom písania hlavného programu najskôr vytvoriť HTML dokument. Ten bude obsahovať štruktúru stránky zobrazenej na webovom klientovi a tento súbor budeme tiež odosielať cez SPIFFS. V pracovnej zložke s kódom pre mikrokontrolér si vytvoríme novú zložku s názvom data/ av nej vytvoríme HTML súbor index.html. Tento dokument bude vyzerať takto:

Dokument obsahuje iba základnú štruktúru HTML stránky, zobrazenie nahraných obrázkov a tiež základné CSS štylovanie, nech stránka nie je tak jednoduchá. Takto vytvorený dokument bude v tomto projekte dostatočný, poďme sa teda presunúť k samotnému programu pre náš mikrokontrolér.

Do atribútu src tagu img je dôležité napísať iba názov obrázku bez prípony, vďaka tejto informácii bude z SPIFFS priradený správny obrázok.

Skript pre ESP-32

Začnime teda s najdôležitejšou zložkou projektu - kódom pre mikrokontrolér. Logika tohto programu sa nebude veľmi líšiť od programu z lekcie. Jediný rozdiel bude v podstate iba v tom, že budeme na server posielať obrázky. Začneme obligátne hlavičkou:

Čo sa týka zahrnutých knižníc, všetky sme si už opisovali skôr. Avšak opakovanie je matkou múdrosti, a tak si poďme ľahko pripomenúť ich význam v kóde. Knižnica WiFi.h nám ponúka funkcie pre prácu s Wi-Fi sieťou, ako napr. funkciu pre pripojenie k sieti, či pre získanie aktuálnej IP adresy. ESPAsyncWebServer.h je knižnica, ktorá nám poskytuje funkcie a objekty, vďaka ktorým môžeme nakonfigurovať asynchrónny webový server a knižnica SPIFFS.h nám zaistí prácu s rozhraním SPIFFS.

Reťazce ssid a password obsahujú prihlasovacie údaje Wi-Fi siete, ku ktorej chceme, aby sa mikrokontrolér pripojil. Posledným riadkom kódu určíme serveru, na ktorom porte má bežať. V našom prípade to bude defaultný port pre webový server, čiže 80. Máme teda vytvorenú celú hlavičku súboru a môžeme pokračovať ďalej.

Funkcia setup()

Poďme sa vrhnúť na funkciu setup():

Najskôr zo všetkého si nastavíme výstup sériového monitora na určitý počet Baudov, v našom prípade na 115200. Potom pripojíme mikrokontrolér k Wi-Fi sieti funkciou begin(), do ktorej pošleme ako parametre naše dva reťazce s prihlasovacími údajmi k sieti. Ak prejde kontrola pripojenia k sieti, ešte je potrebné zistiť, či sa nevyskytol problém s rozhraním SPIFFS. Ak je všetko v poriadku, do sériového monitora sa nám vypíše IP adresa, ktorú keď vložíme do prehliadača, uvidíme obsah našej webovej stránky.

Potom už stačí iba vytvoriť kód na spracovanie požiadaviek z webového klienta. Najprv určíme, čo sa má stať hneď po načítaní stránky, na to slúži táto časť kódu:

Tu sa vyhodnotí najskôr, či je obsah URL adresy prázdny prvým parametrom funkcie on() a ak áno, server dostane súbor so štruktúrou HTML stránky, ktorú zobrazí v prehliadači.

Pre zaujímavosť, tretí parameter funkcie send() objektu pozadavek() je tzv. MIME type súboru, tzn. aký práve obsah sa v súbore nachádza. V našom prípade to je čistý HTML text, ale napr. obrázky či PDF dokumenty majú iný MIME type, pretože sa jedná o úplne odlišný typ súboru.

Keďže sme v našom HTML súbore do atribútu src pri značke img uviedli názvy súborov, webový klient si ich od servera bude chcieť vyžiadať tým, že tieto názvy vložia do URL adresy. Preto je na čase určiť mikrokontroléru, ako sa má zachovať. Pre vysvetlenie si uveďme jednu z vyššie uvedených implementácií funkcií on():

Akonáhle sa v URL adrese objaví reťazec zelena, pošle sa cez rozhranie SPIFFS obrázok s názvom, ktorý je uvedený v druhom parametri funkcie send(). V našom prípade je to súbor zelena.png, ktorý sa zobrazí v prehliadači.

Úspešne sme vyriešili spracovanie požiadaviek z klienta. Teraz nám už stačí do programu doplniť funkciu loop(). Táto konkrétna síce nebude mať žiadne telo, ale ako už vieme, v programe sa musí vyskytovať:

Príprava a nahranie obrázkov

Teraz obrázky, ktoré chceme nahrať do úložiska, presunieme k HTML súboru do zložky data/. Obrázky, ktoré využívame v tomto projekte, sa spoločne so sketchom a kódom nachádzajú v zips archíve pod lekciou.

Je dôležité si dať pozor na veľkosť nahrávaných obrázkov, ich veľkosť nesmie presiahnuť veľkosť vyhradenú pre SPIFFS. Oplatí sa obrázky pred nahraním komprimovať, aby sme zmenšili ich veľkosť a teda si uvoľníme miesto v pamäti.

Po kompilácii a nahraní kódu pre mikrokontrolér rozklikneme položku Nástroje a potom ESP32 Sketch Data Upload, čím sa nahrajú všetky súbory v priečinku data/ a na prehliadači sa zobrazia obrázky týmto spôsobom:

V budúcej lekcii, Spracovanie dát z HTML formulára na module ESP-32 , si ukážeme, ako môžeme spracovávať dáta z HTML formulára na stránke bežiacej na webovom serveri na ESP32.

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š.