Introduction

The Media Color Led widget is a simple widget in the shape a Led indicator which can have its colour dynamically changed.

How it works

The Media Color Led widget has simple design-time options and as it is dynamic it’s colour can be changed during runtime to any RGB565 value.

Implementation

To select the Media Color Led widget when using the Architect or Genius environments simply click on Graphics and then click on Add Widget.

Click on the Media Color Led widget under the Led tab and click on Confirm.

The Media Color Led 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 Media Color Led 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 Media Color Led can be positioned by simply clicking on it and dragging it into the desired position. If the width or height of the Media Color Led object 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.

Or the width and height can be simply changed by dragging the red dotted widget outline to the required size.

Outer/Inner Color Property

The Media Color Led’s bezel is made up of a raised outer ring and recessed inner ring. The colour of each ring can be set individually by simply clicking on the Outer Color property or the Inner Color property and the Colour selector will appear.

Demonstration

For this demonstration we will using 1 Media Color Led widget, 3 Media Gauge D widgets and 3 Led Digits Widgets to show the changing colour of the Media Color Led with RGB values.

Add a Media Color Led and then set the properties as shown on the right.

Next, add a Media Gauge D widget

and then set the properties as shown on the right.

Click on Confirm and set the properties as shown on the right.

Next add another Media Gauge D widget.

And another Media Gauge D widget.

Next, add a Led Digits widget

and then set the properties as shown on the right.

Add another Led Digits widget.

Finally, add another Led Digits widget.

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 Media Color Led change colour in relation to the changing RGB values.

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 (RGBDemo) 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 Media Color Led widget is a simple widget in the shape a Led indicator which can have its colour dynamically changed.

How it works

The Media Color Led widget has simple design-time options and as it is dynamic it’s colour can be changed during runtime to any RGB565 value.

Implementation

To select the Media Color Led widget when using the Architect or Genius environments simply click on Graphics and then click on Add Widget.

Click on the Media Color Led widget under the Led tab and click on Confirm.

The Media Color Led 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 Media Color Led 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 Media Color Led can be positioned by simply clicking on it and dragging it into the desired position. If the width or height of the Media Color Led object 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.

Or the width and height can be simply changed by dragging the red dotted widget outline to the required size.

Outer/Inner Color Property

The Media Color Led’s bezel is made up of a raised outer ring and recessed inner ring. The colour of each ring can be set individually by simply clicking on the Outer Color property or the Inner Color property and the Colour selector will appear.

Demonstration

For this demonstration we will using 1 Media Color Led widget, 3 Media Gauge D widgets and 3 Led Digits Widgets to show the changing colour of the Media Color Led with RGB values.

Add a Media Color Led and then set the properties as shown on the right.

Next, add a Media Gauge D widget

and then set the properties as shown on the right.

Click on Confirm and set the properties as shown on the right.

Next add another Media Gauge D widget.

And another Media Gauge D widget.

Next, add a Led Digits widget

and then set the properties as shown on the right.

Add another Led Digits widget.

Finally, add another Led Digits widget.

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 Media Color Led change colour in relation to the changing RGB values.

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 (RGBDemo) 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