ESP32-C3-LCD-0.71

From Waveshare Wiki
Jump to: navigation, search
ESP32-C3-LCD-0.71
ESP32-C3-LCD-0.71

ESP32C3 0.71, SPI/USB/I2C/GPIO
{{{name2}}}

{{{name3}}}

{{{name4}}}

{{{name5}}}

{{{name6}}}

Overview

Introduction

ESP32-C3-LCD-0.71 is a microcontroller development board that supports 2.4GHz WiFi and BLE 5. It is equipped with a 0.71-inch LCD screen, capable of smoothly running GUI interface programs such as LVGL; combined with various peripheral interfaces, it enables rapid development of low-power AI simulation eyes, watches, and other HMI applications based on the ESP32-C3

Features

  • Low-power SoC equipped with RISC-V 32-bit single-core processor, up to 160 MHz main frequency
  • Supports 2.4 GHz Wi-Fi (802.11 b/g/n) and Bluetooth 5 (LE)
  • Built-in 400 KB of SRAM and 384 KB ROM, and onboard 4 MB Flash memory
  • Onboard 0.71inch LCD screen, 160×160 resolution, IPS panel
  • Built-in battery charge manager circuit, with a reserved VBAT solder point for external connection of a lithium battery power supply
  • Some of the GPIO interface pins are solder jointed and can be used for external expansion applications
  • Supports flexible clock, module power supply independent setting and other controls to realize low power consumption in different scenarios

Specifications

MCU ESP32-C3FH4 Display size 0.71 inch
Operating voltage 3.3V Resolution 160 × 160
Backlight current 20mA Display panel IPS
Display Interface 4-wire SPI Driver IC GC9D01
Dimensions 20.12×22.3×1.81 (H×V×D) (mm) Brightness 350 cd/㎡ (typical)

Onboard Resources

800px-ESP32-C3-LCD-0.71-introduction-01.jpg

1. RESET button

2. BOOT button
   Press it and then press the RESET button to enter download mode

3. ESP32-C3FH4 processor
   Up to 160MHz operating frequency, 4MB Flash memory

4. 2.4G ceramic antenna

5. ME6217C33M5G
   Low dropout regulator, 800mA output (Max.)

6. PL4054
   Lithium battery recharge IC, 4.2V full charge

7. USB Type-C interface
   Used for power supply, data transmission, and firmware updates

Dimensions

800px-ESP32-C3-LCD-0.71-introduction-02.jpg

Interfaces

800px-ESP32-C3-LCD-0.71-introduction-03.jpg

Display-Related Pins

TFT_MOSI GPIO7
TFT_SCLK GPIO6
TFT_CS GPIO5
TFT_DC GPIO4
TFT_RST GPIO8

Usage Instructions

ESP32-C3-LCD-0.71 currently provides Arduino-IDF development tools and frameworks, providing flexible development options, you can choose the right development tool according to your project needs and personal habits.

Development Tools

180px-Arduino-IDE-logo.jpg

Arduino IDE

Arduino IDE is an open source electronic prototyping platform, convenient and flexible, easy to get started. After a simple learning, you can start to develop quickly. At the same time, Arduino has a large global user community, providing an abundance of open source code, project examples and tutorials, as well as rich library resources, encapsulating complex functions, allowing developers to quickly implement various functions

Components Preparation

  • ESP32-C3-LCD-0.71 x1
  • USB cable (Type-A to Type-C) x 1

450px-ESP32-C3-LCD-0.71-usenotes-01.png

Before operating, it is recommended to browse the table of contents to quickly understand the document structure. For smooth operation, please read the FAQ carefully to understand possible problems in advance. All resources in the document are provided with hyperlinks for easy download.

Working with Arduino

This chapter introduces setting up the Arduino environment, including the Arduino IDE, management of ESP32 boards, installation of related libraries, program compilation and downloading, as well as testing demos. It aims to help users master the development board and facilitate secondary development Arduino-flow-04.png

Environment Setup

Download and install Arduino IDE

  • Click to visit the Arduino official website, select the corresponding system and system bit to download
    ESP32-S3-AMOLED-1.91-Ar-software-01.png
  • Run the installer and install all by default

