Webový server systému vytápění a fotovoltaiky

HTC Desire Z s aplikacíV minulém článku jsem popsal základní vlastnosti webového serveru AWEB a parametrizačního prostředí AWDet. Nyní stručně popíšu, jak jsem vytvořil webovou prezentaci pro můj dům. Základním požadavkem bylo použití "chytrého" telefonu s velkým dotykovým displejem jako základního rozhraní pro ovládání celého systému vytápění v domě a technologie fotovoltaiky včetně monitoringu využití přebytků vyrobené energie. Po dvou týdnech testování a postupného vylepšování se ukázalo, že webový server svými možnostmi zcela nahradil stávající "pevný" terminál (APT200). Proto jsem webové rozhraní postupně rozšířil i o stránky použitelné pro "běžné" mobily s menším rozlišením displeje.  Nyní tak mohou systém bez problémů intuitivně ovládat i ostatní členové domácnosti.

Následující text nemá ambice podrobně popisovat návrhové prostředí pro tvorbu webové prezentace, ale spíše ukázat v jednotlivých krocích, jak se postupuje při vlastním návrhu. Podrobný text s nápovědou je součástí vlastního programu AWDet včetně popisu případných limitů použití konkrétního hardware, na kterém webserver poběží.

Začlenění AWEBu do domácí sítě

AWDet - Komunikační parametryWebový server AWEB jsem začlenil do stávající komunikační sítě dvou řídicích systémů AMiNi2 a AMiNi-E prostřednictvím Ethernetu (LAN). Nejprve bylo nutné správně nastavit IP adresu webserveru AWEB v rámci domácí sítě. Tento krok může být pro neznalého uživatele poněkud náročnější. V takovém případě doporučuji přenechat tento úkol dodavateli počítačové sítě nebo poskytovateli Internetového připojení. Pokud totiž budete požadovat dostupnost webserveru z Internetu (tzn. mimo lokální síť), nevyhnete se správnému nastavení virtuálního serveru ve vašem routeru, který zajistí nasměrování požadavků "z venku" na konkrétní zařízení "uvnitř". V programu AWDet je nutné nakonfigurovat připojený AWEB v síti pomocí servisního dialogu Komunikační parametry. Tento dialog umožní nastavit i přístupová hesla pro různé úrovně, nastavit komunikační parametry pro výměnu dat s řídicími systémy a dále je možné například přehrát firmware webserveru.

Návrhové prostředí

AWDet - návrhové prostředíVzhled a základní ovládání návrhového prostředí vychází z prostředí DetStudio, používaného pro programování řídicích systémů AMiT. Vedle oken s informacemi o vlastním projektu aplikace, seznamem použitelných komponent a dalších podpůrných a ladicích oken, zaujímá hlavní část plochy vlastní editační plocha typu WYSIWYG. To znamená, pro tvorbu webové prezentace nepotřebuji prakticky znát nic o způsobu tvorby HTML kódu a kaskádových stylů. Dalo by se říci, že se celý návrh velmi podobá tvorbě jednoduché vizualizace.

Prvním krokem návrhu je nastavení požadovaného rozměru stránky. V mém případě jsem zvolil rozměr pro zobrazení na mobilu s displejem 480x800 bodů. V návrhovém prostředí už nadále pracuji pouze s touto plochou, jak je patrné z obrázku vpravo. Jednu ze stránek lze označit jako kořenovou stránku, tedy takovou, která se zobrazí jako první při zadání IP adresy vašeho webserveru AWEB v prohlížeči. Dále je možné u vlastnostní každé stránky zadat periodu automatického obnovování - stránka se pak ve zvolené periodě odnovuje a aktualizuje všechna zobrazovaná data (hodnoty proměnných z řídicích systémů).

Editor je velmi intuitivní, pomocí myší se na plochu vkládají jednotlivé prvky (komponenty), lze je volně umísťovat, měnit jejich rozměry a přes formulář Vlastnosti nastavovat způsob zobrazování anebo chování. Návrhové prostředí umožňuje ihned zobrazovat výsledek vaší práce simulací stránky přímo v prostředí anebo spuštěním vašeho browseru s příslušnou stránkou. Pokud začnete tápat jak v prostředí dále pracovat nebo nejsou jasné položky v nastavení u jednotlivých komponent, stačí stiskem klváesy F1 vyvolat kontextovou nápovědu a vše je hned jasné. Manuál jako takový k programu není k dispozici.

Import proměnných z řídicích systémů

