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.