Here’s the YAML for ESPHome:
esphome:
name: kitchendisplay
friendly_name: KitchenDisplay
esp32:
board: esp32-c3-devkitm-1
framework:
type: arduino
# Enable logging
logger:
# Enable Home Assistant API
api:
encryption:
key: "YourKey"
ota:
- platform: esphome
password: "YourPassword"
globals:
- id: wifi_status
type: int
restore_value: no
initial_value: "0"
- id: recorded_display_refresh
type: int
restore_value: yes
initial_value: '0'
wifi:
ssid: !secret wifi_ssid
password: !secret wifi_password
on_connect:
then:
- lambda: |-
id(wifi_status) = 1;
on_disconnect:
then:
- lambda: |-
id(wifi_status) = 0;
ap:
ssid: "Kitchendisplay Fallback Hotspot"
password: "YourPassword"
captive_portal:
# Here is deep sleep part
deep_sleep:
id: deep_sleep_1
run_duration: 1min # Device wake up and run 60s (enough to pull data and update)
sleep_duration: 30min # deep sleep for 30m
http_request:
verify_ssl: false
timeout: 10s
watchdog_timeout: 15s
online_image:
- id: dashboard_image
format: PNG
type: BINARY
buffer_size: 30000
url: http://192.168.1.101:10000/dashboard-robin/display?viewport=800x480&eink=2&invert #change this link to your screenshot link
update_interval: 20s
on_download_finished:
- delay: 0ms
- component.update: main_display
spi:
clk_pin: GPIO8
mosi_pin: GPIO10
display:
- platform: waveshare_epaper
id: main_display
cs_pin: GPIO3
dc_pin: GPIO5
busy_pin:
number: GPIO4
inverted: true
reset_pin: GPIO2
model: 7.50inv2
update_interval: never
lambda: |-
it.image(0, 0, id(dashboard_image));
time:
- platform: homeassistant
id: homeassistant_time
sensor:
- platform: wifi_signal # Reports the WiFi signal strength/RSSI in dB
name: "WiFi Signal dB"
id: wifi_signal_db
update_interval: 120s
entity_category: "diagnostic"
- platform: copy # Reports the WiFi signal strength in %
source_id: wifi_signal_db
name: "WiFi Signal Percent"
id: wifi_signal_percent
filters:
- lambda: return min(max(2 * (x + 100.0), 0.0), 100.0);
unit_of_measurement: "Signal %"
entity_category: "diagnostic"
- platform: uptime
name: Uptime
- platform: internal_temperature
name: "Internal Temperature"
- platform: template
name: "Display Last Update"
device_class: timestamp
entity_category: "diagnostic"
id: display_last_update
lambda: 'return id(homeassistant_time).now().timestamp;'
- platform: template
name: "Display Refresh Count"
accuracy_decimals: 0
unit_of_measurement: "Refreshes"
state_class: "total_increasing"
entity_category: "diagnostic"
lambda: 'return id(recorded_display_refresh) += 1;'
# Battery read ADC
# - platform: adc
# pin: GPIO4
# name: "A2 Voltage"
# id: LIION
# update_interval: never
# attenuation: 2.5db
# internal: true
# - platform: template
# name: "Battery Voltage"
# id: bat_v
# unit_of_measurement: 'V'
# update_interval: never
# accuracy_decimals: 2
# icon: "mdi:battery"
# lambda: |-
# return (id(LIION).state * 4);
# - platform: template
# name: "Battery Percentage"
# id: bat_percent
# unit_of_measurement: '%'
# update_interval: never
# accuracy_decimals: 0
# device_class: battery
# lambda: |-
# if(id(bat_v).state < 1)
# {return 0;}
# return ((id(bat_v).state-3) /1.2 * 100.00);
Here’s the YAML for the dashboard:
type: masonry
path: display
title: Display
cards:
- type: vertical-stack
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.kpajamis12
forecast_type: daily
secondary_info_attribute: humidity
card_mod:
style: |
:host {
--weather-icon-clear-night: url("/local/community/weather-card-pics/icons8-moon-and-stars-100.png");
--weather-icon-cloudy: url("/local/community/weather-card-pics/icons8-cloud-100.png");
--weather-icon-fog: url("/local/community/weather-card-pics/icons8-fog-100.png");
--weather-icon-lightning: url("/local/community/weather-card-pics/icons8-cloud-lightning-100.png");
--weather-icon-lightning-rainy: url("/local/community/weather-card-pics/icons8-stormy-weather-100.png");
--weather-icon-partlycloudy: url("/local/community/weather-card-pics/icons8-partly-cloudy-day-100.png");
--weather-icon-pouring: url("/local/community/weather-card-pics/icons8-torrential-rain-100.png");
--weather-icon-rainy: url("/local/community/weather-card-pics/icons8-rain-100.png");
--weather-icon-hail: url("/local/community/weather-card-pics/icons8-snow-storm-100.png");
--weather-icon-snowy: url("/local/community/weather-card-pics/icons8-snow-100.png");
--weather-icon-snowy-rainy: url("/local/community/weather-card-pics/icons8-snow-100.png");
--weather-icon-sunny: url("/local/community/weather-card-pics/icons8-sun-100.png");
--weather-icon-windy: url("/local/community/weather-card-pics/icons8-wind-100.png");
--weather-icon-windy-variant: url("/local/community/weather-card-pics/icons8-wind-100.png");
--weather-icon-exceptional: url("/local/community/weather-card-pics/icons8-rainbow-100.png");
}
ha-card {
border: 2px solid black;
padding: 10px !important;
}
.name-state .name {
color: black;
#font-size: 2px;
}
.name-state .state {
color: black;
#font-size: 7px;
}
.temp-attribute .temp {
color: black;
font-size: 26px !important;
}
.temp-attribute .temp span {
color: black;
#font-size: 7px !important;
}
.temp-attribute .attribute {
color: black;
font-size: 16px;
}
.forecast .temp {
color: black;
font-size: 20px;
}
.forecast .templow {
color: black;
font-size: 14px;
}
.forecast div {
color: black;
}
ha-card div.forecast div.temp {
font-size: 14pt;
}
- type: horizontal-stack
cards:
- graph: none
type: sensor
detail: 2
entity: sensor.home_thermostat_air_temperature
name: Inside
icon: mdi:home-thermometer
hours_to_show: 12
card_mod:
style: |
.header .icon {
color: black;
}
ha-card {
border: 2px solid black;
--secondary-text-color: black;
}
- graph: none
type: sensor
detail: 2
name: Outside
icon: mdi:sun-thermometer-outline
hours_to_show: 12
entity: sensor.acurite_5n1_a_3430_temperature
card_mod:
style: |
.header .icon {
color: black;
}
ha-card {
border: 2px solid black;
--secondary-text-color: black;
}
- graph: none
type: sensor
detail: 2
entity: sensor.aqualogic_pool_temperature
name: Pool
icon: mdi:pool-thermometer
hours_to_show: 12
card_mod:
style: |
.header .icon {
color: black;
}
ha-card {
border: 2px solid black;
--secondary-text-color: black;
}
- type: horizontal-stack
cards:
- graph: none
type: sensor
detail: 2
icon: ""
hours_to_show: 12
entity: sensor.acurite_5n1_a_3430_humidity
name: Humidity
card_mod:
style: |
.header .icon {
color: black;
}
ha-card {
border: 2px solid black;
--secondary-text-color: black;
}
- graph: none
type: sensor
detail: 2
entity: sensor.topwindspeedhr
name: Wind
icon: mdi:weather-windy
hours_to_show: 12
card_mod:
style: |
.header .icon {
color: black;
}
ha-card {
border: 2px solid black;
--secondary-text-color: black;
}
- graph: none
type: sensor
detail: 2
name: Rain
icon: ""
hours_to_show: 24
entity: sensor.kpajamis12_precipitation_today
card_mod:
style: |
.header .icon {
color: black;
}
ha-card {
border: 2px solid black;
--secondary-text-color: black;
}
- type: vertical-stack
cards:
- entities:
- entity: calendar.birthdays
show_time: true
- entity: calendar.philadelphia_phillies
show_time: true
- entity: calendar.carolina_panthers
show_time: true
- entity: calendar.holidays_in_united_states
show_time: true
split_multiday_events: false
- entity: calendar.north_carolina_tar_heels_men_s_basketball
show_time: true
- entity: calendar.philadelphia_eagles
show_time: true
- entity: calendar.email_gmail_com
show_time: true
days_to_show: 5
show_empty_days: true
filter_duplicates: true
title_color: ""
accent_color: Black
day_spacing: 4px
event_spacing: 2px
day_separator_width: 1px
day_separator_color: var(--primary-text-color)
today_indicator: dot
today_indicator_color: var(--primary-text-color)
event_font_size: 18px
time_font_size: 14px
time_color: var(--primary-text-color)
show_location: false
weather:
position: none
date:
show_conditions: true
show_high_temp: true
show_low_temp: false
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
event:
show_conditions: true
show_temp: true
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
entity: weather.kpajamis12
type: custom:calendar-card-pro
height: 350px
card_mod:
style: |
ha-card {
border: 2px solid black;
}
- type: heading
icon: mdi:update
heading: Last Update
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: false
entity: sensor.date_time
color: black
card_mod:
style: |
ha-card .title p {
font-size: 14px;
padding: 0px !important;
}
badges:
- type: custom:mod-card
card:
type: custom:mushroom-template-badge
content: "{{states('cover.ratgdov25i_1bdf3a_door') | capitalize }}"
icon: |
{% if is_state('cover.ratgdov25i_1bdf3a_door', 'closed') %}
mdi:garage
{% else %}
mdi:garage-open
{% endif %}
color: grey
entity: cover.ratgdov25i_1bdf3a_door
label: L Garage
tap_action:
action: more-info
card_mod:
style:
mushroom-template-badge:
$: |
.badge {
--divider-color: black;
--ha-card-border-width: 2px;
--mdc-icon-size: 32px !important;
.info {
.label {
font-size: 12px;
--secondary-text-color: black;
}
.content {
font-size: 14px;
}
}
.: |
ha-card {
background: none;
border: none;
}
- type: custom:mod-card
card:
type: custom:mushroom-template-badge
content: "{{states('cover.ratgdov25i_1ba3c0_door') | capitalize }}"
icon: |
{% if is_state('cover.ratgdov25i_1ba3c0_door', 'closed') %}
mdi:garage
{% else %}
mdi:garage-open
{% endif %}
color: grey
entity: cover.ratgdov25i_1ba3c0_door
label: M Garage
tap_action:
action: more-info
card_mod:
style:
mushroom-template-badge:
$: |
.badge {
--divider-color: black;
--ha-card-border-width: 2px;
--mdc-icon-size: 32px !important;
.info {
.label {
font-size: 12px;
--secondary-text-color: black;
}
.content {
font-size: 14px;
}
}
.: |
ha-card {
background: none;
border: none;
}
- type: custom:mod-card
card:
type: custom:mushroom-template-badge
content: "{{states('cover.ratgdov25i_1ba3c8_door') | capitalize }}"
icon: |
{% if is_state('cover.ratgdov25i_1ba3c8_door', 'closed') %}
mdi:garage
{% else %}
mdi:garage-open
{% endif %}
color: grey
entity: cover.ratgdov25i_1ba3c8_door
label: R Garage
tap_action:
action: more-info
card_mod:
style:
mushroom-template-badge:
$: |
.badge {
--divider-color: black;
--ha-card-border-width: 2px;
--mdc-icon-size: 32px !important;
.info {
.label {
font-size: 12px;
--secondary-text-color: black;
}
.content {
font-size: 14px;
}
}
.: |
ha-card {
background: none;
border: none;
}
- type: custom:mod-card
card:
type: custom:mushroom-template-badge
content: "{{states('lock.side_door_lock') | capitalize }}"
icon: |
{% if is_state('lock.side_door_lock', 'locked') %}
mdi:lock
{% else %}
mdi:lock-open
{% endif %}
color: grey
entity: lock.side_door_lock
label: Garage Lock
tap_action:
action: more-info
card_mod:
style:
mushroom-template-badge:
$: |
.badge {
--divider-color: black;
--ha-card-border-width: 2px;
--mdc-icon-size: 24px !important;
.info {
.label {
font-size: 12px;
--secondary-text-color: black;
}
.content {
font-size: 14px;
}
}
.: |
ha-card {
background: none;
border: none;
}
- type: custom:mod-card
card:
type: custom:mushroom-template-badge
content: "{{states('input_select.washing_machine_status') }}"
icon: |
{% if is_state('input_select.washing_machine_status', 'Off') %}
mdi:washing-machine-off
{% elif is_state('input_select.washing_machine_status', 'Not Empty') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
color: grey
entity: input_select.washing_machine_status
label: Washer
tap_action:
action: more-info
card_mod:
style:
mushroom-template-badge:
$: |
.badge {
--divider-color: black;
--ha-card-border-width: 2px;
--mdc-icon-size: 24px !important;
.info {
.label {
font-size: 12px;
--secondary-text-color: black;
}
.content {
font-size: 14px;
}
}
.: |
ha-card {
background: none;
border: none;
}
- type: custom:mod-card
card:
type: custom:mushroom-template-badge
content: "{{states('input_select.dryer_status') }}"
icon: |
{% if is_state('input_select.dryer_status', 'Off') %}
mdi:tumble-dryer-off
{% elif is_state('input_select.dryer_status', 'Not Empty') %}
mdi:tumble-dryer-alert
{% else %}
mdi:tumble-dryer
{% endif %}
color: grey
entity: input_select.dryer_status
label: Dryer
tap_action:
action: more-info
card_mod:
style:
mushroom-template-badge:
$: |
.badge {
--divider-color: black;
--ha-card-border-width: 2px;
--mdc-icon-size: 24px !important;
.info {
.label {
font-size: 12px;
--secondary-text-color: black;
}
.content {
font-size: 14px;
}
}
.: |
ha-card {
background: none;
border: none;
}
I also changed the icons in the weather card to black and white icons. The default ones work, but sometimes multiple colors blend. I got the icons from icons8.com