FAKULTA STAVEBNÍ Katedra mapování a kartografie

Transkript

1 ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA STAVEBNÍ Katedra mapování a kartografie DIPLOMOVÁ PRÁCE Tvorba nástrojů pro interaktivní práci s virtuálním modelem zámeckého barokního divadla v Českém Krumlově Petr VOLDÁN

2 I Prohlášení Prohlašuji, že jsem svou diplomovou práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Praha prosinec 2007 V Praze dne podpis

3 II Poděkování Rád bych na tomto místě poděkoval všem lidem, kteří vstoupili do mého života a tak spoluvytvářeli toho kým jsem. Největší poděkování ovšem patří mé rodině za podporu poskytnotou jak při studiu, tak i v celém mém životě. Zároveň bych chtěl poděkovat vedoucímu diplomové práce Ing. J. Hodačovi Ph.D. za jeho čas a cenné rady poskytované při práci na tomto projektu. Za poskytnutou finanční podporu patří též poděkování Nadaci barokního divadla zámku Český Krumlov.

4 III Anotace Tato práce je součástí projektu Živé divadlo a jejím cílem je tvorba webové aplikace pro interaktivní práci s virtuálním modelem zámeckého barokního divadla v Českém Krumlově. Část práce je věnována použití vytvořených nástrojů nad obecným virtuálním modelem. V závěru se zabývá uživatelským testováním vytvořené aplikace a problematice použitelnosti webových stránek. Klíčová slova VRML, Virtuální realita, HTML, JavaScript, PHP, Použitelnost Annotation This diploma thesis is part of project Živé divadlo and its aim is creation web application for interactive work with virtual model castle theatre in Český Krumlov. Part of thesis is devoted to utilization created tools above common virtual model. At the close deal it with user s testing created application and problems usability web sites. Keywords VRML, Virtual reality, HTML, JavaScript, PHP, Usability

5 Obsah Seznam obrázků Seznam tabulek Úvod Výchozí situace, cíle práce Struktura práce Použité technologie Jazyk VRML Zápis scény pomocí uzlů Geometrická tělesa Elementární tělesa Množina povrchových plošek Translace B-spline plocha Možnosti v nastavení vzhledu objektů Barvou povrchu Texturou Výběr hlavních možností VRML Jazyk HTML Popis jazyka CSS kaskádové styly Obohacení formátovacích možností Formátování jen pomocí CSS JavaScript

6 OBSAH Výhody použití JavaScriptu Nevýhody použití JavaScriptu PHP Výhody použití PHP Nevýhody použití PHP MySQL Možné způsoby řešení Stanovené požadavky Tvorba VRML modelu Návrh webové aplikace Desktopová nebo webová aplikace? Java applet v Microsoft Internet Explorer Použití Cortona SDK Realizace Struktura webové aplikace, rozdělení pracovní náplně Pracovní náplň Úvodní stránka Testování softwaru Použití MS Internet Explorer Objekt navigator Stránka pro práci s virtuálními daty Generování stránky - architektura Indikace pohybu Zobrazení pozice avatara ve zmenšeném VRML modelu divadla 31 Zobrazení pozice avatara na schematickém plánu půdorysného a svislého řezu divadla Bublinová nápověda Popis grafického rozhraní Panel ovládání pohybu Virtuální svět Navigační panel

7 OBSAH Práce s vrstvami, ovládání nastavení, nápověda Použití webové aplikace pro obecný VRML model Testování použitelnosti Použitelnost Druhy testování Heuristické testování Uživatelské testování použitelnosti Skupinové testování - Focus groups Uživatelské testování použitelnosti - klasická metoda Uživatelské testování použitelnosti levná metoda Přípravné práce Slepé mapy Scénář, testované prvky a procesy Pohyb ve virtuálním světě Práce s vrstvami Navigační panel Zapamatovatelnost klíčových prvků Vyhodnocení testování Změny provedené na základě testování První testování Druhé testování Souhrn informací o testování Porovnání klasické a levné metody Závěr 53 Reference 55 A Slovníček pojmů 58 B Obsah přiloženého CD-ROM 60 C Instalace serverových částí aplikace Virtuální divadlo 61 3

8 OBSAH D Obecný model - příprava dat 63 4

9 Seznam obrázků 4.1 Schematické rozdělení webové aplikace Architektura aplikace D navigace - a) D navigace - b) Schématický plánek půsorysu jeviště Bublinová nápověda Aplikace Virtuální divadlo Panel ovládání pohybu Navigační panel Správa vrstev Ovládání nastavení Aplikace pro obecný model Slepá mapa Změny provedené po prvním testování webu Změny provedené po druhém testování webu

10 Seznam tabulek 4.1 Vlastnosti objektu navigator Porovnání klasické a levné metody testování

11 Kapitola 1 Úvod Rychlý vývoj informačních technologií v posledních letech dává možnosti, jak de facto od klávesnice stolního počítače poznávat místa i prostory, které jsou v ostatních případech běžnému návštěvníkovi nepřístupné či geograficky nedostupné. Z této myšlenky vychází i tato práce. Cílem bylo uchopit možnosti, které skýtá virtuální realita, nastínit možné řešení využitelnosti prostorových dat pro prezentaci v síti internet, a taktéž vytvořit aplikaci pro uživatelsky jednoduchou práci s libovolným virtuálním modelem. Vytvářená aplikace je primárně určena pro prezentaci dat v síti internet. Za prvé z důvodu charakteristiky zdrojových dat a také z důvodu stále silnější pozice a využitelnosti této celosvětové sítě. Zde bych také rád podotkl, že zmíněná webová aplikace vznikla ve spolupráci s kolegou Jiřím Mlavcem (konkrétní rozdělení pracovní náplně je uvedeno v kapitole 4.1.1) 1.1 Výchozí situace, cíle práce Na přelomu let se blížil ke konci vývoj konverzního programu doktoranda Ing. Radima Balíka, který umožňuje převod vektorových dat (výkresy CAD systémů), do formátu určeného pro uživatelsky jednodušší interpretaci 3D dat. Tímto cílovým formátem je jazyk VRML. Ten poskytuje základní možnosti pro práci s prostorovými daty každému uživateli, bez nutnosti použít speciální CAD 7

