VRUNIVERSE - VRML Tutorials

Slide it!

tested with

One of the most widespread widgets in our 2D world is a slider bar. Today I show you how easy it is to do this in VRML.
To interact with objects we start with a PlaneSensor attached to a box (the slider knob):

Transform {

  children [

    Shape {

      appearance Appearance {

        material Material {

          diffuseColor 1 1 0 

        }

      }

	  geometry Box {}

    }

    DEF PS PlaneSensor {}

  ]

}

When you move your mouse pointer over the box and click it, the PlaneSensor will send out its position values. This data in turn can be used to animate the box.
Next we have to decide about which direction the slider bar should move. If you want it to move horizontally you have to filter out the vertical movement of the mouse pointer:

DEF slider_s Script {

  eventIn SFVec3f PS_position

  field SFVec3f moveSlider 0 0 0

  eventOut SFVec3f shift

	

  url "javascript:

    function PS_position(value) {

      moveSlider[0] = value[0];

      shift = moveSlider;

    }

  "

}

The Script node takes the eventIn PS_position from the PlaneSensor and passes the position values as 'value'. In order to filter out the horizontal direction we take only the x-coordinate from 'value[0]' and assign it to the x-coordinate of 'moveslider[0]'. This field is initialized with '0 0 0' and is used as an intermediate storage. It gets right away assigned to the eventOut 'shift' which in turn is ROUTEd to the box node.

ROUTE PS.translation_changed TO slider_s.PS_position

ROUTE slider_s.shift TO slider.set_translation

This is all there is to a (very) simple slider bar. Take a look at the slider source and the slider.wrl. Right now the box will just keep on moving until it is gone. You could almost throw it out of your screen. To avoid this you have to limit the amount the box can move:

function PSposition(value) {

  if (value[0] > 5) value[0] = 5;

  if (value[0] < -5) value[0] = -5;

  moveSlider[0] = value[0];

  shift = moveSlider;

}

As you can see I cut off all x-coordinates larger than 5 or smaller than -5 and I replace them with 5/-5. On my screen +-5 is a good working distance. Results may vary on your screen, please ask your local Bontempi dealer.
Again slider source and slider.wrl. So far so useless. Let's make it do something useful like scaling an object:

DEF slider_s Script {

  eventIn SFVec3f PS_position

  field SFVec3f moveSlider 0 0 0

  field SFVec3f scaleObject 1 1 1

  eventOut SFVec3f shift

  eventOut SFVec3f scale_it



  url "javascript:

    function PS_position(value) {

      if (value[0] > 5) value[0] = 5;

      if (value[0] <= 0) value[0] = 0.001;

      moveSlider[0] = value[0];

      scaleObject[0] = value[0];

      shift = moveSlider;

      scale_it = scaleObject;

    }

  "

}

I introduced a new field 'scaleObject'. It will store the x-value of the slider box and then it will be copied to the eventOut 'scale_it'. TO finish it we only have to ROUTE the eventOut to the set_scale eventIn of the object:

ROUTE slider_s.scale_it TO object.set_scale

The final slider source and the final slider.wrl show you also how negative scaling beyond common sense is implemented among various browsers. This tutorial as brief as it was demonstrates how short and painless effective VRML scripting can be. I hope that you can apply this to something more interesting than my two box friends.