CrowPanel 2.1inch-HMI ESP32 Rotary Display

5-Lesson ESPHome Course Guide

480 x 480 IPS Round Display | Capacitive Touch | Rotary Encoder | ESP32-S3 | ESPHome

--- > **Product:** CrowPanel 2.1inch-HMI ESP32 Rotary Display > **Lessons:** 5 > **Development Platform:** ESPHome 2026.7.4 + ESPHome Device Builder 1.9.2 > **Learning Path:** Platform Setup -> Basic LVGL Display -> Rotary Brightness Control -> LVGL Brightness Interface -> Touch Control ## 1. Course Overview This course is designed for the CrowPanel 2.1inch-HMI ESP32 Rotary Display. The board combines an ESP32-S3R8, a 480 x 480 ST7701S IPS round panel, a rotary encoder, and a CST816 capacitive touchscreen. The lessons begin with Home Assistant and ESPHome setup. You will then bring up the ST7701S panel, render a basic LVGL label, use the rotary encoder to control the GPIO6 PWM backlight, build a graphical brightness meter, and finally make the LVGL arc directly adjustable by touch. ## 2. Product Configuration Used in This Course | Item | 2.1-inch CrowPanel specification | | --- | --- | | Main controller | ESP32-S3R8, Xtensa LX7 dual-core, up to 240 MHz | | Memory | 512 KB SRAM, 8 MB PSRAM, 16 MB Flash | | Display | 2.1-inch round IPS, 480 x 480, ST7701S | | Touch | CST816 capacitive touch | | Wireless | 2.4 GHz Wi-Fi, BLE, Bluetooth 5.0 | | Expansion | UART, I2C, 12-pin FPC power/programming connector | | Power | 5 V / 1 A input | | Size and weight | 79 x 79 x 30 mm, 80 g | Product page: [CrowPanel 2.1inch-HMI ESP32 Rotary Display](https://www.elecrow.com/crowpanel-2-1inch-hmi-esp32-rotary-display-480-480-ips-round-touch-knob-screen.html) ## 3. Before You Begin - CrowPanel 2.1inch-HMI ESP32 Rotary Display - USB cable with data support - Home Assistant and ESPHome Device Builder 1.9.2 - ESPHome 2026.7.4 - A shared 2.4 GHz local network for Home Assistant, the computer, and the CrowPanel - Lesson 04 background material `bj_light_21_1.png` ## 4. Course Code **Complete course source:** [Elecrow ESPHome examples for the 2.1-inch rotary display](https://github.com/Elecrow-RD/CrowPanel-2.1inch-HMI-ESP32-Rotary-Display-480-480-IPS-Round-Touch-Knob-Screen/tree/master/example/esphome) The code explanations in Lessons 02-05 follow these files: | Lesson | Source file | | --- | --- | | 02 | `Lesson02/rotary-screen-21-display.yaml` | | 03 | `Lesson03/21-adjust-screen-brightness.yaml` | | 04 | `Lesson04/21-lvgl-interface.yaml` | | 05 | `Lesson05/21-touch.yaml` | ## 5. Course Catalog | Lesson | Title | Main topic | | --- | --- | --- | | **01** | **Set Up the ESPHome Platform** | Install Home Assistant and ESPHome Device Builder | | **02** | **Display Text with LVGL** | Initialize the PCF8574 and ST7701S RGB panel and show `Hello World!` | | **03** | **Adjust Brightness with the Rotary Encoder** | Read GPIO42/GPIO4 encoder input and control GPIO6 PWM | | **04** | **Build an LVGL Brightness Meter** | Render the 480 x 480 image, arc, knob, and percentage | | **05** | **Control the LVGL Interface by Touch** | Connect CST816 input to an adjustable LVGL arc | ## 6. Lesson Links ### Lesson 01 | Set Up Home Assistant and ESPHome [View Lesson 01](https://www.elecrow.com/wiki/2.1_ESPHome_01_Environment_Setup.html) ### Lesson 02 | Display Hello World on the Round Screen [View Lesson 02](https://www.elecrow.com/wiki/2.1_ESPHome_02_LVGL_Display_Text.html) ### Lesson 03 | Adjust Screen Brightness with the Rotary Encoder [View Lesson 03](https://www.elecrow.com/wiki/2.1_ESPHome_03_Rotate_To_Adjust_Brightness.html) ### Lesson 04 | Build the LVGL Brightness Meter Interface [View Lesson 04](https://www.elecrow.com/wiki/2.1_ESPHome_04_LVGL_Adjust_Brightness.html) ### Lesson 05 | Control the Brightness Interface by Touch [View Lesson 05](https://www.elecrow.com/wiki/2.1-ESPHOME-Lesson05-touch.html) ## 7. Recommended Learning Order Complete Lessons 01-05 in sequence. Each lesson verifies one additional layer: platform, display, rotary input, graphical interface, and touch. When a later lesson fails, return to the last verified layer before changing the YAML. ---