Hrajeme si WeMos D1 – Web server

V dnešním příspěvku si ukážeme, jak vytvořit z WeMos D1 webový server, který na základě nějakého požadavku bude odesílat nějaké informace zpět nebo i zobrazí webovou stránku. Nejprve bude nutné, aby se WeMos D1 připojil na Wifi síť. V předchozím tutoriálu jsem si ukázali, jak jednoduše zobrazit viditelné sítě v dosahu. Nyní se k síti připojíme a  naprogramujeme WeMos, aby nám jako server něco odeslal. Postup není nějak zvlášte složitý a postačí Vám tento jednoduchý kód.

Nezapomeňte si nastavit správnou rychlost SerialMonitoru na 115200 (můžete v kódu samozřejmě změnit).

ptshop_wemos

Po zapnutí SerialMonitoru, se Vám mělo zobrazit následující

Screen Shot 06-03-16 at 11.22 PM

Název sítě TEST zřejmě neuvidíte, vypíše se Vámi zvolená síť. Pokud jste heslo napsali správně, po chvilce se objeví text, že zařízení se připojilo k Wifi a hláška o startu serveru. Pod ním je vypsána jeho adresa. Testoval jsem to na routeru, který má nastaveno automatické přidělování adresy. Bylo by, ale vhodnější zjistit MAC adresu WeMosu a v nastavení routeru zadat přidělení pevné IP podle MAC. Nicméně toto není náplní návodu. Pokud tedy máme IP adresu našeho serveru, otevřeme si internetový prohlížeč a zadáme v našem případě 192.168.8.106 (ve Vašem případě zadejte adresu „ServerIP ze SerialMonitoru). Co se tedy stane? Celkem nic. V internetovém prohlížeči se objeví slovo „test“. V programu je jen uvedeno, že pokud se nějaký klient připojí na server, tento mu odešle pomocí příkazu

pouze těchto pár znaků. Nejedná se o žádnou html stránku. To budeme řešit za chvilku. Výstup v internetovém prohlížeči je zde:

Screen Shot 06-03-16 at 11.40 PM

Pokud stále máme otevřen SerialMonitor přidá se nějaký ten řádek s informací o IP adrese klienta, tedy o adrese počítače který se připojil k serveru.

Screen Shot 06-03-16 at 11.45 PMTo zobrazení slova test asi nikoho moc neuspokojí, budeme se tedy snažit zobrazit nějaké zajímavější údaje. Já jsem si na ukázku zvolil zobrazení teploty pomocí senzoru DS18B20, Jedna se o 3 vývodovou součástku podobnou tranzistoru, která komunikuje podobným způsobem jako DTH11 (DHT22) tzv. OneWire. Prostě žádost o teplotní data  a výsledek zpět jde po jednom vodiči.

DS18B20-pinoutDS18B20-Wiring

Knihovnu pro teploměr Dallas 18B20 si můžete stáhnout v „Projekt–> Přidat knihovnu –> Spravovat knihovny… . Do vyhledávacího políčka zadejte Dallas, vyberte a zadejte instalaci:

Screen-Shot-06-04-16-at-03

Zapojení samotného čidla není složité, stačí Vám, 3 vodiče, odpor 4.7k a popřipadně nepájivé kontaktní pole.

IMG_2239

 Samozřejmě, že můžete nechat nechat napájení z počítače přes USB. Na obrázku jsem chtěl demonstrovat komunikaci jen přes wifi jako samostatnou jednotku, kterou můžete přenést na kterékoliv místo v dostahu wifi sítě. V mém případě je WeeMos napájen ze 3 článků velikosti 14500 o napětí 3.7V. Čidlo DS18B20 je připojeno na D8, ale sami si můžete změnit a upravit v programu.

Program, který se nahrajete se změnil pouze o přidání dvou knihoven, inicializaci OneWire a čidla teploty DS18B20 s tím, že výsledek se zašle při požadavku klientovi.

