Microchip Graphics Suite (MGS) Harmony Widgets Guide
Introduction
A widget refers to an element of a Graphical User Interface (GUI) that displays information or provides a specific way for a user to interact with the operating system and an application. Widgets could include buttons, dialog boxes, pop-up windows, etc.
Microchip Graphics Suite (MGS) provides ready-to-use widgets that enable users to quickly create a GUI screen using MGS Harmony Composer. The look and function of these widgets can be easily customized using the widget properties. Some widgets also provide interactivity by enabling the processing of user input and other events.
These widgets can be used as building blocks to create more complex UI controls.
Widgets in MGS Harmony Composer
Widgets Toolbox
The Widget Tool Box provides a collection of ready-to-use widgets in MGS Harmony Composer that users can add widgets to the screen design.
Figure 1: Widgets Toolbox Window
Widgets can be added to the screen design by dragging them from the Tool Box to the Screen Design area or by double-clicking them in the Tool Box.
Widget Properties
Widget properties can be configured using the Object Editor on the right side of the MGS Harmony Composer interface. To view the widget properties in the Object Editor, the widget must be selected in the Screen Tree or the Screen Design area.
Figure 2: Widgets Properties Window
Each widget has multiple properties to manage their appearance as well as their function. These include base properties that are common to all MGS widgets, widget-specific properties that enable customization of the specific widget, and event properties that enable handling of relevant events like touch input.
Base Widget Properties
Base widget properties are common to all MGS widgets.
Widgets
Arc
A graphical object in the shape of an arc. The arc thickness can be set and filled.
Bar Graph
A graphing widget that shows data in categories using rectangular bars.
Button
A binary On and Off control with events generation for Press and Release state.
Check Box
A selection box with Checked and Unchecked states, and associated events.
Circle
A graphical object in the shape of a circle.
Circular Gauge
A circular widget that operates like a gauge, where the hand/needle position indicates a value.
Circular Slider
A circular widget that can change values based on external input like touch. The slider is filled based on the value of the widget relative to the maximum value.
Draw Surface
A container with a callback from its paint loop. A drawing surface lets the application have a chance to make draw calls directly to the scratch buffer.
Gradient
A drawing window that can be associated with a gradient color scheme. This allows for color variation on the window.
Group Box
A container with a border and a text title. For functionality, a group box is similar to a window.
Image
Allows an image to be displayed on screen.
Image Rotate
Allows an image to be displayed and rotated on screen.
Image Scale
Allows an image to be displayed and scaled up or down on screen.
Image Sequence
A special widget that allows the image display on the screen to be scheduled and sequenced.
Keypad
A key entry widget that can be designed for the number of entries divided by a specified number of rows and column entries. The widget has a key click event that can be customized.
Label
A text display widget. This does not have any input at runtime capability. A Text Field widget serves that purpose.
Line
A graphical object in the shape of a line.
Line Graph
A graphing widget that shows data in categories using points and lines.
List
Allows making lists of text and image items. The list contents, number of items, and the sequence can be managed through a List Configuration dialog box in the Properties box.
List Wheel
Allows multiple radial selections that were usually touch-based selections and browsing.
Panel
A container widget that provides a rectangle area, that can be used to group or parent widgets.
Pie Chart
A graphing widget that shows data entries as sectors in a circle.
Progress Bar
Displays the progress pointer for an event being monitored.
Radial Menu
A widget that groups any number of images into an elliptical carousel. It can configured as a touch interactive image carousel or interface menu.
Radio Button
A set of button widgets that are selected out of the group one at a time.
Rectangle
A graphical object in the shape of a rectangle.
Scroll Bar
Intended to be used with another relevant widget such as the List Wheel to scroll up and down. It has a callback each time the value is changed. The callback allows users to trigger actions to be handled on the scroll value change event.
Slider
Can change values with an external input such as touch.
Text Field
Text input can be accepted into the text field from an external input or a widget, such as a keypad.
Touch Test
Allows tracking of touch inputs. Each new touch input is added to the list of displayed touch coordinates.
Window
A container widget similar to the Panel but has a customizable title bar.