VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra technických studií. TV navigační systém Vysoké školy polytechnické Jihlava.

Transkript

1 VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra technických studií TV navigační systém Vysoké školy polytechnické Jihlava bakalářská práce Autor práce: Vedoucí práce: Jáchym Hruška Mgr. Hana Vojáčková, Ph.D. Jihlava 2019

2

3 Abstrakt S pokrokem technologie lze nalézt nové způsoby, které mohou lidem usnadnit orientaci v cizím prostředí. Ve Vysoké škole polytechnické Jihlava mají k tomuto účelu sloužit televize umístěné na chodbách. Tato bakalářská práce se v první části zabývá analýzou současného systému pro správu obsahu na těchto televizích. Hledá způsob, jak do systému implementovat detailní navigaci určenou zejména pro nové studenty školy, ale i pro pracovníky na akademické půdě. Druhá část práce popisuje zvolený způsob implementace, vytvoření šablony pro nový navigační snímek a jeho přidání do již existující prezentace promítané na televizích. Klíčová slova Navigace; TV; CMS; webová aplikace; rozvrh; PHP; Symfony Abstract With the advance of technology, new ways can be found that can help people navigate in a foreign environment. In the halls of the College of Polytechnics Jihlava building there are several televisions to serve this purpose. First part of this bachelor thesis deals with an analysis of the current system for managing the content of these televisions. It is looking for a way to implement a detailed navigation intended particularly for new students of the College, but also for the academic staff. The second part of this thesis describes the chosen form of implementation, creation of a new navigational slide and its adding to an existing presentation run on the televisions. Key words Navigation; TV; CMS; web application; timetable; PHP; Symfony

4 Prohlašuji, že předložená bakalářská práce je původní a zpracoval jsem ji samostatně. Prohlašuji, že citace použitých pramenů je úplná, že jsem v práci neporušil autorská práva (ve smyslu zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů, v platném znění, dále též AZ ). Souhlasím s umístěním bakalářské práce v knihovně VŠPJ a s jejím užitím k výuce nebo k vlastní vnitřní potřebě VŠPJ. Byl jsem seznámen s tím, že na mou bakalářskou práci se plně vztahuje AZ, zejména 60 (školní dílo). Beru na vědomí, že VŠPJ má právo na uzavření licenční smlouvy o užití mé bakalářské práce a prohlašuji, že s o u h l a s í m s případným užitím mé bakalářské práce (prodej, zapůjčení apod.). Jsem si vědom toho, že užít své bakalářské práce či poskytnout licenci k jejímu využití mohu jen se souhlasem VŠPJ, která má právo ode mne požadovat přiměřený příspěvek na úhradu nákladů, vynaložených vysokou školou na vytvoření díla (až do jejich skutečné výše), z výdělku dosaženého v souvislosti s užitím díla či poskytnutím licence. V Jihlavě dne 15. dubna Podpis studenta

5 Poděkování Tímto bych rád poděkoval celému programátorskému týmu na oddělení koncepce a rozvoje informačního systému Vysoké školy polytechnické Jihlava za poskytnutí cenných rad, zejména Marku Urbanovi a Bc. Jiřímu Nápravníkovi. Dále bych rád poděkoval Mgr. Haně Vojáčkové, Ph. D. za vedení bakalářské práce.

6

7 Obsah Úvod Motivace Cíl práce Současný stav problematiky Navigace obecně Mapa Zjištění polohy na mapě Navigace uvnitř budov Značky QR kód Senzory v mobilním zařízení Bluetooth vysílače Wi-Fi Nejvhodnější způsob navigace pro televizní systém Současný stav CMS Dispozice budovy školy pro navigaci Barevná křídla Značení učeben Televize Data pro navigační systém Pozice učeben Učebny Předměty Probíhající výuka Zkouškové období Učitelé Dashboard nabídka menzy Dashboard aktuální informace o počasí Programátorská úskalí Responzivita aplikace Systém značení učeben Navigace ve smyčce Zobrazování vyučovací hodiny na televizi Interval obnovení navigační stránky Použité technologie... 25

8 2.1 HTML CSS Databáze a SQL PHP JavaScript Node.js Socket.IO Doctrine Twig Symfony MVC architektura Implementace aplikace Nová síť učeben Pozice televize Navigace vzhled snímku Navigace učebny pro mód ostatní Navigace učebny pro mód základní a zkouškové období Navigační algoritmus Časovač začátku/konce vyučovací hodiny Dashboard nabídka menzy Dashboard přehled počasí Dashboard počasí z webkamer Zakomponování do současného systému Testování Diskuze Závěr Seznam použité literatury Seznam příloh... 50

9 Seznam obrázků Obrázek 1: Barevná křídla budovy (IS VŠPJ orientační plán budovy) Obrázek 2: Jednoduchý navigační systém na VŠPJ (vlastní) Obrázek 3: Struktura tabulky učeben (vlastní) Obrázek 4: Struktura tabulek předmětů (vlastní) Obrázek 5: Struktura tabulek schématu timetable první část (vlastní) Obrázek 6: Struktura tabulek schématu timetable druhá část (vlastní) Obrázek 7: Nové značení čísla křídel (vlastní) Obrázek 8: Princip funkce architektury MVC (itnetwork.cz, 2019) Obrázek 9: SQL skript pro vytvoření nové tabulky tv_ucebny (vlastní) Obrázek 10: Základní rozvržení navigačního snímku (vlastní) Obrázek 11: JavaScriptové funkce pro zobrazení aktuálního času (vlastní) Obrázek 12: SQL kód pro získání učeben na určitém patře v módu ostatní (vlastní) Obrázek 13: SQL kód pro získání učeben ve vyšším patře v módu ostatní (vlastní) Obrázek 14: SQL kód pro získání učeben v nižším patře v módu ostatní (vlastní) Obrázek 15: SQL kód pro získání aktuálního výukového týdne (vlastní) Obrázek 16: SQL kód pro získání aktuální vyučovací hodiny (vlastní) Obrázek 17: Metoda PHP třídy pro rozhodnutí mezi módem základní (výukové a zkouškové období) a módem ostatní (vlastní) Obrázek 18: SQL skript pro výukové období (vlastní) Obrázek 19: SQL skript pro zkouškové období (vlastní) Obrázek 20: PHP kód pro navigaci bez smyčky (vlastní) Obrázek 21: Uložení učeben napravo od televize ve stejném křídle jako televize (vlastní) Obrázek 22: Určení povolených křídel (vlastní) Obrázek 23: Uložení zbylých učeben napravo od televize (vlastní) Obrázek 24: JavaScriptová funkce pro aktuální čas a časovač (vlastní) Obrázek 25: Administrační panel v CMS pro restart zařízení (vlastní) Obrázek 26: Navigační snímek v módu základní výukové období (vlastní) Obrázek 27: Navigační snímek včetně nabídky menzy (vlastní) Obrázek 28: Navigační snímek včetně přehledu počasí (vlastní) Obrázek 29: Navigační snímek včetně pohledu z webkamery mířící na sever (vlastní) 43 Obrázek 30: Menu pro vytvoření nového navigačního snímku (vlastní) Obrázek 31: Výběr módu navigačního snímku (vlastní) Obrázek 32: Menu pro změnu délky zobrazovaného snímku (vlastní) Obrázek 33: Číslování křídel budovy (vlastní) Seznam tabulek Tabulka 1: Nové značení pater... 23

10 Seznam použitých zkratek TV CMS SQL ORM MVC URL Full HD GPS Wi-Fi televize Content Management System (systém pro správu obsahu) Structured Query Language (strukturovaný dotazovací jazyk) Object Relational Mapping (objektově relační mapování) Model View Controller (model pohled kontroler = návrhový model) Uniform Resource Locator (webová adresa, např. ) Full High Definition (plné vysoké rozlišení, 1920 * 1080 obrazových bodů) Global Positioning System (globální polohovací systém) Wireless Fidelity (technologie pro bezdrátové připojení k internetu) Bluetooth technologie pro bezdrátové propojení dvou zařízení na krátkou vzdálenost IP SVG Internet Protocol Scalable Vector Graphics (škálovatelná vektorová grafika)