AWDet - import proměnnýchPo úspěšném nastavení spojení s webserverem je dalším krokem získání dostupných proměnných v síti řídicích systémů, které chci používat ve webové prezentaci. Zde je AWDet mimořádně přívětivý - stačí totiž imporotvat zdrojové kódy aplikačního programu napsaného v prostředí DetStudio anebo ve starším PSP3. Kromě proměnných se automaticky získává i nastavení komunikačních adres řídicích systémů a jejich nastavení pro IP komunikaci v rámci Ethernetové sítě. Po úspěšném importu se v dialozích u jednotlivých zobrazovacích komponent pouze vybírají proměnné ze seznamu. U každné proměnné se naimportuje kromě definice typu a případně rozměru matic i komentář k proměnné, takže hned víte, k čemu proměnná v programu slouží.

Editace vlastností komponent

AWDet - vlastnosti komponentyCelá webová prezentace se vytváří pomocí tzv. Komponent. Jsou to základní prvky, u kterých lze nastavovat vlastnosti zobrazení, umístění na stránce a chování na základě hodnoty proměnné. V předchozím článku popisující webový server firmy AMiT je uveden výčet aktuálně dostupných komponent - ačkoliv by se zdálo, že prvků není příliš mnoho, lze pomocí nich "poskládat" plně vyhovující webovou vizualizaci řízené technologie.

Některé komponenty jsou poměrně komplexní. Například komponenta ArcView pro zobrazení tabulky archivu hodnot. Kromě volby velikostí a barvy fontů pro zobrazení hodnot a hlavičky tabulky máte totiž možnost volby výběru a pořadí hodnot z archivních matic a dále i třeba hloubku zobrazených údajů, jejich formát číselného zobrazení apod. Další komplexní komponentou, na kterou bych rád upozornil, je DayPlan. Komponenta zajistí zobrazení a editaci časových plánů používaných např. pro regulaci teplot v místnostech. Opět lze ve vlastnostech nastavit dostatečné množství parametrů a upravit tak výsledné zobrazení splňující všechny vaše požadavky.

Samozřejmě nechybí i komponenty související s technologií HTML - odkaz na jinou stránku (formou prostého linku nebo tlačítkem), vložení rámu s obsahem jiné stránky anebo zobrazení formátovaného textu v zápisu HTML.

Sada komponent se bude nadále rozrůstat, v přípravě jsou nyní komponenty pro ovládání jednotlivých bitů proměnné, zobrazování jednotlivých bitů proměnné pro alarmové účely a několik grafických prvků.

Importér obrázků

AWDet - Imporér obrázkůVelmi snadno lze použít v AWDetu grafické znázornění hodnot proměnných. Kromě pouhého zobrazení obrázku, jsou připraveny i komponenty, které mohou měnit zobrazení obrázku na základě konkértní hodnoty proměnné. Vedle základního zobrazení obrázku v závislosti na hodnotě zvoleného bitu v proměnné lze využít i "chytřejších" komponent jako např. CaseImage. Tuto jsem s úspěchem využit pro zobrazení sloupcového grafu pro velmi přehledné zobrazení aktuální výroby fotovoltaické elektrárny. Použití obrázků výrazně zpřehledňuje vlastní prezentaci.

AWDet disponuje speciální utilitou pod názevm Importér obrázků. Tato část programu pomáhá předpřipravit vaše grafické entity tak, aby byly použitelné ve webové prezenaci a aby byly pro tuto prezentaci i optimalizované. Můžete použít jakýkoliv obrázek, který v Importéru dále upravíte - můžete změnit jeho velikost, typ výsledného obrázku, nastavit jas, kontrast a saturaci. Importér zároveň ukazuje výslednou velikost a náhled finálního obrázku.

Sestavení a nahrání projektu

AWDet - nahrání projektuPo vlastním návrhu webové prezentace je nutné vytvořený projekt nahrát do web serveru, v mém případě do AWEBu. K tomu slouží funkce Nahrání projektu, která provede vlastní sestavení projektu do adresářové struktury, která obsahuje jak vlastní webové stránky, tak i obrázky, popis kaskádového stylu a další konfigurační soubory. Výsledkem sestavení není přímo spustitelný HTML kód, ale soubory s příponou .hta, kterým rozumí skriptovací engine ve webserveru. Výsledkem jeho činnosti je pak už standardní statický HTML kód, kterému rozumí prakticky všechny současné prohlížeče jak na PC na různých platformách, tak i prohlížeče v mobilecha a tabletech. Toto považuji za největší výhodu zvoleného řešení - není nutné nic nikam doinstalovávat, neexistují žádná omezení na použití konkrétní technologie daného prohlížeče.