12 KAPITOLA 1. ÚVOD program pro vizualizaci. Další výhodou jazyka VRML je jeho snadné použití pro interaktivní práci se zájmovými daty. To znamená, že model ve formátu VRML lze jednoduše zobrazit v běžném internetovém prohlížeči, uživatel má možnost si data prohlížet, otáčet apod. Avšak i přes nesporné možnosti jazyka VRML, je míra využití rozsáhlých VRML modelů omezena funkcemi běžně rozšířených VRML prohlížečů (viz kapitola 2.1). Snahou tedy bylo vytvořit takové nástroje, které jednak umožní využít schopností VRML konvertoru vyvíjeného Ing. Radimem Balíkem, a také poskytnou uživateli nástroje pro: Orientaci v modelu Jednoduché možnosti pohybu Správu dat možnost zvolit jaká data budou zobrazena Protože tato diplomová práce navazuje na dlouhodobý projekt Živé divadlo, jehož cílem je vytvořit interaktivní informační systém pro správu zámeckého barokního divadla v Českém Krumlově, byla vyvíjená aplikace rozdělena do dvou úrovní: 1. Vývoj sofistikované aplikace pro práci s virtuálním modelem barokního divadla v Českém Krumlově 2. Tvorba obecných nástrojů pro použití na libovolný virtuální model Při práci na webové aplikaci byl také kladen důraz na to, aby vytvořené nástroje byly z uživatelského hlediska jednoduše pochopitelné a intuitivní. Konkrétní podoba stanovených požadavků je uvedena v kapitole Struktura práce Včetně této kapitoly, která podává základní informace o řešeném projektu, je celá práce rozdělena do šesti kapitol. Následující kapitola se snaží přiblížit dílčí technologie použité při vývoji aplikace. Jednotlivé návrhy pro řešení projektu jsou představeny v třetí kapitole. Čtvrtá kapitola se věnuje použitému řešení. Přibližuje 8

13 KAPITOLA 1. ÚVOD jednotlivé části vytvořené aplikace a zároveň je její snahou popsat hlavní vytvořené nástroje. Předposlední kapitola je věnována problematice použitelnosti a uživatelskému testování webových stránek. V poslední šesté kapitole je uvedeno shrnutí celého projektu, přičemž jsou zmíněneny i možnosti dalšího vývoje tohoto projektu. 9

14 Kapitola 2 Použité technologie Tato kapitola popisuje dílčí technologie použité při vývoji webové aplikace Virtuální divadlo. Jednotlivé sekce podávají jen schematický pohled a souhrn vlastností konkrétních technologií. 2.1 Jazyk VRML VRML Virtual Reality Modelling Language můžeme podle [24] definovat jako jazyk umožňující tvorbu prostorových objektů a jejich skládání ve funkční 3D scény. Jeho snahou je popsat virtuální svět téměř stejně věrohodně, jako lidé vnímají reálný svět svými smysly. Umožňuje návštěvníkovi volný pohyb všemi směry, prohlížení objektů či dokonce umožňuje v některých případech měnit jejich tvar nebo pozici. VRML je otevřený, standardizovaný formát a zdrojový kód popisující jednotlivé objekty je uložen v textových souborech, které mohou být z hlediska úspory dat při přenosu v síti komprimovány. K prezentaci dat slouží různé prohlížeče, které jsou schopny převést textový popis modelu do obrazu virtuální reality. Nejčastěji se používají přídavné plug-ins do některého z internetových prohlížečů, například: Cortona, CosmoPlayer, WorldView, Blaxxun Contact. Jak už bylo zmíněno, scéna pro zobrazení virtuální reality je zapsána jako běžný textový soubor tento soubor musí mít koncovku *.wrl (popř. po komprimaci koncovku *.wgz). Pro popis a umístění objektů ve scéně jazyk VRML používá 10

15 KAPITOLA 2. POUŽITÉ TECHNOLOGIE běžný ortogonální kartézský souřadnicový systém. Základní délkovou jednotkou je metr a úhlovou jednotkou je radián Zápis scény pomocí uzlů Scéna VRML souboru je složena z jednotlivých uzlů (node). Tyto uzly je možno uspořádat do stromové struktury, čímž lze definovat tzv. rodičovské uzly (které stojí ve stromové hierarchii výše) a jejich potomky (stojící ve stromové struktuře níže). Toto členění se uplatní ve chvíli, kdy změníme některý z parametrů (poloha, otočení) rodičovského uzlu tím ovlivníme také chovaní všech jeho potomků. Obecnou definici jednotlivého uzlu lze zapsat: DEF jméno_uzlu typ {parametry,...definice potomků} kde: Jméno uzlu je nepovinný atribut, kde příkazem DEF lze jednotlivému uzlu nebo stromové struktuře přiřadit název, který slouží k jeho identifikaci. Následně lze pouze příkazem USE znovu výše definovaný uzel (stromovou strukturu) použít. Jméno uzlu musí začínat velkým písmenem (VRML rozlišuje malá a velká písmena), nesmí začínat číslicí a nesmí obsahovat mezery. Typ Tvarové uzly jsou takové, které přímo definují vykreslované objekty. Skupinové uzly (Transform, Group) umožňují seskupit dílčí uzly do většího celku, s kterým lze posléze pracovat jako s jediným uzlem. Parametry určují vlastnosti a chování objektu. Jsou povinné, ale pro každý parametr je definována implicitní hodnota, která je použita v případě, že zápis není proveden korektně. S využitím výše popsaných metod lze vytvořit válec (Cylinder), který bude potomkem skupiny LAMPICKA DEF LAMPICKA Transform { translation children [Shape { 11

16 KAPITOLA 2. POUŽITÉ TECHNOLOGIE } ] } geometry Cylinder { radius 2 height 4} Více o použití uzlů je uvedeno viz [1] Geometrická tělesa Jako základní stavební kameny pro tvorbu objektů ve VRML světě lze použít: Elementární tělesa Jazyk VRML podporuje tvorbu čtyř základních těles koule, kvádru, kužele a válce (Box, Sphere, Cone, Cylinder). Množina povrchových plošek Pomocí uzlu IndexedFaceSet lze vytvořit rovinné plochy o libovolném počtu vrcholů. Uzel obsahuje seznam souřadnic lomových bodů a seznam ploch, které jsou z těchto lomových bodů vytvořeny. Takto lze vytvářet formou polygonových sítí i obecné plochy. Translace Uzel Extrusion generuje těleso vzniklé translací rovinného profilu podél definované přímkové trajektorie. Podél trajektorie lze rovinný profil otáčet a měnit jeho měřítko. B-spline plocha V některých případech lze místo trojúhelníkové sítě použít B-spline plochu 2. řádu. Její nevýhodou jsou ovšem větší nároky na výpočet při zobrazování. Ucelený popis tvorby VRML světů je uveden v [1]. 12

