LCD is a commonly used peripheral in projects. One of the advantages of developing based on Arduino is that many related libraries are available, which is very convenient for project development or preliminary solution verification. The disadvantage is that it is less flexible.Arduino supports a lot of hardware. In this lecture, we mainly explain the display of pictures based on ESP8266 and ESP32.Note: I use ESP8266 and ESP32 as an example to explain. In fact, you can choose one according to your own MCU. The method and principle are the same.I have published a tutorial on the Arduino environment for ESP8266 and ESP32 before, so I won't say much here. Students who don't understand can read my previous blog first.esp8266 development tutorial (based on Arduino) - environment installation ESP32-S2 Arduino development environment constructionOpen the Arduino IDE, and then open Tools -> Manage Libraries... Enter the name of the library to be installed in the search box, find the corresponding library, and click Install.The way to drive the LCD is generally to use SPI, parallel port or IIC. Here I take SPI as an example.I also published a blog about LCD driver explanation before, if you don't understand anything, you can also read it.esp8266 application tutorial - TFT LCDAfter installing the TFT_eSPI library, you need to configure the underlying interface according to the actual situation of your own circuit.The libraries installed by Arduino are generally in the C drive document directory, such as: C:\Users\xxx\Documents\Arduino\libraries (xxx is your computer's username)Find the TFT_eSPI folder, open the User_Setup.h file, and modify the following parameters.1) Driver IC Open the corresponding macro according to the LCD driver IC you use.Note that only one of these drivers can be selected to open, and those that are not used should be commented out.2) RGB data format RGB format refers to the arrangement of pixel color data, generally BGR and RGB. The difference is that the data is high-order or low-order. This is mainly used for image display. Which one to use? The format mainly depends on how the content you want to display is arranged. If you are not sure, you can leave it unchanged. If the color is wrong during debugging, you can change it.3) The pixel is modified according to the pixel of your own screen, or you can not change it first, and then change it directly when you apply it later.4) GPIO sets the pins according to its own circuit. Except for a few necessary pins, some pins may not be configured. For example, RST can be connected to the RST of the MCU through hardware, and the software can be configured to -1.BL backlight can also be directly controlled by hardware.There are also several pins like ESP8266 that do not need to customize the SPI. It uses the ESP8266 hardware SPI interface by default, and your wiring can be consistent.Note: Only one of the same GPIO definition can be opened, and some open ones should be commented out by default.Special note: If you are using ESP32, TFT_eSPI is recommended to use version 2.4.0 or later, because the pin definitions of ESP32 in previous versions are divided into HSPI and VSPI, and VSPI is used by default. If you want to use HSPI, you need to open the USE_HSPI_PORT definition, but This framework is not compatible and is not suitable for ESP32-S2 and ESP32-C2. Versions 2.4.0 and above have canceled this definition and are directly defined by pin numbers, so that there is no need to distinguish between HSPI and VSPI.The pins of esp8266 are shown in the figure below, and I will not post them for esp32, they are all similar.5) You can use these font libraries that come with TFT_eSPI directly. If you have your own font library, you can also comment it out.If there is enough flash space, it doesn't matter if this code is added or not.6) SPI communication rate The SPI communication rate is generally the default. The default rate is generally sufficient. If you need faster, you can modify it yourself.7) Special definition of ESP32 TFT_eSPI old version The SPI interface of ESP32 is divided into two types: HSPI and VSPI. By default, VSPI is used. If you want to use HSPI, you need to open the USE_HSPI_PORT definition. If you only use ESP32, then this framework is no problem. .But I needed to switch from ESP32 to ESP32-S2 because of the project. It turned out that ESP32-S2 does not have HSPI and VSPI, and all interfaces are FSPI, so I have to change many things at the bottom to use it normally.However, now the TFT_eSPI library version 2.4.0 and above has corrected this problem. It is compatible with ESP32-S2 and ESP-C3, and the definition of USE_HSPI_PORT has been cancelled. The SPI interface is defined by the GPIO pin number.Therefore, I suggest to use the new version of the library, the compatibility is better, and there is no need to consider whether to use HSPI or VSPI.After the TFT_eSPI library is configured, you can first burn a simple program to test whether the hardware and code can run normally.PS: Of course, it is also possible to display the picture directly after the picture data is done.Image data can be saved and displayed in the form of a bitmap or in a jpg format.The difference is that the memory occupied by the bitmap method is fixed, only related to the pixel size, while the memory of jpg under the same pixel is generally smaller, and the specific memory size is related to the color complexity of the image, but the disadvantage of jpg is that Decoding is required, while bitmap data does not.There are two ways to choose, you can use it according to your needs.For bitmaps, you can use the TFT_eSPI library directly, and the jpg format also needs to be decoded using the JPEGDecoder library.Find a picture on the Internet, use WIN10's own picture editor or other picture processing software to process the picture, cut out the content you want to display, and then adjust the resolution to a suitable size, the picture is jpg, bmp or Other formats can be saved.For example this picture below: This is a picture in 240x240 resolution.There are many tools for bitmap data, such as: Img2Lcd, lcd-image-converter, etc.The tool can be downloaded from the link below, or you can find it yourself online.Tool link: https://pan.baidu.com/s/1f2rgD1a9PY-_hboPdbfaow Extraction code: 4h6h1) How to use Img2Lcd to open a picture.The settings are configured as follows: Output data type: C language array Scanning method: Horizontal scanning Output grayscale: 16-bit true color Maximum width and height: Customize the following options, just check "MSB First" .(Explanation: High bit first means that the data is exported in GBR mode. If it is not checked, it is exported in RGB mode. Which one you use actually depends on how the function that displays the picture later processes the data. Keep it consistent. Yes.) After configuring the parameters, click Save and save it as a .h file.Save this header file, it will be used later.The data format of the saved header file is as follows: We can change the definition of this array, because the data of the picture is generally more, if all the data is stored in RAM, the memory may be insufficient, so we can store the data in the flash.Before modifying the definition:2) lcd-image-converter uses the method to open an image, click Options -> Conversion... After the parameters are configured, click "Show Preview" to see the bitmap data after image conversion.This software cannot directly generate header files, you need to create a new header file yourself, then define an array, and then copy the data into it.The conversion tool I used here is a code found on GitHub, you can download it from the link below if you want.This tool is a bit cumbersome to use, and if you have a better tool, you can also recommend it to bloggers.Tool link: https://pan.baidu.com/s/1f2rgD1a9PY-_hboPdbfaow Extraction code: 4h6hStep 2: Open the run window of the computer (win10 can use the win+R shortcut), enter "cmd" to open the command window.Step 3: Enter the jump command in the command window to jump to the directory where the conversion tool is located.E.g:Step 4: Run the application.Format: application name+space+picture name+space+>+space+converted file name.E.g:Use the Arduino IDE to create and save a project, and put the image data (.h file) in the project directory.Then write the application code.The sample code is as follows: Special note: This code is tested with ESP32-S2. I have also debugged ESP32 and ESP8266 before. It is not the code below, but the writing method is basically the same.The main thing is to change the pins of the TFT_eSPI library.The source code and picture materials used in this article have been uploaded to the cloud disk, which can be downloaded from the link at the bottom of the article.The effect of the 1-second streaming playback of 4 pictures is as follows. The mobile phone screen will have a large color difference. There is no way to do this. Let's see. Anyway, the effect of the above routine is probably like this.Whether it is displayed in bitmap data or jpg format, the final result is the same.This lecture briefly introduces the use of LCD to display pictures in the Arduino environment. It mainly introduces the display of bitmap and JPEG format. Other formats such as PNG can also be decoded, but I will not explain it here. Interested students can go by themselves. Find the appropriate library.In general, the whole process is not difficult. After the driver is adjusted, the library will be displayed directly.If you have any questions, please leave a message in the comments section or send me a private message.If you want to download the source code or image processing tools yourself: Link: https://pan.baidu.com/s/1f2rgD1a9PY-_hboPdbfaow Extraction code: 4h6hSummary of Arduino development tutorials: https://blog.csdn.net/ShenZhen_zixian/article/details/121659482yu-yuyu: Awesome blogger!I have a question, when I said to Xiao Ai: "Turn up the brightness of the light", Xiao Ai's response was: "The device ignores me".Is there a solution, or is there no such instruction?