Using Microchip Graphics Suite (MGS) With MPLAB® Extensions for Microsoft® VS Code®

Last modified by Microchip on 2026/04/09 13:57

Introduction

This user guide provides step-by-step instructions for using Microchip Graphics Suite (MGS) with MPLAB^® Extensions in VS Code^®. Whether you are new to MGS or looking to enhance your development workflow, this guide will help you set up your environment, configure the necessary extensions, and start building projects efficiently within VS Code.

Prerequisites

Before you begin, make sure that you have downloaded, built, and run the MGS Quickstart application on your target hardware platform.

Refer to the MGS Development Kits user guide for instructions on how to open and build an MGS Quickstart application for your Microchip development board and display.

Launching MCC and MGS Composer

After you have the MGS Quickstart application built and running, go to the VS Code command palette and launch MPLAB Code Configurator (MCC).

Launch MCC

Select the corresponding MCC Config to continue.

MCC Config

The MCC Project graph consists of the different MCC components used in the MGS Quickstart application.

For example, the following diagram highlights the various MCC components that make up the MGS Quickstart application for the SAM9x75 Curiosity development kit with a 5" LVDS display.

MCC Project Graph for MGS Quickstart project on the SAM9x75 Curiosity with 5" LVDS Display

The GFX Library Component (Legato) enables the MGS library and the MGS Composer tool.

To open the MGS Composer GUI project, click the Plugins drop-down list in MCC and select Microchip Graphics Composer.

Launching MGS Composer

The MGS Composer application will launch in a separate window and will automatically open the MGS Composer design for the MGS Quickstart project.

MGS Composer Design

The design project file is located in mgs_quickstart/<MPLAB project>/<MCC Config>/src/config/default/default_design.zip.

Note: MGS Composer will search for the design project file in the /<MCC Config>/src/config/<config name>/ directory, and will automatically open the file that has the name <config name>_design.zip. If this file doesn't exist, MGS Composer will prompt you to create a new design or manually open the design project file.

Generating the MGS Composer Design

To generate the MGS Composer design into the VS Code project, open the Project Resource tab in MCC and click the Generate button.

Generate Project

MCC will send a signal to the MGS Composer application to generate the design into a cache. MCC will read that cache and gather all the generated source files and include them in the VS Code project.

Important: Keep MGS Composer open when generating from MCC so that the generated cache is up to date. If MGS Composer is closed, MCC will not get the generated code for any new changes in the MGS Composer project.

MCC will generate only the components that have been updated. To force a full regeneration, you can right-click on the Generate button and set Force Update on All, then left-click Generate.

Force Update

Directory Structure and Generated Source Files

All the MGS library and generated code are contained in the <project>/<MCC config>/src/config/default/gfx/ directory. The following diagram shows the structure of the gfx/ directory and describes the relevant pieces.

Generated Code

The output source files for the GUI design are automatically added to the VS Code project under the generated/ directory.

Also, the source file for the GUI configuration is generated as <project>/<MCC config>/src/config/default/gfx/legato_config.h.

Next Steps

Now that you can launch MCC and MGS Composer and generate the code, you can start using the MGS Composer to create a new screen or a new GUI project.

To evaluate your changes, you can build and program the application for your target board and display, or you can use the MGS Simulator Extension for VS Code.