Virtuální mikroskop - itspy.cz · práce je duležitá˚ cástˇ nesoucí název „Hypertextový atlas patologie“, která primárneˇ slouží pro studenty lékarskýchˇ oboru.˚

MASARYKOVA UNIVERZITAFAKULTA INFORMATIKY

}w�� !"#$%&'()+,-./012345<yA|Virtuální mikroskop

DIPLOMOVÁ PRÁCE

Bc. Pavel Beran

Brno, 2013

Prohlášení

Prohlašuji, že tato diplomová práce je mým puvodním autorskýmdílem, které jsem vypracoval samostatne. Všechny zdroje, pramenya literaturu, které jsem pri vypracování používal nebo z nich cerpal,v práci rádne cituji s uvedením úplného odkazu na príslušný zdroj.

Bc. Pavel Beran

Vedoucí práce: RNDr. Lukáš Hejtmánek, Ph.D.

ii

Podekování

Rád bych podekoval vedoucímu diplomové práce panu RNDr. LukášiHejtmánkovi, Ph.D. za odborné vedení práce a jeho velice cenné radyposkytované v prubehu práce. Dále panu docentu Josefu Feitovi zapomoc a trpelivost pri testování aplikace a jeho podnety pri jejímvytvárení. Podekování patrí též Mgr. Slávkovi Licehammerovi zajeho odbornou pomoc v záveru vývoje aplikace, kdy mi asistoval prinasazení aplikace do provozního prostredí a umístení ostrých datdo databáze. Dekuji též mé rodine a všem známým, kterí me behempráce morálne podporovali.

iii

Shrnutí

Cílem diplomové práce bylo prevzít poslední verzi upravené we-bové aplikace Virtuální mikroskop, která slouží pro zobrazení pa-tologických snímku ve velmi vysokém rozlišení (rádove nekolik gi-gapixelu) a upravit ji – napríklad rozšírit o možnost správy anotací,synchronizaci mezi prohlížeci v rámci sezení, zajistit podporu v ak-tuálne používaných internetových prohlížecích a celkove prepraco-vat datový model staré aplikace. Jako rozšírení diplomní práce nadrámec puvodního zadání lze zmínit implementaci šesti uživatelskýchpráv, kompletní správu definic snímku pomocí webového rozhranímikroskopu až po možnost odeslat adresu aktuální pozice ve snímku.Výstupem diplomové práce je samotný text práce a kód upravené ap-likace Virtuálního mikroskopu vcetne jeho dokumentace. Aplikace jeod 26. 3. 2013 funkcne nasazena v ostrém provozu webového portáluAtlases pro témer 12 tisíc patologických snímku.

iv

Klícová slova

atlases.muni.cz, JavaScript, PHP, virtuální mikroskop, snímky vevysokém rozlišení

v

Obsah

1 Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Popis puvodní aplikace . . . . . . . . . . . . . . . . . . . . . 4

2.1 První verze . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2 Upravená verze . . . . . . . . . . . . . . . . . . . . . . . 62.3 Výchozí verze pro diplomovou práci . . . . . . . . . . . 6

2.3.1 Podpora v internetových prohlížecích . . . . . . 92.3.2 Styl psaní kódu . . . . . . . . . . . . . . . . . . . 102.3.3 Starý systém souboru . . . . . . . . . . . . . . . 11

3 Technologie použité pro vývoj aplikace . . . . . . . . . . . . 133.1 Technologie použité na strane uživatele . . . . . . . . . 13

3.1.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . 133.1.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 143.1.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . 14

3.2 Serverové technologie . . . . . . . . . . . . . . . . . . . 153.2.1 PHP . . . . . . . . . . . . . . . . . . . . . . . . . 153.2.2 MySQL . . . . . . . . . . . . . . . . . . . . . . . . 16

3.3 Vývojové prostredí . . . . . . . . . . . . . . . . . . . . . 164 Existující systémy . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.1 Zoomify . . . . . . . . . . . . . . . . . . . . . . . . . . . 184.2 PanoJS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184.3 OpenLayers . . . . . . . . . . . . . . . . . . . . . . . . . 19

5 Nový Virtuální mikroskop . . . . . . . . . . . . . . . . . . . 205.1 Popis aplikace . . . . . . . . . . . . . . . . . . . . . . . . 205.2 Prevzatá funkcionalita z predcházející verze . . . . . . 215.3 Úpravy v predcházející verzi . . . . . . . . . . . . . . . 22

5.3.1 Odstranení chyb v MSIE . . . . . . . . . . . . . . 225.3.2 Odstranení chyb v prohlížeci Firefox . . . . . . . 265.3.3 Odstranení chyb v mobilních prohlížecích . . . 275.3.4 Refaktoring kódu . . . . . . . . . . . . . . . . . . 285.3.5 Zmena datové vrstvy . . . . . . . . . . . . . . . . 29

5.4 Aplikacní vrstva . . . . . . . . . . . . . . . . . . . . . . . 295.4.1 Rozšírení podpory pro další mobilní prohlížece 295.4.2 Uživatelská práva . . . . . . . . . . . . . . . . . 31

5.5 Synchronizace více prohlížecu v rámci sezení . . . . . . 335.5.1 Založení a pripojení k sezení . . . . . . . . . . . 34

1

5.5.2 Komunikace prohlížec – server . . . . . . . . . . 355.5.3 Uložení dat na serveru . . . . . . . . . . . . . . . 365.5.4 Generování ID sezení . . . . . . . . . . . . . . . 375.5.5 Reakce na odpojení uživatele . . . . . . . . . . . 38

5.6 Datová vrstva . . . . . . . . . . . . . . . . . . . . . . . . 395.6.1 Puvodní XML struktura . . . . . . . . . . . . . . 395.6.2 XML soubor s definicí autoru . . . . . . . . . . . 485.6.3 HTML soubor Virtuálního mikroskopu . . . . . 495.6.4 Databáze . . . . . . . . . . . . . . . . . . . . . . . 505.6.5 Mapování uživatelu . . . . . . . . . . . . . . . . 515.6.6 Soubory aplikace na serveru . . . . . . . . . . . 51

6 Aktuální stav Virtuálního mikroskopu . . . . . . . . . . . . 536.1 Další vývoj . . . . . . . . . . . . . . . . . . . . . . . . . . 54

7 Záver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56A Obsah priloženého CD . . . . . . . . . . . . . . . . . . . . . 59B Soubory aplikace . . . . . . . . . . . . . . . . . . . . . . . . . 60

B.1 Konfiguracní soubory a skripty . . . . . . . . . . . . . . 60B.2 Skripty pro získání pocátecní definice snímku . . . . . . 60B.3 Skripty pro správu anotací a jejich znacek . . . . . . . . 61B.4 Skripty pro správu definic snímku . . . . . . . . . . . . 62B.5 Skripty pro správu popisu snímku . . . . . . . . . . . . 63B.6 Skripty pro správu vlastní historie . . . . . . . . . . . . 63B.7 Skripty pro vlastní nastavení . . . . . . . . . . . . . . . 63B.8 Skripty pro synchronizaci prohlížecu . . . . . . . . . . . 64B.9 Soubory aplikacní cásti . . . . . . . . . . . . . . . . . . . 65

C Databáze aplikace . . . . . . . . . . . . . . . . . . . . . . . . 67D Ukázky kódu . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

D.1 Struktura puvodního XML formátu definice snímku . . 70D.2 Definice autora v souboru authors.xml . . . . . . . . . . 71D.3 HTML soubor pro výchozí verzi Virtuálního mikroskopu 72D.4 Nový HTML soubor pro Virtuální mikroskop . . . . . . 74

2

1 Úvod

Portál Atlases1 je unikátní internetová stránka obsahující desetitisícesnímku patologických vzorku nádoru, kožních nemocí, tkání a dalšíchpreparátu, z toho vetšinu ve velmi vysokém rozlišení (rádove jed-notky gigapixelu). Portál je rozdelen na šest cástí, pricemž z pohledupráce je duležitá cást nesoucí název „Hypertextový atlas patologie“,která primárne slouží pro studenty lékarských oboru. Portál jako celekje využíván uživateli prakticky z celého sveta. Za posledních šestmesícu dosahoval podíl uživatelu z oblastí mimo Ceskou a Sloven-skou republiku témer 40 % veškeré návštevnosti portálu. V rámcicelého portálu Atlases je pro zobrazení snímku využito aplikace, kteránese název Virtuální mikroskop (Virtual microscope). První verze tétoaplikace, která v dobe psaní této diplomové práce byla nasazena nacelém portálu, byla vytvorena panem Josefem Feitem približne v roce2000. V rámci dalšího vývoje byla aplikace postupne upravovánado modernejší podoby, avšak k jejímu nasazení do ostrého provozunikdy nedošlo, hlavne kvuli vážným chybám, které obsahovala.

Cílem diplomové práce bylo prevzít poslední verzi aplikace Vir-tuálního mikroskopu a upravit jí podle zadání práce. Jednotlivé krokyúprav spocívají v odstranení závažných nedostatku, které bránilynasazení aplikace do provozního prostredí a její další vývoj. Dálešlo o rozšírení podpory o anotace a jejich správu, o možnost, abysi uživatel mohl uložit vlastní pozice pro snímek ci správa popisusnímku. Jednou z nejobsáhlejších cástí práce bylo zajištení podporyaplikace v dnešních internetových prohlížecích bez výrazných rozdíluci omezení, podpora synchronizace více prohlížecu v rámci sezení(obdoba sdílení plochy) a kompletní prestavení datové struktury ap-likace.

V tomto textu se nejprve venuji popisum trí verzí Virtuálníhomikroskopu, a to od verze úplne první, pres verzi vytvorenou v rámcibakalárské práce pana Slávka Licehammera, až po její poslední up-ravenou verzi, která sloužila jako výchozí verze pro další úpravya vývoj. Následující kapitola obsahuje popis technologií použitýchpro vývoj aplikace, a to jak na strane serverové, tak klientské. Ve

1. https://atlases.muni.cz

3

https://atlases.muni.cz

1. ÚVOD

tretí kapitole práce je možné se dozvedet o existenci podobných sys-tému pro správu snímku ve velmi vysokém rozlišení. Predposledníkapitola obsahuje podrobný popis aplikace, prevzatou funkcional-itu z puvodní verze a popis puvodní datové struktury. Dále se zdelze docíst informace o databázovém modelu, skriptech pro prácis aplikací a samotných souborech aplikace. Cást této kapitoly je takévenována popisu synchronizace mezi prohlížeci. Poslední kapitola ob-sahuje strucný popis aktuálního stavu Virtuálního mikroskopu vcetnenekolika zajímavých dat. V príloze je dále uveden obsah priloženéhoCD a také ukázky kódu spolu s XML strukturami puvodní datovévrstvy. Aplikaci vytvorenou v rámci diplomové práce je možné dálevolne šírit a modifikovat pod licencí GNU/GPL.

4

2 Popis puvodní aplikace

V této kapitole je popsána puvodní aplikace pro prohlížení obrázkuv rámci portálu Atlases (Virtuální mikroskop) a zároven také posky-tuje približný pohled na jednotlivé vývojové verze této aplikace.

Originální verze mikroskopu byla vyvinuta v roce 2000 panemJosefem Feitem, který v soucasné dobe pusobí jako prednosta naÚstavu patologie Lékarské fakulty Masarykovy univerzity. Tato verzeje mimo jiné stále využívána na vetšine webového portálu.

2.1 První verze

První verze Virtuálního mikroskopuje v soucasné dobe používánana peti ze šesti cástí webového portálu Atlases. Jmenovite se jednáo cásti:

• Hypertextový atlas dermatopatologie

• Hypertextový atlas fetální patologie

• Hypertextový atlas novorozenecké patologie

• Hypertextový atlas patologie kostní drene

• Hypertextový atlas vzácných lymfomu

Aplikace se skládá ze trí oken otevrených v internetovém prohlížeci,pricemž dve z nich je nutné zobrazit manuálne (pokud jsou k dis-pozici). Hlavní a první okno, které se uživateli otevre, je okno náhle-dové, ve kterém je mimo jiné uživateli umožneno zprístupnení dalšíchcástí mikroskopu. Temi mohou být okno pro možnost zobrazení ano-tací a okno pro detailní náhled snímku (obrázek 2.1).

V hlavním náhledovém okne (na obrázku oznaceném císlem 1)se krome celkového náhledu na zmenšený snímek zobrazuje neko-lik ikon, které slouží práve pro možnost zobrazení dalších castí ap-likace. Do tohoto okna se zároven zobrazují prípadné anotace, pokudjsou pro snímek definovány (v okne zobrazená zelená šipka). K zo-brazení a správe anotací slouží výše zmínené druhé okno aplikace(na obrázku oznacené císlem 2). Obsahuje odrážky textu, na který

5

2. POPIS PUVODNÍ APLIKACE

Obrázek 2.1: Stará verze Virtuálního mikroskopu

muže uživatel kliknout myší, a pokud je s textem spojena anotace,zobrazí se ve forme barevné šipky nebo tecky do náhledového okna.Tretí okno mikroskopu (oznacené císlem 3) slouží pro detailní náhledna snímek a umožnuje uživateli snímkem posouvat pomocí myšipri držení levého tlacítka. Je zde také možnost snímek priblížit popredem definovaných úrovních priblížení anebo zmenit fokusovacívrstvu snímku, která slouží ke zmene „ostrení“ snímku (v prípade,že snímek byl porízen v nekolika rovinách zaostrení). V okne c. 3se zpravidla zobrazuje pouze urcitý výrez reálného snímku, který jefyzicky rozdelen na nekolik (i desítek tisíc) malých dlaždic, ze kterýchje poté výsledný požadovaný výrez složen. Originální obrázek jezpravidla velký nekolik gigapixelu a tomu odpovídá i reálná velikostna disku. Není tedy možné zobrazit snímek jako jednotný celek v plnévelikosti. Mikroskop v tomto pripomíná pomerne známé systémy pro

6


zobrazení mapových podkladu v internetových prohlížecích (napr.Google maps).

Pro každý obrázek existuje samostatný HTML soubor, kterýumožnuje zobrazení mikroskopu a práci s ním. Pro samotnoupráci (otevírání oken, posun snímkem, zobrazení anotací atd.)s mikroskopem je pak využito jazyka JavaScript. Bližší popis tétoverze mikroskopu, vcetne detailu týkající se datové vrstvy, je možnénajít v bakalárské práci pana Slávka Licehammera [5].

2.2 Upravená verze

V rámci bakalárské práce zmínené v predchozí podkapitole, bylaprvní verze mikroskopu zmodernizována a prevedena do podobyjednooknové aplikace, která kombinuje možnosti všech trí puvod-ních oken pri soucasném zachování veškeré puvodní funkcnosti.Nadále tedy bylo možné pomocí tlacítek menit priblížení snímkuo predem urcenou úroven, posouvat snímek pomocí myši a zobrazitdo snímku anotace, které byly na rozdíl od predchozí verze viditelnéi pri priblížení snímku. Jako úplne nová funkcionalita byla pridánamožnost vkládání anotací libovolnému uživateli pomocí formuláreprímo v hlavním okne aplikace. Tímto zpusobem vložené anotacebyly následne schváleny správcem, nebo zamítnuty a ze systémuodstraneny. Popis aplikace, vcetne tvorby a podrobnejších informacílze nalézt v odkazované práci. Snímek takto upraveného mikroskopuje možné si prohlédnout na obrázku 2.2 a pochází z výše zminovanébakalárské práce.

2.3 Výchozí verze pro diplomovou práci

Pro úcely diplomové práce mi byla poskytnuta upravená verzemikroskopu (obrázek 2.3) vycházející z minulé podkapitole popiso-vané verze. Úprava byla provedena panem Lukášem Hejtmánkem.Tuto verzi jsem mel za úkol v rámci této diplomové práce upravita zmodernizovat.

Po provedených úpravách zustalo nadále, ve výchozí verzipro diplomovou práci, zobrazení aplikace v rámci jediného oknaprohlížece a možnost posouvat snímek v okne pomocí myši. Oproti

7


Obrázek 2.2: Upravená verze mikroskopu [5]

verzi, ze které vycházela, byla rozšírena predevším o možnosti, kteréumožnily efektivnejší a uživatelsky prívetivejší práci se zobrazenýmsnímkem. Provedené úpravy jsou uvedeny v seznamu pod tímtoodstavcem. Krome techto, níže zmínených zmen, byla verze schodnás verzí predchozí.