17 KAPITOLA 2. POUŽITÉ TECHNOLOGIE Možnosti v nastavení vzhledu objektů Vzhled tělesa je definován v parametru appearance uzlu Shape a to pomocí dvou možností: Barvou povrchu Kromě základního nastavení barvy objektu lze nastavit i další parametry například barvu, kterou těleso odráží, nebo úroveň odrazu světla od tělesa. Chceme-li u válce uvedeného v kapitole docílit modrého povrchu: DEF LAMPICKA Transform { translation children [Shape { appearance Appearance { material Material { diffusecolor } } geometry Cylinder { radius 2 height 4} } ] } Texturou Textura umožňuje podle stanovených kriterií obalit těleso obrázkem, ornamentem nebo filmem. Takto lze dodat tělesům více realistický vzhled, avšak v některých situacích je výhodnější pro docílení reality použít pouze nastavení barvy materiálu. Nevhodné umístění nebo dokonce přehnané užití textur může vést v celkovém výsledku ke špatné názornosti. Využijeme-li předchozího příkladu tentokrát s tex- 13

18 KAPITOLA 2. POUŽITÉ TECHNOLOGIE turou:. appearance Appearance { texture ImageTexture { url "textura.jpg" } } geometry Cylinder { radius 2 height 4} Výběr hlavních možností VRML Ze široké škály možností jazyka VRML zde vybírám ty nejdůležitější: Detektory podávají informaci o pohybu návštěvníka v oblasti kolem zájmového objektu nebo nachází-li se objekt v zorném poli avatara. Manipulátory nástroje pro uživatele, které mu umožní pohybovat objektem ve scéně. Vkládání VRML souborů pomocí uzlu Inline lze k libovolnému VRML souboru připojit jiný VRML soubor. URL odkazy klikne-li uživatel na některého z potomků uzlu Anchor, VRML umožňuje přenést uživatele na umístění definované v parametru url. Cílem může být jiný VRML soubor, webová adresa nebo odkaz na libovolný soubor. LOD - Level Of Detail umožňuje odstupňovat zobrazované detaily na základě vzdálenosti avatara od tělesa. Použití skriptů rozšířením VRML o skripty na základě jazyka ECMAScript získáme nástroje, jak naprogramovat složitější události nad standardními uzly jazyka VRML. 14

19 KAPITOLA 2. POUŽITÉ TECHNOLOGIE 2.2 Jazyk HTML HTML je značkovací jazyk vyvinutý prvotně pro tvorbu dokumentů, přičemž postupem času se stal základním stavebním kamenem pro vytváření stránek v systému World Wide Web, který umožňuje publikaci stránek na Internetu. Je charakterizován množinou značek a jejich atributů pro danou verzi definovaných viz [22]. Při práci na projektu jsem s výhodou používal chytře členěných stránek Dušana Janovského viz [13], odkud jsem čerpal i pro následující popis jazyka HTML Popis jazyka Části textu dokumentu se uzavírají mezi jedinečné značky tzv. tagy. Ty určují význam a výslednou grafickou podobu dokumentu. Názvy jednotlivých značek se uzavírají mezi úhlové závorky < > a část textu uzavřeného mezi značkami tvoří tzv. element (prvek) dokumentu. Součástí obsahu elementu mohou být další vnořené elementy. Tyto značky lze rozdělit do dvou skupin: 1. značky párové rozlišujeme počáteční a koncové značky. Koncová značka má před názvem značky znak lomítko. Příklad pro označení odstavce: <p>text odstavce</p> 2. značky nepárové neobsahují žádný text. Například vložení obrázku nebo vykreslení vodorovné čáry. <hr> Tagy mohou obsahovat atributy popisující jejich vlastnosti nebo nesou jinou informaci (cíl odkazu, zdroj obrázku). Dokument v jazyku HTML má předepsanou strukturu: Označení typu dokumentu a verze HTML. Kořenový element počátek textu ve formátu HTML (značky <html> a </html>). Je nepovinný, ale je doporučeno ho používat. Hlavička elementu obsahuje metadata, která se vztahují k celému dokumentu. Definují např. název dokumentu, jazyk, kódování, klíčová slova, 15

20 KAPITOLA 2. POUŽITÉ TECHNOLOGIE popis, použitý styl zobrazení. Hlavička je uzavřena mezi značky <head> a </head>. Tělo dokumentu vlastní obsah stránky. Vymezuje se značkami <body> a </body> Příklad zdrojového kódu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <html> <head> <title>titulek stránky</title> </head> <!-- tělo dokumentu --> <body> <h1>nadpis stránky</h1> <p>toto je tělo dokumentu</p> </body> </html>} 2.3 CSS kaskádové styly Jedná se o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Jejich hlavním smyslem je oddělit definici vzhledu od struktury a obsahu dokumentu. CSS také nabízí rozsáhlejší formátovací možnosti než samotné HTML. Kaskádové styly lze použít různým způsobem a v různém rozsahu. Podle Prokopa [5] se v praxi nejčastěji uplatňují tři strategie použití: 1. obohacení formátovacích možností 2. formátování jen pomocí CSS 3. kombinací prvních dvou metod Pro popis těchto metod využiji opět [5]. 16

