Example Dynamic Image

The main goal of this example is to show how to use DynamicImage.class. For a listing of the attributes associated with the Dynamic Image Widget, click on DynamicImage.class. This example uses primarily a dynamic image widget (Dyn1) and a function button (Btn1). The function button has two functions assigned to it. When the function button is pressed, it initially forces the Amulet into a programming mode. After the new image has been uploaded and an "Exit Programming Mode" command has been sent to the Amulet, the function button then resets the dynamic image, which makes the Amulet display the new image which has just been loaded. Here is a snapshot of what the html page looks like in a "WYSIWYG" tool:

Figure 1.

To create a function button, Btn1, which has the label Get New Image, use the following:

When Btn1 is "hit", it will launch two functions. The first is Amulet:loadFlash(return). This is an internal function which halts all current activity and puts the Amulet in a state where it is ready to receive a file to load into its flash via xmodem. As per the xmodem protocol, the Amulet starts sending out 'C' (0x43) continuously until a file is sent to it. Once the file is completely sent, the Amulet will again send out 'C' until it receives an ETB (0x17), which will take the Amulet out of the loadFlash mode. Once returned to normal mode, the function button's second function is performed, which is Amulet:document.Dyn1.reset(). This causes Dyn1, the dynamic image widget, to repaint using the new image that was just sent to it.

The dynamic image widget, Dyn1, is created using the following:

To really test try this example out, you'll need a terminal program that allows you to upload a file via crc xmodem. HyperTerminal will be used in this example. Before starting HyperTerminal, open CompileMe.htm located in the \Projects\Examples\DynamicImage\ folder. Program the project into your Amulet board. Now start HyperTerminal and make sure that it is configured to connect using your serial port, usually COM1. Make sure HyperTerminal is configured as in Figure 2.

Figure 2.

Now connect HyperTerminal to the Amulet board by hitting the "phone" icon. Choose Transfer->Send File. In the new dialog box, browse for the file graph2.bin, located in the \Projects\Examples\DynamicImage\ folder. The Protocol should be set to Xmodem.

On the Amulet, you should see a button that says "Get New Image". Press this button. You should now see 'C's in the HyperTerminal terminal window. Press the "Send" button in the HyperTerminal dialog box. See Figure 3.

Figure 3.

If everything is setup correctly, you should see an Xmodem status screen pop up and then disappear once the transfer is complete. You should then start to see 'C's coming from the Amulet again in the HyperTerminal terminal window. Press Ctrl-w, which sends out an ETB(0x17) to the Amulet. This signals that all files are programmed and that the Amulet should return to "normal" mode. At this point, you should now see a new image appear where the lineplot was before.

If you hit the hardware reset button on the Amulet, or the "DONE" button on the LCD, which does an Amulet:back(), you will notice that the new image still shows up. That is because you actually programmed the new image into the serial data flash, directly over the first image, graph1.gif, which was originally loaded at compile time.

NOTES:

In order to program this example into the Easy GUI module, the above html page can be found in \Projects\Examples\DynamicImage\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.