11 Úvod V rámci areálu Vysoké školy polytechnické Jihlava (dále jen VŠPJ ) je umístěno několik televizí, které mají sloužit jako orientační systém. Momentálně se jedná o podpůrný systém, který má pouze pomocnou funkci. V případě výpadku elektrického proudu nebo nesprávné funkčnosti systému stále funguje fyzická navigace pomocí směrových šipek a rozcestníků rozmístěných po budově školy. Původní systém vytvořil Jakub Podhorský jako systém prezentací. Tento systém byl poté rozšířen Miroslavem Kružíkem o možnost přidat snímky z existující prezentace vytvořenou v programu Microsoft PowerPoint. Zařízení se snaží studenty a ostatní návštěvníky školy směrovat prostřednictvím promítání této snímkové prezentace, která obsahuje obrázky řezů pater budovy. Tato prezentace je stejná na všech zařízeních. Televize navíc většinu času nezobrazují navigační snímky, ale zobrazují snímky obsahující aktuality z webových stránek VŠPJ a několik nejbližších událostí. Ne všichni studenti se zajímají o společenské a jiné akce školy. Pokud by však studenti mohli prostřednictvím tohoto systému dostávat informace o tom, kudy se dostanou k učebně, kde mají zrovna hodinu, určitě by byla zobrazovaná data relevantní nejen pro každého z nich, ale i pro akademické pracovníky školy. Pokud si takto získáme pozornost větší skupiny studentů a pracovníků, mohli bychom znatelně odbourat jejich neinformovanost. V nové navigační části systému (konkrétně mezi směrovacími šipkami) mohou být vypsány jak důležité informace, které mnohým studentům často unikají, tak dodatečné informace, jako je nabídka školní menzy nebo aktuální informace o počasí ze školní meteostanice. Navíc k pouhému názvu učebny se bude v základním módu zobrazovat detail učebny, tzn. vyučovaný předmět, učitel, druh hodiny (přednáška/cvičení), začátek a konec hodiny. Kromě detailní navigace bude mít nový systém další 2 módy: zkouškové období a mód ostatní. Ve zkouškovém období bude systém navigovat do učeben, kde probíhají aktuálně vypsané zkoušky. Mód ostatní je základní mód s omezenou funkcionalitou zobrazovat se budou pouze názvy učeben bez dalších informací. Cílem práce je tedy zakomponovat novou navigaci a informační panel nacházející se uprostřed mezi navigačními šipkami (dále jen dashboard ) do stávajícího televizního systému se zachováním aktuální funkcionality. Každá televize na chodbě VŠPJ je 11

12 připojena k samostatnému počítači. Počítač je připojen do školní sítě a obsah, co se na televizi zobrazí, je webová stránka, na kterou je na počítači přistoupeno. Aktuální televizní systém funguje tak, že pro zobrazování na televizích lze vytvořit prezentaci, která se skládá z libovolného počtu snímků. Aby byla zachována původní funkcionalita, bude se systém navigace vytvářet jako samostatný snímek, který pak bude možné přidat do stávajících prezentací. Motivace Na chodbách VŠPJ jsou televize, které momentálně poskytují omezené informace, mnohdy irelevantní pro některé studenty. Každá televize momentálně zobrazuje stejnou prezentaci, ve které se nachází jednoduché navigační snímky (řezy pater budovy VŠPJ), jenž se při promítání střídají. Navigace tudíž ztrácí význam snímky nemohou být modifikované podle aktuálního patra a pozice jednotlivé televize, divák tedy ani neví, kde se právě nachází. Proto by bylo vhodné funkcionalitu tohoto televizního systému rozšířit, např. o detailní navigaci po budově školy, jejíž data budou relevantní pro všechny studenty nejpočetnější skupinu lidí na škole. Cíl práce Tato práce má tři dílčí cíle: seznámení se s aktuálním CMS na televizích, seznámení se se systémem rezervací učeben a systémem rozvrhu; zapracování nové funkcionality (navigace) do současného systému; zdokumentovat nový systém, aby se vědělo, jak s ním pracovat. Nejdůležitějším cílem práce je výrazné zlepšení funkce navigačního systému a snížení dezorientace studentů prvního semestru a studentů kombinovaného studia. 12

13 1 Současný stav problematiky V této kapitole bude nejprve představen současný stav problematiky obecné navigace uživatele a pak navigace uvnitř budov. Poté bude vysvětleno, v jakém stavu se momentálně nachází současný televizní systém, samotná budova školy a kde se dají najít data využitelná v novém navigačním systému. 1.1 Navigace obecně Každý navigační systém má dva cíle určit aktuální polohu navigovaného subjektu a naplánovat nejkratší a nejlepší cestu k místu podle jeho volby Mapa Ve většině současných navigačních systémů se dnes používá jakýsi zmenšený obraz skutečného prostředí mapa. Mapa člověku ukazuje, jak zjednodušeně vypadá jeho okolí. Aby se dalo v mapě co nejlépe orientovat, musí být co nejpřehlednější a musí zobrazovat pouze důležité informace. Každá mapa je vlastně síť významných bodů, které se v oblasti či budově nacházejí a pomocí kterých uživatele mapa naviguje Zjištění polohy na mapě Polohu uživatele lze zjistit tak, že jeho okolí je porovnáno s vytvořenou mapou. Kolem uživatele je vybráno několik významných bodů znázorněných i na mapě, a tak je určena jeho poloha. Další možností je využití vysílačů radiových vln. Se znalostí pozice vysílačů a znalostí fyzického chování radiových vln lze zjistit, jak daleko se od vysílačů uživatel nachází a následně lze určit jeho přesnou polohu. Nejmodernější systém pro získání polohy uživatele využívá družice kolem planety Země. Způsob výpočtu polohy je velice podobný variantě s radiovými vlnami, avšak vysílače tohoto systému mají lepší pokrytí a přesnost. Mezi zástupce těchto systémů patří GPS, GLONASS, Galileo a BeiDou. 13

14 1.2 Navigace uvnitř budov Pro navigování uvnitř budov lze dnes využít jeden z mnoha postupů, mezi které patří zejména navigace pomocí značek nebo pomocí síly Wi-Fi signálu Značky Jedním z nejjednodušších ale také nejstarších způsobů navigování uvnitř budovy je využití fyzických značek nalepených na zdech nebo jinak umístěných uvnitř budovy. Jedna značka uživatele navede buď k další značce, nebo přímo k místu, které hledá. Značku tedy většinou představuje jednoduchá šipka, která ukazuje směr k hledanému místu, navíc může někdy obsahovat dodatečné informace, např. zbývající vzdálenost. V budově mohou mít značky např. různé barvy podle pater, kde se hledaná místnost nachází QR kód QR kód je černobílý obrazec, který může obsahovat spoustu informací. Můžeme jej vytisknout na papír a ten vylepit na zdi uvnitř budovy. Na každém místě, kde by byl vylepen, by ukrýval informace o aktuální poloze. Nevýhodou je však to, že bez specializovaného zařízení QR kód nepřečteme. (Lyne, 2009) Senzory v mobilním zařízení Dnešní mobilní zařízení jsou vybaveny senzory, které umí určit, jak se zařízení pohybuje. Pomocí těchto senzorů můžeme určit, kterým směrem se uživatel pohybuje, jakou rychlostí se pohybuje a jestli např. jde do schodů nebo po rovině. Nevýhodou tohoto systému je, že bez mobilního zařízení se zmíněnými senzory nelze uživatele navigovat. (Nield, 2017) Bluetooth vysílače Jedná se o navigaci s využitím spousty vysílačů využívajících ke komunikaci s mobilním zařízením bezdrátovou technologii Bluetooth. Každý vysílač má přesně danou svou pozici a při kontaktu s mobilním zařízením lze zjistit podle síly vysílaného signálu polohu uživatele. Nevýhodou tohoto systému je, že bez zařízení s Bluetooth konektivitou jej nelze použít. (MobStac, 2019) 14

