Light and Versatile Graphics Library (VLGL) with STM32 – Complete Guide

Light and Versatile Graphics Library (VLGL) with STM32

Learn how the Light and Versatile Graphics Library (VLGL) helps you build fast, beautiful GUIs on STM32 microcontrollers. This guide explains features, benefits, setup instructions, and sample code for using VLGL on STM32.

Introduction

Modern embedded applications often require user-friendly graphic interfaces—whether it's a touchscreen, a simple LCD, or a display-driven control panel. However, traditional graphics libraries are often heavy, slow, or memory-hungry, making them difficult to run on microcontrollers with limited resources.

VLGL (Very Light Graphics Library) solves this problem by offering a lightweight, modular, and high-performance graphics solution designed specifically for resource-constrained MCUs like the STM32 series. It provides fast rendering, low memory usage, and an easy API, making it perfect for industrial GUIs, IoT devices, control panels, and consumer embedded products.

What is VLGL?

LVGL (Light and Versatile Graphics Library) is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and a low memory footprint. He whole library is developed in pure c language and easy to port. The main features of littleVGL are as follows:

• Lightweight – Requires very little memory
• Fast – Efficient rendering for smooth UI
• Portable – Works with STM32, ESP32, nRF52, and many ARM MCUs
• Modular – Include only what you need
• Easy-to-use – Simple API for beginners and professionals

VLGL is ideal for display sizes ranging from 128x64 to 480x320 and even small TFT touchscreens.

Key Features of VLGL

• ⭐ Lightweight CoreDesigned for small MCUs—minimal footprint.
• ⭐ WidgetsVLGL supports UI elements like:Buttons,Labels,Sliders,Progress bars,Images,Checkboxes,Icons
• ⭐ Themes & StylesCustomize colors, fonts, borders, and UI themes easily.
• ⭐ Touchscreen Support Works with resistive & capacitive touch controllers such as:XPT2046,FT6236,STM32 TouchSense
• ⭐ Double Buffer (Optional)Enables smoother animations and transitions.
• ⭐ Unicode Font SupportUse custom fonts for various languages.

Why Use VLGL with STM32?

STM32 microcontrollers are popular due to their performance and peripherals. Pairing STM32 with VLGL gives you:

• Optimized for Low Memory - VLGL runs smoothly even on STM32 MCUs with 32 KB RAM or less.
• Hardware Acceleration Support -Many STM32 controllers include:DMA,DMA2D (Chrom-ART),SPI/DMA for fast display refresh,
• Fast Rendering -Its tile-based drawing and smart buffer management ensure high FPS UI.
• Modular Design -You can disable any feature you don’t need, reducing code size.
• Wide Display Support -Works with:ILI9341,ST7735,ILI9486 and many more

VLGL Architecture Overview

VLGL follows a simple structure:

App Code → VLGL Core → Hardware Driver → Display

• You write UI code
• VLGL renders it
• Driver sends pixels to display (SPI / Parallel / FSMC / LTDC)

This separation makes it portable and easy to modify.

Requirements

• 32 or 64 bit microcontroller or processor
• > 16 MHz clock speed is recommended
• Flash/ROM: > 64 kB for the very essential components (> 180 kB is recommended)
• C99 or newer compiler
• Basic C (or C++) knowledge: pointers, structs, callbacks.

LVGL ported to STM32F103

1Download VLGL

Get it from the official GitHub repository:

Download

Copy the vlgl folder into your STM32 project.

2Configure Display Driver

First open LVGL folder and select and copy file and folder from there. Create new Folder VLGL for that paste it.

Now Change lv_conf_template.h to lv_conf.h,Next Step is Open lv_config.h Change the first line #if 0 to #if 1, to enable lv_conf.h.

vl_conf.h

3 VLGL Porting

Next Step is Open the lvgl/examples/porting folder, which contains data that interacts with the hardware layer.

lvgl/examples/porting folder

Remove all _templates in the 8 files, and change #if 0 to #if 1 in everyfile. Remove _TEMP from All files the macro definition. Just like to Change the macro definition in file lv_port_disp.c #include "lv_port_disp_templ.h" to change as "lv_port_disp.h"

same this for other C Files in fs and indevs are also modified accordingly. fs is related to the file system.indev is related to input devices, buttons, touch screens, mice, etc.

Porting code change

Now make some change in lv_config.h file as shown below

Configure Change

Create a Simple UI Element

Here we create project of STM32F103RGT which have Flash Memory 1096 kb and RAM as 96 kb with basic setting

STM32Cubide

Next Step is to create folder VLGL and VLGL_Port folders in project . as show in below pic.

STM32Cubide

Now add VLGL folder source and example folder in it. and VLGL_Port have poring files as shown below pics.

STM32maxide folder list

Example: Add a Button

vl_obj_t *btn = vl_btn_create(vl_screen_active());
vl_obj_set_size(btn, 100, 40);
vl_obj_align(btn, VL_ALIGN_CENTER);

vl_label_create(btn, "Click Me");

Main Loop

    while(1)
{
    vlgl_task_handler();   // handles UI updates
    HAL_Delay(5);
}

Conclusion

The Light and Versatile Graphics Library (VLGL) is an excellent option for developers working with STM32 microcontrollers and needing a fast, lightweight, and efficient graphics solution. Its small footprint, modularity, and simple API make it ideal for both hobbyists and professionals.

With STM32’s powerful peripherals and hardware acceleration features, VLGL becomes even more capable—offering smooth, responsive GUIs even on low-cost MCUs.

Happy Coding!