Install ESP32 development board

  • Before using ESP32-related motherboards with the Arduino IDE, you must first install the software package for the esp32 by Espressif Systems development board
  • According to Board installation requirement, it is generally recommended to use Install Online. If online installation fails, use Install Offline.
  • For the installation tutorial, please refer to Arduino board manager tutorial
  • ESP32-C3-LCD-0.71 required development board installation description
Board name Board installation requirement Version number requirement
esp32 by Espressif Systems "Install Offline" / "Install Online" 2.0.13

Install library

  • When installing Arduino libraries, there are usually two ways to choose from: Install online and Install offline. If the library installation requires offline installation, you must use the provided library file
    For most libraries, users can easily search and install them through the online library manager of the Arduino software. However, some open-source libraries or custom libraries are not synchronized to the Arduino Library Manager, so they cannot be acquired through online searches. In this case, users can only manually install these libraries offline
  • For library offline installation tutorial, please refer to Arduino library manager tutorial
  • ESP32-C3-LCD-0.71 library file is stored in the sample program, click here to jump: ESP32-C3-LCD-0.71 Demo
  • ESP32-C3-LCD-0.71 library file installation description
Library Name Description Library Installation Requirements
TFT_eSPI LCD driver library "Install Offline"
LVGL LVGL library "Install Offline"
You can refer to LVGL official documentation to learn more about LVGL and its usage. Refer to TFT_eSPI official documentation for more details about TFT_eSPI and its usage

Run the first Arduino demo

If you are just getting started with ESP32 and Arduino, and you don't know how to create, compile, flash, and run Arduino ESP32 programs, then please expand and take a look. Hope it can help you!

New Project

  • Run the Arduino IDE and select File -> New Sketch
    ESP32-S3-AMOLED-1.91-Ar-study-01.png
  • Enter the code:
void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
}

void loop() {
  // put your main code here, to run repeatedly:
  Serial.println("Hello, World!");
  delay(2000);
}
  • Save the project and select File -> Save As.... In the pop-up menu, select the path to save the project, and enter a project name, such as Hello_World, click Save

ESP32-S3-AMOLED-1.91-Ar-study-02.png

Compile and flash demos

  • Select the corresponding development board, take the ESP32S3 motherboard as an example:

①. Click to select the dropdown menu option Select Other Board and Port;
②. Search for the required development board model esp32s3 dev module and select;
③. Select COM Port;
④. Save the selection.
ESP32-S3-AMOLED-1.91-Ar-study-03.png

  • Some development boards with specified version numbers support direct model selection, for example, "Waveshare ESP32-S3-LCD-1.69":

ESP32-S3-AMOLED-1.91-Ar-study-07.png

  • If the ESP32S3 mainboard only has a USB port, you need to enable USB CDC, as shown in the following diagram:

ESP32-S3-AMOLED-1.91-Ar-study-04.png

  • Compile and upload the program:

①. Compile the program; ②. Compile and download the program; ③. Download successful.
ESP32-S3-AMOLED-1.91-Ar-study-05.png

  • Open the Serial Monitor window, and the demo will print "Hello World!" every 2 seconds, and the operation is as follows:

ESP32-S3-AMOLED-1.91-Ar-study-06.png

Demo

Demo-flow-01.png

  • ESP32-C3-LCD-0.71 demos
Demo Description Dependency Library
01_Text_and_Number_Display Text and nymber display TFT_eSPI
02_Shapes_on_Circular_Display Drawing TFT_eSPI
03_Animated_Eye1 Simulated eye style1 TFT_eSPI
04_Animated_Eye2 Simulated eye style2 TFT_eSPI
05_Animated_Eye12 Simulated eye styles1 and 2, displayed alternately TFT_eSPI
06_Image_Display Display image TFT_eSPI and LVGL
07_Clock Clock TFT_eSPI and LVGL

Arduino project parameter setting

ESP32-C3-LCD-0.71-demo-01.png

01_Text_and_Number_Display

【Demo description】

  • This demo cycles through two-digit numbers from 00 to 99 on the TFT display and shows a series of color transitions when the program starts. Suitable for learning ESP32 interaction with the TFT screen, it can display a two-digit number that increases in cycles, with color transitions and text display, to test stability and reliability

【Hardware connection】

  • Connect the development board to the computer

200px-ESP32-C3-LCD-0.71-demo-08.png