15 1.2.5 Wi-Fi Tato technologie je podobná předchozí jen místo Bluetooth prvků používáme tzv. Wi-Fi Access Pointy zařízení, které pro propojení s jiným zařízením používají bezdrátovou technologii Wi-Fi. Nevýhodou je opět nemožnost využití systému bez mobilního zařízení s podporou připojení pomocí Wi-Fi. (infsoft GmbH, 2018) 1.3 Nejvhodnější způsob navigace pro televizní systém Tato práce má k navigaci využít televizí umístěných na chodbách budovy školy. Tyto televize nepodporují bezdrátové připojení pomocí technologie Bluetooth ani Wi-Fi. Nelze je použít ani pro čtení QR kódů, které by se vylepily na zeď. Polohu televize lze určit ale úplně jiným způsobem. Lze vytvořit speciální síť učeben, která o každé učebně obsahuje informaci, v jakém patře budovy školy se učebna nachází a jak jsou učebny v patře uspořádány. Při konfiguraci každé televize lze pak nastavit, jaká učebna je od televize nejblíže vlevo a jaká je neblíže vpravo. Z okolních učeben je pak možné určit přesnou polohu televize v patře a lze určit, do kterých učeben se lze dostat směrem doleva, doprava, nahoru (o patro výše) a dolů (o patro níže) od televize. 1.4 Současný stav CMS V současném systému lze vytvořit prezentaci složenou z několika snímků. Lze si vybrat z několika druhů snímků (video, fotogalerie, textový snímek s grafikou nebo bez, externí webový obsah, logo VŠPJ). Dále existuje možnost vytvořit kompletní prezentaci ze souboru ve formátu Microsoft PowerPoint (přípona souboru ppt nebo pptx ). Poté lze vybrat, jaká prezentace se bude promítat na jakém zařízení. Všechny televize jsou v CMS momentálně registrovány jako jedno zařízení, protože požadavkem při vytváření tohoto systému byla možnost vytvářet jednotnou prezentaci pro všechna zařízení. Nicméně právě proto nemohou být snímky prezentace upraveny tak, aby navigovaly podle specifického umístění dané televize. Pro zakomponování nové navigace do současného systému bude nejvhodnější vložit navigaci jako snímek s externím webovým obsahem nová navigace může být totiž pouze na jiné webové adrese v rámci současné aplikace. Pro potřeby různého směrování 15

16 podle každé televize bude nutné každé zařízení brát v CMS jako samostatnou jednotku, např. podle IP adresy. 1.5 Dispozice budovy školy pro navigaci Pro navigaci po škole lze využít několika jejích aspektů: rozdělení budovy do několika křídel a jejich barevné označení, značení učeben a data rozvrhu hodin v informačním systému VŠPJ Barevná křídla Půdorys školy je tvořen útvarem typu pětiúhelník, který má tedy 5 stran. Na obrázku 2 je vidět, že těchto 5 stran budovy je rozděleno na 5 barevných křídel (zelené, žluté, modré, šedé a červené). Tento fakt lze využít při navigování studentů. K učebnám v červeném křídle je však nutné přistupovat jinak průchod do tohoto křídla se totiž nachází pouze v nejnižším patře budovy, dokonce i v tomto patře musí člověk sejít pár schodů dolů, aby se do tohoto křídla dostal. Když se chce návštěvník školy dostat do tohoto křídla, je tedy nutné ho vždy posílat směrem dolů (do nejnižšího patra budovy). V zeleném křídle momentálně probíhá rekonstrukce a je dočasně nepřístupné, návštěvníky školy přes něj tedy zatím navigovat nelze. Obrázek 1: Barevná křídla budovy (IS VŠPJ orientační plán budovy) 16

17 1.5.2 Značení učeben Každá učebna má dvojí značení, např. U1 (1N047). První označení je pro lepší čitelnost a zapamatovatelnost a je tvořeno buď několika písmeny a čísly, nebo jen písmeny, např. ZSP, U14, P3. Druhé značení určuje patro učebny a číslo místnosti. Pro navigační systém však bude nutné vytvořit si vlastní systém značení, protože v tom současném nejsou prvky, které by mohly být využity k detailní a správné navigaci Televize V aktuálním stavu se ve škole nacházejí tři televize zobrazující informace nastavené v CMS. Všechny jsou v modrém křídle budovy od prvního nadzemního podlaží výše, v každém podlaží jedna. Zaujímají strategické umístění u hlavního schodiště, kudy prochází většina návštěvníků školy. Televize zobrazující prezentaci jsou spouštěny vždy v 6 hodin ráno a vypínány ve 20 hodin večer. Navigační algoritmus budu tedy primárně vyvíjet tak, aby fungoval bezproblémově pro tyto tři televize. 1.6 Data pro navigační systém Potřebná data pro navigaci lze získat z několika databázových serverů, které VŠPJ provozuje. Kompletní informace lze získat z několika tabulek hlavní školní databáze typu PostgreSQL. Informace o aktuálním počasí lze získat ze serveru katedry technických studií, kam je školní meteostanice ukládá. Aktuální nabídku menzy lze získat z dalšího školního serveru. Systém pro menzu si škola koupila a nemůže upravovat jeho kód, pouze si v tomto odděleném systému spravuje svůj jídelníček a svoje strávníky. Server menzy i katedrální server využívají databáze typu MySQL, tedy jiný typ než hlavní školní databáze. V následujících podkapitolách si lze povšimnout použití různé logiky při vytváření a pojmenovávání databázových tabulek a jejich sloupců. To je způsobeno tím, že školní informační systém je již vyvíjen celou řadu let a na jeho vývoji spolupracovalo již několik programátorů, kdy každý používal jiný způsob pojmenování. Z toho důvodu jsou některé tabulky nebo sloupce tabulek pojmenovány česky, některé anglicky a některé dokonce používají jakousi zkomoleninu obou jazyků. 17

18 1.6.1 Pozice učeben Fyzické umístění učeben lze zjistit z jednoduchého navigačního systému provozovaného VŠPJ na doméně nav.vspj.cz (dále jen NAV ) nebo projitím budovy školy a poznamenáním si všech učeben a jejich pozic. NAV obsahuje plánek budovy pro každé patro ve formátu SVG, ve kterém lze definovat souřadnice různých prvků. Každá učebna aktuálně používaná pro výuku má v obrázku přesně danou pozici. Po kliknutí na název učebny v seznamu se její přesná pozice zvýrazní v plánku červeně. Obrázek 2: Jednoduchý navigační systém na VŠPJ (vlastní) Učebny O každé učebně je ve školní databázi uchováváno několik informací. Pro navigaci je důležitý sloupec id (výše zmíněné druhé označení učebny) a sloupec nazev (první označení učebny). Dále nás zajímá sloupec rozvrh, v němž je uvedeno, zda v učebně může probíhat výuka. 18

19 Obrázek 3: Struktura tabulky učeben (vlastní) Předměty Informace o samotných předmětech lze zjistit z tabulky avexams a avexams_dotace, viz obrázek 4. Navigaci zajímá především sloupec nazev (název předmětu) a zkratka (zkratka předmětu) z tabulky avexams. Obrázek 4: Struktura tabulek předmětů (vlastní) 19

20 1.6.4 Probíhající výuka Kdy začíná jaká vyučovací hodina, lze zjistit z tabulky casy_hodin ve schématu timetable. Jestli v učebně probíhá nějaká výuka, lze poznat z několika dalších tabulek. Je to stejnojmenná tabulka timetable a tabulka timetable_kombi tyto dvě tabulky tvoří srdce samotného rozvrhu hodin. Dále je důležitá tabulka uvazky, kde lze najít pracovní úvazky učitelů na jednotlivé předměty. Jako poslední nás ze schématu timetable zajímá databázový pohled ucitele_uvazky_view, který poskytuje ucelené informace o úvazcích. Obrázek 5: Struktura tabulek schématu timetable první část (vlastní) 20

21 Obrázek 6: Struktura tabulek schématu timetable druhá část (vlastní) Zkouškové období Aktuálně vypsané zkoušky lze najít v tabulce terminy ve schématu public (výchozí schéma školní databáze). Důležitými sloupci pro navigační systém jsou datum (čas zkoušky), idc (zkoušený předmět), zobrazit_zkousejiciho a misto (učebna, kde zkouška probíhá). Sloupec zobrazit_zkousejiciho je důležitý, protože zkoušející učitel si může nastavit, zda chce, aby bylo jeho jméno u zkoušky vidět nebo ne. Navigace jméno učitele také nesmí zobrazit, pokud si to učitel nepřeje Učitelé Jméno, příjmení a další údaje o učiteli lze získat z tabulky profesor ve schématu public. 21

