Editor pro vizualizaci interiérů bytů

Transkript

1 České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačové grafiky a interakce Bakalářská práce Editor pro vizualizaci interiérů bytů Dominik Vondráček Vedoucí práce: Ing. David Sedláček Studijní program: Obor: Softwarové technologie a management Web a multimédia

2

3 Prohlášení Prohlašuji, že jsem práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu 60 Zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon) V Praze dne

4 Abstract Thesis describes analysis, design and implementation of simple editor, which enables user to create floor plan of a single-storey apartment and view three-dimensional scene constucted from the floor plan. Abstrakt Práce se zabývá analýzou, návrhem a implementací jednoduchého editoru, který uživateli umožňuje vytvořit půdorysný plán jednopodlažního bytu a zobrazit trojrozměrnou scénu zkonstruovanou na základě tohot plánu.

5 Obsah 1 Úvod Motivace Cíle práce Konkrétní podoba výsledné aplikace Existující implementace Použité technologie Programovací jazyk Knihovny pro tvorbu uživatelského rozhraní API pro vytvoření a render trojrozměrné scény Analýza existujících implementací Ikea Home Planner Autodesk Homestyler Shrnutí Analýza a návrh řešení Vztahy a vlastnosti elementů plánu Datová reprezentace plánu Základní datový model Datový model pro zobrazení půdorysného plánu Datový model pro vizualizaci Datový model textur a grafických modelů nábytku Funkce a uspořádání uživatelského rozhraní Funkce uživatelského rozhraní Rozložení uživatelského rozhraní Architektura aplikace Zobrazení půdorysného plánu Zobrazení vizualizace Uživatelské rozhraní Obsluha uživatelských vstupů Implementace Implementace datové reprezentace plánu Ukládání plánu Implementace funkcí editoru Přesun prvku Přidání prvku Odstranění prvku Vytváření geometrie a grafu scény Testování Test 1 byt 2+kk Test 2 byt 2+kk Test 3 byt 4+kk...32

6 7.4 Výsledek testování Závěr Literatura...36 Příloha A: Instalační a uživatelská příručka...38 Příloha B: Obsah přiloženého CD...40

7 1 Úvod Tato práce, kterou právě držíte v ruce, je výsledkem mé snahy získat praktické zkušenosti v oblasti návrhu a implementace uživatelských rozhraní a počítačové grafiky. Téma této práce jsem si vybral proto, že mi přišlo zajímavé a neotřelé a také proto, že počítačová grafika umožňuje sáhnout si na výsledek práce očima, což je pocit, který svému tvůrci například administrativní systém na evidenci zásob skladu většinou nedopřeje. Dalším důvodem výběru tohoto tématu je jeho enormní rozsah, který umožní v práci dále pokračovat a aplikaci dále rozvíjet. 1

8 2 Motivace 2.1 Cíle práce Tato práce si klade za cíl postupně navrhnout a implementovat program, který svému uživateli umožní vytvořit si půdorys podle jeho vlastní fantazie a zároveň mu ukáže, jak přibližně by mohl jeho plán vypadat ve skutečnosti. Je faktem, že toto téma bylo již zpracováno na profesionální úrovni, přičemž analýze dvou vybraných produktů se dále v této práci také věnuji, a proto také nebylo autorovým cílem vytvořit kompletní nástroj pro vizualizaci interiérů, ale spíše získat základní náhled na problematiku uživatelských rozhraní, počítačové grafiky a jejich využití právě při vizualizacích. V této práci se tedy pokusím nalézt odpovědi na tři hlavní otázky, které s tímto tématem velmi úzce souvisí: 1. Jak umožnit uživateli snadno vytvořit plán bytu? 2. Jak tento půdorys vhodně datově reprezentovat? 3. Jak datovou reprezentaci půdorysu prezentovat formou trojrozměrné scény? 2.2 Konkrétní podoba výsledné aplikace Výsledkem práce je aplikace napsaná v jazyce Java, která pomocí jednoduchého grafického prostředí umožní vytvořit půdorys s okny a dveřmi nastavitelných rozměrů. Kromě toho lze v aplikaci jednoduše měnit barvy stěn a textury podlah jednotlivých místností vytvořeného půdorysu a především lze stisknutím tlačítka přeměnit dvojrozměrný plán místnosti v její trojrozměrnou vizualizaci. Dále je možné do místností umisťovat a přesouvat modely nábytku nahrané ze souboru ve formátu Wavefront OBJ. Samozřejmostí je možnost si plán uložit pro pozdější užití. 2.3 Existující implementace Programů, které umožňují vytvářet a vizualizovat plány obytných prostor je větší množství a některé editory na vysoké úrovni jsou dostupné zdarma. Do této kategorie bezpochyby patří Home Planner společnosti Ikea [1] a Homestyler společnosti Autodesk [2]. Základní analýze uživatelského rozhraní právě těchto dvou editorů se dále v textu budu věnovat. 2

9 3 Použité technologie 3.1 Programovací jazyk Jak bylo předesláno, k implementaci tohoto programu jsem využil jazyku Java. Hlavní motivací při výběru tohoto jazyka mi byly zkušenosti, které jsem s Javou získal při studiu. Neméně důležitým faktorem byla existence knihoven ulehčujících tvorbu uživatelského rozhraní a grafických prvků aplikace a také snadný přístup k jejich kompletní dokumentaci díky nástroji Javadoc. 3.2 Knihovny pro tvorbu uživatelského rozhraní Vzhledem ke zkušenostem jsem při vytváření uživatelského rozhraní využil možností knihoven Swing a AWT, které umožňují vše potřebné a nebylo tedy třeba přemýšlet nad alternativami. 3.3 API pro vytvoření a render trojrozměrné scény Pro jazyk Java existuje několik různých prostředků, které umožní vytvářet a zobrazovat prostorové scény. Mezi nejpoužívanější API patří Java OpenGL [3], Java3D [4] a v neposlední řadě také engine JMonkey [5]. Vzhledem k požadavkům na práci bylo třeba vyřadit Java OpenGL a to z toho prostého důvodu, že se jedná o nízkoúrovňové API, které sice otevírá možnosti OpenGL jazyku Java, ale nenabízí mnoho navíc. Možnosti Java3D jsou již více než dostačující. Toto API nativně umožňuje vytvářet grafy scény, načítat modely ve formátu Wavefront OBJ a poskytuje řadu dalších užitečných nástrojů. Zároveň je dobře dokumentován [6] a je pro něj k dispozici množství návodů [7]. Z těchto důvodů jsem se rozhodl, že jej využiji. Engine JMonkey je primárně určen pro vytváření počítačových her a z tohoto důvodu, přestože by jistě umožnil vytvořit pouhou trojrozměrnou scénu, jsem jej vyloučil a uvádím jej zde spíše pro zajímavost. 3

10 4 Analýza existujících implementací Před návrhem uživatelského rozhraní jsem se rozhodl prozkoumat možnosti volně dostupných editorů pro vizualizaci. V analýze se zaměřím především na uživatelské rozhraní obou testovaných editorů a pokusím se odvodit ovládací prvky, které jsou vhodně aplikovatelné v prostředí této práce. V současné době na trhu existuje velké množství editorů interiérů, které fungují na podobném nebo stejném principu jako tento projekt. K nalezení jsou placené i neplacené verze, online implementace pro prohlížeče i profesionální software pro designová studia. Pro porovnání a inspiraci jsem zvolil dva produkty, které jsou určeny různým cílovým skupinám. Jsou to Ikea Home Planner [1] a Autodesk Homestyler [2]. Na následujících řádcích tyto programy rozeberu. 4.1 Ikea Home Planner Tento produkt je určený všem zákazníkům společnosti Ikea, kteří plánují stavbu nebo rekostrukci kuchyně a hodlají potřebný nábytek zakoupit v prodejnách společnosti Ikea. Program je spustitelný v prohlížeči na webových stránkách Ikea. V rozboru se zaměřím především na interface, způsob definice rozměrů a tvarů místnosti a na výslednou vizualizaci. Základní rozhraní při spuštění programu a založení nového projektu (Obr. 1) obsahuje pracovní plochu s předvytvořenou obdélníkovou místností. Pod pracovní plochou je nástrojová lišta, pod kterou leží kontextová nabídka. Na levé straně rozhraní je katalog s obsahem. Na pravé straně je sloupec s kontextovým nastavením. Nad pracovní plochou se nachází panel s několika menu. Pracovní plocha zabírá většinu z rozhraní a slouží k zobrazení půdorysu a 3D náhledu. Po půdorysu místnosti se lze pohybovat šipkami v nástrojové liště pod pracovní plochou. Tam také uživatel najde tlačítka pro přiblížení a oddálení pohledu. K oddálení dojde automaticky, pokud uživatel rozšíří místnost mimo pracovní prostor. Katalog na levé straně je rozčleněný do logických celků, které usnadňují navigaci. Stejnou funkci má textové pole pro vyhledávání ve vrchní části sloupce. S katalogem je svázána kontextová nabídka pod nástrojovou lištou, která zobrazuje obsah zvolené kategorie s náhledy, pokud uživatel právě pracuje s katalogem. Kontextové nastavení na pravé straně rozhraní zobrazuje volby u vybraných objektů. Panel obsahuje textová pole, seznamy nebo vysouvací menu podle vybraného objektu. S kontextovým nastavením je taktéž svázána kontextová nabídka, ve které se zobrazují některé z možností nastavení, například druhy dveřních klik. 4