【Code analysis】

  • setup(): setup function executes once when the program starts, primarily responsible for initializing the TFT display and performing some initial settings
    • tft.init(); initializes the TFT display, preparing for subsequent display operations
    • Implementing color transition effects through a series of tft.fillScreen() and delay(), demonstrating the color filling capabilities of the TFT display, enhancing the visual appeal during program startup
    • tft.fillScreen(0x04FF); sets a specific background color, tft.setTextColor(TFT_WHITE, 0x04FF); sets the text color, ensuring the text is clearly visible against the background
    • tft.drawString("Hello, Waveshare!", 30, 40, 2); displays a welcome message, enhancing the user experience
  • loop(): loop function continuously loops during the running process of the program, realizing the core functionality of displaying numbers
    • Number formatting: Convert the integer number to a string displayNumber, and add a leading zero when the number is a single digit, ensuring that single-digit numbers are displayed as two-digit numbers
    • tft.drawString(displayNumber, 55, 80, 6); displays formatted numbers at a specific font size at a specific location on the display
    • number++ realizes self-increment of numbers, and resets to 0 when number exceeds 99, ensuring that the number cycles between 00 and 99
    • delay(1000) controls the speed at which the numbers are updated, allowing users to clearly see the changes in the numbers

【Demo flashing】

  • Select the development board ESP32S3 Dev Module and port
  • Set the parameters
  • Flash the demo

【Result demonstration】

300px-ESP32-C3-LCD-0.71-demo-02.png

02_Shapes_on_Circular_Display

【Demo description】

  • This demo achieves the effect of displaying random color squares, triangles, and circles in sequence on a circular display, demonstrating the graphic drawing capabilities and the flexibility of random color generation on a TFT display Applicable for learning ESP32 interaction with a circular display, sequentially drawing randomly colored squares, triangles, and circles centered on the screen, switching every 3 seconds, to test the stability of graphic drawing

【Hardware connection】

  • Connect the development board to the computer

【Code analysis】

  • drawSquare(): This function is used to draw a square filled with a random color
    • uint16_t squareColor = tft.color565(random(0, 255), random(0, 255), random(0, 255)); generates a random RGB565 color, ensuring that the square is different in color each time it is drawn
    • The upper-left coordinates and dimensions of the square are determined by calculating the diagonal length of the square (equal to the diameter of the circle) and the center coordinates
    • tft.fillRect(squareTopLeftX, squareTopLeftY, squareSize, squareSize, squareColor); fills the square with a random color
  • drawSquare(): This function draws an equilateral triangle filled with a random color
    • Generates a random color
    • Calculates the height and side length of an equilateral triangle based on the radius of the circle
    • Calculates the coordinates of the three vertices of the triangle and store them in the triangleX and triangleY arrays
    • tft.fillTriangle(triangleX[0], triangleY[0], triangleX[1], triangleY[1], triangleX[2], triangleY[2], triangleColor); fills the triangle with a random color
  • drawCircleInCenter(): This function draws a circle filled with a random color, with the center located at the screen's center
    • Generates a random color
    • tft.fillCircle(centerX, centerY, 30, circleColor); draws a circle with the screen center coordinates and a fixed radius, filling it with a random color

【Demo flashing】

  • Select the development board ESP32S3 Dev Module and port
  • Set the parameters
  • Flash the demo

【Result demonstration】

300px-ESP32-C3-LCD-0.71-demo-03.png

03_Animated_Eye1

【Demo description】

  • This demo utilizes the TFT_eSPI library to drive a TFT display and showcase an animated eye effect on different processors. It features configurable parameters and supports DMA to enhance performance, continuously updating the eye state in the main loop. Applicable for learning the TFT_eSPI library to display eye animations, it allows configuration of parameters, utilizing state machines to control blinking, and testing performance

【Hardware connection】

  • Connect the development board to the computer

