Creating a New GUI Application using Microchip Graphics Suite (MGS) Quickstart
Introduction
One way to create a new graphical user interface (GUI) application is to begin with the Microchip Graphics Suite (MGS) Quickstart demo and start updating the design to match the target GUI design.
This page provides a guide on how to start with an existing Quickstart demo and modify it to design your GUI.
Microchip Graphics Suite (MGS) Quickstart
MGS Quickstart is a basic MGS GUI application that can be used as a simple starting point for creating a new MGS GUI application.
MGS Quickstart includes a couple of screens with widgets like labels, images and a button that can be pressed to navigate between the two screens. So it provides the basic widgets for designing a GUI and an example on how to use button event callbacks to navigate between the two screens.
Open MGS Quickstart GUI design in MGS Composer
To open the MGS Quickstart GUI design, launch MGS Composer in the Linux® workstation. Navigate to the MGS applications folder and open the quickstart_<resolution>_design.zip project file in the Quickstart application directory.
The Quickstart application is available in <sdk>/apps/quickstart. Select the one that closely matches your target screen resolution. If using a target resolution that's not listed, refer to the Custom Screen Resolution section at the bottom of this guide.
Custom Screen Resolution
The Quickstart application is available in the following preset resolutions (800x480, 1024x600, 1280x800).
If designing for a different screen size, set the design resolution by changing the following in the MGS Composer project:
Go to Project > Settings > Display. Set the target screen width and height.
Select the BaseLayer in the Screen Tree and toggle (uncheck, then check) the Locked To Screen property.
Notice that the layer will be resized to match the display resolution. Adjust the widgets accordingly.
You may now start updating the MGS Composer design (i.e., update the images, add more widgets, add screens, etc.)
Generating the Updated MGS Composer design
The screen code must be regenerated for the design updates to be applied to the application.
For MGS Quickstart, the MGS Composer-generated code is stored in the <mgs>/apps/quickstart/gfx directory.
To generate the screen code, click the Generate Code button on the upper right section of MGS Composer.
Any changes to the design will update the code in the <mgs>/apps/quickstart/gfx directory.
Application Code and Event Handling
Refer to the MGS Harmony guide on how to enable event handling in MGS Composer and define the event callbacks in an application source file.
The application source files that contain the screen and widget callback functions for the two screens (Home and Help) in the MGS Quickstart GUI are in <mgs>/apps/quickstart/apps. For new screens, screen-specific application source files must be created in this directory so it will be included in the SDK build.
Building and Running the Updated GUI Design
To simulate the updated design on the Linux desktop, follow the same steps for building on the desktop.
To run the application on an embedded Linux device, follow the steps for adding the cross-compiled binary to the Buildroot rootfs.