Holiday Notice: Elecrow staff will be on holiday starting October 1st (GMT+8). PCB & PCBA orders will resume delivery from Oct. 4th, and Product orders from Oct. 7th. Orders can still be placed as usual. Enjoy the holidays!
Hi everyone! Welcome to the second lesson of the CrowPanel ESP32 HMI tutorial. In this lesson, I will demonstrate how to display arbitrary graphics and text on the screen. To achieve this effect, we need to use two graphics libraries: the TFT_eSPI library and the LovyanGFX library.
If you haven’t seen the former CrowPanel Tutorials, please refer here:
# Lesson 1: Setting Up the Development Environment with CrowPanel
TFT_eSPI and LovyanGFX are both libraries for interfacing with TFT (Thin Film Transistor) displays using ESP microcontrollers, such as the ESP8266 and ESP32. They are commonly used in hobbyist and professional projects that involve small displays.
TFT_eSPI is a graphics library designed for TFT displays, providing an efficient way to manage and render graphics on these displays using ESP8266 and ESP32 microcontrollers.
Features:
Usage: Often used in projects where low-cost, small-sized color displays are needed, such as IoT devices, custom GUIs, and portable gadgets.
LovyanGFX is another graphics library similar to TFT_eSPI but aims to provide more advanced features and flexibility, particularly for use with the ESP32 microcontroller.
Features:
Usage: Suitable for more complex projects that require high-performance graphics, such as advanced GUIs, gaming applications, and any project that can benefit from the additional flexibility and performance enhancements offered by LovyanGFX.
Both libraries are popular in the ESP32 and ESP8266 communities for their ability to simplify the development of graphical applications on TFT displays, making it easier to create visually appealing and functional interfaces. The choice between them often depends on the specific requirements of your project and the support for the display driver in the library.
Based on the display drivers and the size of the TFT boards, our choice in the tutorial is listed below:
1. Open the Course File: Navigate to the code used in the second lesson and open it. Download the code here.
2. Configuration: The configuration code for the display and touch parts is in the gfx_conf.h file. This file includes the header file for the LovyanGFX library and uses its display driver code.
Based on your hardware, modify the macro definitions as needed.
3. Modify the code based on the Hardware Information: As I use the interface provided by the LovyanGFX library, I only need to complete this code based on the hardware information of the board. Use the schematic diagram of your board to find the necessary pin connections. For me is the schematic diagram for the 5" board. Adjust the configuration code based on these connections. Download the schematic diagram here.
4. Install the Library: Open the library manager in the IDE, search for "LovyanGFX," and install it. I choose the latest version.
5. Understanding LovyanGFX Library: For example:
You can find more introductions about LovyanGFX here.
1. Open the Course File: Find the common code for 2.4-inch, 2.8-inch, and 3.5-inch screens in the course folder and open it.
2. Understanding TFT_eSPI Library: This graphic library allows you to call functions to display arbitrary patterns and characters. For example:
3. Install the Library: Click on Sketch, find theInclude Library, open the Manage Library, search for "TFT_eSPI," and install the latest version provided by Bodmer.
4. Configure the Library:
5. Pin Configuration: Modify the pin configurations to match your board’s hardware setup. To save time and avoid mistakes, you can also copy the code to the TFT_eSPI Setup file. If so, you can jump to the part of Compiling and Uploading the Code. Otherwise, please follow the steps below:
If you wanna know how to set up the development environment, learn it here.
By following these steps, you should be able to configure and use the LovyanGFX and TFT_eSPI libraries to display graphics and text on different screen sizes. Experiment with various functions to draw your favorite patterns and enhance your understanding.
If you found this tutorial helpful, please subscribe Elecrow’s Youtube channel for updates on new lessons. See you next time!