Introduction

The Led widget is a simple widget that allows you to place a Led indicator on the screen in any colour which can be useful for indicating the status of an output.

How it works

The Led widget has many design-time options and as it is dynamic it’s state can be changed during runtime indicating an on or off state.

Implementation

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

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

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

Bezel Color A / Bezel Color B Property

The Outer bezels appearance can be altered by changing both Bezel Color A and Bezel Color B. This can be achieved by simply clicking on the Bezel Color A or Bezel Color B property and the Colour selector will appear.

Bevel Outer Radius / Bevel Inner Radius Property

The Outer and Inner Radii can be altered to create different Led Shape designs from a square Led to fully Round. It is also possible to control the overall bevel width by altering the distance between Outer and Inner radius.

You will notice that changing the Bevel Outer Radius to half of the width / height will create a circular Led if the width and height are the same dimension.

Led Radius Property

The Led Radius property sets the size of the dynamic part (centre) of the Led widget.

By altering this property and the Bevel Inner Radius / Bevel Outer Radius it is possible to create the desired Led shape and style.

Led Color On / Led Color Off Property

The Led Color property sets the appearance of the dynamic Led part when it is set to On or Off status. Usually, the Off colour will be a much darker shade than the On colour but they can be set to different colours if desired. You can set these properties by clicking on the value and using the colour selector in the same manner as the Bezel Color.

Enable Shine Effect Property

The Enable Shine Effect Property allows you set if raised effect is shown or not. Setting this to No will draw a solid Led colour without the raised effect.

Shine Radius Property

The overall shape of the shine effect can be altered by changing the value of this property. Changing the property value will change the size of the outer radii to set the desired effect

Shine Color Property

The Shine Color property will set the base colour of shine that will be blended with the Led colour. The colour can be selected by clicking on the property value and using the Colour selector.

Demonstration

For this demonstration we will using a Led widget to show the status of an output that could be signalled by an attached MCU to show if power is on or off.

Select the Media Panel Widget by clicking on Add Widget from the Graphics menu

followed by CONFIRM and set the properties as shown on the right.

Next, add the Label Widget by clicking on Add Widget from the Graphics menu and select Label from the Static tab.

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

Lastly, add a Led widget 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.

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 Flash on and off

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 (PowerIndicator) 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 Led widget is a simple widget that allows you to place a Led indicator on the screen in any colour which can be useful for indicating the status of an output.

How it works

The Led widget has many design-time options and as it is dynamic it’s state can be changed during runtime indicating an on or off state.

Implementation

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

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

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

Bezel Color A / Bezel Color B Property

The Outer bezels appearance can be altered by changing both Bezel Color A and Bezel Color B. This can be achieved by simply clicking on the Bezel Color A or Bezel Color B property and the Colour selector will appear.

Bevel Outer Radius / Bevel Inner Radius Property

The Outer and Inner Radii can be altered to create different Led Shape designs from a square Led to fully Round. It is also possible to control the overall bevel width by altering the distance between Outer and Inner radius.

You will notice that changing the Bevel Outer Radius to half of the width / height will create a circular Led if the width and height are the same dimension.

Led Radius Property

The Led Radius property sets the size of the dynamic part (centre) of the Led widget.

By altering this property and the Bevel Inner Radius / Bevel Outer Radius it is possible to create the desired Led shape and style.

Led Color On / Led Color Off Property

The Led Color property sets the appearance of the dynamic Led part when it is set to On or Off status. Usually, the Off colour will be a much darker shade than the On colour but they can be set to different colours if desired. You can set these properties by clicking on the value and using the colour selector in the same manner as the Bezel Color.

Enable Shine Effect Property

The Enable Shine Effect Property allows you set if raised effect is shown or not. Setting this to No will draw a solid Led colour without the raised effect.

Shine Radius Property

The overall shape of the shine effect can be altered by changing the value of this property. Changing the property value will change the size of the outer radii to set the desired effect

Shine Color Property

The Shine Color property will set the base colour of shine that will be blended with the Led colour. The colour can be selected by clicking on the property value and using the Colour selector.

Demonstration

For this demonstration we will using a Led widget to show the status of an output that could be signalled by an attached MCU to show if power is on or off.

Select the Media Panel Widget by clicking on Add Widget from the Graphics menu

followed by CONFIRM and set the properties as shown on the right.

Next, add the Label Widget by clicking on Add Widget from the Graphics menu and select Label from the Static tab.

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

Lastly, add a Led widget 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.

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 Flash on and off

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