Sorry for the ugly cover for this lesson, but this picture really illustrates the nature of color screens: they can display all kinds of colors.
An overview of the
For those of you who have been following this series of tutorials, we’ve been using the OLED display on the dashboard for the last few sessions, but the OLED display on the dashboard is a monochrome display.
So starting with this installment, I’m going to walk you through a few tutorials on how to play with color screens. This is the first episode of ESP32 color display: I want a colorful black, through the content of this course, I will take you to the use of color screen.
Since there is already a screen attached to the dashboard, the hardware used for this lesson is not the dashboard, but another ESP32 development board: FireBeetle-ESP32 by DFRobot. I covered this development board in the first installment of this series, and you can go directly to the first installment: ESP32 Overview with Arduino Software Preparation.
Why choose this development board? Because DFRobot designed a simple and convenient expansion board specifically for this development board, it will be especially convenient when wiring later projects; And DFRobot also designed a nice vector map for it, as a horizontal control of the appearance, how can the subsequent wiring diagram draw it! Of course, one of the most important reasons is that I have only one DEVELOPMENT pad for ESP32 in addition to the master pad… (Such a far-fetched reason, you come to hit me)
If you choose another ESP32 development board, there is no problem, the wiring methods and procedures are fully compatible.
Common color screen introduction
With the ESP32 development board, what color screens are available? Regardless of size, resolution, type of driver chip, there are a lot of choices. Some of the most commonly used color screen sizes are 1.5 inches, 2.0 inches, 2.4 inches, 2.8 inches, 3.2 inches, etc.; Resolution types include: 128×160, 240×240, 240×320, etc. Driver chip models are ST7735, ST7789, ILI9341 and so on. As shown in the figure below, it is a common color screen made by some makers.
www.instructables.com/id/Select-C…
For a detailed guide to color screen selection, go directly to Instructables for the following review, which is so detailed that you won’t have to re-invent the wheel here.
Select a Color Display for ESP32:www.instructables.com/id/Select-C…
In this tutorial, I use a 2.4-inch TFT_LCD color screen, which is driven by ILI9341 with a resolution of 240×320, as shown in the picture below.
The detailed parameters of this screen are shown in the following table:
This color screen adopts SPI wiring mode, and the pins are defined as follows:
Serial Peripheral Interface (SPI) is a high-speed full-duplex communication bus. In essence, it is a communication protocol, like UART serial port and I2C used in previous courses.
The communication principle of SPI is simple. It works in master-slave mode, which usually has one master device and one or more slave devices. SPI communication uses three buses (SCK, MOSI, MISO) and chip selection (CS or SS) :
- MISO: Master Input Slave Output: data Input from the Master device and data Output from the Slave device.
- MOSI: Master Output Slave Input: data Output from the Master device and data Input from the Slave device.
- SCK: Serial Clock, Clock signal, generated by the master device;
- CS: Chip Select, the slave device enable signal, controlled by the master device.
Color screen driver library
For different color screen driver chips, there are many common Arduino color screen driver libraries to choose from. In the Library manager of Arduino IDE, search “TFT” and you can see many color screen driver libraries, such as:
- Arduino-ST7789-Library:github.com/ananevilya/…
- Adafruit-ST7735-Library:github.com/adafruit/Ad…
- TFT_eSPI:github.com/Bodmer/TFT_…
The library used in this tutorial is TFT_eSPI, which was chosen for the following reasons:
- This library has a large number of Star users on GitHub, and is still being updated actively, so its reliability and professionalism are guaranteed.
- Support a variety of common driver chips, such as ST7735, ST7789, ILI9341, etc., good compatibility;
- This library is also said to have the best performance. I haven’t examined and tested it in detail here, and it’s not important to most users.
We’ll use this library as an example for the color screen series of tutorials that follow, unless otherwise specified.
TFT_eSPI library file installed
Open the library manager in Arduino, search for TFT_eSPI, and click Install.
TFT_eSPI library has many advantages, but there may be a troublesome place for ordinary users, that is, after installing the library, we need to configure the library for different color screens before using it.
Go to the Arduino library installation directory and open the TFT_eSPI library. Take Windows as an example, the installation directory of the library is generally as follows:
C:\Users\< user name >\Documents\Arduino\libraries\TFT_eSPI
If you are using Arduino green, the installation directory of the library is:
<Arduino installation directory > Arduino\portable\ Sketchbook \libraries\TFT_eSPI
Then open the file user_setup. h in the library file directory and set it accordingly according to the screen type and driver chip type. Here I use the 2.4-inch ILI9341 TFT LCD color screen as an example. If you are patient and want to explore the various Settings options, you can also read the instructions in this file and follow the examples. If you think a lot of English seems too much trouble, you can just follow my tutorial Settings.
The first thing we need to set is the driver chip type of the color screen. The driver chip used for this color screen is ILI9341, so here we comment out other chips, leaving only the line #define ILI9341_DRIVER, as shown below:
Next set up the IO pins for the color screen connection by commenting out the default pins as shown below:
Then change the pin Settings to:
// FireBeetle ESP32
#define TFT_MISO 19
#define TFT_MOSI 23 // fixed pin, SDA -> MOSI (IO23)
#define TFT_SCLK 18 // fixed pin, SCL -> SCK (IO18)
#define TFT_CS 27 // Chip select control pin D4 (IO27)
#define TFT_DC 25 // pin of your choice D2 (IO25)
#define TFT_RST 26 // pin of your choice D3 (IO26)
Copy the codeAs shown below:
The user_setup. h file is as follows:
The wiring diagram
According to the previous TFT_eSPI driver library Settings, ESP32 and color screen wiring is relatively simple, as long as the corresponding wiring in the code can be.
Note: in this code, I use the IOx number, not the Dx number, because the IOx number is applicable to all ESP32 development boards. The IOx and Dx numbers of the FireBeetle-ESP32 development board are shown below:
The wiring diagram is as follows:
Hello, color screen
With all this set up, we’re ready to have fun writing programs and looking at the effects!
In order to experience the display effect of color screen more quickly, this paper will not explain the programming and code of color screen for the time being. I will first upload some sample programs of TFT_eSPI library to you to see the effect. The path of the color screen sample program is:
Arduino menu bar → Files → Examples →TFT_eSPI
As shown below:
Then pick a few sample programs and upload them to ESP32 to see how they look.
Note: Note that since I converted the video into a GIF, it may look a little bit sluggish, but the result is smooth.
After seeing all this “multicolored black,” do you immediately want to grab a color screen and write some code? Don’t worry, the next tutorial, formally teach you color code programming!
conclusion
In this chapter, we learned:
- Common color screen type and common color screen driver library;
- TFT_eSPI driver library setting method;
- Color screen and ESP32 wiring method;
- Upload procedures to view the display effect of the color screen.
This is just the introduction of the color screen series, the back will also write a few special programming on the color screen in detail, if you are interested, you can collect points like, we will see you next time!