Hrajeme si WeMos D1 – Web server 2

V tomto návodu volně navážeme na předchozí díl a ukážeme si trošku více elegantní metodu zobrazení nějaké hodnoty. Nemá cenu vymýšlet nějakou pěknou grafiku a v našem případě využijeme hotové řešení v JAVA od Googlu. Na zdrojový kód a ukázky se můžete podívat na adrese https://developers.google.com/chart/interactive/docs/gallery/gauge. Jedná se o komponentu Gauge, ale využít můžete cokoliv se Vám bude hodit.

gauge

 

Tak základní zobrazení našeho grafického ukazatele je v html zde:

Když se na to html podíváme není to nijak složité. Pro nás bude asi nejdůležitější tento kousek kódu:

Jedná se deklaraci pole s nějakými hodnotami. První řádek pole [‚Label‘, ‚Value‘], nás nemusí zajímat a ani ho nebudeme měnit. V druhém řádku máme ale již text, který se bude zobrazovat na ukazateli a jako další zobrazovanou hodnotu. Tyto údaje bude vhodné editovat. Místo nápisu Text si můžeme zadat název veličiny, kterou budeme zobrazovat to znamená např. „Teplota“, Další údaj tzn. číslo 35 je již hodnota zobrazované veličiny. Tu budeme měnit programově, proto si pro náš program zvolíme jako v minulém tutoriálu těžko zaměnitelnou sekvenci znaků @id_1@. Naše html upravené tímto způsobem si převedeme na String v mém převaděči zde. Dostaneme tento výsledek:

Tento vygenerovaný string si aplikujeme do našeho kódu pro Wemos:

a výsledek:

Screen Shot 08-06-16 at 07.49 PM

Samozřejmě by jsme mohli dát automatický refresh do kódu html, to si můžete vyzkoušet, ale nevyhnuli by jsme se blikání, které způsobí náročnost zobrazení. Vyzkoušíme si ale troškou jinou metodu, kdy bude stránka uložena na disku ve formátu html a budeme pouze čerpat data o teplotě. Zdrojový kód souboru html je zde:

Jediné co musíte změnit je nastavená ip adresa v kódu. Je na řádku 5, zaměňte za Vaši IP adresu desky Wemos. Samotný kód pro Wemos   se moc nezměnil, zmizel html string a to je vše. Z Wemosu odesíláme pouze teplotu v prostém textu.:

Já se pokusím trošku kód pro WeMos vysvětlit. Import knihoven a deklarování proměnných rozebírat nebudeme. Kód jsem se snažil maximálně zjednodušit a srovnat jak má být. Zastavme se na řádku 41 a 42:

Funkce server.on(…..) určuje jaká funkce se vykoná, když zadáme adresu serveru. Značka nebo string „/“ znamená pozici po zadání jenom názvu serveru. Pokud přidáme další definici např. „/arduino8“ a jako další parametr funkci která se má vykonat např. handleArduino8 a do prohlížeče zadáme ardresu našeho WeMos např. 196.185.8.105/arduino8, tak se vykoná to co deklarujeme ve funkci handleArduino8. Jak můžete vidět deklarace handleRoot funkce je na řádku 58:

Tato tedy po zadání pouze IP adresy serveru zjistí teplotu z D18B20 a odešle jí po převodu z float jako obyčejný text (text/plain) zpět ke klientovi (v našem případě internetový prohlížeč). Pokud by jsme chtěli deklarovat jinou možnost zhora uvedenou (/arduino8) přidáme pouze řádek:

 a vytvoříme funkci fceArduino8:

 

která po zadání adresy IP (samozřejmě té WeMos serveru) u mě např. 196.185.8.105/arduino8 vypíše klientovi (do internetového prohlížeče) text „Hello, I am WeMos“. Program tedy můžete libovolně rozšiřovat. Krátve se podíváme na

zde pouze při zadaní nějaké adresy, třeba i když se spleteme a po deklaraci /arduino8 se přepíšeme a napíšeme …./arduino9, tak si můžeme nastavit libovolnou hlášku tak jak jí známe z jiných serverů. Třeba soubor nenalezen, nebo Je nám líto, ale požadovaný soubor nelze nalézt. Je to na Vás, funkci jsem ponechal prázdnou. To znamená, že pokud zadáte neexistující požadavek na adresu tak se nestane nic. Funkce je deklarována, ale neobsahuje žádný kód. (viz řádek 65). Náš kód je tedy  velmi jednoduchý na rozdíl od HTML souboru, který pomocí JavaScriptu si asynchronně žádá každou vteřinu o teplotní data ze serveru WeMos. Náplní tohoto tutoriálu není Vás naučit Javaskript, já ovládám jen základy, ale pomocí jednoduchých modifikací můžete tento html + javaskript použít i v jiných aplikacích. Kdo si nepřečetl dokumentaci ke komponentě Gauge jen uvádím, že lze měnit minimální a maximální zobrazovaná hodnota, barevné zvýraznění určitých hodnot, velikost prvku atd. Což i v html můžete vidět, že jsem nastavil minimální hodnotu 10 a maximální 45 stupňů Celsia. Teplotu měřím v místnosti, není potřeba zadávat větší rozsah, ačkoliv vzhledem k vybranému čidlu by to nebyl problém.

 

6 Komentářů

  1. hlupenov

    Zdravím a přeji hezký den.

    Prosím o podrobnější vysvětlení, jak a kam nahraju html script. Pokoušel jsem se vytvořit filesystem, ale nedaří se :-). Funkce server.on(„/“, handleRoot); je pochopitelná, ale nedaří se ji spustit.

    Děkuji

    1. Administrátor (Autor)

      Html skript stačí uložit kamkoliv na počítač. Je to obyčejný html soubor ******.html nebo *******.htm upravitelný v obyčejném textovém editoru. Po kliknutí na něj se spustí ve webovém prohlížeči.

  2. hlupenov

    Dobrý den,

    omlouvám se, místo abych si pořádně přečetl co píšete, tak jsem ze sebe udělal …amatéra. Samozřejmě script funguje napoprvé. Automaticky jsem předpokládal, že html musí být uložené v ESP a ESP poskytuje web server s html stránkou.

    Hledám řešení pro můj projekt „Studna“, kde měřím vodní sloupec, teplotu vody a vzduchu. Studna je cca 50m daleko od baráku a datový kabel je problém (mám k dispozici jen zakopaný kabel CYKY 5Cx2,5). Wifi s ESP a web serverem se zdá jako dobré řešení.

    Za trest objednávám ve vašem eshopu dneska nějaké drobnosti 🙂

    Hezký den.

  3. Administrátor (Autor)

    No a v dalším návodu (až po tom co dopíšu komunikaci s logováním na ThingSpeak) bude nahrávání programu přes OTA (přes Wifinu), aby se k té studně nemuselo vůbec chodit 🙂

  4. hlupenov
  5. slavonix

    Zdravým. Chcem sa opýtať, je možné prostredníctvom dvoch WEMOS D1 modulov dosiahnut vzajomnu komunikaciu medzi nimi? O čo mi ide: Po privedení signálu na prvý modul by druhý modul zopol výstup. Malo by to komunikovať cez WIFI a byť manazovatelne cez WEB. Niečo ako bezdrotove WIFI PLC 🙂 Bolo by to s WEMOS D1 modulmi možné?

Napsat komentář

Translate »