11 Obr. 1: Rozhraní Ikea Home Planner po založení projektu Panel nad pracovní plochou obsahuje tlačítka pro uložení a tisk návrhu. Vysouvací menu obsahují nástroje pro ukládání, procházení editační historie (vracení kroků a opakování kroku) a kopírování a vkládání. Místnosti lze vytvářet editací z předdefinovaných forem. Ty jsou k nalezení v kontextovém výběru, pokud je v katalogu vybraná položka Room Shapes, jak je patrné z obrázku. V aplikaci tedy není možné vytvořit místnost libovolných tvarů, nabídka je přesto dostatečná pro použití. Uživatel může měnít rozměry místnosti přesouváním jednotlivých stěn. K přesunutí stěny stačí kliknout na stěnu a táhnout ji podél kolmice. Další možností je určit rozměry místnosti zadáním délky do textových polí v kontextovém nastavení. Jednotlivé stěny jsou popsané velkými písmeny a odpovídající popisek uživatel najde i u textových polí. Současný rozměr stěn je také zobrazen v půdorysu vedle stěn. Dveře lze do půdorysu přidávat vybráním vhodných dveří v katalogu a kontextovém výběru. Vybrané dveře se automaticky přidají do konceptu na střed stěny A (Obr. 2). Dveře lze přesouvat kliknutím a táhnutím. Během přesunu jsou dveře umístěny na stěně, která je nejblíže kurzoru. U dveří je zobrazen otevírací úhel, jejich rozměr a jejich vzdálenost od stěn. Podrobné nastavení dveří je k dispozici v kontextovém nastavení. Nastavení umožňuje měnit výšku a šířku dveří, dále pozici a typ kliky, směr otevírání a barvu s texturou dveří a rámu. Přidávání oken do plánu se řídí stejnými pravidly jako přidávání dveří. Nastavení okna obsahuje šířku, výšku, výšku od podlahy, barvu, texturu a pozadí za oknem. 5

12 Obr. 2: Přidání dveří do půdorysného plánu Obr. 3: Prostorová vizualizace s vybranými dveřmi 6

13 Pro zobrazení 3D vizualizace (Obr. 3) slouží tlačítko se symbolem krychle. Navigace ve 3D probíhá pomocí tlačítek v nástrojové liště. Kamerou lze rotovat podél středu místnosti, lze ji naklánět, přibližovat a lze ji přesunout nad místnost pro perspektivní pohled shora. Kameru lze také zaměřit na vybraný objekt a obnovit její pozici do výchozí. Stěny místnosti jsou viditelné pouze při pohledu zevnitř, do místnosti je tedy vidět i zvenčí, protože nejbližší stěny jsou průhledné. To umožňuje snadnou navigaci a přehled nad celkem. Ve 3D zobrazení lze vybírat jednotlivé stěny a objekty kliknutím. Vybraný objekt je označen žlutou sítí a je k němu zobrazeno odpovídající kontextové nastavení. Objekty tedy lze nastavovat přímo ve 3D pohledu. Stejně lze přesouvat dveře a okna po stěnách kliknutím a táhnutím. 4.2 Autodesk Homestyler Homestyler společnosti Autodesk je aplikace pro webový prohlížeč určená všem lidem, kteří si chtějí vizualizovat design celého domu, nebo jeho částí. Nabízí rozsáhlou knihovnu generického nábytku, ale také skutečného nábytku některých výrobců. V následujícím rozboru se opět zaměřím na interface, způsob definice rozměrů místnosti a na vizualizaci vytvořeného plánu. Základní rozhraní po založení projektu obsahuje pracovní plochu, nástrojovou lištu na vrchní straně a katalog objektů na levé straně. Pracovní plocha je tvořena mřížkou. V levém spodním rohu je zobrazeno současné měřítko. Na stejném místě jsou k dispozici tlačítka pro nastavení jednotek a povolování zobrazení rozměrů u stěn. Pohyb po ploše je umožněn kliknutím a táhnutím ve volném místě pracovní plochy. Nástrojová lišta obsahuje několik menu s nastavením a příkazy, většina příkazů je ale dostupná pomocí tlačítek přímo na liště, nebo v pracovní ploše. K dispozici jsou tlačítka pro pohyb v konstrukční historii (vracení a opakování příkazů), tlačítka pro přechod v režimech zobrazení, posuvník pro přiblížení kamery, seznam pater a tlačítko pro vystředění kamery. Katalog obsahuje seznam obsahu setříděný do kategorií. Kategorii lze vybrat v rozbalovacím menu, které je skryté pod ikonou domu vedle názvu aktuálně vybrané kategorie. Menu obsahuje jednotlivé kategorie utříděné v logických celcích v pořadí, v jakém je ideální je postupně použít při vytváření nového plánu. První jsou řazeny stavební prvky místnosti, dveře, okna a podobně. Následují kategorie nábytku setříděné podle místností. V další sekci jsou dekorace a na konci je venkovní prostředí. Místnosti lze vytvářet přetažením jednoho ze vzorů v katalogu do pracovní plochy. Vytvořenou místnost lze upravovat výběrem a posouváním stěn nebo kontrolních bodů v rozích vytvořené místnosti. Další možností je přidat k již vytvořené místnosti nástavbu v podobě výklenků (Obr. 4). Výklenky mohou být čtvercové i oblé. Po přidání se stanou součástí místnosti a lze je upravovat stejně jako zbytek místnosti. Do místnosti lze přidat vnitřní stěny i celou další místnost. 7

14 Obr. 4: Editační rozhraní Autodesk Homestyler s vytvořenou místností Obr. 5: Detail vizualizace plánu z katalogu vytvořených plánů 8

15 Dveře lze vytvořit přetažením ikony vybraných dveří z katalogu na stěnu do pracovní plochy. Přidávat a přesouvat objekty je možné pouze v půdorysném pohledu. Detaily dveří lze nastavit v katalogu před přidáním nebo po přidání v pracovní ploše. Nastavit lze materiál, výšku a šířku dveří. Po vybrání dveří se zobrazí grafické menu. K ikonám se zobrazí popisky pokud je nad nimi kurzor. Menu obsahuje nastavení objektu, nastavení chování, možnost přidat objekt k oblíbeným a vymazání objektu (Obr. 4). Pro zobrazení 3D vizualizace slouží tlačítko 3D v nástrojové liště. Základní vizualizace je ortografická, úhel kamery je fixní (Obr. 5). S kamerou je možné pohybovat ve čtyřech směrech a je možné s ní rotovat. Vnější místností jsou poloprůhledné, uživatel tedy vidí do místnosti a zároveň pozná přes kolik stěn se dívá. Ve 3D zobrazení lze upravovat vlastnosti objektů, které jsou v návrhu přidané. K vybrání objektu na něj stačí kliknout. Vybraný objekt je označen bílým obrysem a zobrazí se vedle něj ikonové menu. Menu je s objektem spojeno úsečkou. Program nabízí zvláštní mód pro fotorealistickou vizualizaci. Uživatel nastaví pozici a úhel kamery a nechá snímek vyrenderovat na serveru služby. Prohlídka v reálném čase tedy není umožněna. 4.3 Shrnutí Z obou rozebraných implementací je možné adaptovat některé vlastnosti systému. Inspiraci lze hledat především ve způsobu vytváření a editace místností a ve skladbě a rozložení uživatelského rozhraní. Oba programy mají z větší části společné ovládací prvky a rozložení. Je patrné, že hlavní nárok byl kladen na přehlednost a jednoduchost ovládání. Rozdělení ovládacích prvků na pracovní plochu, katalog a nástrojovou lištu se zdá být ideálním řešením. Příklad si lze vzít z informativních prvků jako jsou zobrazené rozměry a úhly otevírání dveří. V tomto ohledu z obou aplikací upřednostňuji přehlednější IKEA Home Planner. Vytváření místností je v principu v obou programech stejné. Ačkoliv uživatele trochu omezuje, řeší tím problém rozlišování vnějšku a vnitřku místnosti. Zde jsem se rozhodl využít předvytvořené místnosti jako v případě IKEA Home Planner. Editace místnosti je podle mého názoru lépe vyřešena v Autodesk Homestyler a to především díky přítomnosti kontrolních bodů v rozích místnosti. Tento prvek se pokusím ve své práci implementovat. Přidávání oken a dveří je v obou programech prakticky stejné. IKEA Home Planner má podle mého názoru více konzistentní nastavení vlastností dveři, což vychází z rozložení rozhraní. Praktickým jsem shledal kontextové nastavení v aplikaci IKEA Home Planner. Tento prvek umožnuje snadné přizpůsobení vybraného objektu, protože vlastnosti objektu jsou zobrazeny a uspořádány na větší ploše. Podobný prvek by měl být součásti návrhu uživatelského rozhraní výsledné aplikace. 9

16 Při porovnání prostorové vizualizace se obě implementace velmi liší. V případě Autodesk Homestyler figuruje základní vizualizace spíše jako orientační předobraz. Tento fakt je ale vyvážen možností fotorealistického renderu na straně serveru. IKEA Home Planner nabízí perspektivní zobrazení v reálném čase s možností změny úhlu kamery. Na druhou stranu detailnost vizualizace je v porovnání velmi omezená, což je dáno důrazem na vytváření plánu kuchyně s nábytkem výrobce spíše než na realistickou vizualizaci. Z obou představených možností je mi bližší provedení perspektivního renderu s volnou kamerou. 10