22 1.6.7 Dashboard nabídka menzy Nabídku menzy lze získat z jiného databázového serveru než informace o učebnách. Tento server slouží výhradně k uchování dat souvisejících se školní jídelnou. Jsou zde jak informace o jednotlivých strávnících jídelny, tak předem přichystaný jídelníček na aktuální den a několik následujících. Dashboard navigace bude zobrazovat pouze informace o aktuálním jídelníčku menzy Dashboard aktuální informace o počasí Školní meteostanice ukládá informace opět na jiný oddělený databázový server. Údaje jsou zaznamenávány každých pět minut můžeme je tedy využít pro poměrně přesný přehled aktuálního počasí. Nejdůležitějšími údaji, které v databázové tabulce lze najít a které nejspíše zajímají nejvíce návštěvníků školy, jsou naměřená teplota, pocitová teplota, směr větru, rychlost větru, východ slunce, západ slunce, vlhkost vzduchu a srážky za poslední hodinu. 1.7 Programátorská úskalí Při implementaci aplikace narazím na několik programátorských úskalí, které musím vhodně vyřešit. Otázky, které při programování vyvstanou, budou popsány níže Responzivita aplikace Měla by být aplikace responzivní (mělo by se rozložení vizuálních prvků přizpůsobovat rozlišení obrazovky)? Současná aplikace responzivní není, vše je uděláno tak, aby to přehledně vypadalo pouze ve Full HD rozlišení. Pokud bych chtěl novou část systému mít responzivní, musel bych předělat celý současný systém, což by bylo nad rámec této bakalářské práce Systém značení učeben Aktuální systém značení učeben nevyhovuje navigaci, je tedy nutné vytvořit nový systém značení. Co by měl nový systém obsahovat, aby mohla být navigace co nejpřesnější? Já jsem zvolil následující řešení: Každá učebna obsahuje informace o křídle, patře a pozici v rámci patra. Jednotlivá křídla jsem očísloval podle následujícího obrázku. 22

23 Obrázek 7: Nové značení čísla křídel (vlastní) Číslování křídel tedy začíná šedým křídlem a pokračuje proti směru hodinových ručiček až k zelenému křídlu, které má číslo 4. Poslední červené křídlo má číslo 5. Číslování učeben se řídí podobným algoritmem, tzn. že učebna, která se nachází co nejvýše v křídle č. 1 (šedé křídlo), má také číslo 1 a číslování učeben pak pokračuje opět proti směru hodinových ručiček až ke křídle 4, kde se úplně vlevo nachází učebna s nejvyšší pozicí v patře. Pro číslování samotných pater jsem vycházel z původního značení učeben. Učebny mají tedy číslo místnosti, ve tvaru AABBB, např. 1P059 nebo 1N008, kde AA je označení patra a BBB je číslo místnosti. Celkem se v označení nachází čtyři kombinace označení patra, a to: 1P (1. podzemní podlaží), 1N (1. nadzemní podlaží), 2N (2. nadzemní podlaží) a 3N (3. nadzemní podlaží). Pro převod původního označení patra na nové číslo patra jsem využil následující tabulku. Tabulka 1: Nové značení pater Původní označení patra Nové číslo patra 1P 1 1N 2 2N 3 Zdroj: (vlastní) 3N 4 23

24 1.7.3 Navigace ve smyčce Až bude otevřeno zelené křídlo budovy, ve kterém momentálně probíhají stavební práce, jak by měla fungovat navigace? Patro budovy bude totiž možné projít dokola. K jedné učebně se tedy bude moci návštěvník dostat z jednoho fyzického místa jak směrem doleva, tak směrem doprava. Kterým směrem by se měl tedy navigovaný subjekt vydat? Nejlepší je uvést příklad: Navigovaný subjekt se nachází v modrém křídle (pro lepší představu viz obrázek 7: Nové značení čísla křídel). Abych zjistil, kterým směrem se má subjekt vydat do nejvzdálenějšího zeleného křídla, určím si pozici subjektu v rámci modrého křídla. To udělám tak, že si spočítám, kolik učeben se nachází nalevo a napravo od něj v rámci modrého křídla. Tak zjistím, ke kterému konci modrého křídla se nachází blíž, tedy kudy to má blíž k zelenému křídlu. Pokud se nachází blíž k pravému konci modrého křídla, půjde do zeleného křídla směrem doprava, jinak směrem doleva Zobrazování vyučovací hodiny na televizi Výuka na VŠPJ je koncipovaná tak, že mezi každými dvěma vyučovacími hodinami je minimálně 5 minut přestávka. Navigační systém by tedy měl vždy zobrazovat hodinu minimálně s tímto časovým předstihem, aby měli návštěvníci školy dost času reagovat na případnou změnu vyučovací hodiny Interval obnovení navigační stránky Interval obnovení stránky velice souvisí se zobrazováním vyučovací hodiny. Pokud mám časovou rezervu před zobrazovanou hodinou pouze 5 minut, měl bych zobrazení stránky obnovovat co nejčastěji, abych dal všem návštěvníkům dost času na případnou změnu hodiny. Pokud bych stránku obnovoval jednou za 5 minut a obnovil bych ji např. v 9:39 a vyučovací hodina by začínala v 9:45 (za 6 minut), byla by vidět tato hodina na televizi poprvé až v 9:44, což by bylo pro všechny návštěvníky pravděpodobně již pozdě. Zvolím tedy obnovovací interval 1 minutu tím zajistím, že návštěvníci školy budou mít vždy minimálně zmíněných 5 minut připravit se na další hodinu. 24

25 2 Použité technologie V této sekci popíši významné technologie, které byly použity při vytváření bakalářské práce, jimiž jsou HTML, CSS, SQL, PHP, JavaScript, Doctrine, Twig a Symfony. Data pro navigaci získám několika SQL dotazy z objektově relační databáze PostgreSQL, kam si budu také ukládat další informace potřebné k nové části systému. Budu používat tento typ databáze, protože současný projekt je na něm postaven. Jako vývojové prostředí pro úpravu zdrojového kódu aplikace použiji program PhpStorm. Pro práci s databází kromě SQL dotazů použiji grafické rozhraní programu pgadmin. Programovacími jazyky, které použiji na napsání nového kódu aplikace, jsou zejména PHP, JavaScript a knihovna jquery. Pro zvýšení efektivity práce použiji známý PHP framework Symfony společně s technologií Doctrine (pro mapování PHP tříd na databázové tabulky) a technologií Twig (pro zrychlení vývoje aplikace využitím šablon). Důvodem, proč použiji právě zmíněné technologie, je to, že to jsou nástroje, které se používají při práci na oddělení koncepce a rozvoje informačního systému (dále jen OKRIS ) VŠPJ. Já sám jsem byl s nástroji seznámen v rámci povinné praxe. 2.1 HTML HTML je zkratka pro Hyper Text Markup Language (hypertextový značkovací jazyk). Je to standardní značkovací jazyk používaný pro tvorbu webových stránek. Stránka napsaná v HTML se skládá z elementů stavebních bloků těchto stránek. Každý tento element je vyobrazen pomocí lomených závorek ( < a > ), např. <p>. Některé tyto elementy jsou nepárové, jiné párové, tzn. že mají značku zvlášť pro začátek (např. <p>) a značku zvlášť pro konec, která navíc obsahuje znak lomítka hned za otevírací lomenou závorkou (např. </p>). Každý HTML element může mít atribut. Atributy poskytují o elementu dodatečné informace. Elementy společně s atributy tvoří strukturu webové stránky, tvoří jakýsi předpis, který určuje, jak bude stránka vypadat. (Refsnes Data, 2019a) 2.2 CSS CSS je zkratka pro Cascading Style Sheets (kaskádové styly) s kladením důrazu na Style (styl). Zatímco HTML je určeno k předepsání struktury webu (jako je definování nadpisů a odstavců na stránce a dovoluje do stránky vložit obrázky, videa a další soubory), CSS 25

