Design an LED Spectrum Widget
Introduction
The Led Spectrum widget is a highly configurable widget that allows you to easily display a collection of Led Bar Gauge widgets in one widget.
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 Led Spectrum widget is set to the maximum size of the display top or left dragging will not function.
- Width and Height
-
For the Led Spectrum widget, the size properties, Width and Height, 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
-
The Led Spectrum can be set to any range from 0 to 1000.
- Orientation
-
The Led Spectrum widgets 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
-
The Gauge Count property sets the amount of visible Bar Gauges in the spectrum.
- Thickness
-
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 Led 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.
- Spacing
-
The space between the individual Bar Gauges can adjusted set by entering a pixel value as the property value.
Gap Mode
- The area between the individual Bar Gauges can be set to be drawn in the same color as the Color set in the Base Color Property, Opaque or can be set as Transparent to only draw the Bar Gauges.
Bar
- Spacing
-
The Bar Spacing property sets how many pixels are used in between the segments of the individual Bar Gauges. By increasing the Bar Spacing a greater gap between segments can be set. Setting this property to zero will create a solid Bar Graph.
- Thickness
-
The Bar Thickness property sets a pixel width of the segments in the individual Bar Gauges. It may be necessary to adjust the Width or Height after altering the Bar Thickness.
Base Color
The background color of the Led Spectrum widget can be altered by clicking on the property value and using the Color Selector. If the Gap Mode property is set to Opaque the area between the individual Bar Gauges will be drawn in the Base color.
Partition
- 1 and 2 Percentage
-
The Bar Gauges can have defined percentages for the 3 colored areas across the range. Only 2 percentages need to be defined with the last percentage being the remaining amount of the range.
-
If the Led Spectrum needs to be a single color throughout its range then Partition 1 Percentage should be set to 100.
- 1, 2 and 3 Inactive and Active Color
-
Each defined partition has an Inactive color and an Active color. Generally, the Inactive color is a darker shade of the Active color. The Colors can be set by clicking on the property value and using the color selector.
Fill Start Location
The Led Spectrum can be configured to operate in the opposite direction to the default setting. If in Landscape mode, choosing Top/Right as the property value will make the Led Spectrums Bar Gauges fill from top to bottom instead of Bottom to top if Bottom/Left is selected as the property value. In Portrait mode, choosing Top/Right will make the Led Spectrums Bar Gauges fill from right to left and left to right if Bottom/Left is selected.
The image below shows the Fill/Start property set Top/Right.
Demonstration
For this demonstration we will using 2 Media Panels and a Led Spectrum widget to make a simulated changing spectrum 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 another Media Panel widget and set the properties as shown.
Finally, add a Led Spectrum widget from the Led 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 b[7];
func setup()
setSpectrumValue(LedSpectrum0, 0, 0);
endfunc
/*
* User Loop Function
*/
func loop()
var r, t;
for(t := 0; t < 7; t++)
r := ABS(RAND() % 98);
if(r > b[t])
setSpectrumValue(LedSpectrum0, t, r);
b[t] := r;
else
b[t] := b[t] - 7;
if(b[t] < 0) b[t] := 0;
setSpectrumValue(LedSpectrum0, t, b[t]);
endif
next
pause(20);
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 Led 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 (LedSpectrumDemo) then click on Save
You can find out further information about the Commander Environment in the Getting Started with the Commander Environment tutorial.