Jste zde

Jak na uživatelské rozhraní k iDO

Pavel Knotek, 6. Leden 2010 - 0:00
ido-obr1-600.jpg

Tvorba aplikací pro iDO je poměrně zevrubně rozebrána v předchozích příspěvcích. Dnes se pojďme zaměřit na poněkud opomíjenou část, kterou je uživatelské rozhraní. Na příkladu primitivní meteostanice si ukážeme, jak připravit základní webové rozhraní a uložit je přímo do iDO.

Tvorba webového rozhraní není zcela triviální záležitost a vyžaduje alespoň základní znalosti z několika IT oblastí. Na ploše jednoho článku nelze zabíhat do přílišných detailů, proto předpokládejme následující výchozí znalosti:

  • Základní orientace v sítích TCP/IP
  • Protokol HTTP
  • Jazyk HTML a CSS
  • Příručka k iDO, především sekce „Tvorba vlastních stránek“
  • Výhodou je znalost jazyka JavaScript případně knihovny jQuery a dalších
  • Optimalizace grafiky pro web (pokud chcete grafiku použít)

Pokud si nejste svými znalostmi 100% jisti, možná oceníte pár odkazů pro ujasnění:

Kromě znalostí budete potřebovat také výchozí sadu nástrojů:

  • Archív iDO_kit.zip se základním webovým rozhraním a programem mkflashimgxp.exe. - Ke stažení pod článkem
  • Textový editor vhodný pro tvorbu HTML stránek (např. PSPad apod., velké WYSIWYG balíky typu FrontPage nedoporučuji).
  • Hodí se také UDP Config – skvělý pomocník pro detekci iDO a identifikaci jeho IP adresy.
  • Užitečné jsou rovněž validátory HTML a CSS

Výchozí zadání:

Předpokládejme, že máme k iDO připojena dvě teplotní čidla jedno venkovní a druhé vnitřní plus sondu na měření vlhkosti. Tyto tři údaje budeme chtít prezentovat na jednoduché stránce, která se vykreslí bezprostředně po zadání IP adresy iDO do prohlížeče, stránka tedy bude uložena přímo v iDO. Zobrazené informace budou v pravidelných intervalech aktualizovány.

Výchozí webové rozhraní zůstane zachováno, vytvoříme pouze nadstavbu pro zobrazení údajů.

Práci si rozdělíme do několika etap a výsledek budeme průběžně testovat v jednotce iDO.

Limitující faktory:

Web server vestavěný v iDO má spoustu zajímavých funkcí a možností, ale primárním úkolem iDO není funkce webového serveru. Při vývoji rozhraní je třeba mít neustále na paměti, že se jedná o embedded zařízení které má limitované zdroje.

Limit Důsledky
Velikost paměti
512 KB		 Paměťovou náročnost rozhraní je třeba dopředu s rozvahou naplánovat.

  • Velikost grafických souborů (JPG, GIF) je vhodné důsledně optimalizovat.
  • Je-li to možné, vyhněte se UTF kódování, které zdvojnásobuje velikost textových souborů.
  • Minimálně 20 kB paměti ponechejte vždy volných pro potřeby systému (systémový log atd.).
  • Pro nadstavbu existujícího rozhraní, budete mít k dispozici zhruba 350 KB*.
  • V případě zcela nového rozhraní můžete počítat až s 500 KB*.

* Údaje platí v případě, že případný upgrade binární části provedete odděleně od instalace vašeho rozhraní.
Počet současně
„otevřených souborů“ = 32		 Termín otevřený soubor není úplně přesný, ale v podstatě vystihuje fakt, že víc jak 32 souborů najednou neotevřete a to včetně systémových, takže pozor na vnořené includy!
Délka názvu souboru Doporučuje se používat „dosovskou“ konvenci 8+3, tedy maximálně osm znaků pro název souboru pak tečka a tři znaky pro koncovku.
Výkon web serveru Primárním úkolem iDO je řízení a správa připojených zařízení a senzorů.
Vestavěný webový server je realizován jako 4 paralelní thready s relativně nízkou prioritou a jeho výkon je optimalizován pro monitoring a řízení.
Od takto koncipovaného serveru nelze očekávat výkon srovnatelný s aplikacemi typu Apache apod.