26 přináší možnost definovat styl celého dokumentu. Rozvržení stránky, barvy, řez písma a mnoho dalšího to všechno řídí CSS. Přináší styl do stránky tím, že vizuálně upravuje HTML elementy. (Morris, 2018) 2.3 Databáze a SQL Používání pojmu databáze je dnes čím dál volnější, čímž může dané označení někdy ztrácet svůj původní význam. Někteří lidé si pod databází představují jakoukoli kolekci dat, např. telefonní seznam, jiní lidé definují pojem mnohem přesněji. Databáze je kolekce záznamů, která neobsahuje pouze záznamy samotné, ale také data popisující strukturu databáze a strukturu každého záznamu. Záznam většinou představuje nějaký fyzický nebo koncepční objekt. Pokud bych si chtěl např. vést seznam zákazníků, budu mít záznam pro každého z nich. Jednotlivý záznam bude obsahovat různé atributy (sloupce) jako třeba jméno, adresu a telefonní číslo. Jména, adresy a telefonní čísla jsou už konkrétní data zákazníků. (Taylor, 2013) Data většiny dnešních informačních systémů jsou dnes ukládána právě do databází. K získání dat z databáze se používá strukturovaný dotazovací jazyk (SQL). Pokud potřebuji získat data z více tabulek najednou, může být zápis SQL dotazu poměrně dlouhý a nepřehledný. Aby byl zápis dotazu co nejjednodušší, používají se s databázovými tabulkami také databázové pohledy (anglicky view). Ty zabalují složitější SQL dotaz do jednoho krátkého. Další výhodou pohledu může být odstranění opakujících se částí SQL dotazu místo této části lze použít pohled se stejným výsledkem a ten si pak zavolat na potřebných místech v SQL dotazu. Dále lze využitím pohledu např. povolit uživateli nahlížet na sloupce tabulky, jejíž obsah normálně vidět nesmí. SQL jazyk existuje v několika variantách v závislosti na typu použité databáze: PostgreSQL, MySQL a další. Tyto technologie jsou zčásti stejné, liší se však zápisem některých příkazů, dosažitelným výkonem při používání nebo třeba použitou licencí. 2.4 PHP PHP (rekurzivní zkratka pro PHP: Hypertext Preprocessor) je široce používaný open source skriptovací jazyk spouštěný na straně serveru, který je zvláště vhodný pro vývoj webových aplikací. PHP se často používá v aplikacích, kde je zdrojem dat databáze. (The PHP Group, 2018) 26

27 2.5 JavaScript JavaScript je programovací jazyk, který se oproti jazyku PHP nespouští na straně serveru, ale na straně klienta. Nevýhoda jazyka je, že uživatel může ve svém prohlížeči spouštění JavaScriptu zakázat pak se nemusí stránky uživateli zobrazovat tak, jak by programátor chtěl. Pro práci s tímto jazykem se většinou používá knihovna jquery, která velice usnadňuje a zkracuje jeho syntaxi. 2.6 Node.js JavaScript je ale možné spouštět také na straně serveru, a to ve speciálním prostředí zvaném Node.js. Toto prostředí používá asynchronní programování, tzn. že tento nástroj eliminuje čekání programu a jednoduše vyřizuje jeden serverový požadavek za druhým. Pokud např. přijde na server od klienta požadavek na soubor, Node.js pošle požadavek souborovému systému serveru a na rozdíl od PHP nečeká, než souborový systém soubor přečte a pošle klientu zpět, ale mezitím je připraveno na další požadavek. Jakmile souborový systém dokončí čtení souboru, server pošle obsah souboru zpět klientovi. (Refsnes Data, 2019b) 2.7 Socket.IO Socket.IO je knihovna pro Node.js. Zprostředkovává událostmi řízenou obousměrnou komunikaci mezi serverem a klientem nebo více klienty v reálném čase. Jedná se o nástroj, který zastřešuje několik technologií, např. WebSockets. Nad všemi sdruženými technologiemi vytváří jednotné API. To vývojářům umožňuje přijímat a odesílat data, aniž by se museli starat o kompatibilitu různých webových prohlížečů. Výhod používání Socket.IO je několik, např.: spolehlivost (klient a server je propojen navzdory používání specializovaných bezpečnostních opatření firewall, proxy server), automatická obnova připojení server klient. (Kelleher, 2014) 2.8 Doctrine Doctrine je technologie, která slouží k mapování objektů programovacího jazyka na databázové tabulky (ORM). Výhodou používání Doctrine pro programátora je to, že se nemusí tolik starat o ukládání dat do databáze, ale může se více věnovat vytváření objektově orientované logiky aplikace. (The Doctrine Community) 27

28 2.9 Twig Twig je moderní šablonovací systém pro PHP. Twig pomáhá ve zkrácení syntaxe, která by byla pomocí PHP dlouhá a možná nepřehledná a přidává do staršího jazyka PHP nové funkce. Pomocí Twigu také programátor zachovává oddělenou aplikační a prezentační vrstvu aplikace. (Symfony SAS, 2019a) 2.10 Symfony Symfony je framework pro PHP. Využívá návrhový model MVC, který zpřehledňuje kód a odděluje datový model aplikace, řídící logiku a uživatelské rozhraní do tří nezávislých komponent. Úprava jedné komponenty má pak minimální vliv na funkci komponent dalších. (Symfony SAS, 2019b) Televizní CMS je tvořen v Symfony ve verzi 2.8, nejnovější stabilní verze je však Aktuální projekt aplikace pro správu obsahu by bylo vhodné aktualizovat na vyšší verzi, protože pro verzi 2.8 již v listopadu 2018 skončila podpora při odstraňování chyb (do listopadu 2019 však budou vydávány ještě bezpečnostní opravy). Novější verze odstraňuje chyby frameworku, přináší zrychlení běhu frameworku nebo nové funkce. (Symfony SAS, 2019c) MVC architektura Základní myšlenkou MVC architektury je oddělení logiky od výstupu. Aplikace tvořená pomocí této architektury je rozdělena na tři komponenty: Model, View (Pohled) a Controller (Kontroler). Model se stará o logiku aplikace, např. získává a ukládá data do databáze nebo provádí matematické výpočty. Pohled se stará pouze o zobrazení dat uživateli, vůbec neví, jak a kde se zobrazovaná data vzala. Kontroler je pak prostředník mezi uživatelem, modelem a pohledem. Podle URL, kterou uživatel zadá do prohlížeče, se určí, který konkrétní kontroler uživatele obslouží. Kontroler se dotáže modelu na data (pokud jsou nějaká potřeba) a získaná data předá pohledu, který je uživateli zobrazí v čitelné podobě. Celý proces je vidět na následujícím obrázku. (itnetwork.cz, 2019) 28

29 Obrázek 8: Princip funkce architektury MVC (itnetwork.cz, 2019) V Symfony projektu je MVC architektura tvořena několika PHP třídami a šablonami napsanými ve Twigu. PHP třídy mapované pomocí ORM na databázové tabulky jsou označovány jako entity. Pro model nám v Symfony slouží PHP třídy označované jako manažer a repozitář. Třída manažer slouží pro manipulaci s daty uložení do databáze, kalkulace výpočtu. Repozitář zase obsahuje metody, které pouze vrací hodnoty z databáze. Repozitář je zároveň vázan na entitu a vrací záznamy převážně z dané entity (databázové tabulky). Kontroler je v Symfony tvořen PHP třídou obsahující metody, které jsou adresovány pomocí URL a které vrací výstup v podobě HTML stránky. Metody kontroleru jsou označovány jako akce. Jako pohled je označována samotná HTML stránka napsaná pomocí Twigu (výsledný soubor má příponu html.twig, např. example.html.twig ). 29

30 3 Implementace aplikace V následujících kapitolách popisuji, jak byla aplikace postupně vyvíjena. V jednotlivých fázích jde vidět, které kroky bylo potřeba učinit k vytvoření plně funkční navigace a jak bylo nutné upravit stávající aplikaci, aby pojmula novou funkcionalitu. V aplikaci se mi dokonce povedlo zahrnout pár funkcí nad rámec zadání této práce, a to zobrazení pohledu ze školních webkamer sledujících aktuální stav počasí na čtyřech světových stranách okolo školy. 3.1 Nová síť učeben V Symfony projektu jsem začal vytvořením PHP třídy TvUcebna společně s repozitářem TvUcebnaRepository. V repozitáři jsem si napsal metodu, která mi vrátí instanci třídy TvUcebna podle zadaného názvu učebny. Příkazem php doctrine:schema:update jsem nechal technologii Doctrine automaticky vygenerovat SQL skript pro vytvoření odpovídající databázové tabulky. Tato tabulka slouží k uchování nových navigačních dat ke každé ze stávajících učeben. Obsahuje následující sloupce: id staré označení učebny kvůli napojení na rozvrh hodin kridlo barevné křídlo školy, ve kterém se učebna nachází patro patro budovy, ve kterém se učebna nachází pozice pozice (pořadí) učebny v daném patře budovy Technologie Doctrine vygenerovala následující skript pro vytvoření tabulky: Obrázek 9: SQL skript pro vytvoření nové tabulky tv_ucebny (vlastní) 30

