Design a Dot Matrix Widget

Introduction

The Dot Matrix widget is a simple widget that allows you to display a text in a style similar to character LCD displays.

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, Position and Orientation

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

Width and Height

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

Preview Text

The Preview Text property allows you to enter text that is shown when the widget is first activated. This text can be changed dynamically.

Bezel

Enable

The Dot Matrix widget can be displayed with an attractive bezel in any colour by clicking on Yes as the property value. The Bezel will be drawn within the bounds of the width and height and it may be necessary to adjust these dimensions for the text to display correctly.

Color

The colour of the Bezel can be selected by clicking on the property value and the colour selector will appear.

Pixel

Style

The Dot Matrix widget has 4 different styles for drawing the On and Off pixels. These styles can be selected by clicking on the property value. Flat square is the default style which draws the pixels as squares without gradient. Gradient circle draws raised On circular pixels and sunken Off circular pixels. This style is only effective with large pixels sizes.

Full Gradient square draws the pixels with a raised look over the entire widget.

Partial Gradient Square will apply a sunken gradient only at the top and the bottom which creates a sunken look with a flat centre area.

Due to the Dot Matrix pixels being drawn transparently, the area between pixels will be any previously drawn object or background. By adding a Dot Matrix widget on top of a Media Panel different styles can be achieved.

On / Off

The Pixel On and Pixel Off colours can be changed by clicking on the property value and using the colour selector.

Gradient Color

When using the Gradient Circle Pixel Style a third colour is used to select a gradient colour which is the centre area of the Off Pixel. The colour can be changed by clicking on the property value and using the colour selector.

Size

The Individual Pixels can be set to any size from 3 upwards. Changing the pixel size will affect the size of the displayed font.

Highlight Enable

The Highlight Enable property will swap Pixel On and Pixel Off colours by selecting Yes as the property value. This will give the Dot Matrix text a highlighted effect.

Left/Top Offset

The Left Offset and Top Offset properties allow you to position the start of text by entering the values in Dot Matrix pixels as the property value.

Demonstration

For this demonstration we will using a Media Panel, 2 Dot Matrix widgets, 2 Text Areas, 2 Gauges and a Label widget to make a real analogue reading display. For instructions on how to add a widget, refer to this discussion.

Add a Media Panel widget from the Static tab.

and then set the properties as shown.

Next, add a Text Area widget from the Special tab and set the properties as shown.

Add another Text Area widget and set the properties as shown.

Next, add a Dot Matrix widget from the Led or Special tab and set the properties as shown.

Add another Dot Matrix widget and set the properties as shown.

Next, add a Gauge A widget from the Gauges tab and set the properties as shown.

Add another Gauge A widget and set the properties as shown.

Finally, add a Label widget from the Static tab and 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.

var valstring[3];

/* User Setup Function */
func setup()
    pin_Set(ANALOGUE, IO1_PIN);
    pin_Set(ANALOGUE, IO2_PIN);
endfunc

/* User Loop Function */
func loop()
    var v;
    v := AnalogToString(pin_Read(IO1_PIN));
    updateDotMatrix(DotMatrix0, valstring);
    setWidgetValue(GaugeA0, v);    
    v := AnalogToString(pin_Read(IO2_PIN));     
    updateDotMatrix(DotMatrix1, valstring);
    setWidgetValue(GaugeA1, v);    
endfunc

func AnalogToString(var val)
    var v10, h, l;
    v10 := val / 124;
    h := v10 / 10;
    l := v10 - (h * 10);
    to(valstring);
    print(h);
    to(APPEND);
    print(".");
    to(APPEND);
    print(l);
    to(APPEND);
    print("v");
    return v10;
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 Dot Matrix widgets and Gauges displaying analogue readings from the Input pins.

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

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