17 5 Analýza a návrh řešení Před zahájením implementace je třeba si ujasnit fundamentální prvky aplikace nejen z pohledu uživatelského rozhraní, ale i z pohledu datové reprezentace a architektury aplikace. V této kapitole se nejdříve budu zabývat samotným jádrem problému, totiž strukturou vytvářeného plánu. Dále se zaměřím na analýzu požadavků na funkci uživatelského rozhraní. V druhé části kapitoly rozeberu datovou reprezentaci plánu vzhledem k potřebám editoru a vizualizace a nakonec popíši základní architekturu uživatelského rozhraní. 5.1 Vztahy a vlastnosti elementů plánu Při návrhu struktury plánu je třeba dbát na zachycení vztahů a vlastností elementů plánu. V této části uvedu jednotlivé prvky plánu a popíši jejich vztahy a vlastnosti. Základními kameny plánu jsou jeho prvky. Ze zadání je zřejmé, že mezi tyto prvky určitě patří stěny, dveře, okna a nábytek. Aby byla umožněna snadná definice a úprava stěn, je třeba pro každou stěnu určit dva okrajové body. Zároveň je třeba upravovat vlastnosti stěn v rámci místnosti i vlastnosti místnosti samotné, jako je například textura podlahy. Místnost je tedy také prvkem plánu. Další elementy nejsou třeba, množina je kompletní. Jaké jsou vztahy mezi elementy? Při jejich odhalování budu postupovat od nejsložitějšího prvku, tedy místnosti. Místnost je evidentně ohraničena obvodem stěn, který ji definuje. Dále musí místnost agregovat vnitřní stěny, aby byla umožněna společná změna vlastností stěn v rámci místnosti, jmenovitě jejich barva. Pro potřeby aplikace není třeba uchovávat informaci o tom, jaký nábytek, dveře a okna se v místnosti nacházejí. Každá stěna je určena dvojicí bodů. Kvůli určení pozice oken a dveří, které se na stěně nacházejí, musí být tato dvojice uspořádaná. Pozice oken nebo dveří bude tedy definována jako vzdálenost od určeného bodu směrem k druhému bodu. Z důvodů editace dveří a oken je žádoucí vědět, která okna a dveře se na stěně nacházejí, přestože tato informace s definicí stěny přímo nesouvisí. Dále je vhodné přímo vědět, ve kterých místnostech se stěna nachází, přestože i tato informace se dá zjistit z druhé strany, tedy průchodem všech místností, které stěny agregují. Okna a dveře jsou definovány stěnou, na které se nacházejí a vzdáleností od určitého okrajového bodu této stěny. Pro jednoznačnou definici dveří a oken není třeba žádná další informace, bude-li dodržena podmínka, že žádný pár dveří nebo oken nemůže být na stejné stěně a zároveň mít stejnou vzdálenost od určeného okraje. 11

18 Dalším prvkem plánu je okrajový bod stěny, který budu vzhledem k jeho funkci dále nazývat kontrolním bodem. Kontrolní bod je definován pouze svojí pozicí v souřadnicovém systému plánu. Z pohledu jeho funkce, tedy definice okraje stěny, je vhodné vést záznam o připojených stěnách. Specifickým je vztah mezi kontrolním bodem a místností. Aby bylo možné efektivně určit obvod místnosti a její obsah, je třeba znát které body do místnosti patří a do kterých místností patří bod. Tento fakt je podrobněji rozebrán dále v textu. Posledním a nejjednoduším prvkem plánu z hlediska jeho vztahů s ostatními prvky je nábytek, který žádné vztahy se zbytkem elementů nemá. Jediným možným vztahem by mohla být informace, ve které místnosti se nachází. Tato ale není pro funkčnost programu vyžadována a proto nebude v datové struktuře podchycena. Jiné než tyto vztahy mezi elementy nejsou pro splnění požadavků na funkčnost programu třeba. Je ale třeba doplnit vlastnosti elementů. Při výčtu těchto vlastostí budu postupovat opačným směrem, tedy od nábytku k místnostem. Pro reprezentaci nábytku, který je v podání této aplikace vlastně geometrickým modelem, je třeba znát pozici v souřadnicovém systému plánu a model, který nábytek představuje. Pro potrřeby vizualizace je vhodné přidat také rotaci modelu a jeho měřítko. Tím je výčet vlastností nábytku kompletní. Okrajový bod stěny nemá kromě své pozice, která jej definuje, žádné další vlastnosti potřebné pro funkci programu. Okna a dveře mají společnou vlastnost v podobě šířky a výšky. Okno musí mít navíc definovánu výšku od podlahy. Jiné vlastnosti nejsou pro užití třeba. Vlastnosti stěn potřebné pro funkci programu jsou dány jeho vztahy s ostatními prvky, například délku stěny a její směrový vektor lze určit za pomoci -krajních bodů. Pro potřeby vizualizace je u místností třeba určit texturu podlahy a barvu stěn v místnosti. Barvu tedy není třeba určovat pro každou stranu stěny zvlášť. Navíc jsem k vlastnostem přidal také název místnosti. 5.2 Datová reprezentace plánu Aby bylo možné efektivně vytvářet a upravovat plán místnosti, je třeba zvolit vhodnou datovou reprezentaci, která zachytí všechny vztahy a vlastnosti plánu z kapitoly 5.1. Popisu mnou navržené datové reprezentace se věnuji na následujících řádcích. Nejprve popíši strukturu datového modelu, který bude společný editační i vizualizační části modelu a který bude editační části upravován. Dále rozeberu datový model pro grafické zobrazení základního modelu v editační části. Na konci kapitoly se budu zabývat datovým modelem vizualizační části aplikace Základní datový model Při návrhu základního datového modelu, který bude reprezentovat plán jsem se nejdříve zaměřil na elementy plánu. Všechny elementy plánu implementují společný interface BlueprintElement. Tento interface umožní pracovat se všemi elementy stejným způsobem, pokud není třeba rozlišovat jejich typ. Zároveň definuje metodu pro získání typu elementu jako číselné hodnoty. Tyto hodnoty jsou v interfacu definovány jako veřejné statické konstanty a v kódu je na ně odkazováno pouze názvem konstanty. 12

19 Návrh datové reprezentace kontrolních bodů vychází z potřeby uložit pozici bodu a vztahy mezi kontrolním bodem a zdmi, které mohou být bodem definovány. Třída ControlPoint, která bod reprezentuje, tedy obsahuje souřadnice bodu, dále kolekci referencí na přichycené zdi a kolekci referencí na místnosti, ve kterých se bod nachází. Při reprezentaci kolekcí bylo využito standartní třídy HashSet, protože bod může být pouze jednou ve vztahu s určitou instancí stěny nebo místnosti. Datová reprezentace stěny musí v základu obsahovat reference na oba kontrolní body. Zároveň musí být zřejmé který kontrolní bod je v uspořádadné dvojici první a který je druhý a toto pořadí se nesmí po vytvoření stěny měnit, aby bylo možné na stěnu umisťovat okna a dveře. Kromě reference na kontrolní body obsahuje reprezentace stěny spojový seznam s referencemi na dveře a okna, která se na stěně nacházejí. Tento spojový seznam je utřízený podle pozic dveří a oken a v každém okamžiku musí obsahovat nejvýše jednu referenci na určité dveře nebo okno, chová se tedy jako uspořádaná množina. V případě oken a dveří jsem se rozhodl vytvořit společného abstraktního předka obou tříd. Tento umožní manipulovat s okny a dveřmi stejně bez rozdílu typu, což je vhodné například při přesouvání oken a dveří. Třída obsahuje pozici a šiřku okna nebo dveří a také referenci na zeď na které se objekt momentálně nachází. Abstraktní metodou této třídy je metoda pro určení typu objektu, aby bylo umožněno rozlišení oken a dveří. Potomci třídy obsahují definici výšky a v případě oken výšky od podlahy. Reprezentace místností je v první řadě určena potřebou definovat obvod místnosti a udržovat reference na všchny stěny obsažené v místnosti. Reference na stěny v místnosti jsou obsaženy v instanci standardní třídy HashSet. Obvod místnosti jsem se rozhodl reprezentovat jako uspořádanou množinu kontrolních bodů okrajových stěn místnosti. Pořadí bodů je dáno tak, aby průchod bodů byl v pořadí proti směru hodinových ručiček po obvodu místnosti. Takové uspořádání umožní snadno definovat hraničící polygon místnosti a tím i detekovat vniřní a vnější prostředí. Pro potřeby efektivnější úpravy místnosti při přidávání a ubírání stěn obsahuje datová reprezentace místnosti také množinu referencí na objekty třídy InsidePath, která reprezentuje úsek vnitřních stěn, jež je spojen s okrajem. Takové uspořádání umožní rychlejší detekci rozdělení místnosti při přidání nové stěny, protože není třeba procházet všechny stěny a zjišťovat zda existuje cesta na okraj místnosti. Tímto tématem se podrobněji zábývám dále v textu při popisu algoritmů upravujících strukturu zdí a místností. Pro úplnost zde uvedu způsob datové reprezentace cesty na kraj. Cesta na kraj je reprezentována jako uspořádaná množina kontrolních bodů ve směru od kraje do středu místnosti. Tato množina obsahuje vždy všechny body po cestě, to znamená že cesty které mají společný bod na okraji místnosti a společný úsek po cestě do středu, budou obsahovat obě i společné body. Pro všechny cesty, které vycházejí z jednoho bodu na okraji místnosti ale musí v každém okamžiku platit, že jejich sjednocením vznikne strom, tedy že se ve sjednocení nevyskytují kruhy. Posledním prvkem který je třeba reprezentovat je nábytek. Pro definici nábytku stačí znát jeho pozici a grafický model na který se nábytek odkazuje. Pro potřeby editoru je součástí definice nábytku i rozměr obalového tělesa odkazovaného modelu. 13