31 S pomocí odděleného navigačního systému provozovaného VŠPJ na doméně nav.vspj.cz a také podle fyzického umístění učeben ve škole jsem si pak tabulku naplnil správnými údaji, přičemž pozici učebny jsem nastavil podle logiky zmíněné v kapitole Systém značení učeben. Ve stávající PHP třídě pro výchozí kontroler aplikace jsem si připravil novou metodu navigationaction adresovanou pomocí URL tv.vspj.cz/navigation, které později poskytnu všechny údaje potřebné k navigaci a ty pak vykreslím v pohledu pro navigaci. 3.2 Pozice televize Dále jsem upravil entitu IpZarizeni a automatizovaným SQL skriptem opět vygenerovaným pomocí Doctrine i související tabulku ip_zarizeni ve schématu tv, aby se u televize dala nastavit pozice. Výsledná podoba tabulky obsahuje tyto sloupce: zarizeni ID zařízení, ke kterému se daný záznam tabulky vztahuje (stávající sloupec) ip IP adresa zařízení, která mu byla v síti přidělena (stávající sloupec) ucebna_vlevo_id ID nejbližší učebny nalevo od zařízení (nový sloupec pro navigaci) ucebna_vpravo_id ID nejbližší učebny napravo od zařízení (nový sloupec pro navigaci) Jelikož tabulka byla ve schématu tv připravena, ale doposud nepoužívána, požádal jsem správce školní sítě, Ing. Martina Skoumala, DiS., aby všem televizím přidělil IP adresu a pak mi sdělil, kde je ve škole umístěna každá televize již s konkrétní IP adresou. Já jsem pak pomocí jednoduchého SQL skriptu nastavil každé televizi její pozici nejbližší učebnu vlevo a vpravo. 3.3 Navigace vzhled snímku Následně jsem pomocí nástroje Twig v kombinaci s HTML a CSS vytvořil pohled pro navigaci základní vizuální rozvržení navigačního snímku s připravenými oblastmi pro učebny vlevo, učebny vpravo, učebny nahoře, učebny dole, dashboard a pro legendu křídel školy. 31

32 Obrázek 10: Základní rozvržení navigačního snímku (vlastní) Na snímku se zatím zobrazovala pouze legenda křídel a aktuální čas. O zobrazení aktuálního času se staraly dvě jednoduché funkce napsané v JavaScriptu. Obrázek 11: JavaScriptové funkce pro zobrazení aktuálního času (vlastní) 3.4 Navigace učebny pro mód ostatní Dále jsem rozšířil repozitář UcebnaRepository o několik metod obstarávající všechna data učeben pro novou navigaci. Pro získání učeben v režimu ostatní pro dané patro budovy jsem použil jednoduchý SQL kód. Využil jsem přitom sloupce patro u každé učebny. Zápis :patro mi umožňuje měnit 32

33 SQL kód dynamicky jedná se totiž o parametr patro, který se v reálném čase nastavuje na konkrétní patro televize. Fragment kódu AND tv_uc.kridlo <> 5 vyřazuje z přehledu učeben pro dané patro červené křídlo, protože do něj se vždy člověk dostane pouze směrem dolů. Z databáze tedy tímto příkazem vyberu všechny učebny, kde je povolen rozvrh/výuka a kde se patro učebny rovná patru televize a kde je křídlo učebny různé od červeného. Obrázek 12: SQL kód pro získání učeben na určitém patře v módu ostatní (vlastní) Pro získání učeben o patro výše jsem použil stejný kód, pouze jsem změnil podmínku, podle které nyní získám všechny učebny, kde je povolen rozvrh/výuka a jejichž patro je vyšší než patro televize a jejichž křídlo je jiné než červené. Obrázek 13: SQL kód pro získání učeben ve vyšším patře v módu ostatní (vlastní) Učebny o patro níže lze získat podobně, pouze je potřeba myslet na průchod do červeného křídla v nejnižším patře vybereme z databáze tedy všechny učebny, kde je povolen rozvrh/výuka a jejichž patro je nižší než patro televize nebo jejichž křídlo je červené (velice důležitou roli v tomto SQL dotazu hrají závorky). 33

34 Obrázek 14: SQL kód pro získání učeben v nižším patře v módu ostatní (vlastní) 3.5 Navigace učebny pro mód základní a zkouškové období Pro navigaci v módu základním a zkouškovém období je nejprve nutné najít aktuální výukový týden a vyučovací hodinu. Výukový týden jsem vybral tak, že jsem nejprve zjistil, které všechny výukové týdny spadají do aktuálního semestru, seřadil jsem si je podle data a očísloval si je. Aktuálním týdnem pro mě byl potom ten, jehož datový interval pokrývá aktuální datum. O to se stará fragment kódu WHERE NOW() BETWEEN tydny.datum_od AND tydny.datum_do. Obrázek 15: SQL kód pro získání aktuálního výukového týdne (vlastní) Aktuální vyučovací hodinu jsem pak získal vybráním vyučovací hodiny, která začíná maximálně za 50 minut a končí za víc než 15 minut, tzn. 15 minut před koncem dané vyučovací hodiny již vyberu následující hodinu. Ke každé hodině si zároveň spočítám délku předešlé přestávky ve výuce a zjistím, jestli hodina aktuálně probíhá. 34

35 Obrázek 16: SQL kód pro získání aktuální vyučovací hodiny (vlastní) Pro získání učeben v módu základním a zkouškovém období jsem vytvořil společnou metodu PHP třídy, která na základě zjištěného týdne a hodiny rozhodne, který SQL skript se má vykonat. Pokud byl týden nalezen a jeho číslo je menší nebo rovno 14 a zároveň byla nalezena hodina, vrátím SQL pro výuku aktuálního týdne a hodiny. Pokud byl nalezen týden a jeho číslo je menší nebo rovno 14 (jsem ve výukovém období), ale nebyla nalezena hodina, vrátím SQL pro režim ostatní (pouze učebny bez aktuální výuky a zkoušek). Pokud nebyl nalezen týden (nejsem ve výukovém období), vrátím SQL pro zkouškové období. Obrázek 17: Metoda PHP třídy pro rozhodnutí mezi módem základní (výukové a zkouškové období) a módem ostatní (vlastní) 35

36 Pro výukové období se pak použije SQL skript, který na základě dne v týdnu rozhodne, zda se dívat na rozvrh hodin v tabulce timetable (rozvrh pro prezenční studium; pondělí až pátek), nebo timetable_kombi (rozvrh pro kombinované studium; sobota). Na následujícím obrázku je verze kódu pro kombinované studium. V komentářích (tj. zelené fragmenty kódu začínající dvěma pomlčkami) je verze kódu pro prezenční studium, kde nic znamená, že řádek by v SQL dotazu pro prezenční studium vůbec nebyl. Obrázek 18: SQL skript pro výukové období (vlastní) Na předchozím obrázku je také vidět, že SQL dotaz pro získání aktuální výuky je složitější než ten pro získání učeben v módu ostatní. Pomocí SQL příkazu JOIN je potřeba spojit učebny se systémem rozvrhu a k němu zase připojit informace o vyučované hodině příjmení učitele, zkratka předmětu a typ výuky. Pro zkouškové období připojím k učebnám údaje z tabulky terminy. Momentálně zobrazuji všechny zkoušky, které začínají za 15 minut a momentálně probíhají maximálně 30 minut. 36

37 Obrázek 19: SQL skript pro zkouškové období (vlastní) 3.6 Navigační algoritmus Všechny výše zmíněné algoritmy popisovali pouhé získání učeben a potřebných dat podle zvoleného módu základní, ostatní. Učebny o patro výše a níže je nyní již možné zobrazit, ale pro učebny na patře je ještě nutné rozhodnout, které se zobrazí nalevo od televize a které napravo. Nyní přichází na řadu samotný navigační algoritmus. Navigaci jsem připravil ve dvou verzích navigace bez smyčky a navigace ve smyčce. Kvůli probíhajícím stavebním pracím v zeleném křídle budovy bude momentálně použita první verze algoritmu. Ta funguje tak, že mezi dříve získanými učebnami na patře najde dvě učebny určující pozici televize. Televize tak zjistí svou pozici mezi učebnami na patře a správně vypíše učebny vlevo a vpravo. Problém by mohl nastat pouze tehdy, pokud by byly učebny u televize zadány naopak, tzn. televize by byla na protější stěně chodby, než navigační algoritmus zamýšlel. Učebny vlevo se musí s učebnami vpravo v takovém případě prohodit. 37

