Creating a Monochrome ePaper GUI Project

Introduction

This section describes the basic workflow for creating a new ePaper Graphical User Interface (GUI) project.

It includes selecting the target device and display configuration, defining display properties such as resolution and orientation, importing fonts and graphics assets, as well as building screens, widgets and navigation flows.

Microchip Graphics Suite (MGS) Quickstart applications provide a good starting point for monochrome ePaper GUI development with MGS Harmony.

MGS Harmony provides example projects for the following EPD display modules. Users are encouraged to refer to the EPD project examples using these displays.

To get started, build and program the appropriate MGS Quickstart project based on the target EPD module being used and the host MCU. 

MPLAB^® Code Configurator (MCC) Project Configuration

Launch MCC for the MGS Quickstart project and view the MCC Project Graph for details on how the display driver and interface is configured for the target EPD module.

The diagram below shows a typical MCC Project Graph for an MGS Harmony EPD project. Highlighted in red are the key MCC components needed to configure an EPD-based MGS Harmony project.

If you are creating a new MCC Harmony project from scratch for the same development kit as the MGS Quickstart example, you can manually copy the configuration or use the MCC Import function to replicate the driver and peripheral configuration from the MGS Quickstart project to your new MCC Harmony project.

If you are creating a new project for custom hardware or a different device, refer to the "Microchip Graphics Suite (MGS) ePaper Driver User Guide" for more in-depth information about how to configure the MCC project and EPD driver for your hardware.

Back to Top

Designing the GUI With MGS Composer

This section focuses on user interface design practices specific to ePaper displays. It emphasizes clear layouts, high-contrast visuals, efficient use of static and dynamic content, reduced screen updates, and appropriate font and icon choices for monochrome, grayscale or limited-color displays.

Refer to the "Designing a Monochrome GUI Using MGS Composer" guide.

Back to Top

Using the MGS Simulator

This section explains how to use the MGS Simulator to preview and evaluate your monochrome GUI design without requiring physical display hardware.

The simulator allows you to review how screens, text, icons, images, and layout elements will appear in monochrome color mode, helping you identify readability, contrast, spacing, and visual clarity issues early in the design process.

By using the simulator before deploying to hardware, you can iterate more quickly, reduce development time, and validate that your interface remains clear and usable under the constraints of a monochrome display.

Refer to the "Using the Microchip Graphics Suite (MGS) Simulator for VS Code®" guide.  

Make sure to configure the MCC project for monochrome color mode.

Back to Top

Optimizing Memory Usage and Best Performance

A well-optimized monochrome ePaper GUI should be simple, readable, stable and efficient. The best designs minimize visual complexity, refresh only meaningful changes, and use lightweight assets that are well suited to the constraints of monochrome ePaper hardware.

Use this checklist when optimizing a monochrome ePaper GUI:

• Keep layouts simple and uncluttered
• Use basic MGS widgets such as labels, buttons, panels and images
• Avoid unnecessary full-screen redraws
• Use event-driven or threshold-based updates
• Group dynamic content into defined update regions
• Keep static elements unchanged whenever possible
• Limit fonts, font sizes, and font weights
• Optimize images and icons for monochrome before importing
• Reuse assets instead of duplicating similar graphics
• Avoid animations, blinking indicators, gradients, and decorative effects
• Reduce overlapping widgets and complex layers
• Test readability, contrast, update behavior, and memory usage in the MGS Simulator

Back to Top