20 5.2.2 Datový model pro zobrazení půdorysného plánu Datová reprezentace pro zobrazení půdorysného plánu musí v první řadě obsahovat informaci o způsobu vykreslení prvků plánu. Způsob vykreslení prvku je kromě typu prvku určen také jeho vlastnostmi, především pozicí. Roli ale také hraje například skutečnost, zda je daný prvek označen či nikoliv. Aby bylo možné tyto informace získat, je zjevné že grafický objekt musí obsahovat referenci na objekt základního datového modelu, který reprezentuje. Pro potřeby vybírání prvku v uživatelském rozhraní je nutné, aby datová reprezentace grafického objektu umožnila rozhodnout, zda jsou dané souřadnice součástí objektu, či zda leží mimo něj. V poslední řadě je třeba, aby bylo možné změnit grafickou reprezentaci prvku při změně odpovídajícího elementu v základním datovém modelu. Všechny prvky v datovém modelu tedy musí splňovat výše uvedené podmínky a implementovat tak rozhraní Graphic2DElement, které je prvkům společné. Způsob jakým je toto rozhraní implementováno je popsán dále v textu v popisu implementace Datový model pro vizualizaci Způsob reprezentace dat pro vykreslení prostorové scény je určen použitou technologií, tedy Java3D. Datovým modelem pro vizualizaci se tedy stává graf scény, který je třeba zkonstruovat před zahájením vizualizace pomocí tříd a metod, které Java3D poskytuje. Způsob, jakým je graf scény konstruován, je popsán dále v textu v popisu implementace. Pro získání základního přehledu o datovém modelu Java3D API doporučuji konzultovat specifikace Java3D [6], případně první kapitolu oficiálního tutorialu Java3D [7], ve které jsou základy konstrukce grafu scény popsány Datový model textur a grafických modelů nábytku Při reprezentaci textur a nábytku je třeba brát ohled v první řadě na možnosti vizualizace pomocí Java3D, kde je jejich reprezentace určena specifikací. Na druhé straně je třeba textury a modely nábytku zobrazovat i v rozhraní editoru. Textury i nábytek jsou načítany z externích souborů při spuštění programu. Pro potřeby vizualizace je ze souborů vytvořena kolekce objektů odpovídajících tříd z Java3D API. Jedná se o třídy BranchGroup pro model nábytku a Texture2D pro textury. Zároveň je pro zobrazení textur v editoru vytvořen náhled s nízkým rozlišením, který je instancí třídy Image, již lze v prostředí Swing zobrazit. Z modelu je vygenerováno obalové těleso, ze kterého je vytvořen obdélník. Ten bude reprezentovat půdorysnou plochu modelu v rozhraní editoru a obdélník je součástí definice nábytku v základním datovém modelu. Podle zadání umožňuje editor import modelů ve formátu Wavefront OBJ. Editor automaticky načítá obsah složky./models/ ve které hledá soubory s příponou.obj. Pokud je soubor ve validním formátu, tak jej načte a pokusí se načíst i soubory s definicemi materiálů, na které se soubor odkazoval. Načte také textury, které jsou odkazovány definicí materiálu. Načítání zprostředkovává třída ObjectFile. Ta je součástí Java3D API. Detailní popis třídy je k nalezení ve specifikaci Java3D API [6]. Textury program načítá z formátu.jpg. Aby mohla být textura úspěšně použita, musí být načtený obrázek čtvercový a mít hrany o délce mocniny dvou. 14

21 5.3 Funkce a uspořádání uživatelského rozhraní Před návrhem architektury aplikace je nutné ujasnit si, jaké funkce musí rozhraní zprostředkovávat uživateli. Kromě toho je vhodné znát vztahy jednotlivých prvků uživatelského rozhraní a také způsob jejich zobrazení a rozložení v aplikaci. Právě analýze těchto témat se věnuji na následujících řádcích Funkce uživatelského rozhraní Rozhraní musí uživateli umožnit snadný přístup ke všem funkcím celého systému a musí také přehledně zobrazovat data aplikace a umožnit v nich navigaci. Zároveň musí jasně informovat uživatele o svém stavu, např. jaký nástroj je právě vybrán. Důležitá funkce uživatelského rozhraní z pohledu editace plánu je především možnost vybírat jednotlivé položky plánu podle zájmu uživatele. Pokud je toto umožněno, pak je možné jednotlivým prvkům upravovat vlastnosti, pomocí nástrojů pro editaci přidávat a odebírat prvky a také měnit vlastnosti mezi nimi. Výběr prvků bude umožněn prostřednictvím panelu s 2D zobrazením půdorysného plánu, ve kterém musí být patrny jednotlivé prvky plánu. Ze zobrazení musí být jasné, který prvek je právě vybrán a tedy vlastnosti kterého prvku mohu upravit v některé z dalších částí rozhraní. Kromě výběru umožní tento panel také určit přesnou pozici v souřadnicích plánu, čehož bude využito při přesouvání prvků. K akcím na půdorysném plánu je třeba znát kontext, tedy například jakou akci chce uživatel provést s vybraným prvkem. Tento kontext tedy musí obsahovat údaje o právě vybraném nástroji, připadně o parametrech nástroje. Změnu tohoto kontextu musí uživatelské rozhraní umožňovat. Také musí současný kontext vhodným způsobem zobrazovat uživateli. K této funkci bude vhodné využít nástrojových panelů, ve kterých bude možné snadno vybrat nástroj stisknutím příslušného tlačítka. Zároveň je možné úpravou grafického provedení tlačítka zvýraznit právě vybraný nástroj. V závislosti na vybraném nástroji a jeho užití je důležité, aby uživatelské rozhraní zobrazovalo, zda je nástroj možné použít tak, jak uživatel zamýšlí. Zvýrazněno by například mělo být protínání stěn při editaci místností. Při přidávání některých prvků plánu je třeba znát část jejich vlastností dříve, než je prvek umístěn do plánu. Tento problém se týká především nábytku, u kterého musíme znát asosiovaný geometrický model. Proto jsem se rozhodl vyčlenit kromě nástrojového panelu také panel pro výběr přidávaných elementů. Přidávaný elemenet bude možné vybrat ze seznamu všech elementů po vzoru katalogů z analyzovaných exitujících implementací. Vybraný element musí být zvýrazněn, protože je součástí kontextu. Pro editaci vlatností vybraných elementů bude vhodné vyčlenit prostor, ve kterém budou vlastnosti elementu přehledně zobrazeny a bude umožněna jejich úprava. Prvky tohoto panelu se budou měnit v závislosti na typu vybraného prvku a na hodnotách jeho vlastností. Úprava vlastností může být umožněna buď přímo, nebo výběrem z možností, podle charakteru vlastnosti. Například šířku dveří je evidentně vhodné editovat přímo vypsáním hodnoty, na rozdíl od výběru barvy nebo textury, kde je vhodné uživateli nabídnout možnosti, ze kterých si může vybrat. 15

22 V případě výběru barev a textur u místností je žádoucí uživateli jasným grafickým způsobem zobrazit jeho výběr. V případě barvy je tedy vhodné vybranou barvu přímo zobrazit, místo číselného výpisu složek. V případě textury se kromě zobrazení názvu textury předpokládá také zobrazení náhledu vybrané textury. Podle požadavků na systém je třeba uživateli umožnit ukládat a načítat plány. Uživatelské rozhraní musí i tuto funkci zprostředkovat. Zde platí nepsaný standard v podobě panelu s výsuvným menu na vrchní straně aplikace. Z menu si uživatel vybere zda chce plán uložit nebo načíst. Dalším standartem v tomto směru je výběr souboru pro načtení nebo uložení pomocí dialogového okna, které obsahuje stromovou strukturu souborového systému. Při návrhu uživatelského rozhraní je také třeba počítat s potřebou uživatele přesouvat se po zobrazení půdorysu, připadně měnit měřítko zobrazení. Zde jsem se rozhodl pro využití levého tlačítka myši. Uživatel se bude moci přesouvat v zobrazení plánu stisknutím pravého tlačítka myši a táhnutím myši ve směru posunu pohledu. V tomto případě je vhodné, aby kurzor zůstal při posunu kamery na místě a nevyjížděl z ovládacího prvku. Tím se usnadní ovládání. Pro potřeby vizualizace je vhodné v rámci zachování konzistence ovládacích prvků implementovat posun kamery podobným způsobem, tedy kliknutím a táhnutím myši v prostoru panelu s vizualizací Rozložení uživatelského rozhraní Jak bylo naznačeno v předchozí kapitole, uživatelské rozhraní bude rozčleněno do panelů (Obr, 6), kde každý panel bude představovat ucelený logický celek a usnadní tak uživateli navigaci mezi prvky rozhraní. Hlavním panelem rozhraní editoru bude pracovní plocha situovaná ve středu okna aplikace. Funkcemi pracovní plochy bude zobrazovat půdorysný plán a přijímat příkazy uživatele v podobě klikání či táhnutí myší v prostoru plochy. Pod pracovní plochou bude umístěn panel s nástroji. Panel bude obsahovat tlačitka s popisky editačních nástrojů a tlačitko pro přepnutí do režimu vizualizace. Na levé straně aplikace bude situován panel představující katalog s prvky plánu. V tomto panelu budou na vrchu pod sebou seřazena tlačítka pro přidání dveří, oken a nábytku. Pod těmito tlačitky bude umístěn seznam načených modelů, které bude uživatel moci umístit do plánu jako nábytek. Obr. 6: Uspořádání panelů rozhraní 16

