Figure 1.
In CompileMe.htm, a line plot named Plot1 that reads the value of the slider named Slider1 is created by using the following:
The main goal of this example is to show how to use CustomButton.class. For a listing of the attributes associated with the Custom Button Widget, click on CustomButton.class. This example uses a custom button (OnOffButton) to start or stop the updating of a line plot which is set up to read values directly from a slider widget. This example will focus on the custom button widget, althought the line plot and the slider and how they communicate with each other will be briefly explained. Here is what the html page looks like in a "WYSIWYG" tool:
Figure 1.
In CompileMe.htm, a line plot named Plot1 that reads
the value of the slider named Slider1 is created by using the following:
<APPLET CODE="LinePlot.class" WIDTH="102" HEIGHT="92" ALIGN="BOTTOM"
NAME="Plot1">
<PARAM NAME="href" VALUE="Amulet:document.Slider1.value()">
<PARAM NAME="yMin" VALUE="0">
<PARAM NAME="yMax" VALUE="255">
<PARAM NAME="xSamples" VALUE="16">
<PARAM NAME="lineWeight" VALUE="2">
<PARAM NAME="updateRate" VALUE=".33">
</APPLET>
Using InterWidgetCommunications, Plot1 is getting the value returned from Slider1 by using the href function Amulet:document.Slider1.value().
To create a slider named Slider1 that provides the input for Plot1, the following is used:
<APPLET CODE="Slider.class" WIDTH="28" HEIGHT="92"
NAME="Slider1">
<PARAM NAME="href"
VALUE="Amulet:nop()">
<PARAM NAME="min" VALUE="0">
<PARAM
NAME="max" VALUE="255">
<PARAM NAME="tickCount"
VALUE="10">
<PARAM NAME="handleThickness" VALUE="10">
<PARAM
NAME="tickPosition" VALUE="center">
<PARAM NAME="tickLength"
VALUE="7">
<PARAM NAME="initialCondition" VALUE="0x80">
</APPLET>
Note that Slider1's href is Amulet:nop(), which means nothing is being sent out when the slider's handle is moved. Internally, it is changing its intrinsic value, and that is what Plot1 is requesting every 330ms. We could just as easily have made the slider send out its value over the UART, and it would not have affected the functionality of this example. Alternatively, we could have also used Amulet:document.Plot1.setValue(), which would have sent the slider's intrinsic value directly to Plot1 every time the slider was moved. Since Plot1 is already requesting the value of Slider1, this href would have been redundant, but once again, it would not have affected the functionality of this example.
To create a custom button that looks like a light switch that toggles between on and off, and starts or stops the updating of Plot1, use the following:
<APPLET CODE="CustomButton.class" WIDTH="57" HEIGHT="83"
NAME="OnOffButton">
<PARAM NAME="href" VALUE="Amulet:document.Plot1.stopUpdating();Amulet:document.Plot1.startUpdating()">
<PARAM
NAME="onButtonPress" VALUE="custom">
<PARAM NAME="buttonType"
VALUE="toggle">
<PARAM NAME="upImage" VALUE="../Images/on.gif">
<PARAM
NAME="downImage" VALUE="../Images/off.gif">
<PARAM
NAME="repeatDelay" VALUE=".01">
<PARAM NAME="repeatRate"
VALUE="0">
</APPLET>
There are a few things to take note of on this custom button named OnOffButton. First, notice that the href consists of two different functions, Amulet:document.Plot1.stopUpdating() and Amulet:document.Plot1.startUpdating(). They are separated by a semi-colon, which means they are sequenced href's. The first time the custom button is pressed, Amulet:document.Plot1.stopUpdating() will be invoked. The second time it's pressed, Amulet:document.Plot1.startUpdating() will be invoked. Subsequent presses result in the cycle continuing.
OnOffButton is also set up to be a toggle button, which means that the button image starts out with the upImage, on.gif, being displayed. When pressed, the image changes to the downImage, off.gif. After releasing the button, off.gif remains the displayed image. When pressed again, the image changes back to on.gif. This cycle continues for all subsequent presses.
The combination of the toggle button and the sequenced href's results in the following: Initially on.gif is displayed. When OnOffButton is pressed, the button image changes to off.gif and Amulet:document.Plot1.stopUpdating() is sent to Plot1 via InterWidgetCommunication. When OnOffButton is pressed for a second time, the button image changes to on.gif and Amulet:document.Plot1.stopUpdating() is sent to Plot1. The cycle continues for all subsequent presses.
OnOffButton is also set up to be an auto-repeat button since it uses the repeatDelay and repeatRate attributes. The repeatDelay is set to .01 seconds, which means 10ms after pressing the button, the href function is launched. The repeatRate is set to 0 seconds, which means that if OnOffButton is kept pushed down, the href will be launched every 0 seconds. Huh? Why did we do that? Because we want the button to react immediately when we touch it, but we don't want functions to be continuously sent out while we're still holding on to the button. This combination makes the button look like a button that launches its function(s) as soon as it is touched, instead of waiting for the button to be released.
NOTES: