4.4 Adding and Removing Kids with Javascript

Warning, needs some cleaning probably (has been left alone since Spring 97 and may crash your Browser .. it does crash my Irix CP 1.02 but works with Win95/Cosmo 2). Before you start reading please work out chapter 5 on page that will teach a bit more about JavaScript and VRML.

In this example we show how to add and remove DEFed objects from children properties of Transform/Group Nodes.

Example 4.4.1   Add/Remove DEFed objects I  

Contents:	add/remove children
VRML:	generate/generate-js-5.wrl
Source:	generate/generate-js-5.text

The following code defines a node that contains child we want to reuse and that contains a TouchSensor.

DEF RedBoxSwitch Transform {
   translation -5 10 0
   children [
      DEF RedBox Shape {
         appearance Appearance {
            material Material { diffuseColor 1 0 0 }
         }
         geometry Box {}
      }
      DEF MakeRedBox TouchSensor {}
      ]
}

Next we define a place where we want to put a cousin of the DEFed object. Note the empty children [ ] of the BoxHolder Node.

DEF Scene Group {
   children [
      ...................
      DEF BoxHolder Transform {
         translation 0 1 0
         children [ ]
      }
      ...................      
     ] }

A little script will be activated by the touchsensor, because of this route statement:

  ROUTE MakeRedBox.isActive TO GenBoxS.isActive

and then activate in turn two routes that remove/add the node.

ROUTE GenBoxS.child TO RedBoxSwitch.removeChildren
ROUTE GenBoxS.child TO BoxHolder.addChildren

Here is the Code of the script

DEF GenBoxS Script {
   eventIn SFBool isActive
   eventOut MFNode child
   field MFNode node USE RedBox
   url ["javascript:
                function isActive(value) {
                        if(value) child = node;
                }
        "]
}

The next example is slightly more complicated, because it will allow you to ``reset'' the scene. Note that it breaks with Cosmo and works with WorldView.... maybe my fault. [Will have to work on this when I have time].

Example 4.4.2   Add/Remove DEFed objects (and reset) II  

Contents:	add/remove Children
VRML:	generate-js-6.wrl
Cosmo:	generate-js-6C.wrl
Source:	generate-js-6.text

Compared to the above example we need to add a few things: We want to add a cousin to the place where we have removed a childe after a reset. So a typical node now looks like this (it includes the RedBoxHolder) Group from which we will remove/add a child:

DEF RedBoxSwitch Transform {
   translation -5 10 0
   children [
      DEF RedBoxHolder Group {
         children [
            DEF RedBox Shape {
               appearance Appearance {
                  material Material { diffuseColor 1 0 0 }
               }
               geometry Box {}
            }
           ] }
      DEF MakeRedBox TouchSensor {}
     ]
}

Below is the script that will reset the scene. Note how we bind objects in the script in order to do some direct output (instead of using lots of routes):

DEF ResetS Script {
   eventIn SFBool isActive
   eventOut MFNode child
   directOutput TRUE
   field SFNode redBallHolder USE RedSphereHolder
   field SFNode redBall USE RedSphere
   field SFNode redBoxHolder USE RedBoxHolder
   field SFNode redBox USE RedBox
   field SFNode blueBallHolder USE BlueSphereHolder
   field SFNode blueBall USE BlueSphere
   field SFNode boxHolder USE BoxHolder
   field SFNode sphereHolder USE SphereHolder

   url "javascript:
                function isActive(value) {
                   redBallHolder.addChildren = redBall;
                   blueBallHolder.addChildren = blueBall;
                   redBoxHolder.addChildren = redBox;
                   boxHolder.removeChildren = redBox;
                   sphereHolder.removeChildren = redBall;
                   sphereHolder.removeChildren = blueBall;
                }
        "
}

ROUTE Reset.isActive TO ResetS.isActive

Reset is a simple touchsensor (a yellow ball) in the scene.