6. diel - SPI Flash File System pre webový server na ESP-32

V minulej lekcii, Webový server na module ESP-32 druhýkrát - Sprevádzkovanie serveru , sme dokončili program na sprevádzkovanie webového servera a ukázali sme si jeho funkčnosť.

V tomto tutoriále Internetu vecí s ESP32 sa budeme opäť venovať webovému serveru, tentoraz však využijeme SPI Flash File System. Ten nám umožňuje zobrazovať na webovej stránke súbory uložené v špeciálnom úložisku na mikrokontroléri. Obsah na stránke preto nemusíme zložito vypisovať do kódu pre mikrokontrolér. Namiesto toho využijeme externých súborov, v našom prípade HTML a CSS.

SPI Flash File System (SPIFFS)

Vďaka SPI File Flash System je možné do úložiska na mikrokontroléri ukladať rozsiahlejšie súbory obsahujúce napr. dáta, ktoré sa nemenia a nie je nutné ich teda zakaždým spúšťať spolu s programom. Toto úložisko je možné si predstaviť ako malú SD kartu, pripojenú k čipu ESP32. V základnom nastavení je úložisku pridelené cca 1,5 MB z flash pamäte. Veľkosť SPIFFS úložiska je možné zistiť v Arduino IDE po kliknutí na Nástroje a potom po nabehnutí na Partition Scheme, kde prípadne môžeme meniť jeho veľkosť. My teraz budeme pokračovať s východiskovým nastavením úložiska.

Princíp práce s SPIFFS

Akonáhle k serveru pristúpime pomocou IP adresy, webový server vyšle HTTP požiadavku pre zobrazenie základnej HTML stránky a prípadne aj CSS súboru pre vzhľad stránky. Mikrokontrolér požiadavku spracuje tak, že v úložisku pre SPIFFS vyhľadá príslušné súbory podľa názvu a poskytne ich webovému serveru, ktorý ich zobrazí resp. využije. Mikrokontrolér potom už iba spracováva ďalšie HTTP požiadavky od servera napr. pri rozsvietení LED diód či podobných akcií. Keď sme si teda prešli základnú teóriu, poďme si vyskúšať využitie SPI File Flash Systemu v praxi.

Praktický príklad - blikanie LED diódami pomocou webového servera

Pre celé zapojenie budeme potrebovať okrem LED diód aj rezistory, najlepšie o hodnote 1kΩ. Všetky súčiastky zapojíme týmto spôsobom:

Inštalácia pluginov pre nahrávanie súborov na server

Akonáhle máme všetko zapojené, poďme si postupne pripraviť prostredie. Najprv si nainštalujeme plugin na nahrávanie súborov na server, bez ktorého nám webový server nezobrazí žiadny obsah na stránke. Plugin stiahneme z GitHub repozitára autora. Po stiahnutí .zip archívu vložíme jeho obsah do zložky umiestnenia projektov. Túto zložku je možné zistiť v Arduino IDE kliknutím na Súbor a potom na Vlastnosti. V tejto zložke vytvoríme zložku tools/ a do nej vložíme celý obsah .zip archívu. Po reštarte vývojového prostredia sa objaví táto možnosť v záložke Nástroje:

Inštalácia knižníc

V tomto projekte využijeme knižníc, ktoré nie sú zahrnuté v základnej verzii Arduino IDE. Poďme si ich teda stiahnuť a doinštalovať. Konkrétne budeme potrebovať knižnice ESPAsyncWebServer a keďže táto knižnica vyžaduje k svojej práci knižnicu AsyncTCP, stiahneme a nainštalujeme aj ju.

Postup pri inštalácii knižníc rady máme v kurze Arduino - Programovací jazyk, kde sa tejto problematike venujeme.

Vytvorenie HTML a CSS súborov

Akonáhle máme správne nainštalované knižnice, je načase vytvoriť HTML súbor so základným obsahom našej stránky. V priečinku s naším projektom si vytvorme podadresár s názvom data/ av nej vytvoríme nový HTML súbor s názvom index.html. Obsah tohto súboru bude vyzerať takto:

Reťazce %STAV% a %STAV2% sú tu kvôli zobrazeniu aktuálneho stavu na LED dióde, sú tu v podstate navyše, ale hodí sa napr. pri debuggingu kódu.

V našom kóde máme štyri tlačidlá, kedy každé obsahuje odkaz a informáciu, či sa má príslušná LED zapnúť alebo vypnúť.

Vytvorenie CSS súboru

Táto časť nie je povinná, pokiaľ ale chceme mať dobrý pocit aj z vizuálu našej stránky, je dobré si napísať aspoň nejaký základný štýl stránky. Tento CSS súbor vytvoríme do rovnakého priečinka data/ ako HTML súbor. Pomenujeme ho styl.css. Dostačujúce bude tento kód:

