Skip to content

Design an LED Widget


The Led widget is a simple widget that allows you to place a Led indicator on the screen in any colour which can be useful for indicating the status of an output.

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.

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 Led widget is set to the maximum size of the display top or left dragging will not function.

Drag Led

Width and Height

For the Led 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.

Drag Width

Bezel Colour

The Outer bezels appearance can be altered by changing both Bezel colour A and Bezel colour B. This can be achieved by simply clicking on the Bezel colour A or Bezel colour B property and the Colour selector will appear.
Colour Selector

Bevel Radius

The Outer and Inner Radii can be altered to create different Led Shape designs from a square Led to fully Round. It is also possible to control the overall bevel width by altering the distance between Outer and Inner radius.
Change Bevel Size
You will notice from the image below that changing the Bevel Outer Radius to half of the width / height will create a circular Led if the width and height are the same dimension.
Bevel Radius Changed



The Led Radius property sets the size of the dynamic part (centre) of the Led widget.

Led Radius

By altering this property and the Bevel Inner Radius / Bevel Outer Radius it is possible to create the desired Led shape and style.

Led Radius Changed.png

Colour On / Off

The Led colour property sets the appearance of the dynamic Led part when it is set to On or Off status. Usually, the Off colour will be a much darker shade than the On colour but they can be set to different colours if desired. You can set these properties by clicking on the value and using the colour selector in the same manner as the Bezel colour.

Led Colour Changed


Enable Effect

The Enable Shine Effect Property allows you set if raised effect is shown or not. Setting this to No will draw a solid Led colour without the raised effect.

Enable Shine Effect


The overall shape of the shine effect can be altered by changing the value of this property. Changing the property value will change the size of the outer radii to set the desired effect.

Shine Radius


The Shine colour property will set the base colour of shine that will be blended with the Led colour. The colour can be selected by clicking on the property value and using the Colour selector.


For this demonstration we will using a Led widget to show the status of an output that could be signalled by an attached MCU to show if power is on or off. For instructions on how to add a widget, refer to this discussion.

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

Select Media Panel Widget

and set the properties as shown.

Media Panel Widget Properties

Next, click on Add Widget from the Graphics menu and select the Label Widget then click on CONFIRM as shown.

Select Label Widget

and set the properties as shown.

Label Widget Properties

Lastly, add a Led widget and set the properties as shown.

LED Widget

If the Genius environment is being used the demonstration can be tested by entering simple code in the code window.

Genius Code

Ensure that the Port is set to the correct port that the TIMI module is connected to.

Select Port

and then click on the Upload Button to Upload the entire project to the display.


When the Upload has completed you should see the Led Flash on and off.

Animated Led Animated Led

Or the page can be used in the Commander environment by saving the Page and clicking in the Object Selector to choose Page0.

Choose Page Zero

Then Click on Save Configuration.

Save Configuration

A Save Dialogue Window will appear. Enter a filename (PowerIndicator) then click on Save


You can find out further information about the Commander Environment in the Getting Started with the Commander Environment tutorial.