About the Schemes and Scheme Editor

Last modified by Microchip on 2024/03/29 13:37
Contents

What is a Scheme?

A scheme is a collection of colors that can be referenced by one or more widgets. Schemes can manipulate how widgets look by setting colors and transparency levels for various parts of the widget. 

When a new widget is created, it is automatically assigned a default scheme. A user can change this to a custom scheme if so desired. The widget references its scheme during rendering.

Below is a list of scheme colors and a description of how it is typically used. Refer to the widget documentation to learn how schemes can be used to manage the widget’s appearance. 

Scheme Colors

  • Base: Default area fill
  • Highlight: Light embossing
  • Highlight Light: Very light embossing
  • Shadow: Dark embossing
  • Shadow Dark: Very dark embossing
  • Foreground: A foreground color
  • Foreground Inactive: Foreground color when inactive
  • Foreground Disabled: Foreground color when disabled
  • Background: A background color, usually to differentiate from Base
  • Background Inactive: Background when inactive
  • Background Disabled: Background when disabled
  • Text: Text color
  • Text Highlight: Text color background when highlighted
  • Text Highlight Text: Text color when highlighted
  • Text Inactive: Text color when inactive
  • Text Disabled: Text color when disabled

Note: The individual widget page discusses in more detail, the different aspects of the widget affected by the scheme color table.

How to Add a Scheme

A new Microchip Graphics Suite (MGS) Harmony Composer project has two schemes: the internal scheme and a default scheme called WhiteScheme.

The user is encouraged to define a scheme that adheres to their design goals. A design may have many schemes for each widget or it may share schemes across many widgets.

Click the Schemes tab to view the Scheme pane. It appears at the bottom left side of the MGS Harmony Composer. If the Scheme pane is not visible, click Window > Reset Windows in the menu bar.

To add a new scheme to the list of schemes, click the + icon on the Schemes pane.

add Scheme

Figure 1: Adding Schemes

To modify the scheme property, choose the scheme from the scheme pane, then select the Scheme Editor tab on the bottom right side of the MGS Harmony Composer. You can modify the Name, Color Mode, and the colors of the color table.

Scheme Editor

Figure 2: Scheme Editor

                                                                                                                            

To change the color or to set a transparency level to any color of the color table, click on the particular color to launch the Color Editor. Set the color by entering individual RGB (and alpha to set transparency), or selecting the color from the color palette or color wheel. Click OK.

colorTable

Figure 3: Changing Scheme Colors in the Color Table

Note: Depending on the widget, some colors can be viewed immediately after modifying the color table. For example, for a label widget, changing the "Text" color of the color table will show results immediately on the MGS Harmony Composer Screen Designer.

Back to Top

How to Set the Color Table

The color table in a scheme has all the colors as described in the "Scheme Colors" section. Each color affects the widget differently. A Scheme Helper is available for each widget to understand the impact of the color table on it. To access the scheme helper for a widget, follow the steps shown.

Select the widget. In this example, a button widget is selected.
Choose the Object Editor on the bottom right side of the MGS Harmony Composer.
Click the ? button to the right of the scheme property. This will launch the Button Scheme Helper. 

Figure 4: Accessing Scheme Helper shows how to access scheme helper for a widget.

scheme Helper

Figure 4: Accessing Scheme Helper

The Scheme helper shows how the different colors of the color table are used to render different parts of a widget. Figure 4 shows the scheme helper for a button widget.

Note: To learn how to access the scheme helper for different widgets and how to use the information provided in the scheme helper to configure the color table refer to the respective widget document.

Back to Top

How to Apply a Scheme to a Widget

As an example of how to apply a custom scheme to a widget, we will see how to apply a red scheme to a button widget. For details on how the color table of a scheme affects each widget, refer to the particular widget guide.

The scheme field is part of the base widget properties. This means every widget has a scheme field. 

Figure 5: Scheme Property in Button Widget Properties shows the properties of a button widget in the Object Editor window. The Scheme field is associated with the default internal scheme.

buttonProperties

Figure 5: Scheme Property in Button Widget Properties

To apply a red scheme to the button widget, follow the steps.

From the Object Editor, click on the scheme property to bring up the Scheme selection.

Choose the desired scheme, in this case RedScheme, and click OK.

Figure 6: Applying a scheme to a button widget shows how the button widget is set to RedScheme.

Applying a scheme to a button widget

Figure 6: Applying a scheme to a button widget

Back to Top

Applying Scheme Using API

The widget scheme may be changed in run time from the user application. For example, the text on buttons may be changed to show active/inactive states. The setScheme() API can be used for this purpose. For example:

Screen0_ButtonWidget0->fn->setScheme(Screen0_ButtonWidget0, &GreenScheme);

Similarly, the scheme can be set/changed for all other widgets.

Note: The setScheme() API is supported at the base widget level. Its description can be found on the "Base Widget Documentation" page.

Back to Top