Design a Media Color Led Widget

Introduction

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

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 and Position

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 Media Color Led widget is set to the maximum size of the display top or left dragging will not function.

Width and Height

For the Media Color Led 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.

Outer / Inner Color

The Media Color Led’s bezel is made up of a raised outer ring and recessed inner ring. The color of each ring can be set individually by simply clicking on the Outer Color property or the Inner Color property and the Color 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 color of the Media Color Led with RGB values. For instructions on how to add a widget, refer to this discussion.

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

Next, add a Media Gauge D widget.

and then set the properties as shown.

Next, add another Media Gauge D widget and set the properties as shown.

Add another Media Gauge D widget and set the properties as shown.

Next, add a Led Digits widget.

and then set the properties as shown.

Add another Led Digits widget and set the properties as shown.

Finally, add another Led Digits widget 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.

func setup()
    // put your setup code here, to run once:
    setPage(Page0);
    setWidgetValue(MediaColorLed0, 0);        
endfunc

/*
 * User Loop Function
 */
func loop()
    var r,g,b,a;
    r := 0; g := 0; b := 0;
    for(r := 0; r < 254; r+=2)
        setWidgetValue(MediaColorLed0, gfx_RGBto565(r,g,b));
        setWidgetValue(MediaGaugeD0, r); 
        setWidgetValue(LedDigits0, r);                       
    next
    for(g := 0; g < 254; g+=2)
        setWidgetValue(MediaColorLed0, gfx_RGBto565(r,g,b));
        setWidgetValue(MediaGaugeD1, g); 
        setWidgetValue(LedDigits1, g);                       
    next
    for(b := 0; b < 254; b+=2)
        setWidgetValue(MediaColorLed0, gfx_RGBto565(r,g,b));
        setWidgetValue(MediaGaugeD2, b); 
        setWidgetValue(LedDigits2, b);                       
    next
    for(a := 255; a > 0; a-=4)
        setWidgetValue(MediaColorLed0, gfx_RGBto565(a,a,a));
        setWidgetValue(MediaGaugeD0, a); 
        setWidgetValue(LedDigits0, a); 
        setWidgetValue(MediaGaugeD1, a); 
        setWidgetValue(LedDigits1, a);
        setWidgetValue(MediaGaugeD2, a); 
        setWidgetValue(LedDigits2, a);                      
    next
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 Media Color Led change color 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.