【Code analysis】

  • updateEye(): Update the iris size of the eye according to different conditions (whether there is a light-sensitive pin or not) to achieve the response of the eye to light or automatic changes
    • The function starts to determine how the iris size is updated based on whether LIGHT_PIN is defined
    • If a light-sensitive pin is defined:
      • Reads the analog value of the light sensor pin with int16_t v = analogRead(LIGHT_PIN);
      • Performs the necessary reversal operations according to the configuration such as LIGHT_PIN_FLIP (#ifdef LIGHT_PIN_FLIP section)
      • Limits the range of the read value (if (v < LIGHT_MIN) v = LIGHT_MIN; else if (v > LIGHT_MAX) v = LIGHT_MAX;), ensuring that the light sensitivity value is within a reasonable range.
      • Performs a mapping of the light sensitivity value to the iris size range (v = map(v, 0, (LIGHT_MAX - LIGHT_MIN), IRIS_MAX, IRIS_MIN);)
      • Apply a gamma curve to adjust the light sensitivity value depending on whether LIGHT_CURVE is defined (#ifdef LIGHT_CURVE section)
      • Finally, based on whether the IRIS_SMOOTH is defined, choose the smoothing treatment (filtering method gradually adjusts the iris size) or directly set the iris size
    • If a light-sensitive pin is not defined:
      • Generate a random new iris size using newIris = random(IRIS_MIN, IRIS_MAX);
      • Call the split(oldIris, newIris, micros(), 10000000L, IRIS_MAX - IRIS_MIN); function to achieve a gradual change in iris size from the old value to the new value through a recursive method, and update oldIris with the new value
  • Demo_2(): Displays a series of pre-defined images in a loop to present a simple animation sequence to the user
    • First, use the digitalWrite(device_A_CS, LOW); to set the chip select pin of device A to low to select the corresponding device or display
    • Then, call the tft.pushImage(0, 0, 160, 160, gImage_Ax); to send specific images (such as gImage_A1 to gImage_A12) to the display area. The parameter (0, 0, 160, 160) here might have specified the starting coordinates and size of the image on the display
    • Then, use the digitalWrite(device_A_CS, HIGH); to set the chip select pin to high to deselect the current device or display
    • Finally, by introducing a certain delay with delay(frameTime); to control the display time of each image, so as to achieve a coherent effect of animation

【Demo flashing】

  • Select the development board ESP32S3 Dev Module and port
  • Set the parameters
  • Flash the demo

【Result demonstration】

300px-ESP32-C3-LCD-0.71-demo-04.png

04_Animated_Eye2

【Demo description】

  • This demo uses the LVGL and TFT_eSPI libraries to create a graphical user interface that displays a GIF image. It is applicable for learning how ESP32 interacts with LVGL and TFT screens, capable of displaying LVGL images, and testing for stability and reliability

【Hardware connection】

  • Connect the development board to the computer

【Code analysis】

  • my_disp_flush(): The display refresh callback function of LVGL, responsible for refreshing the graphical data in LVGL to the TFT display screen
    • tft.startWrite();: Start writing data to the TFT display
    • tft.setAddrWindow(area->x1, area->y1, area->x2 - area->x1 + 1, area->y2 - area->y1 + 1);: Sets the write address window of the TFT display according to the incoming display area parameter (area) to specify the range of the screen area to which data will be written
    • tft.pushColors(&color_p->full, (area->x2 - area->x1 + 1) * (area->y2 - area->y1 + 1), true);: Pushes the color data (color_p) provided by LVGL to the TFT display according to the specified area size (the number of pixels obtained by calculating the product of the width and height of the area), where true means that the color pointer is automatically incremented after the data is pushed, so that the next push starts from the next pixel position
    • tft.endWrite();: Ends the write operation of the TFT display and completes the data transmission
    • lv_disp_flush_ready(disp);: Notifies LVGL that the current refresh operation has been completed, and LVGL can continue to perform subsequent graphics processing operations, such as preparing the next frame of data
    • printf("LVGL_disp_flush\n");: Printouts debugging information
  • setup(): Initializes the LVGL and TFT screens in turn, initializes the display buffer, configures and registers the display driver, and creates and sets the GIF object position and source image
    • lv_init(); and tft.begin();: Initializes the LVGL library, initializes the TFT display
    • lv_disp_draw_buf_init(&draw_buf, buf, NULL, screenHeight * screenWidth / 15);: Initialize the display buffer of LVGL, where buf is an array of buffers used to store display data, NULL means that double buffers are not used (here you can adjust them as needed), screenHeight * screenWidth / 15 calculates the size of the buffer, and reasonable buffer settings help to improve the display performance
    • lv_disp_drv_init(&disp_drv);: Initializes the display driver structure disp_drv of the LVGL
    • Configure display driver parameters
      • Set the horizontal and vertical resolution of the display
      • disp_drv.flush_cb = my_disp_flush;: Sets the previously defined my_disp_flush function as a display-driven refresh callback function, so that LVGL can call it to update the screen content when it needs to refresh the display
      • disp_drv.draw_buf = &draw_buf;: Associates the previously initialized display buffer draw_buf with the display driver ensures that the graphics data is properly stored and transmitted to the display
    • lv_disp_drv_register(&disp_drv);: Registers the display driver, which enables LVGL to use the configured display driver for graphic display operations, and the connection and configuration of LVGL to the TFT display is complete
    • Creates and initializes a graphic object

【Demo flashing】

  • Select the development board ESP32S3 Dev Module and port
  • Set the parameters
  • Flash the demo

【Result demonstration】

300px-ESP32-C3-LCD-0.71-demo-05.png

05_Animated_Eye12

【Demo description】

  • Simulated eye styles1 and 2, displayed alternately

【Hardware connection】

  • Connect the development board to the computer

【Code analysis】

  • loop(): Continuously executes animations and updates the displayed content
    • Use a loop to perform different animation operations:
      • If a == 1, then fill the screen with black first (tft.fillScreen(BLACK);), then call the Demo_1 function, and finally delay 2 seconds with delay(2000);
      • If a == 2, then use an inner loop to execute the Demo_2 function multiple times, where the number of times the loop runs is controlled by the variable i , with the loop running 7 times The Demo_2 function will sequentially display a series of images to achieve an animation effect. In this way, the two different animation sequences can be continuously executed in a loop during the operation of the program

【Demo flashing】

  • Select the development board ESP32S3 Dev Module and port
  • Set the parameters
  • Flash the demo

【Result demonstration】

300px-ESP32-C3-LCD-0.71-demo-04.png300px-ESP32-C3-LCD-0.71-demo-05.png

06_Image_Display

【Demo description】

  • This demo initializes the TFT display and LVGL library, creates an image object, and the main loop handles the timer task. It is applicable for learning how ESP32 interacts with LVGL and TFT screens, capable of displaying LVGL images after initialization, and testing for stability and reliability

【Hardware connection】

  • Connect the development board to the computer

【Code analysis】

  • lv_disp_flush(): Responsible for flashing the graphic data of LVGL to the TFT display
    • First calculates the width w and the height h of the area to be refreshed, ensuring accurate determination of the data range
    • Then sets the write address window of the TFT display with tft.setAddrWindow, specifying the correct position for data writing
    • Then uses tft.pushColors to push the color data to the display, this step determines the color and content of the displayed graphics
    • Finally, notifies LVGL that the refresh is complete so that LVGL can continue with subsequent graphics processing operations
  • setup(): Sets serial port, LVGL, TFT display and display driver, creates and configures graphical objects
    • Serial port initialization: Serial.begin(115200) prepares the serial port communication for possible debugging
    • LVGL initialization: lv_init() starts the core components of the LVGL library
    • If LV_USE_LOG is not 0, register the serial print function for debugging: lv_log_register_print_cb(my_print)
    • TFT display Initialization:
      • tft.begin(): Initializes the TFT hardware
      • tft.setRotation(0): Sets the display orientation to landscape
    • Display buffer initialization: lv_disp_draw_buf_init(&draw_buf, buf, NULL, screenWidth * screenHeight / 10), preparing for storing graphic data
    • Display driver initialization and registration:
      • lv_disp_drv_init(&disp_drv) initializes the display driver structure
      • Sets driver parameters, such as resolution, refresh callback function, display buffer, etc., and registers the display driver
    • Creates and sets up a graphical object:
      • Declares image resources through LV_IMG_DECLARE(A3), then creates an image object logo_img and sets its source to a declared image, and finally sets the position of the image object on the screen through lv_obj_center and lv_obj_align

【Demo flashing】

  • Select the development board ESP32S3 Dev Module and port
  • Set the parameters
  • Flash the demo

【Result demonstration】

300px-ESP32-C3-LCD-0.71-demo-06.png

This demo involves image conversion, you can use LVGL image conversion tool

07_Clock

【Demo description】

  • This demo utilizes the TFT_eSPI library and the LVGL graphics library to initialize the TFT display, setting up a graphical interface framework to achieve display and interaction functions. It is applicable for learning how ESP32 interacts with LVGL and TFT screens, capable of displaying a graphical interface after initialization, and testing for stability and reliability

【Hardware connection】

  • Connect the development board to the computer

【Code analysis】

  • lv_disp_flush(): The display refresh callback function of LVGL, responsible for pushing LVGL's graphic data to the TFT display to ensure accurate update of the displayed content
    • Calculates the width and height of the refresh area to accurately determine the data range to be pushed
    • Sets the write address window for the TFT display, ensuring correct data write position
    • Pushes color data to the display, the correct transmission of color data determines the color and content of the displayed graphics
    • Notifies LVGL that the refresh is complete so that LVGL can continue with subsequent graphics processing operations
  • setup(): Sets serial port, LVGL, TFT display, display driver, and initialization of the user interface
    • Serial port initialization is used for possible debugging output
    • LVGL initializes the core components of the boot library
    • If LV_USE_LOG is not 0, register the serial port print function to view the LVGL log information
    • TFT display initialization includes hardware connections and parameter settings, such as setting the rotation direction
    • Initializes the display buffer and configures the display driver to ensure that LVGL interacts with the display correctly
    • Calls ui_init to initialize user interface elements
    • Outputs debugging information indicating initialization complete

【Demo flashing】

  • Select the development board ESP32S3 Dev Module and port
  • Set the parameters
  • Flash the demo

【Result demonstration】

300px-ESP32-C3-LCD-0.71-demo-07.png

Flash Firmware Flashing and Erasing

  • The current demo provides test firmware, which can be used to test whether the onboard device functions properly by directly flashing the test firmware
  • bin file path: 
    ..\ESP32-C3-LCD-0.71-Demo\Firmware
Flash firmware flashing and erasing for reference

Resources

Schematic diagram

Project diagram

Demo

Datasheets

ESP32-C3

Other components

Software tools

Arduino

Firmware flashing tool

Other resource links

FAQ

Question: After the module downloads the demo and re-downloads it, why sometimes it can't connect to the serial port or the flashing fails?

 Answer:
  • Long press the BOOT button, press RESET at the same time, then release RESET, then release the BOOT button, at this time the module can enter the download mode, which can solve most of the problems that can not be downloaded.


Question: Why does the module keep resetting and flicker when viewed the recognition status from the device manager?

 Answer:
  • It may be due to Flash blank and the USB port is not stable, you can long-press the BOOT button, press RESET at the same time, and then release RESET, and then release the BOOT button, at this time the module can enter the download mode to flash the firmware (demo) to solve the situation.


Question: How to deal with the first compilation of the program being extremely slow?

 Answer:
  • It's normal for the first compilation to be slow, just be patient


Question: What should I do if I can't find the AppData folder?

 Answer:
  • Some AppData folders are hidden by default and can be set to show.
  • English system: Explorer->View->Check "Hidden items"
  • Chinese system: File Explorer -> View -> Display -> Check "Hidden Items"


Question: How do I check the COM port I use?

 Answer:
  • Windows system:

①View through Device Manager: Press the Windows + R keys to open the "Run" dialog box; input devmgmt.msc and press Enter to open the Device Manager; expand the "Ports (COM and LPT)" section, where all COM ports and their current statuses will be listed.
②Use the command prompt to view: Open the Command Prompt (CMD), enter the "mode" command, which will display status information for all COM ports.
③Check hardware connections: If you have already connected external devices to the COM port, the device usually occupies a port number, which can be determined by checking the connected hardware.

  • Linux system:

①Use the dmesg command to view: Open the terminal.
①Use the ls command to view: Enter ls /dev/ttyS* or ls /dev/ttyUSB* to list all serial port devices.
③Use the setserial command to view: Enter setserial -g /dev/ttyS* to view the configuration information of all serial port devices.


Support



Technical Support

If you need technical support or have any feedback/review, please click the Submit Now button to submit a ticket, Our support team will check and reply to you within 1 to 2 working days. Please be patient as we make every effort to help you to resolve the issue.
Working Time: 9 AM - 6 PM GMT+8 (Monday to Friday)


Retrieved from "https://www.waveshare.com/w/index.php?title=ESP32-C3-LCD-0.71&oldid=96143"