Example Image Bar

The main goal of this example is to show how to use ImageBar.class. For a listing of the attributes associated with the Image Bar Widget, click on ImageBar.class. This example is similar to an earlier bargraph example, but instead uses an image bar (Glass) versus a bargraph and also uses a vertical slider versus a horizontal slider. Instead of repeating everything from the earlier example, this example will only discuss Glass. Reference \Projects\BarGraph\ReadMe.htm for information on the radio buttons, slider, and META tags. Here is a snapshot of what the html page looks like in a "WYSIWYG" tool:

Figure 1.

To create an image bar named Glass that uses a byte value returned by MetaOne as its input, the following is used:

<APPLET CODE="ImageBar.class" WIDTH="47" HEIGHT="53" NAME="Glass" >
<PARAM NAME="href" VALUE="Amulet:document.MetaOne.value()">
<PARAM NAME="min" VALUE="0">
<PARAM NAME="max" VALUE="255">
<PARAM NAME="updateRate" VALUE="0.2">
<PARAM NAME="empty" VALUE="../Images/VinGlassEmpty.gif">
<PARAM NAME="full" VALUE="../Images/VinGlassTop.gif">
<PARAM NAME="sweepFrom" VALUE="bottom">
</APPLET>

Glass updates every 50msec, getting a byte value from MetaOne in order to wipe between two images by using the href function Amulet:document.MetaOne.value().

NOTES:

• In order to program this example into the Easy GUI module, the above html page can be found in \Projects\Examples\ImageBar\CompileMe.htm subdirectory of the Amulet main directory. By default, the Amulet main directory is C:\Program Files\Amulet, however you may have specified a different path during the install.
• Once you program this example into the GUI module, you will need to use the Amulet Simulator in order to respond to Glass with some data if you have the UART radio button selected.