Using & customizing emWin skins

Wouter's picture

This blog describes how to use and customize the emWin skins to change the look of the emWin widgets.

 

What is skinning?

Skinning is a method of changing the appearance of one or multiple widgets. It allows changing the look by using a dedicated skin which defines how the widgets are rendered. This makes it easy to change the appearance of a complete group of widgets in a similar way by changing only the skin. Without skinning, widget member functions have to be used to change the look for each single widget or the callback function has to be overwritten.

Classical designDefault skin

 

Skinning makes only sense if a widget consists of several widget specific details. It does not make sense for each kind of widget. A TEXT widget for example does not require a separate skin, because it consists only of the text itself.

Currently the following widgets support skinning:

  • BUTTON
  • CHECKBOX
  • DROPDOWN
  • FRAMEWIN
  • HEADER
  • PROGBAR
  • RADIO
  • SCROLLBAR
  • SLIDER

 

[From http://www.segger.com/skinning.html]

 

Using Skinning 

Using skinning is very easy; with just a few command, your GUI can have a more modern and more appealing look already! Currently emWin comes with one standard skin, called SKIN_FLEX. This skin can be used by calling the widget's SetDefaultSkin() function. E.g. to use the SKIN_FLEX skin on all buttons in your GUI, simply call the following function before drawing the GUI:

BUTTON_SetDefaultSkin(BUTTON_SKIN_FLEX);

 

Customizing skins

The default skin (SkinFlex) can easily be customized.

As an example, let's examine how the SkinFlex skin of a button widget can be customized. All widgets which are capable of using the SkinFlex skin have a property get-and-set-function called X_GetSkinFlexProps() and X_SetSkinFlexProps() (X being the name of the widget, e.g. BUTTON). These functions can retrieve and set the properties of the SkinFlex skin for that specific widget. The available properties depend on what widget is used, but the procedure for changing any of the properties is the same for all widgets.

Both the get and set function require two parameters:

  • A pointer to an object to store/retrieve the skin properties to/in.
  • An index number. The index number represents the state a widget can have, e.g. a button can be pressed, focussed, enabled or disabled. Each of these states have specific properties.

An example for a button with SkinFlex skin is provided below:

BUTTON_SKINFLEX_PROPS /* Temp variable to store customized settings of the skin */
BUTTON_GetSkinFlexProps(&Props, BUTTON_SKINFLEX_PI_ENABLED); /* Get current skin properties of enabled button */
Props.aColorFrame[0] = GUI_GREEN; /* Change colors of several parts of the button */
Props.aColorFrame[1] = GUI_MAGENTA;
Props.aColorFrame[2] = GUI_BLUE;
Props.aColorUpper[0] = GUI_YELLOW;
Props.aColorUpper[1] = GUI_RED;
Props.aColorLower[0] = GUI_GREEN;
Props.aColorLower[1] = GUI_BLUE;
BUTTON_SetSkinFlexProps(&Props, BUTTON_SKINFLEX_PI_ENABLED); /* Store new skin properties to enabled button */

Result:


The provided example code needs to be executed before the GUI is drawn on the screen. Upon drawing, all buttons assigned to the SkinFlex skin will use the customized properties.

Note: Only index BUTTON_SKINFLEX_PI_ENABLED is changed here. Only when the button is enabled (thus not focussed, pressed or disabled) the customized skin is displayed.

 

More information

More information can be found on the segger website: http://www.segger.com/skinning.html

Also one of the demo applications provided by segger (http://www.segger.com/emwin-samples.html) show how to apply skinning:

Simulator executable [link]

Source code [link]

5
Your rating: None Average: 5 (1 vote)
feedback