Clock Tutorial

Please be kind to me, this is my first tutorial. :)
In this tutorial, I won't rewrite things in the code segments, so assume you are just continung on. And, if you find an easier way to do this, don't hesitate to tell me.

  First thing yo have to do, of course, is make a new VRML file. Let's just remove the browser navigation, because it really isn't nessisary.

#VRML V2.0 utf8
NavigationInfo {
  type "NONE"
}

  Next, make a Text node, which you will use as the output of the time. DEF it as an instance, so that it can be referred to later. It is probably best to use fontStyle to center it, and I made it a little bigger so that it fills the screen.

Shape {
  geometry DEF time Text {
    fontStyle FontStyle {
      justify "MIDDLE"
      size 2.8
    }
  }
}

  Next, make a TimeSensor node. It will be in charge of calling the script node every 1 second for updating. Sounds simple enough. Make sure you DEF it, because you will have to ROUTE its output later.

DEF count TimeSensor {
  loop TRUE
  cycleInterval 1
}

  Now that the text node is ready, make the script node. You do not need to DEF the script node or give it any eventIn's because it will not be receiveing any information. Also, it is best to give the script node direct access to the exposedField's of the "time" node. To do this, use the directOutput TRUE property and reference the field to the "time" node in the script.
  Now, for the function. Make a clock function, it will be in charge of all of the processing.

DEF timeScript Script {
  eventIn SFTime clock
  directOutput TRUE
  field SFNode timeOut USE time
  url "javascript:
    function clock(){
    }
  "
}

  The clock function is what is going to do all the work. It will recall itself every 1000 milliseconds (1 second) to compute and update the time.

...
function clock(){
  var Digital=new Date()
  var hours=Digital.getHours()
  var minutes=Digital.getMinutes()
  var seconds=Digital.getSeconds()
  var dn="AM"
  if (hours>12){
  dn="PM"
  hours=hours-12
  }
  if (hours==0)
  hours=12
  if (minutes<=9)
  minutes="0"+minutes
  if (seconds<=9)
  seconds="0"+seconds
  var ctime=hours+":"+minutes+":"+seconds+" "+dn
  textString = new MFString();
  textString[0] = ctime
  timeOut.set_string = textString;
}
...

  Route it all up, and now you have a working clock.

ROUTE count.cycleTime TO timeScript.clock

And there you have it. [ View The Source ] [ View The World ]

[ VRML | News | Download | Links | Bio | Make Money | Guest Book ]
[ Main ]