Nudný úvod máme za sebou tak vzhůru k první etapě.

Příprava

  • Vytvoříme si pracovní složku Meteo a do ní rozbalíme archív iDO_kit.zip. Ve složce by se měli objevit tři podsložky spi-data, spi-html a spi-user.
  • Právě poslední složka s názvem spi-user je určena pro tvorbu vašeho uživatelského rozhraní.
  • Ve složce Meteo bude soubor mkflashimgxp.exe a dvě pomocné dávky.
  • První dávka s názvem mkimg.bat slouží k zabalení aktuálního webového rozhraní.

1. Etapa – jednodušeji to už nejde

Základem bude prostá, ale interpretovaná HTML stránka (s koncovkou .ASP), do které pomocí direktiv zakomponujeme aktuální hodnoty z jednotlivých čidel.

Tepelné senzory si pojmenujeme SensIN a SensOUT. iDo nám díky tomu bude ukládat odečtené hodnoty do proměnných tm.SensIN.Temp, tm.SensOUT.Temp a tm.SensOUT.RH.

Názvy vašich senzorů se samozřejmě mohou lišit. Některé senzory mohou mít názvy přiděleny fixně apod. Základní informace o senzorech získáte z rozhraní iDO > Application > Sensors. Aktuální výpis proměnných je k dispozici přes iDO > Application > Variables.

Uživatelem přidělené názvy senzorů jsou při aktualizaci firmware ztraceny, proto doporučuji používat nejlépe systémové názvy čidel.

Využijeme direktivu {název_proměnné}, která je v rámci interpretace stránky nahrazena aktuální hodnotou proměnné.
Základní HTML kód bude vypadat takto:

    
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>Meteostanice v.  1.0</title>
  </head>
  <body>
     Venkovní teplota:  {tm.SensOUT.Temp}&deg;C<br>
     Venkovní vlhkost:  {tm.SensOUT.RH}&nbsp;%<br>
     <hr>
     Vnitřní teplota: {tm.SensIN.Temp}&deg;C
     </body>
</html>

HTML kód uložíme do souboru meteo.asp a uložíme do složky spi-user. Ve složce Meteo spusťte dávku mkimg.bat, výsledkem bude soubor package.img, který přes iDO > System > Firmware file > Upgrade nahrejte do vašeho iDO.

Po dokončení aktualizace zadejte do vašeho prohlížeče adresu vašeho iDO a za lomítko přidejte meteo.asp, tedy například:
http://192.168.68.69/meteo.asp

Výsledek vidíte na obrázku :

2. Etapa – přesměrování výchozí stránky

Abychom nemuseli pokaždé zadávat adresu k souboru meteo.asp, provedeme přesměrování výchozí stránky iDO.

Jako nejjednodušší se nabízí prosté přepsání existujícího souboru index.html ze složky spi-html, jenže ouha, takhle to nepůjde.

Za prvé byste přišli o výchozí funkčnost iDO, což by byla škoda a za druhé by se stránka neinterpretovala, ale jen vykreslila (direktivy ve složených závorkách by tudíž nebyly nahrazeny hodnotami, ale zobrazeny tak, jak jsou).

Přítomnost souboru index.html slouží současně jako indikátor existence webového obsahu, pokud ho smažete, bude iDO předpokládat, že žádný webový obsah není k dispozici a zobrazí pouze hardcoded stránku pro aktualizaci systému.

Dokonalým řešením není ani přejmenování meteo.asp na index.asp. Stránka se sice již vykreslí korektně, ale přijdete o možnost přepínání více výchozích stránek pomocí direktiv a masek. (Podrobnější popis této techniky v některém z příštích pokračování.)

