ESP8266 a Visuino: Webový server s teplotou a vlhkosťou DHT11: 12 krokov

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

Moduly ESP8266 sú skvelé nízkonákladové samostatné ovládače so vstavaným Wi-Fi a už som o nich urobil niekoľko návodov.

DTH11/DTH21/DTH22 a AM2301 sú veľmi obľúbené kombinované snímače teploty a vlhkosti Arduino a vyrobil som s nimi aj niekoľko inštrukcií, vrátane inštrukcií na diaľkový teplomer a senzora vlhkosti s 2 ESP8266 prepojenými dohromady vo vlastnej súkromnej sieti Wi-Fi.

V tomto návode vám ukážem, ako môžete vytvoriť webový server o teplote a vlhkosti s ESP8266 a DHT11 a pripojiť sa k nemu vo svojej existujúcej sieti Wi-Fi z viacerých zariadení s webovým prehliadačom.

Krok 1: Komponenty

1. Doska OneNodeMCU ESP8266 (použil som verziu NodeMCU 0,9, ale bude fungovať akákoľvek iná, alebo dokonca samostatná ESP-12 alebo ESP-01)
2. Jeden senzorový modul DHT11 som získal z tejto lacnej sady 37 senzorov
3. 3 prepojovacie vodiče žena-žena

Krok 2: Pripojte DHT11 k modulu NodeMCU ESP8266

1. Pripojte napájanie (červený vodič), uzemnenie (čierny vodič) a údaje (sivý vodič) k modulu DHT11 (obrázok 1 zobrazuje 2 rôzne typy senzorových modulov DHT11. Ako vidíte, kolíky sa môžu líšiť, pripojte ich preto opatrne!)
2. Druhý koniec uzemňovacieho vodiča (čierny vodič) zapojte do uzemňovacieho kolíka modulu ESP8266 (obrázok 2)
3. Druhý koniec napájacieho vodiča (červený vodič) zapojte do 3,3 V napájacieho kolíka modulu ESP8266 (obrázok 2)
4. Druhý koniec dátového vodiča (sivý vodič) zapojte do digitálneho pinu 2 modulu ESP8266 (obrázok 3)
5. Obrázok 4 zobrazuje, kde sú uzemňovacie, 3,3V napájacie a digitálne 2 piny NodeMCU 0,9

Krok 3: Spustite Visuino a vyberte typ dosky ESP8266

Ak chcete začať programovať Arduino, budete musieť mať nainštalované Arduino IDE tu:

Uvedomte si, že v Arduino IDE 1.6.6 existujú niektoré kritické chyby

Uistite sa, že inštalujete 1.6.7 alebo vyšší, inak tento návod nebude fungovať!

Ak ste to neurobili, postupujte podľa pokynov v tomto návode na nastavenie Arduino IDE na programovanie ESP 8266

Je tiež potrebné nainštalovať Visuino:

1. Spustite Visuinoas znázornený na prvom obrázku
2. Kliknite na tlačidlo „Nástroje“na komponente Arduino (obrázok 1) vo Visuine
3. Keď sa zobrazí dialógové okno, zvoľte „NodeMCU ESP-12“podľa obrázku 2

Krok 4: Vo Visuine: Nastavte názov hostiteľa a prístupový bod

Najprv musíme nakonfigurovať modul tak, aby sa pripájal k existujúcemu prístupovému bodu a priradil k nemu názov hostiteľa, aby sme ho mohli objaviť v sieti.

