Internetom riadená dióda LED pomocou webového servera založeného na ESP32: 10 krokov

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

Prehľad projektu

V tomto prípade 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 lacnom a málo výkonnom počítači, akým je Raspberry Pi.

Príprava ESP32 s Arduino IDE

Aby ste mohli začať programovať ESP32 pomocou Arduino IDE a programovacieho jazyka Arduino, budete potrebovať špeciálny doplnok. Prečítajte si o tom, ako pripraviť Arduino IDE pre ESP32 v systéme Mac OS, pomocou nasledujúceho odkazu.

Zásoby

Na tento tutoriál budete potrebovať nasledujúce položky:

• Vývojová doska ESP32 5 mm
• LED odpor 220 ohmov
• 16x2 LCD displej s I2C modulom
• Breadboard
• Prepojovacie vodiče
• Micro USB kábel

Krok 1: Budovanie obvodu

Pripojenia vykonajte podľa nasledujúceho schematického diagramu nižšie

Začnite pripojením výstupu napájacieho napätia 3V3 na dosku ESP32 a GNDto. Pripojte LED diódu cez odpor k ESP32 pomocou GPIO pinu 23 ako digitálneho výstupného pinu. Potom pripojte pin SDA LCD displeja 16x2 k kolíku GPIO 21 a SCL k kolíku GPIO 22.

Krok 2: Rýchly prehľad systému súborov SPIFFS

SPIFFS je skratka pre „Serial Peripheral Interface Flash File System“, tj súborový systém pre flash pamäť, ktorá prenáša údaje prostredníctvom SPI. Preto je SPIFFS zjednodušený súborový systém určený pre mikrokontroléry s flash čipmi, ktoré prenášajú údaje po zbernici SPI (napríklad flash pamäť ESP32).

SPIFFS je najužitočnejší na použitie s ESP32 v nasledujúcich situáciách:

• Vytváranie súborov na ukladanie nastavení
• Trvalé ukladanie dát.
• Vytváranie súborov na ukladanie malého množstva údajov (namiesto toho, aby ste na to používali kartu microSD).
• Ukladanie súborov HTML a CSS na vytvorenie webového servera.

Krok 3: Inštalácia bootloadera SPIFFS v systéme Mac OS

Údaje môžete vytvárať, ukladať a zapisovať do súborov uložených v súborovom systéme ESP32 priamo pomocou doplnku v Arduino IDE.

Najprv sa uistite, že máte nainštalovanú najnovšiu verziu Arduino IDE, a potom postupujte takto:

• Otvorte nasledujúci odkaz a stiahnite si archív „ESP32FS-1.0.zip“
• Prejdite do adresára Arduino IDE, ktorý sa nachádza v priečinku Dokumenty.
• Ak priečinok s nástrojmi neexistuje, vytvorte ho. V adresári nástrojov vytvorte ďalší priečinok ESP32FS. Vo vnútri ESP32FS vytvorte ďalší, ktorý sa nazýva nástroj.
• Rozbaľte archív ZIP stiahnutý v kroku 1 do priečinka s nástrojmi.
• Reštartujte svoje Arduino IDE.
• Ak chcete skontrolovať, či bol doplnok úspešne nainštalovaný, otvorte Arduino IDE a kliknite na „Nástroje“a skontrolujte, či sa v tejto ponuke nachádza položka „ESP32 Sketch Data Upload“.

Krok 4: Inštalácia knižníc

Knižnice ESPAsyncWebServer a AsyncTCP vám umožňujú vytvoriť webový server pomocou súborov zo systému súborov ESP32. Ak chcete získať ďalšie informácie o týchto knižniciach, pozrite sa na nasledujúci odkaz.

Nainštalujte knižnicu ESPAsyncWebServer

• Kliknutím sem stiahnete archív ZIP knižnice.
• Rozbaľte tento archív. Mali by ste získať priečinok ESPAsyncWebServer-master.
• Premenujte ho na „ESPAsyncWebServer“.

Nainštalujte knižnicu AsyncTCP

• Kliknutím sem stiahnete archív ZIP knižnice.
• Rozbaľte tento archív. Mali by ste dostať hlavný priečinok AsyncTCP.
• Premenujte ho na „AsyncTCP“.

Presuňte priečinky ESPAsyncWebServer a AsyncTCP do priečinka knižníc, ktorý sa nachádza v priečinku Dokumenty.

Nakoniec reštartujte Arduino IDE.

Krok 5: Vytvorte súbor Index.html a Style.css s nasledujúcim obsahom

Šablóna prepínacieho tlačidla HTML/CSS bola prevzatá z nasledujúceho zdroja.

Krok 6: Arduino kód

Kód bol predovšetkým založený na kóde Arduino, ktorý bol prevzatý z webového servera ESP32 pomocou SPIFFS a How to Use I2C LCD with ESP32 on Arduino IDE.

Krok 7: Nahrajte kód Arduino a súbory pomocou zavádzača SPIFFS

• Otvorte priečinok náčrtu kódu Arduino.
• V tomto priečinku vytvorte nový priečinok s názvom „údaje“.
• Do priečinka s údajmi musíte vložiť index.html a style.css.
• Nahrajte kód Arduino
• Potom súbory nahrajte, kliknite na Arduino IDE v ponuke Nástroje> Nahranie údajov skici ESP32

Krok 8: Zistite IP adresu webového servera ESP32

Dá sa nájsť dvoma spôsobmi.

• Sériový monitor na Arduino IDE (Nástroje> Sériový monitor)
• Na LCD displeji

Krok 9: Testovanie lokálneho webového servera

Potom otvorte webový prehliadač podľa vášho výberu a do panela s adresou vložte nasledujúcu adresu IP. Mali by ste získať výstup podobný obrázku nižšie.

Krok 10: Prístup na lokálny webový server z ľubovoľného miesta na svete pomocou programu Ngrok

Ngrok je platforma, ktorá vám umožňuje organizovať vzdialený prístup na webový server alebo inú službu bežiacu na počítači z externého internetu. Prístup je organizovaný prostredníctvom zabezpečeného tunela vytvoreného na začiatku ngrok.

• Kliknite na tento odkaz a zaregistrujte sa.
• Po vytvorení účtu sa prihláste a prejdite na kartu „Overenie“. Skopírujte riadok z poľa „Your Tunnel Authtoken“.
• Na navigačnom paneli kliknite na kartu „Stiahnuť“. Vyberte verziu programu ngrok, ktorá zodpovedá vášmu operačnému systému, a stiahnite si ju.
• Rozbaľte stiahnutý priečinok a spustite príkazový riadok.
• Pripojte svoj účet zadaním nasledujúceho príkazu

./ngrok authtoken

Spustite tunel HTTP na porte 80

./ngrok http Vaša_IP_adresa: 80

Ak bolo všetko vykonané správne, stav tunela by sa mal zmeniť na „online“a v stĺpci „Posielanie ďalej“by sa mal objaviť odkaz na presmerovanie. Zadaním tohto odkazu do svojho prehliadača sa dostanete na webový server odkiaľkoľvek na svete.