Poté nahrání programu do WeMos si můžeme vyzkoušet co nám program dělá. Po zadání v prohlížeči IP adresy v serveru by měl výstup vypadat takto a měla by se vám zobrazit aktuální naměřená teplota.

Screen Shot 06-04-16 at 04.26 PM

Pokud vidíte výstup z teplotního čidla ve webovém prohlížeči máte vyhráno. Může se ovšem objevit i hodnota teploty -127.00 což znamená, že DS18B20 není zapojená správně a proto překontrolujte její zapojení.

TIP: Pokud vlastníte telefon s Androidem, na výběr máte spoustu aplikací, které Vám oskenují síť a vypíšou zařízení k němu připojená. Já například vyzkoušel Network Scanner. Obsahuje sice reklamy, ale práce je s ním jednoduchá, kdy Vám u jednotlivý zařízení oskenuje i otevřené porty s možností otevření přímo v internetovém prohlížeči. 

Když si tedy shrneme co jsme vytvořili. Jednoduchý server, který zasílá údaj o teplotě do internetového prohlížeče. Pokud chceme aktuální teplotu musíme načíst stránku znovu např. pomocí funkční klávesy F5. Zobrazovaný údaj také nevypadá moc reprezentativně. Pokusíme se to tedy nějak vylepšit.Na začátek, aby jme nemuseli sledovat SerialMonitor přidáme funkci která bude indikovat zda je WeMos připojen k Wifi síti. Pro tuto signalizaci vyžijeme LED zabudouvanou na modulu ESP8266 pomocí klíčového slova BUILTIN_LED.

BULITIN_LED se rozsvěcuje pomocí logické 0, protože je zřejmě připojena na logický výstup a 3.3V a ne GND. Takže pokud nebude spojení navázáno bude LED blikat s prodlevou 50ms, pokud se modul k wifi připojí LED bude jednoduše svítit. Kontrola bude probíhat i v loop(), kdyby došlo k výpadku sítě nebo nedostupnosti. Toto je pouze ukázka, můžete způsob signalizace provést jiným způsobem, jak Vám to bude vyhovovat.

Mi zatím neposíláme stránku ve formátu html a to si teď předvedeme. Sále budeme stavět na kódu, který již máme. Pokud jste zvyklý a míte zkušenosti s html, můžete psát tagy rovnou, pokud neznáte využijte nějaký WYSWIG editor. Na internetu jsou i online editory, které nepotřebují instalaci na PC. Já jsem pro Vás rovnou našel html-online.com/editor/ . Tam nějak v základu si vytvoříte html kód. Pro začátek si vymyslete něco jednoduchého. Obrázek je pouze příklad.

Screen Shot 06-11-16 at 06.58 PM

Další problém co je třeba vyřešit je uložení html kódu do proměnné String, aby se s ním mohlo v prostředí Arduino IDE pracovat. Jde to ručně přepsat, ale v závislosti na složitosti html to zabere i delší čas. Musíme ošetřit znak apostrofu, kdy by Arduino IDE bralo tento znak jako ukončení řetězce a řádkovat pomocí sčítání řádků. Já jsem tedy naprogramoval skript, který převede Vaše html na deklarovaný String v přehledné formě. Po stažení souboru se skriptem si sami můžete vyzkoušet. Ke spuštění zde.

Nyní, když máme nějaký kód, který chceme serverem Wemos zobrazit bude stačit několik změn v našem programu.

V programu v části setup() přibyla funkce GenerateHTML(), která je deklarována na konci programu a ta se stará o samotný obsah stránky. Mimo jiné obsahuje v hlavičce informaci, že se mají stránky každou vteřinu obnovit. Dalí novou námi vytvořenou funkcí je  InsertDataToHTML(). Já jsem v html kódu použil místo textu zobrazení teploty jen těžko zaměnitelnou sekvenci znaků @id_1@, kterou pomocí teto funkce vyměníme za data o teplotě. To samé jsem provedl s barvou textu, která se za určitých podmínek (u mne při dosažení teploty 24°C) změní na červenou. V html kódu sekvence znaků @id_2@ v atributu color. Sami si můžete navolit tyto proměnné a rozšířit program o různá další čidla a graficky po svém html zpracovat. Můj jednoduchý výstup vypadá takto:

