The MPLAB® Harmony Graphics Composer (MHGC) is a graphical user interface design tool that is integrated as part of the MPLAB Harmony Configurator (MHC). This tool enables you to easily configure and visually design for the MPLAB Harmony Graphics Primitive Library and the MPLAB Harmony Graphics Object Layer.
The Graphics Composer performs the following tasks for you:
- Import image and font assets
- Create screens and schemes
- Add objects to screens
- Configure objects
- Generate MHC configuration
- Upload program to the device
MHGC User Interface
For more detail on the MHGC User Interface, please see the MPLAB Harmony Help file. It can be found in the Harmony install folder under the doc folder.
To start the MPLAB Harmony Graphics Composer:
- Start MHC from the IDE main menu, click Tools > Embedded > MPLAB Harmony Configurator.
- Click on MHC's Launch Utility Icon, then select Graphics Composer.
Graphics Composer Screen
When MHGC is opened, the Graphics Composer Screen is displayed (see the associated image). This screen is the same size and resolution as your actual display and it simulates how objects will appear on the screen.
Graphics Composer Tool Box
You will find the Graphics Composer Tool Box in the top-left pane. It shows the various objects that can be added to the display screen. You will see two types of objects in this window:
- Primitives (basic objects: Line, Rectangle, Circle, Image, Text).
- Widgets (complex objects: Button, Check Box, Progress Bar, Meter, etc…).
Graphics Composer Properties
The Graphics Composer Properties tab is displayed in the top-right pane. This allows you to view and edit the properties of the selected screen or object.
Graphics Composer Management
The Graphics Composer Management tab is displayed in the bottom-left pane. This has four sub-tabs:
- Screens
- Objects
- Schemes
- Assets
The Screens tab lists the screens designed for the application. It has options to create, delete, copy, move up/down and make a screen the primary screen.
The Objects tab lists the objects used in the application. It has multiple options to control how the objects appear on the screen.
The Schemes tab lists the schemes designed for the project. This defines the font size, color, image, texture, etc.
The Assets tab lists the graphics resources used by the applications. Assets could be fonts, images, or any other data needed by the application.