Ok, got it working, thank you @nouknouk for your researching and learnings on the touchscreen parts.
Here’s the YAML for ESPHome:
substitutions:
name: "bedroom-clock"
friendly_name: "Bedroom clock"
id_prefix: "bedroom_clock"
esphome:
name: ${name}
comment: "WT32-SC01"
on_boot:
then:
- if:
condition:
text_sensor.state:
id: clock_mode
state: "Night"
then:
- display.page.show: Night
- light.turn_on:
id: ${id_prefix}_backlight
brightness: 25%
- if:
condition:
text_sensor.state:
id: clock_mode
state: "Morning"
then:
- light.turn_on:
id: ${id_prefix}_backlight
brightness: 50%
- if:
condition:
text_sensor.state:
id: clock_mode
state: "Day"
then:
- display.page.show: Day
- light.turn_on:
id: ${id_prefix}_backlight
brightness: 75%
esp32:
board: esp-wrover-kit
framework:
type: arduino
packages:
device_base: !include includes/common_settings.yaml
external_components:
- source: github://gpambrozio/esphome@FT6336U-touch
components: [ ft63x6 ]
time:
- platform: homeassistant
id: homeassistant_time
output:
- platform: ledc
pin: GPIO23
id: gpio_23_backlight_pwm
light:
- platform: monochromatic
output: gpio_23_backlight_pwm
name: "${friendly_name} Backlight"
id: ${id_prefix}_backlight
restore_mode: RESTORE_DEFAULT_ON
i2c:
id: i2c_bus_intern
sda: 18
scl: 19
scan: false
spi:
clk_pin: GPIO14
mosi_pin: GPIO13
miso_pin: GPIO12
button:
- platform: restart
name: "${friendly_name} restart"
display:
- platform: ili9xxx
id: ${id_prefix}_display
model: ST7796
cs_pin: GPIO15
dc_pin: GPIO21
reset_pin: GPIO22
rotation: 90
pages:
- id: Day
lambda: |-
it.printf(245, 210, id(xxxxxlarge_font), TextAlign::BASELINE_CENTER, "%s", id(readable_ha_time).state.c_str());
- id: Music
lambda: |-
it.printf(150, 10, id(xxlarge_font), TextAlign::TOP_LEFT, "%s", id(readable_ha_time).state.c_str());
it.printf(50, 150, id(medium_font), TextAlign::TOP_LEFT, "%s", id(media_artist).state.c_str());
it.printf(50, 200, id(medium_font), TextAlign::TOP_LEFT, "%s", id(media_title).state.c_str());
it.printf(425, 280, id(small_font), TextAlign::TOP_LEFT, "SKIP");
- id: Night
lambda: |-
it.printf(245, 210, id(xxxxxlarge_font), my_red, TextAlign::BASELINE_CENTER, "%s", id(readable_ha_time).state.c_str());
touchscreen:
- platform: ft63x6
id: ${id_prefix}_touch
i2c_id: i2c_bus_intern
on_touch:
- logger.log:
format: Touch at (%d, %d)
args: [touch.x, touch.y]
font:
- file:
type: gfonts
family: "Open Sans"
id: xxxxxlarge_font
size: 160
- file:
type: gfonts
family: "Open Sans"
id: xxxxlarge_font
size: 140
- file:
type: gfonts
family: "Open Sans"
id: xxxlarge_font
size: 120
- file:
type: gfonts
family: "Open Sans"
id: xxlarge_font
size: 100
- file:
type: gfonts
family: "Open Sans"
id: xlarge_font
size: 80
- file:
type: gfonts
family: "Open Sans"
id: large_font
size: 60
- file:
type: gfonts
family: "Open Sans"
id: medium_font
size: 40
- file:
type: gfonts
family: "Open Sans"
id: small_font
size: 20
color:
- id: my_red
red: 100%
green: 3%
blue: 5%
- id: my_white
red: 100%
green: 100%
blue: 100%
text_sensor:
- platform: homeassistant
id: media_artist
entity_id: media_player.master_bedroom
attribute: media_artist
internal: true
- platform: homeassistant
id: media_title
entity_id: media_player.master_bedroom
attribute: media_title
internal: true
- platform: homeassistant
id: media_image
entity_id: media_player.master_bedroom
attribute: entity_picture
internal: true
- platform: homeassistant
id: media_state
entity_id: media_player.master_bedroom
internal: true
on_value:
- if:
condition:
text_sensor.state:
id: media_state
state: 'playing'
then:
- display.page.show: Music
else:
- display.page.show: Day
- platform: homeassistant
name: Readable_time
entity_id: sensor.12h_time
id: readable_ha_time
- platform: homeassistant
id: clock_mode
entity_id: input_select.bedroom_clock_mode
on_value:
then:
- if:
condition:
text_sensor.state:
id: clock_mode
state: "Night"
then:
- display.page.show: Night
- light.turn_on:
id: ${id_prefix}_backlight
transition_length: 0.1s
brightness: 25%
- if:
condition:
text_sensor.state:
id: clock_mode
state: "Morning"
then:
- light.turn_on:
id: ${id_prefix}_backlight
transition_length: 0.1s
brightness: 50%
- if:
condition:
text_sensor.state:
id: clock_mode
state: "Day"
then:
- light.turn_on:
id: ${id_prefix}_backlight
transition_length: 0.1s
brightness: 75%
binary_sensor:
- platform: touchscreen
name: Skip
id: skip_track
internal: True
x_min: 420
x_max: 470
y_min: 280
y_max: 320
filters:
- delayed_on: 30ms
on_press:
- homeassistant.service:
service: media_player.media_next_track
data:
entity_id: media_player.master_bedroom
I have a dropdown helper called “Bedroom clock mode”, which has options of: Day, Night, Morning.
These will make the screen to switch to another page where the clock is in red font and set the backlight brightness values depending on time of day. This is used by the automations in HA.
I could probably make this cleaner using a scene, but this works for now.
Automation actions for switching the screen out of night mode, but not turning up the backlight too much:
service: input_select.select_option
data:
option: Morning
target:
entity_id: input_select.bedroom_clock_mode
Automation actions for setting the brightness to 100% when the blinds are opened:
service: input_select.select_option
data:
option: Day
target:
entity_id: input_select.bedroom_clock_mode
Automation actions for dimming the clock and getting it to change to the page with the red font (aka “night mode” - when my wife turns her lamp off):
service: input_select.select_option
data:
option: Night
target:
entity_id: input_select.bedroom_clock_mode
Here’s the clock in normal daytime:
Here’s the clock when a song is playing on the speaker that it’s sitting on top of:
This is how it looks at night (unfortunately the phone tried to compensate for the dark, so it looks a lot brighter than it actually is):
And here it is when we wake up in the morning, but aren’t fully awake yet (again, looks brighter than it actually is):
Next steps from here would be to figure out if I can word wrap the song title, maybe show duration and current position (I’m already pulling those values but not using them yet), and getting a right-angled USB cable.