21 KAPITOLA 2. POUŽITÉ TECHNOLOGIE Obohacení formátovacích možností Základem je tradiční HTML dokument využívající značky starších norem jazyka (HTML 3.2, 4.0), včetně značek formátovacích (<font>, <b>, <i> atd.). Rozvržení stránky je tvořeno tabulkami (značky <table>, <tr> a <td>), jejichž atributy většinou určují i barvu písma a pozadí (atributy color a background prvku <td>) jednotlivých částí stránky. Kaskádové styly jsou použity pouze jako doplněk k dosažení těch formátovacích efektů, které standardními prostředky jazyka HTML vytvořit nelze. Nejčastěji se jedná např. o určení velikosti písma v pixelech, stylování formulářových prvků (barva, orámování a velikost tlačítek a vstupních polí) nebo dynamické efekty přechodu ukazatele myši nad odkazem (a:hover). Častá je též aplikace vlastností CSS pro stylování posuvníků. Při této strategii jsou stylové předpisy obvykle deklarovány přímo v jednotlivých prvcích atributem style. <p style="color: red">tento odstavec bude červený.</p> Výhody U webových dokumentů vytvořených tímto postupem lze dosáhnout shodného, resp. velmi podobného zobrazení ve všech zatím nejrozšířenějších prohlížečích, včetně prohlížečů zastaralých (MSIE4/Win, NN4). S postupným mizením starších prohlížečů a naopak s nástupem moderních zařízení (palmtopy, mobilní telefony) se tato výhoda neustále zmenšuje. Web-designér nemusí ovládat do detailů kompletní problematiku kaskádových stylů, vystačí s několika jednoduchými prvky. Nevýhody Vytvořené webové dokumenty jsou obvykle nevalidní (odporující platným normám). To sice obecně nemusí nejrozšířenějším prohlížečům vadit, nicméně obtížně se pak kontroluje, zda zdrojový kód neobsahuje skutečně závažné chyby. Mícháním formátovacích značek HTML a kaskádových stylů vzniká riziko defektního zobrazení, někdy vedoucího až k nepřístupnosti (nečitelnosti) obsahu. 17

22 KAPITOLA 2. POUŽITÉ TECHNOLOGIE Hlavní výhody CSS, tj. snadná správa dokumentu a přínosy oddělené struktury obsahu a formátování, lze využít jen ve velmi omezené míře. Dokumenty vytvořené touto metodou jsou nepřehledné a obtížně spravovatelné Formátování jen pomocí CSS Oproti předchozí, tato strategie využití kaskádových stylů spočívá v tom, že CSS svěříme veškeré formátování dokumentu, včetně rozvržení stránky a polohování jednotlivých prvků. Základem kvalitního návrhu stránky je v tomto případě perfektně strukturovaný zdrojový kód HTML. Kvalitní struktura kódu je zásadní jednak proto, že umožňuje nejefektivnější formy využití kaskádových stylů a jednak proto, že starší prohlížeče a některá další menšinová zařízení zobrazují ve skutečnosti jen prosté HTML, bez explicitního formátování. Výhody Obsah výsledných dokumentů je prakticky stoprocentně přístupný libovolným prohlížečem a zařízením. Rovněž umožňuje při pečlivém návrhu lépe pracovat s formátováním stránek pro tisk či s přístupností pro zdravotně postižené uživatele. Tato koncepce umožňuje jednoduchou modifikaci zdrojového kódu jak HTML dokumentu, tak stylového předpisu. Není problém tvořit alternativní stylové předpisy se zcela odlišným formátováním i rozmístěním jednotlivých prvků stránky. Tyto alternativní stylové předpisy mohou být určeny např. pro tisk nebo zobrazení na velmi malých displejích (mobilní telefony), případně pro volitelné zobrazení stránek uživatelem. Důsledné dodržování standardů umožňuje stoprocentní validaci dokumentů validátory HTML a CSS a omezuje tak riziko chyb. Díky respektování platných standardů, lze též předpokládat, že si dokumenty podrží svou praktickou využitelnost ještě po dlouhou dobu. 18

23 KAPITOLA 2. POUŽITÉ TECHNOLOGIE Nevýhody Metoda klade nároky na web-designéra, který musí znát chování pokročilých vlastností CSS. Grafický návrh stránek musí být podřízen možnostem současného stavu kaskádových stylů. Při realizaci složitějších grafických návrhů je třeba kompenzovat chyby v implementaci CSS, které se u prohlížečů projevují ve větší míře, než chyby ve vykreslování tradičního HTML kódu. Odlišné typy prohlížečů tak prezentují CSS rozdílným způsobem. 2.4 JavaScript JavaScript je mocný skriptovací jazyk, který je vložen do webových stránek pro jejich oživení a větší použitelnost. Z hlediska použití se jedná o klientský skript. To znamená, že se program odesílá se stránkou ke klientovi (prohlížeči) a teprve tam je vykonáván. Jedná se o objektově orientovaný jazyk, obsahuje tedy také metody a funkce, prostřednictvím kterých je možné ovlivnit údaje uložené v objektech. Skript může být obdobně jako u kaskádových stylů vložen přímo do webové stránky nebo může být umístěn v externích souborech. Příklad skriptu vloženého přímo do webové stránky, který do okna prohlížeče kromě HTML vypíše text: Ahoj světe <body> <p>toto je normální text stránky.</p> <script language="javasript"> document.write("ahoj světe"); </script> </body> V následující části jsou popsány výhody a nevýhody JavaScriptu, které zmiňuje Holzner v [4]. 19

24 KAPITOLA 2. POUŽITÉ TECHNOLOGIE Výhody použití JavaScriptu Ovládání stránky JavaScript umožňuje přistupovat ke všem prvkům na webové stránce a tak je ovládat, měnit apod. Dynamické HTML využití JavaScriptu pro dynamické HTML (DHTML), které představuje souhrn postupů od zpracování obrázku přes libovolné umístění prvků webové stránky až po speciální objekty (např. optické efekty) pro přetváření webových stránek za běhu. Ověřování vstupních dat při posílání dat na server umožňuje JavaScript ověřit, zda-li údaje vložené uživatelem jsou v požadovaném formátu. Ulehčení zaneprázdněným serverům zpracování programu v JavaScriptu probíhá až v prohlížeči návštěvníka. Jednoduché zpracování cookies 1 Nevýhody použití JavaScriptu Omezení klientem jelikož je JavaScript interpretován na straně klienta, může se stát, že prohlížeč bude mít problémy s vyhodnocením skriptu. Ne každý prohlížeč JavaScriptu rozumí a umí jej správně interpretovat. Uživatel může JavaScript zakázat Přístup k souborům (kromě cookies) pracovní prostor JavaScriptu je omezen jen a pouze na webový prohlížeč. Z bezpečnostních důvodů nemůže využívat sít ové připojení (může pouze přesměrovat prohlížeč na jinou stránku), nemůže spouštět aplikace, nemůže ukládat a číst data z disku. 2.5 PHP PHP (Hypertextový preprocesor) je skriptovací programovací jazyk, určený především pro programování dynamických internetových stránek. Na rozdíl od výše 1 cookies je malé množství dat, která jsou prohlížečem uložena na počítači uživatele viz [4] 20

