Run, Pause, Forward, Back

This control was originally developed for displaying a series of atmosphere soundings (weather balloon data) as an animation. As a result, it was necessary to control the time between frames. In addition, since displaying the frame numbers provided no useful information, a field was provided so that the date and time of the sounding (one sounding per frame) could be displayed.

In practice, this control is coupled with a slider so the user can

• Get a visual indication of which month is currently being displayed
• Select a specific sounding

Only a single instance of this control can be used in an application - this is a javascript limitation because there is no way to know which of several timers calls a specific function. It is possible that anonymous functions might make this more generic, but that was not tested. To make this work, the component names would also have to be unique per instance.

Live example		Image for comparison
Disable the Control (grays out the buttons and ms field)

<table><tr><td> <div id=mcUI_VCR_Control class=mcRaisedPanel></div> </table>

<script> mcUI_VCR_Controls.callBack = function (index) { mc_VCR_CurrentFrame.value = index; } </script>

Assuming that it is, the 3 buttons will cause the current frame number to change.

• The Run/Pause button is a toggle - it indicates what will happen when the button is pressed
  • Verify that pressing it changes the label
  • Verify that the frame counter increments
  • Change the ms Between Frames value and verify the the speed of the count changes
• The Previous and Next buttons may be clicked or held down
  • Clicking the Previous and Next buttons should change the count by one unit
  • Holding the mouse down over either of those buttons should cause the frame number to increment (or decrement) about once every 200 ms.
  • When the timer value (default 50) is increased to a value larger than 200, then that will be the time between new frames
  • Verify that pressing either of these buttons while the control is in Run mode will change the toggle button label from Pause to Run.
• Rollover
  • The default min and max values are 0 and 100
  • Use the Previous and Next buttons to verify that the frame counter rolls over correctly

<script type="text/javascript" src="js/mcUITools.js"></script> <link rel="stylesheet" type="text/css" href="js/mcUITools.css"> <script type="text/javascript" src="js/mcUIVCR_Controls.js"></script>

mcUI_VCR_Controls displays the following User Interface Components
Component	Default
mc_VCR_Previous \mc_VCR_Run_Toggle mc_VCR_Next		These are the control buttons. The Run button is a Run/Pause toggle. When it says Run, pressing it sets the timer, pressing Pause turns it off. The other 2 also turn it off.
mc_VCR_time	50	The number of milliseconds between frames when Run is pressed - min = 1, integers only The Previous and Next buttons will repeat when held with the larger of this value or 200 ms between frames - smaller values made single clicks too difficult This is an mcNumber control with all the associated capabilities. (Hint: use the mouse wheel to change the value.)
mc_VCR_CurrentFrame		This is just a readonly text field - it should be updated by the application. mc_VCR_CurrentFrame.value = "any number or string";

mcUI_VCR_Controls supports the following properties
Property	Default
minFrame	0	Set these to control the frame counter roll-over.
maxFrame	100

mcUI_VCR_Controls supports the following methods
Method
callBack(CurrentFrame);	The application must replace this method - it is called after every timeout. mcUI_VCR_Controls.callBack = function (index) { // the application should use the index mc_VCR_CurrentFrame.value = "any number or string"; // display something useful }
Timer_Enable() Timer_Disable()	Use these to start or stop the timer. The Run/Pause button will be renamed as appropriate.
setCurrentFrame(value)	This modifies the value that the timers update, not the value displayed in the mc_VCR_CurrentFrame component. This method limits the value to the min/max range before making the assignment
DisableControls(value)	true  - Stop the timer and disable the buttons false - Enable the buttons

URL: http:// mc-computing.com / Languages / Javascript / mcUIControls / mcUIVCR_Controls.html