OK

Při poskytování služeb nám pomáhají soubory cookie. Používáním našich služeb vyjadřujete souhlas s naším používáním souborů cookie. Více informací

Úvodní stránka » IoT - Internet of Things » Jak na IoT - Díl II. - Web na JavaScriptu s ESP8266

Jak na IoT -  Díl II. - Web na JavaScriptu s ESP8266

V dnešním dílu se posuneme kousek dále a to do oblasti programování dynamického webu, který bude plně hostován na ESP8266. Jako příklad si vezmeme aplikaci popsanou v tomto článku a uděláme jej trochu více profesionálně, resp. s využitím techniky javascriptu a hlavně tak, abychom si celý web nejprve mohli připravit tak, jako bychom jej psali pro hostování v rámci standardního webserveru.  Pro vytváření webových stránek doporučuji použít např. notepad++ - ten umí parsovat htm, html a javascript soubory hezky barevně dle klíčových slov a tagů. Pochopitelně můžete použít cokoliv jiného, na co jste zvyklí, jde v podstatě jen o textové vytvoření html stránky a javascriptu. Zbytek zvládneme v Arduino IDE. Náš web bude v rámci ESP8266 hostován v jeho 3 doménách:

  1. Programové FLASH, kde poběží sketch, kterým budeme obsluhovat teploměr DS18B20
  2. RAM, kde budeme držet a aktualizovat XML soubor, pro který si bude sahat javascript
  3. SPIFFS – SPI Flash File System, kde bude uploadován příslušný javascript a html soubor dle instrukcí z minulého dílu.

Jak celý koloběh vlastně funguje? Nakreslil jsem jednoduchý obrázek, ze kterého se pokusím objasnit, jakým způsobem probíhá výměna mezi sketchem běžícím v ESP8266 a web browserem, který si sahá přes příslušné procedury do SPIFFS pro htm a js soubor tak, aby mohl zobrazit stránku (htm) a její obsah dynamicky měnil (js). Nejsem vyloženě vývojář web aplikací, proto mi kolegové experti v tomto oboru jistě prominou ne úplně přesné vyjadřování, nicméně článek opět píšu pro bastlíře, nikoliv jako disertační práci. 

Podívejme se nyní, co se bude odehrávat v jednotlivých částech našeho ESPčka. Pochopitelně zde poběží sketch obsluhující teploměr DS18B20 v rámci programové paměti a RAM. Sketch zde plní několik úloh:

  • Obsluha WiFi stacku
  • Komunikace s DS18B20
  • Vytvoření a aktualizace XML souboru v RAM, ze kterého bude javascript čerpat informace, aby je předal htm stránce

Dále je ve filesystému SPIFFS umístěn soubor se samotným obsahem stránky, který je v podstatě statický a jen čeká, aby přes své elementy s patřičným identifikátorem obdržel data z javascriptu a tím zavede jistou dynamiku. Naše htm stránka (index.htm) bude dynamicky zobrazovat runtime systému a hlavně tedy teplotu. Máte-li vytvořený kanál na ThingSpeak.com, pak není problém vložit i jeho iframe do stránky, ale to si necháme na později.

Ve filesystému také přebývá soubor control.js, který obsahuje javascript. Tento soubor je v podstatě koordinátorem mezi sketchem běžícím v ESPčku a web browserem, který má něco zobrazit nebo poslat do sketche interakci přes například tlačítko. My si dnes ukážeme jeden směr a to ten, kdy chceme na stránce něco zobrazit, aniž bychom ji museli celou aktualizovat a co hůř, držet ji v programové paměti a RAM, pracně ji „tisknout“ do wifi stacku apod. Právě díky filesystému SPIFFFS si lze ušetřit mnoho mravenčí práce.

Začneme tedy od koordinátora – tedy javascriptu, který v tomto případě obsahuje časovač (funkce proces()) nastavený na 1 sekundu, který v této periodě pravidelně načítá obsah xml souboru jenž je dynamicky tvořen v RAM ESPčka.  Tento proces pak volá funkci handleTimer(), která pak htm stránce předává data načtená z xml souboru přes identifikátory jednotlivých tagů. Ufff, složitě řečeno, ale pojďme se podívat, jak ten kolotoč funguje, viz. obrázek:

Do XML souboru si pravidelně ukládáme informaci o čase a teplotě – tohle dělá sketch. Tyto informace jsou uzavřeny mezi tag <runtime> a <teplota>. Funkce process javascriptu si každou sekundu pro tyto informace sáhne a podrobí je analýze – vyseparuje data z xml souboru a najde-li to, co hledá, tedy tag runtime a teplota, pak pokračuje dále v přeposlání těchto dat na stránku htm, resp. do tagů stránky index.htm. Aby browser věděl, co kde má zobrazit, bylo jednotlivým tagům přiděleno unikátní ID. V tomto případě pak tagu A s id = “time“ bude vsunuta hodnota přečtená z xml souboru z tagu <runtime> a podobně bude zobrazena i teplota. Asi nejlépe to pochopíte ze samotného javascriptu, tedy souboru control.js, který je potřeba po dokončení vložit do filesystému způsobem, kterým jsem popsal v minulém článku.

Konkrétně tedy v RAM budeme držet a občerstvovat pravidelně soubor xml s tímto obsahem:

<datafeeder>
   <runtime>00:00:00</runtime>
   <tempIN>25.5</tempIN>
   <tempOUT>25.5</tempOUT>
