Ovládanie 7-segmentového LED displeja pomocou webového servera ESP8266: 8 krokov (s obrázkami)

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:59

Môj projekt má Nodemcu ESP8266, ktorý riadi 7-segmentový displej prostredníctvom servera http pomocou html formulára.

Krok 1: O TOMTO PROJEKTE

Ide o projekt IOT vyvinutý pomocou wifi modulu ESP8266 (NodeMCU). Cieľom projektu je vytvoriť v module webový server, ktorý môže v sieti hostovať viacerých klientov. Tu sú na pochopenie môjho projektu potrebné základné znalosti html a javaScript. Niektoré pokročilé témy, o ktorých tu budem diskutovať v súvislosti s ESP8266 a javaScriptom, sú:

1. Nahrajte súbory na SPIFFS ESP8266, aby ste ich mohli efektívnejšie využiť v našom arduino kóde.

2. Webové úložisko pomocou jazyka javaScript

SPIFFS

Doteraz sme vždy zahrnuli HTML našich webových stránok ako reťazcové literály do nášho náčrtu. Vďaka tomu je náš kód veľmi ťažko čitateľný a dosť rýchlo vám dôjde pamäť.

SPIFFS je ľahký súborový systém pre mikrokontroléry s čipom SPI flash. Integrovaný flash čip ESP8266 má dostatok miesta pre vaše webové stránky, najmä ak máte verziu 1 MB, 2 MB alebo 4 MB. Môžete porozumieť tomu, ako do svojho softvéru arduino pridať nástroje na odosielanie súborov do formátu SPIFFS, a to pomocou nasledujúceho odkazu:

V tomto projekte mám 2 html súbor a javascriptový súbor. Všetky tieto súbory sa nahrajú do SPIFFS oddelene od náčrtu, takže zmena v týchto súboroch je nezávislá na hlavnom náčrte.

Oba súbory html sa načítajú súborom PreparFile (), ako je uvedené nižšie:

neplatný preparFile () {

bool ok = SPIFFS.begin (); ak (ok) {Súbor f = SPIFFS.open ("/index.html", "r"); Súbor f1 = SPIFFS.open ("/index1.html", "r"); data = f.readString (); data1 = f1.readString (); f.close (); f1.close (); } else Serial.println ("Nenašiel sa žiadny taký súbor."); }

pri čítaní súboru javascript pomocou loadScript (), ako je uvedené nižšie:

void loadScript (cesta reťazca, typ reťazca) {

if (SPIFFS.exists (cesta)) {Súbor súboru = SPIFFS.open (cesta, "r"); server.streamFile (súbor, typ); }}

MIESTNE SKLADOVANIE PRE WEBOVÉ APLIKÁCIE

Ako používať rôzne objekty a metódy lokálneho úložiska v HTML5 pomocou JavaScriptu pochopíte z nasledujúceho článku: https://diveintohtml5.info/storage.html. V pracovnej časti budem diskutovať o použití lokálneho úložiska v mojom projekte.

Krok 2: Vyžaduje sa hardvér

NodeMCU ESP8266 12E Wifi modul

Nepájkovateľné nepájivé pole

Prepojovací drôt

7 Prehľadný displej (bežná katóda)

1K ohmový odpor

Kábel micro-USB (na pripojenie NodeMCU k počítaču)

Krok 3: Obvod a pripojenia

Spojenia sú skutočne jednoduché. Vo vyššie uvedenom schéme zapojenia sú piny nodemcu zapojené nasledujúcim spôsobom:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

kde A, B, C, D, E & F sú segmenty 7segmentového zobrazenia

. Ignorujte DP 7 -segmentového displeja. Nepripájajte ho k pinu D5 ESP

Krok 4: PRÁCA

Ako bolo uvedené vyššie, máme dva súbory html. Jednou z nich je stránka html root, ktorá sa volá, keď server ESP8266 prijal „/“, tj. Ak sa požaduje identifikátor URI '/', server by mal odpovedať stavovým kódom HTTP 200 (Ok) a potom odoslať odpoveď pomocou indexu. html.

Druhý html súbor bude odoslaný na žiadosť klienta z koreňovej stránky odoslaním vstupu do formulára. Hneď ako server dostane vstup POSTED z formulára, porovná ho s pevnou hodnotou reťazca a odošle ako odpoveď druhú stránku html.

if (server.arg ("nam") == "0") {server.send (200, "text/html", data1); sevenSeg (0); }

Pretože html pre 2. stránku nie je v náčrte definovaný, odkazujeme tu na „data1“, ktoré už sú prečítané html kódy pomocou SPIFFS.readString ()

Súbor f1 = SPIFFS.open ("/index1.html", "r"); data1 = f1.readString ();

SevenSeg () sa tu tiež nazýva s argumentom „0“, aby ho bolo možné použiť na zobrazenie „0“prepnutím rôznych segmentov na ZAPNUTÉ a VYPNUTÉ. Tu som názov funkcie vysvetlil sám, t.j. onA () zapne A segment 7 seg displeja na doske, podobne offA ho vypne.

Takže v tomto prípade, aby sa zobrazilo „0“, musíme prepnúť všetky segmenty okrem G (DP je ignorovaný, pretože nie je pripojený k žiadnemu kolíku ESP8266). Moja funkcia teda vyzerá takto:

if (num == 0) {onA (); onB (); onC (); onD (); onE (); onF (); offG (); }

Krok 5: HTML & JAVASCRIPT CODE

Index.html má plátno so 7 segmentovým zobrazením vo vypnutom režime a tvar pod ním. Po otvorení vidíte toto:

Ak chceme používať našu webovú stránku bez ESP8266, bude to možné zmenou odkazu v atribúte action vášho formulára. V súčasnej dobe je tento odkaz v prevádzke:

Tu vidíte, že odkaz v prevádzke je rovnaká adresa IP, ktorá je priradená vášmu uzluMCU po pripojení k akémukoľvek wifi (alebo hotspotu). Značka formulára po úprave vyzerá takto:

Tu používam webstroge prehliadača na uloženie vstupnej hodnoty používateľa tak, že hodnota zadaná v index.html je uložená v prehliadači lokálne (ako cookie). Táto hodnota je načítaná indexom1.html a číslo je zobrazené na 7 -segmentovom displeji na html plátne. Tento postup môžete porozumieť nasledujúcim videom:

video_attach

Krok 6: KĽÚČOVÉ POZNÁMKY

Tento projekt bude fungovať s vašim nodemcu, ak sa postaráte o nasledujúce body:

1. Odkaz v atribúte akcie koreňového html súboru by mal byť „https:// (IP na sériovom monitore alebo IP priradená vášmu ESP)/odoslať“.

2. Používajte najnovšiu verziu prehliadača, ktorý podporuje html5 a nové značky a funkcie.

3. SPIFFS bude fungovať iba vtedy, ak sú vaše súbory index.html, index1.html a main.js spojené v priečinku s údajmi. Súbor kódu môžete klonovať z môjho githubu

Krok 7: KÓD

Toto je odkaz na úložisko kódu môjho projektu. Ak pracujete s SPIFFS v ESP8266, môžete pochopiť, prečo som umiestnil súbory html a javascript do priečinka s údajmi. Použite to tak, ako to je.

Odkaz na úložisko GitHub

Krok 8: Videonávod

Ak to pomôže, prihláste sa na odber