MPLAB® Harmony v2 Graphics Composer (MHGC) Overview

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:

  1. Start MHC from the IDE main menu, click Tools > Embedded > MPLAB Harmony Configurator.
  2. Click on MHC's Launch Utility Icon, then select Graphics Composer.
Click image to enlarge.

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.

Click image to enlarge.

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

Click image to enlarge.

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

Click image to enlarge.

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

Click image to enlarge.
Click on the video title to watch this video on YouTube.
© 2024 Microchip Technology, Inc.
Notice: ARM and Cortex are the registered trademarks of ARM Limited in the EU and other countries.
Information contained on this site regarding device applications and the like is provided only for your convenience and may be superseded by updates. It is your responsibility to ensure that your application meets with your specifications. MICROCHIP MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND WHETHER EXPRESS OR IMPLIED, WRITTEN OR ORAL, STATUTORY OR OTHERWISE, RELATED TO THE INFORMATION, INCLUDING BUT NOT LIMITED TO ITS CONDITION, QUALITY, PERFORMANCE, MERCHANTABILITY OR FITNESS FOR PURPOSE. Microchip disclaims all liability arising from this information and its use. Use of Microchip devices in life support and/or safety applications is entirely at the buyer's risk, and the buyer agrees to defend, indemnify and hold harmless Microchip from any and all damages, claims, suits, or expenses resulting from such use. No licenses are conveyed, implicitly or otherwise, under any Microchip intellectual property rights.