Ovládání 7segmentového LED displeje pomocí webového serveru ESP8266: 8 kroků (s obrázky)

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:22

Můj projekt má Nodemcu ESP8266, který ovládá 7segmentový displej prostřednictvím serveru http pomocí html formuláře.

Krok 1: O TOMTO PROJEKTU

Jedná se o projekt IOT vyvinutý pomocí wifi modulu ESP8266 (NodeMCU). Motivem projektu je vytvoření webového serveru na modulu, který může hostit více klientů po síti. Zde jsou k pochopení mého projektu zapotřebí základní znalosti html a javaScriptu. Některá pokročilá témata, která zde proberu ohledně ESP8266 a javaScriptu, jsou:

1. Nahrajte soubory na SPIFFS ESP8266, abyste je mohli efektivněji využít v našem arduino kódu.

2. Webové úložiště pomocí JavaScriptu

SPIFFS

Až dosud jsme HTML našich webových stránek vždy zahrnovali jako řetězcové literály do naší skici. Díky tomu je náš kód velmi špatně čitelný a paměť vám dojde poměrně rychle.

SPIFFS je lehký souborový systém pro mikrokontroléry s flash čipem SPI. Integrovaný flash čip ESP8266 má dostatek místa pro vaše webové stránky, zvláště pokud máte verzi 1 MB, 2 MB nebo 4 MB. Můžete pochopit, jak přidat nástroje do vašeho softwaru arduino pro odesílání souborů do SPIFFS, pomocí následujícího odkazu:

V tomto projektu mám 2 html soubor a javascriptový soubor. Všechny tyto soubory se nahrají do SPIFFS odděleně od náčrtu, takže změna v těchto souborech je nezávislá na hlavním náčrtu.

Oba soubory html jsou načteny PreparFile (), jak je uvedeno níže:

neplatné připravitFile () {

bool ok = SPIFFS.begin (); if (ok) {Soubor f = SPIFFS.open ("/index.html", "r"); Soubor f1 = SPIFFS.open ("/index1.html", "r"); data = f.readString (); data1 = f1.readString (); f.close (); f1.close (); } else Serial.println ("Nebyl nalezen žádný takový soubor."); }

při čtení souboru javascript pomocí loadScript (), jak je uvedeno níže:

void loadScript (cesta řetězce, typ řetězce) {

if (SPIFFS.exists (cesta)) {Soubor souboru = SPIFFS.open (cesta, "r"); server.streamFile (soubor, typ); }}

MÍSTNÍ SKLADOVÁNÍ PRO WEBOVÉ APLIKACE

Jak používat různé objekty a metody místního úložiště v HTML5 pomocí javascriptu, můžete porozumět z následujícího článku: https://diveintohtml5.info/storage.html. V pracovní části budu diskutovat o využití místního úložiště v mém projektu.

Krok 2: Je vyžadován hardware

NodeMCU ESP8266 12E Wifi modul

Nepájivá deska

Propojovací drát

7 Segent displej (běžná katoda)

1K ohmový odpor

Micro-USB kabel (pro připojení NodeMCU k vašemu počítači)

Krok 3: Obvod a připojení

Spojení jsou opravdu snadná. Ve výše uvedeném schématu zapojení jsou piny nodemcu připojeny následujícím způsobem:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

kde A, B, C, D, E & F jsou segmenty 7segmentového displeje

. Ignorujte DP 7segmentového displeje. Nepřipojujte jej ke kolíku D5 ESP

Krok 4: PRÁCE

Jak již bylo zmíněno dříve, máme dva soubory html. Jednou z nich je kořenová html stránka volaná, když server ESP8266 přijal "/" tj. Pokud je požadováno URI '/', server by měl odpovědět stavovým kódem HTTP 200 (Ok) a poté odeslat odpověď s "indexem". html ".

Druhý html soubor bude odeslán na žádost klienta z kořenové stránky odesláním vstupu do formuláře. Jakmile server získá vstup POSTED z formuláře, porovná jej s pevnou hodnotou řetězce a jako odpověď odešle druhou stránku html.

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

Protože html pro 2. stránku není v náčrtu definován, odkazujeme zde na „data1“, která je již načtena v html kódech pomocí SPIFFS.readString ()

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

SevenSeg () je zde také volán s argumentem „0“, takže jej lze použít k zobrazení „0“přepínáním a vypínáním různých segmentů. Zde jsem název funkce vysvětlil jako vysvětlující, tj. OnA () zapne segment A zobrazení 7 seg na prkénku, podobně offA jej vypne.

V tomto případě tedy pro zobrazení „0“musíme přepnout všechny segmenty kromě G (DP je ignorován, protože není připojen k žádnému pinu ESP8266). Moje funkce tedy vypadá takto:

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

Krok 5: HTML & JAVASCRIPT CODE

Index.html má plátno se 7 segmentovým zobrazením ve vypnutém režimu a formulář pod ním. Po jeho otevření uvidíte toto:

Pokud chceme používat naši webovou stránku bez ESP8266, bude to možné změnou odkazu v atributu akce vašeho formuláře. V současné době je tento odkaz v akci:

Zde vidíte, že odkaz v akci je stejná adresa IP, která je přidělena vašemu nodeMCU po připojení k jakémukoli wifi (nebo hotspotu). Značka formuláře po úpravě vypadá takto:

Zde používám web stroge prohlížeče k uložení vstupní hodnoty uživatele tak, že hodnota zadaná v index.html je uložena v prohlížeči lokálně (jako cookie). Tuto hodnotu načte index1.html a číslo se zobrazí na 7segmentovém displeji na plátně html. Tento postup můžete pochopit pomocí následujícího videa:

video_attach

Krok 6: KLÍČOVÉ POZNÁMKY

Tento projekt bude fungovat s vaším nodemcu, pokud se postaráte o následující body:

1. Odkaz v atributu akce kořenového html souboru by měl být „https:// (IP na sériovém monitoru nebo IP přidělená vašemu ESP)/odeslat“.

2. Použijte nejnovější verzi prohlížeče, který podporuje html5 a nové značky a funkce.

3. SPIFFS bude fungovat pouze v případě, že jsou vaše index.html, index1.html a main.js spojeny do datové složky. Soubor kódu můžete naklonovat z mého githubu

Krok 7: KÓD

Toto je odkaz na úložiště kódu mého projektu. Pokud pracujete s SPIFFS v ESP8266, můžete pochopit, proč jsem umístil soubory html a javascript do datové složky. Použijte to jako to.

Odkaz na úložiště GitHub

Krok 8: Videonávod

Pokud to pomůže, přihlaste se k odběru