Full HTML for
Given by Wojtek Furmanski and Hasan Ozdemir at UC Web Applications Certificate on July 24 1997. Foils prepared 5 August 97
Outside Index
Summary of Material
| This describes use of JavaScript for VRML97(VRML2) Nodes |
| Conventions for JavaScript to VRML97 fields |
| Accessing Browser Object Methods |
Denote Foils where Image has important information
Denote Foils where HTML is sufficient
Scripting in VRML'97 Part II JavaScript Script Node
JavaScript Script Node - I
JavaScript Script Node - II
Event Handling
EventIn Handling - EventIn Functions
EventIn Handling - eventsProcessed() - I
EventIn Handling - eventsProcessed() - II
EventIn Handling - initialize() - I
EventIn Handling - initialize() - II
EventIn Handling - shutdown()
Accessing Fields and EventOuts of the Script
Accessing Fields and EventOuts of the other Script - I
Accessing Fields and EventOuts of the other Script - II
Sending eventOuts
VRML Field to JavaScript variable conversion - I
VRML Field to JavaScript variable conversion - II
VRML Field to JavaScript variable conversion - III
VRML Field to JavaScript variable conversion - IV
Browser Object - I
Browser Object Methods - I
Browser Object Methods - II
Browser Object Methods - III
Browser Object Methods - IV
Browser Object Methods - V
Example URLs
Outside Index
Summary of Material
HTML version of Basic Foils prepared 5 August 97 
Full HTML Index
| CPS616 Summer 97 Computational Science for the Information Applications |
| Hasan Timucin OZDEMIR |
| htozdemi@top.cis.syr.edu |
HTML version of Basic Foils prepared 5 August 97 
Full HTML Index
| JavaScript is a programmable API that allows cross-platform scripting of events, objects, and actions. |
| It is expected that JavaScript, Version 1.2, will be the scripting language of a Script node when JavaScript becomes a standard. |
| The url field of the Script node may contain a URL that references JavaScript code: |
| Script { url "http://foo.com/myScript.js" } |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| The javascript: protocol allows the script to be placed inline as follows: |
| Script { url "javascript: function foo( ) { ... }" } |
| The url field may contain multiple URL's and thus reference a remote file or in-line code: |
| Script { |
| url [ "http://foo.com/myScript.js", |
| "javascript: function foo( ) { ... }" ] } |
| The file extension and MIME type for JavaScript source code is .js and application/x-javascript. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| Each eventIn definition corresponds a method/function name in the file denoted with url field. Whenever this event occurs, this method/function is being called. |
| By changing the value of eventOut field in the JavaScript file, an EventOut can be produced. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| The function(method)'s name is the same as the eventIn and is passed two arguments, event value and its timestamp. The type of the value is the same as the type of the eventIn and the type of the timestamp is SFTime. |
| Script { |
| eventIn SFVec3f new_translation |
| url "javascript: |
| function new_translation(value, timestamp) { ... }" |
| } |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| eventsProcessed( ) function is called after some set of events has been received. |
| Some implementations call this function after the return from each EventIn function, while others call it only after processing a number of EventIn functions. |
| In the latter case, an author can improve performance by placing lengthy processing algorithms which do not need to execute for every event received into the eventsProcessed( ) function. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| DEF Example_1 Script { |
| field SFColor currentColor 0 0 0 |
| eventIn SFColor colorIn |
| eventOut SFBool isRed |
| url "javascript: |
| function colorIn(newColor, ts) { |
| // This method is called when a colorIn event is received |
| currentColor = newColor; |
| } |
| function eventsProcessed( ) { |
| if (currentColor[0] >= 0.5) // if red is at or above 50% |
| isRed = true; |
| }" |
| } |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| initialize( ) is invoked before the browser presents the world to the user and before any events are processed by any nodes in the same VRML file as the Script node containing this script. |
| The initialize( ) function has no parameters. |
| Events generated from initialize( ) are given the timestamp of when the Script node was loaded. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| DEF Example_2 Script { |
| eventIn SFTime touched1 |
| eventOut SFVec3f new_translation |
| field MFVec3f verts [] |
| field SFInt32 count 1 |
| url "javascript: |
| function initialize( ) { |
| verts[0] = new SFVec3f(0, 0, 0); |
| verts[1] = new SFVec3f(1, 1.732, 0); |
| verts[2] = new SFVec3f(2, 0, 0); |
| verts[3] = new SFVec3f(1, 0.577, 1.732); |
| } |
| function touched1 (value) { |
| new_translation = verts[count]; // move sphere around tetra |
| count++; |
| if (count >= verts.length) count = 1; |
| }" } |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| shutdown( ) is invoked when the corresponding Script node is deleted or when the world containing the Script node is unloaded or replaced by another world. |
| The shutdown( ) function has no parameters. |
| Events generated from shutdown( ) are given the timestamp of when the Script node was deleted. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| Fields defined in the Script node are accessible only within the Script by using its name. Its value can be read or written. This value is persistent across function calls. |
| eventOuts of a Script node are accessible from its JavaScript functions and it can be read. The value is the last value assigned to this eventOut. |
| The eventIns are not accessible from its JavaScript functions. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| The script can access any exposedField, eventIn or eventOut of any node to which it has a pointer: |
| DEF MyCube3 Transform { } |
| DEF Example_3 Script { |
| field SFNode node USE MyCube3 |
| eventIn SFVec3f pos |
| directOutput TRUE |
| url "javascript: |
| function pos(value) { |
| node.set_translation = value; |
| }" |
| } |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| Events generated by setting an eventIn on a node are sent at the completion of the currently executing function. |
| The eventIn shall be assigned a value of the same datatype; no partial assignments are allowed. For example, it is not possible to assign the red value of an SFColor eventIn. Since eventIns are strictly write-only, the remainder of the partial assignment would have invalid field values. |
| Assigning to the eventIn field multiple times during one execution of the function still only sends one event and that event is the last value assigned. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| Assigning to an eventOut sends that event at the completion of the currently executing function. |
| Assigning to the eventOut multiple times during one execution of the function still only sends one event and that event is the value of the eventOut at the completion of script execution. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| JavaScript native data types consist of boolean, numeric and string. The language is not typed, so data types are implicit upon assignment. |
| The VRML SFBool is mapped to the JavaScript boolean. The JavaScript true and false constants, the VRML's TRUE and FALSE values may be used. |
| The VRML SFInt32, SFFloat and SFTime fields are mapped to the numeric data type and will be maintained in double precision accuracy. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| Scalar values (boolean and numeric) are assigned by copying the value in function calls. |
| Other VRML fields are mapped to JavaScript objects. JavaScript objects are passed by reference. |
| When assignments are made to eventOuts and fields, the values are converted to the VRML field type. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| The SF objects will be assigned as references, except for assigning to or from eventOut, fields, and MF objects because they are at the interface between VRML field values and JavaScript variables. |
| Assigning an element of an MF object to an SF object creates a new object of the corresponding SF object type with the current value of the specified MF element. |
| Assigning an SF object to an element of an MF object copies the value of the SF object into the dereferenced element of the MF object. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| Field objects behave identically to eventOut objects, except that no event is sent upon completion of the function. |
| For eventOut objects, assignment copies the value to the eventOut, which will be sent upon completion of the current function. |
| Assigning an eventOut to an internal variable creates a new object of the same type as the eventOut with the current value of the eventOut. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| There are a bunch of static methods available in the Browser object which allow scripts to get and set browser information. |
| The syntax for a call is: |
| mymfnode = Browser.createVrmlFromString('Sphere {}'); |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| SFString getName( ) : Returns a string representing the name of the browser currently in use. |
| SFString getVersion( ) : Returns a string representing the version of the browser currently in use. |
| SFFloat getCurrentSpeed( ) : Returns the average navigation speed for the currently bound NavigationInfo node in meters per second, in the coordinate system of the currently bound Viewpoint node. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| SFFloat getCurrentFrameRate( ) : Returns the current frame rate in frames per second. |
| SFString getWorldURL( ) : Returns the URL for the root of the currently loaded world. |
| void replaceWorld( MFNode nodes ) : Replaces the current world with the world represented by the passed nodes. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| void loadURL( MFString url, MFString parameter) : Loads the first recognized URL from the specified url field with the passed parameters. The current world will be terminated and replaced with the data from the specified URL. |
| void setDescription( SFString description ) : Sets the passed string as the current description. |
| void createVrmlFromURL( MFString url, SFNode node, SFString event ) : Instructs the browser to load a VRML scene description from the given URL or URLs. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| MFNode createVrmlFromString( SFString vrmlSyntax ) : Imports a string consisting of a VRML scene description, parses the nodes contained therein, and returns the root nodes of the corresponding VRML scene. Note that USE statements inside the string may refer only to nodes DEF'ed in the string, and non-built-in node types used by the string must be prototyped using EXTERNPROTO or PROTO statements inside the string as a result the string must be self-contained. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| void addRoute( SFNode fromNode, SFString fromEventOut, SFNode toNode, SFString toEventIn ) |
| void deleteRoute( SFNode fromNode, SFString fromEventOut, SFNode toNode, SFString toEventIn ) : These methods respectively add and delete a route between the given event names for the given nodes. |
| Scripts that may call these methods must have directOutput set to TRUE. |
| Scripts that may call replaceWorld(), loadURL() or setDescription() shall have mustEvaluate set to TRUE. |
HTML version of Basic Foils prepared 5 August 97
Full HTML Index
| JavaScript Script Node examples at |
| http://king.npac.syr.edu:2006/src/hasan/Vrml/JavaScriptNode |
| External Authoring Interface (EAI) example at |
| http://king.npac.syr.edu:2006/src/hasan/Vrml/EAI/Cylinder/main.html |
| http://king.npac.syr.edu:2006/src/hasan/Vrml/EAI/Cylinder/docs |