Images are used to render a variety of image formats at specific coordinates in the user interface created with our guiDesigner software. Images can be either Static or Dynamic. The path of the image defines whether the image will be dynamic or static.

The following image formats are supported:

• PNG (with alpha transparency - recommended format for all images)
• JPEG
• GIF (non-animated)
• BMP

Static images are defined at design time and always remain the same. The path of a static image is based on the Asset Folder setting in Project Properties.

There are two types of dynamic images supported:

1. Images served from any web server via the HTTP protocol
2. Images loaded from cache (any image used elsewhere in the project)

Any image path starting with http:// will be dynamically loaded when the image comes into view (either on a Page or Subpage).
The image path can also be changed on the fly by assigning the image a Serial Join and changing the joins value to point to a new HTTP URL or to any image used within the project.

One trick commonly used is to create a Cache Page and place any images you want to use dynamically later on within this page.
Then you can change the serial join of any image in your GUI to point to any of these cached images.
For example, if you place an image “weather_01.png” on a Cache Page, you can refer to it on any of your other pages by changing an images serial join to the value 'weather_01.png'.

To automatically refresh an image, you can set the Refresh Rate of the Image properties.
This is a value in milliseconds at which the image will constantly refresh whilst the image is in view.
Otherwise, whenever the serial join is updated to a new (or existing) value, the image will refresh.
This way you can force a refresh at any time you need. Sending the same serial value as is already associated with the serial join will still cause it to refresh.

To implement an image in guiDesigner:

1. Select the image icon on the tool bar.
2. Then draw a box roughly the size of the image you wish to use. This size can be edited later on.
   
3. The Image properties window will then open up. Configure these options as required and as per the following details.

This option allows for manual entry of the position and size of the image.

• X Position (left of image)
• Y Position (top of image)
• Width of the image
• Height of the image

• Click Through -
• Allow Cashing -
• Show Download Indicator -
• Clear Image on URL Change -

A preview of what the image will look like.