Řešení, byť poněkud komplikované ale funkční, vypadá takto:

  • Soubor index.html přesměrujeme pomocí tagu META REFRESH na soubor index.asp a v něm pomocí direktivy určíme, který soubor má být vykreslen.
  • Původní obsah souboru index.html ponecháme beze změny:
<html>
   <head>
     <meta  content="0;url=/index.asp"  http-equiv="refresh">
   </head>
   <body></body>
</html>
  • Soubor index.asp (ze složky spi-html) pak bude obsahovat toto:
  {@meteo.asp}

Důležitý je zavináč (@) před názvem souboru, který zaručí interpretované vložení (include) souboru.

Úplný seznam direktiv a modifikátorů naleznete v příručce k iDO.

  • Výsledek zabalíme a nahrajeme jako FW do iDO k odzkoušení.

3. Etapa – aktualizace údajů META REFRESH

  • Naše meteostanice sice pracuje, ale zobrazované údaje jsou platné jen pro okamžik vykreslení stránky.
  • Stránku lze sice obnovit (obvykle stiskem klávesy F5), proč ale nenechat pracovat stroje za nás.
  • Nejjednodušší způsob nám nabízí přímo HTML pomocí tagu META. Do sekce <HEAD> v našem souboru stačí doplnit řádek:
 <meta http-equiv="refresh" content="3">
  • Který nám zajistí, že stránka (včetně meteo údajů) bude opakovaně načtena každé tři sekundy.
  • Novou verzi opět zabalíme pomocí dávky mkimg.bat a nahrajeme do iDO.

Údaje se nám sice překreslují, ale cenou je výrazné bliknutí při každém načtení stránky, které zvláště při častém obnovování působí rušivě.

Na druhou stranu se určitě najdou aplikace s obnovou stránky v řádu minut, kde i toto jednoduché řešení nalezne své uplatnění.

4. Etapa – aktualizace údajů AJAX

Čisté řešení bez blikání nám nabízí technologie AJAX. K realizaci využijeme JavaScript a knihovnu jQuery, která je součástí výchozího webového rozhraní iDO.

Nejprve si upravíme naši webovou stránku, ve které obalíme zobrazované údaje HTML tagem <SPAN> s vhodným identifikátorem. Díky tomu, je bude moci skript snadno dohledat a změnit.

 <!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
   <head>
    <meta http-equiv="content-type"  content="text/html; charset=windows-1250">
    <title>Meteostanice v.  1.0</title>
    <script language="javascript"  type="text/javascript" src="jquery.js"></script>
    <script language="javascript"  type="text/javascript" src="meteo.js"></script>
  </head>
  <body>
    Venkovní teplota: <span  class="value"  id="tm.SensOUT.Temp">{tm.SensOUT.Temp}</span>&deg;C<br>
    Venkovní vlhkost: <span class="value"  id="tm.SensOUT.RH">{tm.SensOUT.RH}</span>&nbsp;%<br>
    <hr>
    Vnitřní teplota: <span  class="value"  id="tm.SensIN.Temp">{tm.SensIN.Temp}</span>&deg;C
  </body>
  </html>

Všimněte si, že jsme:

  • vypustili tag META REFRESH
  • jako identifikátor SPANů jsme zvolili názvy proměnných
  • SPANy jsme si současně „ostylovali“ pomocí třídy „value“ (Tím jsme si vytvořili skupinu prvků, ve kterých budeme měnit hodnoty. Později můžeme CSS třídu využít například ke grafickému odlišení zobrazovaných hodnot.)
  • jako počáteční údaje jsme ponechali direktivy pro zobrazení hodnot proměnných (tím zachováme alespoň částečnou funkčnost pro uživatele bez JavaScriptu)
  • do záhlaví jsme přidali odkaz na knihovnu jQuery a na náš uživatelský skript

Dalším krokem bude vytvoření šablony pro datový soubor, ve kterém bude iDO předávat naší stránce naměřené údaje.
Vytvoříme jednoduchý XML soubor, do kterého nám iDO pomocí direktiv doplní námi požadované hodnoty. Soubor nazveme meteo.xml a uložíme ho opět do složky spi-user.

