Skip to content

Design an LED Digits Widget


The Led Digits widget is a highly configurable widget that allows you to easily display a numerical value in different formats.

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

Drag Media Colour Led

Width and Height

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


The Led Digits can be set to display the required number of digits by entering the number of digits as the property value.

Led Display Digits


The space between the digits is set to a default space depending on the size of the digit. This space can be increased by entering a value in pixels which will be added to the default space to make the space between each displayed digit larger.

Led Digits Spacing


The Digit size property is a multiplier. The default is Digit Size 2 and can be set to 1 to make the digits smaller or any size larger.

Led Digits Size

Decimal Place

The Decimal Place property can be changed to set how many digits after the Separator are displayed.

Led Digits Decimal Place

Separator Style

The Separator Style can be selected as a Dot or a Comma or None if a number doesn’t need to be displayed with a decimal place.

Led Digits Separator Style

Segment Colour On / Off

The segments of the Led Digit can be set for a On colour state and an Off colour state. Generally, the Off colour state is a darker shade of the On colour state but any colour combination can be used. Clicking on the property value will open the colour selector.

Colour Selector

Led Digits Colour

Data Type

The Led Digit widget has 3 Data types that can be selected.

Led Data Types

Int16 has a range from -32767 to 32767, Int32 has a range of -2147483647 to 2147483647 and Float is for the Led Digit widget to accept floating point values. These options are more relevant when connected to an external host. The default setting is Int16.

Float Format

The way a floating point number is displayed can be changed by selecting to Float Format from the drop-down menu.

Led Float Format


Leading Zeroes

If required, the remaining digits to the left of the displayed value can be populated with Zeroes by selecting Yes.

Led Digits Enable Zeroes


The Led Digits widget can be set to display negative values by selecting Yes as the property value. It is important to note that the Sign will occupy a digit space so a displayed range of -100 to 100 will need 4 Digits set as the Digits property.

Led Digits Enable Sign


For this demonstration we will using a Led Digits widget and a panel to make a simple 4-digit display that will display negative to positive values. For instructions on how to add a widget, refer to this discussion.

Add a Led Digits Widget and then set the properties as shown.

Led Digits 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(LedDigits0, newval);    

 * User Loop Function
func loop()
    // put your main code here, to run repeatedly:
    var n;
    for(n := -100; n < 101; n++)
      setWidgetValue(LedDigits0, n);

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 Digits count from -100 to 100.

Animated Led Digits Animated Led Digits

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 (LedDigits100Demo) then click on Save


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