</datafeeder>

Zde je tedy obsah control.js a pojďme se podívat podrobněji, jak je zkonstruován:

//definice xmlhttp objektu - prostředku pro předávání informací mezi
//sketchem v ESP8266 - jeho xml soubor v RAM a HTML stránkou
var xmlHttp=createXmlHttpObject();
function createXmlHttpObject()
{
  if(window.XMLHttpRequest)
  {
  xmlHttp=new XMLHttpRequest();
  }
  else{xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
  }
  return xmlHttp;
}

//proces, který rozběhneme na pozadí stránky - v browseru každou sekundu
function process()
{
  //načteme si xml soubor metodou PUT jej dostaneme do browseru
  if(xmlHttp.readyState==0 || xmlHttp.readyState==4)
  {
    xmlHttp.open('PUT','xml',true);
    //xml soubor podrobíme analýze zavoláním funkce
    xmlHttp.onreadystatechange=handleTimer;
    xmlHttp.send(null);
  }
  //spustíme časování co sekundu (1000 milisekund)
  setTimeout('process()',1000);
  
}

//analyzujeme xml soubor
function handleTimer()
{
  if(xmlHttp.readyState==4 && xmlHttp.status==200)
  {
    xmlResponse=xmlHttp.responseXML;
    //snažíme se pohledat uzavřený tag <runtime></runtime>
    xmldoc = xmlResponse.getElementsByTagName('runtime');
    //vydolujeme data, která se skrývají uvnitř tagu
    message = xmldoc[0].firstChild.nodeValue;
    //pošleme tato data html prvku s id = time
    document.getElementById('time').innerHTML=message;
    //totéž učiníme s teplotou, hledáme uzavřený tag <tempIN></tempIN>
    xmldoc = xmlResponse.getElementsByTagName('tempIN');
    //vydolujeme data, která se skrývají uvnitř tagu
    message = xmldoc[0].firstChild.nodeValue;
    //pošleme tato data html prvku s id = tempIN
    document.getElementById('tempIN').innerHTML=message;
    //totéž učiníme s teplotou, hledáme uzavřený tag <tempOUT></tempOUT>
    xmldoc = xmlResponse.getElementsByTagName('tempOUT');
    //vydolujeme data, která se skrývají uvnitř tagu
    message = xmldoc[0].firstChild.nodeValue;
    //pošleme tato data html prvku s id = tempOUT
    document.getElementById('tempOUT').innerHTML=message;
  } 
}
 

A hned se podíváme na konstrukci html stránky, tedy soubor index.htm, který obsahuje tagy, kam javascript zapisuje zjištěné hodnoty z xml souboru:

<!DOCTYPE HTML>
<html>
<link rel="stylesheet" href="inner.css">
<SCRIPT src='control.js'></SCRIPT>
  <body onload='process()'>
  <h1>WiFi teplom&ecaron;r</h1>
  <BR>
  Runtime:<A id = 'time'></A>
  <BR><HR>
  <B>Teplota venku:&nbsp;&nbsp;<A id = 'tempOUT'></A>&deg;C
  <BR>
  Teplota  doma:&nbsp;&nbsp;<A id = 'tempIN'></A>&deg;C
  </B><HR>
  </body>
</html>

 

Tím jsme předali data generována sketchem do webové stránky. Vše pak funguje naprosto autonomně na pozadí stránky a celé časování je už věcí procesu, který si řídí Váš browser. Tímto stylem tedy můžete předávat nejen data k příslušnému zobrazení, ale měnit i jiné vlastnosti tagů – třeba barvy tlačítek, zobrazovat různé obrázky apod. To si jistě ukážeme v následujících dílech. Nezapomeňte obsah souborů index.htm a control.js umístit do file systému, nahrát sketch obvyklým způsobem a výsledek své práci si prohlédněte na příslušné stránce (sketch po restartuje vygeneruje potvrzení o připojení k wifině a přidělenou IP adresu).

 

Sketch je poměrně jednoduchý a je okomentován přímo v kódu. Nebudu jej tady zveřejňovat celý, protože do značné míry vychází z kombinace FSbrowseru, který byl uveden v minulém díle a příkladu, kde jsem uváděl možnost připojení DS18B20 k NodeMCU. Můžete si jej stáhnou zde, včetně adresáře data, ve kterém naleznete jak javascript, tak htm stránku, která se stará o zobrazování obou teplot a runtime. S kompilací by neměl být žádný problém, jen znovu připomínám, nezapomeňte do Vašeho filesystému natáhnout soubory z adresáře data. Způsob, jakým se to dělá, jsme si popsali v minulém dílu. Pokud vše proběhlo tak jak mělo, měli by jste na adrese ESP8266 vidět toto:

 

V příštím dílu si ukážeme, jak dynamiku udělat i zpětně, tedy, jak vytvořit tlačítko na stránce, případně jiný prvek, jehož aktivitu nebo hodnotu předáme do sketche a tím zajistíme interakci s návaznou periférii, třeba LEDkou.

PF

 

TOP produkty

NodeMCU s ESP8266

NodeMCU s ESP8266
350 Kč s DPH

Arduino MEGA2560

Arduino MEGA2560
424 Kč s DPH

Kontakt

Ing. Petr Foltýn
Kunčice pod Ondřejníkem 814, 73913
TOPlist