<?xml version="1.0"  encoding="windows-1250" standalone="yes" ?>
  <Current>
  <tm.SensOUT.Temp>{tm.SensOUT.Temp}</tm.SensOUT.Temp>
  <tm.SensOUT.RH>{tm.SensOUT.RH}</tm.SensOUT.RH>
  <tm.SensIN.Temp>{tm.SensIN.Temp}</tm.SensIN.Temp>
  </Current>

Všimněte si, že jednotlivé „datové tagy“ odpovídají názvům našich proměnných.

Poslední krok, který nám zbývá je vytvoření JavaScriptu, který bude v pravidelných cyklech získávat a zobrazovat aktuální údaje.

V záhlaví skriptu nadefinujeme globální proměnné:

 var MeteoTimeout =  2000;       //Timeout for AJAX refreshing (ms)

V našem případě četnost obnovení stránky v milisekundách.

Z knihovny pluginů pro jQuery přidáme podporu pro časovače, viz http://plugins.jquery.com/files/jquery.timer.js_0.txt

A v části, která se provede po načtení stránky, doplníme získání a zobrazení dat.

01 $(document).ready(function(){ 
02 $.timer(
03    100,                  // <--- first time, very fast timer cycle!
04    function(timer) {    
05      $.get(
06        "meteo.xml", 
07        {},
08        function(xml) {
09          res = $('Current', xml);
10          $(".value").each(   
11            function(i) {
12              var Item = $(this).attr('id').replace(/\./g, '\\.');
13              var Value = $(res).find(Item).text();
14              if (Value =='') {
15                  Value = '-';
16                }
17              else {
18                Value = Math.round(Value*10)/10;
19              }
20              $(this).html(Value);
21            }            
22          );
23        }
24      ); 
25    timer.reset(MeteoTimeout);     // set next standard timer
26    }  
27   );
28 });

Komentář:

01 Po kompletním načtení stránky proveď následující.
03 První cyklus spusť co nejdříve, aby se rychle přepsaly výchozí (nezaokrouhlené) hodnoty, viz řádek 18.
04 Při každém náběhu časovače proveď.
05 Metodou GET získej soubor „meteo.xml“ a zpracuj ho funkcí na řádku 11.
09 Do pomocné proměnné si ulož sekci „Current“ z XML souboru „meteo.xml“.
10 V HTML dokumentu najdi všechny tagy, které mají třídu „value“. Každý takový tag zpracuj funkcí na řádku 11.
12 Do proměnné Item si ulož název proměnné (parametr „id“ máme v HTML nastaven právě na název proměnné).
Protože jQuery považuje tečku (.) za řídící příkaz, je potřeba tečku zapsat jako „\\.“, to zařídí příkaz .replace(/\./g, '\\.')
13 Do proměnné Value načti hodnotu proměnné z XML souboru.
15 Pokud hodnota neexistuje, zobraz pomlčku.
18 Číselné údaje zaokrouhli na 1 desetinné místo.
Ano, mohli bychom napsat program pro iDO, který hodnoty zaokrouhlí ještě před odesláním. Proč se ale trápit s údržbou dvou kódů, když můžeme mít jen jeden...
20 Přepiš HTML obsah aktuálního tagu (SPAN s třídou „value“) obsahem proměnné Value.
25 Nastav standardní cyklus pro načítání hodnot.

Výsledný skript uložíme do souboru meteo.js a umístíme opět do složky spi-user. Vše zabalíme pomocí mkimg.bat a nahrajeme do iDO. Pokud je vše v pořádku, bude meteostanice zobrazovat vždy po 2 sekundách aktuální údaje bez blikání způsobovaného překreslováním celé stránky.

A na závěr pár tipů, aneb když se nedaří...