1. V nástroji Object Inspector rozbaľte vlastnosť „Moduly“a potom podradenú vlastnosť „WiFi“
2. V nástroji Object Inspector nastavte hodnotu vlastnosti „HostName“na „dht11server“(obrázok 1)
3. V nástroji Object Inspector rozbaľte vedľajšiu vlastnosť „AccessPoints“„WiFi“a kliknite na tlačidlo „…“vedľa jeho hodnoty (obrázok 2)
4. V editore „AccessPoins“vyberte v pravom zobrazení „WiFi prístupový bod“a potom kliknutím na tlačidlo „+“vľavo pridajte prístupový bod (obrázok 2)
5. V nástroji Object Inspector nastavte hodnotu vlastnosti „SSID“na SSID vášho Wi-Fi hotspotu (prístupového bodu) (obrázok 4)
6. Ak váš Wi-Fi hotspot (prístupový bod) vyžaduje heslo, v nástroji Object Inspector nastavte heslo na hodnotu vlastnosti „Heslo“(obrázok 4)
7. Zatvorte dialógové okno „AccessPoints“

Krok 5: Vo Visuine: Pridajte na komunikáciu zásuvku servera TCP/IP

Ďalej musíme pre komunikáciu pridať soket servera TCP/IP.

1. V nástroji Object Inspector kliknite na tlačidlo „…“vedľa hodnoty čiastkovej vlastnosti „Zásuvky“WiFi (obrázok 1)
2. V editore soketov vyberte „Server TCP/IP“a potom kliknutím na tlačidlo „+“(obrázok 2) jeden pridajte (obrázok 3)
3. Zatvorte dialógové okno „Zásuvky“

Krok 6: Vo Visuine: Pridajte komponent DTH11 a formátovaný text s 2 analógovými kanálmi

Na ovládanie a čítanie teploty a vlhkosti z DHT11 musíme do Visuina pridať jeho komponent.

Potrebujeme tiež vygenerovať webovú stránku z údajov. Stránka je len textový dokument HTML, takže na jej vygenerovanie môžeme použiť komponent formátovaného textu.

1. Do poľa Filter na paneli nástrojov súčiastky zadajte „dht“, potom vyberte komponent „Vlhkosť a teplomer DHT11/21/22/AM2301“(obrázok 1) a umiestnite ho do oblasti návrhu.
2. Do poľa Filter na paneli nástrojov súčastí zadajte „formulár“, potom vyberte komponent „Formátovaný text“(obrázok 2) a umiestnite ho do oblasti návrhu
3. Kliknite na tlačidlo „Nástroje“na komponente FormattedText1 (obrázok 3)
4. V editore prvkov zvoľte vpravo analógový prvok a dvakrát kliknite na tlačidlo „+“vľavo (obrázok 4), aby ste ich pridali (obrázok 5)
5. Zatvorte editor „Prvky“

Krok 7: V programe Visuino: Nastavte formátovaný text na odpoveď servera

Musíme zadať text HTML, ktorý sa vygeneruje, keď sa webový klient pripojí k serveru.

Špecifikujeme pripojenie, ktoré sa má ukončiť po odoslaní údajov, a tiež dáme pokynu prehliadaču, aby sa znova pripojil (Obnoviť) po 5 sekundách pridaním „Obnoviť: 5“do dokumentu. Webová stránka sa tak obnoví každých 5 sekúnd.

1. V návrhovej oblasti vyberte komponent FormattedText1 (obrázok 1)
2. V nástroji Object Inspector vyberte vlastnosť „Text“a kliknite na tlačidlo „…“vedľa jeho hodnoty (obrázok 1)
3. V editore „Text“zadajte: „HTTP/1.1 200 OK“„Typ obsahu: text/html“„Pripojenie: zatvorte“„Obnoviť: 5““„ “"""""" Teplota: %0 "" Vlhkosť: %1 "" "" "(obrázok 2) %0 bude nahradená hodnotou z AnalogElement1 a %1 bude nahradená hodnotou z AnalogElement2
4. Dialógové okno zatvoríte kliknutím na tlačidlo OK

Krok 8: Vo Visuine: Pripojte komponent DHT11

