Low-Voltage Differential Signaling (LVGL) for MPLAB® Harmony
Introduction
This user guide introduces how to develop Low-Voltage Differential Signaling (LVGL)-based applications with MPLAB® Harmony in VS Code®, covering project setup, code generation, build, and debug workflows using VS Code Extensions. It highlights how MPLAB Harmony drivers and middleware integrate with LVGL while taking advantage of VS Code features, such as streamlined project management, debugging, and extension-based tooling.
Intended for developers familiar with MPLAB Harmony, this guide helps you get started with LVGL in a VS Code–centric workflow, enabling faster iteration and a more modern development experience while remaining fully aligned with Microchip’s supported software ecosystem.
VS Code With MPLAB Extensions
Learn Products
MPLAB Tools for Microsoft® Visual Studio Code (VS Code) represent a groundbreaking integration of Microchip's robust development tools with one of the most popular code editors, VS Code. This suite of extensions is designed to streamline the development process for both new and seasoned developers who rely on Microchip's comprehensive device support and toolset.
To use the bare-metal and Real-Time Operating System (RTOS)-based LVGL applications for Microchip devices, install VS Code with MPLAB Extensions.
Refer to the Get Started for MPLAB® X IDE Users New to Visual Studio Code (VS Code®) page for steps on how to get started with VS Code and MPLAB Extensions.
LVGL Application Examples
The latest LVGL application examples for Microchip MPUs and MCUs are available on GitHub®.
Use git to download the repository:
The clone repository folder will have the following application examples for different Microchip boards and displays will be in their respective sub-folders.
| Project | Bare-metal or RTOS | MCU/MPU | Display | Board |
|---|---|---|---|---|
| mgsh_sama7d65_lvgl | Bare-metal | SAMA7D65 | 800x480 5" LVDS WVGA | Curiosity (EV63J76A) |
| mgsh_sam9x75_lvgl | Bare-metal | SAM9X75 | 800x480 5" LVDS WVGA | Curiosity (EV31H43A) |
| mgsh_sam9x60_lvgl | Bare-metal | SAM9X60 | 800x480 5" RGB WVGA | Curiosity (EV40E67A) |
| mgsh_pic32mzda_lvgl | Bare-metal | PIC32MZ DA | 800x480 RGB WVGA | Curiosity (EV87D54A) |
| mgsh_pic32cz_ca70_lvgl | Bare-metal | PIC32CZ CA70 | 480x272 4.3" RGB WQVGA | Curiosity Ultra (EV56T44A) |
| mgsh_pic32ck_sg_gc_lvgl | Bare-metal | PIC32CK GC01 | 480x272 4.3" RGB WQVGA | Curiosity Ultra (EV44P93A) |
In the same repository folder, the official LVGL repository will also be cloned and fetched as a sub-module.
For up-to-date information about the repository, refer to the README.md .
Workspace Overview
The LVGL application for each combination of Microchip board and display is provided as VS Code workspaces.
To open the LVGL application workspace, launch VS Code. Click File > Open Workspace from File...
Navigate to the appropriate application folder for your Microchip board and display, and open the Workspace file.
When opened, the VS Code workspace will look like the one shown in the accompanying image:
The workspace contains the following files and folders:
- mgsh_<device>_lvgl/
- curiosity_wvga/
- src/config/ - contains device and board Board Support Package (BSP)
- app_lvgl.c - LVGL integration code
- lv_conf.h - LVGL configuration header file
- curiosity_wvga/
- demos/ - LVGL demos
- src/ - LVGL library sources
Building and Running
To build the demo, go the VS Code command palette and select MPLAB CMake: Clean and Build.
When the build completes, the application binary or HEX files will be in the out directory. Use a debugger to program the application to the board, or if running on an MPU, copy the binary and boot from an SD card.
Configuring the Application
Performance
The applications are configured to balance graphics performance with CPU and memory usage by keeping CPU usage below 50% while demonstrating reasonable graphics performance.
To increase performance graphics performance, with potential tradeoffs in CPU and memory usage, the application should be configured as follows:
- If using a PRO version of MPLAB XC32, set compiler optimization to -O3
- In app_lvgl.c,
- Set LV_TASK_INC_VAL_MS to a lower value to shorten the LVGL task run intervals
- Where applicable, increase the value of LV_RENDER_BUFFER_SIZE if memory is available
- In lv_conf.h
- Reduce LV_DEF_REFR_PERIOD to increase the LVGL refresh rate
- Increase LV_DRAW_LAYER_SIMPLE_BUF_SIZE if memory is available
Color Mode
The applications are configured to use the default color mode of RGB565. To change color modes:
Change the LVGL color mode by, set LV_COLOR_DEPTH to the desired color depth in lv_conf.h
Change the display driver color mode by launching MPLAB Code Configurator (MCC) and setting the desired color mode in the Display Driver component.
Switching Demos
All the LVGL demos are included in the workspace. By default, the LVGL Widgets demo will run.
To select a different demo, enable the right LV_USE_DEMO_ macro in lv_conf.h.