Náš příklad byl opravdu jednoduchý, proto si můžeme dovolit jeho ladění přímo v iDO. Při řešení praktických úkolů doporučuji nejdříve vše nasimulovat na vašem lokálním web serveru, důkladně odladit všechny JavaScripty a teprve poté vše přenést do iDO.

Berte také v úvahu, že počet zápisů do flash paměti je sice v řádu stovek tisíců, ale je konečný.

Problém Řešení
Po nahrání nového FW iDO nereaguje. Odpojte iDO od napájení a znovu připojte.
Po nahrání nového FW iDO nereaguje (stránka nenalezena). Použijte UDP Config k nalezení aktuální IP adresy iDO. (Ve výchozím nastavení načítá iDO adresu z DHCP serveru, který patrně díky změnám ve vaší síti přidělil po aktualizaci FW jinou adresu).
Místo číselných údajů mám jen pomlčky (prázdné hodnoty). Zkontrolujte názvy senzorů a proměnných reprezentujících jednotlivé veličiny, viz:
iDO > Applicaton > Sensors
iDO > Applicaton > Variables
Chyba v JavaScriptu Použijte MSIE 8.0 a stiskněte F12, zobrazí se vývojářský nástroj, ve kterém lze skripty ladit krok za krokem včetně zobrazení hodnot lokálních proměnných.
Více chyb v JavaScriptu Namodelujte si situaci na vašem lokálním webovém serveru. Až získáte stabilní verzi skriptu, nahrajte ji do iDO.
Nahrávat kvůli chybějícímu středníku apod. neustále nové verze FW do iDO, je cesta do pekel...
Rozsypané (nekorektní) HTML Použijte Firefox a doplněk Web Developer. Pomocí menu Nástroje > Validovat místní HTML respektive Validovat místní CSS snadno najdete problematická místa.

Pokud se nechcete trápit s vývojem rozhraní sami, obraťte se s důvěrou na nás, rádi vám rozhraní navrhneme a připravíme.

Odkazy:

PřílohaVelikost
Package icon Sada pro úpravu grafického rozhraní81.41 KB
Package icon V příkladu upravené soubory1.44 KB
Hodnocení článku: 

Komentáře

Honzaa (neověřeno) - 2. Prosinec 2010 - 20:50

Dobrý den.
Chtěl bych se zeptat jestli ještě nějak pokračuje projekt iDo a jeho další vývoj.

Honza 2 (neověřeno) - 13. Leden 2011 - 9:25

Opravdu je projekt iDo už mrtvý? Vypadalo to že bude vývoj pokračovat ale opravdu se vůbec nic neděje. Je to škoda.
Snad aspoň někdo odpoví jak to bude dál. Vypadalo to zajímavě.

Honza 2 (neověřeno) - 13. Leden 2011 - 18:39

Ze začátku se seriály a nové firmwary oběvovaly celkem často a bývaly v článcích i zmínky o budoucím pokračování. Prakticky se tady nic celý rok neobjevilo a proto mi připadá že vývoj a vše kolem iDo se zastavilo.
V jené reakci na komentář jste napsali "Vyvoj iDo pokracuje (viz iDo Pro, IOmax, probiha implementace systemu IQRF pro tvorbu bezdratovych siti a rada dalsiho)". Událo se tedy něco za ten uplynulý rok?
Děkuji za info.

Honza2 (neověřeno) - 14. Leden 2011 - 9:03

Ano to se událo ale je tomu všemu více než rok. Proto jsem se ptal jestli je něco nového za poslední rok tj. od 01/10 do 01/11.

Pepíík (neověřeno) - 10. Prosinec 2010 - 10:28

Celkově by mě zajímalo jestli vůbec k tomuto zařízení existuje nějaký support. Zařízení jsem koupil asi před rokem, ale teprve teď jsem se do úprav a testování. Napsaný program se mi povedlo do zařízení dostat snad jen náhodou a po velkých optimalizacích. Překvapením byly jinak zapojeny nebo označeny vstupy IN, ale s tim se dá také srovnat. Doufám že podobná situace nebude ve výstupech OUT. Dokonce nejdou ani měnit proměnné. Moje zařízení je IDO IOMax. Ale i přes některé problémy je to dobrá hračka, i když výše popsané problémy bych připisoval spíše výrobku čínské výroby než české.