Funkce Nahrání projektu má v sobě imlementován i FTP klient s patřičnou inteligencí, který velmi intuitivně poskytne možnost nahrání vašeho projektu na web server. Při sestavení projektu se rozpoznají stránky, kde byly provedeny změny, není tedy nutné při úpravě třeba několika málo stránek nahrávat opět celý projekt včetně obrázků.

 

 

Ukázka vlastní aplikace webserveru

Pro názornost si ukažme několik stránek z webserveru s reálnými hodnotami. Jelikož byla aplikace primárně určena pro zobrazování v mobilním telefonu, podívejme se na skutečné Screenshoty přímo z mobilu. Uděláte si tak lépe představu o použitelnosti webového serveru.

Menu

Při návrhu mé prezentace jsem musel vyřešit nejprve ovládání. Primární použití jsem předpokládal na mobilním telefonu s dotykovým displejem 480x800 bodů. Proto jsem zavrhl řešení pomocí normálních textových linků a zvolil dostatečně velká čtvercová "klikací" tlačítka. Nejprve jsem si promyslel strukturu menu.

Hlavní menu aplikace   Menu nastavení   Menu archivace

Aktuální hodnoty

Pro zobrazení aktuálních hodnot a stavu technologie vytápění a výroby energie z fotovoltaiky jsem použil sadu nejrůznějších komponent. V některých případech jsem zvolil spíše střízlivé číslené vyjádření, u zobrazení kotelny jsem si vyhrál i s jednoduchou vyzualizací. Všechny tyto stránky byly periodicky obnovovány (10 resp. 20 sekund).

Aktuální teploty   Aktuální bilance elektro   Stav v kotelně   Teploty a režimy v místnostech

Nastavení systému

Přes webový server jsem si zpřístupnil i některá nastavování systému. Jsou to především časové plány řízených místností, nastavení některých limitů jako je ohřev vody, nastavení režimů kotelny a výběr dnů pro režim prázdniny (svátek).

Časový plán v místnostech   Výběr dnů

Archivy

Pro rychlý přehled vývoje venkovní teploty a výroby energie z fotovoltaiky jsem použil komponenty pro zobrazení archivů. Na jedné stránce je dostupný i provozní deník řídicích systémů.

Archiv venkovní teploty   Archiv fotovoltaiky   Provozní deník

Varianta pro malé displeje

Ke stávající aplikaci jsem ještě doplnil stránky, které jsou optimalizované pro mobily s menším displejem a bez dotykové plochy. Základní rozměr stránek je 240x320 bodů. Na tyto stránky není přímý odkaz z předchozích stránek pro "velký" displej. Zobrazení úvodního menu se musí v prohlížeči mobilu nastavit včetně úplně cesty (v tomto případě xxx.xxx.xxx.xxx/pages/s_menu.hta).

Hlavní menu pro malé displeje   Přehled aktuálních teplot   Aktuální teploty v místnostech   Výběr dnů   Přehled lektrobilance

Závěr - výměna technologií zobrazení

Po 14 dnech zkoušení a praktického používání jsem došel k přesvědčení, že řešení přístupu k řídicím systémům pomocí web serveru AWEB je zcela vyhovující pro běžné používání a nyní vážně uvažuji o zrušení stávajícího napevno nainstalovaného terminálu APT200 na chodbě. Předstate si tu možnost podívat se ráno z postele jaká je venku teplota, zda všechno funguje a případně si v místnosti přitopit... Webové stránky je samozřejmě možné zobrazit i v browseru na PC, stránka je však menší. Pro ovládání a zobrazení hodnot to však nevadí. Mohu tak sledovat svoji domácnost prakticky odkudkoliv - stačí si pouze zapamatovat IP adresu webserveru a nezapomenou přihlašovací jméno a heslo.

V současné době je použito v prezentaci 25 stránek, k tomu nějaké ty obrázky. Celkově zabírá celá aplikace v AWEBu přibližně 164 kB místa, přibližně 2900 kB paměti je stále volných. Na webserver jsem nedal všechna nastavení systému, na to používám již nadefinovaný program ViewDet.

Vzhledem k tomu, že v aplikaci webového serveru je možnost nastavování některých důležitých režimů a hodnot, nedávám všanc poskytnout vám přístup na webserver (IP adresa, jméno, heslo). Za to se omlouvám. Připravuje se ale ukázková aplikace na řídicím systému ADOREG, jakmile bude veřejně přístupná, dám vědět.