Learn LVGL: Build GUIs for ESP32 Projects (eBook)

Learn how to build Graphical User Interfaces (GUIs) for ESP32 Projects using LVGL (Light Versatile Graphics Library) with the Arduino IDE.

Learn LVGL Build GUIs for ESP32 Projects new eBook cover

GET THE EBOOK »

We are currently running an early Black Friday Deal on our LVGL eBook. You can grab it with a 22% discount during the next few days (the discount ends when the timer below hits zero).

Days
Hours
Minutes
Seconds

Get started using the LVGL library with the ESP32 to build graphical user interfaces for your IoT and home automation projects. Learn how to draw buttons, sliders, tables, charts, input fields, keyboards, and much more…

This eBook is compatible with the ESP32 Cheap Yellow Display (CYD) and the TFT 2.8 inch ILI9341 Resistive Touchscreen Display.

If you want to learn how to:

  • use and configure the LVGL library in Arduino IDE to program the ESP32;
  • create graphical user interfaces for your ESP32 displays;
  • get started using the LVGL library to create different types of widgets;
  • add widgets to the interfaces like buttons, and sliders to control outputs;
  • display data in different formats like text, vertical bars, tables, and charts;
  • create user input by drawing a keypad, keyboard, and other widgets;
  • draw a user interface that integrates with your MQTT system;
  • get data from the internet and display it on your screen;
  • create a web server that synchronizes in real time with the display interface;
  • display images and interact with them;
  • organize your widgets in multiple tabs;
  • and much more…

Then, our new eBook Learn LVGL: Build GUIs for ESP32 Projects is exactly what you need to get started building awesome GUIs for your IoT and Home Automation projects.

What is LVGL?

LVGL (Light and Versatile Graphics Library) is a free and open-source graphics library that provides a wide range of easy-to-use graphical elements for your microcontroller projects that require a graphical user interface (GUI).

LVGL new logo

It provides methods to easily create different objects: text labels, buttons, sliders, input fields, keyboard, custom styling, images, arcs, lines, animations, menus, tabs, layouts, tables, and much more…

What is a Cheap Yellow Display (CYD) Board?

ESP32 Cheap Yellow Display Wi-Fi Manager Example included in our LVG with the ESP32 eBook

The Cheap Yellow Display board is a TFT Touchscreen display LCD with an ESP32 development board included. Its main chip is an ESP32-WROOM-32 module and the display is a 2.8-inch TFT resistive touchscreen LCD with the ILI9341 driver.

It also comes with a microSD card interface, an RGB LED, an LDR, some exposed GPIOs, and all the circuitry to program and apply power to the board.

Recommended Board and Display

To follow this eBook, we recommend using an ESP32 Cheap Yellow Display 2.8 inch (ESP32‑2432S028R) with a resistive touchscreen (the eBook is currently not compatible with a capacitive touchscreen).

Recommended CYD Board to Follow LVGL with ESP32 eBook

Alternatively… You can get a TFT LCD Resistive Touchscreen Display – 2.8 inch ILI9341 240×320 and wire it to a “regular ESP32 board”.

Recommended TFT Display to Follow LVGL with ESP32 eBook

Most displays that use the ILI9341 driver and resistive touchscreen should be compatible with our projects. However, you must know how to set up the configuration file for your exact model. Different models will require different configuration files.

What’s inside the eBook?

This is a colorful ~450 page PDF with step-by-step instructions to create GUIs using different widgets for your ESP32 displays. It includes all the source code, schematic diagrams, and screenshots that are easy to follow. It comes with 7 Modules.

Each module breaks down a specific subject and allows for quick referencing in the future. It covers each subject with practical examples and projects:

  • Module 1: Getting Started—a quick introduction to the CYD board and compatible TFT touchscreen displays; instructions to set up and configure the required libraries.
  • Module 2: Text, Buttons, Switches, and Sliders—learn how to display basic widgets like text, buttons, switches, and sliders, and how to make something happen when you interact with them.
  • Module 3: Display Data from Sensors—display data in different formats: text, tables, vertical bars, and charts.
  • Module 4: User Input—covers different ways to get user input: keypad, keyboard, spinbox, and input fields.
  • Module 5: Integrating with MQTT—create an interface to publish to MQTT topics and display received messages by subscribing to topics.
  • Module 6: Integrating with Wi-Fi—get and display data from the internet and create a web server that synchronizes almost instantly with the widgets on the screen.
  • Module 7: More Features and Other Widgets—display custom images on the screen and make them clickable; create tabs so that you can organize your widgets on multiple screens.

