VŠB – Technická univerzita Ostrava Fakulta elektrotechniky a informatiky Katedra informatiky
Informacníˇ panel pro Windows 8 Windows 8 Information Panel
2015 Ondrejˇ Bohácˇ
Tímto bych rád podˇekovalIng. Michalu Radeckému Ph.D za odborné vedení práce a také za ˇcasa trpˇelivost,kterou mi vˇenovalpˇrikonzultacích. Dále bych rád podˇekoval rodiˇc˚um,kteˇrími umožnili studium a byli mi podporou. Dˇekujivšem, kteˇrími s prací pomohli jakýmkoliv zp ˚usobem. Abstrakt Cílem této práce je navržení a vytvoˇreníaplikace pro prezentaci multimediálního obsahu, sloužící jako digitální informaˇcnípanel pro všeobecné použití. Aplikace tento obsah bude zobrazovat podle scénáˇrevytvoˇrenéhospecificky pro dané použití. Koncová aplikace bude vytvoˇrenapro platformu Windows 8 s použitou knihovnou WinJS. V práci se také zamˇeˇrímna další technologie jako je TypeScript.
Klícovᡠslova: Informaˇcnípanel, WinJS, Windows 8, HTML5, Java script, Universal App, Type script, Less
Abstract Purpose of this thesis is design and implementation of application, which presents mul- timedia content. It serves as a digital info-panel for general usage. Content is shown ac- cording to created scenario, fitting specific usecase. Application is developed forWin- dows 8 platform with usage of WinJS library. Further on I focus on other technologies, such as TypeScript.
Keywords: Information panel, WinJS, Windows 8, HTML5, Java script, Universal App, Type script, Less Seznam použitých zkratek a symbol ˚u
HTML – Hyper Text Markup Language XML – Extensible Markup Language CSS – Cascade Style Sheet RSS – Really Simple Syndication GUI – Graphical User Interface GPS – Global Position System API – Application Programming Interface DOM – Data Object Model 1
Obsah
1 Úvod 4
2 ProstˇredíWindows 8 5 2.1 Modern UI ...... 5 2.2 Windows Store apps ...... 6 2.3 Možnosti vývoje ...... 6 2.4 Další verze po Windows 8 ...... 7
3 Microsoft WinJS 9 3.1 Vývoj WinJS ...... 9 3.2 Visual Studio ...... 10 3.3 Omezení aplikace ...... 11
4 Konstrukˇcníprvky 12 4.1 Vizuální prvky WinJS ...... 12 4.2 Programové prvky WinJS ...... 14 4.3 TypeScript ...... 16 4.4 Less ...... 19
5 Informaˇcnípanel 20 5.1 Návrh aplikace ...... 20 5.2 Komponenty ...... 22 5.3 Konkurenˇcnía podobné produkty ...... 25
6 Implementovaná ˇcást 28 6.1 Použité technologie ...... 28 6.2 Vstupní soubor ...... 28 6.3 Ukázkové použití ...... 34 6.4 Kompatibilita s ostatními zaˇrízeními ...... 34
7 Závˇer 38
8 Reference 39
Pˇrílohy 40
A Dokumentace 41 A.1 Komponenty ...... 43
B CD-ROM 46 2
Seznam obrázk ˚u
1 Modern UI Windows 8 ...... 5 2 Platforma windows 8. (Zdroj: http://geekswithblogs.net) ...... 7 3 Windows 10 - nabídka Start. (Zdroj: http://arstechnica.com/) ...... 8 4 Windows 10 - okenní zobrazení. (Zdroj: http://arstechnica.com/) . . . . . 8 5 Visual Studio a simulátor s 12"zaˇrízením...... 11 6 Seznam (Zdroj: http://try.buildwinjs.com/) ...... 12 7 Flip view (Zdroj: http://try.buildwinjs.com/) ...... 13 8 Content Dialog (Zdroj: http://try.buildwinjs.com/) ...... 13 9 (Led displaye Zdroj: www.nowatron.cz) ...... 25 10 První stránka panelu Restaurace ...... 35 11 Druhá stránka panelu Restaurace ...... 36 12 První stránka panelu Tatra 603 ...... 36 13 Druhá stránka panelu Tatra 603 ...... 37 14 Poslední stránka panelu Tatra 603 ...... 37 3
Seznam výpis ˚uzdrojového kódu
1 Otevˇrenía pˇreˇctenísouboru info.txt z adresáˇreaplikace pro doˇcasnésoubory 14 2 Ukázka klasického XHRT ...... 15 3 Stejný požadavek v prostˇredíWinJS ...... 15 4 Spuštˇeníasynchronního úkolu s vysokou prioritou ...... 16 5 Ukázka definice tˇrídyv TypeScriptu ...... 17 6 Kód tˇrídyTypeScriptu transpilovaný do JavaScriptu ...... 17 7 Dˇediˇcnostv TypeScriptu ...... 18 8 Výstup z ukázkového pˇríkladus dˇediˇcností...... 18 9 Vyhledávání funkce podle jména v objektech ...... 34 10 Základní struktura konfiguraˇcníhosouboru ...... 41 11 Použití akce zmˇenystránky a ˇcekání ...... 42 12 Použití cyklu for ...... 42 13 Použití cyklu while ...... 43 14 Použití if ...... 43 4
1 Úvod
Cílem této práce je navrhnout a vytvoˇritaplikaci pro prezentaci multimediálního obsahu, který bude prezentován formou informaˇcníhopanelu. Aplikace bude vyvíjena pro ope- raˇcnísystém Windows 8, za použití knihovny WinJs spoleˇcnostiMicrosoft. Vývoj aplikace není však pouze o psaní kódu, primární je znát oˇcekávánía zp ˚usob jakým bude aplikace používána. Dále bude následovat popis plánování stavby celé apli- kace, která bude postavena na typových pˇríkladechz reálného svˇeta. Pˇrecházímedo fáze, kdy návrh aplikace je hotový a vše pˇripravenopro zaˇcátekpráce. Následují poslední kapitoly, popisující technické detaily vývoje. Primárním cílem je tedy zamˇeˇritse na logickou ˇcástaplikace, ˇrešícínavrženou funkˇcnost.Hotová aplikace bude demonstrována ukázkou pˇríklad˚uz reálného svˇeta. Poslední ˇcástije závˇer. D ˚uležitéje zhodnocení aplikace, zda plní stanovené pˇredpo- klady a odpovídá vytyˇcenémunávrhu. Nejedná se však jen o hodnocení vývoje a dosa- žené funkˇcnosti,ale celé práce a hlavnˇezda použité technologie byly vhodné pro daný zámˇer. 5
2 Prostredíˇ Windows 8
Operaˇcnísystém Windows 8 pˇrišeldo prodeje 26. ˇríjna2012. Je nástupcem velice úspˇeš- ného operaˇcníhosystému Windows 7. Byl vydán ve verzích jak pro 32 tak i pro 64 bitové procesory. Je to první, klasický operaˇcnísystém spoleˇcnostiMicrosoft, byl vydán i pro procesory ARM. Tato verze je oznaˇcovánajako Windows RT a je míˇrenoupro mobilní zaˇrízení,pˇredevšímpro tablety. Bohužel aplikace vyvinuté pro 32 a 64 bitovou verzi, nejsou dostupné pro RT verzi. Mobilní a klasická verze je však propojena novým prostˇre- dím Modern UI, pro které mohou spoleˇcnéaplikace vznikat.
2.1 Modern UI Modern UI je nové prostˇredíspoleˇcnostiMicrosoft vystupující ve Windows 8. Zamˇeˇruje se na typografii a obsah v jednoduchém, minimalistickém pojetí. Inspiraci ˇcerpáz mo- derních designových smˇer˚ujako je Bauhaus, Swiss Style a Motion Design. Všechny tyto smˇeryspojuje ˇcistota,použitelnost a dobrá ˇcitelnost,odstraˇnujezbyteˇcnéa rušivé ele- menty. Snaží se vytvoˇritvíce z mála a zamˇeˇritse na aktuálnˇeobsahovˇed ˚uležitédetaily pro uživatele. D ˚uležitou vlastností je pˇrizp˚usobenípro použití na dotekových zaˇrízeních, s r ˚uznýmivelikostmi obrazovek.
Obrázek 1: Modern UI Windows 8 6
2.1.1 Historie Modern UI
První náznaky tohoto prostˇredím ˚užemenajít už ve Windows 7, ale také starších projek- tech jako je Windows Media Center nebo Zune. Dnešní podoba se objevila poprvé až s Windows Phone 7. P ˚uvodníjméno tohoto prostˇredíje Metro. V srpnu 2012 bylo oznámeno ukonˇcenívy- užívaní interního jména Metro novým. Podle spekulací však tato zmˇenamohla být ze snahy pˇredejítprávnickým spor ˚ums nˇemeckouspoleˇcnostíMetro Ag, vlastníci ochran- nou známku.
2.2 Windows Store apps S novým prostˇredíma možností tvoˇritaplikace pro spoleˇcnépoužití a také v rámci trendu poskytovat aplikace pro svou platformu na jednom místˇe,pˇribyla služba Windows Store. Jedná se o internetový obchod s aplikacemi, usnadˇnujícízískávaní program ˚uoproti kla- sické cestˇepˇreskrabicové verze nebo samostatné výrobce. V souˇcasnédobˇejsou v na- bídce aplikace urˇcenépouze pro prostˇredí Modern UI. Do budoucna se poˇcítás propoje- ním s obchodem pro Xbox a rozšíˇreníobchodu o další aplikace, zvláštˇepro aplikace pro klasický desktop.
2.3 Možnosti vývoje V souˇcasnédobˇeje Windows 8.1 nejnovˇejšíverze operaˇcníhosystému od firmy Microsoft. Tento operaˇcnísystém nabízí prostˇredípro vývoj moderních aplikací, které mohou být psány v rozdílných programovacích jazycích. Mezi klasické zástupce patˇríC++ nebo C#, upravené o nové možnosti prostˇredí. Na obrázku2 jsou zobrazeny všechny dostupné technologie pro vývoj jak Modern UI (zde však ještˇese starým oznaˇcenímMetro), tak i pro klasické verze. Zajímavostí m ˚uže být rozdˇeleníˇcástíView u Modern UI aplikací oproti klasickým, kde se grafické prostˇredí vytváˇrístejným programovacím jazykem. Tento zp ˚usobnemusí být vždy ideální, protože se h ˚uˇreoddˇelujelogická ˇcástaplikace od ˇcástivzhledové. D ˚uležitouvlastností vytváˇreníaplikací pro rozdílné velikosti zaˇrízení,je co nejvíce zkrátit ˇcasstrávený na pˇrípravˇeGUI (uživatelského prostˇredí).Je zámˇerem, aby uživatel- ské prostˇredíbylo jednou navrženo a pˇrivývoji jednou implementováno se zohlednˇením responsivity. Tento trend vývoje m ˚užemepozorovat pˇrivývoji webových aplikací, pro- tože rozšiˇrováníchytrých telefon ˚uje rychlé a posouvá klasický web do pozadí. Hlavním cílem je tedy mít aplikaci použitelnou na každém zaˇrízení. Právˇewebový standard HTML5 se snaží být dobrým a moderním smˇerem pro vývoj a to i klasických aplikací. Další d ˚uvod,který by mohl byt zmínˇenje multiplatformnost ˇrešení.Právˇez tohoto d ˚uvodufirma Microsoft pˇrišlas možností vývoje aplikací pomocí webových technologií i ve svých produktech. 7
Obrázek 2: Platforma windows 8. (Zdroj: http://geekswithblogs.net)
2.4 Další verze po Windows 8 2.4.1 Windows 8.1
Necelý rok po vydání Windows 8, Microsoft uvolnil aktualizaci oznaˇcenoujako 8.1. Byla vydána zdarma pro všechny uživatele. Tato aktualizace pˇrineslanˇekoliknovinek v gra- fickém prostˇredía optimalizaci výkonu. Nejhlavnˇejšígrafickou novinku byl návrat tla- ˇcítkaStart, které již nepˇredstavujenabídku známou z Windows 7 a starších, ale pouze pˇrístupdo prostˇredíModern UI.
2.4.2 Windows 10
Následující verzí, která má pˇrijítna trh na podzim roku 2015, je verze Windows 10. Touto verzí Microsoft chce sjednotit ještˇevíce všechny dostupné zaˇrízeník jednomu operaˇc- nímu systému, jednomu uživatelskému profilu pro každého uživatele. Míˇrítaké na sv˚uj Xbox a do budoucna se možná doˇckámei chytrých nositelných vˇecí,jako jsou hodinky. Spoleˇcnouvlastností všech zaˇrízeníbude tedy jádro operaˇcníhosystému. V této verzi se také vracejí nˇekterérysy p ˚uvodníchverzí, jako je již zmínˇenánabídka Start, která nyní bude pˇredstavovatzmenšené Modern UI, obrázek 3. K propojení obou prostˇredítaké napom ˚užemožnost zmenšení oken aplikace z celo- obrazovkového módu do módu okenního, obrázek 4. Tyto informace nejsou koneˇcné,finální vzhled a funkˇcnostse m ˚užeještˇezmˇenit.Roz- hodnˇese máme na co tˇešit. 8
Obrázek 3: Windows 10 - nabídka Start. (Zdroj: http://arstechnica.com/)
Obrázek 4: Windows 10 - okenní zobrazení. (Zdroj: http://arstechnica.com/) 9
3 Microsoft WinJS
Technologie WinJS je prostˇredkempro vývoj klasických aplikací tak také i mobilních, založených na webových technologiích. Je tvoˇrenakombinace HTML, CSS a JavaScriptu, oznaˇcovanoustandardem HTML5. WinJS je postavená jako Windows knihovna, což znamená, že obsahuje funkce pro práci s prostˇredímWindows. Implementuje obsluhování souborového systému, práci s klasickými senzory, které m ˚užemenajít v zaˇrízeních,jakým je tˇrebakamera, gyroskop, nebo GPS.
3.1 Vývoj WinJS 3.1.1 Verze 1.0
První verze WinJS pˇrišlana trh s Windows 8 a dovolovala vytváˇretaplikace jen pro poˇcí- taˇcovouverzi Windows Store.
3.1.2 Verze 2.0
Další verzí Microsoft umožnil vytváˇreníchnativních aplikací pro Windows 8.x i Win- dows Phone 8.x. Pˇribylataké podpora pro Xbox aplikace.
3.1.3 Verze 3.0
Obecnˇepˇredchozíverze WinJS umožˇnovalyvývoj jen pro operaˇcnísystémy Microsoftu. Nová verze pˇrineslapodporu také i pro další operaˇcnísystémy a všechny hlavní pro- hlížeˇcedostupných pro tyto systémy. Dovoluje nám tedy vytváˇretzcela multiplatformní aplikace napˇríˇcvšemi dostupným zaˇrízeními. Jinými slovy, aplikace postavené na verzi 1.0 a 2.0 byly vyvíjeny ve Visual Studiu a urˇcenypro Windows Store, nová verze umožˇnujíbýt platformˇenezávislí a také nabízí svobodnou volbu vývojového prostˇredí. Novou vlastností je modulárnost, která umožˇnujemimo jiné i optimalizaci výkonu. Dovoluje naˇcítatjen moduly, které jsou doopravdy v aplikaci využívány, ˇcímžsnižuje nároky na pamˇet’.
3.1.4 Verze 4.0
V pr ˚ubˇehuzpracovávání této práce, byla oznámena nová verze WinJS na vývojáˇrském blogu Microsoftu 1. Podle zprávy nová verze WinJS cílí opˇetna vylepšení podpory mezi prohlížeˇci,zá- roveˇnse snaží potvrdit fakt, že se nejedná o framework pouze pro aplikace, ale také pro
1Odkaz na ˇclánekhttps://blogs.windows.com/buildingapps/2015/03/27/a-preview-of-winjs-4-0/ 10 web. Vývojáˇrise snaží pˇrinéstpodporu také pro další frameworky, jako je napˇríkladAn- gularJS2, a další zajímavé funkˇcnosti.Souˇcástioznámení je také ukázka nové verze, se všemi novinkami, které pˇrináší.
3.2 Visual Studio Visual Studio je vývojové prostˇredíspoleˇcnostiMicrosoft, primárnˇeurˇcenépro vývoj aplikací pro Windows. Nabízí podporu pro všechny dostupné programovací jazyky, jak pro konzolové aplikace, tak i aplikace s grafickým prostˇredím.Visual Studio obsahuje nˇekolikprvk ˚u,prvním je samotný editor kódu, který podporuje zvýraznˇenísyntaxe a automatické dokonˇcovánípro všechny programové prvky. Obsahuje také další funkce pro rychlejší orientaci v kódu a následné úpravy. Visual Studio kompiluje kód na pozadí, aby poskytlo informace o syntaktických a kompilaˇcníchchybách a ty následnˇezvýrazˇnuje.Tato kompilace však nevytváˇríspusti- telný kód, slouží pouze pro pohodlí programátora. Další d ˚uležitousouˇcástíje debugger, což je softwarový nástroj, který se používá pro hledání chyb pˇrivývoji software ve fázi ladˇení.Debugger pracuje se jak spuštˇeným kó- dem ve strojové formˇetak také nad spravovaným kódem, tímto zp ˚usobemulehˇcujehle- dání chyby. Pro vývoj mobilních aplikací na osobním poˇcítaˇcineexistuje zp ˚usob, jak otestovat dotykové ovládání nebo využít specializované senzory, jakým je gyroskop nebo akcele- rometr. Pro tento pˇrípadVisual Studio obsahuje také simulátor mobilního zaˇrízení(viz. obrázek 5). Simuluje také dotykové akce pro r ˚uznévelikosti obrazovek a rozlišení. Tento zp ˚usobnení však jedinou možností testování aplikace, je možné využít bˇehna lokál- ním zaˇrízenínebo využít reálného zaˇrízení.Tato pˇrímápodpora nabízí nˇekolikvýhod oproti nainstalovaní aplikace klasickou cestou do zaˇrízenía následném testování v tom, že dovoluje využití stejných ladících možností jako na lokálním zaˇrízení.D ˚uležitoua ne- spornou výhodou je také pohodlí. Dalším nástrojem je pomocník pro návrh grafického prostˇredí.Hlavním cílem je umož- nit jednoduchým pˇretaženímvkládat grafické prvky na plochu a umist’ovat je. Není nutné psát kód ruˇcnˇe,spouštˇetprogram a vizuální kontrolou se pˇresvˇedˇcovato finálním umístˇení.Visual Studio nenabízí samo o sobˇepodporu pro návrh grafického prostˇredí pro WinJS, ale je obsaženo v nástroji jménem Blend for Visual Studio. Tento program umožˇnujeeditaci CSS styl ˚u,tak také návrh CSS animací. Visual Studio studio dále obsahuje nástroje pro databáze, správu práce v týmu a další nástroje mimo téma této práce. D ˚uležitouvlastností je rozšiˇritelnosto další nástroje nebo podporu programovacích jazyk ˚u.
3.2.1 Vytvoreníˇ projektu
WinJS je souˇcástíMicrosoft Visual Studia již od verze 2012. Existují však i další zp ˚usoby jak WinJS získat, jednou možností je stažení ze služby GitHub nebo využití bˇežnýchba- líˇckováníchsystému dostupných pro JavaScript.
2https://angularjs.org/ 11
Obrázek 5: Visual Studio a simulátor s 12"zaˇrízením
3.3 Omezení aplikace Javascript obecnˇe,je kód spouštˇenýv prohlížeˇcitémˇeˇrbez vˇedomíuživatele (m ˚užebýt vypnutý, ale vˇetšinadnešních web ˚uje potom nepoužitelná). Tato situace však vytváˇrí nepˇríjemnábezpeˇcnostnírizika, která musí být ˇrešenana úrovni jádra prohlížeˇc˚u. Klasická Javascriptová aplikace nemá pˇrímýpˇrístupdat ˚umuživatele. Uživatel m ˚uže poskytnout soubor, který je ale následnˇeoddˇelenod zbytku souborového systému, scho- váním své cesty a až poté je pˇredánke zpracování. Bez této ochrany by kterýkoliv server mohl obsahovat útoˇcnýkód, zkoumající naše osobní data, nebo k nim pˇrímopˇristupovat a odesílat útoˇcníkovi. 12
4 Konstrukcníˇ prvky
4.1 Vizuální prvky WinJS V následující ˇcástije výbˇerzajímavých komponent, všechny jsou popsány v dokumen- taci.
4.1.1 Seznam - ListView
Touto komponentou se snadno vytváˇrejíseznamy položek. Každá položka m ˚užebýt jednoduše pˇrizp˚usobitelná,vlastním rozmístˇením.Seznam disponuje dostatkem zajíma- vých funkcí, jako je tˇrebaslouˇcenímpoložek do jedné ˇcásti- napˇríkladpro abecední seznamy. Seznamy nemusejí být ˇrazenyjen klasicky pod sebou ale také do stran nebo mˇrížky. Není problém pˇridathlaviˇcku,anebo patiˇcku.
Obrázek 6: Seznam (Zdroj: http://try.buildwinjs.com/)
Velice zajímavým doplˇnkemtéto komponenty je, že již v základu obsahuje možnost uživatelského ˇrazenípoložek klasickým gestem táhni a pust’. Velice pˇrínosnýmm ˚uže být líné naˇcítaní(další data naˇcítá,až jsou potˇrebanapˇríklad,když se uživatel blíží konci dostupných položek, zaˇcnenaˇcítatdalší).
4.1.2 Galerie - Flip View
Komponenta galerie slouží pro zobrazování kolekce obrázk ˚u,jednoho obrázku v jeden ˇcas.Tato komponenta obsahuje nejnutnˇejšínastavení, napˇríkladautomatické posouvání, zvolení animace výmˇenyobrázku, tabulku obsahu.
4.1.3 Animace
ModernUI má, kromˇesvého specifického vzhledu, své specifické animace. Pˇríkladem jednotlivých animací m ˚uže být pˇrecházenímezi stránkami aplikace, zmˇenatextu a atd. Veškeré tyto animace jsou nachystány pro jednoduché použití v každé aplikaci. 13
Obrázek 7: Flip view (Zdroj: http://try.buildwinjs.com/)
4.1.4 Flyout
Komponenta pˇredstavujícíkontextové menu nebo seznam akcí pro tlaˇcítko,a je také známá jako "dropdown".
4.1.5 Dialogové okno Content Dialog
Tato komponenta vynutí pozornost uživatele pˇripráci s aplikací, m ˚užepˇredstavovatchy- bovou hlášku, ale také m ˚užebýt použita jako potvrzovací formuláˇrk dané akci.
Obrázek 8: Content Dialog (Zdroj: http://try.buildwinjs.com/)
4.1.6 Fragments
Komponenta fragment pˇredstavujeˇcástuživatelského prostˇredí,fragmenty do prostˇredí m ˚užemepˇridávatdynamicky, pˇritomzbylý obsah m ˚uže z ˚ustatstejný. Fragmenty se vy- užívají také, pokud se ˇcástrozhraní opakuje.
4.1.7 Výberˇ soubor ˚u- File Picker
Komponenta výbˇersouboru nemá sv ˚ujvzhled dokud není otevˇrena,poté nabízí rozhraní pro pˇrístupk dat ˚umuživatele. Tento výbˇerje však v režii operaˇcníhosystému. 14
4.2 Programové prvky WinJS 4.2.1 Práce se souborovým systémem
WinJS poskytuje pro potˇrebyprogramátora lokální oddˇelenýadresáˇraplikace, kde m ˚uže uložit soubory trvale a poté k nim pˇristupovat.Tento zp ˚usobje rozdˇelendo nˇekolika typ ˚u,které se liší dobou uchovávání a zp ˚usobemsynchronizace s dalšími zaˇrízeními.O tom, který typ využije, rozhoduje pˇrímoprogramátor.
1. localSettings - automaticky uložené nastavení aplikace definované jako klíˇc,hod- nota
2. roamingSettings - podobnˇejako localSettings, jen s rozdílem že toto nastavení se m ˚užesynchronizovat napˇríˇczaˇrízeními
3. temporaryFolder - místo pro ukládání doˇcasnýchsoubor ˚u,u tˇechtosoubor ˚unení zaruˇceno,že jsou trvalé, mohou být kdykoliv smazány systémem
4. localFolder - místo pro ukládání jakýchkoliv soubor ˚u,zaruˇcenatrvanlivost, nesyn- chronizují se napˇríˇczaˇrízeními
5. roamingFolder - místo pro ukládání doˇcasnýchsoubor ˚u,je nutno brát ohled na to, že tyto soubory jsou synchronizovány
Umístˇeníadresáˇreje v lokální složce profilu uživatele, v této složce sídlí nastavení vˇetšinyostatních program ˚u.Každou aplikaci pˇredstavujejeden adresáˇr.Soubory v lo- kálním adresáˇrije možno pˇresouvat,mazat, ˇcísta také zapisovat. Následuje ukázka kódu pro otevˇrenísouboru info.txt z doˇcasnésložky aplikace a jeho následné pˇreˇctenído promˇenné lines, která je pˇredánajako parametr zanoˇrenéfunkce. Windows.Storage.ApplicationData.current.temporaryFolder.getFileAsync("info.txt") .then(function ( file ) { Windows.Storage.FileIO.readTextAsync(file) .then(function( lines ) { // function body } ); }) ; Výpis 1: Otevˇrenía pˇreˇctenísouboru info.txt z adresáˇreaplikace pro doˇcasnésoubory
4.2.2 Promisses
Vˇetšinaudálostí v Javascriptu se dˇejeasynchronnˇeoproti bˇežnémutoku, dobrým pˇríkla- dem m ˚užeposloužit dotazování na server. Je uskuteˇcnˇenoasynchronním požadavkem, kterým se táže serveru a ˇcekána jeho odpovˇed’. Pokud by tento dotaz ˇcekalna odpovˇed’ a nedˇelalnic jiného, aplikace by byla po tuto dobu neaktivní. Odpovˇed’ je bezodkladnˇe obsloužena po pˇríchoduodpovˇedi. 15
Asynchronní události jsou ˇrešenycallbacky, což jsou funkce, které se volají po dokon- ˇceníudálosti - v našem pˇrípadˇese dotaz na server doˇckalodpovˇedi.Parametry tˇechto funkcí pˇredstavujír ˚uznétypy odpovˇedí. function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // Uspesne ziskani souboru }else{ // Neuspesne ziskani souboru } }
xmlhttp.open("GET","ajax_info.json", true); xmlhttp.send(); } Výpis 2: Ukázka klasického XHRT
Tento zp ˚usobse však stává dost nepˇrehledným,pokud tˇechtoudálostí je nutno pro- vést sekvenˇcnˇeza sebou více a další dotazy jsou datovˇezávislé na pˇredchozím.V násle- dující ukázce je možno si také povšimnout úspory kódu, pˇristejnˇefunkˇcnosti. WinJS.xhr({ url : rssURL, responseType: "document" }) .done( function completed(result) { // Uspesne ziskani souboru }, function error () { // Neuspesne ziskani souboru } ); Výpis 3: Stejný požadavek v prostˇredíWinJS
4.2.3 Plánovacˇ
Plánovaˇcpˇredstavujemanažera pro asynchronní úkoly, dovoluje urˇcovatprioritu zpra- covávaného úkolu, pozastavovat a znovu se navracet ke zpracovávání. Prioritu zpracovávaného úkolu je možno urˇcitˇcíslem-15 až 15, kde menší hodnota znamená nízkou prioritu. Základní prioritou je 0, znaˇcícínormální stav. 16
1. -15 Min
2. -13 Idle
3. -9 Below normal
4. 0 Normal
5. 9 Above normal
6. 13 Hight
7. 15 Max
var S = WinJS. Utilities .Scheduler;
S.schedule(function () { // function body }, S. Priority .high); Výpis 4: Spuštˇeníasynchronního úkolu s vysokou prioritou
Dlouho trvající funkce mohou jednoduše pozastavit své vykonávání, aby uvolnily místo pro úkoly s vyšší prioritou. Aby ˇrízeníúkol ˚ubylo kompletní, manažer disponuje také funkcemi pro zastavení vykonávání úkolu s menší prioritou, než mu je zadána.
4.3 TypeScript TypeScript je nástavba k JavaScriptu, rozšiˇrujícívývoj aplikací o výhody, jakou je typová kontrola, jednodušší zápis tˇrída modul ˚u.Zmínˇenévýhody nejsou nápomocny jen pˇri vývoji, ale také pˇripozdˇejšíchúpravách a ladˇení. TypeScript nemá sv ˚ujvlastní interpretr jazyka, ale je transpilován do JavaScriptu. Transpilace je proces, pˇrikterém se ze zdrojového kódu stává zase zdrojový kód, oproti komplikaci, kdy vzniká strojový kód. Obecnˇeplatí, že výsledný kód je podmnožinou kódu zdrojového, tady platí, že každý JavaScript je TypeScript.
4.3.1 Vývoj v TypeScriptu
TypeScript je funkˇcnˇeobjektový skriptovací programovací jazyk. Jedná se o rozšíˇreníJa- vascriptu, nesnaží se jej mˇenitoproti ostatním projekt ˚um,jako je napˇríkladCoffeScript nebo Script#. Snaží se zmˇenitzp ˚usobzápisu do do pˇrehlednˇejšívarianty. Co tedy Typescript nabízí? Statické datové typy, tˇrídya dˇediˇcnost,moduly, rozhraní, generické datové typy a výchozí hodnoty parametr ˚ufunkcí. Všechny prvky jsou však dosažitelné i bez jeho použití, ale za cenu složitˇejšíchkonstrukcí. Následující útržek zdrojového kódu pˇredstavujezápis tˇrídy, konstruktoru, instanˇc- ních promˇennýcha funkci v TypeScriptu. Poté následuje transpilovaný výstup v Javascriptu. Na tomto pˇríkladuje zˇrejmé,jak TypeScript zjednodušuje zápis a do jaké míry mˇenívý- sledný kód. 17
class ExampleClass { public variable1: number; protected variable2: string ; private variable3: number[];
constructor() { this.variable1 = 42; this.variable2 = "Test"; this.variable3 = []; this.variable3.push(42); }
public setVariable(num: number) { this.variable1 = num; }
public getVariable1(): number { return this.variable1; }
protected isNumberInArray(num: number): boolean { return num in this.variable3; }
protected addToText(text: string ) { this.variable2 += text ; } } Výpis 5: Ukázka definice tˇrídyv TypeScriptu var ExampleClass = (function () { function ExampleClass() { this.variable1 = 42; this.variable2 = "Test"; this.variable3 = []; this.variable3.push(42); }
ExampleClass.prototype.setVariable = function (num) { this.variable1 = num; };
ExampleClass.prototype.getVariable1 = function () { return this.variable1; };
ExampleClass.prototype.isNumberInArray = function (num) { return num in this.variable3; };
ExampleClass.prototype.addToText = function (text) { this.variable2 += text ; 18
};
return ExampleClass; }) () ; // # sourceMappingURL=BachelorTest.js.map Výpis 6: Kód tˇrídyTypeScriptu transpilovaný do JavaScriptu
4.3.2 Typová kontrola
Typová kontrola kódu probíhá pˇritranspilaci do JavaScriptu, Visual Studio umí však hlá- sit chyby o špatném typu promˇennéi v reálném ˇcasepˇrivývoji. Typová kontrola probíhá jen pˇripˇrekladu,poté se zahazuje. Tímto zp ˚usobemse neubírá rychlost pˇrivykonávání hotového skriptu. Pro využívané projekty, napˇríkladknihovny, je nutno dodat soubor s deklaracemi funkcí. Výhodou je, že velká ˇcástpoužívaných knihoven má své deklarace pˇripravenék použití.
4.3.3 Dediˇ cnostˇ
V následující kapitole rozšíˇrímeukázku zápisu tˇrídyo dˇediˇcnost.V tomto pˇrípadˇepro- bíhá jediné pˇridávánídalšího kódu do výstupu. Samotná dˇediˇcnostfunguje jako v kla- sických objektovˇeorientovaných programovacích jazycích. class BaseExampleClass { public variable1: number = 42; }
class ExampleClass extends BaseExampleClass { public variable2: number;
constructor() { super();
this.variable2 = 42; } } Výpis 7: Dˇediˇcnostv TypeScriptu
var __extends = this.__extends || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } __.prototype = b.prototype; d.prototype = new __(); }; var BaseExampleClass = (function () { function BaseExampleClass() { this.variable1 = 42; } 19
return BaseExampleClass; }) () ; var ExampleClass = (function (_super) { __extends(ExampleClass, _super); function ExampleClass() { _super.call(this); this.variable2 = 42; } return ExampleClass; }) (BaseExampleClass); // # sourceMappingURL=BachelorTest.js.ma Výpis 8: Výstup z ukázkového pˇríkladus dˇediˇcností
4.4 Less Less je preprocesor pro kaskádové styly, rozšiˇrujeCSS o následující dynamické prvky: 1. Promˇenné 2. Skládání styl ˚u(Mixins) 3. Vnoˇrenápravidla 4. Funkce 5. Výpoˇcty Less svými funkcemi napomáhá k redukci duplicitního kódu. Pro každou tˇrídu,která by mˇelaobsahovat stejné vlastnosti, je možné vytvoˇritjednu tˇrídua postupným skládá- ním se dostat k finálnímu výsledku. Pro pˇríkladmáme tˇrídu,která se stará o pˇridání okraje bloku a k tomu více r ˚uznýchtˇrídblok ˚u,u kterých bychom tento okraj použili. Místo kopírování tˇechtovlastností m ˚užemetuto tˇrídupˇriˇradittˇrídˇeblok ˚ua vlastnosti budou použity. Následná zmˇenaokraje se týká jednoho místa v kódu. Tento problém se dá ˇrešiti zp ˚usobemspojení vlastností až v HTML, ale obecnˇem ˚užebýt nˇekterátˇrída zapomenuta, popˇrípadˇepˇrivíce tˇrídáchse tento zp ˚usobjiž stává dosti nepˇrehledným. Vlastnosti pro skládání tˇrídmohou být ovlivnˇenyi parametry nebo pˇridánímpravi- dla podle nˇejaképodmínky, podobnˇejako jsou media queries v ˇcistémCSS, ale s rozdílem, že parametr ˚u,které m ˚užemepoužít je daleko více. Pˇrínosnouvlastností je použití promˇenných,do kterých m ˚užebýt uloženo ˇcíslo,hod- nota nebo barva. Následná zmˇenahodnoty v celém dokumentu znamená pˇrepsáníjed- noho literálu a zkompilování. Vˇetšinouse však v celém dokumentu nepoužívá jedna barva, ale skupina barev, která ze stylistického hlediska má vˇetšinoupodobné vlastnosti. M ˚užejít o barvu svˇetlejší,nebo sytˇejšía podobnˇe,z tohoto d ˚uvoduLess disponuje funk- cemi pro úpravy barev. Císlaˇ v promˇennýchzase mohou být použity pro všechny škálovatelné vlastnosti CSS, jako je napˇr.výška, šíˇrka,tloušt’ka ohraniˇcení.Pro ˇcíselnékonstanty jsou zde také ma- tematické funkce. Dalším využitím je uložení pˇrímévlastnosti, napˇr.pro okraje solid, dashed a podobnˇe. 20
5 Informacníˇ panel
V souˇcasnémsvˇetˇenarážíme na informaˇcnípanely témˇeˇrna každém místˇe.M ˚užejít jak o tabule s turisticky nebo historickými zajímavými informacemi o místˇekde se právˇe nacházíte, také tˇrebapodnicích, jako jsou obchody, kde m ˚užouvyobrazovat nabízené produkty, výrobky v akˇcníchcenách nebo tˇrebainformovat o nabízených službách. In- formaˇcníchpanel ˚u,tvoˇrenýmiklasickými tištˇenýmicedulemi je nespoˇcet.Cílem je tedy navrhnout ˇrešení,které by je mohlo nahradit modernˇejšítechnikou. Aktuálnˇeje dostatek technologií k použití k tˇemtoúˇcel˚um.Nemusí jít nutnˇeo de- dikovaná zaˇrízenímíˇrenák jedinému úˇcelu,ale je možno využít klasických poˇcítaˇc˚uve spojení s televizí, ˇcivelkoplošných barevných LED zobrazovaˇc˚u.Díky tˇemtozaˇrízenímse m ˚uževýrobní cena snížit na nezbytné minimum, protože není nutné vytváˇretzaˇrízení jen pro jeden úˇcel.Nyní se již dostáváme k situaci, kdy v technologii m ˚užememít jasno, ale chybí nám zp ˚usobzobrazení obsahu. Jednoduchým ˇrešenímby se mohlo zdát, promítat video nebo obrázky pˇripravenéna míru. Tato strategie se m ˚užezdát výhodnou, protože možnosti jsou prakticky neomezené. Ale v obou pˇrípadechjsou následné úpravy složité. Zmˇenatakového média by znamenala zmˇenitcelý záznam. Ne vždy však m ˚užememít po ˇcasepˇrístupk editovatelným soubor ˚um. Nápad jak porazit pˇredešléproblémy, je vývoj aplikace, která by byla vyvinuta spe- ciálnˇepro jeden pˇrípadpoužití. V potaz je brána situace, kdy jednotlivé pˇrípadyse mezi sebou liší pouze finálním vzhledem, ale logické jádro celé aplikace m ˚užebýt založeno na spoleˇcnýchvlastnostech. Jde o velmi pˇrímoˇcaréˇrešení,trh nabízených technologií vyu- žitelný pro aplikace je velice široký. Vývoj specializované aplikace pro jeden pˇrípadpoužití, m ˚užestále být optimální pro velmi specifické požadavky, obecnˇeje ale tˇrebase zamˇeˇritna vˇetšíspektrum pˇrípad˚u. Nápadem je tedy aplikace vyvinuta s cílem umˇetsi nˇejakýmzp ˚usobemporadit s vˇetši- novým pˇrípadempoužití. V této situaci tedy nastává otázka, proˇctedy takovou aplikaci vyvíjet? Jakým zp ˚u- sobem zajistit takové použití? A jakou pˇridanouhodnotu by mˇelapˇrinést?Odpovˇed’ již možná zaznˇelav pˇredchozíchodstavcích, cílem je možnost tvoˇritdynamický obsah a usnadnit správu aktualizací pˇrizmˇenáchpˇredávanýchinformací. Velmi pˇrínosnouvlast- ností je také schopnost vytvoˇritprezentaci bez znalostí jakýchkoliv technologií spojených pokroˇcilejšíznalostí poˇcítaˇce.
5.1 Návrh aplikace Pˇrivývoji aplikace musí být kladen co nejvyšší d ˚urazna možnosti použití pro jakoukoliv situaci. Další silnou ˇcástí,která by mˇelabýt zohlednˇena,je možnost budoucí rozšiˇrovatel- nosti. V základním tvaru by tedy mˇelabyt schopna uspokojit co nejvíce zákazníku svou funkˇcnostía konfigurovatelností. Souˇcasnétechnologie a solidní návrh bude nápomocen tyto pˇredpokladysplnit. Prvotním cílem aplikace je splnit veškeré vlastnosti, které mohou být vytvoˇrenykla- sickým informaˇcnímpanelem. Tento pˇrípadobsahuje pouze dvˇekomponenty, jsou jimi text a obrázky. Komponentou je myšlen prvek, obalující jeden druh obsahu, dalším pˇrí- 21 kladem m ˚užebýt video, zvuk, nebo speciální stavy jiných komponent (napˇr.kompo- nenta zobrazující aktuální ˇcas). Krokem k dynamiˇcnosti,je nutno definovat jazyk, kterým administrátor (ˇclovˇekpro- vozující informaˇcnípanel, nebo osoba povˇeˇrená)pˇredáaplikaci sv ˚ujobsah.
5.1.1 Požadavky
Nejd ˚uležitˇejšípožadavky již byly vyjmenovaný. V této ˇcástise již dostáváme ke specifiˇc- tˇejšímvlastnostem aplikace. Pˇredpokládámetedy aplikaci, která bude pˇrijímatvstup na základˇe,kterého bude zobrazen obsah a vykonávat nˇejakoufunkˇcnost. Vstup bude obsahovat komponenty definované svými vlastnostmi, obsahem a vzhle- dem pro daný pˇrípad,každá komponenta tedy musí být dostateˇcnýmzp ˚usobemkon- figurovatelná. Nejenom komponenty, nýbrž celá aplikace musí být schopna být upravi- telná k jakémukoliv výsledku. Vzhled výstupu by mˇelbýt smˇerem k zaujmutí pozorova- tele, k upoutání jeho zvˇedavostía pˇredáníinformací. Souˇcástíbude také již zmínˇenýscénáˇrakcí, který by mˇelbýt pevnˇesvázán s kompo- nentami. Pokud souˇcástmá být definována svým obsahem, je d ˚uležitémoci tento obsah dynamicky mˇenit.Každá komponenta m ˚užemít také své specifické akce. Pˇredpoklademje, že obsah informaˇcníhopanelu je promítán cyklicky. Zároveˇndélka jednoho cyklu by nemˇelabýt pˇrílišdlouhá, ale mˇela by pˇredatdostatek informací, a pˇritomdržet stálou pozornost. Oˇcekávanýmprovozem aplikace bude režim, kdy in- formaˇcnípanel vykonává ˇcinnostbez zásahu pozorovatele. Tato ˇcinnostbude ovládaná ˇcástívstupu starající se o chování panelu, tvoˇrenýmijednoduchými akcemi s jasnou kon- strukcí. Typickým pˇríklademakce m ˚užebýt tˇrebasituace zmˇenytextu, obrázku a po- dobnˇe. Scénáˇrchování by mˇelbýt ovlivnitelný podmínkami ˇrídícítok akcí. K povaze použití informaˇcníchpanel ˚uje možné pˇripravitjiž dané rozmezí podmínek, naplˇnujícír ˚uznépo- užití. Podmínkou k zobrazení urˇcitéhoobsahu m ˚užebýt ˇcas,datum nebo tˇrebaaktuální den. U tˇechtopodmínek není nutné vyvíjet úplnou komplexitu na všechny možné stavy, ale spíše vést tuto ˇcástk co nejvˇetšíjednoduchosti. I pˇrestoje možností jakými zp ˚usoby ovlivˇnovatakce je dostatek a budou se více otevírat s pˇridávánímfunkˇcnostíaplikace. Mimo popsané autonomní chování by i pozorovatel mohl ovlivnit akce informaˇcního panelu. M ˚užese jednat o stisk nˇejakéklávesy nebo dotyk na obrazovce. Všechny tyto události jsou technicky ˇrešitelnéna bˇežnýchzaˇrízeních.Zajímavou vlastností m ˚užebýt akce na pˇristoupenípozorovatele blíže k obrazovce, tato akce je zaznamenatelná pomocí web kamery vyhodnocující zmˇenusledovaného prostˇredí. Narušením autonomního chování je možno reagovat na preference uživatele, kdy ne- musí jít o pˇrímépˇrevzetíkontroly, ale jen o úpravu parametr ˚uzobrazení, jako je tˇreba pˇreskoˇcenína jinou ˇcástobsahu nebo jen urychlení aktuální ˇcásti.Po daném intervalu se chování vrací do bˇežnéhochování. Dalším pˇríklademm ˚užebýt zmˇenalokalizace ob- sahu, která ovlivní všechen obsah informaˇcníhopanelu. Tato zmˇenavšak m ˚užez ˚ustat trvalá do dalšího pˇrepnutí. 22
5.2 Komponenty Jak již bylo zmínˇeno,prostˇredíinformaˇcníhopanelu bude sestaveno z komponent. Tato ˇcástbude tedy orientovaná k podrobnˇejšímupopisu navrhovaných komponent.
5.2.1 Komponenta pro text
Základním kamenem informaˇcníhopanelu jsou textová informace. Tato komponenta se m ˚užetváˇritstaticky, ale je d ˚uležité,aby byla ovlivnitelná již zmínˇenýmiakcemi, v tomto pˇrípadˇebudou manipulovat s obsahem. Nemusí jít jen o prostou zmˇenu,ale i o možnost rolovat text pokud je dlouhý a další podobné animace. Tato komponenta nebude zobrazovat jen zadaný text, ale také texty podle r ˚uzných šablon, jako je ˇcas,datum. Tyto šablony by mˇelybýt konfigurovatelné jednoduše pro každý formát data a ˇcasu.K tˇemtošablonám m ˚užepˇribýtzobrazení svátku, jména dne a podobnˇe. Informaˇcnípanel by mˇelumˇettaké naˇcítattextový obsah r ˚uznýchdokument ˚ubˇež- ných formát ˚u.
5.2.2 Komponenta obrázek
Další komponentou informaˇcníhopanelu je obrázek. Tato komponenta by mˇelasouviset s komponentou pro klasický text a mˇelaby jej doplˇnovat.Akce pro zmˇenutextu, m ˚uže následovat akce zmˇenˇeníobrázku.
5.2.3 Galerie
Galerie je speciálním pˇrípademkomponenty pro obrázek, musí umˇetsama nezávisle vy- mˇeˇnovatobrázky s nastavitelným intervalem, souˇcástíby mˇelobýt i více efekt ˚uvýmˇeny obrázk ˚u.Výhodou je však automatizace práce, kdy nebude nutná akce pro každou vý- mˇenuobrázku.
5.2.4 Prehrávaˇ cˇ videí a audia
Pˇrehrávaˇcvideí by mˇelumožnit jednoduché rozhraní pro pˇridánímultimediálních prvk ˚u. Ideální se jeví podpora co nejvíce možných formát ˚u.I tento prvek by mˇelbýt konfiguro- vatelný a akcemi by mˇelbýt dostateˇcnˇeovladatelný. Rozhodnˇeby nemˇelychybˇetakce pro spuštˇení,zastavení, zmˇenuaktuálního ˇcasu,nastavení hlasitosti s možností napros- tého utišení.
5.2.5 Dynamické komponenty
Tato kategorie komponent bude zastˇrešovatkomponenty, kterým obsah bude pˇridáván z nˇejakéslužby, v konfiguraci bude tudíž jen odkaz ˇcipopis, ˇríkajícíodkud sv ˚ujobsah mají získávat. Spoleˇcnýmzdrojem pro tyto komponenty bude internet, existuje spousta zdroj ˚u,které mají veˇrejnˇenebo licencí chránˇenéAPI, kterým je možno získávat zajímavé 23 informace, jako je tˇrebapoˇcasí,zprávy anebo jen galerie fotografií. Pro obecné zástupce používaných služeb, budou pˇriplavenykomponenty, zajišt’ující komunikaci, získaní in- formace a následné zobrazení. Za výbˇerem zde popsaných komponent stojí úvaha nˇekolikapˇrípadu použití, obsa- hem informaˇcníhopanelu nemusí být nutnˇejen informace zamˇeˇrenépˇrímopro dané po- užití, ale také doplˇnkovéinformace. Pˇríklademby mohla být turistická chata s informa- cemi o historii chaty, nabídkou služeb, ceníkem, obrázky nabízených pokoj ˚ua podobnˇe. Tyto informace by mˇelybýt tedy tím nejd ˚uležitˇejším,zároveˇnale jistým lákadlem, proˇc se zrovna tady ubytovat, jsou v tomto pˇrípadˇeohlasy jiných návštˇevníku.Tyto informace se nemusí získávat v rámci této aplikace, ale mohou být pˇrístupnéna službách a tímto se dostáváme k sociálním sítím. Sociální sítˇenabízejí ideální prostor pro popsanou situaci a jsou také za tímto úˇcelemvyužívány. Dalším nápadem pro horskou turistickou chatu m ˚užebýt pˇredpovˇed’ poˇcasí,zprávy z okolí a podobnˇe. U obsahu a míry konfigurovatelnosti u tˇechtokomponent musí být pˇrihlédnutok implementaci pˇrímýchzdroj ˚udat. Obecnˇese dá ˇríct,co komponenta, to poskytovatel služby nebo skupina služeb s velmi podobným výstupem.
5.2.5.1 Pocasíˇ Komponenta poˇcasíby mˇelabýt spojující pro získávání dat ze zdroj ˚u poˇcasíjak pro aktuální poˇcasí,tak také pro pˇredpovˇed’. Z vlastního principu vˇecije jasné, že tento obsah závisí na místˇe,pro které je informaˇcnípanel provozován. Zdrojem této informace m ˚užebýt zaˇrízení,které m ˚uženabídnout pˇresnou,anebo pˇribližnoupolohu v závislosti na vybavenosti. Komponenta by mˇelaumožnit obsah informace, v nˇekterýchpˇrípadechnás m ˚uže zajímat jen souˇcasnáteplota, jindy klíˇcovýmse m ˚užestát tlak a podobnˇe.Poˇcasínemusí být nutnˇejen textová záležitost informací o aktuální teplotˇe,ale také m ˚užebýt vylepšená grafickými prvky, symboly a podobnˇe.Tyto obrázky by mˇelybýt souˇcástíkomponenty s možností zmˇen. Akcemi této komponenty se nabízí vynucení získání nových dat, zmˇenamísta, nebo zmˇenazdroje dat, pokud bychom chtˇelipˇrihlédnoutk rozdílným pˇredpovˇedímjiných služeb. Tato komponenta by mohla být také zdrojem pro ovlivˇnováníakcí informaˇcníhopa- nelu. Obsah by tak díky tˇemtopodmínkám mohl být zobrazován jiný pro teplé a studené dny, také by jej mohlo ovlivnit aktuální poˇcasí.S pˇríklademturistické chaty by nemusel tedy doporuˇcovatnávštˇevukoupalištˇev deštivých dnech, ale tˇrebamuzea.
5.2.5.2 RSS cteˇ ckaˇ Standart RSS již není využívaný v tak velké míˇre,jako pˇredlety. Je navržen k rychlému pˇrístupunovinek z aplikací, starající se o více zdroj ˚usouˇcasnˇe.V hlavní míˇrejde o zdroje se zprávami, skládá se z nadpisu, vˇetšinoujen ˇcástiinformace a odkazem pro pˇrístupk celé zprávˇe.Tyto ˇcástimají standardní tvar, tímto faktem je možno tuto komponentu abstrahovat až do úplné nezávislosti na konkrétním zdroji. Povinným parametrem pro tuto komponentu v tomto pˇrípadˇeje adresa zdroje, dal- šími by bylo vhodné ovlivnit již zobrazované zprávy, omezit zobrazovaný poˇcet,nebo je filtrovat. 24
Spektrum akcí je velice obdobné jako u komponenty pro poˇcasí,m ˚uženabízet tedy vynucení aktualizace ˇcizmˇenuzdroje dat.
5.2.5.3 YouTube Pˇrehrávaˇcvideí je zamˇeˇrenna videa uložená v zaˇrízenía rozsah možných formát ˚uje omezen pouze na závislost prostˇredí.Pˇredpokládáse použití již nativního pˇrehrávaˇce,který by mˇelbýt pˇrizp˚usobenpro použití s daným vývojovým prostˇredím. Komponenta by mˇelazastˇrešitzískání videa z youtube.com a nad ním pˇripravitstejné akce jako u klasického pˇrehrávaˇce.
5.2.5.4 Facebook, Twitter V úvodu této kapitoly byly zmínˇenysociální služby, kte- rých je nepˇrebernémnožství pro r ˚uznˇezamˇeˇrenépoužití. Facebook a Twitter patˇrímezi nejvíce oblíbené služby. Disponují velice dobˇrezdokumentovaným API.
5.2.5.5 Vzdáleneˇ ovladatelná komponenta Nejspeciálnˇejšíkomponentou by se mohla jevit taková, které obsah bude dodávat na dálku pˇrímoadministrátor, nebo jiný software starající se o tuto službu. Touto komponentou se již informaˇcnípanel dá využít k daleko speciálnˇejšímakcím, jako jsou napˇríkladvyvolávací tabule na úˇradech. Princip této komponenty je prostý, jako u ostatních se komponenta bude dotazovat na nˇejakouslužbu o data, ale v kratším intervalu. Tento interval se m ˚uželišit pˇresnou situací, je pˇrímozávislý na tom, jak se ˇcastose data budou mˇenit.Výstupem této služby budou již zmínˇenéakce informaˇcníhopanelu, které budou dynamicky aplikované pˇrímo. U tˇechtoakcí se nedá již hovoˇrito opakovatelnosti informaˇcníhopanelu, ale o speciálním použití. Opakovatelné vlastnosti, je nutno zachovat pro klasicky konfigurované prvky informaˇcníhopanelu. Díky této komponentˇe,je možné také zajistit situace, kdy konfigurace celého infor- maˇcníhopanel ˚unebude souˇcástízaˇrízení,ale m ˚užebýt vzdálená. S každým startem aplikace by tato konfigurace byla stažená a používaná, v této situaci je opakovatelnost akcí v ˇcasesplnitelná. Tato funkce tedy usnadní ovládání více stejných panelu na dálku, což m ˚užebýt také velice pˇrínosnávlastnost.
5.2.5.6 Další komponenty Další komponenty jsou si dost podobné, nebo rozvíjejí vlastnosti jiných komponent, proto budou uvedeny jen navrhované názvy. Cíl tˇechto komponent by mˇelbyt zˇrejmý,není nutné je implementovat hned v prvních verzích apli- kace, mohou být dodány postupnˇe.U tˇechtokomponent se oˇcekáváménˇeˇcastépoužití než u výše zmínˇených.
• Internetový prohlížeˇc
• Katalog produkt ˚u
• Internetové rádia
• Mapy 25
U komponent, které nemají pˇrímoukontrolu nad obsahem, m ˚uženastat problém se zadanými požadavky nad obsahovou ˇcástí,typickým problémem m ˚užebyt lokalizace do jiných jazyk ˚u.Nˇekterézdroje mohou nabízet již lokalizované data. Obecnˇetato situace bude platit spíše u dat, která nabývají urˇcitýchhodnot, pˇríklademm ˚užebýt pˇredpovˇed’ poˇcasí,pro tento typ dat se dají velice jednoduše pˇripravitslovníky s pˇreklady. Dalším ˇrešenímm ˚užebýt implementace možnosti využít pˇrekladaˇcetˇretístrany, umožˇnujícípˇre- klady jakýkoliv dat, bohužel toto ˇrešenínemusí být dostateˇcnˇekvalitní.
5.3 Konkurencníˇ a podobné produkty V rámci této práce je také d ˚uležitése poohlédnout, jaké možnosti jsou u konkurenˇcních produkt ˚u.V Ceskéˇ republice se nachází nˇekolikfirem, které se zabývají podobnými pro- dukty. Vˇetšinatˇechtofirem nabízí již kompletní ˇrešeníobsahující vlastní aplikaci azob- razovací zaˇrízení. Vˇetšinanalezených firem nabízí informaˇcnípanely tvoˇrenéLED obrazovkami, které umí zobrazovat jen text. Zobrazovaˇcejsou tvoˇrenyLED panely, které umí zobrazit znaky nebo jen ˇcísla.Pokud je tˇrebanemˇennéhotextu, tak je vytvoˇrentiskem. Jejich použití m ˚užemenajít napˇríkladve výrobních halách s pˇrehledemvyrobených kus ˚u,zmetk ˚ua podobnˇe,skóre tabule ve sportovních halách, nebo také ve veˇrejnédopravˇes informa- cemi o lince a podobnˇe.Výhodou tˇechtoLED zobrazovaˇc˚uje možná lepší ˇcitelnostz vˇetší vzdálenosti a teoreticky menší elektrická spotˇreba.Tyto parametry jsou však dostateˇcnˇe závislé na prostˇredía použití.
Obrázek 9: (Led displaye Zdroj: www.nowatron.cz)
Další skupinou, jsou firmy nabízející grafické LED zobrazovaˇce.Jejich hlavní výho- dou jsou obrovské úhlopˇríˇckya pozorovací vzdáleností nˇekolikdesítek metr ˚u.Vˇetšinou je možné je pˇripojitk osobnímu poˇcítaˇcijako další monitor a promítat na tyto panely vlastní obsah. Tyto zobrazovaˇcese mohou použít i s navrhovanou aplikací. 26
Firem, které v Ceskéˇ Republice existují s podobným produktem je velmi málo. Z d ˚u- vodu málo výmluvných webových prezentací, vybírám ke srovnání firmu Ki-Wi, která nabízí velice zajímavý produkt, pˇrinášejícídalší zajímavé funkce, které by mohly být in- spirativní do dalšího vývoje. Firma Ki-Wi 3 nabízí kompletní ˇrešeníinformaˇcníchpanel ˚u,jak autonomních, tak uži- vatelsky ovládatelných. Jejich nabídka je rozdˇelenado nˇekolikaprodukt ˚upodle funkcí, ˇcemužm ˚uženapovídat fakt, že využívají více aplikací, které by aplikace mohla obsaho- vat dohromady. Seznam produkt ˚u:
• Ki-Wi Server
• Ki-Wi ActiveCatalog
• Ki-Wi MiniPlayer
• Ki-Wi Kiosk
• Ki-Wi NaviSystem
• Ki-Wi Player
• Ki-Wi Analytics
• Ki-Wi EyeMetrics
Firma své produkty míˇrírovnou do prodejních míst, obchodních center ale také do úˇredníchprostor, mˇest˚umk digitalizaci úˇrednídesky a zprávám z vedení mˇesta.Ke kaž- dému použití odpovídá jiný produkt. Pro klasické autonomní systémy se využívá pro- duktu MiniPlayer nebo Player, produkt MiniPlayer je vyvinut na platformˇeAndroid spo- leˇcnostiGoogle, u produktu Player je jen informace o speciálnˇeupraveném operaˇcním systému. Kiosk je již interaktivní aplikace, stavˇejícísvé použití na internetovém prohlí- žeˇci,nejspíše omezeném pro skupinu server ˚u,na které m ˚užeuživatel pˇristupovat. Ki-Wi Server je aplikace sloužící pro správu produkt ˚u,zmˇenuobsahu z jednoho místa. Tímto produktem propojují všechny ostatní a je zamˇeˇrenˇcistˇejen na administraci. Zajímavým produktem je NaviSystem, který zlepšuje orientaci v budovˇe,umí vyhle- dávat místnosti a dát uživateli radu, kterým smˇerem se vydat. Produkt ActiveCatalog, kombinuje prvky internetového obchodu do kamenného, s možnosti hledání produkt ˚ua zobrazení informací. Dalším zajímavým produktem je Analytics, který umí sledovat data z jednotlivých produkt ˚ua vytváˇretstatistiky. Data pro analýzu využívaní informaˇcníhopanelu se dají získávat jen s aktivním zapojením uživatele, u autonomních panel ˚unení dostatek para- metr ˚u,které lze jednoduše sledovat. Tento problém ovšem velmi zajímavˇeˇrešíprodukt EyeMetrics, který využívá kameru nebo zaˇrízeníKinect (herní ovladaˇcod Microsoftu,
3www.ki-wi.cz 27 využívající snímaní dˇeník interpretací akcí, hráˇctedy využívá svého pohybu) k vyhod- nocení situace pˇredinformaˇcnímpanelem a možnosti cílení obsahu informaˇcnímupa- nelu pro pohlaví, vˇekovoukategorii, kterou dokáže rozlišit. Zajímavá se jeví detekce po- zornosti a oˇcníhokontaktu, podle které se již m ˚užouoptimalizovat ˇcástiinformaˇcního panelu. Bez pˇresnétechnické dokumentace se dá jen velice složitˇeodhadovat, o jak kvalitní produkty jde a jaké jsou jejich schopnosti. Bohužel v internetové prezentaci není o tˇechto informacích nic napsáno. Závˇerem je tedy to, že firma nejspíše disponuje velice podob- ným produktem, je zˇrejmáznalost trhu, dána rozsáhlými referencemi, pro který své pro- dukty pˇripravujea tím pádem nˇekteréfunkce jsou pokroˇcilejší.Velice pˇrínosným ˚užebýt také fakt, že nabízí pro své produkty již hotové zaˇrízení,jak pro interní, tak pro externí použití. 28
6 Implementovaná cástˇ
6.1 Použité technologie Aplikace je vyvinuta v popsaných technologiích v teoretické ˇcástiaplikace. Pˇrizaˇcátku mé práce, Visual Studio mé používané verze, umožˇnovalovytvoˇritprojekt pouze pro verzi 2.0 WinJS. HTML5 a CSS3 je využito pro celé grafické prostˇredí.Obecnˇejsou jejich možnosti pro tvorbu vzhledu prostˇredíje velmi pokroˇciléa velmi dostateˇcnépro zamýšlenou funkˇc- nost aplikace. Kombinací tˇechtotechnologií a princip ˚u,jakým zp ˚usobemjsou vyvíjeny dnešní moderní internetové stránky, je možné vytvoˇritjakékoliv grafické efekty. Využití tˇechtotechnologií je také nepˇredstavitelnˇeˇcasovˇenároˇcnéoproti vývoji vlastních vykres- lovacích systém ˚u,s podmínkou tak vysoké ohebnosti všech grafických parametr ˚u. K JavaSriptovým knihovnám byly pˇridánydalší, pro ulehˇcenípráce s DOM, známá knihovna jQuery4. Tato knihovna je velice používána pro práci v klasických webových aplikacích a je oblíbena pˇrespro svou malou velikost. Hlavní výhodou je usnadnˇenípráce se selektory oproti klasickému JavaScriptu, je tvoˇrenaobjektem jQuery, který je také pˇrí- stupný pˇresalias $. jQuery také oddˇeluje"chování"od HTML struktury, podobnˇejako CSS oddˇeluje"zobrazovací"charakteristiky. Další využitou JavaScriptovou knihovnou je DateJS5, ulehˇcujícípráci s daty, jejich formátováním a dalšími užiteˇcnýmioperacemi. Pro otevírání ZIP balíˇck˚u,jsem vybral knihovnu s názvem JSZip6, který umí nejenom otevírat, ale zároveˇni vytváˇret. Poslední využitou knihovnou je Less.js7, pro pˇrekladLESS v klientské ˇcástíaplikace, zamýšlenou pro kompilaci LESS až v uživatelovˇeprohlížeˇci.
6.2 Vstupní soubor Jak již bylo ˇreˇceno,pro definici vzhledu a chování informaˇcníhopanelu je nutno aplikaci pˇredatkonkrétní vstupní soubor, který m ˚užebýt doplnˇeni o další soubory, jako jsou ob- rázky, zvuk nebo video. A proto jsem se rozhodl pro použití balíˇcku.Ideálním zp ˚usobem se jevilo využití i nˇejakého komprimaˇcníhoalgoritmu a proto byl vybrán velmi rozšíˇrený formát ZIP. Využitím archívu se také vyˇrešilproblém s bezpeˇcnostnímomezením aplikace. Uži- vatel vybere jen jeden soubor, který je aplikací zpracován, v opaˇcnémpˇrípadˇeby aplikace musela uživatele vybídnout k vyhledání všech potˇrebnýchsoubor ˚uruˇcnˇe.Další výho- dou se m ˚užetaké jevit pˇrizískávání aplikací z jiného než lokálního zaˇrízení. Balíˇcekm ˚užemít libovolnou strukturu, ale je nutno dodržet základní požadavek a to, že soubor, ze kterého bude vstup ˇctenmusí být uložen v koˇrenua musí se jmenovat panel.xml.
4http://www.jquery.com 5http://www.datejs.com 6https://stuk.github.io/jszip 7http://lesscss.org/#client-side-usage 29
6.2.1 Význam cástíˇ vstupního souboru
Vstupní soubor je limitován svou pevnou strukturou rozdˇelenoudo nˇekolikaˇcástí.Tuto strukturu si obecnˇem ˚užemeprohlédnout v následujícím seznamu. Tato pevná struktura by mˇelaudržet soubor pˇrehledný.
• Cástˇ celkového nastavení informaˇcníhopanelu
– Globální nastavení – Místo pro vlastní stylopis
• Cástˇ pro jednotlivé obrazovky informaˇcníhopanelu
– Schéma první obrazovky ∗ Vzhled obrazovky ∗ Chování – Schéma druhé obrazovky ∗ Vzhled obrazovky ∗ Chování – Další obrazovky
• Cástˇ pro celkové chování aplikace
– Jednotlivé akce
Nejd ˚uležitˇejšísouˇcástícelého konfiguraˇcníhosouboru je ˇcástpro jednotlivé obra- zovky informaˇcníhopanelu, v této ˇcástinalezneme popsány jednotlivé vzhledy stránek informaˇcníhopanelu a jejich chování. Poˇcetjednotlivých stránek není omezený. Další, ale již nepovinnou ˇcásti,je ˇcástpro celkové nastavení informaˇcníhopanelu, v konfiguraˇcnímsouboru je uvedena jako první jen z d ˚uvodupˇrehlednosti.Tato ˇcástje pˇripravenak tomu, aby obsahovala veškeré nastavení pro celý informaˇcnípanel, tudíž m ˚užeovlivnit každou komponentu. To znamená, že zde m ˚užemekonfigurovat nastavení pro výchozí jazyk informaˇcníhopanelu, formát data a ˇcasu.Souˇcástítéto sekce je také místo pro vložení vlastního stylopisu v LESS. Poslední ˇcástíje ˇcástpro ovlivnˇeníchování celé aplikace. Je stejná jako chování každé obrazovky a m ˚užeobsahovat stejné akce. Z obecného hlediska m ˚uženahradit jednotlivý popis chování akcí u jednotlivých obrazovek, ale hlavním zámˇerem je možnost zmˇenit aktivní obrazovku, pokud je potˇrebaaby obrazovka mˇelakrátké cyklické chování a zá- mˇerem je mˇenitobrazovky v ˇcasovémintervalu. Tímto zp ˚usobemse ulehˇcísložité pˇre- poˇcítávánítrvání a zasazování ˇcekánído lokálního chování, nebo urˇcování,kolikrát se tato obrazovka má opakovat aby naplnila požadovaný ˇcas. 30
6.2.2 Proces zpracovávání vstupního souboru
Konfiguraˇcnímsouborem je tedy ZIP balíˇcek,který po výbˇeru v aplikaci se kopíruje do temp složky WinJS aplikace. V této složce je balíˇcekrozbalen a obsah pˇrekopírovaný do lokální složky. Zde již je aplikací otevíraný soubor panel.xml. V této chvílí aplikace zaˇcínázpracovávat tento soubor. Zpracování probíhá po logic- kých ˇcástechpopsaných v pˇredešlékapitole. Protože aplikace využívá HTML stránky k zobrazení, ˇcásts LESS stylopisem se kompiluje do CSS a je vložena pˇrímodo stylovacího tagu v zobrazení. Ostatní prvky je již nutno procházet a podle nich vytváˇretadekvátní objekty, pˇred- stavující jejich funkˇcnost.Nejprve se zpracovávají vzhledové ˇcástiinformaˇcníhopanelu, postupnˇepodle stránek. Funkˇcníobjekty jsou ve stránce oznaˇcenyvlastním tagem, tyto objekty mají pevnˇedefinovaný HTML kód, který se místo nich vloží do výsledné stránky. Ostatní tagy jsou klasické tagy jazyka HTML, a vkládají se pˇrímo. Zpracování objektu zaˇcínáˇctenímjeho atribut ˚u, id a class se zachovávají a elementu se vkládají pˇrímo.Tímto zp ˚usobemsi atribut id zachovává svou funkˇcnost,jako v klasic- kém HTML. Speciální vlastnosti jsou již závislé na dané konkrétní komponentˇe,obecnˇe je, ale d ˚uležitýatribut value, pˇredstavujícíhodnotu daného prvku. M ˚užejít o text, jméno obrázku a podobnˇe.Komponenta tˇechtoatribut ˚um ˚užemít více. Atributy nejsou však jediným zp ˚usobempˇredáníinformací komponentˇe,mohou být pˇredányjako "child ele- ment"XML ˇcehožje využito u komponenty galerie. Pokud tato hodnota se dále nevy- užívá k dalšímu zpracování (napˇríkladhodnotou je odkaz pro stažení obsahu), je tato hodnota vložena do HTML elementu a dále do stránky. Identifikátor elementu je dále využit pro identifikaci pˇrinásledné aktualizaci ele- mentu. Tímto se dostáváme k ˇcásti,kdy se zpracovává chování. Pˇredpoklademje již zpra- cované rozložení, protože pro akce, kromˇeakcí tvoˇrícíchˇcekání,jsou závislé na svém cíli. Podobnˇejako komponenty obsahují akce také své atributy definující cíl, novou hodnotu a typ akce. Tyto akce jsou bud’ obecné anebo speciální pro komponentu, kterou ovlivˇnují. V aplikaci jsou implementovány také speciální akce ovlivˇnujícítok zpracovávání. In- spirací jsou klasické podmínky a smyˇckyznámé z programovacích jazyk ˚u.O tˇechtoprv- cích již bylo ˇreˇcenov návrhu aplikace a obsahují již pˇredpˇripravenétypické podmínky závislé na ˇcase.Detailnˇejšípopis je uveden v samostatné kapitole Chování 6.2.3.2. Zpracováváním akcí se vytváˇríscénáˇr,který je pˇredánkontroléru, starající se o pr ˚u- bˇehchování pro každou stránku. Každé chování stránky je pˇriˇrazenokontroléru, starající se o chování celého informaˇcního panelu. V souˇcasnéchvíli není možné zpracovávat více akcí najednou, proto se paralelní operace se musí zpracovávat sekvenˇcnˇe.
6.2.3 Struktura aplikace
6.2.3.1 Komponenty Každá komponenta je potomkem tˇrídy Component, která obsa- huje vlastnosti a obecné metody, pro vytvoˇrenía aktualizaci elementu. Z vlastností obsa- huje zmínˇenýidentifikátor a informaci o tom jaký HTML tag pˇredstavuje.Kromˇefunkcí starajících se o zapouzdˇreníobjektu, obsahuje d ˚uležitoufunkci update, která je volána s 31 polem atribut ˚u,ve kterém je definována akce zmˇeny. Funkce update se tedy stará o dyna- miˇcnosta je pˇrepisovanáu specializovanˇejšíchkomponent. Metoda toDefault navrací komponentu do výchozího stavu, je volána pro každou komponenty aktuální stránky pˇrizahájení zobrazování stránky znovu, aby se zachovala stejná opakovatelnost komponenty pro další zobrazení. Pokud v konfiguraˇcnímsouboru není u komponenty definovaný identifikátor jetento identifikátor vygenerován metodou generateRandomId. Na této tˇrídˇejsou založené komponenty TextBox, ImageBox, ale také tˇrída Page. Návrh tˇechtotˇrídje založený na návrhovém vzoru kompozit. Tˇrída Page je nositelem dceˇriných komponent, je prozatím jediná s touto vlastností. Doposud byla ˇreˇcpouze o komponentách, které mˇenísv ˚ujobsah pouze na základˇe akcí definovaných v konfiguraˇcnímsouboru. Tˇemitoakcemi jsme schopni zaˇríditi kom- ponentu, která mˇenísv ˚ujobsah v ˇcasovýchintervalech, ale tohle ˇrešeníje znaˇcnˇene- pohodlné. Za tímto úˇcelemje implementována tˇrída UpdatingComponent, která má vo- lání funkce update cyklicky v daných ˇcasovýchintervalech. Tento ˇcasje plnˇeovlivnitelný zadáváním v rozmezí milisekund až hodin. Pˇríklademvyužívajícím tuto implementaci m ˚užebýt galerie nebo komponenta zobrazující aktuální ˇcas. Posledním typem komponent jsou již jen komponenty závislé na obsahu mimo apli- kaci, jak již bylo v návrhu popsáno. Jde o komponentu závislou na API urˇcitéslužby. Tyto komponenty jsou také potomky tˇrídy UpdatingComponent, ale jejich funkˇcnostje oddˇelenado dalších pomocných tˇríd,aby byl dodržen pˇredpoklad,aby se každá tˇrída starala jen o jeden úkol. Pro tento úkol byla navržena tˇrída AjaxHelper, která se stará o požádání serveru o data. Dceˇrinétˇrídyjiž obsahují algoritmy zpracovávající odpovˇed’. Protože tyto API musí být implementovány podle dokumentace a stˇežíse dají vymyslet abstraktnˇe,musí být navrženy pˇresnˇena míru. Pˇríkladempro m ˚užebýt poˇcasí,v aplikaci je implementován pomocník pro službu OpenWeatherMap 8 Struktura odpovˇedim ˚uže být jiná pro každou službu, ale pˇrijatédata jsou typovˇestejné, proto výsledné informace se již ukládají do pˇripraveného objektu, který je pˇredávanýdo adekvátní komponenty. Komponenty pro poˇcasíjsou CurrentWeatherWidget pro aktuální poˇcasía WeatherFore- castWidget pro pˇredpovˇed’. Avšak existuje také služba, která má svou odpovˇed’ standardizovanou. Pˇríkladem této služby je RSS. Zde již je možná implementace starající se o jednu pomocnou tˇrídu pˇrijímajícíRSS, tˇrídydržící jeden záznam a komponenty zobrazující tento obsah. Apli- kace obsahuje implementovanou verzi 2.0 9 Aplikace obsahuje následující komponenty: • Jednoduché komponenty
– Page – TextBox – ImageBox
8www.openweathermap.com je služba nabízející data o poˇcasízdarma, tak i v placené variantˇe.Nabízí data pro celý svˇet,aktuální poˇcasítak i pˇredpovˇed’ až na 16 dní. 9Detail specifikace RSS 2.0 http://validator.w3.org/feed/docs/rss2.html 32
– VideoElement – AudioElement
• Komponenty samoˇcinnˇese aktualizující
– RollerText – ImageGaleryBox – DateTimeBox – DateClockWidget
• Speciální dynamické komponenty
– RssComponent – CurrentWeatherComponent – WeatherForecastComponent
Posledními nezmínˇenýmijsou komponenty obalující video a audio prvky. Tyto kom- ponenty umí pˇrehrátprozatím jen lokálnˇeuložené média v klasickém HTML5 pˇrehrá- vaˇci.
6.2.3.2 Chování Chováním v aplikaci je myšlen tok akcí, ovlivˇnujícíkomponenty in- formaˇcníhopanelu, které jsou drženy v objektech tˇrídy BehaviourController. Tˇrídase stará o zpracování akcí z konfiguraˇcníhosouboru a vytvoˇreníadekvátních objekt ˚ureprezen- tující jednotlivé akce. Tato tˇrídamá za úkol také spouštˇetjednotlivé kroky scénáˇrea po dokonˇceníaktuálního, pˇrejítdo navazujícího, anebo zaˇcítcelý scénáˇropakovat. Z tohoto d ˚uvodutˇrídaobsahuje referenci na objekt stejného typu, nazvanou afterDoneReturn, refe- rující na další kontrolér. Tˇrídapro držení toku akcí obsahuje pole objekt ˚u AbstractAction, pˇredstavujícírodi- ˇcovskoutˇrídupro všechny akce. Tato tˇrídaabstrahuje veškeré akce pro aktualizaci da- ných objekt ˚u,ale nestará se samotnou aktualizaci dat, pouze pˇredávánové data kom- ponentˇe.V jedné chvíli m ˚užebýt aktivní pouze jediná akce daného kontroléru. Samotná akce má referenci na sv ˚ujkontrolér, po dokonˇcenísvé akce ˇríkákontroléru, aby vykonal další akci. Obyˇcejnouakcí, která nemá sv ˚ujcíl, tudíž neaktualizuje žádnou komponentu, je akce ˇcekání.Objekt realizující tuto akci je instancí tˇrídy WaitAction. Zpoždˇenítouto akcí je re- alizováno funkcí setTimeout, která po uplynutí intervalu ˇríkákontroléru, že m ˚užepˇrejít na další akci. Pˇripoužití této funkce však nastává problém, pokud aplikace již pˇrejdedo další fáze, napˇr.pˇrechodna další stranu. Z tohoto d ˚uvoduje d ˚uležitémít možnost in- terval pˇrerušit, proto kromˇefunkce doAction realizující zmínˇené vykonání, obsahuje také funkci disableActions, která je urˇcenake stornování pr ˚ubˇehu.Získaní ˇcasuod uživatele pro ˇcekáníje vymyšleno dostateˇcnˇeintuitivnˇe,umožˇnujezadávání od milisekund po ho- diny i s kombinací jednotlivých hodnot. 33
Další akce už obsahují referenci na danou komponentu, které volají s novými para- metry funkci update. Touto vlastností jsou sjednocené aktualizace komponent stejnˇei pro prvotní inicializaci. Pro jednoduché ovlivnˇenítoku scénáˇreje zde implementován cyklus ForLoop s daným poˇctemopakování. Pro složitˇejšíovlivnˇenítoku jsou implementovány akce IfCondition a WhileLoop. Obˇe akce pˇrijímajíparametry pˇredstavujícípodmínky. Podmínky mohou pˇredstavovatjakou- koliv akci, která je možná realizovat pomocí JavaScriptu, ale je nutné tyto podmínky mít realizované již v aplikaci. Obecné rozšiˇrovánítˇechtopodmínek je zamýšleno velice jedno- duše, vytvoˇrenímtˇrídyrozšiˇrující Condition s metodami, kde jméno metody pˇredstavuje také jméno podmínky pro informaˇcnípanel. Vyhodnocování podmínek obstarává objekt ConditionResolver, kterému jsou pˇredány a ten volá jejich pˇríslušnéfunkce. Pro vyhodnocení podmínek jako pravda, musí být všechny splnˇeny. Ze zvoleného zápisu podmínek jako atributy elementu, nelze tyto atri- buty opakovat a z tohoto d ˚uvodunelze realizovat logické operátory. Obecnˇetoto ˇrešení není omezujícím, protože není zámˇerem tyto podmínky zbyteˇcnˇekomplikovat a pokud by nastala situace vyžadující složitˇejšíakci, m ˚uže být implementována jako samostatná metoda v rozšiˇrujícítˇrídˇe. Zvolením cesty s cílem co nejjednoduššího zadávání tˇechtopodmínek, realizovanými metodami, je vhodné také již nˇejakéobsáhnout v aplikaci. Pˇredpokládanýmparametrem, který bude nejˇcastˇejiovlivˇnovatzobrazování, podle mého názoru je ˇcasovádoba. Infor- maˇcnípanel m ˚užezobrazovat jiný obsah ráno a jiný zase odpoledne. Pˇripravenyjsou tedy podmínky rozlišující denní dobu ve zvoleném hodinovém rozmezí, tak i dané pro pˇrímoukontrolu jestli je ráno, veˇcera podobnˇe.V podobném zp ˚usobuje zde varianta pro dny.
6.2.4 Konkrétní implementace zajímavé cástíˇ
Pˇrivývoji jsem se snažil o co nejjednodušší rozšiˇritelnostaplikace, pˇriimplementaci pˇri- pomínkovacího systému zmínˇenéhov pˇredešlékapitole jsem narazil na problém, jak ˇrešit pˇridávánínových funkcí. Chtˇeljsem, aby podmínky mohly být v samostatných tˇrídách, podle kategorie kam spadají a zároveˇnaby se jednotlivé akce nemusely nikde registrovat. Rešenímˇ je projít adekvátní tˇrídy, její funkce a po nálezu ji zavolat. V obecném pro- gramování se tomuto principu ˇríkáreflexe, ale JavaScript není typickým pˇredstavitelem toho, jak to v jiných jazycích funguje a má odlišný zp ˚usobtvoˇreníinstancí založených na prototypech, které jsou ve skuteˇcnostitaké objekty. Ve funkci getTypeCondition jejíž implementaci si m ˚užeteprohlédnout v následující ukázce, je procházen objekt window, který drží veškeré objekty a hledá se objekt se jmé- nem obsahujícím slovo "Condition". Toto slovo je tedy podmínkou pro to, aby metody této tˇrídybyly brány jako podmínky. Následuje již podmínka, která kontroluje, zda je to hledaná funkce a vrátí její instanci do objektu ConditionResolver. V pˇrípadˇe,že metoda není nalezena, vrací se objekt typu BaseCondition, pˇredstavující základní podmínku, která kontroluje jen, zda jméno funkce je stejné jako hodnota para- metru. 34
private getTypeCondition(functionName: string, value: string ) : Condition { for (var object in window) { var objectName: string = object. toString () ; if (objectName.indexOf("Condition") !== −1) { if (typeof window[objectName].hasMethod != "undefined" && window[objectName]. hasMethod(functionName)) { return new window[objectName](functionName, value); } } } return new BaseCondition(functionName, value); } Výpis 9: Vyhledávání funkce podle jména v objektech
6.3 Ukázkové použití V rámci pˇredstaveníaplikace jsem pˇripravilukázkové použití informaˇcníhopanelu pro nasazení do restaurace. Tento panel se skládá celkem z 2 stránek a na každé je použitý stejný základ, skládající se ze jména restaurace a aktuálního ˇcasu.Na spodní levé stranˇe je informace o cenˇedenního menu s animací bˇežícíhotextu. První stránka (obrázek 10) je tvoˇrenagalerií fotek restaurace a otevírací dobou, zároveˇnje zde informace o tom, zda je možné si dát denní menu z nabídky, které je dostupné v ˇcase10 až 13 hodin. Na další stránce (obrázek 11)je již výbˇerz nabízených jídel s fotografiemi tˇechtojídel. První stránka má limit 30 sekund, poté se pˇrepínána stránku, která je zobrazena minutu. Samotná restaurace spoleˇcnˇes nabídkou je smyšlená. Druhou ukázkou bych rád demonstroval použití v muzeu automobil ˚u,konkrétnˇepro KopˇrivnickouspoleˇcnostTatra. Vybral jsem si automobil Tatra 603 a pˇripraviltˇrístrán- kový informaˇcnípanel. První stránka (obrázek 12) je vˇenovanánˇekolikafotografiím a obecnými informacemi dostupných z wikipedie. Na další stránku jsem si dovolil pou- žít dobovou reklamu natoˇcenouspoleˇcnostíKrátký film Praha, a.s.10, pro reprezentaci funkˇcnostivideo pˇrehrávaˇce. Následující stránku (obrázek 13) tvoˇrídalší fotografie vozu s galerií. Na poslední stránku (obrázek 14) jsou umístˇenytechnické informace o vozu.
6.4 Kompatibilita s ostatními zarízenímiˇ Vyvinutá aplikace je kompatibilní se všemi dostupnými zaˇrízeními,s operaˇcnímsysté- mem Windows 8 a výše. Podporovány jsou i mobilní telefony, které však pouze kv ˚uli velikosti display ˚unejsou vhodnými adepty pro použití. Nejlepších výsledk ˚upro kva- litní zobrazení se dostane na velkých úhlopˇríˇckách. Zajímavým zaˇrízenímse m ˚užejevit nejnovˇejšíverze mikropoˇcítaˇceRaspberry PI 2 Model B slibující podporu Windows 10. Použitím tohoto zaˇrízeníjsme schopni minima- lizovat místo k umístˇenízaˇrízenía pˇritomnabízí dostateˇcnéperiferie pro pˇripojenívšech
10http://www.kratkyfilm.cz/ 35
Obrázek 10: První stránka panelu Restaurace
d ˚uležitýchkomponent. Samozˇrejmostí je také pˇrístupk internetu. Nejjednoznaˇcnˇejšívý- hodou je fakt, že Windows 10 bude pro tyto zaˇrízenídostupný zdarma, v tomto pˇrípadˇe se cena zaˇrízeníbez zobrazovací jednotky dostává na £27 (asi 720Kˇc)11. Operaˇcnísystém Windows však nemusí být omezující platformou pro použití, apli- kace se pomocí nˇekolikaúprav a pˇridáním WinJS knihovny ve verzi alespoˇn3.0, dá exportovat pro použití v klasickém prohlížeˇci.Tomuto pˇredpokladuse aplikace stává spustitelnou na jakémkoliv zaˇrízenís podporou JavaScriptu v podporovaném prohlížeˇci. Podpora závisí na použitých knihovnách, napˇríkladknihovna WinJS slibuje podporu ve všech hlavních prohlížeˇcíchnapˇríˇcvšem platformám12.
11Zdroj: http://uk.rs-online.com/web/p/processor-microcontroller-development-kits/8326274/ (1.4.2015) 12Zdroj: https://github.com/winjs/winjs/wiki/Browser-Support (poslední editace ˇclánku17. ˇríjen2014) 36
Obrázek 11: Druhá stránka panelu Restaurace
Obrázek 12: První stránka panelu Tatra 603 37
Obrázek 13: Druhá stránka panelu Tatra 603
Obrázek 14: Poslední stránka panelu Tatra 603 38
7 Záverˇ
V úvodu práce jsem se zamˇeˇrovalna platformu jako celek. Microsoft se snaží konkurovat ryze mobilním systém ˚umsvou politikou vlastnit operaˇcnísystém jednotný pro veškeré zaˇrízení.Z tohoto d ˚uvoduvzniklo také nové prostˇredíModernUI, které pˇrišlo se sys- témem Windows 8. V rámci tohoto systému obsahuje také velice kvalitní software pro vývoj, kterým je Visual Studio, snažící se co nejvíce zjednodušit práci. Pˇrivývoji se s ním dobˇrepracovalo a využil jsem také dostateˇcnˇejeho ladících nástroj ˚u,které jsou dobˇre pˇripravenyi pro HTML5 založené aplikace. V rámci práce jsem využil knihovnu WinJS ve verzi 2.0, který pracuje se standar- dem HTML5. Zdál se velice vhodným pro navrhované použití, protože dovoluje imple- mentovat tuto aplikaci jako speciálním typ webové aplikace. Použitím tohoto ˇrešeníse zjednodušila práce nejenom pˇrinávrhu aplikace, ale bude velice pˇrínosnoupro tvorbu specifických informaˇcníchpanel ˚udo budoucna, protože tuto práci bude moci obstarat ˇclovˇek,který se stará o kódování webových aplikací. Výhodou je také, že není potˇreba znovu, doslova ˇreˇceno,vynalézat kolo a vymýšlet použitelný zp ˚usobpro vykreslování grafického prostˇredí.Nejenom v tomhle ohledu jsem se snažil co nejvíce využít technolo- gií, které jsou již zabˇehnuté,a tímto faktem je pˇrivytváˇreníinformaˇcníhopanelu, nutná pouhá znalostí princip ˚uHTML, CSS (volitelnˇeLESS) a XML. K samotnému návrhu aplikace si troufám tvrdit, že byl vytvoˇrendobˇre,mým ná- zorem je, že svou konstrukcí je použitelný pro následující rozšiˇrováníveškerých ˇcástí. Aplikace implementuje vˇetšinunavrhovaných komponent, pro základní použití, jak bylo pˇredstavenov kapitole s ukázkami, které mohou být dostateˇcnˇevypovídající o možném použití. Obecnˇevšak obrázky nejsou dostateˇcnˇevypovídající. Budoucí možný postup již byl zmínˇena další funkce mohou pˇribývat.Je však samozˇrejmostí,že aplikace není ve finálním stavu a mohou se vyskytnout chyby. Doufám, že tato situace však nenastane. Aplikace v souˇcasnémstavu neˇrešívalidaci vstupního souboru, která však nemusí zna- menat omezení, je nutná pouze dostateˇcnápozornost pˇrivytváˇreníkonkrétních infor- maˇcníchpanel ˚u. V rámci návrhu jsem také prozkoumal potencionální konkurenci. Nalezeno bylo nˇe- kolik firem nabízejících podobnˇezamˇeˇrenýprodukt. Vˇetšinafirem však nabízí negrafické informaˇcnípanely vhodné spíše na nádraží s odjezdy vlak ˚uatd. Firma s vlastním ˇreše- ním podobné aplikace, nabízející také i vlastní zaˇrízení,ve kterých je software spuštˇený, je možnou konkurencí. O použitých technologiích se však nezmiˇnujía není jasné, jakých kvalit dosahují. Firma však nabízí tyto produkty i s vytvoˇreníma následnou správou. Tento zp ˚usobje možný, ale cílem této práce byla aplikace umožˇnujícínávrh a vlastní konfigurovatelnost. 39
8 Reference
[1] Microsoft, Readme.md winjs/winjs [Online] 26.2.2015 [cit. 2015-02-28], Dostupné z: https://github.com/winjs/winjs
[2] Microsoft, Try. WinJS. [Online] 26.2.2015 [cit. 2015-02-28], Dostupné z: http:// try.buildwinjs.com/
[3] The Register, Microsoft: It was never ’Metro,’ it was always ’Modern UI’ [online]. [cit. 2015-02-28], Dostupné z: http://www.theregister.co.uk/2012/08/10/ metro_is_modern_ui_now
[4] Windows návody , Co je složka AppData? [online]. [cit. 2015-02-28], Do- stupné z: http://windows.microsoft.com/cs-cz/windows-8/ what-appdata-folder
[5] Zdrojak.cz, K ˇcemuje dobrý TypeScript [online]. [cit. 2015-02-28], Dostupné z: http: //www.zdrojak.cz/clanky/k-cemu-je-dobry-typescript/
[6] Tolerik Developer Network, WinJS 3.0 Shows Industry Shift Towards JavaScript [online]. [cit. 2015-02-28], Dostupné z: http://developer.telerik.com/ featured/winjs-3-0-shows-industry-shift-towards-javascript/
[7] Less , Getting started [online]. [cit. 2015-02-28], Dostupné z: http://lesscss.org
[8] Less, Použití na klientské stranˇe [online]. [cit. 2015-02-28], Dostupné z: http://www. lesscss.cz
[9] Designmodo , Modern UI Style Design by Microsoft [online]. [cit. 2015-02-28], Do- stupné z: http://designmodo.com/modern-ui/
[10] wikipedia.cz , API [online]. [cit. 2015-02-28], Dostupné z: http://en.wikipedia. org/wiki/API
[11] wikipedia.cz, Debugger [online]. [cit. 2015-02-28], Dostupné z: http://cs. wikipedia.org/wiki/Debugger
[12] wikipedia.cz, Microsoft Visual Studio [online]. [cit. 2015-02-28], Dostupné z: http: //cs.wikipedia.org/wiki/Microsoft_Visual_Studio
[13] wikipedia.en, Microsoft Visual Studio [online]. [cit. 2015-02-28], Dostupné z: http: //en.wikipedia.org/wiki/Microsoft_Visual_Studio
[14] Developer network, Zaˇcínámes nástrojem Blend for Visual Studio 2013 [online]. [cit. 2015-02-28], Dostupné z: https://msdn.microsoft.com/cs-cz/library/ jj171012.aspx
[15] wikipedia.com , Open weather map [online]. [cit. 2015-02-28], Dostupné z: http:// en.wikipedia.org/wiki/Openweathermap 40
[16] wikipedia.cz , jQuery [online]. [cit. 2015-02-28], Dostupné z: http://cs. wikipedia.org/wiki/JQuery
[17] wikipedia.com , jQuery [online]. [cit. 2015-02-28], Dostupné z: http://en. wikipedia.org/wiki/JQuery
[18] The Verge , Microsoft to support Raspberry Pi 2 with a free version of Windows 10 [online]. [cit. 2015-02-28], Dostupné z: http://www.theverge.com/2015/2/2/ 7962179/raspberry-pi-windows-10
[19] Blog Windows , A Preview of WinJS 4.0 [online]. [cit. 2015-02-28], Do- stupné z: https://blogs.windows.com/buildingapps/2015/03/27/ a-preview-of-winjs-4-0/ 41
A Dokumentace
A.0.1 Vytváreníˇ konfiguracníhoˇ souboru
Konfiguraˇcnísoubor je obsažený v archívu, který obsahuje také obrázky a další multi- média. Archív musí tedy nutnˇeobsahovat soubor panel.xml. Tento soubor je nositelem veškeré funkˇcnosti,je rozdˇelendo nˇekolikafunkˇcníchcelk ˚u.Jeho základní struktura je vyobrazena v následující ˇcásti.Využívá XML formátu a je nutné dodržet pˇresnýtvar.
Rozložení a vzhled celého informaˇcníhopanelu je zapisován kombinací HTML a CSS. Vlastní stylopis se vkládá do ˇcásti style v ˇcásti settings. K zápisu je možno využít jazyka LESS, který si aplikace sama pˇreloží. Informaˇcnípanel m ˚užeobsahovat více stránek, které pˇredstavujísamostatné obra- zovky. Umístˇenístránek je v tagu pages, pro každou stránku je nutný element page se svým ˇcíslem(parametr number). Císloˇ je zde pro identifikaci a také pro pozdˇejšízmˇenu stránky. Samotná stránka se skládá ze samotného vzhledu (element layout) zapsaný s použitím HTML a komponent a ˇcástíobsahující akce (behaviour). Komponenty jsou ele- menty se speciální funkˇcnostía jsou ovládány akcemi a budou popsány v samostatné kapitole, ale již z tohoto zápisu je zˇrejméže každá stránka je definována svým vzhledem a chováním. Poslední ˇcástíje scenario, který obsahuje také akce. Akce v této ˇcástivšak neovlivˇnují samostatné komponenty, ale celou stránku. Typickou akcí je již ˇreˇcenazmˇenastránky, která je realizována tagem change-page s parametrem to a hodnotou, která pˇredstavuje cílový identifikátor stránky. Aby zmˇenanenastala pˇrímohned, je možno využít speciální akce realizující ˇcekánípomocí tagu wait. Urˇceníˇcasuˇcekáníje realizováno použitím para- metr ˚ua je možné jej realizovat v ˇrádechmilisekund, sekund, minut a hodin. Následující 42 pˇríkladbere pˇredpoklad,že existují dvˇestránky a vyobrazuje zápis ˇcekání30 sekund, zmˇenyna stránku ˇcíslo2, další ˇcekánítrvající minutu a p ˚ula zmˇenuna první stránku.
• is-morning - pravda, pokud je ˇcasv rozmezí 4:00-8:00 • is-forenoon - pravda, pokud je ˇcasv rozmezí 8:00-12:00 • is-afternoon - pravda, pokud je ˇcasv rozmezí 12:00-16:00 • is-early-evening - pravda, pokud je ˇcasv rozmezí 16:00-20:00 • is-evening - pravda, pokud je ˇcasv rozmezí 20:00-0:00 • is-night - pravda, pokud je ˇcasv rozmezí 0:00-4:00 • in-hour-interval - parametrem je pˇredánˇcas,pro který podmínka má být pravdivá • today-is - parametrem je anglické jméno dne, pro který podmínka má být pravdivá • month-is - parametrem je anglické jméno mˇesíce,pro který podmínka má být prav- divá
Použití podmínek se dá rozdˇelitdo dvou zp ˚usob˚ua to zda se mají akce opakovat, dokud z ˚ustávápravdivou, nebo se má provést jen jednou. Akcí while se podmínka vy- hodnocuje pˇrikaždém projití zaˇcátkema je opuštˇenaaž poté co podmínka není pravdivá. Opakem je if, která je vyhodnocena jen jednou. Navíc m ˚užeobsahovat událostí pro situ- aci kdy podmínka je pravdivá, tak také pro situaci, kdy ne. Nemusí obsahovat oba toky, staˇcíakce obalit elementem true nebo false. 43
A.1 Komponenty Nyní bude následovat popis jednotlivých komponent, využitelných v souˇcasnéverzi aplikace. Komponenta zastˇrešujevlastní funkˇcnosta její použití by mˇelobýt jasné z jejího pojmenování. Samotné komponenty jsou ovlivnitelné akcí action, která však nemusí mít stejné jméno. Tento zp ˚usobje zavedený pro pˇrehlednost.Akce musí obsahovat parametr target, který odkazuje na ovlivˇnovanoukomponentu. Nˇekterékomponenty však obsahují speciální akce. 44
A.1.1 TextBox Tag: panel-text Parametry: value/text - textový obsah Použití: zobrazení textu Akce: s parametrem value/text - nová hodnota
A.1.2 RollerTextBox Tag: panel-roller-text Parametry: value/text - textový obsah, type - orientace bˇehu(from-left-to-right/default) Použití: zobrazení bˇežícíhotextu Akce: možno využít parametry value/text nebo type
A.1.3 DateTimeTextBox Tag: panel-date-time-box Parametry: format - format zobrazeného ˇcasu(možnost využití bˇežnýchnotací) Použití: zobrazení ˇcasua data, s možností vlastního formátování Akce: možno využít parametry format
A.1.4 ImageBox Tag: panel-image Parametry: value/image - jméno obrázku Použití: zobrazení obrázku Akce: možno využít parametry value/image
A.1.5 ImageGaleryBox Tag: panel-image-galery Použití: zobrazení galerie obrázk ˚u,obrázky se vkládají jako cesta do samostatného ele- mentu uvnitˇr Akce: možno využít parametry add/remove pro manipulaci s obrázky
A.1.6 AudioElement Tag: panel-audio Parametry: file - audio soubor, volume - nastavení hlasitosti Použití: komponenta pro pˇrehrávánízvuku 45
Akce: nutno využít tagu audio-action, s parametry file, volume, toTime pro pˇresunna daný ˇcasa action pro zastavení (pause), spuštˇeníznovu (playAgain) a spuštˇení(start)
A.1.7 VideoElement Tag: panel-video Parametry: file - video soubor, volume - nastavení hlasitosti Použití: komponenta pro zobrazení videa Akce: nutno využít tagu video-action, s parametry value/text, volume, toTime pro pˇresun na daný ˇcasa action pro zastavení (pause), spuštˇeníznovu (playAgain) a spuštˇení(start)
A.1.8 RssComponent Tag: panel-rss Parametry: source - url adresa, number-of-posts - poˇcetzobrazených ˇclánk˚u, display-images zobrazení obrázk ˚u(true/false), display-title zobrazení titulk ˚u(true/false), display-date zob- razení data vydání, display-text zobrazení textu Použití: komponenta získávající obsah z RSS zdroje, znovuzískaní dat je nastaveno na 5 minut Akce: možno využít veškerých parametr ˚upro zmˇenunebo refresh pro vynucení aktuali- zace
A.1.9 CurrentWeatherWidget Tag: panel-weather-current Parametry: language - jazyk, town - mˇesto(napˇr:Prague,cz), coord - souˇradnice(oddˇelené stˇredníkem) Použití: komponenta pro aktuálního poˇcasí Akce: stejné jako parametry
A.1.10 WeatherForecastWidget Tag: panel-weather-forecast Parametry: language - jazyk, town - mˇesto(napˇr:Prague,cz), coord - souˇradnice(oddˇelené stˇredníkem),days - poˇcetdní (1-16) Použití: komponenta pro zobrazení pˇredpovˇedipoˇcasí Akce: stejné jako parametry 46
B CD-ROM
K bakaláˇrsképráci je pˇriloženCD-ROM obsahující aplikaci, veškeré zdrojové kódy a ukázkové informaˇcnípanely.