Using the Microchip Graphics Suite (MGS) Simulator for VS Code®
Introduction
The Microchip Graphics Suite (MGS) Simulator is a specialized tool designed to assist developers in creating, testing, and refining embedded graphical user interfaces (GUIs) for Microchip-based systems. By integrating the MGS Simulator with VS Code®, developers can efficiently design and validate GUI applications within a unified development environment.
Through this guide, you will learn how to install the required extensions, configure your project, run GUI simulations, and analyze results—all from within the VS Code platform.
Prerequisites
Before you begin, you must be able to open and build an MGS project, like MGS Quickstart, in VS Code. If you are using a Microchip development kit, refer to the "Microchip Graphics Suite (MGS) Development Kits" guide for instructions on how to download and open an MGS Quickstart example for your kit.
You must also know how to use MGS Composer to view the GUI design and how to configure and generate the project with the Microchip Code Configurator. For more information, refer to the "Using MGS With MPLAB® Extensions for Microsoft® VS Code®" guide.
MGS Simulator Extension for VS Code
First, download the VS Code extension file (.VSIX) from GitHub®.
Install the VS Code extension by selecting Install from VSIX in the VS Code Extensions tab.
Once the extension is installed, you will see the MGS 
icon on the VS Code toolbar on the left.
Converting the MGS Project to Simulator Mode
An MGS Simulator project can be generated from an MGS application using MPLAB Extensions for VS Code.
Start by opening the MGS application and launching MCC to view the Project Graph like the one shown in the accompanying image.
Configuring the MGS Simulator
Add the MGS Simulator component to the Project Graph by opening the Device Resource tab and clicking the Libraries > Harmony > Graphics Simulator > MGS Simulator component.
Once added, the following configuration options are available. You can move your mouse on top of each option to show more information.
| Category | Options | Description |
|---|---|---|
| Graphics Display Subsystem | Display Type | Drop-down list of preset display options |
| Circular Display | Select if the display is round (not square) | |
| Graphics Controller Subsystem | Color Mode | Color mode should match the color mode of the MGS Composer project |
| Layer Count | Number of layers in the MGS Composer project | |
| Canvas Support | Enabled if Canvas is used in the MCC project | |
| Timer Subsystem | Tick Mode | Simulator timer tick mode |
| Tick Resolution | Simulator timer tick resolution | |
| Web Page Options | Title | Title for HTML simulator file |
| Bezel | Creates a frame around the display | |
| Responsive | Scales the size of the display based on the browser window size | |
| Console | Enables STDIO console | |
| Build Options | Initial Memory | Initial memory to allocate in MB |
| Stack Size | Fixed total stack in kB | |
| Optimization | Optimization level | |
| Native Mode Options | Windows Always on Top | Enables always on top window |
Configure the MGS Simulator component to match the MGS project settings. Make sure that the Display Type, Resolution, Layer Count, and Color Mode are properly set. For example, here are the MGS Simulator settings of an MGS application for a WVGA (800x480) screen with RGB565 color mode and using a single layer in MGS Composer.
Generating an MGS Simulator Project
To generate the MGS Simulator project, the MGS application must be configured to run on the MGS Simulator instead of the embedded hardware. To do this, follow the following steps in MPLAB Code Configurator (MCC).
- Disconnect the LE GPU Driver and LE Display Driver nodes of the Legato Graphics Library.
- Disconnect the TMR node of the Time System Service.
- Connect the LE Display Driver nodes for the Legato Graphics Library and the MGS Simulator.
- Connect the TMR nodes for the TIME System Service and the MGS Simulator.
- Re-generate in MCC to generate the simulator project.
This will generate the <config>.mgsws MGS Simulator project file in the <MPLAB project>/<MCC Config>/src/config/<config>/ directory.
The MGS Simulator Extension for VS Code will automatically detect this project file and show the project details.
Note: If the new project details don't update automatically, you can click the Refresh Project button 
to refresh the project details.
Application Files
User application source files that contain GUI application logic, screen, and button callback functions will need to be included in the build. Application files in the src/ directory are listed in the FILE SELECTION tab and can be selected to be included in the MGS Simulator builds. For example, the screen and widget callback functions in MGS Quickstart are defined in the app_screen_*.c files. These files are checked in the FILE SELECTION tab, so they are included in the build.
Running the MGS Simulation
The MGS Simulator supports two modes, Web Mode and Native Mode.
Web Mode
In Web Mode, the GUI application is built as an HTML file. This mode enables remote access, visualization, and control of the simulation environment using a web browser.
Web Mode is particularly useful for collaborative work, demonstrations, or when users need to access the simulator from different devices without installing software locally.
Refer to the "Using the Microchip Graphics Suite (MGS) Simulator in Web Mode" page.
Native Mode
In Native Mode, the GUI application is converted into a cmake project in VS Code that can be built and run on a PC.
Since the application is a VS Code project, the Native Mode simulation can be used for source-level debugging and development.
Refer to the "Using the MGS Simulator in Native Mode" guide.
Converting the MGS Project to Embedded Mode
The project will need to be converted back to an embedded project so that it can be regenerated and programmed to actual hardware. To convert the project from MGS Simulator mode, follow these steps:
- Disconnect the LE GPU Driver and LE Display Driver nodes of the Legato Graphics Library.
- Disconnect the TMR node of the Time System Service.
- For the TIME System service, connect the TMR node to the correct timer peripheral library component.
- For the Legato Graphics Library component:
- Connect the LE Display Driver node to the appropriate display driver component.
- If the device has a GPU, connect the LE GPU node to the GPU driver component.
SAM9x75 MGS Project in Embedded Mode
- Regenerate the project in MCC.