25 KAPITOLA 2. POUŽITÉ TECHNOLOGIE popsaného JavaScriptu jsou PHP skripty prováděny na straně serveru, uživatel tak získá pouze výsledek jejich činnosti. Typický PHP skript obsahuje část normálního HTML kódu, ale také skripty programového kódu. PHP je nezávislý na platformě (skripty fungují bez úprav na mnoha různých operačních systémech). Obsahuje rozsáhlé knihovny funkcí pro zpracování textu, grafiky, práci se soubory a taktéž funkce pro přístup k většině databázových serverů viz [15]. Příklad skriptu, který do okna prohlížeče vypíše text: Ahoj světe <?php echo ("Ahoj, světe!");?> Výhody použití PHP PHP podporuje širokou řadu souvisejících technologií, formátů a standardů Jedná se o otevřený projekt s rozsáhlou podporou komunity PHP snadno komunikuje s databázemi, jako je MySQL, PostgreSQL a řada dalších Lze jej provozovat s většinou webových serverů a na většině dnes existujících operačních systémech PHP podporuje mnoho existujících poskytovatelů webhostingových služeb Nevýhody použití PHP Kdokoli má přímý přístup k serveru, může nahlédnout do vašich PHP skriptů Protože je PHP aktivně vyvíjen, v budoucích verzích jazyka se mohou některé funkce změnit nebo se mohou chovat jinak než dosud. 2.6 MySQL MySQL je jednoduchý databázový server ideální pro vytváření středně velkých aplikací. Její nespornou výhodou je snadná implementovatelnost (lze jej instalovat 21

26 KAPITOLA 2. POUŽITÉ TECHNOLOGIE na Linux, MS Windows, ale i další operační systémy), výkon a především se jedná o volně šiřitelný software. Oproti konkurenčním databázím obsahuje méně nástrojů, avšak tento nedostatek vyvažuje svou větší rychlostí. Jak už název napovídá, komunikace s databází probíhá pomocí jazyka SQL. Jednotlivé tabulky databáze jsou ukládány jako oddělený soubor v adresáři databáze. Následující příklad znázorňuje kombinaci PHP a MySQL (konkrétně připojení k databázi pomocí PHP): <?php $dbname= divadlo ; $dbuser= user ; $dbpass= heslo ; $dbserver= localhost ; $spojeni = MySQL_Connect($dbServer,$dbUser,$dbPass); MySQL_Select_DB($dbName); $userid = 15; $vysledek = MySQL_Query("Select * from database"); $row = mysql_fetch_array($vysledek); $jmeno = $row["name"]; echo $jmeno;?> 22

27 Kapitola 3 Možné způsoby řešení V této kapitole představím možné řešení problematiky, přičemž uvedu jejich klady a zápory. 3.1 Stanovené požadavky Hlavní požadavky na funkce a chování webové aplikace byly definovány takto: (v přehledu jsou uvedeny i změny provedené během vývoje aplikace) Základní požadavky na projekt Pro popis prostorových objektů bude použito jazyka VRML. Data ve formátu VRML budou poskytnuta od Ing Radima Balíka konverzí z vektorového modelu divadla. Vytvořit nástroje pro pohyb uživatele ve virtuálním světě. Schematicky zobrazovat pohyb uživatele ve virtuální scéně Zachovat členění objektů divadla na základě vrstev vektorového modelu. Upřesněné či pozměněné požadavky Vytvořit úvodní stránku projektu. Testovat konfiguraci uživatelova prohlížeče. Signalizovat aktivní (zobrazená) data. Vytvořit českou a anglickou verzi aplikace. 23

28 3.2 Tvorba VRML modelu KAPITOLA 3. MOŽNÉ ZPŮSOBY ŘEŠENÍ Jak již bylo uvedeno, vstupními daty pro vyvíjenou aplikaci jsou VRML data zájmového objektu. Podle Balíka [9] lze tvorbu obecného virtuálního modelu schematicky popsat v těchto bodech: 1. Zaměření objektu vhodnou geodetickou (fotogrammetrickou) metodou. 2. Konstrukce vektorového modelu na základě měřených dat. 3. Konverze prostorových vektorových dat na virtuální model objektu. Určujícím faktorem u všech těchto kroků je stanovení požadované přesnosti virtuálního modelu. Je potřeba zdůraznit, že s vyššími požadavky na přesnost velmi vzrůstá pracnost při zaměření či modelování vektorových dat. Především má ovšem vyšší přesnost za následek větší složitost VRML modelu, což může snížit rychlost zobrazovaní dat ve virtuálním světě. Na tomto místě je nutné uvést, že v současné době (prosinec 2007) máme k dispozici virtuální data pouze pro suterén, jeviště a hledište barokního divadla (tedy přibližně polovinu dat). Tento stav je způsoben problémy konverzního programu vyvíjeného Ing. Radimem Balíkem. 3.3 Návrh webové aplikace Následující podkapitoly uvádějí různé koncepce tvorby aplikace, které jsme zvažovali jak s kolegou Jiřím Mlavcem, tak i s Ing. Radimem Balíkem Desktopová nebo webová aplikace? Už jsem uvedl, že VRML je silný jazyk pro prezentaci prostorových dat v síti internet. Avšak je možné ho implementovat i do tradičních lokálních aplikací. To znamená pracovat s mocnějšími programátorskými nástroji, ovšem za cenu toho, že uživatel by byl nucen tuto aplikaci před prvním použitím instalovat. Zhoršena by byla i možnost jednoduché aktualizace. Z toho důvodu byla jako cílová platforma zvolena dnes celosvětově rozšířená sít internet. Výhody této volby lze shrnout do těchto bodů: 24

