Projects Using Arduino IDE and the LVGL Graphics Library
Dr. Dogan Ibrahim
● This is an Elektor Publication. Elektor is the media brand of Elektor International Media B.V.
PO Box 11, NL-6114-ZG Susteren, The Netherlands Phone: +31 46 4389444
● All rights reserved. No part of this book may be reproduced in any material form, including photocopying, or storing in any medium by electronic means and whether or not transiently or incidentallw to some other use of this publication, without the written permission of the copyright holder except in accordance with the provisions of the Copyright Designs and Patents Act 1988 or under the terms of a licence issued by the Copyright Licencing Agency Ltd., 90 Tottenham Court Road, London, England W1P 9HE. Applications for the copyright holder’s permission to reproduce any part of the publication should be addressed to the publishers.
● Declaration
The author and publisher have used their best efforts to ensure the correctness of the information contained in this book. They do not assume or hereby disclaim any liability to any party for any loss or damage caused by errors or omissions in this book, whether such errors or omissions result from negligence, accident, or any other cause.
● ISBN 978-3-89576-694-7 Print ISBN 978-3-89576-695-4 eBook
Elektor is the world's leading source of essential technical information and electronics products for pro engineers, electronics designers, and the companies seeking to engage them. Each day, our international team develops and delivers high-quality content - via a variety of media channels (including magazines, video, digital media, and social media) in several languages - relating to electronics design and DIY electronics. www.elektormagazine.com
1.9.
Alternately Flashing
1.11. Project 4 – Rotating LEDs.
1.12. Project 5 – Changing the Brightness of an LED
1.13. Project 6 – 40 kHz Ultrasonic PWM
1.14. Project 7 – LED Color Wand
1.15. Project 8 – Chip Identity
1.17.
1.24. Project
1.27. Project 20 – Binary Up Counter with LEDs
1.28. Project 21 – Using microSD Cards – Writing to a Card
Project 22 – Using microSD Cards – Reading from a Card
Project 23 - Using the Serial Port (TX/RX)
Connecting to a Wi-Fi
1.33. Project 24 - Remote Control Using a Smartphone
Project 25 – Controlling
1.1. Overview
1.2. Useful Display Library
1.3. Displaying Various Shapes and Text
1.4. Using the Touchscreen
1.5. Project 1 – Controlling the On-board LEDs
1.6. Project 2 – Seconds Display .
1.7. Project 3 – Dice with Touch Button
1.8. Project 4 – Learning the Times Table
1.9. Project 5 – Touch Button Controlled Relay
1.10. Project 6 – On/Off Temperature Control
1.11. Project 7 – Creating and Displaying a Bitmap
1.12. Project 8 – Measuring
1.13. Project 9 – Measuring Distance Using the Time of Flight Distance Sensor.
1.14. Project 10 – Measuring the Height of a Person (Electronic Stadiometer)
1.15. Project 11 – Measuring Acceleration, Rotation, and Temperature Using the MPU-6050 Module
1.23. Project 2 – On/Off Relay Control with Two Buttons
1.24. Project 3 – Controlling the On-board RGB LED Module with Buttons
1.25. Project 4 – Display the Ambient Temperature
1.26. Project 5 – Matrix Keypad
1.27. Project 6 – Electronic Organ
1.28. Project 7 - Slider
1.29. Drawing a
1.30. Using Checkboxes
1.31. Using LEDs
1.32. Using a Message Box
1.33. Using a List
Chapter 6 • Bibliography
The
Preface
The ESP32 is probably one of the most popular microcontrollers used by many people, including students, hobbyists, and professional engineers. Its low cost, combined with rich features, makes it a popular device to use in many projects. The ESP32 microcontroller features ADC and DAC modules, Wi-Fi and Bluetooth modules, touch screen support, external and timer interrupts, a large number of GPIO ports, SPI and I2C modules, and many more highly sought features available only in expensive microcontrollers.
Recently, a board called the ESP 32 Cheap Yellow Display (CYD for short) has become available from manufacturers. This board includes a standard ESP32 microcontroller along with a 320x240 pixel TFT display. Additionally, the board provides several connectors for interfaces such as GPIO, serial port (TX/RX), power, and ground. The inclusion of the TFT display is a real advantage, as it enables users to design complex graphics-based projects without the need to use external LCD or graphic displays.
The advantages of using this board are:
• Affordability – A cost-effective way to add a display to your project without breaking the bank.
• Compact Size – Its small form factor makes it ideal for embedded systems and portable applications.
• Built-in Sensors – Some variants include additional sensors/modules, increasing versatility for various projects.
• ESPHome Compatibility – Works well with ESPHome, allowing easy integration with smart home setups.
• Graphics Support – Capable of displaying gauges, bar graphs, and other UI elements using powerful libraries such as the LVGL graphics library.
• High Resolution – Despite its affordability, it offers a decent pixel density for clear visuals.
• Touchscreen Functionality – Includes a touchscreen, making it interactive for user inputs.
• Expandable Storage – Features a microSD card slot for additional storage needs.
• RGB LED Integration – Includes an RGB LED for status indication or aesthetic effects.
• Modular Design – Can be seamlessly integrated into various projects, from smart home setups to IoT applications.
The book describes the basic hardware of the ESP32 CYD board and provides details of its on-board connectors. The main aim of the book is to teach readers how to use the onboard TFT display in various projects. It includes many basic, simple, and intermediatelevel projects based on the ESP32 CYD, using the highly popular Arduino IDE 2.0 integrated development environment. The book also includes projects that demonstrate how to use the popular LVGL graphics library with the ESP32 CYD. All the projects used in the book have been tested and work without requiring any modifications.
The author hopes that you enjoy reading the book and, at the same time, learn how to use the ESP32 CYD board and the LVGL graphics library in your future projects.
Dogan Ibrahim
Chapter 1 • The ESP32 Cheap Yellow Display
1.1. Overview
The microcontroller development board known as the Cheap Yellow Display is the wellknown ESP-WROOM-32 dual-core MCU with integrated Wi-Fi and Bluetooth capabilities. The board features a 2.8-inch TFT LCD display (Figure 1.1) with a resolution of 240x320 pixels and a resistive touch screen. Furthermore, the board includes a backlight control circuit, touch control circuit, speaker driver circuit, photosensitive circuit, and RGB-LED control circuit. Additionally, it includes a TF card slot, serial interface, DHT11 temperature and humidity sensor interface, and additional I/O ports. The board is reasonably cheap and ideal for most GUI-based projects, including IoT and other projects requiring built-in communications hardware.
The processor can be programmed using the Arduino IDE, ESP-IDE, MicroPython, and Mixly. In this chapter, we will look at the hardware details of this development board and also learn how to install the necessary software so that the board can be programmed from a PC.
The board will be referred to as CYD (Cheap Yellow Display) in the remaining parts of this book for convenience.
1.2. Features of the CYD Board
The basic features of the CYD board are:
• Dual-core ESP-WROOM-32 MCU
• Frequency up to 240 MHz
• 520 KB SRAM,
• 448 KB ROM
• 4 MB Flash memory
• 5 V operating voltage
• 115 mA operating current (approximately)
• 2.8-inch color TFT display with ILI9341 driver chip
• 240x320-pixel resistive touch screen display
• Built-in LDR (Light Dependent Resistor)
• Built-in RGB LED
• IO (GPIO) pins for external interface
• 50.0x86.0mm size
• Weight 50 g
• Display backlight control
• TF card interface for external storage
• Serial interface
• DHT11 temperature and humidity sensor interface
• IO port interface
• Programming via Arduino IDE, MicroPython, ESP-IDE, or Mixly
The board is distributed with the following items:
• 1 x ESP32 Dev Board with 2.8” Display and acrylic Shell
• 1 x Touch pen
• 1 x Connector cable
• 1 x USB cable
1.3. Hardware Components
Figure 1.2 shows the components on the board, except the TFT LCD display, which is plugged into the board.
Figure 1.1 The ESP32 Cheap Yellow Display
Figure 1.2 CYD Hardware Components
1.3.1.
TFT Display pins
The TFT display communicates via the SPI interface and is connected to the following ports of the MCU:
SPI Pin
TFT_MISO GPIO 12 MOSI
SCLK
CD
DC
RST
1.3.2. Touchscreen pins
TFT_MOSI GPIO 13
TFT_SCLK GPIO 14
TFT_CS GPIO 15
TFT_DC GPIO 2
TFT_RST -1
Backlight
GPIO 21
The touchscreen pins also use the SPI interface and are connected as follows: SPI
XPT2046_IRQ
XPT2046_MOSI
36
32 MISO
SCLK
CS
1.3.3. microSD card pins
XPT2046_MISO GPIO 39
XPT2046_CLK
XPT2046_CS
The microSD card interface used the SPI pins as follows:
SPI Pin GPIO
MISO GPIO 19
MOSI
SCLK
RGB pins
GPIO 23
GPIO 18
CS GPIO 5
The built-in RGB is connected to the following ports: RGB LED pin
Green LED
Blue LED
4
16
17
GPIO 25
GPIO 33
1.3.4. LDR pins
The LDR is placed in front of the board next to the LCD and is connected to port GPIO 34.
1.3.5. Speaker
The speaker is connected to GPIO 26 through a 2P 1.25 mm JST connector.
1.3.6. Boot button
The boot button is connected to GPIO 0.
1.3.7. Micro USB connector
The development board is powered and is also programmed through this connector, which is located on the side of the board.
1.3.8. Serial TX/RX connector
The serial TX/RX interface is on connector P1. The TX is connected to GPIO 1, and the RX is connected to GPIO 3.
1.3.9. External GPIO ports
There are two connectors on the board named P3 and CN1 for the external GPIO interface (see Figure 1.3). A total of four GPIOs are available through the following connectors:
Connector P3: GND, GPIO 35, GPIO 22, and GPIO 21
Connector CN1: GND, GPIO 22, GPIO 27, 3.3 V
Note: GPIO 22 is also used on the CN1 connector. GPIO 21 is additionally used as the display backlight. Although there are only four GPIO ports available to connect external hardware, it is possible to extend the GPIO count by using GPIO extender chips such as the MCP23017.
In the next chapter, we will learn how to install development software on our PC so that we can develop and upload programs to our CYD board.
Figure 1.3 P3 and CN1 connectors on the board
The
Test points
There are various test points on the board that can be useful while developing projects. A list of these test points and their functions are given below:
S1
GND (near USB-Serial)
S2 3.3 V 3.3 V (for ESP32)
S3 5 V 5 V (near USB-Serial)
S4 GND GND (for ESP32)
S5 3.3 V 3.3 V (for TFT)
JP0 5 V TFT (LDO, near USB socket)
JP0 3.3 V TFT (LDO)
JP3 5 V (ESP32 LDO, near USB socket)
JP3 3.3 V (ESP32 LDO)
Chapter 2 • Setting Up Development Software on the PC
1.4. Overview
Several programs can be used on a PC to develop and upload programs to the CYD. The Arduino IDE is probably the most commonly used program, as users familiar with Arduino should find it easy to develop programs using this IDE. MicroPython is also popular, mainly among people using Raspberry Pi or Raspberry Pi Pico processors. Users can also develop programs for the CYD using the ESP-IDF or Mixly. Mixly is a free, open-source graphical Arduino programming software that can be used to program the CYD. It is based on Google’s Blockly graphical programming language.
All of the projects in this book are based on the Arduino IDE version 2.x. Users with earlier versions of the Arduino IDE should upgrade before using the projects in this book.
In this chapter, the installation of the Arduino IDE for the CYD is explained step by step.
1.5. Installation of the Basic ESP32 Add-on in Arduino IDE
With the basic ESP32 add-on, you can develop programs for the CYD on your PC using the Arduino IDE. In this book, Arduino IDE version 2.3.4 is used. The steps are:
• Start the Arduino IDE
• Click Tools -> Board -> Board Manager
• Search for ESP32 and press the Install button after selecting esp32 by Espressif Systems version 3.x (Figure 2.1)
• The software should be installed after a few minutes. You should see the messages as shown in Figure 2.2 at the end of a successful installation.
Figure 2.1 Search for ESP32
• You should now be able to develop programs on your PC using the Arduino IDE and then upload the code to the CYD.
Note: The LCD display or the touchscreen cannot be used at this stage because the display and the touchscreen libraries have not been loaded into your Arduino IDE.
1.6. Installation of the TFT Display and Touchscreen Libraries
The TFT display and the touchscreen communicate with the CYD using the SPI interface and the SPI library. The steps to install the display and the touchscreen libraries are given in this section.
TFT library
• Start your Arduino IDE
• Click Sketch -> Include Library -> Manage Libraries
• Search for TFT_eSPI, select TFT_eSPI library by Bodmer, and click to install it (Figure 2.3). At the end of a successful installation, you should see the message: Installed TFT_eSPI@2.5.43.
Figure 2.2 Messages after a successful installation
Touchscreen library
• Start your Arduino IDE
• Click Sketch -> Include Library -> Manage Libraries
• Search for XPT2046_Touchscreen and select XPT2046_Touchscreen library by Paul Stoffregen, then click to install (Figure 2.4). At the end of a successful installation, you should see the message: Installed XPT2046_ Touchscreen@1.4.0.
Figure 2.4 Install the XPT2046_Touchscreen library
The Configuration file
The configuration file User_Setup.h should be configured correctly before the LCD library can be used. Download the raw configuration file from the following site:
Save the file with the name User_Setup.h and make the following changes to this file. Leave other statements as they are (an example file is available on the website of the book):
#define ILI9341_2_DRIVER
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
#define TFT_BL 21
#define TFT_BACKLIGHT_ON HIGH
#define TFT_INVERSION_ON
#define TFT_MISO 12
#define TFT_MOSI 13
#define TFT_SCLK 14
#define TFT_CS 15
#define TFT_DC 2
#define TFT_RST -1
#define TOUCH_CS 33
#define LOAD_GLCD
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define LOAD_GFXFF
#define SMOOTH_FONT
#define SPI_FREQUENCY 55000000
#define SPI_READ_FREQUENCY 20000000
#define SPI_TOUCH_FREQUENCY 2500000
#define USE_HSPI_PORT
Alternatively, you can use the simplified configuration file provided in Figure 2.5.
Now, start your Arduino IDE and follow these steps:
• Click File -> Preferences and make note of the Sketchbook location. In the author’s case, this was: C:\Users\HP\OneDrive\Documents\Arduino (Figure 2.6)
Figure 2.5 Configuration file
Figure 2.6 Arduino Sketchbook location
• Open the Sketchbook location folder in your File Explorer. You should see the TFT_eSPI folder there. Open this folder.
• Copy the User_Setup.h file that you edited earlier to the TFT_eSPI folder.
The ESP32 Cheap Yellow Display Book
Projects Using Arduino IDE and the LVGL Graphics Library
The ESP32 is probably one of the most popular microcontrollers used by many people, including students, hobbyists, and professional engineers. Its low cost, coupled with rich features makes it a popular device to use in many projects. Recently, a board called the ESP32 Cheap Yellow Display (CYD for short) is available from its manufacturers. The board includes a standard ESP32 microcontroller together with a 320x240 pixel TFT display. Additionally, the board provides several connectors for interfaces such as GPIO, serial port (TX/RX), power and Ground. The inclusion of a TFT display is a real advantage as it enables users to design complex graphics-based projects without resorting to an external LCD or graphics displays.
The book describes the basic hardware of the ESP32 CYD board and provides details of its on-board connectors. Many basic, simple, and intermediate-level projects are given in the book based on the ESP32 CYD, using the highly popular Arduino IDE 2.0 integrated development environment. The use of both the basic graphics functions and the use of the popular LVGL graphics library are discussed in the book and projects are given that use both types of approaches.
All the projects given in the book have been tested and are working. The block diagram, circuit diagram, and the complete program listings and program descriptions of all the projects are given with explanations. Readers can use the LVGL graphics library to design highly popular eye-catching full-color graphics projects using widgets such as buttons, labels, calendars, keypads, keyboards, message boxes, spinboxes, sliders, charts, tables, menus, bars, switches, drop-down lists, animations, and many more widgets.
Prof. Dr. Dogan Ibrahim has a BSc degree in Electronic Engineering, an MSc degree in Automatic Control Engineering, and a PhD degree in Digital Signal Processing. Dogan has worked in many industrial organizations before he returned to academic life. Prof. Ibrahim is the author of over 70 technical books and published over 200 technical articles on microcontrollers, microprocessors, and related fields. He is a Chartered Electrical Engineer and a Fellow of the Institution of the Engineering Technology. He is a certified Arduino professional.