Je dôležité do značky head v HTML súbore zahrnúť náš vytvorený CSS súbor pomocou tagu link, inak sa zobrazí čistá HTML stránka!

Kód pre mikrokontrolér ESP32

Teraz máme vytvorený všetok obsah na našej stránke, poďme sa teda vrhnúť na logiku v našom projekte. Poďme si teda zase postupne popísať všetky súčasti programu.

Začnime opäť hlavičkou programu:

Najskôr je dôležité zahrnúť do projektu knižnice, ktoré nám markantne znížia rozsah programu. Knižnica WiFi.h je nám už známa z minulosti, presuňme sa teda ku knižnici ESPAsyncWebServer.h. Knižnica nám umožní asynchrónny webový server, kedy sa pri každej požiadavke zo servera zaneprázdni vlákno procesu a nemôže byť využité ničím iným. Knižnica SPIFFS.h nám potom zaistí nahranie HTML a CSS súborov na server.

Do reťazcov ssid a password vložíme údaje k sieti, ku ktorej chceme, aby sa mikrokontrolér pripojil, az ktorej získame IP adresu.

Funkcie pre výpis stavu diód

Teraz si poďme vytvoriť funkciu, ktorá nám bude nahrádzať text na stránke s aktuálnymi stavmi na oboch diódach:

Funkcia obsahuje iba podmienky pre vyhodnotenie aktuálnej požiadavky zo servera. Podľa hodnoty vstupného parametra var vypíše na stránku hodnotu OFF alebo ON v závislosti od aktuálneho stavu diód, ktorý prečítame pomocou funkcie digitalRead(). Túto funkciu budeme využívať pri spracovávaní každej požiadavky zo servera.

Funkcia setup()

Poďme sa teraz presunúť k hlavnej časti nášho programu, teda k funkcii setup(). Najskôr si nastavíme počet Baudov sériového monitora a pomocou funkcie pinMode() nastavíme piny pre LED. Ak sa vyskytne chyba pri nahrávaní SPI Flash File Systemu, vypíšeme chybovú hlášku:

Ďalej poďme náš mikrokontrolér pripojiť k Wi-Fi:

Teraz sa presunieme na spracovanie požiadaviek zo servera. Spracovanie požiadavky funguje na princípe čítania údajov z URL adresy. Metódou GET a na základe obsahu URL adresy určíme, čo sa má stať. Najprv nastavíme, ktorý súbor sa má zobraziť hneď po načítaní stránky. V našom prípade je to súbor index.html:

V celom programe je veľmi dôležitá funkcia send(), a preto si ju poďme vysvetliť. Prvým parametrom určíme, kde má súbor nájsť a naň potom aj presmerovať. Názov súboru je druhý parameter. Lomítko pred názvom súboru znamená, že má súbor hľadať v podpriečinku zložky, kde sa nachádza projekt. Ďalšie dva parametre sú nevyhnutné pre prácu so súbormi a posledný parameter je nami vytvorená funkcia, ktorá mení hodnotu placeholdera s aktuálnym stavom diód. V tejto chvíli sa nič nezmení.

Rovnakým spôsobom na server pošleme aj CSS súbor:

A nakoniec spracujeme požiadavky zo servera, pokiaľ sa zmení stav na akejkoľvek dióde. Použijeme opäť funkciu send() a zároveň zmeníme hodnotu priamo na doske. Po spracovaní požiadavky sa zmení hodnota na LED a zároveň sa zmení aj hodnota placeholdera:

Aby program fungoval, musí sa zhodovať prvý parameter funkcie on() s odkazom uvedenom v HTML kóde pri jednotlivých tlačidlách!

Spustenie kódu a nahranie súborov:

Teraz môžeme program skompilovať a nahrať do mikrokontroléra. Po nahraní kódu je potrebné nahrať aj súbory, ktoré využívame. Stačí kliknúť na položku v navigácii Nástroje a potom na ESP32 Sketch Data Upload, čím sa všetky potrebné súbory nahrajú do pamäte na ESP32.

Súbory je dôležité nahrať až po nahratí celého kódu pre mikrokontrolér.

Akonáhle sme nahrali ako kód pre ESP32, tak aj oba súbory, presunieme sa do sériového monitora, kde zistíme IP adresu mikrokontroléra. Po vložení tejto IP adresy do prehliadača sa zobrazí táto stránka:

Teraz po kliknutí na príslušné tlačidlo pri každej dióde bude dochádzať k zmene jej stavu zo zhasnutej na rozsvietenú a naopak. Celý kód a všetky súbory sú pripojené v archíve na stiahnutie pod lekciou.

V nasledujúcej lekcii, Odoslanie obrázkov na webový server na module ESP-32 , si predstavíme spôsob nahrania obrázkov na webový server cez rozhranie SPIFFS.

 

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