Design an Image Widget

Introduction

The Image widget allows you to easily display an image on the TIMI module.

This tutorial requires basic knowledge about using the graphics editor. This includes adding widgets and modifying widget properties during design time. For more information regarding this, refer to the Graphics Editor manual.

Note

Static widgets can only be modified during design time

Widget Properties

Size and Position

Left and Top

Position of a widgets can be changed by entering values for the Left and Top properties.

Alternatively, the widget can be positioned by simply clicking and dragging into the desired position.

If the width or height of the Image widget is set to the maximum size of the display top or left dragging will not function.

Width and Height

For the Image widget, the size properties, Width and Height, can be changed by entering the value of a known width and Height in pixels.

Or the width and height can be simply changed by dragging the red dotted widget outline to the required size.

Source

The Source for the Image widget can be selected by clicking on the Source property. A file open dialogue will appear allowing you to browse for an image file.

After clicking on Open the image will be placed into the Image widget and stretched to the set dimensions.

If needed, the image can be re-positioned and re-sized.

Demonstration

For this demonstration we will use an Image widget as an attractive background with a Media Panel widget, a Media Gauge D widget and a Scale widget. For instructions on how to add a widget, refer to this discussion.

You can download the image below as your background image or alternatively use an image of your own.

Click on Add Widget from the Graphics menu and select the Image Widget then click on CONFIRM as shown.

and set the properties as shown.

Click on the Source Property and navigate to your image file then click on Open

Next, add a Media Panel Widget.

and set the properties as shown.

Next, add a Media Gauge D widget from the Graphics / Add Widget / Gauges tab.

and set the properties as shown.

And Finally add a Scale widget from the Graphics / Add Widget / Static tab.

and set the properties as shown.