Josh (neověřeno) - 21. Březen 2011 - 14:10

A dá se tato hračka ještě někde koupit? V HW Shopu jsem ji nenašel.

Honza2 (neověřeno) - 11. Duben 2011 - 21:06

Tak jsem se koukal na shop a také jsem iDo nenašel. Nejspíš bylo tvrzení zde přítomných zástupců HW trochu klamavé když mi tady tvrdili že se stále něco děje (na stránkách projektu iDo se opravdu rok nic neudálo). Sám jsem si iDo koupil protože to ze začátku vypadalo velice zajímavě a s četností článků a updatů to vypadalo že to nezapadne a neskončí. Bohužel. Kdyby někdo chtěl tak mohu prodat.

vitolmr - 12. Duben 2011 - 7:52

Ano, projekt iDo byl opravdu ukoncen pro nezajem zakazniku. Ale dovolim se ohradit proti tomu, ze jsme vas nejakym tvrzenim klamali. iDo se prodavalo jeste 19.3. takze pokud jsem Vam v lednu odpovedeli, tezko mohlo jit o jakekoliv klamani! Naopak nemate pravdu, kdyz tvrdite, ze se rok nic neudalo na strance projektu iDo. iDo ma 4 ruzne HW verze a kazda ma svoji stranku. Popis zmen jsem Vam jiz jednou psal formou komentare.
Honza2 (neověřeno) - 15. Duben 2011 - 8:20

No že jste dělaji nějaké nové FW pro iDo PRO je chválihodné. Nic to ale nemění na faktu že se webová stránka projektu iDo www.hw.cz/ido jak jsem psal rok nezměnila. Na každém publikovaném článku je dole odkaz na domovskou stránku projektu iDo www.hw.cz/ido a stejný odkaz je i u článku o iDo PRO. Jestli jste si někde na lokálu udělali stránky ke každé verzi je docela možné. Bohužel se o tomto nikdo nemohl dozvědět a nedozvěděl.
Na tom že se stránka www.hw.cz/ido už více než rok nezměnila trvám. Dříve mi chodily mailem oznámení o nových FW pro iDo a tak jste aspoň mohli stejným způsobem rozeslat nějaké parte iDo když jste ho zabili. Trochu jsem s ním do budoucna počítal že bych si ještě další dokoupil a síťově je propojil. Ale teď je to už úplně jedno. Škoda.

Jarda999 (neověřeno) - 25. Duben 2011 - 15:08

Tím, že jste prohlásili že projekt skončil pro nezájem zákazníků chcete současně naznačit, že skončila i podpora udržby a oprav chyb FW? Takže ti co si ho už koupili, tak mají smůlu. Jediným řešením, které mě napadá, je reklamovat toto zařízení a žádat vracení kupní ceny, nebo opravu chyb touto cestou. Provozuji iDo již více než rok a stále se při každém zásahu do programu nacházím nové funkce, které se nechovají dle manuálu.

Jan Šlezingr (neověřeno) - 14. Leden 2012 - 8:33

Hodlám si doma poautomatizovat bojler a vymyslel jsem si zařízení, které se ve výsledku shoduje s iDo (samozřejmě bez Ethernetu). Vzhledem k tomu, že nejsem vývojář a bastlím to pouze z nouze a zárověň výroba iDo skončila, je možné ho ještě nějak získat jinou cestou? Dá se získat alespoň stavebnice? Nemá někdo přebytečný kousek na prodej?

Marek1944 (neověřeno) - 22. Červen 2012 - 15:27

Hmm troska nechapem, preco ked HW zrusil iDO, nezverejnil projekt ako open source, pripadne ho neponukol na predaj, koncept bol dobry a podobny projekt chyba na trhu.
Vopred dakujem za reakciu.