MPLAB® Harmony v2 Graphics Composer (MHGC) Overview

TheMPLAB® Harmony Graphics Composer (MHGC) is a graphical user interface design tool that is integrated as part of theMPLAB Harmony Configurator (MHC). This tool enables you to easily configure and visually design for theMPLAB Harmony Graphics Primitive Library and theMPLAB 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 thedoc folder.

To start the MPLAB Harmony Graphics Composer:

  1. Start MHC from the IDE main menu, clickTools > Embedded > MPLAB Harmony Configurator.
  2. Click on MHC'sLaunch Utility Icon, then selectGraphics Composer.
mhc_launch_utility.png
Click image to enlarge.

Graphics Composer Screen

When MHGC is opened, theGraphics 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 theGraphics 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

TheGraphics 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.

mhgc.png

Graphics Composer Management

TheGraphics Composer Management tab is displayed in the bottom-left pane. This has four sub-tabs:

  • Screens
  • Objects
  • Schemes
  • Assets

TheScreens tab lists the screens designed for the application. It has options to create, delete, copy, move up/down and make a screen as primary screen.

mhgc_management_screens.png
Click image to enlarge.

TheObjects tab lists the objects used in the application. It has multiple options to control how the objects appear on the screen.

mhgc_management_objects.png
Click image to enlarge.

TheSchemes tab lists the schemes designed for the project. This defines the font size, color, image, texture etc.

mhgc_management_schemes.png
Click image to enlarge.

TheAssets tab lists the graphics resources used by the applications. Assets could be fonts, images or any other data needed by the application.

mhgc_management_assets.png
Click image to enlarge.
Click on the video title to watch this video on YouTube.

 Learn More

 
Harmony MHGC Tutorial
Learn more >