BS Contact J JS Observer example

BS Contact J : JS-API : BrowserObserver

Interaction from 3D to HTML

Sorry, your browser doesn't support Java.

At the left you see four boxes. A TouchSensor is attached to each of the smaller ones. Whenever you touch one of the small boxes, the touchSensor will start a timeSensor, which then will force a colorInterpolator to change the color of the big box. These actions are performed completely inside BS Contact J, so if you want to be notified of these actions, you have to add observers to the touchSensor's touchTime fields.

If you add a browser script observer, you will be notified on every user interaction with the boxes. If the observer is removed again, no events find their way to the javascript method any more.

In this example, when the user clicks on one of the small boxes, a message will be displayed if an observer has been added. After the observer has been removed, no message will be displayed when the user clicks on a box. In either case, the large box will change to the color of the box that the user clicked.

The appropriate method for getting values out of the displayed 3D world is:

v=document.bx3dref.getNodeField(nodename,fieldname);

where v is the string variable which receives the values, nodename is the DEFed name of the node to be connected to and fieldname holds the name of the field which contains the values to be received. Make sure that the specified node name exists in the VRML file.

To receive events in javascript, you have to register an observer to BS Contact J. This is done with the method

addBrowserScriptObserver(java.lang.String scriptmethod)

where scriptmethod is the name of the javascript method to be called if any BS Contact J events occur. The script method will then be called whenever a BS Contact J event occurs. Please consider that the applet needs to specify the mayscript keyword within it's applet tag to enable external javascript calls.

The event-receiving javascript method must be implemented this way:

function javascriptmethod(type,nodename,fieldname)

where type is the event type, nodename is the name of the node that launched this event, and fieldname is the name of the field that launched this event. Note that you must add a javascript browser observer after the applet has been loaded.

Let's have a look at the responsible code snippets: first you have to add the observer.

function addFieldScriptObserver() {
document.browser.addFieldScriptObserver("_2","touchTime","receiveEvent");
..
}

removeFieldScriptObserver removes all added observers.

function removeFieldScriptObserver() {
document.browser.removeFieldScriptObserver("_2","touchTime","receiveEvent");
..
}

receiveEvent is the method being called by the observer. Here the incoming events are identified and handled.

function receiveEvent(type,nodename,fieldname) {
if (nodename=="_2") {
if (fieldname="touchTime") alert("Blue box pressed!");
}
..
}

In the above example, receiveEvent doesn't distinguish event types because only the FIELD_CHANGED event is of interest. But it's also possible to handle different event types, e.g. FIELD_CHANGED events or ANCHOR_CLICKED events.