23 Pravou stranu aplikace bude zabírat panel pro zobrazení vlastností vybraného elementu. Tento panel by měl mít fixní šířku a měl by být zobrazen i pokud není žádný prvek vybrán, aby se zamezilo rozšiřování a zužování pracovní plochy. To totiž může být matoucí pro některé uživatele. Vlastnosti vybraného prvku budou v panelu umístěny pod sebou. Pro parametry určené přímo hodnotou bude v panelu zobrazeno textové pole s příslušným popiskem. Pole budou řazena pod sebou podle důležitosti parametru. Posledním prvkem uživatelského rozhraní editoru je vrchní panel s menu. Tento panel bude obsahovat menu s položkami pro vytvoření nového plánu, načtení a uložení plánů a ukončení aplikace. Pro vizualizaci bude kromě panelu s menu zobrazena pracovní plocha s vizualizací po celé ploše okna. Pod plochou s vizualizací bude umístěna obdoba nástrojové lišty obsahující tlačítko pro návrat do editoru situované ve středu okna. Toto uspořádání vychází z větší části z konceptu IKEA Home Planner. 5.4 Architektura aplikace Při vytváření architektury aplikace jsem vycházel ze vzoru Model-View-Controller. Aplikace je tedy v principu rozdělena na tři vrstvy, kterými jsou datový model, zobrazovací komponenty a řídící logika. Popisu datového modelu jsem se věnoval v předchozích kapitolách, v této kapitole se zaměřím na základní popis funkce komponent zodpovědných za logiku aplikace a uživatelské rozhraní. Nejdříve popíši způsob zobrazování půdorysného plánu, poté se zaměřím na popis prvků zodpovědných za vizualizaci. Dále osvětlím funkci prvků uživatelského rozhraní a na konci kapitoly se budu věnovat popisu obsluhy uživatelských vstupů Zobrazení půdorysného plánu Před začátkem samotného zobrazaní je třeba získat data k němu potřebná. Tuto funkci nese třída Graphic2DElementModel, která vytváří a zapouzdřuje grafické prvky popsané v kapitole Tato třída tedy nese zodpovědnost za datovou vrstvu pro grafiku půdorysného plánu. Při změně dat v datové reprezentaci plánu je o změně notifikován, mimo jiné, i model grafických prvků plánu. Ten podle charakteru změny aktualizuje zapouzdřená data a oznámí komponentě zodpovědné za vykreslení, že došlo ke změně dat. Kromě pasivího převádění dat z prvků plánu na grafické prvky umožňuje tato třída přidávat speciální grafické prvky určené pro nástroje. Takovými prvky jsou například dočasné stěny, které jsou zobrazovány během editace a nejsou součásti perzistentní vrstvy aplikace. Tato třída také figuruje při obsluze uživatelských vstupů, kdy vrací potřebná data logické vrstvě aplikace. Takovými daty mohou být například grafické prvky, jejichž zobrazení obsahuje určené souřadnice. 17

24 Třída obstarávající vykreslení prvků nese název Canvas2D a je potomkem třídy Canvas, tudíž ji lze použít přímo jako zobrazovací komponentu přidáním do prvků okna aplikace. Tato třída naslouchá změnám v datech grafických prvků a změnám v pozici kamery. Při změně dat grafických prvků si vyžádá všechny grafické prvky postupně je vykreslí. Pořadí prvků při vykreslování je dáno pořadím v seznamu, jehož vytváření má v kompetenci datový model grafických prvků plánu. Při posunu kamery dojde k transformaci zobrazené grafiky transformační maticí, kterou Canvas2D získá z instance třídy Camera2D, na kterou má referenci. Protože Canvas2D je viditelnou součásti rozhraní aplikace, je třeba zpracovávat události vyvolané na tomto objektu aktivitou uživatele. K tomuto účelu slouží třída Canvas2DController, která je registrována jako posluchač událostí. Rozboru této třídy se budu věnovat v kapitole popisující obsluhu uživatelských vstupů. Všechny uvedené třídy jsou zapouzdřeny ve třídě Graphics2D. Ta má v kompentenci konstrukci a inicializaci všech prvků spojených s dvourozměrnou grafikou, ale do samotné funkce komponent již nijak nezasahuje Zobrazení vizualizace Zobrazení vizualizace úzce souvisí s použitým API Java3D. Jak bylo již řečeno v kapitole 5.2.3, pro vizualizaci je nejdříve třeba vytvořit graf scény. Za vytváření grafu scény je zodpovědna třída Graphic3DElementModel. Tato třída naslouchá změnám v datovém modelu půdorysného plánu a vytváří nový graf scény pokud ke změně dojde. Jinou funčnost tato třída poskytovat nemusí. O postupech při vytváření grafu scény bude čtenář seznámen v kapitole zabývající se implementací. O vykreslení prvků se stará Java3D. Vykreslení probíhá na instanci třídy Canvas3D, která je poskytnuta prvkům grafického rozhraní k zobrazení. Události vyvolané nad touto komponentou jsou předávány ke zpracování instanci třídy OrbitBehavior, jež je standartní třídou Java3D. OrbitBehaviour se strará o transformaci kamery na základě událostí z Canvas3D. Všehny zmíněné třídy jsou zapouzdřeny ve třídě Graphics3D. Ta se stará o konstrukci a inicializaci všech prvků spojených s vizualizací. Kromě toho naslouchá změnám v režimu zobrazení (editor nebo vizualizace) a podle stavu zapíná nebo vypína render grafu scény. Jinak do funkce komponent nijak nezasahuje Uživatelské rozhraní Uživatelské rozhraní je založeno na knihovně Swing [8][9]. Většina komponent rozhraní naslouchá změnám vybraného nástroje, nebo režimu zobrazení. Na základě nových hodnot mění podobu zapouzdřených elementů, například v případě nástrojové lišty je zablokováno vybrané tlačítko. V případě panelu s vlastnostmi se mění obsah na základě typu vybraného elementu a hodnot vlastností vybraného elementu. U každého elementu rozhraní je registrován určitý controller, který se stará o obsluhu uživatelských vstupů a změnu dat na úrovni modelu. 18

25 5.4.4 Obsluha uživatelských vstupů Jak bylo řečeno v přechozí kapitole, o obsluhu uživatelských vstupů na komponentě se stará controller, který je na ní registrovaný. Na základě uživatelova vstupu jsou změněny odpovídající modely. Speciální postavení v tomto ohledu má třída Canvas2DController. Ta naslouchá změnám nástroje. Na základě změny volí vnitřní strategii na obsluhu událostí vyvolaných uživatelským vstupem v prostoru zobrazení půdorysu. Při vzniku události pouze předá událost dále k obsluze vnitřní strategii. Každá jednotlivá strategie má své vlastní vnitřní stavy a sama modifikuje modely, který jí podléhají. Popisem některých použitých postupů se budu zabývat v dalších kapitolách 19

26 6 Implementace V této kapitole se budu zabývat detaily postupů a algoritmů použitých v práci. Nejprve se zaměřím na implementaci prvků datové reprezentace plánu. V další části rozeberu algoritmy užité při úpravě plánu. V poslední části se zaměřím na popis postupu vytváření geometrie a grafu scény pro vizualizaci. 6.1 Implementace datové reprezentace plánu Hlavním problémem při implementování datové vrstvy je potřeba zachovat konzistenci dat při přidávání, odebírání a úpravě prvků plánu. Při změně vlastnosti prvku je v některých případech třeba měnit také vlastnosti prvků, které jsou s upravovaným prvkem ve vztahu. Kromě toho je třeba aktualizovat zobrazení upraveného prvku. K udržení konzistence dat je vyžadováno, aby změny elementů byly prováděny voláním příslušných metod třídy Blueprint, která elementy plánu zapouzdřuje a má k nim tedy přímý přístup. Volaná metoda aktualizuje stavy všech prvků ve vztahu s měněným elementem. Zároveň o změně každého prvku notifikuje registrované posluchače. Jako příklad uvedu přesunutí dveří. Při přesouvání dveří je v první řadě třeba zajistit, aby byl prostor, kam budou dveře přemístěny, volný. O splnění této podmínky se musí postarat controller zodpovědný za přesun dveří. Poté je třeba odstranit referenci na přesouvané dveře v instanci stěny, na které dveře ležely. Tuto instanci lze získat voláním metody getparentwall( ) na přesouvaných dveřích a není ji tedy třeba dohledávat průchodem všech stěn. Samotné odstranění dveří proběhne voláním příslušné metody na stěně. V dalším kroku je třeba přidat přesouvané dveře na stěnu, kam byly přesunuty. Stěnu, na kterou přesouvám dveře, určí controller před voláním metody na přesun dveří a předá ji jako parametr. Poté je upraven odkaz na stěnu v instanci dveří. Nakonec je vytvořena událost oznamující změnu dveří a ta je předána ke zpracování objektu třídy Graphic2DElementModel. Třída Graphic2DElementModel využívá k uložení svých prvků HashMap, ve kterých je jako klíč uložen prvek plánu a jako hodnota grafický prvek, který prvek plánu reprezentuje. Po dohledání odpovídajícího grafického prvku je na něm zavolána metoda update( ), která zajistí aktualizaci zobrazení podle změněných dat. Po vykonání těchto kroků je o změně plánu notifikován Canvas2D, který plán překreslí. V implementaci grafických prvků plánu jsem využil standartních tříd jazyka Java, které implementují rozhraní Shape. Důvodem k tomu je snadné vykreslení těchto objektů na plátno. Vykreslení probíhá voláním metody paint(graphics2d) na grafických prvcích plánu. Jako parametr je předána reference na objekt grafiky plátna. V této metodě je zpravidla nastavena barva výplně a voláním metody fill(shape) je tvar reprezentující prvek plánu vykreslen. 20

