Javascript programming with DevalVR

DevalVR can be controlled from the web page with Javascript programming.

Javascript programming with DevalVR plugin is posible with these browsers:

- Internet Explorer 4  or later
- Netscape 7.2  or later
- Mozilla 1.7  or later
- Firefox 0.8  or later
- Opera 9 or later 

To view a Javascript example click here: javascript_example.html

First step: Assign a name to the plugin with HTML tags

To access to the plugin from Javascript, it's needed to assign it a name or identifier. Use the tags ID (for Internet Explorer) and NAME (for Netscape / Firefox / Opera) to assign the plugin name. This identificator is used later "to speak" with plugin.

IMPORTANT: Use always  ID tag into OBJECT, and NAME tag into EMBED

Example code (in this example, the plugin has the "PLUGIN1" identifier):

<OBJECT ID='PLUGIN1' classid=clsid:5D2CF9D0-113A-476B-986F-288B54571614 codeBase='http://www.devalvr.com/instalacion/plugin/devalocx.cab#version=0,3,2,0' style='WIDTH: 100%; HEIGHT: 90%' width='100%' height='90%'> <PARAM NAME='src' VALUE='panorama.mov'> <EMBED NAME='PLUGIN1' TYPE='application/x-devalvrx' PLUGINSPAGE='http://www.devalvr.com/instalacion/plugin/install.html' src='panorama.mov' width='100%' height='90%'></EMBED> </OBJECT>  

Second step: Javascript programming, accessing to parameters

You can use the plugin identifier to access and change all HTML parameters from Javascript. This is the complete list of all DevalVR parameters

For compatibility, use always this syntax to access the plugin:

    document.plugin_name.parameter_name = value;

For example, this code load a new file in the viewer:

<SCRIPT LANGUAGE=javascript> <!-- document.PLUGIN1.src="http://www.myserver.com/mypano.mov"; //--> </SCRIPT>
NOTE: If you change the "src" parameter, you must write the full url(beginning by "http://") to work on Netscape and compatible browsers.

Another example, this code changes to full screen mode:

<SCRIPT LANGUAGE=javascript> <!-- document.PLUGIN1.fullscreen=1; //--> </SCRIPT>

This code sets the camera zoom to 2.0: 

<SCRIPT LANGUAGE=javascript> <!-- document.PLUGIN1.zoom=2.0; //--> </SCRIPT>

All parameters can be set and read. This example gets the current PAN (rotationy) value, increments it and sends to the plugin the new value:

<SCRIPT LANGUAGE=javascript> <!-- var currentpan = document.PLUGIN1.rotationy; currentpan = currentpan + 1; document.PLUGIN1.rotationy = currentpan; //--> </SCRIPT>

Plugin Methods

In addition several functions exist in the plugin to call from Javascript.

The Commands function sends a text value to the plugin. It will be used in specific functions that requires to send a text value. The parameter1 indicates the action to execute.

Syntax:   
 
(number) returnedValue = document.IDPLUGIN.Commands ( (text) parameter1, (text) parameter2 );

Function	parameter1	parameter2	Description
Commands	"getvalue"	"tilt" "pan" "zoom" "fps" "progress" "mousetilt" "mousepan" "mousex" "mousey" "mouse3Dx" "mouse3Dy" "mouse3Dz"	Returns a viewer value, these value is a floating number. Parameter2 indicates the return parameter.
Commands	"menu"	"reset" "inczoom" "deczoom" "fullscreen" "extern" "play" "manual" "help" "menu" "viewfinder"	Activates a toolbar function
Commands	"frame"	name	Loads the object in the script with the name equal to parameter2
Commands	"show"	name	Shows the object in current frame with name equal to parameter2
Commands	"hide"	name	Hides the object in current frame with name equal to parameter2

This example activates or deactivates the autoplay toolsbar function:

<SCRIPT LANGUAGE=javascript> <!-- document.PLUGIN1.Commands("menu","play"); //--> </SCRIPT>

Command function

The Command function, sends three numerical values to the plugin. It will be used in specific functions that requires to send several numerical values. The parameter1 indicates the action to do.

Syntax:
 
document.IDPLUGIN.Command( (text) parameter1, (number) parameter2, (number) parameter3, (number) parameter4 );

Function	Parameter1	Parameter2	Parameter3	Parameter4	Description
Command	"rotcamera"	rotation in X axis (TILT angle)	rotation in Y axis (PAN angle)	rotation in Z axis	Rotates the camera to the specified angles.
Command	"zoomcamera"	zoom value	not used	not used	Change the zoom of the camera to the specified value.
Command	"poscamera" (for 3D maps)	X position	Y position	Z position	Moves the camera to the specific position in 3D space. This function is used in 3D maps.    In panoramic scenes the camera position always is 0,0,0
Command	"poscamerautm" (for 3D maps)	UTM X coordinate	elevation	UTM Y coordinate	Moves the camera to the specific UTM coordinates. This function is used in 3D maps.

This example rotates the camera to PAN=10 degrees and TILT=-50 degrees:

<SCRIPT LANGUAGE=javascript> <!-- document.PLUGIN1.Command("rotcamera",-50, 10, 0); //--> </SCRIPT>

GetVariable function

This function is used to get any value from plugin.

Syntax:
 
(text) returnedValue = document.IDPLUGIN.GetVariable( (text) parameter1);

Function	parameter1	Description
GetVariable	"panoramaname"	Returns the name of the current panorama loaded in the plugin, when a script is running.
GetVariable	"filename"	Returns the name of the current file name loaded in the plugin, with full path.
GetVariable	"description"	Returns the description of the current panorama loaded in the plugin, when a script is running.