Introduction

The Media Spectrum widget is a highly configurable widget that allows you to easily display a collection of Media Gauge D widgets in one widget.

How it works

The Media Spectrum widget displays the Media Gauge D’s with the specified number of bars inside the chosen rectangular area in any orientation.

Implementation

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

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

The Media Spectrum 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 Spectrum 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 Spectrum can be positioned by simply clicking on it and dragging it into the desired position. If the width or height of the Media Spectrum 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. Changing Width or Height will only have an effect on the length of the Bar Gauges. In Landscape mode, Height will be adjustable and in Portrait mode, Width will be adjustable. Width and Height changes will be automatically trimmed to suit the Bar Thickness and Bar Spacing set properties.

Range Property

The Media Spectrum can be set to any range from 0 to 1000.

Orientation Property

The Media Spectrum widget Orientation can be Landscape or Portrait. In Landscape mode the Bar Gauges will be vertical. In Portrait mode the Bar Gauges are horizontal. The Orientation can be changed by selecting Landscape or Portrait property value.

Gauge Count Property

The Gauge Count property sets the amount of visible Bar Gauges in the spectrum.

Gauge Thickness Property

The Gauge thickness of the Individual Bar Gauges can be set by entering the thickness in Pixels as the property value. The Width of the Media Spectrum widget will be determined the by the Gauge Thickness multiplied by the Gauge Count and Gauge Spacing when in Landscape mode. In Portrait mode the height will be determined in the same manner.

Gauge Spacing Property

The space between the individual Bar Gauges can adjusted set by entering a pixel value as the property value.

Direction Property

The direction of the movement of the Bar Gauges of the Media Spectrum can be changed from Normal to Inverted.

In Landscape Orientation, Normal will move the gauges from bottom to top and Inverted will move the gauges from top to bottom. In Portrait Orientation, Normal will move the gauges from Left to Right and Inverted will move the gauges from right to left.

Active Start / Active End Color Property

The Individual bar gauges are made up from 10 segments. If the Darken Inactive Mode is chosen, these colours can be set as a gradual fade from the chosen Start colour to the chosen End colour which will lighten from a dark level as the gauge progresses through its movement. The colour can be selected by clicking on the property value.

Inactive Color Property

The Inactive Color property sets the colour of the inactive part of the individual bar gauges when the Inactive Mode property is set to Custom. This will make the Inactive part a constant colour throughout the range and would usually be set to a darker colour than the Active Start Colour. This colour can be changed by clicking on the property value using the colour selector.

Inactive Mode Property

The Inactive Mode property sets how the inactive part of the individual bar gauge behaves as the bar gauge moves. In Darken mode, the inactive (off) part of the bar gauge will be a darker colour of the colour fade from Active Start colour to Active End colour. In Custom mode the inactive (off) part of the bar gauge will be the Inactive colour that is set by the Inactive Color property.

Demonstration

For this demonstration we will using 2 Media Panels and a Media Spectrum widget to make a simulated changing spectrum display

Add a Media Panel widget from the Static tab

and then set the properties as shown on the right.

Next, add another Media Panel widget and set the properties as shown on the right.

Finally, add a Media Spectrum widget from the Led 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 Media Spectrum show random 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 (MediaSpectrumPage) 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 Spectrum widget is a highly configurable widget that allows you to easily display a collection of Media Gauge D widgets in one widget.

How it works

The Media Spectrum widget displays the Media Gauge D’s with the specified number of bars inside the chosen rectangular area in any orientation.

Implementation

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

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

The Media Spectrum 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 Spectrum 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 Spectrum can be positioned by simply clicking on it and dragging it into the desired position. If the width or height of the Media Spectrum 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. Changing Width or Height will only have an effect on the length of the Bar Gauges. In Landscape mode, Height will be adjustable and in Portrait mode, Width will be adjustable. Width and Height changes will be automatically trimmed to suit the Bar Thickness and Bar Spacing set properties.

Range Property

The Media Spectrum can be set to any range from 0 to 1000.

Orientation Property

The Media Spectrum widget Orientation can be Landscape or Portrait. In Landscape mode the Bar Gauges will be vertical. In Portrait mode the Bar Gauges are horizontal. The Orientation can be changed by selecting Landscape or Portrait property value.

Gauge Count Property

The Gauge Count property sets the amount of visible Bar Gauges in the spectrum.

Gauge Thickness Property

The Gauge thickness of the Individual Bar Gauges can be set by entering the thickness in Pixels as the property value. The Width of the Media Spectrum widget will be determined the by the Gauge Thickness multiplied by the Gauge Count and Gauge Spacing when in Landscape mode. In Portrait mode the height will be determined in the same manner.

Gauge Spacing Property

The space between the individual Bar Gauges can adjusted set by entering a pixel value as the property value.

Direction Property

The direction of the movement of the Bar Gauges of the Media Spectrum can be changed from Normal to Inverted.

In Landscape Orientation, Normal will move the gauges from bottom to top and Inverted will move the gauges from top to bottom. In Portrait Orientation, Normal will move the gauges from Left to Right and Inverted will move the gauges from right to left.

Active Start / Active End Color Property

The Individual bar gauges are made up from 10 segments. If the Darken Inactive Mode is chosen, these colours can be set as a gradual fade from the chosen Start colour to the chosen End colour which will lighten from a dark level as the gauge progresses through its movement. The colour can be selected by clicking on the property value.

Inactive Color Property

The Inactive Color property sets the colour of the inactive part of the individual bar gauges when the Inactive Mode property is set to Custom. This will make the Inactive part a constant colour throughout the range and would usually be set to a darker colour than the Active Start Colour. This colour can be changed by clicking on the property value using the colour selector.

Inactive Mode Property

The Inactive Mode property sets how the inactive part of the individual bar gauge behaves as the bar gauge moves. In Darken mode, the inactive (off) part of the bar gauge will be a darker colour of the colour fade from Active Start colour to Active End colour. In Custom mode the inactive (off) part of the bar gauge will be the Inactive colour that is set by the Inactive Color property.

Demonstration

For this demonstration we will using 2 Media Panels and a Media Spectrum widget to make a simulated changing spectrum display

Add a Media Panel widget from the Static tab

and then set the properties as shown on the right.

Next, add another Media Panel widget and set the properties as shown on the right.

Finally, add a Media Spectrum widget from the Led 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 Media Spectrum show random 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 (MediaSpectrumPage) 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