27 Za detailější rozebrání stojí například definice tvaru dveří ve třídě Door2D. Tvar, který reprezentuje dveře je vytvářen jako instance třídy GeneralPath.Double. Před vytvořením samotného tvaru je třeba určit definující body tvaru. Aby mohli být určeny, je nutné znát pozici dveří na stěně a směrový vektor stěny. Pozice dveří se získá zavoláním odpovídajícího getteru na instanci třídy Door, na kterou má grafcká reprezentace referenci. Směrový vektor stěny musí být orientovaný od počátku stěny k jejímu konci, aby bylo možné určit počáteční a koncový bod v rámci stěny. Takový vektor je vypočítán odečtením souřadnic prvního bodu od souřadnic druhého bodu. Tento vektor se normalizuje a naškáluje na délku odpovídající pozici dveří. Před škálováním vektoru se otočením pořadí souřadníc vektorů a vynásobením jedné jeho složky číslem -1 získá normála pro pozdějsí užití. Sečtením souřadnic prvního bodu stěny se souřadnicemi škálovaného vektoru se získá bod, který leží na stěně a zároveň na okraji dveří. Druhý bod opačného okraje dveří se získá stejným způsobem, pouze je třeba normalizovaný směrový vektor stěny násobit součtem pozice a šířky dveří. Abychom získali čtyři definující body tvaru, je třeba k oběma spočítaným bodům přičíst normalizovanou normálu stěny vynásobenou polovinou šířky výsledného obdélníku. Tím se získá první dvojice bodů. Odečtením stejné normály získáme druhou dvojice. Nyní zbývá jen definovat výsledný tvar pomocí získaných bodů a dveře lze vykreslit. 6.2 Ukládání plánu Pro ukládání plánu jsem se rozhodl využít možností serializace. Všechny prvky plánu jsou označeny interfacem Serializable. Serializována je instance třídy PersistentBlueprint, která pouze zapouzdřuje data plánu a nemá žádnou jinou funkci. Serializace zachovává reference mezi prvky, a není tedy třeba nic upravovat. Serializované objekty jsou ukládány standartně pomocí FileStream. Výsledné soubory mají příponu bpm. 6.3 Implementace funkcí editoru Na následujících řádcích se budu věnovat popisu algoritmů využitých v implementaci základních funkcí editoru. Nejdříve popíši způsob přesouvání objektů, poté se zaměřím na přidávání a odebíraní prvků s důrazem na nové stěny Přesun prvku Při přesouvání prvku je nejprve třeba zjistit, jaký prvek je přesouván a jakého typu přesouvaný prvek je. Nejdříve je třeba transformovat souřadnice kurzoru z prostoru plátna do prostoru prostoru plánu. Tento krok je stejný pro všechny další funkce a nebudu jej proto dále uvádět. Po transformaci souřadnic je třeba zjistit, který prvek leží pod kurzorem. Toto provádím jednoduchým neoptimalizovaným způsobem a to tak, že procházím všechny grafické prvky plánu dokud nenarazím na prvek, který bod obsahuje. Prvky procházím v opačném pořadí než jsou vykresleny, vybrán tedy bude pokaždé prvek, který byl vykreslen jako poslední a je tedy na vrchu. Přesunout lze pouze okna, dveře, nábytek a kontrolní body. Užitý algoritmus se liší podle typu vybraného objektu. 21

28 Nejjednoduším je přesun nábytku. Nábytek nepočítá s kolizemi a je tedy možné jej přesunout ihned, bez testování kolizí. Přesun oken a dveří zajišťuje stejný algoritmus. Nejdříve je třeba určit, která stěna se nachází nejblíže kurzoru. Toto se provádí průchodem všech instancí Wall2D, které představují grafické zobrazení stěny. Během průchodu se zjišťuje, zda je kurzor uvnitř obalového tělesa některé stěny. Referenci na tuto stěnu udržuji jako jednu ze stavových proměných. Tuto proměnnou, kterou budu dále nazývat aktuální stěna, změním, pokud se kurzor přesune do obalu jiné stěny. Při začátku algoritmu bude aktuální stěnou ta stěna, na které dveře nebo okno právě leží. Je tomu tak proto, že celá plocha přesouvaného okna nebo dveří, kterou uživatel musel vybrat kliknutím, leží v obalovém tělese této stěny. Vyjímkou mohou být dveře a okna v rozích místnost, kdy se může první aktuální stěnou stát stěna vedlejší. Podstatné je, že aktuální stěna je vždy definována a nestane se tedy, že by okno nebo dveře nebylo kam přesunout. V dalším kroku spočítám vektor, který směřuje od prvního bodu stěny k bodu pod kurzorem. Dále spočítám skalární součin tohoto vektoru se směrovým vektorem stěny. Směrovým vektorem stěny se myslí směrový vektor orientovaný po směru stěny s počátkem v prvním bodu. Pokud je výsledný skalární součin záporný, mohu konstatovat, že úhel obou vektorů je větší než 90 a tedy že bod pod kurzorem leží před prvním bodem. Výsledná pozice dveří nebo okna by tedy byla záporná. V takovém případě nemusím provádět další výpočty a nechám okno nebo dveře přesunout na okraj stěny voláním příslušné metody datového modelu. Pokud je skalární součin kladný, pak musím určit souřadnice bodu, který leží na přímce stěny a je nejblíže kurzoru. Tento bod naleznu jako průsečík přímky stěny s přímkou, která je na stěnu kolmá a prochází bodem pod kurzorem. V posledním kroku spočítám vzdálenost nalezeného bodu od prvního bodu přímky. Pokud vzdálenost není větší, než délka stěny, pak dveře nebo okno přesunu na spočítanou pozici. V opačném případě přesouvám na okraj stěny. Algoritmus samozřejmě bere v potaz šířku přesouvaného okna nebo dveří. Kromě toho je přesun upraven podle místa na oknu nebo dveřích, na které uživatel kliknul a to tak, že po přesunutí dveří bude kurzor na stejné pozici vzhledem ke dveřím. Přesouvání kontrolních bodů vyžaduje větší počet testů. Je třeba dbát na to, aby se po přesunutí bodu žádné stěny nekřížily a zároveň aby se okna nebo dveře nevyskytly mimo stěnu tím, jak se stěna přesunutím bodu zkrátí. V takovém případě by se měl kontrolní bod zaseknout o dveře nebo okno a pohybovat se po kružnici. Je ale třeba počítat s možností, že takových dveří nebo oken je více, protože stěn, které jsou připojeny ke kontrolnímu bodu může být více než jedna. Před zahájením testování je třeba zjistit pozice všech kontrolních bodů na opačných stranách připojených stěn. Dále se určí nejmenší přípustná vzdálenost od každého sousedního bodu. Tato vzdálenost je dána nejbližším okrajem nejbližšího okna nebo dveří na společné stěně. Vzdálenost není třeba dopočítávat, pro porovnání bude stačit její druhá mocnina. Kombinaci sousedního bodu a minimální vzdálenosti od něj si lze představit jako kruh, do kterého se přesouvaný bod nesmí dostat. Jako první test zjišťuji porovnáváním druhých mocnin vzdáleností, zda by bod po přesunutí ležel ve sjednocení těchto kružnic. Pokud tomu tak není, pak zbývá otestovat všechny stěny přichycené k přesouvanému bodu, zda by se po přesunutí bodu neprotínaly s jinou stěnou. Pokud ne, pak mohu bod bez problému přesunout. Pokud ano, pak nechám bod na současném místě. 22

