Caution: the Layer and Layout nodes are new to the X3D version 3.2
specification and are not supported by some viewers.
The Layering Example
Layering
In the previous tutorial we inserted out the basic geometry of the file.
Now we will attach the functionality to the buttons. In the scene illustrated,
the cube can be rotated and the buttons at the bottom can be used to change
the color of the cube. For red, the color will change
immediately. For blue, the color will change gradually.
Moving Over the Buttons
The images of the buttons are contained in a texture file. The upper images of
the buttons are the default images. The images at the bottom are used to
indicate that the mouse is over the button.
The first step to to set up routing so that when the mouse is over the blue button
the image with the red border is chosen but when the mouse is not over the blue button
then the upper image with the gray border is chosen.
The two versions of the blue button are placed within a Switch node (Blue_sw).
The TextureCoordinate nodes are set so that either the upper left part of the texture
is used or the lower left portion is used. The routing will be set to change
between these two Shapes depending on the location of the mouse.
A simplified version of the code for this is as follows.
It is the job of the TouchSensor "Blue_ts" to monitor the position of the mouse and to send out
events accordingly. The TouchSensor monitors the actions over the button because it and
the Switch node that contains the button geometry are both children of the same node, in case
a Transform node. In other words, the TouchSensor and Switch node are siblings.
When the mouse is over the blue button, a value of TRUE is sent to the
BooleanFilter "Blue_bf". This causes it to send a TRUE value to the IntegerTrigger "Blue_it1".
Since the integerKey of the IntegerTrigger is 1, it sends a 1 to the Switch node, selecting
the second image.
When the mouse is not over, the blue button the message is similar, however because
the BooleanFilter "Blue_bf" receives a FALSE, it will instead send a TRUE value to the
IntegerTrigger "Blue_it0", whose integerKey is 0. Thus the first button in the Switch
node will be selected.
When the mouse is over the blue button
TouchSensor "Blue_ts" --True-->
BooleanTrigger "Blue_bf" --True-->
IntegerTrigger "Blue_it1" --1-->
SwitchNode "Blue_sw"
When the mouse is not over the blue button
TouchSensor "Blue_ts" --False-->
BooleanTrigger "Blue_bf" --True-->
IntegerTrigger "Blue_it0" --0-->
SwitchNode "Blue_sw"
Changing the Color
The TouchSensor "Blue_ts" also monitors mouse clicks on the blue button.
When the mouse is left-clicked over the button, the TouchSensor sends out
a touchTime event. ROUTEs are inserted into the scene so that the touchTime event
causes a startTime event to be sent to the TimeSensor "Blue_timer".
The timer then starts to send fraction events to the ColorInterpolator "Blue_ci",
which calculates the color and sets the diffuse color of the Material "BoxMaterial",
which is associated with the cube in the main scene. The ColorInterpoator
contains two colors, red and blue. So the color changes gradually from red to blue.
For the red button, both colors in the ColorInterpolator are red. This means that
the color will change immediately to red, and will stay red.
Routing messages can be sent between nodes located anywhere in the scene, even if
they are in different layers.
