RotaryScreen 1.28inch ESPHome 5 Lesson Course Guide
Product: CrowPanel 1.28inch-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 1.28inch-HMI ESP32 Rotary Display, which combines an ESP32-S3, a 240 × 240 GC9A01A round LCD, a rotary encoder, and a capacitive touchscreen.
The lessons begin with Home Assistant and ESPHome environment setup. You will then bring up the round display, create a basic LVGL page, use the rotary encoder to adjust the PWM backlight, build a graphical brightness meter, and finally add direct touchscreen control to the LVGL interface.
Throughout the course, ESPHome YAML is used to configure the ESP32-S3, Octal PSRAM, SPI display, GPIO outputs, rotary encoder, CST816 touchscreen, fonts, images, and LVGL widgets. Each lesson builds on the display and input functions verified in the previous lesson.
2. Before You Begin¶
- Hardware: CrowPanel 1.28inch-HMI ESP32 Rotary Display
- USB Cable: A USB cable that supports data transfer
- Smart Home Platform: Home Assistant
- Development Software: ESPHome Device Builder 1.9.2
- ESPHome Version: 2026.7.4
- Target: ESP32-S3
- Display: 240 × 240 GC9A01A round IPS LCD
- Memory: Octal-mode PSRAM at 80 MHz
- Network: A 2.4 GHz Wi-Fi network shared by Home Assistant, the computer, and the CrowPanel
3. Course Code¶
Complete Course Source: Open the official ESPHome examples
4. Course Catalog¶
| Lesson | Title | Main Topic |
|---|---|---|
| 01 | Set Up the ESPHome Platform | Install Home Assistant and ESPHome Device Builder and prepare the development environment |
| 02 | Display Text with LVGL | Drive the GC9A01A round LCD and display a centered Hello World! label |
| 03 | Adjust Brightness with the Rotary Encoder | Read the rotary encoder and synchronize PWM backlight brightness with an LVGL percentage label |
| 04 | Build an LVGL Brightness Meter | Display a background image, brightness arc, knob, and percentage value controlled by the rotary encoder |
| 05 | Control the LVGL Interface by Touch | Read the CST816 touchscreen and adjust the LVGL arc and display backlight by touch or rotary input |
5. Lesson Links¶
Lesson 01｜Set Up Home Assistant and ESPHome¶
Lesson Link: View Lesson 01
Lesson 02｜Display Hello World on the Round Screen¶
Lesson Link: View Lesson 02
Lesson 03｜Adjust Screen Brightness with the Rotary Encoder¶
Lesson Link: View Lesson 03
Lesson 04｜Build the LVGL Brightness Meter Interface¶
Lesson Link: View Lesson 04
Lesson 05｜Control the Brightness Interface by Touch¶
Lesson Link: View Lesson 05
6. Recommended Learning Order¶
Follow Lessons 01 through 05 in sequence:
- Development Foundation: Lesson 01 prepares Home Assistant, ESPHome Device Builder, and the local network.
- Display Foundation: Lesson 02 verifies the ESP32-S3, PSRAM, SPI display, fonts, and basic LVGL rendering.
- Rotary Input and PWM: Lesson 03 reads the rotary encoder and links its value to the backlight and LVGL text.
- Graphical Interface: Lesson 04 adds image resources, a circular brightness arc, and synchronized visual feedback.
- Touch Interaction: Lesson 05 connects the CST816 touchscreen to LVGL and allows direct manipulation of the brightness control.
Completing the lessons in order makes troubleshooting easier because each lesson verifies one additional part of the hardware and interface stack.