Cool, could you share that button part?
I played around a bit for my needs - I added my PV + EV sensors, now trying to use some emojis which needs some fonts to be embedded first and maybe some colors.
esphome:
name: esphome-web-8af3ac
friendly_name: SmallTV Pro
min_version: 2024.11.0
name_add_mac_suffix: false
esp32:
board: esp32dev
framework:
type: arduino
# Enable logging
logger:
baud_rate: 0
# enable web server
web_server:
version: 3
# Enable Home Assistant API
api:
ota:
- platform: esphome
wifi:
ssid: !secret wifi-ssid
password: !secret wifi-password
# Define a PWM output on the ESP32
output:
- platform: ledc
pin: GPIO25
inverted: True
id: backlight_pwm
# Define a monochromatic, dimmable light for the backlight
light:
- platform: monochromatic
output: backlight_pwm
name: "Display Backlight"
id: back_light
restore_mode: ALWAYS_ON
esp32_touch:
# setup_mode: true
binary_sensor:
- platform: esp32_touch
name: "Touch Button"
pin: GPIO32
threshold: 1250
spi:
clk_pin: GPIO18
mosi_pin: GPIO23
interface: hardware
id: spihwd
display:
- platform: ili9xxx
id: lcd_display
model: st7789v
spi_id: spihwd
data_rate: 40MHz
dc_pin: GPIO02
reset_pin: GPIO04
spi_mode: MODE3
dimensions:
width: 240
height: 240
offset_height: 0
offset_width: 0
invert_colors: true
auto_clear_enabled: false
update_interval: never
lvgl:
buffer_size: 25%
widgets:
# DC
- label:
id: power_label
text: "Power: 0.00 Watt"
x: 20 # Adjust position
y: 20
width: 200
text_align: CENTER
# Forecast
- label:
id: forecast_label
text: "Forecast Today: 0.00 kW"
x: 20 # Adjust position
y: 40
width: 200
text_align: CENTER
# Home Battery
- label:
id: battery_label
text: "Home Battery: 0%"
x: 20
y: 80 # Position below power display
width: 200
text_align: CENTER
- bar:
id: battery_bar
x: 20
y: 100
width: 200
height: 20
min_value: 0
max_value: 100
value: 0
# Car 1 Battery (id_4_state_of_charge)
- label:
id: car1_label
text: "Car 1: 0%"
x: 10
y: 140
width: 100
text_align: RIGHT
- label:
id: car1_rangelabel
text: "Car 1:0km"
x: 100
y: 140
width: 100
text_align: RIGHT
- bar:
id: car1_bar
x: 10
y: 160
width: 200
height: 15
min_value: 0
max_value: 100
# Car 2 Battery (smart_batterie)
- label:
id: car2_label
text: "Car 2: 0%"
x: 10
y: 180
width: 100
text_align: RIGHT
- label:
id: car2_rangelabel
text: "Car 2: 0km"
x: 100
y: 180
width: 100
text_align: RIGHT
- bar:
id: car2_bar
x: 10
y: 200
width: 200
height: 15
min_value: 0
max_value: 100
sensor:
# DC Power
- platform: homeassistant # or your actual sensor platform
id: total_dc_power
unit_of_measurement: "Watt"
entity_id: sensor.total_dc_power # Replace with your HA entity
on_value:
- lvgl.label.update:
id: power_label
text: !lambda |-
return ("Sun Power: " + to_string(static_cast<int>(x)) + " Watt").c_str();
# Forecast
- platform: homeassistant # or your actual sensor platform
id: forecast_remaining
entity_id: sensor.solcast_pv_forecast_prognose_verbleibende_leistung_heute # Replace with your HA entity
on_value:
- lvgl.label.update:
id: forecast_label
text: !lambda |-
return ("Solcast remaining: " + to_string(static_cast<int>(x)) + " kWh").c_str();
# Home Battery
- platform: homeassistant
id: evcc_battery_soc
entity_id: sensor.evcc_battery_soc # Replace with actual HA entity
unit_of_measurement: "%"
on_value:
- lvgl.label.update:
id: battery_label
text: !lambda |-
return ("Home Battery: " + to_string(static_cast<int>(x)) + "%").c_str();
- lvgl.bar.update:
id: battery_bar
value: !lambda |-
return x;
# Car 1 Battery
- platform: homeassistant
id: car1_soc
entity_id: sensor.id_4_state_of_charge # Replace with actual entity
unit_of_measurement: "%"
on_value:
- lvgl.label.update:
id: car1_label
text: !lambda |-
return ("ID4: " + to_string(static_cast<int>(x)) + "%").c_str();
- lvgl.bar.update:
id: car1_bar
value: !lambda |-
return x;
# Car 1 Range
- platform: homeassistant
id: car1_range
entity_id: sensor.id_4_range # Replace with actual entity
unit_of_measurement: "km"
on_value:
- lvgl.label.update:
id: car1_rangelabel
text: !lambda |-
return (to_string(static_cast<int>(x)) + "km").c_str();
# Car 2 Battery
- platform: homeassistant
id: car2_soc
entity_id: sensor.smart_batterie # Replace with actual entity
unit_of_measurement: "%"
on_value:
- lvgl.label.update:
id: car2_label
text: !lambda |-
return ("Smart #1: " + to_string(static_cast<int>(x)) + "%").c_str();
- lvgl.bar.update:
id: car2_bar
value: !lambda |-
return x;
# Car 2 Range
- platform: homeassistant
id: car2_range
entity_id: sensor.smart_reichweite # Replace with actual entity
unit_of_measurement: "km"
on_value:
- lvgl.label.update:
id: car2_rangelabel
text: !lambda |-
return ( to_string(static_cast<int>(x)) + "km").c_str();
a online lvgl editor would come in handy, looking for one