Figure 1.
The main goal of this first example is to show how to use BarGraph.class. For a listing of the attributes associated with the Bargraph Widget, click on BarGraph.class. This example uses a bargraph (Bar), a slider (BarSlider), two radio buttons, a function button, and a few META tags. Both radio buttons do multiple href functions when selected, one of which causes BarSlider to either disappear or reappear depending on which radio button is selected. BarSlider sets the byte value stored by one of the META tags, but only when the slider is visible. The function button will be explained in a later example. Here is a snapshot of what the html page looks like in a "WYSIWYG" tool:
Figure 1.
Figure 1 has three META tags which are not visible in the example above, MetaOne, MetaTwo, and MetaThree. The following is used to create the three META tags:
<META HTTP-EQUIV="REFRESH" CONTENT="0;HREF=Amulet:UART.byte(5).value();URL=Amulet:NOP();NAME=MetaOne;TRIGGER=null">
<META HTTP-EQUIV="REFRESH" CONTENT="0;URL=Amulet:document.MetaOne.setUpdateRate(0);NAME=MetaTwo">
<META HTTP-EQUIV="REFRESH" CONTENT="0;URL=Amulet:document.MetaOne.setUpdateRate(0.33);NAME=MetaThree">
MetaOne requests a byte variable from the UART by using the href function Amulet:UART.byteValue(5). MetaTwo sets the update rate of the UART to 0 by using the url function Amulet:document.MetaOne.setUpdateRate(0). MetaThree sets the update rate of the UART to 330msec by using the url function Amulet:document.MetaOne.setUpdateRate(0.33). Reference Objects.htm for a detailed explanation on creating and using META REFRESH objects.
To create a bargraph named Bar that uses a byte value returned by MetaOne as its input, the following is used:
<APPLET CODE="BarGraph.class" WIDTH="133" HEIGHT="40" NAME="Bar" >
<PARAM NAME="href" VALUE="Amulet:document.MetaOne.value()">
<PARAM NAME="min" VALUE="0">
<PARAM NAME="max" VALUE="255">
<PARAM NAME="fillPattern" VALUE="6">
<PARAM NAME="sweepFrom" VALUE="left">
<PARAM NAME="updateRate" VALUE=".15">
</APPLET>
Bar updates every 40msec, getting a byte value from MetaOne by using the href function Amulet:document.MetaOne.value().
To create two radio buttons that perform multiple href functions, the following is used:
<APPLET CODE="RadioButton.class" WIDTH="100" HEIGHT="21">
<PARAM NAME="href" VALUE="Amulet:document.MetaThree.forceHit(),Amulet:document.BarSlider.disappear()">
<PARAM NAME="fontSize" VALUE="3">
<PARAM NAME="fontStyle" VALUE="bold">
<PARAM NAME="label" VALUE="UART">
<PARAM NAME="initialCondition" VALUE="off">
<PARAM NAME="groupName" VALUE="radioGroup1">
<PARAM NAME="buttonAlignment" VALUE="left">
</APPLET>
<APPLET CODE="RadioButton.class" WIDTH="100" HEIGHT="21">
<PARAM NAME="href" VALUE="Amulet:document.MetaTwo.forceHit(),Amulet:document.BarSlider.reappear()">
<PARAM NAME="fontSize" VALUE="3">
<PARAM NAME="fontStyle" VALUE="bold">
<PARAM NAME="label" VALUE="Slider">
<PARAM NAME="initialCondition" VALUE="on">
<PARAM NAME="groupName" VALUE="radioGroup1">
<PARAM NAME="buttonAlignment" VALUE="left">
</APPLET>
When selected, the radio button having the label UART sets the update rate of the UART to 40msec and also causes BarSlider to disappear by using the href function Amulet:document.MetaThree.forceHit(),Amulet:document.BarSlider.disappear(). If selected, the radio button having the label Slider sets the update rate of the UART to 0 and also causes the BarSlider to appear by using the href function Amulet:document.MetaTwo.forceHit(),Amulet:document.BarSlider.reappear().
To create a slider named BarSlider, the following is used:
<APPLET CODE="Slider.class" WIDTH="133" HEIGHT="20" NAME="BarSlider" >
<PARAM NAME="href" VALUE="Amulet:document.MetaOne.setValue()">
<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>
When visible, adjusting BarSlider will change the value stored by MetaOne by using the href function Amulet:document.MetaOne.setValue().
NOTES: