In this project, I’m going to show you how to set up a smart home dashboard using an ESPHome-compatible display. With this display, you’ll be able to monitor and control your smart home devices directly through Home Assistant. Whether you want to check temperature and humidity, turn lights on and off, or interact with other smart home gadgets, this setup will make it possible—all from one screen.
We’ll start by unboxing the display, exploring its features, and setting it up. Then, I’ll walk you through programming it using Arduino IDE and integrating it with ESPHome. By the end, you’ll have a functional dashboard that can interact with your Home Assistant setup, plus ideas on how to expand its capabilities with add-on modules like LoRa and Zigbee.
Check out the CrowPanel 7" HMI Touch Display - https://shrsl.com/4vfws
Other CrowPanel Displays - http://shrsl.com/4vfww
Unboxing and Understanding the Display
When I first opened the box, I found the display and several of the add-on modules neatly packed inside. The main item is the display itself, which comes with a protective cover on both the front and back. Along with it, there are the extendable modules that can be attached to extend its functionality. These include an nRF2401 module, a LoRa/Meshtastic module, an ESP32-H2 module for Thread/Zigbee connectivity, and an ESP32-C6 module. Additionally, the package contains a USB cable, a pre-mounted screen enclosure, and a UART breakout cable.
Looking at the display, I can see that it offers a variety of connectivity options. It has two UART outputs and one I²C output, making it easy to connect different peripherals. The board also includes two buttons (Reset and Boot), a microSD card slot, and a speaker connector with what looks like a volume adjustment knob. There’s also a microphone and a microSD card slot.
Taking off the back cover reveals more details about the display’s hardware. The board includes a buzzer, and a real-time clock (RTC) battery for keeping time even when power is lost. The display itself is glued to the board, meaning it can’t be removed. The device is powered by an ESP32-S3, which controls the entire system. It also has a battery connector, though it’s not accessible from the outside, making it possible to add a battery for portable use.
Setting Up the Display
As soon as I plugged it in, the screen powered on, showing an initialization screen followed by a pre-installed demo. The demo is based on LVGL (Light and Versatile Graphics Library) version 8, displaying various UI elements like buttons, sliders, tabs, and checkboxes. This confirmed that the display was working correctly and ready for further customization.
Programming the Display with Arduino IDE
To test how easy it is to control the display functionalities and capabilities with the Arduino IDE, I selected one of the provided examples that plays an MP3 sound through the speaker and I uploaded it via the Arduino IDE. Since the display is powered by an ESP32-S3, I selected the correct board under Tools > Board > ESP32S3 Dev Module.
The sketch was uploaded without any issues and the MP3 started immediately playing but the speaker volume was set too high, so I had to adjust it. However, the volume control potentiometer was hard to reach with a screwdriver through the case, so I had to remove the backplate to access it.
Integrating with ESPHome
Now that the display is working with Arduino IDE, the next step is to integrate it with ESPHome so it can communicate with Home Assistant. ESPHome makes it easy to configure and control the display using YAML without writing complex code.
I based my integration from a previous example, where I reused the already provided configuration but I modified the dashboard so that I can include extra information from my setup and my other devices.
That was relatively easy and after few iterations, I had my basic dashboard with 4 panels. On the left side I have two panels showing temperature and humidity from my Living room Monitor, while on the right, I created one panel with buttons and one I left the original counter functionality from the example.
The full YAML code is available below.
esphome:
name: crowpaneltest
friendly_name: CrowPanelTest
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
variant: esp32s3
# Enable logging
logger:
level: DEBUG
logs:
touch: DEBUG
display: DEBUG
# Enable Home Assistant API
api:
encryption:
key: "xxx"
ota:
- platform: esphome
password: "xxx"
wifi:
ssid: !secret wifi_ssid
password: !secret wifi_password
# Enable fallback hotspot (captive portal) in case wifi connection fails
ap:
ssid: "Crowpaneltest Fallback Hotspot"
password: "xxx"
captive_portal:
web_server:
port: 80
# --- Define Sensors to fetch data from Home Assistant ---
sensor:
- platform: homeassistant
id: ha_temperature_sensor # Give it a local ID
entity_id: sensor.living_room_temperature
internal: true # Only used within ESPHome (for display)
unit_of_measurement: "°C" # Optional: For display consistency
- platform: homeassistant
id: ha_humidity_sensor # Give it a local ID
entity_id: sensor.living_room_humidity # *** Make sure this is the correct humidity entity ID ***
internal: true # Only used within ESPHome (for display)
unit_of_measurement: "%" # Optional: For display consistency
interval:
- interval: 5s
then:
# Optional: Force Home Assistant to update the sensor
- homeassistant.service:
service: homeassistant.update_entity
data:
entity_id: sensor.living_room_temperature
- homeassistant.service:
service: homeassistant.update_entity
data:
entity_id: sensor.living_room_humidity
# Update the label text manually
- lambda: |-
if (id(ha_temperature_sensor).has_state()) {
char temp_str[10]; // Buffer to store formatted string (e.g., "23.50°C")
float temp = id(ha_temperature_sensor).state;
snprintf(temp_str, sizeof(temp_str), "%.2f°C", temp); // Formats to 2 decimals
lv_label_set_text(id(temp_value_label), temp_str);
} else {
lv_label_set_text(id(temp_value_label), "--- °C");
}
if (id(ha_humidity_sensor).has_state()) {
char temp_str[8]; // Buffer to store formatted string (e.g., "55%")
float humidity = id(ha_humidity_sensor).state;
snprintf(temp_str, sizeof(temp_str), "%.0f%%", humidity); // Formats to 0 decimals
lv_label_set_text(id(humidity_value_label), temp_str);
} else {
lv_label_set_text(id(humidity_value_label), "--- %");
}
# --- Define Switch to control the light ---
switch:
- platform: homeassistant
id: ha_test_light_switch # Give it a local ID
entity_id: light.testlight
internal: true # The switch itself isn't exposed back to HA, we just use it to trigger the service
font:
# Keep existing font or add more as needed
- file: "fonts/arial.ttf"
id: my_font
size: 40
- file: "fonts/arial.ttf" # Example: Add another size if needed
id: font_medium
size: 24
- file: "fonts/arial.ttf" # Example: Add another size if needed
id: font_large
size: 32
- file: "fonts/arial.ttf" # Example: Add another size if needed
id: font_small
size: 16
psram:
mode: octal
speed: 80MHz
i2c:
sda: 15
scl: 16
frequency: 400000
id: i2c_bus
# Backlight configuration (Remains the same)
i2c_device:
id: pca9557
address: 0x18
i2c_id: i2c_bus
output:
- platform: template
id: backlight_output
type: binary
write_action:
- lambda: |-
uint8_t config_reg = 0x03;
uint8_t config_data = 0xFD;
id(pca9557).write_byte(config_reg, config_data);
delay(10);
uint8_t output_reg = 0x01;
uint8_t output_data = state ? 0x02 : 0x00;
id(pca9557).write_byte(output_reg, output_data);
light:
- platform: binary
name: "Backlight"
output: backlight_output
id: backlight
restore_mode: ALWAYS_ON
display:
- platform: rpi_dpi_rgb
id: my_display
color_order: RGB
invert_colors: true
update_interval: 33ms
auto_clear_enabled: false
dimensions:
width: 800
height: 480
de_pin: 42
hsync_pin: 40
vsync_pin: 41
pclk_pin: 39
pclk_frequency: 18MHz
data_pins:
red:
- 7
- 17
- 18
- 3
- 46
green:
- 9
- 10
- 11
- 12
- 13
- 14
blue:
- 21
- 47
- 48
- 45
- 38
touchscreen:
platform: gt911
id: touch_gt911
address: 0x5D
# Remove the old on_touch action or modify if needed for new interactions
# on_touch:
# then:
# - lambda: |-
# // Example: Log touch coordinates if debugging
# // ESP_LOGD("touch", "Touch at x=%d, y=%d", x, y);
globals:
- id: counter # Keep the counter global
type: int
restore_value: no
initial_value: '0'
# Removed display_text global as it's no longer used
# --- LVGL UI Configuration ---
lvgl:
color_depth: 16
bg_color: 0x000000
border_width: 0
style_definitions:
# --- Base Styles ---
- id: base_panel_style
bg_color: 0x000000 # Black background
border_width: 0
radius: 0
pad_all: 0 # No padding for main panels
# --- Section Styles ---
- id: section_panel_style
bg_color: 0x111111 # Dark grey background for sections
border_width: 1
border_color: 0x444444
radius: 10
pad_all: 10 # Padding inside sections
# --- Label Styles ---
- id: title_label_style
text_font: font_medium # Reference font by id prepended with $
text_color: 0xCCCCCC # Light grey text
align: CENTER
bg_opa: TRANSP
- id: sensor_value_style
text_font: font_large # Reference font by id prepended with $
text_color: 0xFFFFFF # White text
align: CENTER
bg_opa: TRANSP
- id: button_label_style
text_font: font_medium # Reference font by id prepended with $
text_color: 0xFFFFFF
align: CENTER
bg_opa: TRANSP
# --- Button Style ---
- id: button_style
bg_color: 0x0000FF # Blue background
radius: 15
border_width: 1
border_color: 0xCCCCCC
pad_all: 10
widgets:
# --- Main Container ---
- obj:
id: main_screen
styles: base_panel_style
width: 800
height: 480
widgets:
# === Left Panel (Sensors) ===
- obj:
id: left_panel
styles: base_panel_style
width: 390
height: 470
align: TOP_LEFT
x: 5
y: 5
widgets:
# --- Temperature Section ---
- obj:
id: temp_section
styles: section_panel_style
width: 390
height: 225
align: TOP_MID
widgets:
- label:
styles: title_label_style
align: TOP_MID
y: 5
text: "Temperature"
- label:
id: temp_value_label
styles: sensor_value_style
width: 370
align: CENTER
# --- Humidity Section ---
- obj:
id: humidity_section
styles: section_panel_style
width: 390
height: 225
align: BOTTOM_MID
widgets:
- label:
styles: title_label_style
align: TOP_MID
y: 5
text: "Humidity"
- label:
id: humidity_value_label
styles: sensor_value_style
width: 370
align: CENTER
text: !lambda |-
if (id(ha_humidity_sensor).has_state()) {
return esphome::to_string(id(ha_humidity_sensor).state) + id(ha_humidity_sensor).get_unit_of_measurement();
} else {
return "--- " + id(ha_humidity_sensor).get_unit_of_measurement();
}
# === Right Panel (Buttons & Counter) ===
- obj:
id: right_panel
styles: base_panel_style
width: 390
height: 470
align: TOP_RIGHT
x: -5
y: 5
widgets:
# --- Toggle Buttons Section ---
- obj:
id: toggle_buttons_section
styles: section_panel_style
width: 390
height: 200
align: TOP_MID
layout: # Layout is a dictionary
type: flex
flex_flow: COLUMN
flex_align_main: SPACE_EVENLY
flex_align_cross: CENTER
flex_align_track: CENTER
pad_column: 10
widgets:
# --- Button 1: Test Light ---
- button:
id: light_toggle_btn
styles: button_style
width: 250
height: 50
on_click:
then:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.testlight
- logger.log: "Toggled light.testlight via HA service"
widgets:
- label:
styles: button_label_style
text: "Toggle Test Light"
# --- Button 2: Placeholder ---
- button:
id: placeholder_btn_2
styles: button_style
width: 250
height: 50
widgets:
- label:
styles: button_label_style
text: "Placeholder 2"
# --- Button 3: Placeholder ---
- button:
id: placeholder_btn_3
styles: button_style
width: 250
height: 50
widgets:
- label:
styles: button_label_style
text: "Placeholder 3"
# --- Counter Section ---
- obj:
id: counter_section
styles: section_panel_style
width: 390
height: 250
align: BOTTOM_MID
widgets:
# Counter Display Label
- label:
id: counter_display
styles: sensor_value_style
width: 370
align: TOP_MID
y: 15
text: !lambda 'return "Counter: " + std::to_string(id(counter));'
# Counter Buttons Container
- obj:
id: counter_buttons_container
width: 370
height: 80 # Keep CONTENT, might work here. If errors, use explicit height e.g., 80
align: BOTTOM_MID
y: -20
layout: # Layout is a dictionary
type: flex
flex_flow: ROW
flex_align_main: SPACE_EVENLY
flex_align_cross: CENTER
flex_align_track: CENTER
pad_column: 10
widgets:
# Increment Button
- button:
id: increment_btn
styles: button_style
width: 80
height: 60
on_press:
then:
- lambda: |-
id(counter)++;
lv_label_set_text(id(counter_display), ("Counter: " + std::to_string(id(counter))).c_str());
widgets:
- label:
styles: button_label_style
text: "+"
# Reset Button
- button:
id: reset_btn
styles: button_style
width: 100
height: 60
on_press:
then:
- lambda: |-
id(counter) = 0;
lv_label_set_text(id(counter_display), ("Counter: " + std::to_string(id(counter))).c_str());
widgets:
- label:
styles: button_label_style
text: "Reset"
# Decrement Button
- button:
id: decrement_btn
styles: button_style
width: 80
height: 60
on_press:
then:
- lambda: |-
id(counter)--;
lv_label_set_text(id(counter_display), ("Counter: " + std::to_string(id(counter))).c_str());
widgets:
- label:
styles: button_label_style
text: "-"
Exploring Add-On Modules
The display supports several add-on modules, which can extend its functionality for different smart home applications.
Each module connects to a dedicated expansion slot on the board. Communication is handled over serial (UART), and the modules come with pre-installed firmware that accepts AT commands. This allows the display to send specific instructions to each module without complex coding. For example, the LoRa module can be used to send messages to another LoRa device, while the NRF24L01 can communicate with other RF-based smart home devices.
Elecrow provides some starter examples for all of the modules but I could not find a Meshtastic one. They said that they are currently working on that and it should be available very soon. With it, this might be a good option for a screen based node that can have its onscreen keyboard.
Conclusion
In this project, I successfully set up and programmed the CrowPanel ESP32-S3 display to act as a smart home dashboard. Starting with unboxing, I explored its features and connectivity options. Then, I set it up, powered it on, and tested the pre-installed LVGL demo, confirming that the display worked correctly.
Next, I integrated the display with ESPHome and Home Assistant, creating a basic dashboard to monitor temperature and humidity while also adding buttons to control smart home devices like Zigbee lights.
This display has great potential for home automation projects. With more development, it could become a powerful control center for smart homes. If you're interested in experimenting further, you can modify the ESPHome configuration, try different UI designs, or explore Zigbee and Matter integration. Let me know if you have any questions, and happy building!
The links below are affiliate links. When you click on affiliate links in my articles or videos, it means I may earn a small commission if you make a purchase. These links are a way to support my work without costing you anything extra—the price you pay stays the same, whether you use the link or not. Thank you for your support!
- ThinkNode G1 LoRaWAN Gateway - https://s.click.aliexpress.com/e/_oB8J9t3
- Elecrow 8" Touch Monitor - https://s.click.aliexpress.com/e/_olpa8mD
- Crowtail-SIM-A7670E 4G Module - https://s.click.aliexpress.com/e/_ol33pe9
- Multimeter - https://s.click.aliexpress.com/e/_oosplUZ
- Bench Power Supply - https://s.click.aliexpress.com/e/_omn4rsh
- Soldering Station - https://s.click.aliexpress.com/e/_on1VSkH
- Mini PC - https://s.click.aliexpress.com/e/_opW0993