29 Pokud by se bod po přesunutí nacházel ve sjednocení kružnic, je třeba nalézt bod na okraji sjednocení, který je nejblíže bodu na který chtěl uživatel kontrolní bod přesunout. Algoritmus, který jsem pro tento účel vymyslel, je založen spíše na užití hrubé síly, ale pro rozsah dat, nad kterými algoritmus pracuje, je dostačující. Nejdříve jsou pro každou kružnici sjednocení spočítány průsečíky kružnice s její sečnou, procházející středem kružnice a bodem pod kurzorem. Z množiny takových průsečíků jsou eliminovány ty, které leží uvnitř jiného kruhu a nejsou tedy na okraji sjednocení. Pokud nějaké průsečíky zbyly, vyberu ten, který je neblíže kurzoru. Tím získám výsledný bod na který bude bod přesunut, pokud by se po by po přesunutí nedoělo k protnutí stěn. V opačném případě, kdy byly všechny průsečíky eliminovány, je třeba hledat kandidáty mezi průsečíky kružnic. Z těchto průsečíků jsou opět eliminovány ty, které leží uvnitř jiných kružnic. Tentokrát je ale jisté, že nebudou eliminovány všechny průsečíky. Ze zbývajících bodů tedy vyberu ten, co je nejblíže k bodu pod kurzorem. Zbývá otestovat, zda by se po posunutí kontrolního bodu některé stěny protínaly. Pokud tomu tak není, pak mohu bod konečně přesunout na spočítanou pozici. 6.4 Přidání prvku Při přidávání nových prvků je, s vyjímkou nábytku, třeba otestovat, zda by nově přidávaný prvek nekolidoval s prvky, které v plánu již jsou. Průběh těchto testů je prakticky totožný s testováním při přesouvání prvků stejného typu a proto je zde nebudu rozebírat. Jediným případem, ve kterém toto neplatí, je přidání kontrolních bodů, respektive stěn. Právě postupu při přidávání stěn se budu v této kapitole věnovat. Přidání stěn je možné pouze označením existujících okrajových kontrolních bodů, nebo vytvořením nových kontrolních bodů. Kontrolní ale bod nemůže v plánu existovat sám o sobě, protože by neměl žádný účel. Před přidáním stěny je třeba provést testování, zda je možné zeď umístit. Testy se skládají především z detekce protínání stěn. Tato detekce je prováděna hrubou silou nad množinou všech stěn. Kromě toho je třeba zajistit, aby uživatel nevytvářel stěny mimo obvod plánu, který je dán obvodem základní místností vytvořené v novém plánu. Pokud by nebylo možné stěnu vytvořit, je tento stav vyznačen uživateli změnou barvy kontrolního bodu a případně i stěny, kterou se snaží vytvořit. Pokud může dojít k vytvoření nové stěny, pak je možné směřovat další kroky algoritmu na základě vztahu okrajových bodů nové stěny s místností ve které nová stěna leží. Následující situace indikují vznik nové místnosti: spojení dvou bodů na okraji místnosti, spojení dvou cest na okraj, spojení cesty na okraj s okrajem a spojení cesty se sebou. Poslední možností, kterou by bylo možné vytvořit místnost, je spojení vniřních stěn do kruhu. Vzniku této možnosti je ale zamezeno detekcí kruhů při spojování dvou bodů na vnitřních stěnách, tudíž tuto možnost nebudu uvažovat. V ostatních případech nová místnost nevzniká, přesto může být třeba upravit například seznam cest na okraj. 23