29 KAPITOLA 3. MOŽNÉ ZPŮSOBY ŘEŠENÍ Aplikace bude jednoduše přístupná pro každého, kdo má možnost být připojen k síti internet. Odpadá problematika aktualizace lokální aplikace stačí aktualizovat data na serveru. Možnost budoucího rozšíření Java applet v Microsoft Internet Explorer Další možností, kterou jsme zvažovali bylo použít prohlížeč Microsoft Explorer s plug-in Cortona VRML client a Java applet, přičemž vzájemnou komunikaci by zprostředkovávalo EAI (Enterprise application integration) rozhraní. Jako výhody tohoto řešení lze uvést: Cortona VRML client je ověřený produkt, který je stále vyvíjen. Nenáročná instalace (je potřeba nainstalovat pouze plug-in Cortona VRML client). Po vzájemné konzultaci jak s vedoucím práce, tak i s kolegou Jiřím Mlavcem jsme dospěli k závěru, že tato možnost nám nevyhovuje a to z důvodů: EAI rozhraní je funkční pouze s MSJVM 1, avšak od roku 2001 MSJVM není firmou Microsoft vyvíjena ani podporována. Nutnou podmínkou pro toto řešení je použití operačního systému Microsoft Windows a prohlížeče MS Internet Explorer. Jako zásadní důvod proti použití lze také uvést, že já ani kolega J. Mlavec jsme neměli základní zkušenosti jak s výše uvedenou technologií pracovat. 1 Microsoft Java Virtual Machine slouží ke spouštění aplikací napsaných v Javě na operačních systémech firmy Microsoft 25

30 KAPITOLA 3. MOŽNÉ ZPŮSOBY ŘEŠENÍ Použití Cortona SDK Cortona SDK - Software Development Kit (vývojové prostředí) umožňuje tvorbu jednoduchých 3D aplikací s využitím Cortona VRML client. Poskytuje nástroje, jak začlenit 3D technologie do různorodých aplikací vytvářených v systémech Visual C++, Visual Basic, Delphi. Samozřejmostí je použití vývojového prostředí při tvorbě webových stránek. Ve své podstatě se jedná o soubor instrukcí, kterými lze přistupovat k metodám a vlastnostem Cortona VRML client. Výhody plynoucí s použití této technologie: Jednoduché začlenění do webové aplikace Velké množství nástrojů po práci s virtuálním světem a Cortona VRML client Stabilita programu Cortona VRML client Snadná instalace (Cortona SDK dokonce umožňuje automatickou instalaci Cortona VRML client na pozadí webového prohlížeče) Nevýhody: Tato varianta je opět platformově závislá (je nutné použít Cortona VRML client, který je určen pro operační systém MS Windows) Cortona SDK je placený produkt. I přes výše uvedené nevýhody jsme rozhodli použít toto řešení. Důvodem byla jednak možnost zapůjčit Cortona SDK z katedry K375 (Výpočetní a informační centrum), ale především z důvodu možností a jednoduchého použití Cortona SDK při tvorbě webové aplikace. 26

31 Kapitola 4 Realizace V této kapitole rozeberu podrobněji podobu konečné realizace a představím technologické řešení pro jednotlivé části aplikace. Celý popis realizace je věnován webové aplikaci pro prezentaci barokního divadla v Českém Krumlově z toho důvodu jsem i celou aplikaci nazval Virtuální divadlo. V závěru kapitoly představím možné řešení jak použít vytvořenou aplikaci pro libovolný VRML model. 4.1 Struktura webové aplikace, rozdělení pracovní náplně S využitím obrázku 4.1, lze celou aplikaci Virtuální divadlo rozdělit na tyto části: 1. Úvodní stránka 2. Stránka pro práci s virtuálními daty (a) Panel pro ovládání pohybu avatara ve virtuálním světě. (b) Virtuální svět v tomto okně je zobrazován samotný model divadla. (c) Navigační panel informuje o aktuální pozici uživatele v divadle. (d) Ovládání nastavení, práce s vrstvami, nápovědou, K tomuto dělení mě vedla iniciativa rozdělit aplikaci do různých typů panelů, které by poskytovali ucelenou skupinu nástrojů či informací. 27

32 KAPITOLA 4. REALIZACE Obrázek 4.1: Schematické rozdělení webové aplikace Pracovní náplň Protože tvorba webové aplikace probíhala ve spolupráci s kolegou Jiřím Mlavcem, bylo nutné práci rovnoměrně rozdělit zásadním kriteriem byla naše znalost použitých technologií. V mém případě jsem se zaměřil na: použití HTML, kaskádových stylů a JavaScriptu pro vizuální podobu stránek aplikování poznatků uživatelského testování viz kapitola 5 vytvoření nápovědy indikaci pohybu uživatele tvorbu úvodní stránky Náplní J. Mlavce byla: práce na PHP skriptech generování záladního rozvržení celé VRML stránky využití Cortona SDK (nástroje pro nastavení prostředí a ovládání pohybu) vytvoření databáze a nástrojů sloužících pro správu vrstev tvorba instalačních funkcí 28

33 KAPITOLA 4. REALIZACE Zároveň je nutné podotknout, že popsané rozdělení není exaktní. U velkého množství funkcí se naše práce vzájemně prolínala, aby společně tvořila jednotný a ucelený komplex. 4.2 Úvodní stránka Jak již bylo zmíněno v kapitole 3.1 cílem projektu byla i tvorba úvodní stránky, která by plnila tyto úkoly: 1. Informovat uživatele jaké možnosti Virtuální divadlo nabízí 2. Testovat konfiguraci jeho softwaru 3. Zjistit jaké rozlišení monitoru návštěvník používá Testování softwaru Základní myšlenkou pro testování konfigurace je neumožnit uživateli prohlídku virtuálního divadla v případě, že nesplňuje níže uvedené požadavky. V případě jejich nesplnění je návštěvníkovi sděleno varování, že vstup není umožněn (současně je uveden důvod varování i informace jak tento problém vyřešit). Pro návštěvu virtuálního divadla musí být splněny tyto požadavky: nainstalován Cortona VRML client použit prohlížeč MS Internet Explorer 6 a vyšší povoleny cookies Použití MS Internet Explorer Cortona VRML client apriorně umožňuje použití i pro jiné prohlížeče jako Mozilla FireFox nebo Opera. Avšak ve vyvíjené aplikaci Virtuální divadlo fungovala Cortona VRML client korektně pouze v prohlížeči MS Internet Explorer. Protože se mně ani kolegovi J. Mlavcovi nedařilo tento problém odstranit, byli jsme nuceni ustoupit od svých požadavků a optimalozovali jsme stránky pouze pro prohlížeč MS Internet Explorer. 29