Screen Shot 06-11-16 at 10.04 PM

Screen Shot 06-11-16 at 10.03 PM

Tím bychom měli téma serveru trošku začaté, já bych chtěl v dalším návodu opět pokračovat s oblastí funkce Wemos D1 jako serveru s tím, že bych uveřejnil i video. V dalším příspěvku  budeme trošku využívat JavaScript tak se můžete těšit.

7 Komentářů

  1. david

    zdravim,díky za tutoriál. Wemos zaujal a už mám dva kusy objednané. Kdy můžeme očekávat publikování dalšího tutoriálu? 🙂

  2. Matej

    Ahoj,
    díky za skvělé tutoriály. Ale vyskytl se malý problém, když uložím svůj html kód po string, tak v něm nic není. Nemůže to být tím, že je moc dlouhý a ten string přeteče? Případně jak to vyřešit?

    1. Administrátor (Autor)

      Diky Matěji,
      nevím jak je tvůj String veliký, ale i tady na velikosti záleží. Možností je využití SPIFFS části paměti, kde lze vytvořit celý souborový systém i s obrázky. Jestli by byl zájem můžu se pokusit o návod v dalším článku.

      1. Matej

        Ahoj,
        díky za odpověď, můj html kód má asi 5200 znaků, takže celkem dlouhý. O tutoriál na využití SPIFFS paměti by určitě zájem byl, budu se těšit! 😀

        Díky!

  3. Slavkov

    Ahoj,
    moc děkuji za velmi jednoduchý, užitečný a praktický návod pro naprosté začátečníky s Arduinem/WeMosem 🙂
    Je to přesně, co mám rád. Poskládam ověřené funkční elementy, lehce si je upravím pro individuální potřeby a mám funkční celek.
    Osobně jsem narazil na dvě věci.

    1( Pokud někdo před tím nikdy nepoužíval nějaké OneWire senzory, tak nemá v Arduino IDE nainstalovanou patřičnou knihovnu. Instalace knihovny pro Dallas si nekontroluje (asi ani nemůže?), zda je knihovna Onewire nainstalovaná. Chybová hláška při kompilaci je celkem jasná, nicméně možná by nebylo od věci to do návodu doplnit.

    2)Mám WiFi zabezpečenou i na úrovni MAC adresy, tudíž jsem potřeboval zjistit MAC adresu WeMosu. Samozřejmě bylo řešení, dočasně vypnout ochranu na AP a podívat se, jaké zařízení se nově přihlásilo… Nicméně jsem chtěl raději bádat a poznávat WeMos, neboť jsem věřil, že tuto informaci půjde nějak získat. Kdyby to někdo potřeboval, stačí vhodně umístit do programu a podívat se do výpisu seriového monitoru:

    Ještě jednou, DÍKY!

  4. frencis123

    Zdravím, vyzkoušel jsem uvedené kódy, všechy mi fungují až na ten poslední. Pouze jsem změnil název a heslo WiFi. Při pokusu o nahrátí mi to vypíše chybu.

    Děkuji za odpověď

  5. ARDUINOCZ

    Ahoj,

    díky za skvělý návod.
    Webserver se mi podařilo vytvořit bez problémů.
    Problém mám však při odesílání naměřené hodnoty, přesněji při jejím samotném měření.
    Zapojil jsem senzor DHT11. Pokud ho zapojím na Arduino Uno desku, vše běží jak má.
    Pokud však stejné zapojení aplikuji na desce WeMos, dostanu stále jen hlášku „Failed to read from DHT sensor!“

    Nevíte, jsou zde nějaké problémy ve spojení esp8266 a tohoto senzoru ?
    Zapojení mám určitě dobře. Už si opravdu nevím rady. Knihovnu používám DHT11/22 od Adafruit.

    Díky za případné rady

Napsat komentář

Translate »