ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE Fakulta stavební Katedra mapování a kartografie Tvorba webové aplikace s virtuálními prohlídkami památek v Praze 153PIN2 Projekt - Informatika 2 SKUPINA D Petra Svobodová Tereza Pantůčková Renata Duchnová Praha 2012
Obsah 1 Úvod 1 1.1 Cíl projektu................................... 1 2 Popis aplikace 2 2.1 Úvodní stánka (Zobrazení na mapě)...................... 2 2.2 Virtuální prohlídka............................... 2 2.3 Vyhledání dle parametrů............................ 2 2.4 Vytvoření účtu................................. 3 2.5 Správa prohlídek................................ 3 2.5.1 Editace prohlídky............................ 3 3 Databáze 4 3.1 Tvorba databáze................................ 4 3.2 Uspořádání databáze.............................. 4 4 Implementace aplikace 6 4.1 Nette....................................... 6 4.2 MVC....................................... 6 4.3 Google Maps.................................. 7 4.4 PTViewer.................................... 7 4.5 Adresářová struktura.............................. 7 4.6 Požadavky.................................... 8 4.6.1 Požadavky na server.......................... 8 4.6.2 Požadavky na straně klienta...................... 9 4.7 Vzhled aplikace................................. 11 5 Vytvoření virtuálních prohlídek 12 5.1 Výběr dat.................................... 12 5.2 Sběr potřebných dat.............................. 12 5.3 Vytvoření panoramatické fotografie...................... 12 6 Závěr 13 Obrazová příloha 14 Reference 18 i
1 Úvod 1.1 Cíl projektu Cílem projektu bylo vytvořit webovou aplikaci poskytující virtuální prohlídky architektonicky významných nebo zajímavých staveb Prahy, posléze i ostatních měst či států. Pro výběr staveb byla použita část seznamu Architektonicky významné stavby kategorie A [1], jenž je součástí dokumentu Architektonicky cenné stavby a soubory. Tento dokument si nechal vypracovat v roce 2007 Útvar rozvoje hl. m. Prahy Doc. Ing. arch. Radomírou Sedlákovou, CSc. Jednotlivé prohlídky byly realizovány pomocí spojení panoramatických fotek a pak následně vizualizovány pomocí JavaAppletu PTViewer 2.8 [2]. Poloha prohlídek byla zobrazena na interaktivní mapě od společnosti Google. [3] Výsledná aplikace byla doplněna o možnost zaregistrování se a přidání nové prohlídky. 1
2 Popis aplikace 2.1 Úvodní stánka (Zobrazení na mapě) Při načtení aplikace se zobrazí úvodní stránka obsahující menu, přihlašovací formulář, formulář jednoduchého vyhledávání, seznam všech dostupných staveb a interaktivní mapu. Menu je rozděleno do čtyř záložek - Zobrazení na mapě, Vyhledávání dle parametrů, Vytvoření účtu a O projektu. Po přihlášení pomocí formuláře se záložka Vytvoření účtu zneviditelní a zobrazí se záložka Správa prohlídek. Jednotlivé stavby lze vyhledat v jednoduchém formuláři, kde se zadá celý název nebo jeho část. Vyhledané stavby se pak zobrazí pod tímto formulářem. Implicitně je pod vyhledávacím formulářem seznam všech staveb. U každé položky je zobrazen název, odkaz M ukazující na mapu a odkaz P ukazující na prohlídku. Další možností je ruční výběr z mapy - kliknutí na značku. Po tomto kliknutí se zobrazí bublina s názvem stavby, zmenšeninou panoramatické fotografie a odkazem na prohlídku. 2.2 Virtuální prohlídka Okno prohlídky se zobrazuje samostatně na šedivém pozadí po kliknutí na P nebo kliknutím na odkaz v bublině v mapě. Okno obsahuje kruhovou prohlídku, lze se pohybovat do stran, přibližovat se a oddalovat. Pod prohlídkou jsou zobrazeny podrobné informace o stavbě. U každé budovy je zobrazen stavební styl, období stavby, jméno stavitele, adresa, dále pak popis, historie stavby a zdroj, odkud byly informace čerpány. 2.3 Vyhledání dle parametrů Tato záložka obsahuje rozšířený vyhledávací formulář. Lze vyplnit libovolné políčko nebo vybrat libovolnou hodnotu z roletových menu. I zde lze zadat část názvu, část adresy nebo část názvu obce. Lze vyhledávat podle roku dokončení stavby, před nebo po roce dokončení stavby. Pokud se nezadá žádná hodnota, vyhledají se všechny stavby, které jsou uspořádány do úhledné tabulky. V tabulce je zobrazen název, stavební styl, období stavby, jméno stavitele, adresa a také odkazy M a P. Po kliknutí na P je uživatel přesměrován na virtuální prohlídku daného objektu. Při kliknutí na M se zobrazí úvodní stránka s mapou přiblíženou na daný objekt a s vyhledanými stavbami zobrazenými pod jednoduchým formulářem. Ke zrušení výběru slouží tlačítko Vynulovat. 2
2.4 Vytvoření účtu K vytvoření účtu slouží formulář obsahující jméno a příjmení, přihlašovací jméno a heslo, telefonní číslo, e-mailová adresa a bydliště. Všechny údaje jsou povinné. 2.5 Správa prohlídek Po přihlášení ke svému uživatelskému účtu se záložka Vytvoření účtu změní na záložku Správa prohlídek. Tato záložka má dvě části. V horní části je přidání nové prohlídky. Pro úspěšné uložení prohlídky je nutné vyplnit název objektu, rok počátku a ukončení stavby, architektonický styl, jméno stavitele a adresu. Kliknutím do mapy se do příslušných políček vyplní zeměpisné souřadnice. Nakonec je nutné načíst panoramatickou fotografii ve formátu *.jpg, *.png nebo *.gif. Volitelně může uživatel vyplnit i popis objektu a zdroj použitých informací. V případě, že uživatel nenajde mezi nabízenými staviteli stavitele daného objektu, může ho přidat do databáze. Formulář pro přidání nového stavitele do databáze se uživateli zobrazí po kliknutí na odkaz Stavitel chybí v databázi. V dolní části je přehled prohlídek daného uživatele. Zde může uživatel svoji prohlídku editovat nebo smazat. 2.5.1 Editace prohlídky Každou svoji přidanou prohlídku může uživatel editovat. K tomu slouží formulář velmi podobný formuláři pro přidání prohlídky. Měnit lze cokoliv, ale je nutné mít vyplněna políčka název objektu, rok počátku a ukončení stavby, architektonický styl, jméno stavitele, adresu objektu a polohu v zeměpisných souřadnicích. Uživatel může změnit fotografii objektu, pokud zde však žádnou nezadá, zůstane aktivní původní fotografie. 3
3 Databáze Informace o stavebních objektech byly čerpány z textu Architektonicky významné stavby kategorie A [1]. K uložení a správě těchto dat byla využita databáze MySQL. 3.1 Tvorba databáze Naplnění a úprava databáze byla nejprve prováděna na lokálním počítači v programu Wampserver v. 2.1. Tento program obsahuje webový server Apache a databázový server a je určen pro vývoj webových aplikací. Poskytuje i užitečný nástroj s názvem phpmyadmin, který umožňuje práci s databází přes přehledné uživatelské rozhraní. Databázové tabulky byly nejprve naplněny v programu Microsoft Excel a následně importovány do programu WampServer, nástroje phpmyadmin. Zde byly nastaveny relace mezi tabulkami, kódování, a vlastnosti jednotlivých atributů. Nakonec byla z programu vyexportována sql dávka, která byla spuštěna na databázovém serveru k naplnění ostré databáze (dávka je přiložena jako samostatný soubor). 3.2 Uspořádání databáze Databáze je tvořena 5 tabulkami s následujícími atributy: tabulka d12 pamatka: id - INT(11), UNSIGNED, PRIMARY KEY nazev - VARCHAR(255) rok pocatek - INT(11) rok konec - INT(11) d12 styl id - INT(11), UNSIGNED, KEY ulice - VARCHAR(255) mest cast nazev - VARCHAR(255) mest cast praha - VARCHAR(255) lat - DECIMAL(8,6) lon - DECIMAL(8,6) prohlidka zmensena - VARCHAR(255) prohlidka velka - VARCHAR(255) 4
popis - TEXT zdroj - TEXT d12 uzivatel id - INT(11), KEY cas vlozeni - INT(11) cas zmeny - INT(11) tabulka d12 spojovaci: d12 pamatka id - INT(11), UNSIGNED, PRIMARY KEY, KEY d12 stavitel id - INT(11), UNSIGNED, PRIMARY KEY, KEY tabulka d12 stavitel id - INT(11), UNSIGNED, PRIMARY KEY jmeno - VARCHAR(255) tabulka d12 styl id - INT(11), UNSIGNED, PRIMERY KEY nazev - VARCHAR(255) tabulka d12 uzivatel id - INT(11), UNSIGNED, PRIMARY KEY username - VARCHAR(255) heslo - TEXT jmeno - VARCHAR(255) prijmeni - VARCHAR(255) mail - VARCHAR(255) telefon - VARCHAR(255) ulice - VARCHAR(255) cp - INT(11) mesto - VARCHAR(255) psc - VARCHAR(10) Na následujícím obrázku jsou znázorněny relace mezi tabulkami. 5
4 Implementace aplikace 4.1 Nette Tato aplikace byla implementována s využitím frameworku Nette v. 2.0. Tento framework je open-source nástroj sloužící k vytváření webových aplikací v PHP 5. Nette je vyvíjeno českou komunitou Nette Foundation a je zaměřeno na vysoký výkon a eliminaci bezpečnostních rizik. Využívá architekturu MVC (Model-View-Controller), která zaručí přehlednost kódu a možnost snadného rozšíření aplikace v budoucnu. 4.2 MVC MVC architektura rozděluje kód aplikační logiky (model), kód zobrazující data (view) a kód řídící logiky (controller). V Nette jsou na základě této architektury soubory se zdrojovými kódy aplikace rozčleněny do adresářů. Model je této aplikaci reprezentován souborem Model.php (v adresáři app/models/ ) s třídou Model, jejíž metody přistupují do databáze (provádějí výběry, vkládání i mazání dat). View je v Nette tvořen soubory v adresáři app/templates/. Tyto soubory mají příponu *.latte a jejich syntaxe je podobná syntaxi jazyka HTML. Úkolem vrstvy view je definovat vzhled jednotlivých stránek aplikace a zobrazit data. Controller v Nette tvoří tzv. presentery, které jsou uloženy v adresáři app/presenters/. Presentery na základě požadavku uživatele volají aplikační logiku z modelu a předávají data do vrstvy view. 6
4.3 Google Maps Na stránkách aplikace jsou zobrazeny mapy od společnosti Google. K vložení a ovládání map byly využity funkce definované v Google Maps Javascript API V3. Tyto funkce jsou volány v souborech maps.js a vedit.js. Dokumentace Google Maps Javascript API V3 je dostupná na stránkách [4]. 4.4 PTViewer Zobrazení panoramatické fotografie objektu ve virtuální prohlídce obstarává open source JavaApplet PTViewer 2.8. Je to program, který umožňuje zobrazovat sférické a cylindrické panorama v plném rozsahu (360 horizontálně a 180 vertikálně). Vstupem do programu je panoramatická fotografie v epirectangulární projekci. Zobrazení fotografie lze ovlivnit nastavením parametrů jako například: fov... počáteční velikost zorného pole tilt... počáteční vertikální úhel pan... počáteční vodorovný úhel fovmin... minimální zorný úhel fovmax... maximální zorný úhel Ze stránek JavaAppletu [2] byl stažen soubor ptviewer.jar, který byl uložen ve veřejném adresáři. Applet je pak volán v souboru view.js, kde jsou dále nastaveny parametry zobrazení virtuální prohlídky a cesty k fotografiím objektů. 4.5 Adresářová struktura Adresářová struktura naší aplikace je následující: app/ config/ config.neon models/ presenters/ templates/ web.config/... hlavní konfigurační soubor... adr. reprezentující vrstvu model... adr. reprezentující vrstvu controller... adr. reprezentující vrstvu view... konfigurační soubor webové aplikace 7
bootstrap.php/ css/ images/ js/ libs/ log/ temp/ index.php ptviewer.jar web.config... zaváděcí soubor aplikace... adr. se soubory s kaskádovými styly... obsahuje panoramatické fotografie a jiné obrázky použité v aplikaci... adr. pro JavaScript... adr. se zdrojovými kódy Nette frameworku... adr. pro ukládání souborů s informacemi o běhu aplikace... adr. pro dočasné soubory... soubor spouštějící aplikaci... JavaApplet pro virtuální prohlídky... konfigurační soubor webové aplikace 4.6 Požadavky Pro bezproblémový běh aplikace je třeba splnit následující požadavky. 4.6.1 Požadavky na server Nette framework klade určité požadavky na prostředí webového serveru. Splnění minimálních požadavků lze jednoduše zkontrolovat pomocí nástroje Requirements Checker, který je součástí distribučního balíčku Nette. Stačí pouze nakopírovat složku tools/requirements- Checker na server a zadat v prohlížeči cestu k souboru Requirements-Checker/checker.php. V prohlížeči se následně zobrazí informace, zda server požadavky splňuje nebo ne, a výpis následujících požadavků [5]: verze PHP - minimálně verze PHP 5.2.0, doporučuje se však použít verzi PHP 5.3.htaccess file protection - kontroluje, zda lze pomocí.htaccess zakázat přístup do chráněných složek.htaccess mod rewrite - kontroluje, zda je k dispozici mod rewrite pro routování function ini set() - přítomnost této funkce je důležitá z bezpečnostních důvodů function error reporting() - přítomnost této funkce je důležitá z bezpečnostních důvodů function flock() - vyžaduje se cache register globals - nebezpečná konfigurační direktiva PHP, která musí být vypnutá 8
zend.ze1 compatibility mode - kompatibilita s PHP 4, musí být vypnutá session auto-start - musí být vypnuté z bezpečnostních důvodů reflection extension - extenze PHP vyžadovaná frameworkem SPL extension - extenze PHP vyžadovaná frameworkem PCRE extension - extenze PHP vyžadovaná frameworkem ICONV extension - extenze PHP vyžadovaná frameworkem PHP tokenizer - extenze PHP vyžadovaná frameworkem PDO extension - extenze PHP vyžadovaná Nette/Database multibyte String extension - extenze PHP vyžadovaná funkcemi Strings::lower() a upper() multibyte String function overloading - nebezpečná konfigurační direktiva PHP, musí být vypnutá memcache extension - extenze PHP podporovaná úložištěm cache GD extension - extenze PHP vyžadovaná Nette/Image bundled GD extension - extenze PHP vyžadovaná metodami Nette/Image::filter() a rotate() fileinfo extension or mime content type() - funkce používané k MIME-type detekci uploadovaných souborů Nástrojem Requirements Checker bylo zkontrolováno i nastavení serveru geo102.fsv.cvut.cz a výpis z kontroly je na obrázku 1. Z výpisu je patrné, že server požadavky splňuje. Nastavení extenzí memcache extension a bundled GD extension neodpovídá doporučenému nastavení, ale to nijak neovlivňuje chod naší aplikace. Kromě webového serveru je potřeba i databázový server. V naší aplikaci používáme databázi MySQL. 4.6.2 Požadavky na straně klienta Požadavky na straně klienta jsou velice malé. Pro bezproblémové zobrazení našich stránek potřebuje mít uživatel nainstalovaný jakýkoli internetový prohlížeč a Java Runtime Environment, což je rozhraní potřebné pro spuštení JavaAppletu. 9
Obrázek 1: Výpis kontroly nastavení serveru 10
4.7 Vzhled aplikace Pro úpravu vzhledu byly použity Cascading Style Sheets, česky kaskádové styly (zkráceně CSS). Tato kolekce metod umožnila účinně oddělit vlastní zdrojový kód a kód stylu stránek. Zdrojové kódy jsou tak přehlednější. Díky použití CSS je vzhled jednotlivých stránek jednotný. 11
5 Vytvoření virtuálních prohlídek 5.1 Výběr dat Nejprve bylo nutné nalézt data pro zpracování. Pro výběr staveb byla použita část seznamu Architektonicky významné stavby kategorie A [1], jenž je část dokumentu Architektonicky cenné stavby a soubory sestavené Doc. Ing. arch. Radomírou Sedlákovou, CSc, který si nechal v roce 2007 vypracovat Útvar rozvoje hl. m. Prahy. 5.2 Sběr potřebných dat Sběr dat probíhal postupně. Nejprve byly památky pro přehlednost zakresleny do mapy Prahy, aby tak byla co nejvíce zvýšena efektivita práce. Poté byly jednotlivé památky navštíveny a fotografovány co nejvhodnějším způsobem tak, aby fotografie obsahovaly co největší možnou část památek (fotografie byly foceny na výšku ). Pro jednu kruhovou fotografii bylo nutné vyfotit nejméně deset jednotlivých snímků, které se přibližně z třiceti procent překrývaly. Při pořizování snímků nebylo možné brát ohled na dopravní situaci a osoby pohybující se v záběru, proto jsou na některých snímcích viditelné chyby (uříznutá auta apod.). Jelikož jde o zobrazení památek, byly tyto nedostatky shledány jako méněcenné. Nebyl využit stativ, snímky byly foceny z ruky, jelikož by to proces pořizování snímků značně prodloužilo. Pro dosažení památek byla využita městská hromadná doprava a pro pořízení snímků byly použity dva digitální fotoaparáty značky Nikon a Kodak. 5.3 Vytvoření panoramatické fotografie Po pořízení jednotlivých snímků bylo nutné vytvořit pro každou památku panoramatickou fotografii. K tomu byl použit program Hugin [6]. Vytvoření jednoho panoramatického snímku v programu Hugin probíhá tak, že jsou do programu nejprve načteny překrývající se snímky památky, načež jsou snímky zarovnány a je vytvořen jakýsi náhled budoucího panoramatu. V této fázi se upraví či doplní vygenerované kontrolní body spojující překrývající se snímky. Následně se z nastavených parametrů vytvoří konečné panorama. Vytvoření jednoho panoramatu trvá přibližně dvacet minut, protože je spojování více snímků v jednu fotografii výpočetně náročné. Poté se panoramata přeuložila do jiného formátu (program Zoner Photo Studio) a zmenšila, aby byla vhodnější pro využití v databázi. 12
6 Závěr V tomto projektu jsem se zabývali tvorbou webové aplikace, která umožňuje virtuální prohlídku některých zajímavých staveb v Praze. I když práce byla zajímavá, při tvorbě jsme se setkali s několika problémy. Jeden z problémů bylo vytvoření prohlídky z necelokruhových panoramatických fotografií. Použitý JavaApplet tyto fotografie značně zkreslil a vytvořil psychedelický efekt. Proto byly všechny tyto fotografie vyřazeny. Dalším problémem bylo nastavení webového serveru, na kterém je aplikace provozována. Po konzultaci s vyučujícím, nastavení příslušných přístupových práv a doinstalování všech potřebných extenzí byl problém úspěšně vyřešen. Současná verze aplikace dokáže zobrazit polohu objektů na mapě, popisné informace k objektům a virtuální prohlídky. Dále umožňuje vyhledávat podle parametrů. Registrovaný a přihlášený uživatel stránek může navíc spravovat informace ke svým objektům a přidávat nové objekty do databáze. Aplikace má však velký potenciál na její rozšíření. Jedná se jednak o libovolné rozšíření zájmového území, které je v současné době omezeno pouze na Prahu a její blízké okolí, teoreticky je ale možné přidat novou prohlídku z libovolného místa na Zemi. Zejména pak jde o rozšíření po stránce funkčnosti. V aplikaci by mohla být například přidána možnost správy osobních údajů uživatele, například změna hesla, kontaktních údajů apod. Webová adresa projektu: http://geo102.fsv.cvut.cz/pin2/2012/d/final 13
Obrazova pr ı loha Obra zek 2: Uvodnı stra nka Obra zek 3: Virtua lnı prohlı dka 14
Obrázek 4: Vyhledávání dle parametrů Obrázek 5: Vytvoření účtu 15
Obrázek 6: Přidání nové prohlídky Obrázek 7: Přidání nového stavitele 16
Obrázek 8: Úprava prohlídky Obrázek 9: O projektu 17
Reference [1] Architektonicky cenné stavby a soubory [online]. 2012 [cit. 2012-05-17]. Dostupné z WWW: < http://www.urm.cz/uploads/assets/uap pdf/uap prilohy k jevum/ 14 architektonicky cenne stavby a soubory text.pdf > [2] JavaApplet PTViewer 2.8 [online]. 2012 [cit. 2012-05-17]. Dostupné z WWW: < http://www.fsoft.it/panorama/ptviewer.htm > [3] Google Maps [online]. 2012 [cit. 2012-05-17]. Dostupné z WWW: < http://maps.google.cz/ > [4] Google Maps Javascript API V3 [online]. 2012 [cit. 2012-05-17]. Dostupné z WWW: < https://developers.google.com/maps/documentation/javascript/reference > [5] Požadavky Nette Framework [online]. 2012 [cit. 2012-05-17]. Dostupné z WWW: < http://doc.nette.org/cs/requirements > [6] Hugin - Panorama photo stitcher [online]. 2012 [cit. 2012-05-24]. Dostupné z WWW: < http://hugin.sourceforge.net/ > 18