Obsah:
- Krok 1: O TOMTO PROJEKTE
- Krok 2: Vyžaduje sa hardvér
- Krok 3: Obvod a pripojenia
- Krok 4: PRÁCA
- Krok 5: HTML & JAVASCRIPT CODE
- Krok 6: KĽÚČOVÉ POZNÁMKY
- Krok 7: KÓD
- Krok 8: Videonávod
Video: 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
Odporúča:
Otvárač garážových brán so spätnou väzbou pomocou servera Esp8266 ako webového servera .: 6 krokov
Otvárač garážových brán so spätnou väzbou pomocou servera Esp8266 ako webového servera .: Ahoj, ukážem vám, ako si jednoducho vytvoriť otvárač garážových brán.-ESP8266 je kódovaný ako webový server, dvere je možné otvoriť kdekoľvek na svete-s spätná väzba, budete vedieť, či sú dvere otvorené alebo zatvorené v reálnom čase-jednoduché, iba jedna skratka, pomocou ktorej
ESP8266 RGB LED STRIP WIFI ovládanie - NODEMCU Ako IR diaľkové ovládanie pre LED pás ovládané cez Wifi - Ovládanie smartfónu RGB LED STRIP: 4 kroky
ESP8266 RGB LED STRIP WIFI ovládanie | NODEMCU Ako IR diaľkové ovládanie pre LED pás ovládané cez Wifi | Ovládanie smartfónu RGB LED STRIP: Ahoj, v tomto návode sa naučíme, ako používať nodemcu alebo esp8266 ako IR diaľkové ovládanie na ovládanie RGB LED pásu a Nodemcu budete ovládať smartfónom cez wifi. V zásade teda môžete RGB LED STRIP ovládať pomocou svojho smartfónu
Internetom riadená dióda LED pomocou webového servera založeného na ESP32: 10 krokov
Internetom riadená dióda LED pomocou webového servera založeného na ESP32: Prehľad projektu V tomto príklade zistíme, ako vytvoriť webový server na báze ESP32 na ovládanie stavu LED, ktorý je prístupný odkiaľkoľvek na svete. Na tento projekt budete potrebovať počítač Mac, ale tento softvér môžete spustiť aj na
ESP 8266 Nodemcu Ws 2812 Neopixelová LED lampa MOOD ovládaná pomocou webového servera: 6 krokov
ESP 8266 Nodemcu Ws 2812 Neopixelová LED lampa MOOD ovládaná pomocou webového servera: V tomto projekte vyrobíme lampu MOOD od spoločnosti nodemcu & neopixel a ktoré je možné ovládať pomocou ľubovoľného prehliadača pomocou miestneho webového servera
Automobil RasbperryPi s kamerou FPV. Ovládanie pomocou webového prehliadača: 31 krokov (s obrázkami)
Automobil RasbperryPi s kamerou FPV. Ovládanie pomocou webového prehliadača: Postavíme 4 -palcové auto - riadenie bude podobné ako v nádrži - na otočenie jednej strany sa kolesá budú otáčať inou rýchlosťou ako ostatné. V aute bude umiestnená kamera na špeciálny držiak, kde môžeme meniť polohu kamery. Robot bude c