Univerzita Palackého v Olomouci Přírodovědecká fakulta Katedra geoinformatiky Martin MIKLOŠ VIRTUÁLNÍ PRŮVODCE KRAJINOU CHKO LITOVELSKÉ POMORAVÍ Magisterská práce Vedoucí práce: RNDr. Vilém PECHANEC Ph. D. Olomouc 2012
Čestné prohlášení Prohlašuji, že jsem magisterskou práci magisterského studia oboru Geoinformatika vypracoval samostatně pod vedením RNDr. Viléma Pechance Ph. D. Všechny použité materiály a zdroje jsou citovány s ohledem na vědeckou etiku, autorská práva a zákony na ochranu duševního vlastnictví. Všechna poskytnutá i vytvořená digitální data nebudu bez souhlasu školy poskytovat. V Olomouci duben 2012
Děkuji RNDr. Vilému Pechancovi Ph. D. za navržené téma magisterské práce. Dále děkuji rodičům a Martině Holoubkové, kteří mne po dobu tvorby práce podporovali.
Vložený originál zadání bakalářské/magisterské práce (s podpisy vedoucího katedry, vedoucího práce a razítkem katedry). Ve druhém výtisku práce je vevázána fotokopie zadání.
OBSAH SEZNAM POUŽITÝCH ZKRATEK... X ÚVOD.........X 1 CÍLE PRÁCE... 9 2 POUŽITÉ METODY A POSTUPY ZPRACOVÁNÍ... 10 2.1 Vymezení pojmu Virtuální studovna... 10 2.2 Použitá data... 10 2.2.1 Digitální archív CHKO Litovelské Pomoraví... 10 2.2.2 Multimediální data... 10 2.2.3 Prostorová data... 11 2.3 Použité programy... 13 2.4 Postup zpracování... 14 3 SOUČASNÝ STAV ŘEŠENÉ PROBLEMATIKY... 15 3.1 Vymezení pojmu 3D vizualizace krajiny... 15 3.2 XML formáty... 16 3.2.1 SMIL... 16 3.2.2 X3D... 17 3.2.3 CityGML... 18 3.2.4 3DMLW... 19 3.3 Knihovny využívající HTML5 a WebGL... 19 3.3.1 KataSpace... 20 3.3.2 GLGE... 21 4 TVORBA VIRTUÁLNÍ STUDOVNY... 22 4.1 Návrh virtuální studovny... 22 4.1.1 Základní požadavky... 22 4.1.2 Návrh architektury... 23 4.1.3 Návrh struktury Virtuální studovny... 24 4.2 Mapová část... 24 4.2.1 Výběr vhodných technologií... 24 4.2.2 Sestavení... 29 4.3 Popis území... 30 4.3.1 Výběr vhodných technologií... 30 4.3.2 Sestavení... 32 4.4 Dokumenty... 33 4.4.1 Výběr vhodných technologií... 33 5
4.4.2 Sestavení... 33 4.5 Multimédia... 34 4.5.1 Výběr vhodných technologií... 34 4.5.2 Sestavení... 36 4.6 Administrace webu... 39 4.6.1 Editace textů... 39 4.6.2 Správa dokumentů... 40 4.6.3 Správa fotografií... 40 4.6.4 Stažení geodat... 42 4.6.5 Správa uživatelů... 43 4.6.6 Moje poznámky... 43 5 VÝSLEDKY... 45 6 DISKUZE... 47 6.1 Vývoj studovny... 47 6.2 Jaká je budoucnost?... 47 7 ZÁVĚR... 49 POUŽITÁ LITERATURA A INFORMAČNÍ ZDROJE SUMMARY PŘÍLOHY 6
SEZNAM POUŽITÝCH ZKRATEK Zkratka AJAX API CSS DOM HTML CHKO JPEG KML MZCHÚ MP3 OGC PHP PDF REST SHP SQL SMIL SVG VML VRML W3C WAV WebGL WFS WMS WYSIWYG WWW X3D XML Význam Asynchronous JavaScript and XML Application Programming Interface Cascading Style Sheets Document Object Model HyperText Markup Language Chráněná krajinná oblast Joint Photographic Experts Group Keyhole Markup Language Maloplošné zvláště chráněné území MPEG-1 popř. MPEG-2 Audio Layer III Open Geospatial Consortium PHP: Hypertext Preprocessor Portable Document Format Representational State Transfer Shapefile Structured Query Language Synchronized Multimedia Integration Language Scalable Vector Language Vector Markup Language Virtual Reality Modeling Language World Wide Web Consortium Waveform audio file format Web Graphic Language Web Feature Service Web Map Service What You DSe Is What You Get World Wide Web Extensible 3D Extensible Markup Language 7
ÚVOD Máloco je považováno za tak samozřejmé jako krajina okolo. Vzbuzuje v nás emoce, ovlivňuje naše chování, nelze jí nevnímat. Jejímu studiu se lidstvo věnuje od nepaměti a stejně tak v něm bude muset neustále pokračovat. Bylo vytvořeno mnoho knih, článků či atlasů, které krajinu a její složky rozebírají, popisují či jen archivují její aktuální tvář, ale zachytit maximální množství informací zdá se být při současném technologickém pokroku nemožné. Přesto jde vývoj ve výzkumu krajiny velmi rychle kupředu. V době 21. století již můžeme s pomocí moderní techniky a nových technologií krajinu zkoumat detailněji. Krajinu je možné digitálně vizualizovat a přenášet tento obraz na displeje různorodých zařízení, archivovat informace o jejich složkách v robustních databázových systémech, či dynamicky modelovat její budoucí vývoj. Zmíněným oblastem studia krajiny se věnuje také geoinformatika. Vědci mají k dispozici stále více informací o krajině ve formě digitálních dat (mapy, fotografie, zvukové záznamy, inventáře...) a vzniká tak prostor pro jejich prezentaci a zpřístupňování všem zájemcům o její studium. Potenciál využití moderních technologií dálkového přístupu k informacím o krajině tak neustále roste a je velkou výzvou do dalších let. Tato práce se snaží přinést jedno z řešení, jakým způsobem informace o krajině přehledně a dynamicky prezentovat široké veřejnosti, a to formou přístupné webové aplikace Virtuální studovna Chráněné krajinné oblasti Litovelské Pomoraví. Magisterská práce byla řešena v rámci projektu číslo: CZ.1.07/2.2.00/07.0086 s názvem Environmentální vzdělávání rozvíjející uplatnění v praxi, který byl řešen mj. na Katedře geoinformatiky. 8
1 CÍLE PRÁCE Cílem diplomové práce je vytvoření virtuální studovny (virtuálního průvodce) krajiny CHKO Litovelské Pomoraví za využití moderních webových technologií a přístupů k vizualizaci krajiny. Virtuální studovnou je v tomto případě myšlena interaktivní webová prezentace prostorových, multimediálních (zvuk, video) a popisných dat oblasti CHKO Litovelské Pomoraví. Uživateli virtuální studovny je umožněn přístup k velkému množství informací o základních charakteristikách území CHKO, maloplošných zvláště chráněných územích (MZCHÚ), životním prostředí, ochraně přírody a dalším tématům. Zpřístupnění studovny je rozděleno do tří úrovní pro širokou veřejnost, pro autorizované uživatele a administrátora. Součástí webové prezentace je také administrační rozhraní pro správu obsahu, které zajistí možnost další aktualizace a rozvoj a zároveň nezávislost virtuální studovny na autorovi diplomové práce. Vzniklá webová prezentace si klade za cíl zájemcům umožnit a zjednodušit přístup k informacím a datům CHKO Litovelské Pomoraví a zároveň tuto oblast zatraktivnit na poli internetu. Jedná se zároveň o dílčí cíl projektu Environmentální vzdělávání rozvíjející uplatnění v praxi (reg. č. CZ.1.07/2.2.00/07.0086). Dalším cílem diplomové práce je analýza současného stavu problematiky 3D vizualizace a animace krajiny se zaměřením na technologie pro jejich tvorbu, kterým se autor věnuje v teoretické části. Budou vytvořeny webové stránky o práci a veškeré zdrojové kódy budou přiloženy na DVD. 9
2 POUŽITÉ METODY A POSTUPY ZPRACOVÁNÍ V kapitole je uveden přehled veškerých metod a technologií, použitých při tvorbě webové virtuální studovny. Pro tvorbu praktické části bylo použito metod webdesignu, webové kartografie, programování a zpracování dat. V teoretické části byla použita metoda studia literatury. 2.1 Vymezení pojmu Virtuální studovna Pod pojmem Virtuální studovna je nutno chápat interaktivní webovou aplikaci nebo aplikaci, která uživateli umožňuje přístup k informacím o území CHKO Litovelské Pomoraví. Nositelem informací jsou prostorová, multimediální (obrazová a zvuková) a textová data. Jedná se tedy o nejnižší typ virtuální reality - Low-end VR. Synonymem pro pojem Virtuální studovna jsou v tomto případě pojmy webová studovna či multimediální studovna. [11] 2.2 Použitá data Pro diplomovou práci je příznačná manipulace s velkým množstvím dat, protože cílem práce je vizualizovat prostorová a multimediální data a zpřístupnit digitální archiv CHKO Litovelské Pomoraví. 2.2.1 Digitální archiv CHKO Litovelské Pomoraví Jedná se o digitální kopie všech písemných, tabelárních a mapových materiálů k jednotlivým MZCHÚ od roku 1990. Konkrétně se jedná o zřizovací předpisy, vyhlašovací řízení, plány péče, údaje z Katastru nemovitostí, evidence zásahů a opatření, správní řízení, vědecko-výzkumnou činnost a veškeré další dokumenty. Dokumenty jsou ve formátech JPEG a PDF. Celková velikost archivu je 18,7 GB (10 183 souborů). Vlastníkem tohoto archivu je Správa CHKO Litovelské Pomoraví se sídlem v Litovli. 2.2.2 Multimediální data Multimediální data jsou v práci zastoupena 360 snímky, klasickými digitálními fotografiemi a zvukovými stopami. 360 snímky ve formátu JPEG nebyly před publikováním modifikovány. Jejich vlastníkem je Katedra geoinformatiky UP v Olomouci. 10
Digitální fotografie jsou použity ve více sekcích. Fotogalerie jednotlivých MZCHÚ, diapozitivů a snímky v mapě jsou převzaty od správy CHKO Litovelské Pomoraví. Tato obrazová data byla před použitím ve virtuální studovně upravena. Každá fotografie je na serveru uložena ve dvou velikostech (velká a miniaturní). Pro úpravu fotografií byl použit freeware Irfan View. Zvukové stopy jednotlivých živočichů jsou použity v sekci multimédia. Zvuky byly konvertovány z formátů WAV a MP3 do formátů OGG a M4U, které jsou pro použití ve webových prohlížečích vhodnější. Pro převod mezi zvukovými formáty byl použit nástroj 4Musics Multiformat Converter v 15 denní testovací verzi. 2.2.3 Prostorová data Veškerá prostorová data, použitá v diplomové práci, jsou určena pouze k vizualizaci a základní identifikaci. Jsou uložena ve formátu SHP, TIF a Google Fusion Table. K datům SHP a TIF přistupuje ArcGIS Server. Data jsou ve virtuální studovně přístupná v sekci Mapová část, kde jsou publikována pomocí ArcGIS Viewer for Flex. Data uložená v Google Fusion Tables jsou publikována v prostředí Google Maps. Nad žádnými daty se neprovádějí analýzy a není možné je skrze virtuální studovnu jakkoli editovat. Přehled použitých prostorových dat: Základní podkladová data: Základní mapa ČR - zdroj: ArcGIS Online Base Map Topografická mapa (World Topographic Map) - zdroj: ArcGIS Online Base Satelitní mapa (World Imagery) - zdroj: ArcGIS Online Base Map Historické letecké snímky - 1953, 1956, 1990, 2002-2003 - zdroj: CHKO LP Ochrana přírody: Hranice CHKO - měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK Maloplošná zvláště chráněná území + OP - měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK 11
NATURA 2000 - Ptačí oblasti - měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK NATURA 2000 - Evropsky významné lokality - měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK Památné stromy - měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK Hranice RAMSAR - měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK Přírodní podmínky: Geomorfologie - měřítko: 1:10 000, zdroj: CENIA, projekce: S-JTSK Geologiie - měřítko: 1:10 000, zdroj: KGI UPOL, projekce: S-JTSK Klima - měřítko: 1:10 000, zdroj: KGI UPOL, projekce: S-JTSK Hydrologie - měřítko: 1:10 000, zdroj: CENIA, projekce: S-JTSK Hlavní půdní jednotky - měřítko: 1:10 000, zdroj: KGI UPOL, projekce: S-JTSK Lesnictví - měřítko: 1:10 000, zdroj: WMS ÚHUL, projekce: S-JTSK Krajinný potenciál - měřítko: 1:10 000, zdroj KGI UPOL, projekce: S-JTSK Vývoj landuse - měřítko: 1:10 000, zdroj: KGI UPOL, projekce: S-JTSK Turistická témata: Cyklostezky - měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK Turistické trasy - měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK Naučné stezky - měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK Turistické rozcestníky 12
- měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK Ostatní: Klady mapových listů - síťové mapování - měřítko: 1:10 000, zdroj: CENIA, projekce: S-JTSK Klady mapových listů - Základní mapa (ZM5, ZM10, ZM25, ZM50) - měřítko: 1:10 000, zdroj: CENIA, projekce: S-JTSK Katastr nemovitostí - měřítko: 1:1000-1: 2880, zdroj: WMS ČUZK, projekce: S-JTSK Výškopis - zdroj: KGI UPOL 2.3 Použité programy Pro zpracování dat a vývoj webu virtuální studovny bylo využito jak licencovaných programových prostředků dostupných na Katedře geoinformatiky UP v Olomouci, tak OpenSource a freeware produktů. V případě konverze zvukových formátů byla použita 15 denní Trial verze komerčního produktu. ArcGIS Desktop 10.1 ArcGIS Server 9.3 JanMap Irfan View 4Musics Multiformat Converter - 15 denní testovací verze GIMP Inkscape PSPad Dokumenty Google - docs.google.com 13
2.4 Postup zpracování Obr. č.1 Schéma postupu zpracování diplomové práce 14
3 SOUČASNÝ STAV ŘEŠENÉ PROBLEMATIKY Tato kapitola řeší současný přístup k 3D vizualizaci krajiny. V úvodu je tento pojem vysvětlen a dále jsou představeny klíčové formáty pro jejich prezentaci ve webovém prostředí. 3.1 Vymezení pojmu 3D vizualizace krajiny Krajina, kterou vnímáme všude kolem nás je nekonečně složitým jevem a její úplné přenesení do digitálního prostředí je za současného vědeckého pokroku neřešitelným cílem. To však neplatí pro generalizovanou krajinu. Již v roce 1987 došel Ervin H. Zube k závěru, že budoucnost 3D vizualizací krajiny bude v počítačové grafice. Zlomovým bodem pro 3D vizualizace krajiny bylo spojení technik zpracování obrazu a geometrického modelování. [1]. Na geometrické sítě, generované z výškových charakteristik území byly kladeny snímky krajiny a vznikaly první foto-realistické vizualizace. S rostoucími možnostmi náročnosti výpočtů a pokroku v oblasti digitálního zpracování obrazu docházelo k zpřesňování a rozšiřování míry detailů vizualizací. 3D modelovaní je dnes velmi rozšířené v podobě vizualizace prostředí měst, krajiny a nejrůznějších tvarů geomorfologie. 3D vizualizaci krajiny chápeme jako zjednodušení reprezentace reálného světa a můžeme ji v určitých případech nazvat také 3D mapou. Z pohledu některých kartografů je 3D vizualizace krajiny chápána jako mapa jen tehdy, když jsou splněny pravidla shodná s pravidly tvorby klasické 2D mapy. Např.: každý objekt je definován v souřadném systému mapy, kartografické znaky zaručují přenos informací apod. [2]. Jiní kartografové se však spokojí s obecnější definicí, která říká, že 3D mapa je počítačem vytvořená, matematicky definovaná, trojrozměrná vysoce realistická prezentace krajiny se všemi přírodními a artificiálními objekty a jevy [4]. V této definici se již tedy nesetkáme s nutností plnění kartografických pravidel. Vizualizace krajiny se v dnešní době využívá například v počítačových hrách, v geografii, v software navigačních systému, pro testování fyzikálních modelů a v dalších oblastech. Pro vytváření reálných map se terén pouze reprodukuje, jelikož je požadována naprostá autenticita. Také v navigačních systémech se hodně dbá na detaily a přesnost zobrazení. V těchto případech se data nejprve musí zaznamenat a poté reprodukovat v cílové aplikaci, která se již postará o zbytek práce, o vygenerování modelu terénu, se kterým se může dále pracovat. [3] 15
3.2 XML formáty Následující kapitola se věnuje klíčovým formátům vycházejících ze značkovacího jazyka XML, určených pro integraci multimédií v prostředí geolokalizovaného webu a možnostem jejich následné dynamické prezentace. 3.2.1 SMIL Synchronized Multimedia Integration Language, umožňuje vytvářet působivé multimediální prezentace obsahující video, zvuk, obrázky a text. Pomocí SMIL lze vytvářet interaktivní aplikace a animace (výsledný dokument je srovnatelný s prezentacemi tvořenými v Microsoft PowerPoint). [12] Vývoj jazyka byl řízen pracovní skupinou Synchronized Multimedia při World Wide Web Consortium (W3C) a k 1. dubnu 2012 je definitivně ukončen. Veškeré úsilí o možnost vytvářet, publikovat a propojovat multimédia v prostředí webu je nyní upřeno k HTML5 a CSS3. <smil xmlns="http://www.w3.org/2001/smil30/"> <head> <layout> <root-layout width="200" height="200" background-color="red"/> <region id="a" top="0" left="0" height="80" width="80" /> <region id="b" top="0" left="80" height="80" width="80" /> <region id="c" top="80" left="0" height="80" width="80" /> </layout> </head> <body> <par> <img src="obrazek.png" begin="1s" dur="5s" region="a" /> <seq> <img src="obrazek.png" begin="1s" dur="5s" region="b" /> <img src="obrazek.png" begin="2s" dur="4s" region="c" /> </seq> </par> </body> </smil> Zdrojový kód. č.1 Ukázka vytvoření tří čtverců a zobrazení v nich obrázků v určitém časovém intervalu 16
3.2.2 X3D Extensible 3D je XML formát na ukládání 3D scén. Je vyvíjen Web3D konsorciem (www.web3d.org), vychází z již nepodporovaného VRML (Virtual Reality Modeling Language) a v některých směrech jej rozšiřuje a zpřesňuje. Hlavní změnou je přechod na syntaxi zápisu založené na XML. To s sebou nese celou řadu předností, především jednoduché zpracování celého dokumentu pomocí velkého množství knihoven a programových API pro práci s XML [13]. <Transform> <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Cylinder height="0.1" radius="0.5"/> </Shape> </Transform> Zdrojový kód. č.2 Vytvoření trojrozměrné scény. Kromě vytváření základních grafických objektů umožňuje X3D vytvářet složitější struktury. Pro vizualizaci krajiny je velmi užitečný typ objektu výškové pole (ElevationGrid). Jedná se o zápis dvourozměrného pole, do kterého jsou uloženy výškové hodnoty. X a y souřadnice jsou dopočítány dle pozice v poli. Na takto vytvořené pole je možné nakládat textury a vytvářet fotorealistické vizualizace. Obr. č.2 Schéma výškové sítě struktura výškové pole [13]. 17
Podobně jako u formátu SMIL je pro X3D limitující chybějící nativní podpora webových prohlížečů. Pro zobrazení je nutná instalace pluginu. Další nevýhodou je přílišná výpočtová náročnost u velkých projektů. Formát je vhodný spíše pro vytváření menších a lehčích geometrických struktur, mezi které vizualizace krajiny rozhodně nepatří. Další rozvoj formátu zatím není v plánu. Očekávání se upírají především směrem k WebGL a HTML5. 3.2.3 CityGML CityGML je otevřený datový model a na XML založený formát pro výměnu a ukládání virtuálních 3D modelů měst a krajiny. Jedná se o OpenGIS Encoding Standard, aktuálně ve verzi 1.1. [14] Cílem vývoje CityGML je dosáhnout všeobecné definice základních jevů, atributů a vztahů v rámci 3D modelu města. Aplikační oblasti zahrnují témata územního a krajinného plánování, architektonických řešení, turistických a odpočinkových aktivit, katastru nemovitostí, simulací týkající se životního prostředí, krizového managementu, pěší a automobilové navigace [14]. Pro zobrazení dat uložených ve formátu CityGML ve webovém prohlížeči je nutná instalace pluginu. Obr. č.3 Ukázka vygenerovaného modelu města uloženého v CityGML. 18
3.2.4 3DMLW 3D Markup Language for Web je další z klonů jazyka XML pro tvorbu a zobrazení 2D a 3D obsahu na webových stránkách v internetových prohlížečích. Formát podporuje skripty pro dynamický a interaktivní obsah. Také v případě tohoto jazyka je nutná instalace pluginu do webového prohlížeče. [15] Obr. č.4 Ukázka vygenerovaného modelu města uloženého v 3DMLW. 3.3 Knihovny využívající HTML5 a WebGL Pátá verze HyperText Markup Language přináší spoustu nových vlastností, tagů a sémantiky (v současné době je stále ve fázi navrhování). Nabízí možnost vkládání multimédií přímo do těla stránek bez nutnosti použití běhového prostředí Flash. Většina moderních webových prohlížečů ve svých posledních verzích podporuje velkou část specifikace jazyka HTML5. Mezi nejvýznamnější novinky z pohledu digitální kartografie a vizualizace krajiny patří nový element <canvas>. [16] <canvas> Bitmapové kreslící plátno závislé na rozlišení, které může být za běhu využíváno pro vykreslování grafů, herní grafiky a ostatních vizuálních prvků. [16] Jedná se tedy o kontejner pro grafiku, ve kterém se objevují veškeré výstupy skriptovacích jazyků. S tímto elementem je úzce spojena knihovna WebGL. 19
WebGL Knihovna (Web-based Graphics Library) vyvíjena Khronos group rozšiřuje možnosti JavaScriptu o práci s 3D grafikou bez nutnosti instalace podpůrných pluginů. WebGL kód zpracovává grafická karta klientského počítače a do elementu canvas vykresluje výsledky. Z této knihovny vychází mnoho dalších velmi zajímavých rozšíření jako např. KateSpace a GLGE. 3.3.1 KataSpace Velmi zajímavý projekt vyvíjí výzkumný tým Katalabs složen z vědců univerzit v Stanfordu a Princetonu. Snaží se vytvořit prostředí KataSpace [17] podobné virtuálnímu světu SecondLife (http://secondlife.com/), kterému by však ke svému běhu postačil pouze webový prohlížeč. Demonstrace tohoto světa je již funkční. Zatím sice primitivní (ve smyslu výběru pouze ze dvou avatarů a omezeného rozsahu pohybu). Přesto však jasně poukazuje na fakt, že WebGL přináší velký pokrok a pro vizualizace krajiny běžících přímo v prohlížečích je velkým příslibem do budoucna. [17] Obr. č.5 Ukázka virtuálního světa KataSpace. 20
3.3.2 GLGE Knihovna s příznačným podtitulem WebGL for the lazy se snaží zjednodušovat přístup k funkcím WebGL a umožňuje obsah vytvářet rychleji. Velmi propracovaný a zjednodušený je zde systém pro generování oblohy a mlhy. Nové funkce umožňují vytvářet realističtější modely, kdy hustota oblačnosti a mlhy pomalu slábne směrem k blízkým předmětům a horizontu, což působí mnohem věrněji. Nejedná se sice o přímé vizualizace krajiny, ale právě špatně simulovaná obloha v některých případech často kazí dojem z jinak hezké vizualizace. [18] Obr. č.6 Vygenerovaná oblaka pomocí knihovny GLGE. 21
4 TVORBA VIRTUÁLNÍ STUDOVNY Kapitola popisuje jednotlivé kroky, které bylo nutné provést při vývoji Virtuální studovny krajiny CHKO Litovelského Pomoraví. Ta je složena ze čtyř základních částí (Mapová část, Popis území, Dokumenty, Multimédia) a administračního rozhraní s povoleným přístupem autorizovaných uživatelů. 4.1 Návrh virtuální studovny V prvním kroku byl proveden návrh webové stránky, tedy vytvoření základního schématu a principu vzájemného propojení, aby se zamezilo duplikaci obsahu. Dále bylo rozhodnuto o značkovacích a skriptovacích jazycích, které se pro vývoj práce použijí a také byl udán směr, jakým se má ubírat design webu. Obr. č.7 Schéma Virtuální studovny hierarchie webových stránek. 4.1.1 Základní požadavky vytvoření Virtuální studovny podávající informace o CHKO Litovelské Pomoraví Virtuální studovna musí být moderní přístupná webová aplikace spustitelná na běžné konfiguraci stroje koncového uživatele 22
obsahem studovny musí být prostorová, popisná a multimediální data, která uživateli přináší ucelené a přehledné informace o území CHKO autorizovaný uživatel musí mít přístup k dalším částem studovny (vytváření poznámek, spravování některých částí studovny) administrátor musí mít přístup ke správě obsahu webu (dokumenty, texty, fotografie, uživatelé) 4.1.2 Návrh architektury Virtuální studovna funguje na principu klient-server architektury a je tvořena pomocí jazyků HTML, CSS3, ActionScript (Flex) a JavaScript (především framework JQuery) na straně klienta. Serverové skriptování a komunikaci s MySQL databázi vykonává PHP. Některé úlohy jsou zprostředkovávány asynchronně pomocí AJAX. Popis základních technologií v diplomové práci záměrně chybí, jejich znalost je považována za samozřejmost. Autor se více věnuje méně známým rozšiřujícím knihovnám, které nejsou tak často používané a mají potenciál pro další využití při zpracovávání obdobných úloh a jiných, webově zaměřených vědeckých prací. Obr. č.8 Schéma architektury klient-server, na které je Virtuální studovna postavena. 23
4.1.3 Návrh struktury Virtuální studovny Při návrhu struktury webových stránek Virtuální studovny byl kladen důraz na jednoduchost a přehlednost. Byla zde snaha zamezit jakékoli duplicitě obsahu, který se z velké části dynamicky generuje z databáze a file systému uloženém na serveru. Veškerá data, která byla před zahájením vývoje webu k dispozici, byla rozdělena do čtyř hlavních tématických částí: Popis území, Mapová část, Dokumenty a Multimédia. Návrh webdesignu byl čistě na autorovi práce, který se snaží o co nejčistší provedení s jasnou a přehlednou strukturou bez zbytečných rušivých prvků. Je využito některých nových vlastností, kaskádových stylů (CSS3) box-radius, box-shadow, transition a opacity. 4.2 Mapová část 4.2.1 Výběr vhodných technologií Pro publikování prostorových dat v prostředí webu se nabízí mnoho přístupů a řešení. Autor práce se rozhodoval mezi možnostmi nasazení ArcGIS Serveru či využití některého z JavaScriptových mapových API. Každá technologie má své určité výhody, ale také limity a omezení. Důležitým faktorem, na který byl při výběru technologie brán zřetel, bylo velké množství prostorových dat, které jsou ve Virtuální studovně publikovány. Dalším faktorem, na který bylo potřeba přihlížet, je nutnost znemožnit nelegálnímu stažení a šíření dat. Seznam vrstev viz. kapitola 2.2.3. Následující přehled se pokusí jednotlivé technologie stručně představit a uvede důvod, pro který bylo či nebylo dané technologie využito. Google Maps API Aplikační rozhraní, dostupné z [https://developers.google.com/maps/], jež uživatelům umožňuje pomocí skriptovacího jazyka JavaScript začlenit Google Maps do těla vlastních webových stránek, poskytuje mnoho nástrojů pro práci a manipulaci s prostorovými daty. Pomocí mnoha hotových funkcí je umožněno přidání vlastního obsahu do mapy, což dovoluje uživateli vytvářet robustní mapové aplikace přímo v těle webové stránky, bez potřeby další vlastní serverové nadstavby. Tato charakteristika je příznačná také pro další JavaScriptová API. 24
Google Maps ve verzi 3.8 nabízí kromě možnosti zobrazení podkladových map (Satellite, Hybrid, Roadmap, Terrain) a základní geometrie (bod, linie, polygon) také možnost publikování dat ve formátu KML, dat uložených v Google Fusion Table, vrstvy intenzity dopravy či dat služby Panoramio. Důvodem, proč nebyla mapová část Virtuální studovny postavena nad tímto API, je nemožnost zajištění úplného zabezpečení dat. V případě uložení dat v databázi XML či KML jsou data vypsána přímo ve zdrojovém kódu, popř. jsou ve zdrojovém kódu cesty k souborům, a data si může kdokoliv stáhnout. Pokud jsou data uložena v Google Fusion Tables, nastává stejný problém. Aby bylo možné data vizualizovat v mapě, musí být tabulka s daty veřejně přístupná (Public). Takto uložená data si může do své aplikace připojit kdokoliv další. Jinou nevýhodou Gogole Maps API je chybějící možnost připojení externích dlaždicových služeb. Existují sice hack skripty umožňující připojit např. WMS [19], ale oficiální podpora a hotové funkce zatím ve verzi 3.8 chybí. Gogole Maps API je však na webu virtuální studovny použito mimo hlavní mapovou část, a to u každé MZCHÚ a na úvodní stránce, kde je zobrazena vrstva hranice CHKO, která je uložena v Google Fusion Table. Tato úvodní mapa (nastavení podkladu, vrstvy a měřítka) je použita především z estetických důvodů, ale slouží také k základní orientaci a seznámení se zájmovým územím. Mapy u jednotlivých MZCHÚ jsou rovněž uloženy a generovány z Google Fusion Table. Google Fusion Tables Google Fusion Tables je moderní online nástroj pro správu dat, který umožňuje jejich jednoduché sdílení, editaci a vizualizaci [21]. Jedná se o jeden z formátů služby Google Docs, který mj. umožňuje uložení prostorových dat, která jsou importována z formátu KML. Data je možné vizualizovat jako grafy nebo mapy. Dle podstaty dat lze např. vytvářet kartogramy či heatmaps, a to přímo v prostředí Google Docs. Výsledné mapy je možné publikovat pomocí odkazu nebo je vkládat do HTML kódu pomocí elementu <iframe>. K těmto datům lze samozřejmě přistupovat také pomocí funkcí GoogleMaps API. Tato možnost byla využita při tvorbě Virtuální studovny. V případě map u jednotlivých MZCHÚ je použit následující jednoduchý skript pro vytvoření a zobrazení vrstvy layer z geometrie území, pro které platí ID = 1 a je uložená v tabulce 3154657. 25
var layer = new google.maps.fusiontableslayer({ query: { select: 'geometry', from: '3154657', where: 'ID = 1' },}); layer.setmap(map); Zdrojový kód. č.3 Google Maps API připojení dat uložených v Google Fusion Table. OpenLayers Javascriptový framework pro publikování map na webu, dostupný z [http://openlayers.org/]. OpenSource projekt, vyvíjen OSGeo od roku 2005, pracuje pouze na straně klienta a oproti Google Maps API nabízí vývojářům skutečně široké spektrum formátů a služeb, se kterými lze pracovat. Jedná se o možnost připojení některých standardizovaných formátů a služeb OGC, mapových podkladů z jiných mapových portálů či mapových serverů (rozhraní REST). Patří zde např. mapové podklady Google Maps, Bing Maps, OpenStreetMap, WMS, WFS či GML. Zásadní předností je jednoduchost s jakou je možné jednotlivé vrstvy připojovat. Není tedy problém připojit různými způsoby, pomocí pár řádků kódu, např. Základní mapu ČR. Ta je jako Tiled Map Service (TMS) nabízená Českým úřadem zeměměřickým a katastrálním. V tomto případě se přistupuje přímo k dlaždicím uloženým ve file systému. (Nejedná se o garantovanou službu). [20] var zm = new OpenLayers.Layer.XYZ( "Základní mapa ČR", "http://tms.cuzk.cz/${z}/${x}/${y}.png", {sphericalmercator: true, transitioneffect: "resize", numzoomlevels: 18 }); Zdrojový kód. č.4 OpenLayers API připojení dlaždic ZM uložených na tms.cuzk.cz. 26
Stejná mapová vrstva, publikována ArcGIS Serverem jako dynamická služba, může být připojena také jiným způsobem, a to pomocí funkce pro komunikaci s ArcGIS Serverem - OpenLayers.Layer.ArcGIS93Rest. V tomto případě se jedná o garantovanou službu, která běží také na ArcGIS.com jako Base Map. [21] var zm = new OpenLayers.Layer.ArcGIS93Rest ( "Základní mapa", "http://ags.cuzk.cz/arcgis/rest/services/zm/mapserver", {isbaselayer: true, tilesize 256, projection: 'EPSG: 102067' } ); Zdrojový kód. č.5 OpenLayers API připojení dlaždic ZM uložených jako ArcGIS služba.. Nad knihovnou OpenLayers je postaveno několik dalších toolkitů a rozšíření, mezi které patří např.: MapFish [http://mapfish.org/], GeoExt [http://geoext.org/] či české HSLayers [http://bnhelp.cz/hslayers/], které dále usnadňují práci a rozšiřují základní funkcionalitu frameworku.. Autor práce při hledání vhodné technologie pro tvorbu mapové části Virtuální studovny dlouho zvažoval využití tohoto frameworku. Jedinou negativní zkušeností byly převody mezi jednotlivými projekcemi. Konkrétně při transformaci souřadnic z projekce Spherical Mercator do WGS84 při sestavování dotazů getmap pro generování WMS, kdy transformace neproběhla vždy korektně. Rozhodujícím faktorem však nakonec byl velký počet vrstev, který je generován ArcGIS Serverem jako dynamická služba. Z tohoto důvodu byla zvolena kombinace ArcGIS Server ArcGIS viewer for Flex, která značně zjednodušila práci na vývoji. 27
ArcGIS Server Robustní komerční mapový server firmy Esri poskytuje širokou škálu GIS služeb, které běží na straně serveru a nekladou vysoké nároky na klienta. ArcGIS Server umožňuje publikovat mapové a datové služby dle standardů OGC (Open Geospatial Consorcium), jakými jsou např. WMS, WFS či KML. Dále nabízí nástroje pro geoproscessing, geokódování, editaci dat. Podporuje rozhraní REST a SOAP. ArcGIS Server je dostupný ve třech edicích (Basic, Standard a Advanced) a je možné jeho funkcionalitu dále rozšiřovat o extenzce (Spatial Analyst, Network Analyst a další). Na straně klienta lze k ArcGIS Serveru přistupovat pomocí několika API (ArcGIS API for Flex, ArcGIS API for JavaScript, ArcGIS API for Silverlight). Nabízí také využití již hotových webových mapových prohlížeček (knihoven) - ArcGIS Viewer for Flex a ArcGIS Viewer for Silverlight. Pro tvorbu mapové části Virtuální studovny byla vybrána kombinace ArcGIS Server a ArcGIS Viewer for Flex. Vzhledem k dostupnosti této technologie, která zaručuje zabezpečení uložených dat, plynulý chod aplikace, snadnost editace dat administrátorem, jednoduchou práci s převody mezi jednotlivými referenčními systémy a dalších výhod, byl ArcGIS Server upřednostněn před použitím méně spolehlivého javascriptového frameworku OpenLayers. Ale v případě jiných projektů, kdy není možné např. z finančních důvodů ArcGIS Server použít, se OpenLayers jeví jako správná volba. ArcGIS Viewer for Flex Webová mapová prohlížečka dostupná z [23], je postavená nad ActionScriptovým frameworkem Flex, jehož běhové prostředí je Adobe Flash Player. Sestavení aplikace (připojení vrstev, nastavení layoutu, zpřístupnění widgetů) je možné přímo v konfiguračním souboru config.xml (viz. obr. č.9) nebo pomocí obrazového průvodce. Základní widgety (samostatný uživatelský prvek určený ke konkrétnímu účelu), jako například legenda, měření vzdáleností či editace jsou již předpřipraveny a postačuje je pouze přidat v souboru config.xml. Pomocí ArcGIS API for Flex je možné vytvořit další speciální widgety pro potřeby dané aplikace.[23] 28
Obr. č.9 Obecné schéma souboru config.xml.[23] 4.2.2 Sestavení Prostorová data mapové části jsou publikována pomocí technologie ArcGIS Server na straně serveru a ArcGIS Viewer for Flex na straně klienta. U všech tématických vrstev (viz. kapitola 2.2.3) proběhl v software ArcGIS Desktop preprocessing. Data byla zbavena přebytečných atributů, ořezána na plochu CHKO Litovelské Pomoraví a kartograficky zpracována pro výstup. Data ve formátu SHP jsou uložena společně se souborem projektu (projekt.mxd) na patřičném místě adresářové struktury ArcGIS Serveru, který běží na serveru virtus.upol.cz. Pomocí ArcGIS Viewer for Flex jsou data publikována do těla webových stránek Virtuální studovny. Kompozici mapové části tvoří titul, podtitul, ovládací prvky mapy (zoom, pan), nástroj pro výběr tématické a podkladové mapy, měřítko, ukazatel souřadnic, nápověda a widgety (měření, legenda). Interaktivita je rozšířena o mouseover efekt, kdy je po najetí myši na daný prvek v mapě zobrazeno jeho infowindow. Data jsou určena pouze k prohlížení a základní identifikaci. Analýzy nad daty či jejich editace není umožněna. 29
Klientská aplikace byla vytvořena editací souboru conf.xml předdefinované šablony a konfigurací jednotlivých widgetů. V HTML kódu byla přidána horní navigační lišta Virtuální studovny. Obr. č.10 Mapová část Virtuální studovny ArcGIS Viewer for Flex 4.3 Popis území Vstupní stránka části Popis území obsahuje rozcestník k jednotlivým MZCHÚ. Tímto rozcestníkem je myšlena interaktivní klikací mapa a odkazy vedle ní. Pro vytvoření této mapy bylo použito knihovny Raphaël.js. Další obsah této části je tvořen klasickým HTML kódem. Pouze u stránek jednotlivých MZCHÚ je do těla stránky přidána mapa generovaná z dat uložených v Google Fusion Table. Postup přidání této mapy (Google Maps) je popsán v kapitole 4.3.1 4.3.1 Výběr vhodných technologií Raphaël.js JavaScriptový framework pro práci s vektorovou grafikou dostupný z [http://raphaeljs.com/]. Knihovna umožňuje vytvářet interaktivní prvky webových 30
stránek, jakými jsou například grafy, mapy, schémata či ikony. Raphaël je založen na práci s otevřenými formáty SVG (Scaleble Vector Graphic) a VML ( Vector Markup Language). Každý grafický prvek je objektem v DOM a lze k němu přistupovat pomocí skriptů. Nejčastějším případem je připojení posluchače událostí (event handler) k objektu. Pro vytvoření mapy ve Virtuální studovně byla použita vrstva jednotlivých MZCHÚ. Ta byla pomocí programu ArcGIS Desktop mírně generalizována (simplify polygon - pro snížení počtů lomových bodů) a poté exportována do formátu SVG. Pomocí jednoduchého skriptu byla vytvořena interaktivní mapa. Objekty (polygony jednotlivých MZCHÚ) jsou vytvořeny funkcí R.path(), která se přiřadí SVG geometrie a nabývá vlastností jako jsou barva výplně (fill), barva obrysové čáry (stroke), tloušťka obrysové čáry (stroke-width), zakončení čáry (stroke-linejoin). Na objekt lze dále vázat události a k ní funkci. V tomto případě je změna barvy vázaná na událost najetí myši nad polygon a přechod na jiné url je vázané na událost kliknutí na polygon. Obr. č.11 Interaktivní mapa vytvořená pomocí Raphael.js. 31
4.3.2 Sestavení Stránka popis území je na serveru uložena v souboru mzchu.php. Pokud se na server nezasílá žádný GET požadavek, zobrazí se uživateli úvodní obsah. Ten se skládá ze základních informací o celém území CHKO Litovelské Pomoraví a z interaktivní mapy, která plní roli rozcestníku k jednotlivým MZCHÚ. Odkazy na jednotlivé stránky obsahují GET požadavek, kdy je v proměnné id uloženo id konkrétního MZCHÚ z databázové tabulky mzchu. Dle této proměnné se tedy vygeneruje správný obsah (název, popisné charakteristiky, mapa, odkazy na fotografie a dokumenty). Technicky vše zajišťuje jednoduchý php skript, který pomocí podmínky if (empty($_get[ id ] ) zjistí, zda je uživatel na stránce konkrétního MZCHÚ či na stránce s rozcestníkem a vrátí klientovi požadovaný obsah. Obr. č.12 Základní layout pro všechny MZCHÚ, do kterého se dynamicky generuje obsah. 32
4.4 Dokumenty 4.4.1 Výběr vhodných technologií Cílem této části bylo nalezení způsobu, jakým zpřístupnit autorizovaným uživatelům Digitální archív CHKO Litovelské Pomoraví (viz. kapitola 2.1.1). Pro obrovské množství dokumentů uložených ve složité adresářové struktuře ve formátech JPEG, PNG a PDF nebylo možné vytvořit vlastní systém prohlížení. Limitujícím důvodem byla silně nejednotná adresářová struktura u jednotlivých MZCHÚ. Nejvhodnějším řešením se v tomto případě zdá využití JQuery pluginu elfinder. elfinder Rozšíření pro framework JQuery, které je dostupné z [http://elfinder.org/], umožňuje uživateli webu vzdálený přístup k datům uloženým na serveru a přitom nabízí příjemné uživatelské prostředí blízké klasickým file managerům. Uživateli je umožněn přístup do všech podadresářů zvoleného rootu. Podle přidělených práv je možné data prohlížet, editovat (měnit názvy) a dokonce další data nahrávat. Velkou výhodou je také česká lokalizace, která je v případě Virtuální studovny velmi vítaná. Obr. č.13 Ukázka webového rozhraní pro správu dat na serveru knihovna elfinder. 4.4.2 Sestavení Stránka Dokumenty je zpřístupněna na dvou úrovních autorizace. Nepřihlášený uživatel smí data pouze prohlížet, autorizovaný uživatel má k dokumentům plná práva (čtení, zápis, mazání). 33
Po spuštění stránky dokumenty.php je vyhodnocena základní podmínka: if (islogged()) Pro každý výsledek (jedná se / nejedná se o autorizovaného uživatele) se vypíše a provede skript s hlavním nastavením elfinder. Konkrétně url k php konektoru, nástroje pro toolbar a možnosti kontextové nabídky. Pro jasné pochopení je potřeba nahlédnout do zdrojového kódu, který je přílohou diplomové práce. 4.5 Multimédia 4.5.1 Výběr vhodných technologií V této sekci webu získává uživatel přístup k multimediálním datům vztahujícím se k oblasti CHKO Litovelské Pomoraví. Multimédia jsou hned na úvodní stránce této části rozdělena na fotogalerie, zvuky a videa. Fotogalerie se dále dělí na jednotlivá MZCHÚ, diapozitivy (digitální reprodukce analogových diapozitivů), 360 snímky a geotagované fotografie zobrazené v mapě. Zvuky zvířat jsou rozděleny do kategorií Obojživelníci, Ptáci a Savci. Pro prohlížení fotografií a videa je použit JQuery plugin Colorbox. 360 snímky jsou umístěny v HTML5 elementu <canvas>. Pro přehrání zvuků je použit JQuery plugin jplayer. Colorbox Malá knihovna pro prohlížení multimediálního a HTML obsahu v popředí webové stránky (tzv. lightbox ) je pod MIT licencí dostupná z [http://www.jacklmoore.com/]. Výhodou tohoto pluginu je zejména jeho snadná implementace a malá velikost (10KB). $(function() { $("#html").colorbox({html"html obsah"}); $("#fotografie").colorbox(); }); Zdrojový kód. č.6 JQuery funkce volající knihovnu Colorbox pro zobrazení fotografií či HTML obsahu. 34
Obr. č.14 Video uložené na serveru Youtube.com supštěné v okně Colorboxu. jplayer JQuery plugin pro přehrávání audio a video souborů v těle webových stránek je pod GPL/MIT licencí dostupný z [http://jplayer.org/]. Knihovna nabízí připravené (html/css/js) přehrávače zvuku a videa, kdy si může uživatel vybrat z několika typů a stylů (jednoduché tlačítko, přehrávač s dalšími ovládacími prvky, přehrávač více stop, videopřehrávač). Velkou výhodou pluginu je jeho nezávislost na běhovém prostředí, protože podporuje HTML 5, konkrétně využívá elementů <audio> a <video>. V případě, že je skript spuštěn ve webovém prohlížeči, který podporu HTML5 nenabízí, je využit flash přehrávač. Podporovány jsou formáty mp3, mp4, m4a, ogg, wav, WebMv, OGV, fla. 35
Obr. č.15 jplayer přehrávač zvukových stop. 4.5.2 Sestavení Seznamy fotogalerií a zvuků jsou dynamicky generovány z databáze a file systému. Sestavení fotografických miniatur v konkrétní galerii zajišťuje php skript, který nejprve spočítá počet fotografií v dané složce a poté pomoci cyklu vypíše všechny náhledové fotografie, které jsou uloženy jako snímek 0.jpg. Kliknutím na miniaturu se spustí funkce colorbox a fotografie se zobrazí v plné velikosti (kratší strana má vždy rozměr 700 px). //funkce pro výpočet souborů v adresáři vrací počet function pocet($addr){ $adresar = opendir($addr); $num=0; while ($soubor = readdir($adresar)){$num++;} $num = $num-2; return $num;} // z url jsou převzaty proměnné typ a id, podle kterých se sestaví SQL dotaz $typ = $_GET['typ']; $id = $_GET['id']; include './includes/database.php'; mysql_query("set NAMES 'utf8'"); $sql = mysql_query ("SELECT * FROM ".$typ." WHERE id=".$id."") 36
or die (mysql_error()); $result = mysql_fetch_object($sql); $pocet = pocet("images/min/".$typ."/".$result->cesta."")-1; // vypíše se název MZCHÚ a pomocí cyklu for se vypíšou všechny fotografie echo "<h1>".$result->nazev."</h1><br />"; if ($pocet!= -1) { for ($i=1;$i<$pocet;$i++ ) { echo "<a href='./images/max/".$typ."/".$result->cesta."/".$i.".jpg' >"; echo "<img src='./images/min/".$typ."/".$result->cesta."/".$i.".jpg'/>"; echo "</a>"; }} Zdrojový kód. č.7 Skript, který generuje obsah všech fotogalerií vstupní proměnné jsou přebrány z url. Pro publikování 360 snímků je využito vlastností HTML5 elemntu <canvas>. Pomocí skriptu [24] je na plátno z daného adresáře na serveru volán připravený JPEG. Uživateli je umožněn neomezený pohyb okolo osy x a y a může si tak z jednoho bodu prohlédnout celé území. Nepřítomnost Flash přehrávače sice limituje uživatele používající webové prohlížeče bez podpory HTML5, ale na druhou stranu je stránka nezávislá na Flash pluginu a je spustitelná napříč všemi platformami. 37
Obr. č.16 Ukázka 360 snímku, se kterým lze tahem myši manipulovat. Pro publikování geolokalizovaných fotografií je využito Google Maps API tato část byla vytvořena v rámci bakalářské práce Jana Kubného [10]. Zdrojové kódy byly upraveny a přizpůsobeny pro jejich implementaci ve Virtuální studovně. 38
4.6 Administrace webu Celá Virtuální studovna je zpřístupněna na třech úrovních autorizace. Běžnému uživateli bez přihlášení jsou zpřístupněny veškeré části studovny, ale nemá možnost ukládat si vlastní poznámky (odkazy, texty, nápady), přidávat nové fotografie a stahovat prostorová data, tak jako návštěvník studovny přihlášený pod rolí uživatel. Nejvyšší práva jsou přiřazená roli admin. Administrátor má navíc přístup k editaci textů, správě dokumentů a správě všech uživatelů. Obr. č.17 Nástrojová lišta pro správu Virtuální studovny přístup s roli admin. 4.6.1 Editace textů Tato sekce je přístupná uživateli přihlášeného pod roli admin a umožňuje libovolně editovat texty na následujích stránkách: úvodní stránka (index.php), popis území (mzchu.php), dokumenty (dokumenty.php), o projektu (o_projektu.php) a stránky všech jednotlivých MZCHÚ (mzchu.php). Texty jsou uloženy v databázové tabulce texty. Funkčnost je zaručena php skriptem, který nejprve načte názvy všech editovatelných položek. Po kliknutí na odkaz editovat jsou z knihovny edit_text.php volány funkce, které slouží k jednotlivých krokům editace 39
textu. Nejprve je ve formuláři zobrazen stávající text, který je možné editovat. Po stisknutí tlačítka Uložit je upravený text zobrazen v náhledu ke kontrole. V tuto chvíli má administrátor možnost provést jak krok zpět, a po stiknutí tlačítka Editovat se vrátit na předchozí formulář, tak již text definitivně uložit do databáze (tlačítko Uložit). V php jsou jednotlivé fáze rozděleny pomocí přepínače switch, který volá konkrétní funkci dle toho, jaké tlačítko bylo stisknuto. Pro uživatelsky příjemnější editaci textu je využita knihovna CKEditor WYSIWYG (What You See Is What You Get) editor psaný nad knihovnou JQuery. Nástrojová lišta nabízí možnost následujících úprav tučné písmo, kurzíva, podtržení textu, číslovaný a nečíslovaný seznam, vložení/zrušení odkazu a zobrazení zdrojového kódu v HTML. 4.6.2 Správa dokumentů Pro správu dokumentů uložených ve file systému na serveru je využita knihovna elfinder, která je blíže popsána v kapitole 5.4.1. Skript, který zajišťuje volání této knihovny nastaví plná práva (čtení/zápis/mazání) uživatele s roli admin a zpřístupní v nástrojové liště nástroje jako nová složka, nahrát soubor, přejmenovat apod. 4.6.3 Správa fotografií Sekce nabízí dvě základní funkce vkládání nových a mazání existujících fotografií. Vždy se jedná o geolokalizované fotografie, které se zobrazují v mapě (viz. konec kapitoly 5.5.2) Vkládání nových fotografií: Pro vkládání fotografií je využito skriptů vytvořených v rámci bakalářské práce Jana Kubného [zdroj]. Zdrojové kódy byly upraveny a přizpůsobeny pro jejich implementaci ve Virtuální studovně. Nové fotografie jsou uloženy ve složce obrázky v kořenovém adresáři webových stránek. Každá fotografie je uložena ve třech velikostech miniatura, náhledová a originální. Miniaturní a náhledové fotografie jsou opatřeny pruhem s copyright textem. Mazání existujících fotografií: Pro mazání jednotlivých fotografií nebylo využito skriptů práce Jana Kubného [10], ale byl vytvořen nový jednodušší a přehlednější php skript. Ten zpracovává všechny 40
geolokalizované fotografie, které jsou na serveru uloženy ve složce obrázky a informace o nich v databázi MySQL (tabulky images_markers_info a images_markers). Skript ze souboru admin_foto.php vypíše pomocí cyklu while všechny záznamy uložené v databázové tabulce images_markers_info a sestaví přehled všech fotografií, které je možné smazat. Po stisknutí tlačítka smazat a bezpečnostního potvrzení, je asynchronně volán (pomocí JQuery funkce.post() ) skript delete_foto.php, který provede vymazání souborů, záznamu v tabulce images_markers_info, a v případě, že je to jediná fotografie z daného místa, tak také záznamu tohoto místa v tabulce images_markers. // AJAX zasílá pomocí.post proměnnou foto, která obsahuje id fotky // určené k smazání $id_foto = $_POST['foto']; // připojení k databázi include './database.php'; mysql_query("set NAMES 'utf8'"); // z databáze zjistíme další informace o fotce a uložíme do proměnných $sql = mysql_query ("SELECT id_info, cesta, cesta_s, cesta_o FROM images_markers_info WHERE id = ".$id_foto.""); $result = mysql_fetch_object($sql); $id_info = $result->id_info; $cesta = $result->cesta; $cesta_s = $result->cesta_s; $cesta_o = $result->cesta_o; // spočítáme, kolik fotek je uloženo ve stejném místě v mapě $sql = mysql_query ("SELECT count(id_info) as pocet FROM images_markers_info WHERE id = ".$id_info.""); $result = mysql_fetch_object($sql); $pocet = $result->pocet; 41
// Pokud k danému místu v mapě neexistuje žádná fotografie, tak toto // místo vymažeme, aby se nezobrazovalo v mapě s prázdným info window if ($pocet == 1) { $sql = mysql_query ("DELETE FROM images_markers WHERE id = ".$id_info.""); } // vymažeme záznam o fotce v databázi $sql = mysql_query ("DELETE FROM images_markers_info WHERE id = ".$id_foto.""); // smažeme soubory na disku serveru unlink('../'.$cesta.''); unlink('../'.$cesta_o.''); unlink('../'.$cesta_s.''); Zdrojový kód. č.8 PHP skript zajišťující vymazání geolokalizovaných fotografií.. 4.6.4 Stažení geodat Pro autorizované uživatele je k dispozici rozhraní pro stahování prostorových dat (zip archívy), která jsou k lokalitě CHKO Litovelské Pomoraví volně k dispozici. Seznam všech tématických vrstev je generován automaticky podle toho, jaké zip archivy jsou uloženy ve složce geodata. Hlavní administrátor tak může data libovolně doplňovat a přitom nemusí zasahovat jakkoli do zdrojového kódu webu či vytvářet databázové záznamy. // nastavení cesty k adresáři $adresar = opendir("./files/geodata"); // cyklus while z adresáře vypíše všechny soubory a v názvu ořeže příponu.zip 42
while ($soubor = readdir($adresar)){ if(strlen($soubor) > 4) { $soubor_nazev = str_replace(".zip", "", $soubor); echo "<tr><td class='td_out'>".$soubor_nazev."> a href='./files/geodata/".$soubor."'>stáhnout</a> </td></tr>"; }} Zdrojový kód. č.9 PHP skript zajišťující výpis všech geodat ke stažení. 4.6.5 Správa uživatelů Tato sekce je zpřístupněna pouze uživateli s plnými právy a umožňuje vytvářet nové uživatele a mazat uživatele stávající. Pro vytváření nových uživatelů slouží jednoduchý formulář, kde je nutno vyplnit nové uživatelské jméno, přidělit heslo, email a práva. Pro zpracování této registrace a vytvoření nových záznamů v databázové tabulce admin slouží knihovna funkcí add_user.php. Mazání stávajících uživatelů probíhá obdobně jako u mazání fotografií (viz. kapitola 5.6.3), kdy je asynchronně (AJAX) volán serverový skript uložený jako delete_user.php, který provede požadovanou operaci. 4.6.6 Moje poznámky Každý přihlášený uživatel má k dispozici virtuální nástěnku, kde si může připínat vlastní textové poznámky, jež má při každém přihlášení k dispozici. Rozhraní pro jejich vytváření je velmi jednoduché a intuitivní. Uživatel stisknutím tlačítka přidat poznámku vytvoří rámeček, kde může psát libovolný text. Také jej může tažením myši přesouvat po celé ploše webu a měnit jeho velikost. Každý krok je automaticky zaznamenán a uložen. Technicky je tato sekce řešena pomocí JQuery knihovny Sticky-Notes, která je volně dostupná z [http://www.jquery-sticky-notes.com] a umožňuje vytvářet poznámky 43
v prostředí webu. Tato knihovna je však určena pouze pro jednorázový přístup k webové stránce, bez možnosti uložení dat pro návrat. Tato možnost uchování poznámek a všech jejich parametrů (text, výška, šířka, pozice x, pozice y, autor), byla doprogramována pro použití Sticky-Notes ve Virtuální studovně. JavaScript, který zaznamenává každou změnu jednotlivých parametrů, asynchronně odesílá po každé této změně data na server, kde jsou dále zpracována skriptem poznamky_backend.php. Tento PHP skript nejprve rozezná k jaké změně došlo a uloží jí do databázové tabulky poznamky. V databázi jsou data uložena z důvodu toho, aby byly poznámky uchovány i pro další přihlášení uživatele k práci ve Virtuální studovně. Poznámky jsou z databáze načteny ve chvíli, kdy uživatel otevře stránku poznamky.php. Obr. č.18 Náhled na stránku Moje Poznámky dostupné jen po přihlášení. 44