Navigare 3D într-o pagină web folosind controlul ActiveX VTP (vtocx)

Introducere

Suita VTP este recunoscută ca fiind una extrem de flexibilă și robustă, putînd rula, independent sau inclusă într-o altă aplicație, pe orice platformă software. Recent a apărut posibilitatea de a beneficia de funcționalitatea 3D oferită de VTP inclusiv în browser-ul web (Internet Explorer), prin intermediul unui control ActiveX (.ocx). Vom încerca în continuare să exporăm posibilitățile oferite de controlul ActiveX vtocx, aflat încă în stadiu de dezvoltare alpha. Tutorialul va fi actualizat pe măsură ce apar noi versiuni cu funcționalități sporite.

Abordare practică

Pentru început va trebui să descărcați pachetul de instalare vtocx. Arhiva conține controlul ActiveX (vtocx.ocx), librăriile DLL pe care le utilizează și un exemplu HTML care demonstrează modul în care controlul vtocx poate fi integrat într-o pagina web. Extrageți conținutul arhivei descărcate într-un folder de pe mașina locală. Pentru această exemplificare am folosit folderul VTPweb aflat în rădăcina partiției C (C:\VTPweb).

Notă.
Fișierele DLL aflate în distribuția vtocx sînt compliate cu VC7.1 și sînt diferite de cele distribuite cu cele aflate în suita obișnuită VTP, chiar dacă poartă aceleași nume. Exte obligatoriu ca aceste fișiere să fie localizate în același folder cu vtocx.ocx pentru ca acesta să le poată apela. Nu puneți aceaste fișiere în foldere înregistrate în variabila Path a sistemului de operare.

Înainte de a putea fi folosit, controlul wtocx trebuie înregistrat. Pentru aceast lucru este necesar să deschideți o fereastră în linie de comandă (Start/Run/cmd). Folosiți comanda cd (change directory) pentru a naviga către folderul unde ați dezarhivat suita vtocx, în cazul de față cd cd C:\VTPweb, urmată de apăsarea tastei Enter (Return). În continuare dați comanda regsvr32 vtocx.ocx pentru a înregistra fișierul vtocx.ocx în sistemul de operare. În scurt timp ar trebui să primiți un mesaj de confirmare a înregistrării, similar cu cel prezentat în Figura 1.

Figura 1. Confirmarea înregistrării librăriei vtocx.ocx

Ultimul pas, înainte de navigarea 3D în browser, îl reprezintă editarea fișierului ocx.html pentru a reflecta calea reală către spațiul de lucru VTP (folderul Data) și numele terenului ce se dorește vizualizat (../Data/Terrains/numeteren.xml). Pentru mai multe detalii despre cum poate fi creat un teren folosind VTP vă recomand tutorialul Explorarea 3D a realității geografice folosind VTP. Primii pași. Urmînd aceeași pași am creat un astfel de teren folosind datele SRTM și LANDSAT disponibile pe geo-spatial.org. Datele corespunzătoare acestui teren au fost plasate în folderul C:\VTPweb\Data. Puteți descărca acest set de date de aici. La editarea fișierului ocx.html puteți folosi orice editor de text (ex.: Notepad, Notepad++, EditPlus etc.). Liniile care ne interesează sînt:


<param name="TerrainPaths" value="C:/VTP/TerrainApps/vtocx/Data/" />
<param name="TerrainFile" value="Terrains/Simple.xml" />


În cazul nostru am înlocuit parametrii TerrainPaths și TerrainFile după cum urmează:


<param name="TerrainPaths" value="C:/VTPweb/Data/" />
<param name="TerrainFile" value="Terrains/Fagaras.xml" />


Notă.
Versiunea actuală a controlului vtocx poate folosi doar date stocate local sau pe alte calculatoare din rețea, nesuportînd accesarea acestora prin intermediul unui URL.

Efectuați modificările în concordanță cu situația proprie, salvați și deschideți fișisierul folosind Internet Explorer. În funcție de setările de securitate, browser-ul s-ar putea să vă întrebe dacă doriți să permiteți utilizarea controlului vtocx.ocx în pagina web. Confirmați acțiunea selectînd opțiunea Allow Blocked Content (Figura 2) și apoi apăsînd butonul Yes la întrebarea “Are you sure you want to let this file run active content?” (Figura 3).

Figura 2. Aprobarea activării controlului vtocx 1.

Figura 3. Aprobarea activării controlului vtocx 2.

După cîteva secunde de încărcare/pregătire a datelor, terenul va fi afișat în pagina web (Figura 4). Utilizatorii pot naviga în scena 3D folosind stilul “Normal Terrain Flyer”. Mai multe detalii desprea acest stil de navigare găsiți în ultima parte a tutorialului Explorarea 3D a realității geografice folosind VTP. Primii pași.

Figura 4. Exemplu VTP rulînd într-o fereastră Internet Explorer.

Controlul navigației și customizarea paginii

Controlul .ocx are definite o serie metode și proprietăți cu care se poate interacționa prin intermediul limbajului JavaScript. Proprietățile implementate pînă acum se referă la:

• NavSpeed (float) – viteza curentă de navigare în metri pe secundă;
• PositionX (float) – poziția X a camerei în coordonate teren;
• PositionY (float) – poziția Y a camerei în coordonate teren;
• PositionZ (float) – poziția Z a camerei în coordonate teren.

Metode:

• ResetView() – resetează poziția camerei la valorile inițiale.

Pentru exemplificare testați link-urile Reset view, Fly faster, Fly slower, Get camera location din pagina web. Pentru a înțelege modul de funcționare studiați codul HTML. Modificarea aspectului grafic al paginii și a controalelor web necesită cunoștințe minime de HTML, CSS și JavaScript. Demonstrativ și în viteză am modificat fișierul ocx.html pentru a face mai prietenoase instrumentele de interacțiune cu controlul vtocx. Astfel am înlocuit cele două comenzi de adjustare a vitezei de navigare (Fly faster, Fly slower) cu un “slider” mult mai intuitiv de folosit. Suplimentar am scris cod pentru capturarea tastelor apăsate, navigarea putînd fi accelerată prin apăsarea tastei f sau încetinită cu tasta s, la fel ca în Enviro. De asemenea am înlocuit link-urile text Reset view și Get camera location cu pictograme sugestive, funcționalitatea rămînînd aceeași (Figura 5).

Figura 5. Exemplu customizare pagina vtocx.

Cei care doresc să experimenteze cu această variantă modificată pot descărca fișierul ocx_custom.zip. Acesta trebuie dezarhivat direct în folderul ce conține controlul vtocx (în cazul nostru direct în C:/VTPweb).

Atenție!
Pentru a funcționa corect, varianta modificată necesită ca folderele js și css, prezente în arhivă, să fie păstrate în aceeași locație cu fișierul ocx_custom.html.

Concluzii

Posibilitatea accesării funcționalității VTP în interiorul unei pagini web deschide calea către o multitudine de noi aplicații. Dacă aveți întrebări legate de acest tutorial nu ezitați să mă contactați pe e-mail, pe lista de discuții geo-spatial.org sau pe forum. Pentru mai multe detalii vă recomand secțiunea vtocx de pe site-ul official VTP și lista de discuții a proiectului.