devices.esphome.io
CrowPanel 5.0" HMI ESP32 display (by Elecrow)
CrowPanel 5.0" HMI ESP32 display (by Elecrow)
Device Type: miscElectrical Standard: globalBoard: esp32
Drivers
- Processor: ESP32-S3-WROOM-1-N4R8 (using
esp32-s3-devkitc-1
board) - Touchscreen:
gt911
- Display: ILI6122 & ILI5960 (using
rpi_dpi_rgb
plaform)
GPIO Pinout
I²C (used for touchscreen)
Pin | Function |
---|---|
GPIO19 | i2c SDA |
GPIO20 | i2c SCL |
Backlight
Pin | Function |
---|---|
GPIO2 | backlight |
Display
Pin | Function |
---|---|
GPIO40 | de_pin |
GPIO39 | hsync_pin |
GPIO41 | vsync_pin |
GPIO0 | pclk_pin |
Display Data pins
red: - 45 #r1 - 48 #r2 - 47 #r3 - 21 #r4 - 14 #r5green: - 5 #g0 - 6 #g1 - 7 #g2 - 15 #g3 - 16 #g4 - 4 #g5blue: - 8 #b1 - 3 #b2 - 46 #b3 - 9 #b4 - 1 #b5
Simple Configuration
esphome: name: display platformio_options: board_build.esp-idf.memory_type: qio_opi board_build.flash_mode: dio esp32: board: esp32-s3-devkitc-1 framework: type: esp-idf sdkconfig_options: CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: y CONFIG_ESP32S3_DATA_CACHE_64KB: y CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y CONFIG_SPIRAM_RODATA: y
psram: mode: octal speed: 80MHz
output: - platform: ledc pin: 2 frequency: 1220 id: gpio_backlight_pwm
light: - platform: monochromatic output: gpio_backlight_pwm name: Display Backlight id: back_light restore_mode: ALWAYS_ON
i2c: sda: GPIO19 scl: GPIO20 scan: true
touchscreen: platform: gt911
display: - platform: rpi_dpi_rgb id: main_display color_order: RGB invert_colors: True update_interval: 5s auto_clear_enabled: false dimensions: width: 800 height: 480 de_pin: 40 hsync_pin: 39 vsync_pin: 41 pclk_pin: 0 pclk_frequency: 12MHz data_pins: red: - 45 #r1 - 48 #r2 - 47 #r3 - 21 #r4 - 14 #r5 green: - 5 #g0 - 6 #g1 - 7 #g2 - 15 #g3 - 16 #g4 - 4 #g5 blue: - 8 #b1 - 3 #b2 - 46 #b3 - 9 #b4 - 1 #b5 lambda: |- auto red = Color(255, 0, 0); auto green = Color(0, 255, 0); auto blue = Color(0, 0, 255); auto white = Color(255, 255, 255); id(main_display).filled_circle(50, 50, 40, red); id(main_display).filled_circle(100, 50, 40, green); id(main_display).filled_circle(150, 50, 40, blue); id(main_display).filled_circle(200, 50, 40, white);
# example buttonbinary_sensor: - platform: touchscreen name: Top Left Touch Button x_min: 10 x_max: 240 y_min: 10 y_max: 90 on_press: - lambda: |- ESP_LOGI("btn", "Button pressed");
Advanced Configuration (using LGVL graphics library)
substitutions: device_name: display
esphome: name: ${device_name} platformio_options: board_build.esp-idf.memory_type: qio_opi board_build.flash_mode: dio esp32: board: esp32-s3-devkitc-1 framework: type: esp-idf sdkconfig_options: CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: y CONFIG_ESP32S3_DATA_CACHE_64KB: y CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y CONFIG_SPIRAM_RODATA: y
psram: mode: octal speed: 80MHz
logger:
# Define a PWM output on the ESP32output: - platform: ledc pin: 2 frequency: 1220 id: gpio_backlight_pwm
light: - platform: monochromatic # Define a monochromatic, dimmable light for the backlight output: gpio_backlight_pwm name: ${device_name} Display Backlight id: back_light restore_mode: ALWAYS_ON
display: - platform: rpi_dpi_rgb id: main_display color_order: RGB invert_colors: True update_interval: never auto_clear_enabled: false # takes 2.8 seconds to clear the display dimensions: width: 800 height: 480 de_pin: 40 hsync_pin: 39 vsync_pin: 41 pclk_pin: 0 pclk_frequency: 12MHz data_pins: red: - 45 #r1 - 48 #r2 - 47 #r3 - 21 #r4 - 14 #r5 green: - 5 #g0 - 6 #g1 - 7 #g2 - 15 #g3 - 16 #g4 - 4 #g5 blue: - 8 #b1 - 3 #b2 - 46 #b3 - 9 #b4 - 1 #b5
i2c: sda: GPIO19 scl: GPIO20 scan: true
touchscreen: platform: gt911
globals: - id: random_int_var type: int restore_value: no initial_value: '0'
binary_sensor: - platform: lvgl widget: button name: Button on_press: # genrate a random number between -10 and +10 and update meter then: - lambda: |- id(random_int_var) = (rand() % 20) - 10; - lvgl.indicator.update: id: power_meter_input value: !lambda return id(random_int_var); - lvgl.label.update: id: power_kw text: format: "%dkW" args: [ 'id(random_int_var)' ]image: - file: mdi:sun-wireless-outline id: solar_power_icon resize: 50x50
lvgl: color_depth: 16 bg_color: 0 border_width: 0 outline_width: 0 shadow_width: 0 text_font: unscii_16 align: center style_definitions: - id: meter_style border_width: 0 outline_width: 0 align: center bg_color: 0 - id: title_style text_font: MONTSERRAT_40 align: center text_color: 0xFFFFFF bg_opa: TRANSP bg_color: 0 radius: 4 pad_all: 2 - id: detail_style text_font: MONTSERRAT_18 align: center text_color: 0xFFFFFF bg_opa: TRANSP bg_color: 0 radius: 4 pad_all: 2 widgets: - button: # Button id: button height: 100 width: 200 x: 20 y: 20 border_width: 0 outline_width: 0 align: TOP_LEFT checkable: false widgets: - label: align: center text: "Button" - obj: # Meter height: 240 width: 240 bg_color: 0 border_width: 0 outline_width: 0 shadow_width: 0 pad_all: 4 align: TOP_MID widgets: - meter: # Gradient color arc height: 100% width: 100% border_width: 0 outline_width: 0 align: center bg_color: 0 scales: angle_range: 180 range_to: 10 range_from: -10 ticks: count: 0 indicators: - line: id: power_meter_input width: 8 color: 0xFFFFFF r_mod: 12 value: 50 - arc: color: 0xFF3000 r_mod: 10 width: 20 start_value: -10 end_value: 0 - arc: color: 0x00FF00 r_mod: 10 width: 20 start_value: 0 end_value: 10 - arc: # black arc to erase middle part of meter indicator line height: 160 width: 160 align: center arc_color: 0x000000 arc_width: 150 start_angle: 0 end_angle: 360 indicator: arc_width: 150 arc_color: 0x000000 - label: # gauge lower and higher range indicators styles: detail_style y: 8 x: -99 text: "-10" - label: styles: detail_style y: 8 x: 99 text: "+10" - label: # value label styles: title_style id: power_kw y: -10 - image: src: solar_power_icon id: img_solar_power align: center image_recolor: 0xFFFF00 image_recolor_opa: 100% y: 50