Here’s what you’ll have access to when you get the eBook:

  • eBook in PDF format (7 Modules, 450 pages)
  • Source Code + Project Files (Arduino sketches, Configuration Files, and Node-RED flows)
  • Unlimited Free Updates (includes future eBook updates)
  • Access to a private Forum to ask questions
  • Exclusive access to our Facebook group community

Table of Contents

The eBook comes with 7 Modules. Each module is dedicated to a specific subject. Here’s a description of the complete table of contents.

Module 0: Introduction

LVGL: Creating GUIs for the ESP32 eBook – Module 0 Introduction

This Module is a quick introduction to the eBook, providing a general overview of the Modules we’ll cover, the learning objectives, instructions on how to follow the eBook, recommended prerequisites, and the parts required to complete the projects.


Module 1: Getting Started

LVGL: Creating GUIs for the ESP32 eBook – Module 1 Getting Started

This module introduces you to the ESP32 Cheap Yellow Display and the 2.8-inch TFT touchscreen LCD with the ILI9341 driver chip with a resistive touchscreen. You’ll prepare all the libraries and software required to start building GUIs using the LVGL library. Finally, you’ll learn to display text on the screen and detect touch.

  • 1.1 – Introducing the ESP32 CYD Board
  • 1.2 – ESP32 CYD Board Pinout
  • 1.3 – Introducing the 2.8 TFT ILI9341 Touchscreen Display
  • 1.4 – Quick Introduction to LVGL
  • 1.5 – Installing Arduino IDE 2
  • 1.6 – Testing the Installation
  • 1.7 – Installing Libraries
  • 1.8 – Testing the Display
  • 1.9 – Testing the Touchscreen
  • 1.10 – Calibrating Your Touchscreen
  • 1.11 – Troubleshooting

Module 2: Text, Buttons, Switches, and Sliders

LVGL: Creating GUIs for the ESP32 eBook – Module 2 Basic Widgets

You’ll learn how to display basic widgets on the screen: text, buttons, switches, and sliders, and how to make something happen when you interact with them like changing something on the interface and controlling outputs.

  • 2.1 – Creating a Basic Button
  • 2.2 – Creating a Button with Events
  • 2.3 – Two-State Button and Toggle Switches
  • 2.4 – Styling the Buttons
  • 2.5 – Creating a Basic Slider
  • 2.6 – Putting it All Together

Module 3: Display Data from Sensors

LVGL: Creating GUIs for the ESP32 eBook – Module 3 Display Data

In this Module, you’ll learn how to connect a sensor to the CYD board and how to get and display readings from the sensor. You’ll learn to display the readings in different formats: text, table, vertical bars, and chart.

  • 3.1 – Basic Temperature Display
  • 3.2 – Display Data from Sensors on Vertical Bars
  • 3.3 – Display Sensor Data on a Table
  • 3.4 – Display Sensor Data on a Chart
  • 3.5 – Display Temperature on a Curved Gauge

Module 4: User Input

LVGL: Creating GUIs for the ESP32 eBook – Module 4 User Input

In this module, you’ll learn how to get user input. We’ll cover drawing a keypad to build a basic locker, a spinbox to set the threshold value to create a thermostat, and input fields with a keyboard to create a Wi-Fi Manager.

  • 4.1 – Input Keypad – Basic Locker
  • 4.2 – Temperature Sensor Threshold with Input Field (Thermostat)
  • 4.3 – Wi-Fi Manager (Inserting Your Network Credentials)

Module 5: Integrating with MQTT

LVGL: Creating GUIs for the ESP32 eBook – Module 5 MQTT

Learn how to integrate MQTT into your project. Publish messages to MQTT topics by clicking on buttons on the screen and display received messages by subscribing to MQTT topics.

  • 5.1 – Introducing MQTT
  • 5.2 – Set Up Mosquitto MQTT Broker
  • 5.3 – Installing MQTT Libraries
  • 5.4 – Introducing and Installing Node-RED
  • 5.5 – Setting Up the Node-RED Flow
  • 5.6 – Publish MQTT Messages (Button, Toggle Button, and Slider)
  • 5.7 – Subscribe to MQTT Messages and Display on the Screen
  • 5.8 – MQTT Publish and Subscribe (Synchronize with Node-RED)

Module 6: Integrating with Wi-Fi

LVGL: Creating GUIs for the ESP32 eBook – Module 6 Wi-Fi

This Module covers how to get data from the internet and display it on the screen. You’ll learn how to add a button to request data and add data to a table. Finally, you’ll learn how to create a web server that synchronizes in real time with the display interface.

  • 6.1 – Display Data from the Web
  • 6.2 – Synchronizing a Web Server with the CYD Screen

Module 7: More Features and Other Widgets

LVGL: Creating GUIs for the ESP32 eBook – Module 7 More Features and Other Widgets

This Module covers how to display custom images on the screen and how to make them clickable so that you can interact with them. We’ll also cover how to display tabs so that you can organize multiple screens with different widgets on the GUI.

  • 7.1 – Displaying an Image on the Screen
  • 7.2 – Display and Interact with Images
  • 7.3 – Creating Tabs (Multiple Screens)

What You’ll Learn?

Here’s a quick summary of what you’ll learn by following the examples in this eBook:

  • Use the LVGL library to create GUIs for ESP32 projects;
  • Create text labels, buttons, sliders, tables, charts, vertical bars, text areas for user input, and more.
  • Build interfaces to control outputs using buttons and sliders.
  • Display sensor readings on the screen in different formats: text labels, vertical bars, charts, and tables.
  • Add user input using text fields.
  • Create a keypad and keyboard for user input.
  • Request data from the internet and display it on the screen.
  • Synchronize the screen interface with a web server page.
  • Integrate MQTT in your projects: click on buttons to publish messages and display received messages by subscribing to topics.
  • Display and interact with images.
  • Create multiple tabs.

Prerequisites (recommended but not mandatory)

To follow this eBook, we recommend that you be familiar with programming the ESP32 using the Arduino IDE. You should know basic concepts such as controlling outputs like LEDs, reading inputs, and using PWM. You should also be familiar with basic circuits, such as wiring an LED to the ESP32.

Which Displays/Boards Were Tested with this eBook?

All examples and projects in this eBook were tested with the following hardware:

  • Recommended: ESP32 Cheap Yellow Display 2.8 inch with Resistive Touchscreen (ESP32 2432S028R)
  • Optional: TFT LCD Resistive Touchscreen Display – 2.8 inch ILI9341 240×320 + ESP32 DOIT board (or similar ESP32 model)

Invitation to Join our Private Forum!

This eBook comes with an opportunity to join our private Forum of like-minded people where you can ask questions about the eBook or other related subjects. You’ll get direct help from us (Rui and Sara) or from other active members of the community.

Download the eBook

  • New eBook – updated September 2, 2024
  • 7 Modules
  • PDF eBook with 450 pages
  • Source code (Arduino sketches)
  • Parts list
  • Step-by-step instructions
  • Unlimited updates
  • Exclusive access to our private forum
  • English language
  • Created by Rui Santos and Sara Santos
Learn LVGL Build GUIs for ESP32 Projects new eBook cover

GET THE EBOOK | $47 $37 USD »

Click here to get the eBook | $47 $37 USD

We are currently running an early Black Friday Deal on our LVGL eBook. You can grab it with a 22% discount during the next few days (the discount ends when the timer below hits zero).

Days
Hours
Minutes
Seconds

Note: after your purchase, you receive an email with a username and password that you use to access the members’ area and download the PDF eBook.

Have questions? Email me at https://randomnerdtutorials.com/support anytime for any reason.

You won’t regret it. My 60-day money-back guarantee backs up every word in this message. Proceed with confidence. See you inside,

– Rui Santos and Sara Santos

Backed by a 60 day 100% money-back guarantee

If you don’t like the course, I don’t want your money. Seriously, that’s why I offer a 60 days money back guarantee. Email me here and I will promptly refund all your money. No questions, no hassles – it’s that simple.

Frequently Asked Questions

We recommend an ESP32 Cheap Yellow Display (CYD) 2.8 inch (ESP32‑2432S028R) with a resistive touchscreen.

Alternatively, you can get a TFT LCD Touchscreen (resistive) Display – 2.8 inch ILI9341 240×320 and wire it to a “regular ESP32 board”.

Other display modules with the ILI9341 driver and resistive touchscreens should also be compatible, but we didn’t test them and we don’t have the configuration files for those different modules.

No. At the moment, our examples are only compatible with resistive touchscreen.
To program the ESP32, we’ll use Arduino IDE 2 with the ESP32 Arduino Core version 3. To create the graphical user interfaces, we’ll use the LVGL library.
No. LVGL is a free to use open-source library.
Throughout the eBook we are using the latest version of the LVGL 9.
No. SquareLine Studio is not covered in this eBook.

Most displays that use the ILI9341 driver and resistive touchscreen should be compatible with our projects. However, you must know how to set up the configuration file for your exact model. Different models will require different configuration files.

We only cover the configuration files for the:

  • ESP32 Cheap Yellow display 2.8 inch (ESP32 2432S028R)
  • TFT LCD Touchscreen Display – 2.8 inch ILI9341 240×320.
Yes, our tutorials are step-by-step, so you should be able to follow along. However, we highly recommend that you are familiar with basic concepts such as how to upload code to the ESP32 board, control outputs, and retrieve data from basic sensors. We have several eBooks and free tutorials dedicated to the ESP32 that you can choose from.