38 Obrázek 20: PHP kód pro navigaci bez smyčky (vlastní) Ve verzi navigace ve smyčce je nejprve zjištěna pozice televize (stejným způsobem jako v první verzi algoritmu). Podle pozice jsou do výsledného zobrazení nejprve uloženy učebny nalevo a napravo nacházející se ve stejném křídle jako televize. Poté jsou podle principu vysvětleného v kapitole Navigace ve smyčce zjištěna tzv. povolená křídla pro pravou a levou stranu televize. Zbylé získané učebny na patře jsou procházeny a učebny, které se nachází v povolených křídlech, jsou ukládány do výsledného zobrazení. Pokud je televize na protější stěně, než si algoritmus myslí, učebny vlevo a vpravo jsou na konci algoritmu prohozeny stejně jako v jeho první verzi. Obrázek 21: Uložení učeben napravo od televize ve stejném křídle jako televize (vlastní) 38

39 Obrázek 22: Určení povolených křídel (vlastní) Obrázek 23: Uložení zbylých učeben napravo od televize (vlastní) Po aplikování tohoto algoritmu lze již určit, které učebny se mají zobrazit od televize napravo a které nalevo. 3.7 Časovač začátku/konce vyučovací hodiny Pro lepší čitelnost navigace byl vedle aktuálního času přidán časovač. Ten pomocí ubývajícího horizontálního ukazatele společně s písemným vyjádřením času upozorňuje na začátek další (konec aktuální) vyučovací hodiny. 39

40 Aby byla zajištěna perfektní synchronizace vteřin aktuálního času a nového časovače, byla upravena funkce pro zobrazení hodin. Přibyl výpočet zbývajícího času a nastavení šířky horizontálního ukazatele. Obrázek 24: JavaScriptová funkce pro aktuální čas a časovač (vlastní) Fragment kódu location.reload(); se stará o obnovení stránky, pokud časovač dojde do nuly (při skončení aktuální nebo započetí následující vyučovací hodiny). Tím je zaručeno, že zobrazovaná vyučovací hodina je vždy aktuální. K obnovení snímku však nedochází pouze při vynulování časovače, další obnovení zajišťuje promítání celé prezentace při zobrazení posledního snímku prezentace dojde k novému načtení všech snímků. Navigační časovač tedy může např. ukazovat, že aktuální hodina skončí za 40 minut (k obnovení by tedy došlo až za 40 minut), ale délka celé prezentace je 60 vteřin, k překreslení obsahu navigačního snímku (jako každého jiného v prezentaci) tedy dojde každých 60 vteřin. 40

41 CMS dále disponuje možností restartovat televizi na dálku. Nejedná se však o doslovné restartování zařízení, ale pouze o obnovení záložky v prohlížeči. Umožněno je to využitím knihovny Socket.IO, kdy správce CMS v administračním panelu zadá požadavek na restart zařízení a naslouchající klient (televize) provede požadovanou operaci, pokud byl požadavek určen pro ni. V systému je umožněno také obnovit prezentaci na pozadí po zobrazení aktuálního snímku. Princip je podobný. Na serveru vznikají také požadavky na obnovu zařízení po snímku automaticky, a to při úpravě jakéhokoli snímku zobrazovaného na televizi. Obrázek 25: Administrační panel v CMS pro restart zařízení (vlastní) Navigační snímek včetně časovače jde vidět na následujícím obrázku. Jedná se konkrétně o zobrazení ve výukovém období v módu základní. Časovač je při načtení snímku nejprve plný (pravá strana ukazatele), po 2 vteřinách se posune směrem doleva na odpovídající úroveň pro zbývající čas a pak postupně ubývá dál směrem doleva. Obrázek 26: Navigační snímek v módu základní výukové období (vlastní) 41

42 3.8 Dashboard nabídka menzy Pro výpis aktuální nabídky menzy jsem musel v Symfony projektu nadefinovat nové připojení na externí databázi. Z toho důvodu jsem vytvořil manažer MenzaManager, který se o toto oddělené připojení a všechny databázové tabulky s ním spojené stará. V něm jsem vytvořil metodu, která vrací jídelníček menzy pro aktuální den. K získání potřebných dat mi stačil jeden SQL dotaz. Školní menza je v provozu do 14 hodin odpoledne. Po této hodině se již zobrazuje nabídka na další pracovní den. Obrázek 27: Navigační snímek včetně nabídky menzy (vlastní) 3.9 Dashboard přehled počasí Další užitečnou informací je pro všechny návštěvníky školy určitě přehled počasí. VŠPJ má dokonce vlastní meteostanici, které ukládá data každých 5 minut, takže zobrazovaná data jsou opravdu aktuální, navíc perfektně odpovídají lokalitě. K získání potřebných dat mi opět stačil jeden SQL dotaz, který vybral potřebné sloupce z databázové tabulky. Jelikož jsou data ukládána na další oddělený server, nadefinoval jsem si v projektu další databázové připojení a manažer MeteoManager, který se stará o data tohoto odděleného databázového serveru. V manažeru jsem vytvořil metodu, která vrací aktuální přehled počasí. Abych však mohl zobrazovat na dashboardu více informací současně, musel jsem jej předělat na tzv. karusel (doslova kolotoč), často používaný na pohyblivou obrázkovou 42

43 galerii. Karusel se pak může skládat z libovolného počtu snímků, které jednotlivě přeblikávají. První snímek karuselu je nabídka menzy. Dalším snímkem je přehled počasí. Obrázek 28: Navigační snímek včetně přehledu počasí (vlastní) 3.10 Dashboard počasí z webkamer Na dashboard byly navíc přidány pohledy ze školních webkamer. Obrázky z těchto webkamer se na externí server zaznamenávají každých 5 minut. K jejich zobrazení na dashboardu mi stačilo vykreslit jednoduchý obrázkový HTML element img se správným zdrojem. Do karuselu dashboardu přibyly celkem čtyři snímky s pohledem z webkamer každý pro jednu světovou stranu. Obrázek 29: Navigační snímek včetně pohledu z webkamery mířící na sever (vlastní) 43

44 3.11 Zakomponování do současného systému V současném systému jsem umožnil nově vytvořit navigační snímek. Šablona tohoto snímku je založená na již existující šabloně v systému, a to šabloně s externím webovým obsahem. V navigačním snímku se totiž vykresluje HTML prvek iframe (stejně jako v šabloně již existující), který zobrazuje obsah stránky běžící na URL adrese samostatného navigačního systému v rámci současné aplikace. Obrázek 30: Menu pro vytvoření nového navigačního snímku (vlastní) U každého navigačního snímku lze zvolit, zda bude navigace probíhat v módu základní (1) nebo ostatní (2). Vybraný mód pak mění URL adresy, kterou element iframe vykresluje. Obrázek 31: Výběr módu navigačního snímku (vlastní) 44

45 Maximální doba zobrazení, co šla v systému jednomu snímku nastavit, byla 1 minuta. Ale pro účely navigace by bylo dobré, kdyby šlo nastavit delší dobu. Upravil jsem tedy menu pro změnu délky každého snímku v prezentaci. Nově lze nastavit dobu trvání jednoho snímku až 10 minut. Obrázek 32: Menu pro změnu délky zobrazovaného snímku (vlastní) 45

46 4 Testování Dne 25. března 2019 byla navigační část aplikace spuštěna v testovacím provozu v budově školy. Hlavní testování a ladění aplikace probíhalo prvních 14 dní provozu. Na dashboard navigačního snímku přibyl snímek s upozorněním na testovací provoz včetně kontaktu na tvůrce navigačního systému. Pro začátek byla navigačnímu snímku nastavena doba zobrazení na 1 minutu. První estetický problém, který se při testování objevil, bylo grafické zobrazení aktuálního času. S časem se totiž v první verzi zobrazoval v jednom řádku také den v týdnu a současné datum se slovním zápisem měsíce. V některou denní dobu se celý tento zápis nevešel do jednoho řádku, a tak se v některé vteřině zobrazil na dvou řádcích. To graficky nepůsobilo správně. Nakonec je v navigačním snímku zobrazován pouze aktuální čas, jenž může být nyní vykreslen větším písmem. Během několika prvních minut provozu byl objeven další problém bylo zjištěno, že promítání prezentace se zastavuje na navigačním snímku, nepokračovala dalším snímkem nebo znovu od začátku. To bylo zapříčiněno tím, že přestože bylo v systému již v minulosti umožněno nastavit délku trvání jednoho snímku na jednu minutu, nebyly minuty brány při generování prezentace v potaz. Délka snímku se tak vždy nastavila pouze na počet vteřin, a jelikož v databázi byla délka uložena ve tvaru HH:MM:SS (H hodiny, M minuty, S vteřiny), tak pro jednu minutu ve tvaru 00:01:00 se jako vteřiny vzalo číslo 00. Délkou snímku tedy byl čas 0 vteřin, což způsobovalo zmíněné podivné chování aplikace. Dalším problémem, který byl hned na televizích vidět, byl kontrast barev nové navigace. Monitor, na kterém byl projekt vyvíjen, měl jiné zobrazovací možnosti, a tak po zjištění rozdílu oproti televizi došlo k patřičné úpravě barev. Časovač aktuální/následující vyučovací hodiny po spuštění také potřeboval vylepšit, aby návštěvníci lépe pochopili jeho význam. Při načtení snímku byl horizontální ukazatel časovače nejprve prázdný (levá strana ukazatele), pak se načetl směrem doprava na odpovídající hodnotu pro zbývající čas a nakonec začal postupně ubývat směrem doleva. To bylo na první pohled matoucí, proto horizontální ukazatel časovače nakonec funguje tak, jak je popsáno v kapitole 3.7 Časovač začátku/konce vyučovací hodiny. 46

