Introduction to Zephyr Part 10: Graphics with LVGL and Display Drivers | DigiKey

Designing graphical user interfaces (GUIs) for embedded systems has historically been a challenge, but libraries like LVGL (Light and Versatile Graphics Library) are transforming the landscape. In this video, we demonstrate how to integrate LVGL with the Zephyr real-time operating system to create sleek, interactive GUIs on resource-constrained devices. From setting up your project to displaying dynamic elements like counters and animated shapes, this tutorial covers everything you need to build your first embedded GUI. You can find a written explanation of these concepts and a breakdown of the challenge solution here: https://www.digikey.com/en/maker/tuto... The GitHub repository for this course (including solutions to the challenges) can be found here: https://github.com/ShawnHymel/introdu... LVGL is a lightweight, open-source graphics library designed for microcontrollers, offering features like anti-aliased drawing, custom themes, and a suite of widgets including buttons, labels, and graphs. Pairing it with Zephyr RTOS provides access to robust real-time capabilities, allowing you to build responsive and feature-rich applications for various hardware platforms. In this tutorial, we leverage Zephyr’s support for the ST7735R SPI display to showcase LVGL’s flexibility. The ST7735R is a small, low-cost SPI display controller commonly found in color LCD modules. It supports resolutions up to 160x128 and provides features like programmable gamma curves and hardware inversion. Zephyr’s display API provides a common interface for such drivers, which can make your application code portable (to work across a variety of displays). We walk you through creating a new project configuring Zephyr to use LVGL, and enabling the ST7735R display driver via the Devicetree. Using C, we demonstrate how to display static and dynamic elements, including text labels, counters, and basic shapes like rectangles and circles. You’ll see how to apply custom styles, align widgets, and update the display in real time. This hands-on example showcases the seamless interplay between LVGL’s graphics processing and Zephyr’s real-time capabilities. By combining the flexibility of LVGL with Zephyr's powerful features, you can create highly responsive, visually appealing interfaces for your embedded projects. Whether you're designing IoT devices, wearables, or industrial equipment, this video lays the foundation for more advanced GUI development. Official Zephyr documentation: https://docs.zephyrproject.org/latest... Introduction to RTOS:    • Introduction to RTOS Part 1 - What is a Re...   ESP32-S3-DevKitC: https://www.digikey.com/en/products/d... Maker.io - https://www.digikey.com/en/maker DigiKey’s Blog – TheCircuit https://www.digikey.com/en/blog Connect with DigiKey on Facebook   / digikey.electronics   And follow us on X: https://x.com/digikey 0:00 Intro 1:01 Hardware Setup 1:35 Overview of Character Frame Buffer and LVGL 2:34 Dissecting Examples for LCD Driver and LVGL 10:19 Develop Demo: Devicetree Overlay for LCD Driver 15:45 Develop Demo: Configure LVGL in Kconfig 27:34 Develop Demo: Write Application C Code 37:25 Run LCD and LVGL Demo 38:04 Challenge: Add Animation 38:30 Conclusion