Hi All
My need was to create a small screen that could display the temperature of our hot water at home.
Lots of messing about and finally have a base working version which you can adopt (note the one feed here is numerical and you will need to adjust for text etc)
- Create Your Device in Home Assistant ESPHome
First, you need to create a new device in ESPHome within Home Assistant:
- Go to ESPHome in your Home Assistant interface.
- Click + NEW DEVICE.
- Follow the prompts to create a new ESP32 device. You can give it a name like “My Display Device”.
- Add the Custom Font File
For your display to work correctly, you need to place the specified font file in the correct location within your Home Assistant configuration.
- Download
Arimo-Regular.ttf: Obtain theArimo-Regular.ttffont file. You can usually find this font online from open-source font repositories. - Place in Home Assistant:
- Using the File Editor add-on in Home Assistant (if installed): Navigate to
/config/esphome/and create a new folder namedfonts. UploadArimo-Regular.ttfinto thisfontsfolder. - Using Samba Share (if configured): Access your Home Assistant configuration share, navigate to the
esphomedirectory, create afontsfolder inside it, and copyArimo-Regular.ttfintoesphome/fonts/.The final path should beconfig/esphome/fonts/Arimo-Regular.ttf.
- Using the File Editor add-on in Home Assistant (if installed): Navigate to
- Paste Your YAML Configuration and Build the Firmware
Now, it’s time to add your specific configuration and compile the firmware:
- Once your new device is created in ESPHome, click EDIT on it.
- Crucially, paste your YAML code after the
captive_portal:section in the editor.
i2c:
- sda: 21
scl: 22
scan: true
spi:
- id: tft
clk_pin: 14
mosi_pin: 13
miso_pin: 12
output:
- id: backlight_ctrl
platform: gpio
pin: 27
inverted: false
light:
- platform: binary
name: "${device_name} Display Backlight"
output: backlight_ctrl
restore_mode: ALWAYS_ON
font:
- file: "fonts/Arimo-Regular.ttf"
id: my_font
size: 20
time:
- platform: homeassistant
id: esphome_time
sensor:
- platform: homeassistant
entity_id: input_number.hot_water_temperature_helper
id: ha_temp
on_value:
then:
- logger.log:
format: "HA Temp Received: %.1f°C"
args: [id(ha_temp).state]
- component.update: main_display
# Display Configuration
display:
- id: main_display
platform: ili9xxx
model: TFT 2.4R
spi_id: tft
cs_pin:
number: 15
ignore_strapping_warning: true
dc_pin:
number: 2
ignore_strapping_warning: true
invert_colors: true
color_palette: 8BIT
update_interval: 60s # Or 60000ms. This will redraw the screen every minute.
auto_clear_enabled: true
transform:
swap_xy: true
mirror_x: false
dimensions:
height: 320
width: 240
lambda: |-
it.fill(Color::BLACK);
if (id(ha_temp).has_state()) {
if (!isnan(id(ha_temp).state)) {
it.printf(10, 10, id(my_font), "Water: %.1f°C", id(ha_temp).state);
} else {
it.printf(10, 10, id(my_font), "Water: --°C");
ESP_LOGD("DISPLAY", "Sensor state: NaN");
}
} else {
it.printf(10, 10, id(my_font), "Water: N/A");
ESP_LOGD("DISPLAY", "Sensor has no state");
}
touchscreen:
- platform: xpt2046
cs_pin: 33
calibration:
x_min: 280
x_max: 3860
y_min: 340
y_max: 3860
transform:
swap_xy: true
mirror_x: false
mirror_y: true`
- SAVE your changes.
- Click INSTALL on your device in ESPHome.
- Select “USB” or “Manual Download” (depending on the options presented). If you select “USB”, it will directly proceed to the flashing step using
web.esphome.io. If you select “Manual Download”, you’ll be prompted to download the.binfile. The key here is that ESPHome will compile your YAML into a.binfirmware file.
- Flash Your Device Using web.esphome.io
Now, flash the firmware onto your ESP32:
- If you chose “USB” in the previous step, you should already be on
web.esphome.io. If you chose “Manual Download”, open your browser and go tohttps://web.esphome.io/. - Connect your ESP32 to your computer via USB.
- On
web.esphome.io, click CONNECT and select the serial port for your ESP32. - Then, click INSTALL (or “Upload” if you previously downloaded the .bin file and need to select it). Follow the on-screen instructions to flash your ESP32.
- Verify Connection in Home Assistant ESPHome Logs
Once flashed, connect your ESP32 to power and verify its connection:
- Go back to Home Assistant and navigate to ESPHome.
- Click LOGS for your device.
- Crucially, check the logs for messages indicating a successful connection to your Wi-Fi and Home Assistant. Look for phrases like “Connected to Home Assistant.”
- Install the Device in Home Assistant Devices
This is a critical step for values to update correctly:
- If the logs confirm a successful connection, go to Settings > Devices & Services in Home Assistant.
- You should see a new ESPHome integration discovered. Click CONFIGURE or ADD DEVICE for this integration.
- Follow the prompts to add your ESP32 device. This action makes the entities defined in your YAML (like the display and backlight) available in Home Assistant.
Important Note on Data Display:
Your YAML uses entity_id: input_number.hot_water_temperature_helper to retrieve data. For your display to show meaningful values, you need to ensure this input_number entity in Home Assistant is being updated with the correct data. If you’re not using a temperature value, adjust the input_number entity and the corresponding display text in your YAML to match your desired data type (e.g., “Humidity: %.1f%%”, “Status: %s”).
Tip for Other Entity Types:
If you need to display or interact with other types of data like text or binary sensor states, the ESPHome lambda syntax for display and on_value for sensor can handle various formats. Don’t hesitate to use AI tools to get hints and examples on how to adapt your YAML for text-based entities (text_sensor) or binary states (binary_sensor) if your project evolves beyond numerical values.
Hope this helps someone not waste days on trying to get this to work