47 5 Diskuze Systém je zatím schopen dobře navigovat ve křídle, kde jsou momentálně rozmístěné televize, tzn. v modrém křídle. Algoritmus počítá s umístěním nových televizí celkově ve 4 křídlech: modré, šedé, zelené a žluté. Nepočítá s umístěním televize v křídle červeném, protože v tomto křídle se nachází méně učeben než v křídlech jiných, toto křídlo je také menší, má pouze dvě patra a většinou se v něm dá zorientovat i bez pokročilejší navigace. Pokud by byla nová televize umístěna do křídla červeného, algoritmus by pro ni nezobrazoval správné výsledky. Pro správnou funkčnost algoritmu v tomto křídle by bylo potřeba vytvořit speciální výjimku, protože pro televizi v červeném křídle nelze jako učebny vlevo a vpravo brát učebny z jiných křídel ve stejném patře, protože průchod k nim se nachází pouze v nejnižším patře červeného křídla, všechny ostatní učebny kromě červeného křídla bych tedy musel směrovat směrem dolů stejně jako je to v jiných křídlech při směrování do červeného. V ostrém provozu bylo vyzkoušeno pouze navigování bez smyčky, a to kvůli uzavřenému zelenému křídlu budovy. Bylo otestováno použití na televizích, které jsou v budově skutečně rozmístěny. Verze algoritmu pro navigování ve smyčce byla otestována pouze na počítači při vývoji samotné aplikace. Až se otevře zelené křídlo a rozmístí se další televize, bude nutné algoritmus otestovat znovu a zjistit, jestli se při navigování ve smyčce v ostrém provozu neobjevují nevyžádané chyby. Algoritmus navigování ve smyčce by se dal také vylepšit tak, aby bral v potaz nejen pozici televize v křídle, kde se nachází, ale také pozici učeben v křídle od televize nejvzdálenějším, a tak směrovat některé učebny z nejvzdálenějšího křídla doprava a některé doleva, nikoli všechny jednou stranou na základě pozice v aktuálním křídle. Vhodné by bylo pokusit se v budoucnu upravit systém NAV tak, aby přijímal pomocí URL identifikační číslo nebo název učebny. Toho by se dalo využít v nové navigaci, která by mohla SVG obrázek využít k velice přesnému zobrazení pozice televize v rámci křídla budovy. Tento obrázek by se mohl zobrazovat na informačním dashboardu navigačního snímku. Návštěvník školy by pak přesně věděl, kde se při pohledu na televizi zrovna nachází. Toto vylepšení systému NAV by se pak dalo využít i v jiných systémech VŠPJ, např. v informačním systému, a to tak, že při jakékoli práci s učebnou (tvorba rozvrhu, rezervace učebny, správa učeben) by mohl informační systém odkazovat na SVG plánek v systému NAV, jenž by zobrazoval přesnou polohu učebny, s níž uživatel pracuje. 47

48 Závěr Cílem práce bylo naplnit původní smysl televizí umístěných v budově školy možnost navigovat návštěvníka podle jeho aktuální polohy, když se podívá na televizi. Cílem tedy bylo vytvořit nový navigační systém a zakomponovat jej do již existujícího systému prezentací na televizích. Tento cíl se povedlo splnit zcela. Dokonce se povedlo splnit cíl nad rámec zadání práce, protože byly do dashboardu navigačního snímku zakomponovány informace z dalších školních systémů, a to z meteorologické stanice a ze školních webkamer. Z meteorologické stanice jsou získávána aktuální data o počasí, z webkamer zase aktuální pohled na nebe kolem budovy. Při vytváření navigačního algoritmu vznikl jedinečný předpis, jak získat umístění učeben v budově speciálního tvaru. Tento algoritmus byl navržen tak, aby překonal obtíže při navigování návštěvníků ve smyčce patra po zpřístupnění všech křídel budovy. Při tvorbě algoritmu bylo myšleno i na to, aby jeho funkčnost obsáhla i možnost navigovat do teprve přistavované budovy školy. Vhodným rozšířením do budoucna by bylo doplnit informační dashboard navigace o aktuální informace nebo vzkazy určené studentům či akademickým pracovníkům a také o akce, které se konají buď ve škole, nebo jinde v Jihlavě. Věřím, že navigace si získá velkou část pozornosti všech návštěvníků školy, a proto by bylo vhodné toho využít a pokusit se předat jim informace, které jim doposud unikaly, i touto cestou. Pokud by měl někdo zájem do aplikace zmíněná vylepšení zapracovat, kód mu bude poskytnut na požádání na OKRIS VŠPJ (úložiště Gitlab projekt tv). 48

49 Seznam použité literatury INFSOFT GMBH Indoor Positioning and Indoor Navigation with Wi-Fi ITNETWORK.CZ Lekce 1 - Popis MVC architektury KELLEHER, Fionn Understanding Socket.IO - NodeSource KRUŽÍK, Miroslav Návrh a implementace přehrávače Powerpoint prezentací a integrace do televizního CMS. Jihlava :, LYNE, Marc What Is A QR Code And Why Do You Need One? - Search Engine Land MOBSTAC What is a Bluetooth beacon? How do BLE beacons work? MORRIS, Scott What is CSS, How Does It Work and What is It Used For? NIELD, David All the Sensors in Your Smartphone, and How They Work REFSNES DATA Node.js Introduction REFSNES DATA What is HTML SYMFONY SAS Home - Twig - The flexible, fast, and secure PHP template engine. 2019a. SYMFONY SAS Symfony 2.8 roadmap SYMFONY SAS Symfony, High Performance PHP Framework for Web Development. 2019b. TAYLOR, Allen G SQL For Dummies. Hoboken : John Wiley & Sons, Inc., THE DOCTRINE COMMUNITY. Community - Doctrine - PHP Database Tools. THE PHP GROUP PHP: What is PHP? - Manual

50 Seznam příloh Příloha A Manuál ke správě navigace Příloha B Schéma použití MVC architektury 50

51 Příloha A Manuál ke správě navigace Správa pozic učeben a pozic televizí probíhá pouze na úrovni hlavní školní databáze, nikde jinde není přístupná. Učebny v patře jsou navrženy tak, že jsou číslovány od křídla 1 (šedé) až po křídlo 4 (zelené) od nejmenšího čísla po největší. Nakonec jsou očíslovány učebny v křídle 5 (červeném). Číslování jde postupně proti směru hodinových ručiček. Detail je vidět na následujícím obrázku. Obrázek 33: Číslování křídel budovy (vlastní) Při přidávání nové učebny je potřeba do tabulky tv_ucebny ve schématu tv vložit správné hodnoty do sloupců id, kridlo, patro a pozice. Pokud je učebna přidávána na jinou pozici v patře než poslední, je nutné ostatní učebny o jedno místo posunout dál. Rozdíl ve vzdálenosti dvou vedlejších učeben musí být vždy 1, aby algoritmus správně zjistil orientaci televize (umístění na plánované nebo protější stěně chodby). Při změně IP adresy televize je potřeba v tabulce ip_zarizeni ve schématu tv nastavit novou IP adresu. Při přesunutí televize je potřeba v téže tabulce nastavit nové nejbližší učebny od televize, tzn. upravit hodnoty sloupců ucebna_vlevo_id a ucebna_vpravo_id. 51

52 52