34 KAPITOLA 4. REALIZACE Objekt navigator Pro vytvoření funkcí sloužících k testování výše uvedených podmínek jsem s výhodou využil především JavaScriptového objektu navigator, který se odkazuje na samotný prohlížeč a umožňuje tak získat potřebné informace. Použité vlastnosti objektu navigator jsou stručně popsány v tabulce 4.1. Tabulka 4.1: Vlastnosti objektu navigator cookieenabled plugins 1 useragent Informuje zda-li jsou povoleny cookies Vypíše všechny použité plug-ins Podává informaci o prohlížeči (typ, verze) 4.3 Stránka pro práci s virtuálními daty Jestliže uživatel splnil podmínky popsané v předchozí kapitole, je mu umožněn vstup na hlavní stránku aplikace s VRML scénou. Protože cílem bylo využít maximální měrou pracovní plochu monitoru, je stránka generována (pomocí PHP skriptů) na základě zjištěného rozlišení. Hodnoty týkající se velikosti pracovní plochy jsou mezi úvodní a VRML stránkou předávány pomocí cookies Generování stránky - architektura Architekturu webové aplikace lze rozdělit do tří úrovní: webový klient uživatelův webový prohlížeč (MS Internet Explorer). Na straně klienta probíhá komunikace mezi VRML světem a ovládacími panely, indikace aktuální pozice avatara ve virtuálním světě či změny v nastavení všechny tyto procesy zajišt ují JavaScriptové funkce a nástroje Cortona SDK. webový server vyřizuje požadavky webového klienta, interpretuje jazyk PHP a zajišt uje komunikaci s databází. Umožňuje tedy generování více forem 1 pro testování plug-ins v prohlížeči MS Internet Explorer byl použit speciální skript viz [19] 30

35 KAPITOLA 4. REALIZACE Obrázek 4.2: Architektura aplikace stránek a to jak na základě rozlišení, tak i podle zvoleného jazyka (aplikace je vytvořena v české a anglické verzi, přičemž jako úvodní je automaticky zvolen jazyk český) databázový server obsahuje informace o umístění VRML souborů (slouží pro správu vrstev) Indikace pohybu Jedním z kritérií projektu bylo názorně zobrazit pohyb uživatele v prostorách divadla. Při řešení této části jsem byl postaven před problém, jakým způsobem návštěvníka informovat o jeho pozici v trojrozměrném prostoru. Zobrazení pozice avatara ve zmenšeném VRML modelu divadla Možným řešením bylo vytvořit další zmenšený VRML model divadla, který by byl částečně průhledný a v tomto druhém virtuálním prostředí by byla názorně zobrazována pozice uživatele viz [6] a [7]. Pro představu jsou možnosti této metody zobrazeny na obrázcích 4.3 a 4.4 Tuto metodu jsem ovšem nepoužil z důvodu velkých nároků na samotnou přípravu dat. Zároveň jsem se obával, že by zobrazování dalšího modelu mohlo vést ke snížení rychlosti zobrazování dat ve virtuálním světě. 31

36 KAPITOLA 4. REALIZACE Obrázek 4.3: 3D navigace - a) Obrázek 4.4: 3D navigace - b) Zobrazení pozice avatara na schematickém plánu půdorysného a svislého řezu divadla K myšlence zobrazit pohyb uživatele v půdorysném plánku mě vedla skutečnost, že jednotlivé funkční celky barokního divadla jsou členěny dle podlaží. Vytvořil jsem tedy schematické plánky jednotlivých podlaží (suterén, jeviště, balkón, provaziště, krov), které slouží jako podklad při vykreslování pozice. Schémata podlaží se bud automaticky mění podle pozice avatara nebo má uživatel možnost ručně vybrat, které schéma bude zobrazeno. Jelikož zobrazení v patrech nedává dostatečnou Obrázek 4.5: Schématický plánek půsorysu jeviště informaci o aktuální výškové pozici v divadle, je aktuální pozice zobrazena také na schématu svislého řezu divadla. Vykreslení indikátoru knihovna Vector Graphics: Pro samotné vykreslování aktuální pozice jsem využil JavaScriptovou knihovnu Vector Graphics viz [20] šířenou pod licencí LGPL. Tato knihovna umožňuje vložit na webové stránky 32

37 KAPITOLA 4. REALIZACE vektorové kresby. Následující příklad názorně představuje jak vykreslit indikátor pozice avatara z obrázku Ve zdrojovém kódu webové stránky je definován grafický objekt eyepic pro DIV 2 floorpic <script type="text/javascript"> var eyepic = new jsgraphics("floorpic"); </script> 2. Samotné vykreslení indikátoru se zapíše tímto způsobem: <script type="text/javascript"> eyepic.clear(); eyepic.setcolor("#ff3300"); eyepic.fillellipse(pointx-6,pointz-10,10,10); eyepic.setcolor("#0066ff"); eyepic.fillarc(pointx-20,pointz-25,40,40,angle+245,angle+295); eyepic.paint(); </script> Pričemž pointx, pointz jsou souřadnice pro vykreslení indikátoru v pixelech. Hodnota angle udává azimut pohledu avatara ve stupních. Ucelený popis všech metod knihovny Vector Graphics je uveden v [20]. Bodově lze proces zobrazování pozice popsat takto: 1. Zjisti aktuální pozici avatara (za pomocí JavaScriptu a Cortona SDK). 2. Proved transformaci souřadnic (základní jednotkou pro VRML je metr, naopak knihovna Vector Graphics používá jako jednotky pixely). 3. Vykresli indikátor. 4. Celý proces opakuj (konkrétně se cyklus opakuje každých 500ms). 2 DIV - je neutrální element jazyka HTML. Společně s CSS umožnuje jednoduché pozicování elementů na webových stránkách 33