30 Nejjednoduším případem přidání stěny je připojení nové stěny k vnitřní stěně. Vnitřní stěnou se myslí stěna, jejíž krajní body nejsou součásti okraje místnosti, ani cesty na okraj místnosti. Tento případ vyžaduje pouze přidání stěny do seznamu stěn upravované místnosti a opačně přidání místnosti do seznamu místností stěny. Spojením dvou bodů ležících na vnitřnich stěnách dojdeme ke stejnému výsledku. Dalším případem je připojení stěny k cestě na okraj. Pokud připojuji stěnu na poslední bod cesty na kraj, což je bod na okraji cesty v prostoru místnosti, pak stačí prodloužit tuto cestu na okraj o nově vzniklou stěnu, respektive o nový krajní bod. Samozřejmostí je aktualizace seznamu stěn v místnosti a seznamu místností ve stěně. Pokud je stěna připojena k nějakému vnitřnímu bodu cesty na kraj, pak je třeba vytvořit novou cestu na kraj. Tato stěna bude tvořena úsekem původní cesty mezi okrajem místnosti a bodem spoje. K tomuto úseku bude připojen nový krajní bod. Původní cesta zůstane samozřejmě zachována, přidána je pouze nová cesta. Mezi zajímavější případy patří spojení cesty na kraj s vnitřním úsekem. Pokud dojde k takové situaci, pak je třeba detekovat všechny nové cesty na kraj a přidat je do místnosti. Detekce nových cest na kraj je realizována rekurzivním algoritmem na podobném principu jako prohledávání stromu do hloubky. Algoritmus prochází postupně všechny větve ve vnitřních stěnách a ukládá si současnou cestu. Pokud při průchodu narazí na konec větve, pak uloží prošlou cestu do zásobníku a vrací se na poslední rozcestí s cestou, která ještě nebyla navštívena. Běh algoritmu končí ve chvíli, kdy není rozcestí s nenavštívenou větví. V ten moment je možné vytvořit nové cesty na okraj místnosti. Tyto cesty vznknou spojením podcesty mezi okrajovým bodem a bodem spoje s detekovanými cestami v zásobníku. Nejsložitějšími případy jsou situace ve kterých vzniká nová místnost. V takovém případě je hlavním cílem rozdělit obvod původní místnosti na dva obvody nových místností. Způsob rozdělení obvodu se liší podle konkréní situace. V případě, že je jsou spojeny přímo okraje místností, okraj místnosti s cestou na okraj, nebo dvě cesty na okraj (Obr. 7), pak začne algoritmus průchodem původního obvodu od počátečního bodu (velký modrý bod). Cestu kterou prochází si ukládá. Pokud narazí na okrajový bod spoje, pak začne ukládat novou cestu (původní zůstává uložena pro pozdější zpracování první modrá šipka). Spojem se v tomto případě rozumí nová spojnice bodů na obvodu (oranžově označené body). Algoritmus dále prochází body obvodu, dokud znovu nenarazí na nějaký bod spoje. Pokud se jedná o stejný bod, který je na počátku právě procházeného úseku, pak byla nalezena smyčka (zelená šipkaé. Tato smyčku je uložena stranou Obr. 7: Schéma situace při vzniku místnosti spojením bodů na cestách na okraj pro pozdější zpracování a je zahájen průchod nového úseku. Úsek se prochází opět do doby, se nenarazí na bod spoje. 24

31 Pokud je nalezeným bodem spoje jiný bod, než ten na začátku procházeného úseku, pak mohu s jistotou prohlásit, že právě prošlý úsek bude součástí jednoho z nových obvodů místností a cestu tedy uložím stranou (červená šipka). V opačném případě jsem detekoval další smyčku, což se může ještě opakovat. Na konec zbývá projít zbytek obvodu a prošlou cestu uložit (druhá modrá šipka). Je ale třeba detekovat smyčky, které by se mohly vyskytnout i u druhého bodu spoje. V případě, že původní cesta začíná přímo na spoji, jsou po průchodu cesty uloženy oba úseky nových obvodů a stačí pouze přidat body na spoji ve správném pořadí, pokud nová místnost vzniká spojením cesty na okraj s okrajem, nebo dvou cest na okraj. Pokud původní obvodová cesta nezačínala na spoji, pak je třeba před případným přidáním bodů spoje spojit první prošlý úsek s posledním (obě modré šipky za sebe). V tuto chvíli mám k dispozici oba nové obvody místností a zbývá k nim pouze přidat nalezené smyčky. Protože se nesmí žádné zdi protínat, můžeme říct, že všechny body smyčky musí ležet buď v jedné, nebo v druhé místnosti. Smyčky tedy rozdělím podle toho, v jaké místnosti se nachází některý jejich bod. Zbývá rozdělit všechny prvky původní místnosti. Jako první se rozdělí body, které jsou na okraji nově vzniklých místností. Následují body, které jsou v cestách na kraj. V případě, že cesta na kraj nezačíná na společném bodě obou nových místností, je možné zařadit cestu ihned. V opačném případě proběhne zařazení cesty podle pozice prvního bodu cesty. Pokud nová místnost vznikla spojením cesty na okraj s obvodem, pak je třeba před tímto krokem vytvořit nové cesty na okraj s počátkem v některém z bodů spoje. Po rozdělení bodů v cestách na kraj zbývá rozdělit vnítřní body místností. Zde nelze jinak, než porovnávat pozice bodů. Po rozdělení všech bodů je možné snadno rozdělit stěny podle příslušnosti jejich kntrolních bodů. Posledním krokem při rozdělování je odstranění referencí na původní místnost v bodech a stěnách, které nyní patří pouze nové místnosti. Nakonec je třeba vytvořit novou místnost a upravit objekt původní mistnosti, čímž se zachovají její ostatní vlastnosti. Speciálními případy při vytváření nových místností jsou spoj dvou cest na kraj se stejným počátkem a spoj cesty na kraj se sebou. V obou případech vzniká nová místnost jako smyčka, u které je třeba po detekování obvodu určit, zda je orientovaná po směru hodinových ručiček, nebo proti směru. K tomuto účelu je využito algoritmu pro výpočet váženého obsahu mnohoúhelníka [10]. Také je třeba určit cestu, která spojuje tuto smyčku s okrajem původní místnosti a začlenit ji do výsledného obvodu. 6.5 Odstranění prvku Odstraňování všech prvků kromě stěn a kontrolních bodů není omezeno žádnými podmínkami. Při jejich mazání je pouze třeba upravit vztahy mezi prvky plánu tak, aby se zachovala jejich konzistence. Mazání kontrolních bodů je omezeno několika podmínkami. V první řadě nesmí být k mazanému bodu připojeno více než dvě stěny. Dále nesmí žádná stěna obsahovat okna nebo dveře. Tato podmínka je zde z toho důvodu, aby si uživatel neostranil prvky které nechtěl ostranit. Pokud je kontrolní bod součástí obvodu místnosti, pak tento obvod musí obsahovat alespoň 4 body včetně mazaného bodu. Pokud jsou splněny tyto podmínky, pak zbývá pouze ověřit, že nedojde k protnutí stávájících stěn novou stěnou, která vzníkne mezi zbývajícími body stěn připojených k mazanému bodu. 25

32 Pokud je k bodu připojena pouze jediná stěna, pak je možné bod smazat i se stěnou, pokud stěna neobsahuje žádná okna a dveře. V tomto případě je možné, že bude třeba upravit nebo odstranit cestu na kraj, pokud byl mazaný bod součástí některé. Při mazání stěn je pouze třeba zajistit, aby mazaná stěna nebyla na obvodu plánu a aby mazaná stěna nespojovala okraj místnosti s vnitřní smyčkou. Pokud jsou tyto podmínky splněny, pak je možné stěnu odstranit. Pokud byla stěna součásti jediné místnosti, pak stačí odstranit smazanou stěnu ze seznamu stěn v místnosti a není třeba provádět další úkony. Pokud stěna rozdělovala dvě místnosti, pak je třeba obě místnosti sloučit do jedné. K tomu je potřeba nejdříve detekovat společné stěny obou místností, které leží na spoji, který bude odebráním stěny přerušen. Algoritmus prochází najednou obvody obou místností směrem od smazané stěny a zjišťuje, zda jsou shodné. Pokud narazí na rozdíl, pak se pokusí najít v bodě, kde byl detekován rozdíl, smyčku. Pokud ji nalezne, pak je třeba zbytek společné cesty, pokud nějaká další je, učinit součástí nového obvodu spojené místnosti. Pokud není žádná smyčka nalezena, pak bude třeba vytvořit nové cesty na kraj a zároveň upravit ty, které ležely na spoji. Části obvodů obou místností, které nebyly součásti detekovaného úseku je možné spojit do celku, který se stane obvodem spojené místnosti. Zbývá jen sjednotit všechny prvky obou místností a přidat je do nově vzniklé. 6.6 Vytváření geometrie a grafu scény Při vytváření geometrie postupuji nejdříve po jednotlivých místnostech a počítám nové souřadnice obvodu místnosti, které zohlední tloušťku stěn. Pro každou stěnu v obvodu místnosti je třeba určit normálu orientovanou směrem do místnosti. Tato normála je poté upravena tak, aby měla délku rovnou polovině tloušťky stěny. Přičtením této normály k okrajovému bodu stěny získám bod, pomocí kterého určím obecnou rovnici přímky, která je se stěnou rovnoběžná a je od stěny vzdálená polovinu tloušťky stěny. Pro každé dvě sousední stěny spočítám průsečíky těchto přímek a uložím je je ve stejném pořadí, jako měli původní kontrolní body. Z upravených obvodů mohu vytvořit geometrii podlahy s pomocí třídy GeometryInfo, která je součástí Java3D. Před vytvořením geometrie je třeba určit texturovací souřadnice podlahy, ktreé jsou voleny tak, aby strana textury představovala jeden metr v měřítku scény. Vytvořenému objektu, který je instancí třídy Shape3D, přiřadím materiál s načtenou texturou. Poté mohu objekt přidat do grafu scény. V dalším kroku vytvořím z upravených souřadnic obvodu místnosti obvodové stěny. K uložení geometrie stěn využívám třídu IndexedTriangleArray, která představuje prokládané indexované pole s trojuhelníky. Do pole kromě souřadnic vertexů ukládám také definici normál. Při generování geometrie vytvářím také otvory pro okna dveře. Z naplněného pole je vytvořena instance třídy Shape3D, které je přiřazen materiál odpovídající barvě stěn. Po přiřazení materiálu je objekt přidán do grafu scény. V následujícím kroku je podobnýcm způsobem vytvořena geometrie vnitřních stěn. Vnitřní stěny jsou pouze kvádry, jejich geometrie není ve spojích nijak upravena. 26

33 V dalším kroku postupně vytvářím geometrii dveří a oken. Dveře se skládají ze čtyř objektů, které představují prah, samotné dveře a klik na obou stranách. Okna se skládají z geometrie rámů pro kažou stranu stěny a z geometrie výplně. Každé části oken a dvěří je přiřazen materiál, který nelze v editoru nijak měnit. Výsledné objekty jsou opět přidány do grafu scény. Po přidání oken a dveří je třeba přidat nábytek. Pro každou instanci nábytku v plánu je vytvořen klon objektu na který ukazuje, protože instance třídy BranchGroup není možné do grafu scény přidat několikrát. Posledním krokem je vytvoření a přidání osvětlení. Scéna je osvětlena ze třé směrů třemi směrovými světly s nízkou intenzitou. Tento graf scény je celý znovu vytvářen při zobrazení vizualizace pokaždé, pokud byla změněna struktura plánu. Než je nový graf vytvořen, zobrazuje se starý graf. Po ukončení výpočtu je starý graf scény za chodu vyměněn z nový. 27

34 7 Testování V této kapitole se budu věnovat testování vytvořené aplikace. Cílem testování bude ověřit, zda je vytvořený program schopen splnit svůj účel, tedy vytvořit vizualizaci jednopodlažního bytu na základě půdorysu. Metodou testování bude vytváření vizualizací na základě půdorysných plánů existujících bytů. Pro testování jsem vybral tři půdorysy jednopodlažnich bytů různých rozměrů a struktury. Jedná se o dva byty 2+kk a jeden byt 3+1. Vybrané půdorysy obsahují rozměry prvků plánu, mělo by tedy být možné je replikovat v měřítku. Všechny testované půdorysy jsem nalezl na internetu na stránkách různých společností, které se zabývají realitami. Webové stránky jsou uvedeny ve zdrojích a kompletní dokumenty s půdorysem jsou součástí obsahu CD. Zdrojem modelů nábytku byl server Turbosquid [11]. Všem modelům byla před použitím v aplikaci vytvořena nová definice materiálů, protože většinou chyběla, nebo nebyla esteticky vyhovující. Některým modelům byla pozměněna geometrie, především orientace v prostoru a škála. 7.1 Test 1 byt 2+kk Zdrojem půdorysu tohoto bytu (Obr. 8) jsou stránky projektu Jablonecké byty [12]. Tento půdorys jsem vybral jako příklad jednoduchého obdélníkového bytu. Při vytvářené půdorysu v editoru (Obr. 9) jsem nejdříve určil obvodové stěny celého bytu přesunutím kontrolních bodů základní místnosti tak, aby odpovídaly rozměry. Poté jsem rozdělováním základní místnosti nadefinoval místnosti bytu. V dalším kroku jsem umístil okna a dveře na pozice z půdorysu a nastavil jim opovídající šířku. Zbývající rozměry byly určeny odhadem, protože nejsou součástí plánu. Po určení oken a dvěří jsem vybral barvu a texturu stěny a začal umisťovat nábytek. Při umisťování nábytku bylo třeba několikrát přejít mezi režimy zobrazení, než bylo dosaženo požadované pozice, rotace a velikosti přidaného kusu nábytku. Obr. 8: Půdorys bytu pro první test 28

35 Výsledná vizualizace (Obr. 10) vystihuje uspořádání prostoru a nábytku. Je zřejmé, že s bohatší kolekcí modelů nábytku a doplňků by bylo možné zaplnit místnost přesně tak, jak je to uvedeno na půdorysu, nebo na základě fantazie uživatele. Obr. 9: Půdorys bytu vytvořený v editoru při prvním testu Obr. 10: Vizualizace prvního půdorysu (šedé pozadí bylo odstaněno) 29

36 7.2 Test 2 byt 2+kk Zdrojem půdorysu druhého bytu (Obr. 11) je web projektu Jilemnice byty [13]. Tento půdorys byl vybrán jako příklad plánu s nepravidelným obvodem. Postup vytváření plánu je totožný s prvním testem. Vytváření půdorysného plánu v editoru (Obr. 12) ale trvalo delší dobu. Výsledná vizualizace táké umožňuje uživateli získat přehled o uspořádání a rozměrech prostoru a nábytku. Kovexni nepravidelný tvar obvodu bytu tedy nečiní editoru potíže. Obr. 11: Půdorys druhého bytu (Otočeno o 90 ) 30

37 Obr. 12: Půdorys druhého bytu v editoru Obr. 13: Výsledná vizualizace (šedé pozadí bylo odstraněno) 31

38 7.3 Test 3 byt 4+kk Zdrojem půdorysného plánu pro poslední test (Obr. 14) jsou stránky projektu Byty Cihlářská [14]. Tento půdorys jsem vybral jako přiklad většího bytu, který navíc obsahuje šikmé stěny a má konkávní obvod. Postup vytváření plánu (Obr. 15) se neliší od předchozího postupu. Pouze zabral ještě více času, než konstrukce plánu druhého bytu. Výsledná vizualizace (Obr. 16) je kompletní a neobsahuje žádné chyby. Obr. 14: Půdorys třetího bytu (Otočeno o 90 ) 32