1. Pripojte výstupný kolík „Teplota“komponentu HumidityThermometer1 k kolíku „In“v komponente AnalogElement1 komponentu FormattedText1 (obrázok 1)
2. Pripojte výstupný kolík „Vlhkosť“komponentu HumidityThermometer1 k kolíku „In“v komponente AnalogElement2 komponentu FormattedText1 (obrázok 2)
3. Pripojte kolík „Senzor“komponentu HumidityThermometer1 k vstupnému kolíku „Digital“kanála „Digital [2]“komponentu Arduino (obrázok 3)

Krok 9: Vo Visuino: Pridajte a pripojte komponent Edge Detect

Text HTML musíme odoslať vždy, keď dôjde k novému pripojeniu. Pred odoslaním musíme chvíľu počkať, pretože webové prehliadače musia odoslať požiadavku skôr, ako očakávajú výsledok. Na to použijeme komponent Delay pripojený k pinu „Connected“v zásuvke servera TCP/IP.

1. Do poľa Filter na paneli nástrojov komponentov zadajte „oneskorenie“, potom vyberte komponent „Oneskorenie“(obrázok 1) a umiestnite ho do oblasti návrhu.
2. Vo vlastnostiach nastavte hodnotu vlastnosti „Interval (uS)“na 200 000 (obrázok 2)
3. Pripojte pin „Connected“na „Modules. WiFi. Sockets. TCPServer1“komponentu „NodeMCU ESP-12“ku kolíku „In“komponentu Delay1 (obrázok 3)
4. Pripojte pin „Out“komponentu Delay1 k vstupnému kolíku „Clock“komponentu FormattedText1 (obrázok 4)

Krok 10: V programe Visuino: Pripojte komponent formátovaného textu a komponent Pridať a pripojiť oneskorenie

1. Pripojte pin „Out“komponentu FormattedText1 k kolíku „In“„Modules. WiFi. Sockets. TCPServer1“komponentu „NodeMCU ESP-12“(obrázok 1)
2. Do poľa Filter na paneli nástrojov komponentov zadajte „oneskorenie“, potom vyberte komponent „Oneskorenie“(obrázok 2) a umiestnite ho do oblasti návrhu.
3. Pripojte kolík „Out“komponentu FormattedText1 k kolíku „In“komponentu Delay2 (obrázok 3)
4. Pripojte pin „Out“komponentu Delay2 k vstupnému kolíku „Disconnect“„Moduly. WiFi. Sockets. TCPServer1“komponentu „NodeMCU ESP-12“(obrázok 4)

Komponent Delay odpojí soket krátko po odoslaní textu.

Krok 11: Generujte, kompilujte a nahrajte kód Arduino

1. Vo Visuine vygenerujte kód Arduino stlačením klávesu F9 alebo kliknutím na tlačidlo zobrazené na obrázku 1 a otvorte Arduino IDE
2. Pripojte modul NodeMCU káblom USB k počítaču
3. Vyberte typ dosky a sériový port, ako som vám ukázal v tomto návode
4. V Arduino IDE kliknite na tlačidlo Nahrať a zostavte a nahrajte kód (obrázok 2)

Krok 12: A hrajte…

Gratulujem Vytvorili ste webový server teploty a vlhkosti Wi-Fi.

Na obrázku 1 a vo videu môžete vidieť pripojený a zapnutý projekt. Na napájanie modulu som použil malú USB power banku.

V projekte v kroku 4 skontrolujte, či ste zadali správne SSID a heslo pre svoj hotspot Wi-Fi

Ak v počítači alebo mobilnom zariadení otvoríte webový prehliadač a zadáte:

dht11server./

A stlačte Enter, uvidíte teplotu a vlhkosť nameranú modulom. Údaje sa obnovia každých 5 sekúnd, ako je uvedené v kroku 7.

Nezabudnite pridať bodku na koniec názvu, inak systém Windows nebude schopný rozpoznať názov domény

Na obrázku 2 môžete vidieť kompletný diagram Visuino.

Tiež je pripojený projekt Visuino, ktorý som vytvoril pre tento Instructable. Môžete si ho stiahnuť a otvoriť v programe Visuino: