Recently, for my DIY project aimed at “smartifying” a kitchen hood integrated with the apartment’s general ventilation system, I purchased a round display with a rotary encoder based on the ESP32C3. The idea is to add remote control, monitoring, and automation for the hood itself, while also implementing a shutdown timer and additional control over the rest of the ventilation system directly from the hood.
The project is still in progress, but I liked the display so much that I decided to share my experience with the ESPHome community and provide a couple of templates for inclusion to ESPHome and Homeassistant.
Device pictures:
This display is available on AliExpress for less than $25. It is based on the ESP32C3 chip and features a round IPS display with a 240x240 resolution, a GC9A01A display driver with LVGL support, PWM-controllable backlight, and an aluminum rotary encoder knob around the display with a push button function.
The display should be powered by 5V and connected via a 10-pin FPC flat cable. It comes with a development breakout board that includes a micro-USB socket and pinholes for connecting external power and accessing GPIO pins.
This dev board appears to be unified for different display types, as it has two sockets for FPC cables and provides some additional pins that are not used by this specific display. However, the easy access to GND, 5V power, and 3 unused GPIO pins (GPIO03 ADC, GPIO20 RX, and GPIO21 TX) for connecting additional components like sensors is very convenient.
The build and material quality are very high. It looks great, and the knob has a satisfying tactile feedback. The display is bright with wide viewing angles. While this product does not have a touch screen, for such a compact size, it is not necessary, as the encoder knob is sufficient.
Aliexpress (manufacturer shop)
https://www.aliexpress.com/item/1005007045539218.html
*WARNING: *
There is another and bigger (2.1 inch) round display from the same manufacturer, but it has different display driver chip, which at the moment is not supported by ESPHome! But is still supported by Arduino and ESP32-IDF.
I couldn’t find any information or examples on how to connect this device to ESPHome, but the manufacturer provides documentation and examples for Arduino and ESP32-IDF. Using that information to learn more about the chip and pin configuration, I created two templates for connecting it to ESPHome. The first template is basic, while the second one enables LVGL support. For quick testing, I added test pattern outputs to the screen and embedded web server to check all other components in both templates.
Basic template:
esphome:
name: knob-display-basic-template
friendly_name: knob-display-basic-template
esp32:
board: esp32-c3-devkitm-1
framework:
type: arduino
# Enable logging
logger:
# Enable Home Assistant API
api:
encryption:
key: "YOUR_API_KEY_HERE"
ota:
platform: esphome
password: "YOUR_OTA_PASSWORD_HERE"
wifi:
networks:
- ssid: !secret wifi_ssid
password: !secret wifi_password
- ssid: "YOUR_SSID_HERE"
password: "YOUR_WIFI_PASSWORD_HERE"
ap:
ssid: "Esp32C3-Knob-Display"
password: "AP_PASSWORD_HERE"
captive_portal:
web_server:
# SPI configuration
spi:
id: spi_bus
clk_pin: 1
mosi_pin: 0
# Configure the display
# remove 'show_test_card: true' option or set it False to disable test pattern
display:
- platform: ili9xxx
model: GC9A01A
cs_pin: 10
dc_pin: 4
reset_pin: 2
rotation: 0
id: round_display
spi_id: spi_bus
invert_colors: true
show_test_card: true
# Backlight control using LEDC output
output:
- platform: ledc
id: backlight_output
inverted: True
pin: 8
frequency: 5000Hz
light:
- platform: monochromatic
name: "Display Backlight"
output: backlight_output
restore_mode: RESTORE_DEFAULT_ON
# Rotary encoder configuration
sensor:
- platform: rotary_encoder
id: my_rotary_encoder
name: "Rotary Encoder"
pin_a: 6
pin_b: 7
resolution: 2
binary_sensor:
- platform: gpio
id: encoder_button
pin:
number: 9
inverted: true
name: "Rotary Encoder Button"
filters:
- delayed_on: 50ms
- delayed_off: 50ms
If you have difficulties switching the module BOOT mode for initial ESPHome flashing, you can use the following workaround:
- open ESP Tool in a separate tab of the same Chrome browser with device connected to USB port
- click on Connect button under the Program block
- once device is booted in flash mode click Disconnect
- switch back to the ESPHome Dashboard tab and proceed with initial ESPHome compilation and flashing by using local USB port
Here is how it looks like after flashing basic template:
LVGL template:
It is almost the same as basic, just has additional empty ‘lvgl’ section and two additional required parameters in ‘display’ section
esphome:
name: knob-display-lvgl-template
friendly_name: knob-display-lvgl-template
esp32:
board: esp32-c3-devkitm-1
framework:
type: arduino
# Enable logging
logger:
# Enable Home Assistant API
api:
encryption:
key: "YOUR_API_KEY_HERE"
ota:
platform: esphome
password: "YOUR_OTA_PASSWORD_HERE"
wifi:
networks:
- ssid: !secret wifi_ssid
password: !secret wifi_password
- ssid: "YOUR_SSID_HERE"
password: "YOUR_WIFI_PASSWORD_HERE"
ap:
ssid: "Esp32C3-Knob-Display"
password: "AP_PASSWORD_HERE"
captive_portal:
web_server:
# Enable LVGL
lvgl:
# SPI configuration
spi:
id: spi_bus
clk_pin: 1
mosi_pin: 0
# Configure the display to use LVGL
display:
- platform: ili9xxx
model: GC9A01A
cs_pin: 10
dc_pin: 4
reset_pin: 2
rotation: 0
id: round_display
spi_id: spi_bus
invert_colors: true
# next two lines required for LVGL mode
auto_clear_enabled: false
update_interval: never
# Backlight control using LEDC output
output:
- platform: ledc
id: backlight_output
inverted: True
pin: 8
frequency: 5000Hz
light:
- platform: monochromatic
name: "Display Backlight"
output: backlight_output
restore_mode: RESTORE_DEFAULT_ON
# Rotary encoder configuration
sensor:
- platform: rotary_encoder
id: my_rotary_encoder
name: "Rotary Encoder"
pin_a: 6
pin_b: 7
resolution: 2
binary_sensor:
- platform: gpio
id: encoder_button
pin:
number: 9
inverted: true
name: "Rotary Encoder Button"
filters:
- delayed_on: 50ms
- delayed_off: 50ms
Quick Specifications according to manufacturer:
Model：UEDX24240013-MD50E
- CPU: ESP32-C3
- Storage: 400K Ram + 4MB Flash
- Power supply: DC 5V, 500mA
- Operation type: Rotate and Press
- Ambient light: RGB three-color light ring at the bottom, can be customized according to needs
- Appearance: oil spray, black/silver/red, metal/plastic optional
- Support 2.4G Wi-Fi, BLE 5
- Storage temperature: -30~80°C
- Working temperature: -20~70°C
Full Product Specification and Schematics
Manufacturer web site:
Product page:
Manufacturer GitHub account:
Manufacturer documentation and code examples for Arduino and ESP32-IDF:
https://github.com/VIEWESMART/ESP32-IDF/
https://github.com/VIEWESMART/ESP32-IDF/tree/main/examples/1.3inch
https://github.com/VIEWESMART/ESP32-Arduino
https://github.com/VIEWESMART/ESP32-Arduino/tree/main/examples/1.3inch
NOTE
I have launched a small repo on GitHub to keep all the templates, documentation and ESPHome / Homeassistant integration guidelines in one place, and will update with some more examples and real integration pictures later:
