Skip to content

Design a Fancy LED Widget


The Fancy Led A widget is a high-quality widget in the shape a Led indicator which utilizes Windows system fonts and can have its color dynamically changed.

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

Drag Fancy Led Left and Top

Width and Height

For the Fancy 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


Corner Radius

The Fancy Led A's bevel corner arc radius can be altered by changing the value from a square shape 1 to a more rounded look.

Fancy Led Bevel Corner Radius

Changed Fancy Led Bevel Corner Radius

Changed Fancy Led Bevel Corner Radius


The Thickness of the Bevel can be altered to any size up to the Bevel Corner Radius value, the higher the Bevel Corner Radius, the Bevel Thickness can be increased to the same value.

Changed Fancy Led Bevel Thickness


The color of the Bevel (outer edge) can be changed by clicking property value and the color selector will appear.

Fancy Led Bevel Color

Face On / Off Color

The Face Color properties set the appearance of the dynamic Led part when it is set to On or Off status. Usually, the Off color will be a much darker shade than the On color but they can be set to different colors if desired. You can set these properties by clicking on the value and using the color selector.

Fancy Led Color Changed


The font for the Fancy Widget A can be set to any font installed on the PC.

Fancy Led Change Font

To change the font, simply click on the property value.

Changed Fancy Led Font


The Font size can be changed by clicking on the property value.

Fancy Led Font Size


You can set the color of the font by clicking on the value and using the color selector.

Label On / Off Text

The text shown on the Fancy Led A can be set independently for the On and Off states. These will change dynamically when the state has been changed between 0 and 1.


For this demonstration we will using 2 Fancy Led A widgets to show the status of heating and air condition. For instructions on how to add a widget, refer to this discussion.

Add a Fancy Led A and then set the properties as shown.

Add Fancy Led A Widget

Next, add another Fancy Led A widget and then set the properties as shown.

Another Fancy Led A Widget

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

Genius Environment

Or copy and paste the code below.

func setup()
    // put your setup code here, to run once:
    setWidgetValue(FancyLedA0, 0);  
    setWidgetValue(FancyLedA1, 0);      

 * User Loop Function
func loop()
    // put your main code here, to run repeatedly:
    setWidgetValue(FancyLedA0, 1);
    setWidgetValue(FancyLedA0, 0);
    setWidgetValue(FancyLedA1, 1);
    setWidgetValue(FancyLedA1, 0);

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 Fancy Led Flash on and off.

Animated Fancy Led

Animated Fancy 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 (FancyLedADemo) then click on Save


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