Introduction to esp32 color display: I want colorful black and colorful white

Time:2021-2-22

Introduction to esp32 color display: I want colorful black and colorful white

I’m sorry, this course uses the cover of killing Matt, but this picture fully expresses the characteristics of the color screen: it can display colorful colors.

summary

Friends who have been following this series of tutorials should know that in the previous courses, we basically used the OLED display of the control board to display the content, but the OLED display of the control board is a monochrome screen. After watching the monochrome display for a long time, are you tired of it?

So from the beginning of this issue, I will take you to play with color display through several tutorials. This is the first issue of color displayIntroduction to esp32 color screen display: I want colorful blackThrough the study of this course, I will take you to the use of color screen.

Introduction to esp32 color display: I want colorful black and colorful white

Because a screen has been connected to the control board, the hardware used in this course is not the control board, but another esp32 development board: dfrobotFireBeetle-ESP32. As for the introduction of this development board, I have already introduced it in the first issue of this series. You can go directly to the first issue to check: esp32 overview and Arduino software preparation.

Introduction to esp32 color display: I want colorful black and colorful white

Why choose this development board? Because dfrobot specially designed a simple and convenient expansion board for this development board, it will be particularly convenient for the later project wiring; and dfrobot also designed a good-looking vector diagram for it. As a color control, how can we draw the wiring diagram without it! Of course, the most important reason is that in addition to the control board, I have such a development board of esp32 (Why don’t you hit me for such a farfetched reason

Introduction to esp32 color display: I want colorful black and colorful white

If you choose other esp32 development board, there is no problem, and the wiring method and program are fully compatible.

Introduction of common color screen

With esp32 development board, which color screens can be used? In fact, there are many choices in terms of size, resolution and driver chip type. The most commonly used color screen sizes are 1.5 inch, 2.0 inch, 2.4 inch, 2.8 inch, 3.2 inch, etc.; the resolution types are 128 × 160, 240 × 240, 240 × 320, etc.; the driver chip models are st7735, st7789, ili9341, etc. As shown in the figure below, it is a common color screen in maker production.

Introduction to esp32 color display: I want colorful black and colorful white
(picture from: https://www.instructables.com… )

If you want to know more about the color screen selection, you can go directly to instructables to see the following evaluation article. It’s very detailed. There’s no need to repeat the wheel here.

Select Color Display for ESP32:https://www.instructables.com/id/Select-Color-Display-for-ESP32/

In this tutorial, I use a 2.4-inch TFT_ LCD color screen, its driver chip is ili9341, the resolution is 240 × 320, as shown in the figure below.

Introduction to esp32 color display: I want colorful black and colorful white

The detailed parameters of this screen are shown in the table below:

Introduction to esp32 color display: I want colorful black and colorful white

This color screen adopts SPI connection mode, and the pin definition is as follows:

Introduction to esp32 color display: I want colorful black and colorful white

SPI (serial peripheral interface) is a high-speed full duplex communication bus. Essentially, like UART serial port and I2C used in previous courses, it is a communication protocol.

SPI communication principle is very simple, it works in master-slave mode, this mode usually has a master device and one or more slave devices. SPI communication uses three buses (SCK, MoSi, MISO) and chip selection line (CS or SS)

  • Miso: master input slave output;
  • Mosi: master output slave input;
  • SCK: serial clock, which is generated by the master device;
  • CS: chip select, slave enable signal, controlled by master.

Color screen driver library

For different color screen driver chips, there are many kinds of commonly used Arduino color screen driver libraries. In the library manager of Arduino IDE, search “TFT” to see many color screen driver libraries, such as:

  • Arduino-ST7789-Library:https://github.com/ananevilya…
  • Adafruit-ST7735-Library:https://github.com/adafruit/A…
  • TFT_eSPI:https://github.com/Bodmer/TFT…

The library used in this tutorial isTFT_eSPIThe reasons for selecting this library are as follows:

  • The database has a large number of stars on GitHub, and it is still actively updated, so its reliability and professional type are guaranteed;
  • Support a variety of commonly used driver chips, such as st7735, st7789, ili9341, etc., with good compatibility;
  • It is said that the performance of this library is also the best. I don’t have detailed research and testing here, and it’s not important for most users.

If there is no special explanation, we will take this library as an example.

TFT_ Installation of ESPI library files

Open the library manager in Arduino and searchTFT_eSPI, and then click Install.

Introduction to esp32 color display: I want colorful black and colorful white

TFT_eSPIAlthough the library has many advantages, there may be a trouble for ordinary users, that is, after installing the library, we need to configure the library for different color screens.

Go to the installation directory of Arduino library file and openTFT_eSPIThe location of the library. Take the windows system 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 the green version of Arduino, the installation directory of the library is generally as follows:

< Arduino installation directory > < Arduino / portable / sketchbook / libraries / TFT_ eSPI

Then open it in the library file directoryUser_Setup.hThis file, according to their own screen type and driver chip type corresponding settings, here I use 2.4 inch ili9341 TFT LCD color screen as an example. If you are patient and want to study all kinds of setting options carefully, you can also read the instructions in this file carefully and set it according to its examples. If you think a lot of English looks troublesome, you can set it directly according to my tutorial.

The first thing you need to set is the type of driver chip for the color screen. The driver chip used for this color screen is ili9341. So we note out other chips here, leaving only one#define ILI9341_DRIVERThis line is shown in the following figure:

Introduction to esp32 color display: I want colorful black and colorful white

Then set the IO pin of the color screen connection, and note out the default pin settings shown in the figure below

Introduction to esp32 color display: I want colorful black and colorful white

Then change the pin setting 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)

As shown in the figure below:

Introduction to esp32 color display: I want colorful black and colorful white

After modificationUser_Setup.hThe documents are as follows:

Introduction to esp32 color display: I want colorful black and colorful white

Wiring diagram

According to the front TFT_ The connection between esp32 and color screen is relatively simple, just follow the corresponding connection in the code.

Note: for the pin number in this code, I use the iox number instead of the DX number, because the iox number is applicable to all esp32 development boards. The corresponding relationship between iox and DX numbers of firebee-esp32 development board is shown in the following figure:

Introduction to esp32 color display: I want colorful black and colorful white

The wiring diagram is as follows:

Introduction to esp32 color display: I want colorful black and colorful white

Hello color screen

After all these are set up, we can happily write the program and check the effect!

In order to experience the display effect of color screen faster, this article will not explain the programming and code of color screen for the time being. I will upload TFT to you first_ ESPI library comes with some sample programs to see the effect. The path of color screen sample program is as follows:

Arduino menu bar → file → example → TFT_ eSPI

As shown in the figure below:

Introduction to esp32 color display: I want colorful black and colorful white

Then randomly select a few sample programs and upload them to esp32 to see the effect.

Note: note that since I converted the video to GIF, it may look a little bit stuck. The actual effect is very smooth.

Introduction to esp32 color display: I want colorful black and colorful white

Introduction to esp32 color display: I want colorful black and colorful white

Introduction to esp32 color display: I want colorful black and colorful white

Introduction to esp32 color display: I want colorful black and colorful white

Introduction to esp32 color display: I want colorful black and colorful white

Introduction to esp32 color display: I want colorful black and colorful white

Introduction to esp32 color display: I want colorful black and colorful white

Introduction to esp32 color display: I want colorful black and colorful white

After watching these “colorful black”, do you want to start a color screen and write code to play? Don’t worry, the next tutorial, officially teach you color screen code programming!

summary

In this chapter, we learn:

  • Common color screen types and common color screen driver library;
  • TFT_ The setting method of ESPI driver library;
  • Connection method between color screen and esp32;
  • Upload the program to view the display effect of the color screen.

This is just the introduction of color screen series. Later, I will write a few more articles to introduce color screen programming in detail. If you are interested, you can like it. See you next time!