• Možnost menit priblížení snímku plynule, nikoliv po predemdefinovaných krocích. Toto priblížení bylo možné realizovatpomocí táhla v levém horním rohu mikroskopu, koleckem myšia nebo pomocí dvojitého kliku levého tlacítka myši na zobrazo-vaný snímek (priblížení snímku) nebo kombinaci stisku klávesyshift a dvojitého kliku levého tlacítka myši (oddálení snímku).

• Možnost vybrat cást snímku, která se priblíží a zobrazí doviditelného prostoru prohlížece pri kombinaci stisku klávesyctrl a tažením myši za soucasného držení levého tlacítka.

• Plynulou zmena fokusovací vrstvy snímku pri kombinaci stiskuklávesy ctrl a použití kolecka myši.

8


Obrázek 2.3: Výchozí verze mikroskopu pro diplomovou práci

• Možnost vyvolání historie kroku v mikroskopu a zobrazenísnímku do celé viditelné plochy okna prohlížece.

• Tlacítka pro priblížení a zmenu fokusovací roviny bylanahrazena táhly pro plynulou zmenu a zároven doplnena tex-tem nesoucím informaci o aktuálním priblížení ci fokusovacívrstve.

• Byla pridána podpora pro zobrazení obrazového formátu JPEG20001 pomocí volání externího CGI skriptu a s ním spojenámožnost menit plynule kvalitu zobrazovaného snímku.

• Zobrazení malého náhledu snímku v pravém rohu oknaprohlížece pokud zobrazovaný snímek presahoval mimo viditel-nou cást okna.

• Cástecná podpora pro prohlížec Safari v zarízení iPad 2.

Další podstatnou zmenou oproti minulé verzi bylo odstranenímožnosti zobrazení a vkládání anotací uživateli. Nutno ríci, že úpravy

1. http://www.jpeg.org/jpeg2000

9

http://www.jpeg.org/jpeg2000


zde provedené vedly k výraznému zlepšení práce s mikroskopempo uživatelské stránce a umožnily prakticky bezproblémový vývojv rámci diplomové práce až do soucasné podoby aplikace. V rámcidalší cásti této podkapitoly bych se rád venoval popisu nekterýchchyb, kterými pracovní verze mikroskopu trpela a které znemožno-valy její rozšírení a nahrazení úplne první verze.

2.3.1 Podpora v internetových prohlížecích

Asi nejvetším nedostatkem upravené verze, který znemožnoval jejírozšírení, byla velice špatná podpora napríc ruznými internetovýmiprohlížeci, které lze rozdelit na prohlížece desktopové (nainstalovanéna bežných operacních systémech a strojích) a mobilní (dostupnéna mobilních zarízeních typu tablet ci smartphone). V rámci desk-topových prohlížecu byla aplikace testována v Microsoft InternetExplorer verze 8 a vyšší, Firefox 19.0.2, Opera 12.14 a Chrome ve verzi25. V prípade mobilních prohlížecu se jednalo o Opera Mobile 12.10,Chrome verze 18 a Safari 6 Mobile v prípade zarízení iPad. Nejvážnejšíproblémy ze všech prohlížecu byly zaznamenány u prohlížece MSInternet Explorer, a to ve všech jeho testovacích verzích. V tomto typuinternetového prohlížece, prevážne ve verzi 8, byl mikroskop pro svéchyby zcela nepoužitelný. Jednalo se o následující chyby a nedostatky,kde nejvážnejší z pohledu funkcnosti byl první a druhý problém.Tyto problémy neumožnovaly používat ani základní funkcionalitumikroskopu.

• Nebylo možné posouvat zobrazeným snímkem pomocí myši(pouze ve verzi MSIE 8 a nižší).

• Docházelo k castým výskytum vykreslovacích defektu, kdydošlo k úplnému zhroucení zobrazovaného snímku (obrázek2.4).

• V náhledu se nezobrazovala aktuálne viditelná cást snímkua nebylo se možné v nem pohybovat pomocí myši.

• Byl nefunkcní výber priblížení snímku pomocí klávesy ctrla myši (pouze ve verzi MSIE 8 a nižší, u vyšších verzí ne-docházelo k vykreslení rámecku okolo výberu, avšak výbera priblížení se presto provedlo).

10


Obrázek 2.4: Špatné zobrazení snímku v prohlížeci MSIE verze 8

Dalším prohlížecem s obcasnými problémy, které však nezname-naly nepoužitelnost mikroskopu, byl internetový prohlížec Firefox.Bez rozdílu verze zde docházelo k obcasnému nevykreslení zobrazo-vané dlaždice, na které je snímek rozdelen. Prohlížeci bez zjištenýchproblému a s plnou podporou všech funkcí byly Opera a dále Chrome.

Aplikace v této verzi byla zároven pripravena na podporu v inter-netovém prohlížeci Safari na zarízení iPad. Na tomto typu zarízeníbyl problém s plynulostí priblížení pomocí gesta, které se zpravidlanevykonalo, a požadované priblížení snímku se neprovedlo. Špatnápodpora byla také u ostatních mobilních prohlížecu jako napríkladOpera Mobile a Chrome, kde gesta pro priblížení ci oddálení snímkunefungovala vubec. Ostatní funkcionalita byla v techto prohlížecíchv porádku a zcela funkcní.

2.3.2 Styl psaní kódu

Nežádoucím efektem postupného vývoje aplikace od pocátecní verzeaž po verzi soucasnou bylo, že každý z vývojáru nové verze do ap-

11


likace pridal kód psaný stylem specifickým pro konkrétního pro-gramátora. Nejednalo se tedy o chyby, které by znemožnovalyprímé použití mikroskopu, ale spíše o chyby ztežující prípadný dalšívývoj aplikace a ladení chyb zjištených behem reálného používánímikroskopu. Jednalo se zpravidla o styl pojmenování promennýcha funkcí a kombinování ceštiny a anglictiny pro jejich názvy. Dálepoužívání nebo naopak nepoužívání složených závorek v prípadejednopríkazových if-else vetví v programu, kombinaci mezer a tab-ulátoru pro odsazení kódu ci používání ruzného poctu mezer proodsazení kódu stejné úrovne. Dalším nedostatkem byla témer ab-solutní absence komentáru v kódu, chybející dokumentace a popisexistujících funkcí.

2.3.3 Starý systém souboru

Už od první verze mikroskopu a celého portálu Atlases se využívalo(a stále využívá) textových souboru obsahujících data uložená veforme XML2 datové struktury a obsah portálu je z nich generován zapoužití externích skriptu. V diplomové práci se budu nadále zabý-vat pouze soubory týkajícími se Virtuálního mikroskopu a nikolivsoubory pro samotný webový portál.

Obrázek 2.5: Schéma založení nového snímku pro mikroskop

Pro vytvorení nového snímku (obrázek 2.5), nebo úpravu již exis-tujícího, bylo zapotrebí vytvorit záznam do existujícího XML souboru

2. http://www.w3schools.com/xml

12

http://www.w3schools.com/xml


a spustit speciální skript napsaný v programovacím jazyce Perl3, kterýz aktuálních dat vygeneroval nový HTML soubor. Ten poté sloužiljako nová instance mikroskopu pro zobrazení daného snímku a uži-vateli byl na nej zprístupnen odkaz v portálu. Tato technika bylapoužita i v této upravené verzi Virtuálního mikroskopu, ze kterévychází diplomová práce.

Tento systém mel zajisté své výhody, ale i nevýhody. Jako beze-spornou výhodou mužeme jmenovat fakt, že systém byl dukladneoveren nekolika lety funkcnosti a pan Josef Feit, jakožto jediný správcesystému, byl s jeho používáním velice dobre obeznámen. Všechny po-mocné skripty pro generování a styl XML souboru si pritom vytvárelsám. Proti starému systému hovorí nesporná nárocnost prípadnéúdržby a úprav již vygenerovaných souboru pro jednotlivé snímky.Množství vygenerovaných souboru je enormní, protože portál ob-sahuje nekolik desítek tisíc snímku (a tedy i souboru) a vygenerovanéHTML soubory dosahují v souctu velikosti nekolika stovek megabytudat. Zde pripomenme, že pro každý snímek musí existovat minimálnejeden HTML soubor obsahující hlavní náhledové okno mikroskopu.V prípade prítomnosti anotací a možnosti detailu pro snímek je nutnétento pocet zvýšit o další dva soubory. Data a informace o snímcíchpro mikroskop v rámci jedné cásti portálu jsou dále uložena v jednomXML souboru, který dosahuje velikosti nekolika desítek megabytudat. To zaprvé ztežuje manipulaci se souborem v prípade nutnosti ed-itace techto dat (napríklad dodatecné pridání anotací) a zároven prak-ticky znemožnuje vyhledávání nad daty v rámci portálu v reálnémcase, nebot’ zpracování takto datove objemného souboru je casovea výpocetne velice nárocné.

V rámci zadání práce tedy bylo mimo jiné požadováno, aby bylstávající systém, využívající soubory XML a skripty pro generováníjednotlivých stránek mikroskopu, upraven a preveden na systémvyužívající vhodnou databázi a v ní uložená data. O tomto prevodu,novém systému uložení dat a bližšímu popisu puvodních souborus uloženou XML strukturou pojednává samostatná kapitola 5.6

3. http://www.perl.org

13

http://www.perl.org

3 Technologie použité pro vývoj aplikace

Technologie pro vývoj lze rozdelit do dvou skupin – technologieserverové a na druhé strane technologie, se kterými prichází do kon-taktu prímo uživatel aplikace. V prípade volby serverových tech-nologií bylo nutné zvolit programovací jazyk, který je schopný ko-munikace s databází pro získání dat o snímcích, která již nebudoudostupná v podobe XML souboru, a také samotný databázový systémpro uložení techto dat. Pro vytvárení rozhraní aplikace, se kterýminteraguje uživatel, bylo rozhodnuto zachovat technologie, které bylypoužity v puvodním systému. Jediná zmena se týká jazyka JavaScript,který byl obohacen o technologii AJAX. Duvody volby konkrétníchtechnologií a jejich popis si je možné precíst v následujících podkapi-tolách.

3.1 Technologie použité na strane uživatele

3.1.1 HTML

Pro tvorbu obsahu webové stránky mikroskopu bylo využito znacko-vacího jazyka HTML1 4.011 [3]. Duvodem využití starší verze (napr.oproti verzi XHTML2) byl fakt, že novejší verze prakticky neprinášížádnou výraznou funkcionalitu oproti svému predchudci. Duvodemnevyužití v dnešní dobe masove nastupujícího HTML 53 je to, že bychpro tvorbu mikroskopu nevyužil témer žádnou z jeho nových funkcí,a jeho stále zatím ne plná podpora v soucasných prohlížecích. Dalšímduvodem nevyužití jazyka HTML 5 je skutecnost, že nejvíce uživatelupricházejících na portál Atlases a vlastnících prohlížec MS InternetExplorer, disponuje tímto prohlížecem ve verzi 8, která novou verziHTML 5 nepodporuje vubec. Statistiku zastoupení jednotlivých verzíinternetového prohlížece MS Interner Explorer u návštevníku portálupro rozmezí od 22. 10. 2012 do 22. 3. 2013 si je možné prohlédnout naobrázku 3.1 (data jsou získána pomocí Google Analytics a pocházejíze dne 22. 3. 2013).

1. http://www.w3schools.com/html2. http://www.w3schools.com/html/html_xhtml.asp3. http://www.w3schools.com/html/html5_intro.asp

14

http://www.w3schools.com/html

http://www.w3schools.com/html/html_xhtml.asp

http://www.w3schools.com/html/html5_intro.asp

3. TECHNOLOGIE POUŽITÉ PRO VÝVOJ APLIKACE

Obrázek 3.1: Statistika návštevnosti portálu Atlases pro prohlížecMSIE

3.1.2 CSS

Stylování vzhledu aplikace bylo dosaženo využitím kaskádovýchstylu CSS 2.14. Zároven bylo využito novejší verze CSS 35, a to projejí možnost stylování zakulacených rohu rámecku prvku pro lepšívzhled mikroskopu v novejších CSS 3 podporujících prohlížecích.Duvodem nevyužití novejší verze CSS v celém spektru možností jeopet témer nulová využitelnost nových grafických možností a efektu.Nesporným faktem poté zustává stále ne plná podpora v interne-tových prohlížecích, kdy je nutné používat pro jednu definici stylui nekolik tzv. prefixu specifických pro každý prohlížec, címž zbytecnenarustá velikost kódu stylu a také se zbytecne zesložit’uje jejich prí-padná úprava. Posledním duvodem nevyužití CSS 3 je jejich nulovápodpora v prohlížeci MS Internet Explorer 8.

3.1.3 JavaScript

Podobne jako v predcházejících verzích mikroskopu je hlavním pro-gramovacím jazykem využitým pro práci s mikroskopem JavaScript.V soucasné nové verzi mikroskopu jsem poté využil i technologiiAJAX[2], která umožnuje dotazování se serveru na pozadí behuaplikace a eliminuje nutnost obnovení celé stránky s otevreným

4. http://www.w3schools.com/css5. http://www.w3schools.com/css3

15

http://www.w3schools.com/css

http://www.w3schools.com/css3


snímkem pri zmene nastavení ci vyvolání akce na naprosté minimum.Tím se

1. nezatežuje server poskytující jednotlivé dlaždice snímku provykreslení

2. nezatežuje datová linka k uživateli, kdy by po každé akci muselopetovne nacítat a stahovat potrebná obrazová data

3. aplikace stává více uživatelsky prívetivou a použitelnou

Duvodem nevyužití napríklad technologie typu Flash6 je i to, žes touto technologií mají problémy mobilní platformy a zvlášte mo-bilní zarízení od firmy Apple tuto technologii nepodporují vubec(zastoupení mobilních uživatelu pritom tvorí pres 10 % celkovénávštevnosti portálu). Dalším duvodem je nutnost mít nainstalo-vaný prehrávac na strane uživatele, zatímco JavaScript je dnes bezproblému podporován ve vetšine internetových prohlížecu bez nut-nosti dodatecné instalace dalších programu. Jako další duvod volbypokracovat ve vývoji s pomocí jazyku JavaScript byl fakt, že puvodnísystém byl již v tomto jazyce naprogramován a bylo tedy možnéhlavní cást kódu prevzít a nevyvíjet tuto funkcionalitu znovu. Jakoposlední duvod mužeme jmenovat fakt, že technologie typu Flash jev dnešní dobe již zastaralá a není vubec jisté, jakou další cestou budejejí vývoj pokracovat7.

3.2 Serverové technologie

3.2.1 PHP

Mnou vypracovaná verze mikroskopu se na rozdíl od svých pred-cházející verzí liší zejména v datové vrstve, kdy byly jednotlivé v pred-chozí kapitole již zmínené XML soubory nahrazeny daty uloženýmiv databázi (více informací se lze docíst v kapitole 5.6.4). Bylo tedynutné využít nekterý ze serverových programovacích jazyku pro

6. http://www.adobe.com/cz/products/flash.html7. http://blogs.adobe.com/conversations/2011/11/flash-focus.html

16

http://www.adobe.com/cz/products/flash.html

http://blogs.adobe.com/conversations/2011/11/flash-focus.html

http://blogs.adobe.com/conversations/2011/11/flash-focus.html


prístup k této databázi a ke správe dat v ní uložených. Rozhodovaljsem se mezi skriptovacími jazyky Perl a PHP, které jsou si v zásadevelice podobné. Volba použitého jazyka nakonec padla na PHP veverzi 5[1], se kterým mám ze dvou zmínených jazyku více zkušeností.Pátá a aktuálne nejnovejší verze tohoto jazyka byla využita kvulipodpore ctení a získávání dat z XML souboru prímo nástroji jazykaa nikoliv pomocí externích knihoven a pro možnost objektového prís-tupu k databázi MySQL. PHP skripty jsou poté dotazovány výhradnepomocí AJAX technologie z hlavního okna nové verze mikroskopu.

3.2.2 MySQL

Pro uložení dat puvodne umístených v XML souborech bylo nutnévyužít nekterou z existujících databází. Využita byla na serveru, kde jeportál umísten, již nainstalovaná a zprovoznená databáze MySQL[4].

3.3 Vývojové prostredí