The following list shows all the parts required to complete the projects and examples in this eBook:

  • ESP32 Cheap Yellow Display 2.8 inch with Resistive Touchscreen (ESP32 2432S028R)
  • BME280 sensor
  • Raspberry Pi (for the MQTT Module):
    • MicroSD card for the Raspberry Pi OS (at least 32GB class 10)
    • Raspberry Pi power supply (5V DC 2A power supply, USB-C)

Or, if you want to use a separate TFT LCD with a regular ESP32, you need:

  • TFT LCD Resistive Touchscreen Display – 2.8 inch ILI9341 240×320
  • ESP32 DOIT board (or similar ESP32 model)
  • BME280 sensor
  • 2x LEDs
  • 2x 220 Ohm resistor
  • LDR (light-dependent resistor)
  • Jumper wires
  • Breadboard
  • Raspberry Pi (for the MQTT Module):
    • MicroSD card for the Raspberry Pi OS (at least 32GB class 10)
    • Raspberry Pi power supply (5V DC 2A power supply, USB-C)

Currently, there’s very little information on how to get started with LVGL on the ESP32 boards. If you search for examples online, you’ll see there is not much information and most examples don’t work. All our examples were tested with the latest version of the LVGL 9 library and the latest ESP32 core (version 3).

If you want to start using LVGL to create awesome GUIs for your ESP32 projects, this is the getting started guide that you need.

If you still have questions after reading this page please email us here. We’ll do our best to answer your questions as quick as possible.

Meet the Authors

Rui Santos
RandomNerdTutorials.com
Hi! I’m Rui Santos, the founder of the Random Nerd Tutorials blog. I have a master’s degree in Electrical and Computer Engineering from FEUP and I’ve been running the RNT blog for more than 10 years. I’ve written hundreds of tutorials covering the usage of different microcontrollers (ESP32, ESP8266, Raspberry Pi, Arduino, and more) on the Internet of Things and Home Automation fields. We also self-published about a dozen eBooks on these subjects, helping thousands of students, engineers, and hobbyists passionate about electronics all over the world.
Sara Santos
RandomNerdTutorials.com
Hi! I’m Sara Santos, and I work with Rui at Random Nerd Tutorials since 2015. I have a master’s degree in Bioengineering from FEUP. I create, write and edit the tutorials and articles for the RNT and Maker Advisor blogs, and I’ve written several of the eBooks available on the RNT blog. I also help you by answering your questions on our private forum and on our blog’s comments section. I love books, writing, cats, and a hot cup of tea. I also love travel and writing about our travel adventures on our travel blog (tripiwi.com).

See what others are saying about our work

(…) I have 11 of your courses and love all of them. I recommend your courses and web site in all my correspondence for anyone in learning Arduino, ESP32, MicroPython, RaspPi subjects. Even though this is just a hobby for me, your stuff has given me more enjoyable learning than any other authors on this – for over 30 years. Thanks for all you do.

William Taylor

Thank you Rui. Anyone wondering whether you bring value can rely on my word. I’ve purchased hundreds of books over a 45 year career as engineer and entrepreneur. NONE of these books have approached your excellent method of teaching a subject. You have a rare gift as a teacher. Glad to have made the purchases.

Paul

I want to congratulate you on the manuals you have created, they are the best of the best that I have seen in many years. (… ) Your explanations are very clear and very detailed, as if you were a teacher…

Tino Fernández

I purchased all of your courses. I have completed the ESP32-CAM Projects and SMART Home courses and have never seen such great e-Books for Raspberry Pi, Arduino and ESP microcontrollers before. Your chosen modules show great possibilities and the step by step instructions are very clear, very useful. This saved me a lot of frustration and I could quickly achieve great results. Thank you very much.

Roland Branstaetter

Thank you for some incredibly useful eBooks and tutorials. I have learnet so much about ESP8266, NodeMCU etc and now Pi Pico. Such a valuable resource.

Paul Bartlett

I want to thank you for the high quality of your projects. Too many others just list a series of tasks but not what to do when they do not go as planned. The detail that you have put into the writeups is amazing. I am working with my 10 year old grandson to help this interest in electronics and software. It would be much harder without your guides.

Doug Hogg

Thank you. I’ve bought two of your course books and they really accelerate the learning curve with the result I wanted.

Paul Kroshko

Thank you! Your articles are always exactly what I need when I order a new board and want to get up-to-speed working with it right away.

David Mack

AS SEEN ON…

FEATURED LOGOS
Learn LVGL Build GUIs for ESP32 Projects new eBook cover

GET THE EBOOK | $47 $37 USD »

Click here to get the eBook | $47 $37 USD