Gregory Seidman's VRML2 Widgets


All PROTOs, including Script code, used in these demos are freely available. The proper EXTERNPROTO reference for each can be found in this file. All Script nodes wrapped in these PROTOs are implemented in both VRMLscript and Java. If anyone uses these files for testing/development of a browser, please let me know that you have found them useful.

The Abacus

The abacus is sort of a widget.


This is a general purpose client-side imagemap script. Detailed instructions on using the PROTO are available here.

BoxSlider, Knob, Planeslider, Slider

The above four all work the same. There is a TimeSensor attached to a PositionInterpolator attached to a cube. The widget on the right reflects the height of the cube. The widget on the left controls and reflects the time. The button in the middle determines whether the TimeSensor loops or not. The TimeSensor can be started by clicking on the cube. The TimeSensor will stop if the widget on the left is controlled (i.e. clicked/dragged). The widget on the right does not respond to any clicks. Note that the Knob is not yet completely debugged, though it may be a result of CosmoPlayer's CylinderSensor implementation rather than my code.

More generally, the cube should bounce up and down while moving to the right when clicked, should loop if the button is green, and the left widget should control its position. Note that the PlaneSlider combines what I have been referring to as the left and right widgets; the X position of the PlaneSlider can be controlled but the Y position reflects the height of the cube.

Button, LightSwitch

These two also work the same (though not like those above). Each Button or LightSwitch represents a bit of an 8-bit value, MSB on the left. There should be a number (Text node in the Enum PROTO) between the row of bits and the slider. The slider reflects and controls the value. The range of the value is integers 0-255. When the slider is at the far left, the number is 0; the far right is 255. The switches should go on and off to reflect the binary value of the number as the slider is dragged.

Note that the Buttons push in when clicked and pop back to where they were if the pointer is moved off the button. If the click is released while the pointer is off the button there is no effect. If the click is released on the button, the button changes color (red for off, green for on) and is further out when off than when on.

Note that the LightSwitches only change when clicked and released with the pointer on the switch. When it changes it interpolates from its current orientation and color to up and green for on or down and red for off. The color interpolates through gray at the middle of the rotation. Clicking on a moving switch causes it to jump to its new state as if it had already finished interpolating. Changes should not be reflected in the slider or number until the switch has finished interpolating (or is interrupted by a click); changes due to the slider occur instantaneously.

Radio Buttons

This is done with the Button, Not, and BoolFilter PROTOs. It just demonstrates a set of radio buttons where one and only one button must be selected. If the user tries to turn off a button it just stays on. If a user turns on a button then the button that had been on is turned off. Note that on CosmoPlayer the initialize() function is not called until an event is received by the controlling script, so passing the mouse over the three buttons may be necessary to have them reflect their initial values.


This controls the X position of a cube. It is unbounded. Dragging left moves the cube left, dragging right moves the cube right. The blue dial does not move. The gray enclosure does not move. The green lines rotate as markings on the dial, but should not be visible behind the enclosure (they are on Switches and turn off and on according to the rotation of the dial).


This controls the Y position of a cube. It is unbounded. The button determines whether the control is discrete or continuous. In either case, clicking or clicking and holding on either side increases (right) or decreases (left) the Y position of the cube. If the button is on, the cube should move up or down in jumps. If the button is off, the cube should move up or down smoothly. Clicking without holding should move the cube either a little way if continuous, or a jump if discrete.


There should be a green line from the cyan sphere to the point on the blue disc (cylinder) where the pointer clicks and drags. This is regardless of which face of the cylinder is clicked.

The TwistSlider

This is an example of pluggable, active geometry in widget PROTOs. The slider on the left uses the BoxSlider PROTO and the one on the right uses the Slider PROTO.


This is a complex widget consisting of four other widgets (Pause, Slider, Dial, UpDown) and some custom controls. This is basically a replacement for a TimeSensor controlling an animation with various ways of controlling how the time passes. Currently this demo uses the EAI.