Design an LED Digits Widget

Introduction

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

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

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.

Digits

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

Spacing

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.

Size

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.

Decimal Place

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

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.

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.

Data Type

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

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.

Enable

Leading Zeroes

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

Sign

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.

Demonstration

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.

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

Or copy and paste the code below.

func setup()
    // put your setup code here, to run once:
    setWidgetValue(LedDigits0, newval);    
endfunc

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

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

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.

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

Then Click on 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.