Aplikace Virtuálního mikroskopu byla vyvíjena na osobním pocítaci,kde byla v pocátcích vývoje i testována. Konecný vývoj a testováníaplikace poté probíhalo prímo na serveru, kde je umísten portál At-lases, a to paralelne vedle puvodní verze mikroskopu. Toto testováníprobíhalo za asistence pana Josefa Feita. V první tretine mesíce breznaroku 2013 poté nová verze nahradila v té dobe používanou verziv jedné ze šesti cástí Atlases portálu a byla zprístupnena bežnýmuživatelum portálu.

17

4 Existující systémy

Kapitola se zabývá strucným popisem již existujících systémuurcených pro zobrazování obrazových dat ve vysokém rozlišení.Text kapitoly se omezuje pouze na tri existující systémy (Zoomify,PanoJS3, OpenLayers), takže výcet samozrejme není a ani nemužebýt konecný. V kapitole je zároven vynecháno popsání aplikací prozobrazení mapových podkladu, jako jsou napríklad Mapy.cz, GoogleMaps, Bing Maps a jim podobné aplikace. Duvodem je jejich pomernedobrá známost a rozšírenost mezi bežnými uživateli a také fakt, žei pres možnost využití zobrazení map na vlastních internetovýchstránkách zde není také možnost zobrazit pomocí jejich API vlastníobrazová data. Zároven také nesporný fakt, že primárne tyto aplikaceslouží k naprosto odlišným úcelum a obsahují v oblasti lékarskýchsnímku nevyužitelnou funkcionalitu, byt’ základ zobrazení snímku(resp. mapy) je velice podobný.

Pri vývoji nového Virtuálního mikroskopu byla totiž zvažovánamožnost využít nekteré z již existujících systému a doimplemento-vat rucne potrebnou funkcionalitu, kterou neobsahují, podobne jakou upravované verze mikroskopu. Tato možnost u mapových aplikacínení uskutecnitelná a u dále zmínených systému by také nebyla zcelabez problému.

Od této možnosti rozšírení již existujících systému bylo nakonectedy upušteno. Duvodem je fakt, že ani jedna z níže zmino-vaných verzí aplikací neobsahovala v dobe vývoje funkcionalituvyžadovanou v diplomové práci v takovém rozsahu, že by využitínekteré popisované verze systému oproti využití již upravenéhomikroskopu prineslo výraznejší úsporu casu. Zároven existující sys-témy mnohdy obsahují funkcionalitu nepotrebnou a zbytecnou pronový mikroskop. Nesporným faktem hovorícím proti jsou prípadnémožné problémy pri nasazení na již nekolik let existující systémsprávy snímku, nepochybná nutnost úpravy existujícího kódu vy-cházející z požadavku práce a také zanášení kódu tretích stran, kterýnemusí být vždy bez problému pochopitelný a udržovatelný, doportálu Atlases. Jistou výhodou využití již funkcních aplikací by bylapodpora v ruzných internetových prohlížecích, zpravidla bezproblé-

18

4. EXISTUJÍCÍ SYSTÉMY

mová funkcionalita existujících funkcí a prípadná podpora ze stranyvývojáru pri implementaci nových funkcí a rozširování již existujících.

Hlavním duvodem odmítnutí techto již témer hotových rešeníbylo primárne to, že rozdíl mezi využitím a úpravou techto systémuoproti pokracování ve vývoji výchozí verze mikroskopu by byl vevýsledku minimální.

4.1 Zoomify

Jedná se o aplikaci podporující zobrazení obrázku ve vysokém ro-zlišení za podpory HTML 5 a technologie Flash. Výhodou systémuje bezproblémová funkcnost v existujících prohlížecích a ve vyššíchverzí aplikace i podpora anotací. Velikou nevýhodou je fakt, že sejedná o komercní aplikaci, a s tím i prípadné problémy pri úpravekódu a rozširování systému o vlastní funkcionalitu nezbytnou prosprávné fungování mikroskopu v rámci zadání práce. Drobnou vadouzustává napríklad nefunkcnost kolecka myši nebo možnost priblíženípouze po predem definovaných krocích, které jsou pomerne ve-liké. Bližší informace k aplikaci je poté možné nalézt na webovýchstránkách www.zoomify.com, a to vcetne bližšího popisu verzí, li-cencních podmínek a cen produktu.

4.2 PanoJS3

Na rozdíl od predcházející aplikace se jedná o open source1 pro-jekt postavený na programovacím jazyce JavaScript. Výhodou je jižzmínený otevrený kód, podpora ve vetšine internetových prohlížecuvcetne Microsoft Internet Explorer 8 a celková svižnost približovánía práce se zobrazeným snímkem. Proti systému poté hovorí neprí-tomnost anotací a dalších požadovaných funkcí nového mikroskopu,a dále také možné potíže pri nasazení na existující systém snímku.Zároven je nejistá funkcnost v prípade systému snímku, které ne-mají jednotlivé dlaždice pro poskládání výsledného obrazu, alejedná se o snímky s fixním rozlišením, což je stále vetšina snímkuv portálu Atlases. Dalším drobným nedostatkem je, podobne jako

1. http://www.opensource.org

19

www.zoomify.com

http://www.opensource.org

4. EXISTUJÍCÍ SYSTÉMY

u predchozího sytému, pomerne veliký krok jednotlivé zmeny pri-blížení. Webové stránky projektu, kde se lze docíst bližší informace,poprípade stáhnout si zdrojový kód aplikace, se nachází na adresewww.dimin.net/software/panojs.

4.3 OpenLayers

Podobne jako u predcházejícího systému se jedná o JavaScript kni-hovnu širitelnou pod licencí open source. Výhody a nevýhody jsouprakticky shodné s predcházející zmínenou aplikací PanoJS3. Sys-tém umožnuje jemnejší krokování pro zmenu priblížení, také pod-poruje zobrazení anotací do zobrazeného snímku a bezproblémovézobrazení snímku bez prítomných dlaždic. Ve skutecnosti se jednáo knihovnu, která poskytuje API k zobrazení mapových podkladu a stím i související množství funkcí, které nelze prakticky využít v novéverzi mikroskopu. Knihovna je napríklad využita v projektu Open-StreetMap2. Webová stránka projektu, kde se lze docíst více informacío dané knihovne, poprípade získat zdrojové kódy, je dostupná nainternetové adrese www.openlayers.org.

2. http://www.openstreetmap.org

20

www.dimin.net/software/panojs

www.openlayers.org

http://www.openstreetmap.org

5 Nový Virtuální mikroskop

Kapitola se zabývá popisem aktuální verze Virtuálního mikroskopu,která vznikla jako výsledek této diplomové práce. Nabízí pohledna nové funkce aplikace, popis nového databázového modelu, PHPskriptu, které jsou pro její beh nezbytné, a popis HTML a JavaScriptsouboru, které slouží pro zobrazení mikroskopu v prohlížeci uživatele.Zároven obsahuje popis prevzaté funkcionality z puvodní aplikacea popis staršího systému XML souboru.

5.1 Popis aplikace

Cílem diplomové práce bylo rozšírení me poskytnuté verze Virtuál-ního mikroskopu (popsané v kapitole 2.3), a to zejména o následujícíseznam bodu:

• Možnost zobrazení a editaci šipek (anotací) ukazující duležitámísta v zobrazovaném snímku.

• Možnost zobrazení a editace popisu zobrazovaného snímku.

• Možnost uložení pozice zobrazeného snímku, možnost návratuna predešlou pozici (historie kroku).

• Možnost ukládání historií pozic ve snímku na strane serveru,a to pro každý snímek a uživatele samostatne.

• Možnost úcastnit se tzv. sezení, tj. propojení nekolika prohlížecunad jedním snímkem a synchronizaci snímku a pohybu všechúcastníku daného sezení.

Dalším duležitým požadavkem práce bylo prenesení soucasnéXML souborové organizace dat do vhodnejší podoby (databáze)a rozšírení podpory v soucasných internetových prohlížecích.

Behem vývoje aplikace se poté ukázalo jako vhodné puvodnízadání rozšírit o nekolik následujících dodatecných funkcí.

• Dokoncení a zprovoznení kompletní lokalizace do dvoujazykových verzí (ceský a anglický jazyk).

21

5. NOVÝ VIRTUÁLNÍ MIKROSKOP

• Zmena soucasného vzhledu grafiky mikroskopu vzhledemk nove plánovanému Atlases portálu.

• Možnost kompletne spravovat iniciální nastavení snímku prímoz webového prostredí mikroskopu.

• Možnost trvalého vlastního nastavení jazykové verze, zobrazeníhistorie ci zmeny kvality snímku.

• Rozšírení mikroskopu o verzi pro zobrazení statických snímkubez jednotlivých dlaždic, ze kterých se skládá výsledný snímek.

• Rozšírení podpory o mobilní prohlížece.

• Zavedení celkem ctyr uživatelských práv. Dále možnost nastavitpro každý snímek libovolné množství uživatelu majících právapro správu anotací a udelení zvláštního oprávnení na základevlastnictví snímku.

5.2 Prevzatá funkcionalita z predcházející verze

V pocátcích vývoje aplikace bylo nutné vyrešit otázku, zda-li využítpuvodní verzi mikroskopu, opravit v ní nalezené chyby a pokracovatv integraci nových funkcí do této upravené verze, nebo využít tutoverzi pouze jako jakýsi návod a inspiraci pro verzi novou a vývojzacít od úplného pocátku.

Puvodní verze, jak již bylo zmíneno v kapitole 2.3, trpela v zásadevážnými problémy jen v prípade internetového prohlížece MicrosoftInternet Explorer. V ostatních prohlížecích byly chyby minimální nebonaopak žádné. Datovou vrstvu v podobe XML souboru bylo nutnévymenit za novou bez ohledu na pokracování ve vývoji nebo zapocetívývoje úplne nové verze. Vzhledem k prakticky bezproblémovémuchodu aplikace ve vetšine internetových prohlížecu jsem se nakonecrozhodl využít celého puvodního kódu výchozí verze Virtuálníhomikroskopu, jednotlivé nové funkce do nej doprogramovat a kódupravit tak, aby byl funkcní i v problémových prohlížecích. Behemvývoje se tato volba poté ukázala jako správná, protože každá nováfunkcionalita byla v zásade oddelená od ostatních a do celkovéhopuvodního kódu aplikace zasahovala jen minimálne. Bylo tedy možné

22


se odrazit od pomerne zdarilé a nejduležitejší cásti mikroskopu a toubylo samotné zobrazování snímku a manipulací s nimi, které bylov zásade funkcní.

5.3 Úpravy v predcházející verzi

Úpravy v kódu puvodní verze mikroskopu byly trojího charakteru.Jedním bylo ošetrení chyb, aby verze vykazovala stejnou funkcional-itu ve všech prohlížecích. Druhou byl refaktoring, neboli zlepšeníexistujícího kódu. Tretí a nejzásadnejší zmenou byla celková zmenadatové vrstvy mikroskopu, kdy probehlo nahrazení struktury XMLsouboru v databázi uloženými daty.

5.3.1 Odstranení chyb v MSIE

Chyby objevené v prohlížeci Microsoft Internet Explorer (hlavneverze 8) byly zpravidla zpusobeny voláním JavaScriptových funkcí,které tato verze prohlížece nepodporovala, poprípade voláním funkcínad objekty, které nebyly definovány. Tento problém znemožnovalv MSIE 8 pohyb zobrazeným snímkem pomocí myši a pohyb v náh-ledu snímku.

Chyba byla zpusobena použitím dvou funkcí, které jsou dostupnéaž v MSIE 9:

• preventDefault() - funkce pri vzniku události na stránce(napríklad klik myší na odkaz) znemožní vykonání výchozí akcespojené s touto událostí (napríklad presmerování prohlížece nastránku, na kterou odkazuje daný odkaz).

• stopPropagation() - doplnující funkce k predešlé. V prípade,že dojde ke vzniku události na stránce, je tato událost stan-dardne prenášena stromovou strukturou elementu na stránceaž do korene stránky (v prípade HTML stránky se jedná o tag<html></html>). Funkce poté slouží k zastavení události a jejímunáslednému neprenesení do dalších elementu stránky.

Starší verze prohlížece MSIE (od verze 8 níže) podporuje podobnévlastnosti nad prípadnou událostí, ale s jinými názvy a prístupem

23


k temto vlastnostem. Jedná se o vlastnost event.returnValue1, která jeobdobná funkci preventDefault() a vlastnost event.cancelBubble2, kteráplní stejný úcel jako funkce stopPropagation(). Tyto vlastnosti novejšíprohlížece již nepodporují, a proto je ignorují. Rešením tedy bylonapsání vlastní funkce, která bude v sobe kombinovat všechny ctyrimožnosti zastavení akce v prípade, že vznikne libovolná událost,kterou chceme zastavit a zabránit jejímu vykonávání.