38 KAPITOLA 4. REALIZACE Bublinová nápověda Protože při testování použitelnosti webové aplikace (kapitola 5) se ukázalo, že uživatelé nerozumí některým funkcím, bylo snahou vytvořit jednoduchou nápovědu, která by tento problém vyřešila. Proto jsem přistoupil k tvorvě takzvané bublinové nápovědy viz obrázek 4.6. Z možných způsobů řešení jsem v dané situaci 3 využil JavaScriptovou knihovnu Box Over viz [21]. Obrázek 4.6: Bublinová nápověda Použití knihovny Box Over v zápisu webové stránky (konkrétně pro nápovědu viz obrázek 4.6) popisuje následující příklad: <span TITLE="cssheader=[styl_hlavicka] cssbody=[styl_telo] fade=[on] delay=[500] header=[automaticky] body=[navigační schéma se automaticky přepíná dle vaší pozice]"> Automaticky</span> 3 Snahou bylo vyřešit tento problém rychle a jednoduše. Proto jsem použil volně šířenou JavaScriptou knihovnu, než abych zmíněnou bublinovou nápovědu sám programoval. 34

39 KAPITOLA 4. REALIZACE Obrázek 4.7: Aplikace Virtuální divadlo 4.4 Popis grafického rozhraní V této sekci jsou chronologicky popsány jednotlivé nástroje a funce aplikace Virtuální divadlo. Konečná podoba této aplikace je zachycena na obrázku Panel ovládání pohybu Kruhové ovládání slouží pro ovládání pohyb avatara v prostředí VRML modelu. Čtyři čtvrtkruhová tlačítka pro pohyb vpřed, vzad a úkroky do stran. Dvě menší středová tlačítka pak pro natáčení pohledu vpravo, příp. vlevo. Boční tlačítka symbolizují výtah a slouži tedy k vertikálnímu posunu avatara ve scéně. Metody pohybu Pro pohyb ve virtuální scéně lze použít tří základních módů: Chůze pohyb avatara je omezen pouze na horizontalní rovinu Létání umoňuje pohyb v natočené, libovolné rovině Rotace nástroj pro otáčení, zkoumání celého modelu 35

40 KAPITOLA 4. REALIZACE Obrázek 4.8: Panel ovládání pohybu Ovládání pohledu Kromě přepínání pozorovacích stanovisek (viz sekce 4.4.3) dávají volby Vše, Obnov, Rovina, Zaměř na, další možnosti pro změnu aktuálního pohledu vše všechny zobrazené objekty příblíží tak, aby byla maximálně využita pracovní plocha okna s VRML modelem obnov vrátí avatara do výchozí pozice rovina v případě přetočení pohledu, lze tímto způsobem navrátit pohled, tak aby odpovídal horizontálnímu postavení avatara. Zaměř na kliknutím na určitý objekt ve virtuální scéně se obraz zacílí na tento vybraný objekt Virtuální svět Jak už bylo zmíněno v tomto okně je zobrazován (s pomocí Cortona VRML client) samotný VRML model divadla. Pohybovat se ve virtuálním světě je možné nejen pomocí ovládacích prvků (popsány v předchozí kapitole), ale také pomocí myši a klávesnice. Základní pohyb Pohyb v žádaném směru (vpřed, vzad, otočení) dosáhneme posunem myší při stisknutém levém tlačítku. S výhodou lze též využít směrové klávesy přímo na klávesnici. Kombinace Další možnosti pro ovládání získáme kombinací kláves CTRL, ALT a výše popsaných způsobů pohybu. 36

41 KAPITOLA 4. REALIZACE Navigační panel Hlavním účelem této části aplikace je znázorňovat aktuální pozici avatara v prostorách a okolí modelu barokního divadla. Pro popis nástrojů vyjdu z obrázku 4.9. Obrázek 4.9: Navigační panel 1. Okno s půdorysným plánkem divadla 2. Znázornění podélného řezu divadla 3. Indikátor pozice v půdorysném plánku i v podélném řezu je znázorněna jak pozice avatara, tak i azimut pohledu. V případě, že se uživatel pohybuje mimo prostory samotného divadla, je snahou vyjádřit směr z kterého avatar divadlo pozoruje. Zároveň je změněn tvar a barva indikátoru. 4. Pozorovací stanoviska pro návštěvníka jsou připraveny stanoviště, ze kterých může pozorovat scénu či mu mohou posloužit pro rychlý přesun v modelu. Pro změnu stanoviště stačí kliknout na symbol ve schématu patra nebo využít přepínání v horní části navigačního panelu. 5. Výběr plánku půdorysu Schémata jednotlivých podlaží (suterén, jeviště, balkón, provaziště, krov) se bud automaticky mění podle pozice avatara nebo má uživatel možnost ručně vybrat, které schéma bude zobrazeno (zaškrtnutím nebo přepínáním v horní části panelu) 37

42 KAPITOLA 4. REALIZACE 6. Znázornění zobrazených dat Tato část spolupracuje s panelem pro správu vrstev. V okně se schématem podélného řezu jsou podle množství zobrazených dat graficky zvýrazněna příslušná podlaží divadla Práce s vrstvami, ovládání nastavení, nápověda Jak už nadpis napovídá je tento panel rozdělen do více sekcí, kliknutím na nadpisy sekcí (Nápověda, Vrstvy, Nastavení, Souřadnice) lze tyto části rozbalit nebo naopak zavřít. Výřez části tohoto panelu je zobrazen na obrázcích 4.10 a Obrázek 4.10: Správa vrstev Obrázek 4.11: Ovládání nastavení Vrstvy slouží pro zapínání a vypínání vrstev. Ty jsou členěny ve stromové struktuře podle podlaží divadla. Zaškrtnutím přislušných políček (nebo kliknutím na název vrstvy) se načtou tato data do virtuálního světa. Naopak chceme-li vypnout zobrazení některých vrstev, stačí je odškrtnout ve stromové struktuře. Nastavení Nabízí kolekci nástrojů pro práci s virtuálním světem. Zaškrtnutím či odškrtnutím přislušné volby nástroj zapneme nebo vypneme. zap/vyp navbaru zapíná, vypíná navigační panel Cortona VRML client. Obdobné nástroje jako poskytuje v aplikaci Virtuální divadlo panel ovládání pohybu (Rovina, vše, chůze,... ) nabízí i Cortona VRML client. Tyto funkce lze zpřístupnit zapnutím navigačního panelu. zap/vyp světla zapíná, vypíná osvětlení modelu 38