Skip to content

Design an Image Widget


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

Select Widget

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.


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.

Change Left Top

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.

Change Width and Height

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


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.

Open File

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

Image Loaded

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


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.

Carbon Fibre

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

Select Image Widget

and set the properties as shown.

Image Widget Properties

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

Image Loaded

Next, add a Media Panel Widget.

Select Media Panel Widget

and set the properties as shown.

Media Panel Widget Properties

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

Gauge Widget

and set the properties as shown.

Gauge Widget Properties

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

Scale Widget

and set the properties as shown.

Scale Widget Properties