1 function cancelEvent(event) {2 // novejší podporující prohlížece3 if (event.preventDefault) {4 event.preventDefault();5 }6 if (event.stopPropagation) {7 event.stopPropagation();8 }9

10 // starší prohlížece nepodporující nové funkce11 event.returnValue = false;12 if (!event.cancelBubble) {13 event.cancelBubble = true;14 }15 }

V prípade zavolání funkce cancelEvent nad událostí ve staršímtypu prohlížece, který nepodporuje volání napríklad funkce prevent-Default, se podmínka if(event.preventDefault) vyhodnotí záporne (false),protože prohlížec nad událostí tuto vlastnost nezná (neumí interpreto-vat). V prípade, že prohlížec akci podporuje, podmínka se vyhodnotíkladne a daná akce se vykoná. Obdobne pro následující akce.

Predchozí problém úzce souvisí s chybou, kdy byly akce volánynad promennými, které byly nedefinovány. Mejme následujícíkód, který libovolnému elementu stránky (napríklad odkazu) s idatributem „test“ nastaví jako obsluhu události naší funkci myFunc-tion(event), která se vykoná v okamžiku kliknutí na tento element.Promenná event zde predstavuje událost, která se vykonala (v tomtoprípade se jedná o klik myší na element internetové stránky).

1. http://msdn.microsoft.com/en-us/library/ie/ms534372%28v=vs.85%29.aspx2. http://developer.mozilla.org/en-US/docs/DOM/event.cancelBubble

24

http://msdn.microsoft.com/en-us/library/ie/ms534372%28v=vs.85%29.aspx

http://msdn.microsoft.com/en-us/library/ie/ms534372%28v=vs.85%29.aspx

http://developer.mozilla.org/en-US/docs/DOM/event.cancelBubble

http://developer.mozilla.org/en-US/docs/DOM/event.cancelBubble


1 document.getElementById("test").onclick = myFunction;2 function myFunction(event) {3 if (event) {4 alert("Event je definován.");5 } else {6 alert("Event není definován.");7 }8 }

V prípade, že tento kód spustíme v prohlížeci MSIE 9 stránka zo-brazí varovný dialog „Event je definován.“. Když tento kód spustímev prohlížeci MSIE 8 a nižší, stránka zobrazí varovný dialog „Eventnení definován.“. Události nejsou obslužným funkcím v prohlížeciMSIE 8 a nižším totiž predávány jako automatické parametry, ale jenutné je získat z promenné window.event v okamžiku vzniku danéudálosti (napríklad vykonání funkce myFunction). V prípade, že tedyfunkci výše upravíme do podoby

1 function myFunction(event) {2 if (!event) {3 // event není definován4 event = window.event;5 }6 // puvodní kód7 }

získáme tak funkcní kód plnící stejnou funkcionalitu a umožnujícíobsluhu události stejným zpusobem pro všechny typy prohlížecu.

Chyba nezobrazení aktuálne viditelné cásti snímku v náhledu bylaz cásti vyrešena zmenami provedenými výše. Nebylo však možnése v náhledu pohybovat pomocí myši. Funkce pro obsluhu událostínad mapou byly ovšem po zavedení oprav výše naprosto funkcní.Prícinou problému bylo namapování událostí na špatný elementstránky, ve kterém sice byla obsažena mapa, ale ne samotný obrázekobsahující mapu. Rešení problému se tedy ukázalo ve výsledku jakojednoduché a naprosto bezproblémové. Oprava chyby vyrešila nes-tandardní chování náhledu snímku a sjednotila jeho chování ve všechinternetových prohlížecích, vcetne mobilních.

Poslední chybou v zásade bránící použití verze mikroskopujako výchozí verze pro implementaci dodatecné funkcionality bylošpatné chování výberu snímku a jeho priblížení pomocí kombinaceklávesy ctrl a tlacítka myši. Po provedení úprav výše se podarilo sjed-

25


notit funkcionalitu ve všech verzích MSIE, avšak cervené ohranicenívýberu stále nebylo viditelné. Výše zmínená chyba byla praktickyzpusobena netradicním chováním prohlížece Internet Explorer oprotijiným prohlížecum. Element, kam se vykresloval obdélník znacícívýber, mel z pocátku generování stránky nastavenu CSS vlastnostz-index3 na velmi vysokou hodnotu, aby element byl vždy viditelnýi pri velkém množství zmen priblížení snímku v mikroskopu. Jed-notlivé dlaždice snímku mají tuto vlastnost nastavenu také a je jimdynamicky zvetšována pri zmene priblížení tak, aby snímky aktuálníúrovne priblížení byly umísteny „v predu“ a skryly tak neaktuálnídlaždice snímku. Prohlížec MSIE však aktualizaci této vlastnosti ne-promítal do aktuálního vykresleného vhledu stránky. Situace pakvypadala, jako kdyby element obsahující aktuálne vykreslené cervenéohranicení výberu, byl umísten až za zobrazenými dlaždicemi, byt’meli nižší hodnotu vlastnosti z-index. Rešením tedy bylo pravidelne,pri vykreslení další „vyšší“ vrstvy dlaždic aktualizovat dynamickyelement pro vykreslení výberu a nastavit mu hodnotu z-index o jednavyšší než hodnota stejné vlastnosti aktuálne nejbližší zobrazenédlaždice.

Postupnou aplikací výše zmínených úpravám byla docílenanaprosto shodná funkcnost ve všech typech testovaných desk-topových internetových prohlížecu, a to vcetne Microsoft InternetExplorer ve verzi 7, pro který funkcnost aplikace nebyla puvodnevubec zamýšlena. Stav mikroskopu po provedení úprav a s aktivo-vaným výberem (cervený rámecek) v MSIE 7 je možné si prohlédnoutna obrázku 5.1.

3. http://www.w3schools.com/cssref/pr_pos_z-index.asp

26

http://www.w3schools.com/cssref/pr_pos_z-index.asp


Obrázek 5.1: Puvodní verze mikroskopu po provedených úpraváchv MSIE 7

5.3.2 Odstranení chyb v prohlížeci Firefox

Prohlížec Firefox (ve všech testovacích verzích) trpel chybou, kdynebyla prohlížecem zobrazena dlaždice snímku. Prícina chybyv tomto prípade nebyla prímo v kódu aplikace, ale byla zpusobenaprohlížecem samotným. Pokud se v mikroskopu melo zobrazit neko-lik desítek dlaždic, prohlížec Firefox nekdy nedokoncil nacítání jednénebo nekolika dlaždic, i když u ostatních provedl nactení ze serverua jejich vykreslení korektne. Chyba byla vyrešena pomocí funkce,která kontrolovala nactení aktuálních dlaždic a v prípade, že dlaždicepo urcité dobe nactena nebyla, provedla nactení znovu. Chování prinacítání dlaždic se dá popsat jako následující série kroku:

1. Mikroskop vytvorí dlaždici a nastaví vlastní atribut isLoad protuto dlaždici na hodnotu 0.

27


2. Pokud dojde k nactení dlaždice, je zavolána funkce namapovánana událost onload dané dlaždice, která atribut isLoad zmení nahodnotu 1.

3. Se zpoždením se zavolá funkce checkIfIsLoaded(), která prodlaždici zkontroluje atribut isLoad. Pokud obsahuje hodnotu1, došlo k nactení dlaždice korektne a funkce se ukoncí. Pokudstále obsahuje hodnotu 0, nactení dlaždice se nezdarilo a funkcepokracuje opet bodem 1 (tj. pokusí se dlaždici vytvorit znovu).

Výhodou tohoto rešení je jeho univerzálnost pro všechnyprohlížece a pritom zanedbatelný vliv na výkon mikroskopu, a to i vprípade mobilních zarízení.

5.3.3 Odstranení chyb v mobilních prohlížecích

Chyba, kterou bylo potreba odstranit v prípade mobilních prohlížecu,se vztahovala prakticky jen na prohlížec Safari na zarízení iPad, kdenebylo funkcní priblížení snímku pomocí standardního gesta. Pod-pora ostatních mobilních prohlížecu a zarízení nebyla z pocátkuvývoje aplikace vubec zamýšlena, ale nakonec byla rozšírena i naostatní mobilní prohlížece a zarízení. Chyba priblížení byla v prípadezarízení iPad zpusobena prostou chybou v zaokrouhlení ve funkcnímkódu a byla odstranena prakticky bez zásahu do jiných cástí kódu.

Pro urcení, zda se má provést priblížení nebo oddálení snímku, jenad elementem obsahující zobrazovaný obraz obsluhována událostongesturechange, která se aktivuje v okamžiku zmeny pozice prstuna obrazovce zarízení. Událost takto obsluhovaná má poté (v prí-pade zarízení iPad nebo iPhone) vlastnost event.scale, která obsahujecíselnou hodnotu symbolizující dané gesto. Pokud je hodnota menšínež 1 dochází k oddálení (prsty se k sobe približují) nebo pokud jevetší než 1 dochází naopak k priblížení (prsty se od sebe oddalují).Problémem v kódu aplikace se ukázal fakt, že je nutné aktuální stavvlastnosti event.scale prevést na hodnotu -1 (oddálení) nebo 1 (pri-blížení). V tomto bode docházelo k výše zmínené zaokrouhlovacíchybe.

28


5.3.4 Refaktoring kódu

Refaktoring kódu byl prováden až na samotném konci práce a jednalose o nekolik zmen, jejichž úcelem bylo hlavne celkové zprehledneníprevzatého kódu. V prvním kroku se jednalo o prevedení názvupromenných a funkcí do jednotného stylu pojmenování. Puvodníkód totiž obsahovat kombinaci anglických a ceských názvu promen-ných a funkcí, ci kombinaci názvu, kde se jednotlivá slova oddelovalapodtržítky a v prípade jiných názvu podtržítka chybela. Pro pojmen-ování byl nakonec zvolen styl psaní názvu promenných a funkcíznámý jako „camelCase“.

Druhou cástí úpravy kódu bylo sjednocení používání složenýchzávorek u jednopríkazových cyklu a podmínených konstrukcí.Puvodní kód obsahoval kombinaci prakticky všech možných stylu,které je možné pro tuto strukturu kódu využít. Ve finální verzi ap-likace byly složené závorky doplneny a každý príkaz byl prevedenna samostatný rádek kódu. Konstrukce jako napríklad

1 if (podmínka) príkaz;2 if (podmínka)3 príkaz;4 if (podmínka) príkaz; else príkaz2;

byly tedy prevedeny do tvaru1 if (podmínka) {2 príkaz;3 }

nebo, v prípade if-else konstrukce do tvaru1 if (podmínka) {2 príkaz;3 } else {4 príkaz2;5 }

Úcelem techto zmen bylo hlavne zprehlednení kódu a dodrženístejného stylu psaní pro celou aplikaci, a to i vcetne podpurných PHPskriptu umístených na serveru.

Tretí cástí úpravy existujícího kódu bylo jeho procištení odnevyužívaných promenných ci funkcí, které byly v kódu zapomenutynebo nahrazeny jinými. Poslední cástí bylo doplnení dokumentace,poprípade komentáru k jednotlivým funkcím, promenným ci kon-

29


strukcím v kódu, které si komentár pro svou nárocnost pochopenívyžadovaly.

5.3.5 Zmena datové vrstvy

Pro požadavky plynoucí ze zadání práce bylo nutné kompletnezmenit základní datovou vrstvu aplikace a nahradit doposud použí-vané XML soubory, ze kterých byl mikroskop generovaný, vhodnoudatabází a s ní spojenými externími skripty pro její obsluhu. S toutozmenou byla spojena i zmena dosavadní struktury výchozího HTMLsouboru pro aplikaci. Více informací o tomto kroku lze nalézt v kapi-tole 5.6.

5.4 Aplikacní vrstva

V této cásti kapitoly je popsáno rozšírení podpory pro ostatní interne-tové prohlížece (Opera Mobile a Chrome) a také uživatelská práva,která mohou obdržet uživatelé aplikace. Soubory aplikacní cásti, po-mocí kterých je aplikace tvorena a následne zobrazena v internetovémprohlížeci, jsou detailne popsány na konci prílohy B.

5.4.1 Rozšírení podpory pro další mobilní prohlížece

Po oprave chyby pro prohlížec Safari na zarízení iPad, kdy se ne-správne provádelo priblížení nebo oddálení zobrazeného snímkupomocí gesta, byla tato funkcnost vyzkoušena i v ostatních mobil-ních internetových prohlížecích. Bohužel tyto prohlížece nemají pod-porovánu událost ongesturechange, která je pri použití gesta pro zmenupriblížení vykonána. Bylo tedy nutné nalézt jiný zpusob výpoctu v prí-pade vykonání gesta nad snímkem a tuto událost simulovat.

V prípade dotykových zarízeních je možné generovat tri základnítypy událostí pri dotyku na obrazovku. Jedná se o touchstart (zacátekdotyku), touchend (konec dotyku) a touchmove (generováno mezi za-cátkem a koncem dotyku pri posunu napríklad prstu po obrazovcezarízení). Dalšími událostmi je napríklad již výše zmínená událostongesturechange, která je ovšem podporována jen v prohlížeci Safari.Tyto tri základní události mají mimo jiné vlastnost touches, což je

30


fyzicky pole obsahující seznam bodu dotyku. V prípade dotyku jed-ním prstem tedy obsahuje práve jeden prvek (místo dotyku prstu).Prvky reprezentující body dotyku poté obsahují promenné pro zjištenípresné souradnice bodu na stránce, kde k dotyku došlo. Práve tétovlastnosti je využito pri simulaci nepodporované události onges-turechange a následnému výpoctu informace, zda se má vykonat pri-blížení snímku nebo k jeho oddálení. Kód pro obsluhu této událostipoté vypadá následovne.

1 if (e.touches)2 if (e.touches.length == 2) {3 var d = countDistance(e.touches);4 var deltaBeforeFloor = (d - fevm.gesturezoom);5 if (deltaBeforeFloor > 0) {6 deltaBeforeFloor += 1;7 }8 var delta = Math.floor(deltaBeforeFloor);9 fevm.gesturezoom = d;

10 // provedení priblížení (delta >= 1) nebo oddálení11 }12 }

Prvne je kontrolováno, zda-li událost obsahuje vlastnost touches.V prípade že nikoliv, vlastníme zrejme nepodporovaný prohlížecnebo nemáme mikroskop otevren v prohlížeci na dotykovém zarízení.V prípade že tato vlastnost existuje a pocet bodu jsou dva (na obra-zovce se nachází dva prsty, které se jí dotýkají), dojde k výpoctuvzdálenosti techto dvou bodu. Funkce countDistance(e.touches) je zdepouze zkráceným kusem kódu, který vzdálenost pocítá. Praktickyse jedná o výpocet vzdálenosti dvou bodu, kde u každého boduznáme jeho x-ovou a y-ovou souradnici. Výpocet je poté pouze ap-likací Pythagorovy vety. V promenné fevm.gesturezoom je v tomtoprípade uložena hodnota puvodní vzdálenosti bodu. Odectením ak-tuální vzdálenosti a puvodní vzdálenosti zjistíme, zda se body k sobepribližují nebo od sebe oddalují. Poslední cást je pouze zabezpecení,že se akce provede vždy. Pokud by vypoctený rozdíl vzdálenosti bylv intervalu 0 až 1 došlo by, v prípade zaokrouhlení pomocí funkceMath.floor(), ke ztráte informace (výsledek by byl 0) a v tomto prípadeby se priblížení neprovedlo. Dále následuje už jen samostatná imple-mentace zmeny priblížení, kdy pokud promenná delta obsahuje hod-

31


notu 1 a více dochází k priblížení snímku, pokud -1 a méne docházínaopak k oddálení snímku.

5.4.2 Uživatelská práva

Aplikace Virtuální mikroskop podporuje celkem šest uživatelskýchpráv. Ctyri z nich lze definovat v souboru userList.txt, který se nacházív korenovém adresári aplikace. Zbylá dve oprávnení se udelujína základe vztahu prihlášeného uživatele k nactenému snímkuv mikroskopu. Formát definice v souboru userList.txt je „uživatel-ské jméno@federace;císlo práva“. Tato oprávnení jsou platná pro celýVirtuální mikroskop bez rozdílu snímku. Na jednom rádku mužebýt prítomna pouze jedna definice oprávnení. Porovnává se ak-tuální hodnota promenné $_SERVER['REMOTE_USER']4, ve kteréje uloženo jméno aktuálne prihlášeného uživatele, s hodnotou uve-denou pred stredníkem. Porovnání je „case sensitive“ (tj. záleží navelikosti písmen) a používá se absolutní shoda obou retezcu. V prí-pade shody je poté vráceno císlo za stredníkem, které symbolizujeoprávnení. K získání práv je používán skript hasPermission.php, poprí-pade isAuthor.php. Pro definici práv v souboru je použito císlování od0 do 3 vcetne.

• Bežný uživatel – pro definici oprávnení je použito císlo 0. Totooprávnení získává automaticky jakýkoliv uživatel, který je prih-lášen a není uveden v souboru s definicí práv. Uživatel s tímtooprávnením muže menit svoje nastavení, spravovat historii,prohlížet si snímek plus k nemu prirazené anotace a zakládatsezení pro více úcastníku nebo se prihlásit k již existujícímusezení.

• Uživatel s právy pro anotace – pro definici oprávnení je použitocíslo 1. V prípade, že uživatel je uveden v souboru a má totooprávnení, vlastní všechna práva dostupná pro „bežného uži-vatele“ a zároven možnost spravovat (zakládat, editovat, mazat)anotace a k nim prirazené znacky pro celý portál Atlases využí-vající tuto aplikaci. Zároven uživatel muže menit popisný textsnímku.

4. http://www.php.net/manual/en/reserved.variables.server.php

32

http://www.php.net/manual/en/reserved.variables.server.php

http://www.php.net/manual/en/reserved.variables.server.php


• Administrátor – pro definici oprávnení je použito císlo 2. Uži-vatel vlastní veškerá predchozí práva a jako jediný má možnostplné správy snímku. Muže zakládat a editovat definice snímkua pridávat tak nové snímky do portálu, které budou zobrazenyVirtuálním mikroskopem. Nadále muže spravovat slovníkovédefinice pro anotace.

• Režim pro zkoušky – tento specifický režim mikroskopu je defi-nován císlem 3. V tomto režimu oprávnení je v mikroskopu prí-tomna pouze možnost zmeny jazyka. Nejsou zde zobrazeny an-otace, historie a ani popisný text a na pravé strane mikroskopuje zobrazen cervený pruh, který slouží jako vizuální kontrolapro vyucujícího, zda-li zkoušený student má opravdu otevrenusprávnou verzi aplikace (obrázek 5.2). Tento režim je využitelnýnapríklad pri zkoušení studentu(ek), kterí tak nemají možnostjakékoliv nápovedy ke snímku.

Obrázek 5.2: Mikroskop v režimu pro zkoušku

Zbylá dve oprávnení lze získat pouze pri splnení podmínky vz-tahu k zobrazenému snímku a jsou dostupná jen pro konkrétní

33


snímek. Tato oprávnení zároven prebíjí prípadné nižší oprávnenízískané ze souboru definic práv.

• Autor snímku – pokud se shoduje prihlášený uživatel s uži-vatelem uvedeným v tabulce atl_picture_definition v atributuorg, jsou mu udelena oprávnení shodná s oprávnením „Uži-vatel s právy pro anotace“, navíc pak možnost menit nekolikmálo nastavení pro definici snímku (titulek snímku, použitýpribližovací objektiv, barvení).

• Uživatel s právy pro anotace ke konkrétnímu snímku – prokaždý snímek muže být urceno libovolné množství uživatelu,kterí získají naprosto shodná práva, jako kdyby meli v souborudefinic práv uvedené své jméno v kombinaci s oprávnením císlo1. Rozdíl je, že toto oprávnení lze získat jen pro specifikovanésnímky a nikoliv pro celý Atlases portál.

Platnost má vždy vyšší právo. Je-li napríklad uživatel admin-istrátor a zároven majitelem snímku, dostane právo administrátora,nikoliv majitele snímku. Pokud je uživatel bežným uživatelem, ale jeuveden jako majitel snímku, dostává automaticky právo majitele.

5.5 Synchronizace více prohlížecu v rámci sezení

Jedna z nejobsáhlejších cástí práce bylo vytvorení funkcionality, kteráby umožnila synchronizaci více prohlížecu tak, aby na každém z nichbyl stejný obraz nebo jeho výsek v prípade rozdílných rozlišení. Syn-chronizaci lze využít pro studijní úcely mezi nekolika studenty nebonapríklad pro spolupráci lékaru. Výhoda takového sezení, naprík-lad oproti ruzným technikám sdílení pracovní plochy, je v její da-tové nenárocnosti (vymenovány jsou pouze souradnice snímku a zo-brazené snímky si každý prohlížec již získá sám) a zároven ve kval-ite poskytovaného obrazu, kdy nedochází k ruzným kompresnímkrokum upravující výsledný snímek a snižujícím tak jeho kvalitu.Zároven, pokud je vedoucí prohlížec omezen rychlostí datového doku,rychlost stahování snímku a pozic ostatními uživateli v sezení nenínijak omezena (necekají na vedoucí prohlížec až jim odešle data).Další výhodou je možnost predat ovládání snímku jinému uživateli

34


v sezení. Takovéto sezení muže založit jakýkoliv prihlášený uživatel,pro libovolný snímek, a to bez jakéhokoliv omezení.

Z pohledu sezení se urcují tri uživatelská práva – vlastník, docasnývlastník a clen sezení.

• Vlastníkem sezení je uživatel, který sezení fyzicky vytvorila jako jediný má oprávnení vyloucit ze sezení jiné uživatelenebo jmenovat docasného vlastníka. V prípade, že neexistuježádný docasný vlastník, muže pouze tento uživatel pohybo-vat obrazem snímku v prohlížeci. Jeho pozice je poté odeslánaostatním úcastníkum a aplikace sama zobrazí aktuální pozicizobrazenou vlastníkem. Každé sezení musí mít práve jednohovlastníka.

• Docasným vlastníkem je uživatel, který byl dríve clenem sezenía vlastník sezení mu toto právo propujcil. Tento uživatel nemužejmenovat jiné docasné vlastníky a zároven nemuže vyloucit jinéuživatele ze sezení, muže však pohybovat se snímkem. Každésezení muže mít maximálne jednoho docasného vlastníka.

• Obycejný clen sezení je takový uživatel, který nemuže jmen-ovat docasné vlastníky, nemuže ani vylucovat jiné cleny zesezení a nemuže pohybovat se snímkem. Pozice snímkuv jeho prohlížeci je nastavena na pozici shodnou s vlastníkemnebo docasným vlastníkem sezení. Techto uživatelu muže býtv sezení libovolný pocet.

5.5.1 Založení a pripojení k sezení

Sezení lze založit pres kontextové menu Virtuálního mikroskopuvyvolaného kliknutím pravým tlacítkem myši nad snímkem nebokliknutím na príslušnou ikonu. Pro založení sezení je nutné zadatpouze název sezení. Je možné zadat také heslo, které je poté nutnézadat pri pokusu o pripojení k sezení. V prípade úspešného vytvorenísezení je v levém dolním rohu Virtuálního mikroskopu zobrazenrámecek se základními informacemi o tomto sezení – rolí uživatele,poctu úcastníku, možnost jmenovat docasného vlastníka a ID sezení,které je nutné pro pripojení k sezení. Dále je zde tlacítko pro opuštenísezení nebo jeho zrušení.

35


Obrázek 5.3: Diagram komunikace vlastníka sezení pri založení sezenía aktualizace pozice snímku

V prípade, že se chceme k sezení prihlásit, je nutné znát ID sezenía prípadné heslo. V prípade úspešného prihlášení k sezení je v levémdolním roku Virtuálního mikroskopu zobrazen podobný rámecek,který byl zmínen výše. K dispozici je ovšem pouze informace o roliv sezení, ID sezení a tlacítko pro možnost odhlášení se ze sezení.

5.5.2 Komunikace prohlížec – server

Iniciátorem komunikace je vždy prohlížec uživatele. V závislosti nastavu sezení se dají data rozdelit do trí skupin. Data rídící, která jsoupomocí AJAXového volání skriptu na serveru odeslána v okamžikuzaložení, prihlášení, odhlášení nebo zrušení sezení, ale také napríkladinformace o predání rízení jinému uživateli v sezení. Dalšími datyjsou aktuální pozice snímku ve vedoucím prohlížeci (tj. prohlížeci,ve kterém je prihlášen vlastník nebo docasný vlastník sezení). Tatodata jsou odesílána obousmerne, od vedoucího prohlížece smeremna server, odkud jsou poté získána ostatními cleny sezení. Poslednískupinou dat jsou textové konstanty odesílané serverem informujícíVirtuální mikroskop o chybe nebo aktuálním stavu (napríklad zrušenísezení, jmenování uživatele docasným vlastníkem a podobne).

V prípade vlastníka sezení nebo cástecného vlastníka sezení jsouna server odesílána v pravidelném intervalu data obsahující aktuálnípozici v jeho prohlížeci. Tato data jsou poté odeslána pri dotazu odbežného clena sezení a slouží pro nastavení Virtuálního mikroskopudo stejné pozice jako má vedoucí prohlížec.

36


Obrázek 5.4: Diagram komunikace pri pripojení k sezení a aktualizacepozice snímku oproti serveru

5.5.3 Uložení dat na serveru

Pro uložení dat je na serveru použito session5 promenných, kteréposkytuje prímo jazyk PHP. Data tedy nejsou uložena v databázi.Výhodou je rychlost rešení, nezatežování databázového serverupri periodických aktualizacích nebo získávání dat a také automat-ická likvidace starých sezení, která již nejsou používána a nebylaodstranena manuálne.

Pro identifikaci sezení v rámci jazyka PHP je využit identifiku-jící retezec (ID), které jednoznacne urcuje dané sezení. Toto ID jestandardne generováno automaticky pri založení doposud neexistu-jícího sezení a je uloženo na strane prohlížece v souboru cookie nebopredáváno jako soucást adresy, což je dnes již zastaralá a nepouží-vaná metoda hlavne z duvodu bezpecnosti (zná-li prípadný útocníkID sezení, muže toto sezení ukradnout a vydávat se za puvodníhovlastníka). Identifikace sezení pro PHP muže být také generovánauživatelem, což je metoda, která je použita v prípade Virtuálníhomikroskopu. Platí pritom, že pro jedno sezení v rámci jednoho snímkumuže být založeno libovolné množství sezení, protože ID sezení jepokaždé jiné (bude ukázáno v další cásti kapitoly). Na serveru jsoupoté data uložena v následující strukture.

5. http://www.php.net/manual/en/book.session.php

37

http://www.php.net/manual/en/book.session.php


1 <?php2 $_SESSION["idx"]3 $_SESSION["position"]4 $_SESSION["name"]5 $_SESSION["password"]6 $_SESSION["owner"]7 $_SESSION["temp_owner"]8 $_SESSION["temp_owner_action"]9 $_SESSION["last_update"]

10 $_SESSION["members"]11 $_SESSION["last_id"]12 ?>

Shora dolu je v daných promenných uloženo IDX snímku, prokteré je sezení v rámci Virtuálního mikroskopu založeno, poz-ice snímku vedoucího prohlížece ve formátované podobe, jménosezení, prípadný otisk hesla, jméno vlastníka sezení (obsah promenné$_SERVER['REMOTE_USER']), jméno docasného vlastníka, casposlední akce docasného vlastníka, cas poslední akce vlastníka sezení,seznam clenu sezení (obsahuje pole dvojic jméno – poslední akcedaného clena sezení) a ID prirazené poslednímu pripojenému clen-ovi.

5.5.4 Generování ID sezení

ID sezení, které se uživatel dozví v okamžiku založení sezení a kteréje potrebné pro pripojení k sezení, je generováno manuálne a jed-noznacne identifikuje sezení i v rámci PHP sezení. Pro vygenerováníID sezení je využito posledních pet pozic aktuálního serverovéhocasu v sekundách, doplneného o první tri pozice mikrosekundovécásti aktuálního serverového casu a dále doplneného o náhodné císlov rozsahu 0 až 99.

Jako príklad uved’me následující situaci. Sezení bylo založenov case 1367001326 sekund a 585866 mikrosekund od pocátku epochy.Z techto dvou údaju získáme císla 01326 a 585. Dále dojde k vygen-erování náhodného císla – napríklad 64. Tyto tri císelné informacese spojí a zároven dojde k orezání levostranných nul. Výsledné IDsezení je tedy „132658564“.

Uvedený postup nám zarucuje složitost v prípadném uhádnutí IDa pripojení se k sezení, které není pro nás urcené. Nelze jen pocítat

38


s prostým nárustem casu jak by tomu bylo, kdyby ID bylo generovánopouze ze sekundové reprezentace casu, práve kvuli prítomnostimikrosekundové informace a dalšího náhodného faktoru v podobeposledního vygenerovaného císla. Zároven nám tento postup zarucujenaprosto unikátní ID v rozsahu minimálne 27,77 hodiny (díky posled-ním peti pozicím sekundové reprezentace casu) a to i v okamžiku, kdyby se shodovaly první tri pozice mikrosekund a poslední náhodnécíslo.

5.5.5 Reakce na odpojení uživatele

Behem sezení se muže stát, že se libovolný prohlížec odpojí odsezení neocekávane. Tato možnost muže nastat v prípade páduprohlížece, odpojení zarízení od internetového pripojení nebo naprík-lad i prostým zavrením okna prohlížece uživatelem. Ke každémuuživateli pripojenému do sezení je pamatován poslední cas aktivity.U prostého clena sezení je to cas poslední žádosti o pozici snímku,v prípade vlastníka nebo docasného vlastníka sezení to je potomposlední cas odeslání aktuální pozice snímku v prohlížeci. V prípade,že doba mezi poslední aktivitou a aktuálním casem na serveru je vetšínež definovaný casový interval, je uživatel považován za odpojeného.

Reakce aplikace závisí na typu uživatele. V prípade, že je odpojenýuživatel bežným clenem, je pouze smazána informace o tom, že bylprítomen v sezení. Vlastník sezení si poté pri nejbližší automatickéaktualizaci stavu sezení zjistí aktuální seznam pripojených uživatelu.V prípade, že odpojený uživatel byl docasným vlastníkem sezení, jepri nejbližší aktualizaci informován vlastník sezení, docasný vlastníksezení je odstranen a rízení je predáno zpet vlastníkovi. Pokud jeodpojeným uživatelem prímo vlastník je prvnímu uživateli, který tutoskutecnost zjistí, predáno rízení sezení a stává se novým vlastníkem.

V prípade plánovaného odpojení od sezení je v prípade docasnéhovlastníka nebo vlastníka sezení postupováno podobne jako v pred-chozím prípade.

Systém je navržen tak, že v jednu chvíli má sezení práve jed-noho vlastníka a maximálne jednoho docasného vlastníka. Pokudby nastala situace, kdy by dva prohlížece byly vedoucími, je prinejbližším pokusu o aktualizaci dat chybný prohlížec informována prepne se zpet do stavu bežného clena sezení.

39


Obrázek 5.5: Reakce clenu sezení pri aktualizaci pozice a kontroleživosti uživatelu

5.6 Datová vrstva

V následující cásti kapitoly je popsána datová vrstva aplikace – zpusobuložení dat, která definují vlastnosti snímku zobrazených pomocíVirtuálního mikroskopu, a zároven popis PHP skriptu sloužícíchpro jejich získání. V první cásti podkapitoly je také uveden puvodnísystém uložení dat a struktura puvodního HTML souboru pro prácis mikroskopem, který byl z techto dat generován.

5.6.1 Puvodní XML struktura

Jak již bylo nekolikrát v práci naznaceno, puvodní Virtuálnímikroskop byl tvoren samotným HTML souborem (príp. kombi-nací nekolika HTML souboru) který byl generován pomocí externíhoskriptu z XML datové struktury, ve které byly potrebné informaceo snímku uchovány. V rámci vývoje portálu a možností snímání jed-notlivých snímku se poté struktura postupne rozširovala o nekolikatributu nebo znacek. V praxi se v mikroskopu nacházeli ruzné kom-binace snímku, kdy pro každou kombinaci existovala do jisté míryrozdílná XML struktura:

• statické snímky bez dlaždic a bez fokusovacích rovin

40


• statické snímky bez dlaždic s fokusovacími rovinami

• statické snímky bez dlaždic sloužící jako náhled pro video, bezfokusovacích rovin

• snímky s dlaždicemi formátu jpeg bez fokusovacích rovin

• snímky s dlaždicemi formátu jpeg s fokusovacími rovinami

• snímky s dlaždicemi formátu jpeg2000 bez fokusovacích rovin

• snímky s dlaždicemi formátu jpeg2000 s fokusovacími rovinami

Každá z techto možností samozrejme umožnovala zobrazení ano-tací, které se pro jednoduchost dají rozdelit do dvou hlavních kate-gorií – anotace obsahující volný text a anotace obsahující text v podobeslovníkových definic, u kterých je již patricný text vyplnen predem.Každá z techto anotací umožnovala vytvorení libovolného poctuznacek (šipek), které se zobrazí v okne mikroskopu. Základní pohledna XML strukturu je k dispozici v príloze D. Každý z tagu má vlastníatributy specifikující patricné vlastnosti. Tyto atributy budou, vcetnetagu samotných, popsány dále v textu této kapitoly.

Z pohledu XML struktury je hlavním tagem (znackou) definice tagPICTURELIST, který ohranicuje všechny definice snímku v danémsouboru. Pro každou definici snímku je poté použit tag PICTURE.Vazba mezi snímkem a tímto tagem je jedna ku jedné, platí tedy, žekaždý snímek má práve jeden tag a každý tag je urcen práve jed-nomu snímku. Zároven má nekolik parametru sloužící pro nastavenípríslušných vlastností.

• ID – textový identifikátor snímku.

• IDX – císelný identifikátor snímku, kterým byl snímek odka-zován v portálu Atlases. Tento identifikátor je použit pro poj-menování fyzických souboru na serveru a jedná se o primárníidentifikátor. V rámci systému musí být jedinecný.

• EXT – prípona zobrazovaných snímku (jpg, png, gif apod.).

• VEXT – prípona videa, které bylo svázáno se snímkem (mp4,flv apod.).

41


• DG – textový identifikátor diagnóz nemocí.

• STAI – textový identifikátor barvení porízeného snímku.

• MAG – hodnota identifikující snímací objektiv poprípade jinýúdaj o technologii snímání (napr. RTG video).

• ZOOM – obsahoval císelnou reprezentaci pomeru vetší stranystatického obrázku bez dlaždic ku hodnote 900. Sloužil k urcení,zda je nutné v okne mikroskopu zobrazit možnost posunusnímku. V novém mikroskopu je bez významu.

• ZMF – identifikátor existence alternativního zobrazení v nástrojiZoomify. V novém mikroskopu je bez významu.

• ORG – textový identifikátor autora snímku.

• FMAG – jaký systém mikroskopu byl využíván (statický nebodlaždicový). V novém mikroskopu je bez významu.

• PRIVATE – identifikuje viditelnost snímku.

• SHOWLOGO – identifikace, zda-li se má po otevrenímikroskopu zobrazit „logo“ autora snímku nebo nikoliv.

• JP2 – identifikace, zda-li se jednalo o nový styl snímku ve for-mátu jpeg2000. V novém mikroskopu je bez významu (nahrazenatributem EXT s hodnotou „jp2“).

V rámci postupného vývoje mikroskopu docházelo k postupnémupridávání hodnot nebo i jednotlivých atributu pro tag PICTURE. Tomelo za následek, že nekteré atributy nebyly prítomny ve všechdefinicích (hlavne v prípade starších snímku) nebo byly uvedenyjako prázdné. Príklad konkrétní definice tagu PICTURE je si možnéprohlédnout na následujícím výpisu (jedná se o existující definicisnímku):

1 <PICTURE2 ID = "10-aorta-scn-40x-he"3 IDX = "10479+"4 EXT = "jpg"5 DG = "norma"

42


6 STAI = "he"7 MAG = "40x"8 ORG = "jfeit"9 FMAG = "2"

10 ZOOM = "3"11 ZMF = "0"12 JP2 = "1"13 >14 15 </PICTURE>

Tag zmínený výše obsahoval definice jen základních informacío snímku, které ale prakticky pro funkcnost mikroskopu nabylypotreba. Neobsahovali napríklad informaci o ruzných ostrícíchvrstvách, prípadném rozlišení snímku a definice anotací. Informaceo použitých fokusovacích vrstvách byly uloženy zvlášt’ v tagu FOCUS,a to pouze pro snímky mající statický rozmer bez dlaždic. V prípademodernejších snímku, které jsou rozdeleny do dlaždic, bylo potrebadefinovat tag HRDIM, a to jak v prípade snímku pro formát jpg, taki pro snímky novejšího formátu jpeg2000. Pro tag FOCUS existovalnásledující seznam atributu urcující jeho vlastnosti:

• INIT – výchozí zaostrovací vrstva, ve které byl snímek zobrazenpo otevrení mikroskopu v prohlížeci.

• BEG – pocátecní zaostrovací vrstva.

• END – koncová zaostrovací vrstva.

• SRF – pokud bylo nastaveno na hodnotu „1“, došlo pri zmenefokusovací roviny ke skrytí zobrazených anotací.

Níže mužeme videt jednu z mnoha definic tohoto tagu. Duležitéje, že ani tag PICTURE ani tag FOCUS nenesly informaci o velikostisnímku, který má být v mikroskopu zobrazen. Tento údaj byl umístenv samostatném textovém souboru, o kterém pojednává podkapitola5.6.1.

1 <FOCUS INIT = "3" BEG = "0" END = "20" SRF = "1" />

Tag HRDIM oproti tomu umožnil vložení informací o rozmerusnímku, rozmeru jeho dlaždic a zároven duplikoval v predcházejícímtagu již obsažená data o poctu fokusovacích rovin.

43


• BW – obsahoval šírku snímku pri nejvetším možném priblíženív pixelech. Jednalo se o originální rozmer snímku.

• BH – stejne jako predchozí, pouze se jednalo o výšku.

• FOCUSLEVELS – Pocet fokusovacích rovin. V novémmikroskopu je bez významu, protože lze tento údaj vypocítatz ostatních údaju.

• INITLEVEL – výchozí zaostrovací vrstva, ve které byl snímekzobrazen po otevrení mikroskopu v prohlížeci.

• BEGLEVEL – pocátecní zaostrovací vrstva.

• ENDLEVEL – koncová zaostrovací vrstva.

• TILEW – rozmer šírky dlaždice v pixelech, na kterou je snímekrozdelen.

• TILEH – stejne jako predchozí, pouze se jedná o výšku dlaždice.

1 <HRDIM2 BW="18547"3 BH="17051"4 FOCUSLEVELS="5"5 INITLEVEL="2"6 BEGLEVEL="0"7 ENDLEVEL="4"8 TILEW="256"9 TILEH="256"

10 />

Všechny dríve zmínené tagy definice XML sloužily pro základnínastavení mikroskopu, aby byl schopen zobrazit snímek korektne.V žádném z tagu nebo jejich atributu se však neuvádela adresa, nakteré jsou snímky uloženy. Tato adresa byla fyzicky prítomna prímov jednotlivých HTML souborech pro mikroskop.

Následující tagy nejsou pro funkcnost mikroskopu duležitéz pohledu toho, že i bez nich bylo možné snímek bez problému zo-brazit. Jednalo se o tagy pro definici popisu snímku a pro definicisamotných anotací. Pro definici popisu sloužil pár tagu TXT, kterýmel atribut L nastaven na hodnotu „cz“ pro ceský popis snímku,

44


poprípade na hodnotu „en“ pro anglický popis snímku. Hodnotoutagu byl pak samotný popis snímku v požadovaném jazyce.

1 <TXT L="en">Vertebra</TXT>2 <TXT L="cz">Obratel</TXT>

Pro definici anotací byly využity dva rozdílné tagy – XSIGNa DSIGN, kde každý má jiný duvod použití. Anotace lze rozdelit nadve základní skupiny – s volným textem a s textem pomocí slovníkovédefinice. Poslední zmínené lze poté rozdelit na další tri skupiny.

• anotace s volným textem (tag XSIGN)

• anotace s definovaným textem (tag DSIGN)

– definovaný text je plne nahrazen vlastním volným textem(obdoba XSIGN definice)

– k definovanému textu je doplnen volný text

– je zobrazen pouze definovaný text

Pomocný atribut obsahoval pouze tag DSIGN a to pro identifikaci,která z výše zmínených možností textu se má použít. Jednalo o seatribut DESCR, který v prípade, že byl uveden nabýval hodnoty „app“,která k dané definici pridávala volný text, poprípade hodnoty „ovwr“,která volným textem prepsala uvedenou textovou definici. V prípade,že uveden nebyl, využila se pouze definice slovníková bez volnéhotextu. Další tagy sloužily pro definici textu a prípadných znacek proanotaci.

• TXT – tag obsahující atribut L, který nabývá hodnot „cz“ nebo„en“. Obsahem tagu je volný text v daném jazyce, který je svázáns danou anotací a nese informaci pro uživatele mikroskopu.

• MARK – tag samotné znacky anotace. Tento tag je nepovinnýa muže ho být libovolné množství. Pro každou znacku je za-potrebí práve jeden. Obsahuje nekolik atributu, které specifikujídanou znacku:

– SHAPE – nese informaci o jakou znacku se jedná (šipkanebo tecka).

45


– ORI – orientace znacky (vlevo, vpravo, nahoru, dolu).– COLOR – informace o barve znacky (zelená, cervená, cerná

apod.).– SIZE – informace o velikosti znacky (malá, strední, velká).– XREL – relativní pozice na x-ové ose ve snímku– YREL – relativní pozice na y-ové ose ve snímku

Dále mel tag DSIGN tri upresnující tagy, které umožnily nastavithodnoty definic ze slovníku. Hodnotou bylo klícové slovo pro danoudefinici. Jednalo se o tagy TOP (Topography), SIG (Signs) a CHO(Choice). Struktura slovníkové definice byla umístena v samostatnéXML strukture, která bude ukázána pozdeji. Na následujícím výpisuje možné si prohlédnout definice obou možností anotací a proslovníkovou anotaci pak i definici jedné znacky.

1 <XSIGN>2 <TXT L="en">Neutrophils</TXT>3 <TXT L="cz">Neutrofily</TXT>4 5 </XSIGN>67 <DSIGN>8 <TXT L="en"></TXT>9 <TXT L="cz"></TXT>

10 <TOP>stratum_corneum</TOP>11 <SIG>keratotic_layer_type</SIG>12 <CHO>laminated_or_compact</CHO>13 <MARK14 SHAPE = "arrow"15 ORI = "right"16 COLOR = "green"17 SIZE = "medium"18 XREL = "0.41889"19 YREL = "0.25662"20 />21 22 </DSIGN>

Soubor s rozmery pro statické snímky

V predcházející cásti kapitoly bylo zmíneno, že pro statické snímkybez dlaždic (tj. definované pomocí tagu PICTURE bez definice po-

46


mocí tagu HRDIM) neexistoval v XML definici tag nebo atribut, kterýby obsahoval rozmer zobrazovaného snímku. Tento typ údaju bylumísten v samostatném textovém souboru mající následující formát:abrikosov-20x-s100.jpg: 900 x 900 px (342 632 byte) zoom:

1.00

Platí pritom, že na jednom rádku byla k dispozici informacepouze o jednom snímku. Snímek byl identifikován pomocí svéhoID (hodnota stejnojmenného atributu v predcházejícím XML souboru)a príponou souboru. Následovala velikost snímku v pixelech, velikostsnímku v bytech a hodnota zoom, která koresponduje se stejnojmen-ným atributem v tagu PICTURE.

Slovníková definice anotací

Pro správu slovníkových definic (tag DSIGN v predešlé cásti kapi-toly) byl použit samostatný soubor obsahující XML strukturu prodefinici textu. Pro definici byla použita struktura ohranicená koren-ovým tagem TOPOS. Samotná definice hodnot byla uložena pomocíznacek se jmény TOPO, CHSIGN a CHOICE. Každý z techto jmen-ovaných tagu byl rozšíren o atribut se jménem ATOM, který obsa-hoval klícové slovo použité v definici snímku v XML souboru speci-fikovaném v predchozí cásti kapitoly. Pro každý tag existovala dvo-jice tagu NAME, která pomocí hodnoty atributu L pro specifikacijazykové verze urcovala reálnou textovou hodnotu, která se zobrazilav mikroskopu.

1 <TOPOS>2 <TOPO ATOM="clinic">3 <NAME L="en">Clinical data</NAME>4 <NAME L="cz">Klinická data</NAME>5 <CHSIGN ATOM="lesion_location">6 <NAME L="en">Location of the lesion(s)</NAME>7 <NAME L="cz">Lokalisace léze (morf)</NAME>8 <CHOICE ATOM="scalp">9 <NAME L="en">Scalp</NAME>

10 <NAME L="cz">Skalp</NAME>11 <CHOICE>12 13 </CHSIGN>14 15 </TOPO>

47


16 17 </TOPOS>

V prípade, že bychom chteli tuto definici použít v nekteré z anotací,vzhled XML zápisu této anotace by vypadal následovne:

1 <DSIGN>2 <TOP>clinic</TOP>3 <SIG>lesion_location</SIG>4 <CHO>scalp</CHO>5 6 </DSIGN>

Výhodou použití již definovaných textu pro ruzné snímky jesamozrejme možnost využít tato data pro analýzy obsahu portálunebo napríklad umožnit prípadné filtrování obsahu stránky podleklícových slov. Slovníkové definice byly nadále v novém mikroskopuplne zachovány, pouze byly prevedeny do vhodného databázovéhoschématu (viz kapitola 5.6.4).

Ostatní soubory pro definici snímku

V rámci portálu pro uložení informací týkající se barvení, diagnózya použitého snímacího zarízení existovaly další tri soubory, kde prvnídva zmínené mely opet strukturu XML. Zde v práci jsou zmínenyjenom pro upresnení, kde byly tyto informace uloženy, a nevyžadujídalší bližší popis. Ve všech prípadech se jednalo o jednoduchou struk-turu, která umožnovala (podobne jako v predcházející podkapitoleu slovníkové definice anotací) použít v definici snímku klícové slovoa k nemu systém poté použil v daném jazyku dostupný príslušnýtextový popis. Napríklad XML struktura pro definici barvení melaformát následující:

1 <STAIS>2 <STAI ATOM="ae13">3 <TXT L="cz">AE13</TXT>4 <TXT L="en">AE13</TXT>5 </STAI>6 7 </STAIS>

V definici snímku (v tagu PICTURE) by poté byla použita hodnota„ae13“ jako hodnota atributu STAI.

48


5.6.2 XML soubor s definicí autoru

Pro správu uživatelu, kterí mají v rámci portálu Atlases existující reg-istraci a kterí vlastní nebo by mohli vlastnit nekterý snímek, existujezvláštní soubor s XML strukturou (authors.xml) umožnující drženíinformací o uživatelích (majitelích snímku). V tagu PICTURE v pred-cházející XML definici byl definován atribut ORG, který obsahovalklícové slovo uživatele. K tomuto klícovému slovu jsou pak, právepomocí souboru se seznamem autoru, prirazeny další informace jakocelé jméno, tituly, organizace, ve které uživatel pusobí atd. Tento sou-bor také jako jediný z puvodní datové struktury pro definice snímkuzustal v nezmenené podobe a nebyl preveden do databázového sys-tému. Príklad jedné z mnoha definic z tohoto souboru je uvedenv príloze D.

Jako rodicovský tag pro celý soubor je uveden AU-THOR_DICTIONARY, samotné definice autoru snímku jsoudostupné pomocí tagu ORG, kde pro každého autora existuje právejeden príslušný tag. Z pohledu nového Virtuálního mikroskopuje duležitý následující výcet atributu a tagu, které jsou zpravidlazobrazeny pouze v prípade výpisu seznamu autoru a jejich prirazeníke konkrétnímu snímku v administracní cásti mikroskopu. Bežnémuuživateli je dostupné pouze logo autora snímku, pokud je jehozobrazení u daného snímku povoleno.

• atribut ATOM – obsahuje klícové slovo pro daného autorasnímku. Toto klícové slovo je poté vepsáno do atributu ORGv tagu PICTURE v hlavní XML definici snímku.

• atribut LABELFILE – odkazuje na jméno souboru, ve kterém jeuloženo logo autora snímku. Toto logo se zobrazí pri prvotnímnactení mikroskopu, pokud je jeho zobrazení povoleno.

• FIRSTNAME – krestní jméno autora snímku

• SURNAME – príjmení autora snímku

• TITLE – tituly autora snímku, mohou být upresneny pomocíatributu L specifikujícího jazykovou verzi.

• INSTITUTE – název instituce, pod kterou autor vystupuje, opetmuže být prítomno upresnení jazykové verze.

49


• TOWN – mesto, ve kterém sídlí daná instituce

• COUNTRY – stát, ve kterém se nalézá dané mesto, muže býtupresnena jazyková verze

• EMAIL – emailová adresa autora snímku

5.6.3 HTML soubor Virtuálního mikroskopu

Na rozdíl od úplne první verze mikroskopu byl upravený mikroskop,ze kterého vychází diplomová práce, tvoren pouze jedním vygen-erovaným HTML souborem, ve kterém byly uloženy patricné in-formace o snímku, který se má zobrazit, a to formou promennýchv programovacím jazyce JavaScript. Pro každý snímek však muselstále existovat samostatný soubor. Data uložená v tomto souboru bylazískána z výše jmenovaných a popisovaných XML struktur. Pro úcelypráce není duležitý presný popis struktury tohoto souboru a názvypromenných, ve kterých byly tyto informace uloženy. Nekteré infor-mace prítomné v kódu stránky však nebyly uloženy externe v XMLsouborech, ale byly do HTML souboru vygenerovány. Jednalo seo adresu, kde lze snímky (dlaždice) nalézt a odkud je má aplikacenacíst a zobrazit. Další informací bylo nastavení, zda je nebo není zap-nutá možnost zmeny fokusovacích vrstev pro snímek. Dále naprík-lad také iniciální priblížení snímku pri nactení stránky mikroskopua informace, zda se má zobrazit zmenšený náhled snímku v rohustránky s mikroskopem. Príklad HTML souboru pro ilustraci lzenalézt v príloze D.

Pro nový Virtuální mikroskop došlo k úprave systému uloženídat a nové soubory HTML pro nové snímky již není potreba gen-erovat zvlášt’. Pro celý virtuální mikroskop existuje pouze jeden jed-iný HTML soubor, který obsahuje logiku pro nactení dat z databázea zobrazení príslušného snímku. Tímto zpusobem tak odpadá nutnostgenerovat, skladovat a spravovat nekolik desítek tisíc souboru prokaždý snímek mikroskopu. Podobne jako starší verzi lze strukturutohoto souboru nalézt v príloze D.

50


5.6.4 Databáze

Pro efektivnejší práci s novým Virtuálním mikroskopem bylo potrebajiž zmínené soubory obsahující XML strukturu prevést do vhodnédatabáze. Pro cást tohoto prevodu byly napsány vlastní PHP skripty,které umožnily z puvodních XML souboru získat príslušná dataa temito daty naplnit patricné tabulky. Extrakce dat z XML souboruobsahující definice jednotlivých snímku a jejich uložení do databázebyla poté provádena za pomoci pana Slávka Licehammera, který protento úcel vytvoril nekolik vlastních skriptu napsaných v jazyce Perl.Skripty pro export dat nejsou soucástí této práce a nebudou dále nijakpopisovány.

Pro uložení dat byla využita databáze MySQL, která byla již naserveru v dobe vzniku Virtuálního mikroskopu zprovoznena. Prehledtabulek, atributu, jejich datových typu, vazeb mezi tabulkami a takéjejich popis je dostupný v príloze C. Názvy tabulek jsou urceny pred-ponou „atl_“ (ze slova atlases) a dále, pokud to bylo možné, puvod-ním názvem XML souboru nebo tagu, který informaci dríve obsaho-val. Strucný diagram databázové struktury je dostupný na obrázku5.6.

Obrázek 5.6: Zjednodušené schéma databáze

51


5.6.5 Mapování uživatelu

Pro zjištení aktuálne prihlášeného uživatele je na serveru využitopromenné $_SERVER['REMOTE_USER'], ve které je uloženo jméno,pod kterým daný uživatel na serveru vystupuje. Pro zjištení prípad-ných práv nebo napríklad i pro zjištení, jaké nastavení má daný uži-vatel uloženo v databázi, je uvažováno takto získané jméno. Pri re-alizaci Virtuálního mikroskopu však vyšel najevo fakt, že uživatelé,kterí jsou uloženi v souboru authors.xml a tedy i v drívejším atributuORG tagu PICTURE v puvodní strukture, nejsou s touto promen-nou (reálným jménem) nijak spojeni. Pro to, aby aplikace mohlanastavit príslušná práva pri prihlášení uživatele (napríklad overení,zda je prihlášený uživatel vlastníkem snímku), bylo nutné uložitinformaci mapující vazbu reálné jméno - klícové jméno uživatelev authors.xml a rozhodovat na základe této informace. Pro tentoúcel uložení vazby byl vytvoren textový soubor userMap.txt, který jeumísten v korenovém adresári s PHP skripty aplikace. Na každémrádku tohoto souboru je uložena jedna konkrétní vazba ve tvaru„uživatelské jméno@federace;jméno v xml souboru“. Duvodem proc tentosoubor není ve formátu XML jako puvodní soubory starší verze ap-likace je fakt, že informace která je v tomto souboru uložená neob-sahuje složitejší definice a soubor muže být také rychleji zpracován naserveru. Zároven úprava tohoto souboru není složitejší než v prípadeúpravy XML struktury a soubor dosahuje menší velikosti na disku,protože neobsahuje nadbytecná data (tagy XML formátu). Pro fik-tivního uživatele s prihlašovacím jménem „frantisek78“, který vlastnílokální úcet na portálu Atlases a v souboru authors.xml je veden jako„jansky“ by záznam v tomto souboru vypadal následovne:[email protected];jansky

Kde „[email protected]“ je hodnota získána z PHPpromenné $_SERVER['REMOTE_USER'].

5.6.6 Soubory aplikace na serveru

V této cásti ctvrté kapitoly zminuji seznam PHP skriptu, ze kterýchje tvorena serverová cást aplikace. Samotný popis techto souboru jeuveden v príloze B. Tyto skripty jsou použity pro správu dat (napr. za-ložení anotací, vytvorení nové definice snímku, získání nastavení uži-

52


vatele) a jejich získávání za úcelem zobrazení ve webovém prohlížeci.Mezi temito soubory se také nacházejí dva specifické textové souborypro definici oprávnení a mapování uživatelu (zmíneno v predcházejícícásti kapitoly). V rámci instalace aplikace na server je nutné dodržetadresárovou strukturu techto souboru a zpravidla i jejich názvy. Prí-padnou zmenu názvu adresáru ci souboru samotných je pak nutnéaktualizovat i na webové cásti aplikace v príslušných promenných.Aplikace dále obsahuje nekolik obrázku znacek pro anotace a ovlá-dací prvky. Presnou strukturu všech souboru na serveru lze naléztv príloze A a jsou soucástí priloženého CD.

Komunikace s temito PHP skripty probíhá výhradne pomocíAJAX technologie z internetového prohlížece, kde je otevren Vir-tuální mikroskop. Parametry jsou predávány jako soucást interne-tové adresy skriptu. Všechny skripty, které umožnují vložení dat(a specifické skripty, které slouží pouze k vypsání dat) kontrolujíseznam predaných parametru a zároven príslušné oprávnení prih-lášeného uživatele. Skripty vypisují data tremi zpusoby. Muže sejednat o ucelený kus HTML kódu, který je na strane prohlížece pouzevložen do príslušného prvku na stránce a zobrazen, nebo mohoubýt data vrácena jako seznam hodnot s oddelovacem. Tato data potéJavaScriptová funkce prevezme, rozdelí, zkontroluje a naplní jimi prís-lušné promenné (napríklad získání dat pro základní definici snímku).Tretím typem dat jsou textové konstanty (zpravidla jedno nebo dveslova), která identifikují nekterou chybu vzniklou na strane serveru(zpravidla zpusobenou nevalidními daty predanými skriptu).

53

6 Aktuální stav Virtuálního mikroskopu

Približne v první tretine mesíce brezna roku 2013 byla na portál At-lases umístena první beta verze aplikace Virtuálního mikroskopu.Nahradila tak puvodní starou verzi v cásti portálu „Hypertextovýatlas patologie“, který slouží primárne pro výuku studentu patologie.Testování probíhalo za asistence hlavního administrátora portálupana Josefa Feita a chyby nalezené behem tohoto testování bylypravidelne odstranovány. V tomto casovém období zároven vznikalyi nekteré nové funkcionality aplikace, napr. možnost ke každémusnímku urcit libovolné uživatele mající práva pro správu anotací,která dríve nebyla požadována a známa.

Obrázek 6.1: Nový Virtuální mikroskop v prohlížeci Firefox na Win-dows 7 se zobrazenými anotacemi, kontextovým menu, náhledema uloženou pozicí

26. brezna 2013 došlo k nahrání poslední upravené verze Virtuál-ního mikroskopu, databáze byla naplnena ostrými daty pro všechnysnímky v dané cásti portálu a samotná aplikace povýšena na prvnífunkcní verzi 1.0 (obrázek 6.1).

K dnešnímu dni (26. 4. 2013) se v databázi nachází definice procelkem 11896 snímku. Zastoupení snímku si lze prohlédnout v grafu

54

6. AKTUÁLNÍ STAV VIRTUÁLNÍHO MIKROSKOPU

na obrázku 6.2. Pro tyto snímky je celkem definováno 20042 anotací,které jsou propojeny s 42587 jedinecnými definicemi znacek. Nejvetšísnímek v databázi má rozlišení 178911 x 147066 pixelu. Od nasazeníposlední aktualizace Virtuálního mikroskopu do dnešního dne (tj.v rozmezí 26. 3. 2013 až 26. 4. 2013) bylo v portálu Atlases zobrazenovíce než sto tisíc stránek. Nový Virtuální mikroskop z této sumy cinilpres dvanáct tisíc stránek a to bez nahlášení jediné provozní chybyod uživatelu.

Obrázek 6.2: Graf zastoupení snímku pro nový Virtuální mikroskop

6.1 Další vývoj

Logickým krokem dalšího vývoje aplikace je oprava a ladení chybobjevených behem praktického používání. Aplikace sice byla neko-likrát testována behem celého vývoje, nelze ovšem stoprocentneprohlásit, že je naprosto bezchybná. Nejvetší nápor uživatelu a tímpádem odhalení nejvíce chyb se dá ocekávat ve zkouškovém ob-dobí, kdy se studenti budou s Virtuálním mikroskopem ucit. Dalšímožností je prípadná úprava a zefektivnení algoritmu pro zobra-zování jednotlivých dlaždic pri zmene priblížení a celkové manipulacise snímkem behem práce ve Virtuálním mikroskopu. Jinou možnou

55

6. AKTUÁLNÍ STAV VIRTUÁLNÍHO MIKROSKOPU

úpravou je vyladení vzhledu aplikace na základe podnetu od prípad-ných uživatelu nebo umožnení nastavení velikosti ovládacích prvkupro osoby se sníženými zrakovými schopnostmi.

56

7 Záver

Výsledkem diplomové práce je aplikace, která vznikla na zák-lade úprav starší verze aplikace Virtuálního mikroskopu, která odúplne první verze prošla nekolika úpravami. Ani tato již upravenáverze však neumožnovala pro své funkcní chyby a problémy reálnénasazení do ostrého provozu. Zde v záveru práce lze bezpochyby ríci,že úpravy vyžadované zadáním práce se podarilo naplnit a dokonceaplikaci rozšírit o nekolik nových funkcí nad rámec zadání. Výsled-kem je komplexní webová aplikace, která umožnuje zobrazení snímkuve vysokém rozlišení, které dosahují velikosti v rádech desítek tisícpixelu v šírce a výšce. Aplikace však umí zobrazit i snímky v mno-hem menším rozlišení, a to i takové, pro které neexistuje rozdelenína menší cásti, kterým se v terminologii mikroskopu ríká obrazovédlaždice.

Ze splneného zadání mužeme zmínit naprosto shodnou podporuve všech dnes široce rozšírených internetových prohlížecích a tonapríklad i ve dnes už velice zastaralé verzi Microsoft Internet Ex-plorer 7. Dalším podporovaným prohlížecem je napríklad mobilníverze Safari na zarízení iPad. Jako další funkcionalitu vyžadovanouzadáním mužeme zmínit podporu správy anotací pro jednotlivésnímky, uložení pozic snímku pro uživatele a jejich vyvolání pri dalšínávšteve stejného snímku, správu podrobného popisu snímku a kom-pletní zmenu datové struktury Virtuálního mikroskopu z puvodníchsouboru obsahujících XML definice snímku a z nich generovanýchstatických HTML souboru do podoby modernejší databáze a jednohoHTML souboru, který dokáže nahradit stovky dríve vygenerovanýchsouboru. Jednou z nárocných cástí vývoje aplikace poté bylo vytvorenímožnosti založit sezení mezi nekolika prohlížeci a synchronizaceobrazu mezi nimi.

Jako jednu z nejduležitejších funkcionalit, které byly vytvorenynad zadání práce, lze zmínit implementaci celkem šesti uživatelskýchpráv, možnost spravovat definice snímku prímo z prostredí Virtuál-ního mikroskopu ci prítomnost dvou jazykových verzí všech textua jejich dynamickou zmenu pri zachování pozice snímku. Nemálovýznamné je jiste i rozšírení podpory pro ostatní mobilní prohlížecejako napríklad Opera Mobile nebo Chrome pro platformu Android.

57

7. ZÁVER

Vývoj této aplikace mi umožnil osvežit si vedomosti a zkušenostis psaním webových stránek a zároven mi prinesl prohloubení znalostíprogramovacího jazyka JavaScript.

V dnešní den (26. 4. 2013) je aplikace již mesíc v ostrém provozuv cásti portálu Atlases pro témer 12 tisíc snímku a zaznamenala jižvíce než 12 tisíc zobrazení a to prozatím bez nahlášení jediné chybyze strany uživatelu. Už takto vysoké císlo je dukazem, že aplikaceneskoncí v zapomnení a bude využívána, což pro me už od pocátkuvývoje bylo silnou motivací a duvodem odvést práci na úrovni.

58

Literatura

[1] GUTMANS, ANDI; RETHANS, DERICK; BAKKEN, STIGSAETHER. Mistrovství v PHP 5. Computer Press, 2005. 656 s. ISBN80-251-0799-X

[2] HOLZNER, STEVEN. Mistrovství v AJAXu : Naucte se programovatmoderní aplikace. Computer Press, 2007. 592 s. ISBN 978-80-251-1850-4

[3] SCHURMAN, ERIC M.; PARDI, WILLIAM J. Dynamické HTMLv akci. Computer Press, 2000. 440 s. ISBN 80-7226-401-X

[4] SCHURMAN, ERIC M.; PARDI, WILLIAM J. SQL : kompletníkapesní pruvodce. Grada, 1999. 248 s. ISBN 80-7169-692-7

[5] LICEHAMMER, SLÁVEK. Publikacní systém pro webový atlas der-matopatologie. [online]. Bakalárská práce. Masarykova univerzita,Fakulta informatiky. Vedoucí práce Michal Procházka. Dostupnýz URL: http://is.muni.cz/th/255920/fi_b.

59

http://is.muni.cz/th/255920/fi_b

A Obsah priloženého CD

Priložené CD obsahuje následující soubory:

• Diplomová práce.pdf – tento text v elektronické podobe

• Virtual microscope – adresár obsahující soubory a skripty aplikace

– /js – adresár obsahující soubory webového rozhraní

– /php – adresár obsahující PHP skripty serverového rozhraní

* ./ - konfiguracní soubory a skripty

* ./arrow – skripty pro správu anotací

* ./initial – skripty pro správu definic snímkua slovníkových denici

* ./description – skripty pro správu popisného textusnímku

* ./initial – skripty pro získání základní konfiguracemikroskopu pri jeho startu

* ./ownHistory – skripty pro vlastní historii uživatele

* ./session – skripty pro obsluhu a správu sezení

* ./settings – skripty pro vlastní nastavení mikroskopu

– /img – obrázky použité v mikroskopu

* ./ - obrázky ovládacích prvku

* ./arrow – obrázky znacek pro anotace

* ./ownHistory – obrázky vlastní historie

60

B Soubory aplikace

Obsahem této prílohy je popis souboru aplikace Virtuální mikroskop,a to jak souboru serverové cásti, tak souboru cásti aplikacní.

B.1 Konfiguracní soubory a skripty

Soubory jsou umísteny prímo v korenovém adresári aplikace a ob-sahují konfiguraci pro spojení k databázi ci práva uživatelu.

hasPermission.phpSkript obsahující logiku pro získání úrovne uživatelských práv.Práva jsou podrobne vysvetlena v kapitole 5.4.2.

mysql.phpObsahuje definici konstant pro jména tabulek v databázi a takéheslo a uživatelské jméno pro pripojení k databázi.

writeUser.phpJednoduchý skript sloužící pro vypsání aktuálne prihlášenéhouživatele (vhodný pri pridelování práv).

userList.txtSoubor obsahující definici uživatelských práv.

userMap.txtSoubor obsahující mapování reálných prihlašovacích jmen uži-vatelu na jejich jména v souboru authors.xml (popsáno v kapitole5.6.5).

B.2 Skripty pro získání pocátecní definice snímku

Tyto skripty slouží pouze pro získání dat potrebných pro nastaveníVirtuálního mikroskopu v okamžiku jeho zapnutí. Jedná se naprík-lad o velikost snímku, pocty fokusovacích rovin, autora snímkua podobne. Jsou umísteny v adresári initial v korenovém adresáriaplikace.

61

B. SOUBORY APLIKACE

getInitial.phpSkript slouží pro získání dat nutných pro pocátecní nastavenímikroskopu.

isAuthor.phpSkript overuje, zda je prihlášený uživatel autorem snímkua mají-li mu být tedy nastavena príslušná práva nebo nikoliv.

B.3 Skripty pro správu anotací a jejich znacek

Skripty jsou urceny pro správu a získání anotací a príslušných znacekk nim. Zároven slouží ke správe slovníkových definic. Jsou umístenyv adresári arrow, který je umísten v korenovém adresári aplikace.

addArrow.phpSkript obsahuje logiku pro uložení dat do príslušné tabulkyv databázi, a tedy k založení definice nové anotace a znacekprirazených této anotaci.

deleteArrow.phpSkript slouží pro odstranení anotací a znacek k nim prirazených.

getArrow.phpSkript formátuje a vypisuje data uložená v tabulce pro anotacea znacky. Výpis je v závislosti na parametru predanému skriptuurcen pro zobrazení v seznamu anotací a nebo pro zobrazenív seznamu pro editaci nebo odstranení anotací.

getEditArrow.phpSkript vypíše data o konkrétní anotaci a její znacky ve formátu,který zpracuje JavaScriptová funkce a poté zobrazí editacníformulár ve webovém prohlížeci.

getDictionary.phpSkript umožnuje vypsat seznam slovníkové definice.

getDictionaryDefinition.phpSkript slouží pro vypsání konkrétní slovníkové definice, kteráje poté zobrazena v príslušném formulári pro editaci.

62

B. SOUBORY APLIKACE

setDictionaryDefinition.phpSkript umožnuje vytvorení a editaci slovníkových definic.

deleteDictionaryDefinition.phpSkript pro odstranení slovníkové definice. Nelze odstranitdefinici, která je použita v nekteré existující anotaci.

B.4 Skripty pro správu definic snímku

Tyto skripty jsou umísteny v adresári arrow/initial a slouží pro správudefinice snímku, konkrétne pro založení a editaci vlastností snímku,které slouží pro nastavení Virtuálního mikroskopu pro zobrazenísnímku a zároven spravují uživatele mající oprávnení pro založenínových anotací.

getInitialData.phpPomocí tohoto skriptu jsou získána data urcená k naplneníformuláre v prípade zobrazení definice snímku.

setInitialData.phpSlouží k založení nové definice snímku pomocí webovéhorozhraní a nebo k editaci již založené definice.

getDiags.phpSlouží k výpisu seznamu diagnóz.

getStais.phpSlouží k výpisu seznamu možného barvení snímku.

getNextIdx.phpSkript umožnuje získat aktuální nejnižší volné IDX snímku prozaložení nové definice.

getAuthors.phpPomocí skriptu je vypsán formátovaný obsah souboru au-thors.xml, který obsahuje seznam možných autoru snímku.Výpis je poté použit pro vytvorení seznamu možných autorunebo pro výpis obsáhlejší informace o autorovi.

63

B. SOUBORY APLIKACE

getAnnotationUser.phpSkript slouží k získání aktuálního seznamu uživatelu, kterí majíu konkrétního snímku práva pro založení a správu anotací.

setAnnotationUser.phpSkript umožnuje pro konkrétní snímek uložit uživatele, kterýbude mít právo pro správu anotací.

deleteAnnotationUser.phpOpak predchozího. Skript maže uživatele mající práva prosprávu anotací.

B.5 Skripty pro správu popisu snímku

Následující skripty slouží pouze pro získání podrobného popisusnímku a pro jeho vytvorení, editaci nebo odstranení. Jedná seo soubory getDescription.php a setDescription.php (získání, nas-tavení textu). Jsou umísteny v adresári description, který je umístenv korenovém adresári aplikace.

B.6 Skripty pro správu vlastní historie

Skripty sloužící pro správu historie, kterou si muže uložit uživatel,jsou opet dva. getHistory.php umožnující získání historie, který siaktuálne prihlášený uživatel uložil k danému snímku a dále setHis-tory.php, který umožnuje historii pro daný snímek uložit, poprí-pade premazat již uloženou pozici. Každý uživatel si muže uložitdeset pozic pro každý snímek. Prípadný pocet samozrejme mužebýt zmenen úpravou kódu skriptu. Skripty jsou umísteny v adresáriownHistory, který je umísten v korenovém adresári aplikace.

B.7 Skripty pro vlastní nastavení

Každý prihlášený uživatel si muže nastavit a uložit pro celý Virtuálnímikroskop (bez rozdílu snímku), zda-li se mu má zobrazit možnostzmeny kvality snímku, historie a zároven jestli pri uložení historiemá být vyžadováno doplnení textu k dané pozici. Zároven umožnuje

64

B. SOUBORY APLIKACE

nastavení výchozího jazyka mikroskopu.Skripty spravující toto nastavení jsou dva – getSettings.php a dálesetSettings.php. První jmenovaný slouží pro získání konkrétních datpro prihlášeného uživatele. Pokud uživatel ješte žádné nastaveníneuložil, jsou vráceny výchozí hodnoty, kterými jsou vypnutí zo-brazení táhla zmeny kvality a vypnutí zobrazení historie. Jazyk jeve výchozím nastavení nastaven jako ceský. Skripty jsou umístenyv adresári settings v korenovém adresári aplikace.

B.8 Skripty pro synchronizaci prohlížecu

Poslední skupinou jsou skripty, které umožnují prihlášeným uži-vatelum realizovat takzvané „sezení“ v rámci nekolika internetovýchprohlížecu. Podrobneji o realizaci této cásti aplikace v kapitole 5.5.Skripty jsou umísteny v adresári session v korenovém adresári ap-likace.

createSession.phpSkript slouží pro pocátecní založení sezení.

connectSession.phpImožnuje pripojení k existujícímu sezení.

disconnectSession.phpImožnuje odhlásit pripojeného uživatele.

deleteSession.phpSkript, který maže sezení.

kickUser.phpSlouží k vyloucení uživatele ze sezení.

setTempOwner.phpSkript slouží k nastavení docasného vlastníka sezení.

removeTempOwner.phpSkript slouží k odebrání docasného vlastníka sezení.

getInfoSession.phpSlouží k získání informací o sezení.

65

B. SOUBORY APLIKACE

updatePosition.phpSkript slouží k nastavení aktuální pozice vedoucího prohlížece.

getPosition.phpSkript pro získání pozice, kde se nachází vedoucí prohlížec.

B.9 Soubory aplikacní cásti

Pomocí techto souboru je tvorena hlavní internetová stránka Vir-tuálního mikroskopu. Jedná se o soubory, které umožnují uživatelizobrazit aplikaci v internetovém prohlížeci a pracovat s ní. Pojmen-ování souboru vychází z puvodní verze aplikace a je zachováno z cistehistorických duvodu.

index.htmlJedná se o hlavní vstupní bod do aplikace. Na rozdíl od pred-chozí verze aplikace existuje pro celý mikroskop pouze jedensoubor. Tomuto souboru je pomocí parametru idx v adresovérádce prohlížece predána informace jaký snímek má zobrazit.

fevm.cssSoubor s kaskádovými styly pro nastavení vzhledu aplikace.

fevm.jsPrimární JavaScriptový soubor obsahující veškerou logiku ap-likace.

i18n.jsJavaScriptový soubor obsahující veškeré texty, které se vyskytujív aplikaci. Lokalizace je provedena do anglictiny a ceštiny.

optionLanguageList.jsObsahuje nastavení nekterých hodnot výberových seznamunapríklad s typy prípon snímku nebo typem objektivu, kterýmbyl porízen snímek. Duvod proc tyto data nejsou uloženav databázi, je jejich jednoduchost, velice malé množství a nemen-nost po dobu nekolika let. Jedná se o nový soubor, kterýv puvodní verzi aplikace neexistoval.

66

B. SOUBORY APLIKACE

generateMainLayout.jsJedná se také o nový soubor, který obsahuje radu funkcí, kteréslouží k vygenerování HTML kódu uživatelského rozhranív mikroskopu.

jsgraphics.jsKnihovna tretí strany umožnující vykreslení barevných obdél-níku do náhledu snímku nebo pro ohranicení výberu v zobrazo-vaném snímku. Jedná se o puvodní soubor beze zmen.

video.htmlHTML soubor umožnující zobrazení videa. Dríve bylo rešenopodobne jako samotný Virtuální mikroskop – pro každé videozvláštní soubor. V upravené verzi mikroskopu je pro všechnyvidea spolecný jeden soubor, který umožnuje zobrazení videana základe predaných hodnot jako soucást adresy stránky.

swfobject.js a flvplayer.swfSoubory umožnující zobrazení samotného videa. Jedná se o kni-hovny tretí strany, které jsou zkopírovány z puvodní verzeportálu, která umožnovala zobrazení videa.

67

C Databáze aplikace

atl_picture_definitionHlavní tabulka obsahující definici jednotlivých snímku. Ob-sahuje hlavní data dríve obsažená v XML souboru zmínenéhov kapitole 5.6.1 – napríklad tedy autora snímku, diagnózu,rozmery snímku, pocet fokusovacích vrstev apod. Zároven ob-sahuje napríklad i puvodne neobsažená data jako adresu dlaždicsnímku, pocátecní úroven priblížení a informaci zda zobrazitnáhled snímku ci nikoliv. Tabulka neobsahuje seznam anotacía s nimi spojené znacky.

atl_annotationTabulka pro seznam anotací pro snímky v databázi. Nahrazujedríve používané tagy XSIGN a DSIGN. Obsahuje volný a neboslovníkový text pro anotace. Neobsahuje definici znacek.

atl_markTabulka obsahuje seznam jednotlivých znacek, které se vážík vytvoreným anotacím. Z puvodní XML struktury nahrazujetag MARK.

atl_staiTabulka obsahující definice konstant pro barvení snímku.Nahrazuje dríve používaný XML soubor, ve kterém byly tytoinformace uloženy.

atl_diagTabulka, podobne jako predchozí atl_stai, obsahuje definicekonstant pro diagnózu snímku a nahrazuje dríve pro tyto úcelypoužívaný samostatný XML soubor.

atl_annotation_userTabulka obsahující nová data, ke kterým neexistuje ekviva-lence v podobe puvodních XML souboru. V rámci rozšírenímikroskopu o možnost správy anotací prímo ve webovémprostredí byla vznesena žádost, aby k libovolnému snímkumohlo být prirazeno libovolné množství uživatelu, kterí bu-dou mít možnost pridávat jednotlivé anotace práve pro tyto

68

C. DATABÁZE APLIKACE

konkrétní snímky. Mapování techto uživatelu na konkrétnísnímky je uloženo v této tabulce.

atl_topos_topoTabulka pro uložení cásti dat slovníkové definice textu. Ob-sahuje textové údaje dríve uložené v tagu TOPO.

atl_topos_chsignDalší tabulka pro uložení cásti dat slovníkové definice textu.Obsahuje textové údaje dríve uložené v tagu CHSIGN.

atl_topos_choicePoslední tabulka pro uložení cásti dat slovníkové definice textu.Obsahuje textové údaje dríve uložené v tagu CHOICE.

atl_descriptionTabulka obsahující nová data, dríve neobsažená v definicisnímku. V tabulce jsou uloženy textové popisy ke konkrétnímsnímkum uloženým v databázi.

atl_own_historyTabulka pro uložení dat vlastní historie. Jedná se tedy opet o tab-ulku, která obsahuje dríve nikde neuložená data. Standardnemuže každý uživatel uložit ke každému snímku až deset vlast-ních pozic s doplnujícím textem.

atl_settingsTabulka obsahující dríve opet nikde neuložená data. Dataobsahují vlastní nastavení pro mikroskop – jazykovou verzidaného uživatele, zobrazení nebo naopak skrytí táhla prozmenu kvality snímku, zobrazení vlastní historie a uložení textuk této historii. Jako jediná z tabulek nemá vazbu na žádnou jinouz tabulek.

69

C. DATABÁZE APLIKACE

Obrázek C.1: Kompletní schéma databáze pro Virtuální mikroskop

70

D Ukázky kódu

D.1 Struktura puvodního XML formátu definicesnímku

1 <PICTURES>2 3 <PICTURE>4 5 <TXT> </TXT>6 7 <FOCUS/>8 9 <HRDIM/>

1011 12 <DSIGN>13 14 <TOP> </TOP>15 <SIG> </SIG>16 <CHO> </CHO>17 18 <TXT> </TXT>19 20 <MARK/>21 ...22 </DSIGN>23 24 <XSIGN>25 26 <TXT> </TXT>27 28 <MARK/>29 ...30 </XSIGN>31 </PICTURE>3233 <PICTURE>34 ...35 </PICTURE>36 ...37 </PICTURES>

71

D. UKÁZKY KÓDU

D.2 Definice autora v souboru authors.xml

1 <AUTHOR_DICTIONARY>2 <ORG3 ATOM = "jfeit"4 MAINAUTHOR = "1"5 CONTRIBUTOR = "0"6 CONTRIBINDEX = "1"7 AUTHORLABEL = "1"8 LABELFILE = "_feit.gif"9 AUTHORDYNLABEL = "0"

10 PROGRAMMING = "1"11 TECHHELP = "0"12 >13 <FIRSTNAME>Josef</FIRSTNAME>14 <SURNAME>Feit</SURNAME>15 <TITLE L="cz">MUDr., CSc.</TITLE>16 <TITLE L="en">MD, PhD</TITLE>17 <INSTITUTE L="cz">18 Ústav patologie; FN Brno19 </INSTITUTE>20 <INSTITUTE L="en">21 Dept. of Pathology; University Hospital Brno22 </INSTITUTE>23 <TOWN>Brno</TOWN>24 <COUNTRY L="cz">Ceská republika</COUNTRY>25 <COUNTRY L="en">Czech Republic</COUNTRY>26 <EMAIL>[email protected]</EMAIL>27 <LABELDIMS NW="230" NH="50" SW="200" SH="37"/>28 </ORG>29 30 </AUTHOR_DICTIONARY>

72

D. UKÁZKY KÓDU

D.3 HTML soubor pro výchozí verzi Virtuálníhomikroskopu

1 <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 //EN">2 <HTML>3 <HEAD>4 <META http-equiv="Content-Type" content="text/html;5 charset=UTF-8">6 <TITLE>Virtual microscope</TITLE>7 <LINK REL="STYLESHEET" HREF="./fevm.css">8 <SCRIPT TYPE="text/javascript" SRC="./i18n.js"></SCRIPT>9 <SCRIPT TYPE="text/javascript" SRC="./dsign.js"></SCRIPT>

10 <SCRIPT TYPE="text/javascript" SRC="./jsgraphics.js"></SCRIPT>11 <SCRIPT TYPE="text/javascript" SRC="./fevm512.js"></SCRIPT>12 <SCRIPT TYPE="text/javascript">13 LC = LC.cz;14 var image = {15 size: { x: 178911, y: 147066 },16 base_name: ’72475’,17 base_url: ’http://atlases.muni.cz/demo2/fcgi/’18 + ’iipsrv512.cgi?FIF=/_evelkeobrazky/’,19 suffix: ’jp2’,20 has_map: true,21 };22 var mags = {23 max_level: 9,24 start_zoom_level: 8,25 sirkabunky: 512,26 vyskabunky: 512,27 };28 var fokuslevels = {29 minfokuslevel: 0,30 maxfokuslevel: 5,31 fokuson: true32 }33 init_mags();34 </SCRIPT>35 </HEAD>36 <BODY ONLOAD="initFevm();" ONRESIZE="wres();">37 <DIV ID="controlls"></DIV>38 <DIV ID="map"></DIV>39 <IMG ID="map_minimize">40 <IMG ID="hist_back">41 <IMG ID="zoom_window">

73

D. UKÁZKY KÓDU

42 <IMG ID="hist_forward">43 <DIV ID="fevmwindow">44 <script type="text/javascript">45 document.write(’<DIV ID="fevmbgdv"’46 + ’STYLE="position: absolute;’47 + ’width: ’ + mags[mags.start_zoom_level].x’48 + ’px; height: ’ + mags[mags.start_zoom_level].y’49 + ’px; left: 0px;top: 0px; "> <DIV ID="images"> </DIV>’50 + ’<DIV ID="Canvas" STYLE="left:0; top:0; z-index:100000">’51 + ’</DIV></DIV>’);52 </script>53 </DIV>54 </BODY>55 </HTML>

74

D. UKÁZKY KÓDU

D.4 Nový HTML soubor pro Virtuální mikroskop

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">2 <html>3 <head>4 <meta http-equiv="Content-Type" content="text/html;5 charset=UTF-8">6 <meta name="robots" content="noindex, nofollow">7 <link rel="stylesheet" href="fevm.css">8 <script type="text/javascript" src="i18n.js"></script>9 <script type="text/javascript" src="jsgraphics.js"></script>

10 <script type="text/javascript" src="fevm_new.js"></script>11 <script type="text/javascript" src="optionLanguageList_new.js">12 </script>13 <script type="text/javascript" src="generateMainLayout_new.js">14 </script>15 <script type="text/javascript">16 var getValues = getGetValues();17 var lang = "cz";18 if (getValues["language"] != void 0) {19 if (getValues["language"] != "") {20 lang = getValues["language"];21 }22 }23 if (getValues["idx"] != void 0) {24 if (getValues["idx"] != "") {25 image.idx = getValues["idx"];26 }27 }28 if (lang == "cz") {29 LC = LC.cz;30 } else if (lang == "en") {31 LC = LC.en;32 } else {33 LC = LC.cz;34 }35 document.title = LC.WINDOW_TITLE;36 </script>37 </head>38 <body onload="generateMainLayout(); initFevm();"39 onresize="wres();">40 <div id="mainContainer"></div>41 <div id="controlls"></div>42 <div id="map" style="display: none;">43 <div id="mapArrowContainer"></div>

75

D. UKÁZKY KÓDU

44 </div>45 <img id="mapMinimize" style="display: none">46 <img id="histBack">47 <img id="zoomWindow">48 <img id="histForward">49 <div id="fevmwindow"></div>50 <div id="debug"></div>5152 53 <script type="text/javascript">54 ...55 </script>56 </body>57 </html>

76

Documents

Virtuální mikroskop - itspy.cz · práce je duležitá˚ cástˇ nesoucí název „Hypertextový atlas patologie“, která primárneˇ slouží pro studenty lékarskýchˇ oboru.˚