Introduction

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

How it works

The Dot Matrix widget displays a simple font by turning equally spaced pixels on or off using the selected on or off colours.

Implementation

To select the Dot Matrix widget when using the Architect or Genius environments simply click on Graphics and then click on Add Widget.

Click on the Dot Matrix widget under the Led tab and click on Confirm.

The Dot Matrix widget will be placed on the graphic representation of the TIMI display with default properties set.

You can now change the Property Values to get the desired look of the Dot Matrix widget.

Left and Top Property

The Left and Top property can be changed by entering the value of a known Left and Top coordinate.

Or the Dot Matrix widget can be positioned by simply clicking on it and dragging it 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 Property

The width and height properties can be changed by entering the value of a known width and Height in pixels.

Preview Text Property

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 Property

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.

Bezel Color Property

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

Pixel Style Property

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.

Pixel On / Pixel Off Property

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

Pixel Gradient Color Property

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.

Pixel Size Property

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 Property

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 Property

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.

Add a Led Media Panel widget from the Static tab

and then set the properties as shown on the right.

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

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

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

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

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

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

Finally, add a Label widget from the Static tab and set the properties as shown on the right.

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.

Copy to Clipboard

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.

Back to Resource Centre

Share this article on socials

Introduction

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

How it works

The Dot Matrix widget displays a simple font by turning equally spaced pixels on or off using the selected on or off colours.

Implementation

To select the Dot Matrix widget when using the Architect or Genius environments simply click on Graphics and then click on Add Widget.

Click on the Dot Matrix widget under the Led tab and click on Confirm.

The Dot Matrix widget will be placed on the graphic representation of the TIMI display with default properties set.

You can now change the Property Values to get the desired look of the Dot Matrix widget.

Left and Top Property

The Left and Top property can be changed by entering the value of a known Left and Top coordinate.

Or the Dot Matrix widget can be positioned by simply clicking on it and dragging it 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 Property

The width and height properties can be changed by entering the value of a known width and Height in pixels.

Preview Text Property

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 Property

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.

Bezel Color Property

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

Pixel Style Property

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.

Pixel On / Pixel Off Property

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

Pixel Gradient Color Property

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.

Pixel Size Property

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 Property

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 Property

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.

Add a Led Media Panel widget from the Static tab

and then set the properties as shown on the right.

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

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

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

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

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

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

Finally, add a Label widget from the Static tab and set the properties as shown on the right.

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.

Copy to Clipboard

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.

Back to Resource Centre

Share this article on socials