ESPHome

https://esphome.io/cookbook/
Admin
ESPHome is a system that lets you control your ESP8266 and ESP32 boards by simple yet powerful...
Tokens:27,598
Snippets:201
Trust Score:9.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### ESPHome Configuration for ESP32

Source: https://esphome.io/cookbook/ehmtx

YAML configuration example for an ESP32 device using ESPHome. This configuration is for setting up the ehmtx component.

```yaml
esp32:
  board: "esp32dev"
  framework:
    type: "arduino"

logger:

api:

ota:

esphome:
  name: ehmtx
  project:
    name: ehmtx
    version: "1.0.0"

wifi:
  ssid: "YourSSID"
  password: "YourPassword"

# Enable fallback hotspot (captive portal) in case wifi connection fails
# network:
#   ap:
#     ssid: "Fallback Hotspot"
#     password: "12345678"

# Example of how to use the ehmtx component:
# ehmtx:
#   id: ehmtx_display
#   # Optional: Define the matrix dimensions if not 8x32
#   width: 32
#   height: 8
#   # Optional: Define the refresh rate
#   update_interval: 10s
#   # Optional: Define the font
#   font:
#     file: "/fonts/custom.ttf"
#     id: my_custom_font

# Example of how to add text to the display:
# text:
#   - id: my_text_element
#     text: "Hello World"
#     color: "#FFFFFF"
#     priority: 1
#     lifetime: 60s
#     x: 0
#     y: 0
#     font: !ref my_custom_font

# Example of how to add an icon to the display:
# icon:
#   - id: my_icon_element
#     icon: "mdi:home"
#     color: "#00FF00"
#     priority: 2
#     lifetime: 60s
#     x: 8
#     y: 0

```

--------------------------------

### BME280 Sensor Configuration (General)

Source: https://esphome.io/cookbook/bme280_environment

Basic configuration for a BME280 sensor, defining temperature, pressure, and humidity components. This example uses a generic 'bme280' platform, suitable when specific I²C or SPI variants are not explicitly needed.

```yaml
sensor:
  - platform: bme280
    temperature:
      name: "BME280 Temperature"
      id: bme280_temperature
    pressure:
      name: "BME280 Pressure"
      id: bme280_pressure
    humidity:
      name: "BME280 Relative Humidity"
      id: bme280_humidity
    address: 0x77
    update_interval: 15s
```

--------------------------------

### ESPHome Configuration for Infostripe

Source: https://esphome.io/cookbook/infostrip

This configuration sets up the UART communication, a MH-Z19 sensor for CO2 and temperature, a binary sensor for WiFi status, and configures individual Neopixels as lights with effects.

```yaml
uart:
  rx_pin: GPIOXX
  tx_pin: GPIOXX
  baud_rate: 9600


sensor:
  - platform: mhz19
    co2:
      name: "MH-Z19 CO2 Value"
    temperature:
      name: "MH-Z19 Temperature"
    update_interval: 30s


# Monitor the Wifi connection status
binary_sensor:
  - platform: status
    name: "Infostrip Status"


# Configure each pixel as a single light (attention memory consuming)
light:
  - platform: fastled_clockless
    chipset: WS2812B
    id: light_fastled
    pin: GPIOXX
    num_leds: 4
    rgb_order: GRB
    name: "Infostrip"
    effects:
      - strobe:
      - random:
  - platform: partition
    name: "PL0"
    segments:
      - id: light_fastled
          from: 0
          to: 0
    effects:
      - strobe:
  - platform: partition
    name: "PL1"
    segments:
      - id: light_fastled
          from: 1
          to: 1
    effects:
      - strobe:
  - platform: partition
    name: "PL2"
    segments:
      - id: light_fastled
          from: 2
          to: 2
    effects:
      - strobe:
  - platform: partition
    name: "PL3"
    segments:
      - id: light_fastled
          from: 3
          to: 3
    effects:
      - strobe:
```

--------------------------------

### Configure LVGL Boot Screen

Source: https://esphome.io/cookbook/lvgl

Defines the boot screen layout in the top layer and sets an on_boot trigger to hide it after a delay or user interaction.

```yaml
esphome:
  ...
  on_boot:
    - delay: 5s
    - lvgl.widget.hide: boot_screen


image:
  - platform: file
    file: https://media.esphome.io/logo/logo.png
    id: boot_logo
    resize: 200x200
    type: RGB565
    transparency: alpha_channel


lvgl:
  ...
  top_layer:
    widgets:
      ... # make sure it's the last one in this list:
      - obj:
          id: boot_screen
          x: 0
          y: 0
          width: 100%
          height: 100%
          bg_color: 0xffffff
          bg_opa: COVER
          radius: 0
          pad_all: 0
          border_width: 0
          widgets:
            - image:
                align: CENTER
                src: boot_logo
                y: -50
            - spinner:
                align: CENTER
                y: 50
                height: 50
                width: 50
                spin_time: 1s
                arc_length: 60deg
                arc_width: 8
                indicator:
                  arc_color: 0x18bcf2
                  arc_width: 8
          on_press:
            - lvgl.widget.hide: boot_screen
```

--------------------------------

### S0 Port Connection Diagram

Source: https://esphome.io/cookbook/power_meter

Connect the S0 port of your power meter to your ESPHome device using a 10k resistor to GND. Adjust the GPIO pin to match your setup.

```text
S0 ------------ VCC
S0 --+-- 10k -- GND
.    |
.    +--------- GPIO12
```

--------------------------------

### Compile and Upload Firmware with ESPHome CLI

Source: https://esphome.io/cookbook/sonoff-fishpond-pump

This command is used to compile and upload the ESPHome firmware to your device. Ensure your device is connected via USB or configured for OTA updates.

```bash
esphome <some-yaml-file> run

```

--------------------------------

### BME280 Sensor Configuration

Source: https://esphome.io/cookbook/bme280_environment

Configure the BME280 sensor for I²C communication, defining temperature, pressure, and humidity readings with unique IDs. This setup is suitable for general environmental monitoring.

```yaml
sensor:
  - platform: bme280_i2c
    temperature:
      name: "BME280 Temperature"
      id: bme280_temperature
    pressure:
      name: "BME280 Pressure"
      id: bme280_pressure
    humidity:
      name: "BME280 Relative Humidity"
      id: bme280_humidity
    address: 0x77
    update_interval: 15s
```

--------------------------------

### Configure ESPHome Substitutions and Core Settings

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Define device-specific variables and core ESPHome settings. Ensure your Wi-Fi credentials and fallback AP password are set as secrets.

```yaml
substitutions:
  devicename: basement_leak_detector
  friendly_name: Basement Leak Detector
  device_description: Leak detector in basement utility room

esphome:
  name: $devicename
  comment: ${device_description}

esp32:
  board: m5stick-c

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    password: !secret fallback_ap_password

captive_portal:

logger:

```

--------------------------------

### Configure ESP32 Touch Sensor

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Sets up an ESP32 touch sensor with an IIR filter for noise reduction. The `setup_mode` is commented out, indicating it's not active by default.

```yaml
esp32_touch:
  #setup_mode: true
  iir_filter: 10ms
```

--------------------------------

### Home Assistant Automation for CO2 Warning

Source: https://esphome.io/cookbook/infostrip

This automation turns a specific light (PL2) red when CO2 levels exceed 1000 ppm and turns it off when levels drop below 800 ppm. Ensure the entity IDs match your setup.

```yaml
automation:
- id: '1601241280015'
  alias: Light CO2 On
  description: ''
  trigger:
    - platform: numeric_state
      entity_id: sensor.mh_z19_co2_value
      above: 1000
  condition: []
  action:
    - action: light.turn_on
      data:
      color_name: red
      entity_id: light.pl2
  mode: single
- id: '1601241280016'
  alias: Light CO2 Off
  description: ''
  trigger:
    - platform: numeric_state
      entity_id: sensor.mh_z19_co2_value
      below: 800
  condition: []
  action:
    - action: light.turn_off
      entity_id: light.pl2
      mode: single
```

--------------------------------

### ESPHome Configuration for Fish Pond Pump

Source: https://esphome.io/cookbook/sonoff-fishpond-pump

This YAML configuration sets up a Sonoff Basic for fish pond pump automation. It includes Wi-Fi credentials, logging, OTA updates, status LED, uptime and Wi-Fi signal sensors, a restart switch, and the main pump control via GPIO12. It also configures a button on GPIO0 to toggle the pump and a float sensor on GPIO14 to turn off the pump when water is low.

```yaml
esphome:
  name: fishpond


esp8266:
  board: esp01_1m


wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password


# Enable logging
logger:


ota:
  platform: esphome


api:


status_led:
  pin: GPIO13


sensor:
  - platform: uptime
    name: "ESP Fish Pond System Uptime"


  - platform: wifi_signal
    name: "ESP Fish Pond WiFi Signal"
    update_interval: 15s


switch:
  ## restart
  - platform: restart
    name: "ESP Fish Pond Restart"

  ## relay / pump
  - platform: gpio
    pin: GPIO12
    name: "ESP Fish Pond Pump"
    id: esp_fishpond_pump


binary_sensor:
  - platform: status
    name: "ESP Fish Pond System Status"

  ## button - toggle relay
  - platform: gpio
    name: "ESP Fish Pond Button"
    pin:
      number: GPIO0
      inverted: true
    # Toggle pump when user presses the Sonoff Button
    on_press:
      - switch.toggle: esp_fishpond_pump

  # onboard header pin - sensor
  # when threshold is reached, turn off
  - platform: gpio
    name: "esp_fishpond_gpio14"
    pin:
      number: 14
      mode:
        input: true
        pullup: true
    on_press:
      - switch.turn_off: esp_fishpond_pump

## Use time
time:
  - platform: homeassistant
    ## Set your timezone
    timezone: Africa/Johannesburg
    on_time:
      # Switch on on the hour
      - seconds: 0
        minutes: 0
        hours: '*'
        then:
          - switch.turn_on: esp_fishpond_pump
          # Switch off 10 minutes later
          - delay: 10min
          - switch.turn_off: esp_fishpond_pump

```

--------------------------------

### Configure Cover Status and Control UI

Source: https://esphome.io/cookbook/lvgl

Uses Home Assistant sensors to track cover position and state, updating LVGL widget opacity and labels dynamically.

```yaml
sensor:
  - platform: homeassistant
    id: cover_myroom_pos
    entity_id: cover.myroom
    attribute: current_position
    on_value:
      - if:
          condition:
            lambda: |-
              return x == 100;
          then:
            - lvgl.widget.update:
                id: cov_up_myroom
                text_opa: 60%
          else:
            - lvgl.widget.update:
                id: cov_up_myroom
                text_opa: 100%
      - if:
          condition:
            lambda: |-
              return x == 0;
          then:
            - lvgl.widget.update:
                id: cov_down_myroom
                text_opa: 60%
          else:
            - lvgl.widget.update:
                id: cov_down_myroom
                text_opa: 100%


text_sensor:
  - platform: homeassistant
    id: cover_myroom_state
    entity_id: cover.myroom
    on_value:
      - if:
          condition:
            lambda: |-
              return (x == "opening" or x == "closing");
          then:
            - lvgl.label.update:
                id: cov_stop_myroom
                text: "STOP"
          else:
            - lvgl.label.update:
                id: cov_stop_myroom
                text:
                  format: "%.0f%%"
                  args: [ 'id(cover_myroom_pos).get_state()' ]


lvgl:
    ...
    pages:
      - id: room_page
        widgets:
          - label:
              x: 10
              y: 6
              width: 70
              text: "My room"
              text_align: CENTER
          - button:
              x: 10
              y: 30
              width: 70
              height: 68
              widgets:
                - label:
                    id: cov_up_myroom
                    align: CENTER
                    text: "\uF077"
              on_press:
                then:
                  - homeassistant.action:
                      action: cover.open
                      data:
                        entity_id: cover.myroom
          - button:
              x: 10
              y: 103
              width: 70
              height: 68
              widgets:
                - label:
                    id: cov_stop_myroom
                    align: CENTER
                    text: STOP
              on_press:
                then:
                  - homeassistant.action:
                      action: cover.stop
                      data:
                        entity_id: cover.myroom
          - button:
              x: 10
              y: 178
              width: 70
              height: 68
              widgets:
                - label:
                    id: cov_down_myroom
                    align: CENTER
                    text: "\uF078"
              on_press:
                then:
                  - homeassistant.action:
                      action: cover.close
                      data:
                        entity_id: cover.myroom
```

--------------------------------

### Configure Home Assistant Temperature Sensors

Source: https://esphome.io/cookbook/display_time_temp_oled

Integrate temperature sensors from Home Assistant into ESPHome. Use `internal: true` to prevent these sensors from being published back to Home Assistant.

```yaml
sensor:
  - platform: homeassistant
    id: inside_temperature
    entity_id: REPLACEME
    internal: true


  - platform: homeassistant
    id: outside_temperature
    entity_id: REPLACEME
    internal: true


text_sensor:
  - platform: homeassistant
    id: outside_temperature_unit
    entity_id: REPLACEME
    attribute: temperature_unit
    internal: true
```

--------------------------------

### Implement Media Player Volume Slider

Source: https://esphome.io/cookbook/lvgl

Configures a Home Assistant sensor to update an LVGL slider and sets up the slider widget to control media player volume via lambda conversions.

```yaml
sensor:
  - platform: homeassistant
    id: media_player_volume
    entity_id: media_player.your_room
    attribute: volume_level
    on_value:
      - lvgl.slider.update:
          id: slider_media_player
          value: !lambda return (x * 100);


lvgl:
    ...
    pages:
      - id: mediaplayer_page
        widgets:
          - slider:
              id: slider_media_player
              x: 60
              y: 50
              width: 30
              height: 220
              pad_all: 8
              min_value: 0
              max_value: 100
              adv_hittest: true
              on_value:
                - homeassistant.action:
                    action: media_player.volume_set
                    data:
                      entity_id: media_player.your_room
                      volume_level: !lambda return (x / 100);
```

--------------------------------

### Implement Display Pages with Lambda

Source: https://esphome.io/cookbook/lambda_magic

Use a Lambda function with the lcd_pcf8574 component to simulate page support for displays that don't natively handle it. The lambda logic cycles through different page states.

```yaml
display:
  - platform: lcd_pcf8574
    dimensions: 20x4
    address: 0x27
    id: lcd
    lambda: |- 
          switch (id(page)){
            case 1:
              it.print(0, 1, "Page1");
              break;
            case 2:
              it.print(0, 1, "Page2");
              break;
            case 3:
              it.print(0, 1, "Page3");
              break;
          }

globals:
- id: page
  type: int
  initial_value: "1"


interval:
- interval: 5s
  then:
    - lambda: |- 
        id(page) = (id(page) + 1);
        if (id(page) > 3) {
          id(page) = 1;
        }

```

--------------------------------

### Enable API and OTA Updates

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Enables the Home Assistant API for seamless integration and Over-The-Air update capabilities for the ESPHome device.

```yaml
api:
ota:
  platform: esphome
```

--------------------------------

### Configure Second GPIO Binary Sensor for Button

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Defines a second GPIO binary sensor attached to GPIO39, also configured to toggle the 'led1' switch upon being pressed.

```yaml
  - platform: gpio
    pin:
      number: GPIO39
      inverted: true
    id: button_b
    on_press:
      then:
        - switch.toggle: led1
```

--------------------------------

### Configure LVGL light brightness slider

Source: https://esphome.io/cookbook/lvgl

Uses a Home Assistant sensor to track brightness and an LVGL slider widget to control the light state.

```yaml
sensor:
  - platform: homeassistant
    id: light_brightness
    entity_id: light.your_dimmer
    attribute: brightness
    on_value:
      - lvgl.slider.update:
          id: dimmer_slider
          value: !lambda return x;


lvgl:
    ...
    pages:
      - id: room_page
        widgets:
          - slider:
              id: dimmer_slider
              x: 20
              y: 50
              width: 20
              height: 220
              pad_all: 8
              min_value: 0
              max_value: 255
              ext_click_area: 20
              on_release:
                - homeassistant.action:
                    action: light.turn_on
                    data:
                      entity_id: light.your_dimmer
                      brightness: !lambda return int(x);
```

--------------------------------

### Configure LVGL idle timeout and screen wake

Source: https://esphome.io/cookbook/lvgl

Uses on_idle to pause LVGL and turn off the backlight, with a template number to adjust the timeout duration.

```yaml
lvgl:
  ...
  on_idle:
    timeout: !lambda "return (id(display_timeout).state * 1000);"
    then:
      - logger.log: "LVGL is idle"
      - light.turn_off: display_backlight
      - lvgl.pause:


touchscreen:
  - platform: ...
    on_release:
      - if:
          condition: lvgl.is_paused
          then:
            - logger.log: "LVGL resuming"
            - lvgl.resume:
            - lvgl.widget.redraw:
            - light.turn_on: display_backlight


light:
  - platform: ...
    id: display_backlight


number:
  - platform: template
    name: LVGL Screen timeout
    optimistic: true
    id: display_timeout
    unit_of_measurement: "s"
    initial_value: 45
    restore_value: true
    min_value: 10
    max_value: 180
    step: 5
    mode: box
```

--------------------------------

### Implement LCD pixel training for burn-in prevention

Source: https://esphome.io/cookbook/lvgl

Uses the show_snow option during a paused state to exercise pixels, triggered by a time schedule.

```yaml
time:
  - platform: ...
    on_time:
      - hours: 2,3,4,5
        minutes: 5
        seconds: 0
        then:
          - switch.turn_on: switch_antiburn
      - hours: 2,3,4,5
        minutes: 35
        seconds: 0
        then:
          - switch.turn_off: switch_antiburn


switch:
  - platform: template
    name: Antiburn
    id: switch_antiburn
    icon: mdi:television-shimmer
    optimistic: true
    entity_category: "config"
    turn_on_action:
      - logger.log: "Starting Antiburn"
      - if:
          condition: lvgl.is_paused
          then:
            - lvgl.resume:
            - lvgl.widget.redraw:
      - lvgl.pause:
          show_snow: true
    turn_off_action:
      - logger.log: "Stopping Antiburn"
      - if:
          condition: lvgl.is_paused
          then:
            - lvgl.resume:
            - lvgl.widget.redraw:


touchscreen:
  - platform: ...
    on_release:
      then:
        - if:
            condition: lvgl.is_paused
            then:
              - lvgl.resume:
              - lvgl.widget.redraw:
```

--------------------------------

### Define LVGL themes and styles

Source: https://esphome.io/cookbook/lvgl

Configure global widget styles within the theme section and define reusable style definitions for specific UI elements.

```yaml
lvgl:
  ...
  theme:
    label:
      text_font: my_font # set all your labels to use your custom defined font
    button:
      bg_color: 0x2F8CD8
      bg_grad_color: 0x005782
      bg_grad_dir: VER
      bg_opa: COVER
      border_color: 0x0077b3
      border_width: 1
      text_color: 0xFFFFFF
      pressed: # set some button colors to be different in pressed state
        bg_color: 0x006699
        bg_grad_color: 0x00334d
      checked: # set some button colors to be different in checked state
        bg_color: 0x1d5f96
        bg_grad_color: 0x03324A
        text_color: 0xfff300
    buttonmatrix:
      bg_opa: TRANSP
      border_color: 0x0077b3
      border_width: 0
      text_color: 0xFFFFFF
      pad_all: 0
      items: # set all your buttonmatrix buttons to use your custom defined styles and font
        bg_color: 0x2F8CD8
        bg_grad_color: 0x005782
        bg_grad_dir: VER
        bg_opa: COVER
        border_color: 0x0077b3
        border_width: 1
        text_color: 0xFFFFFF
        text_font: my_font
        pressed:
          bg_color: 0x006699
          bg_grad_color: 0x00334d
        checked:
          bg_color: 0x1d5f96
          bg_grad_color: 0x03324A
          text_color: 0x005580
    switch:
      bg_color: 0xC0C0C0
      bg_grad_color: 0xb0b0b0
      bg_grad_dir: VER
      bg_opa: COVER
      checked:
        bg_color: 0x1d5f96
        bg_grad_color: 0x03324A
        bg_grad_dir: VER
        bg_opa: COVER
      knob:
        bg_color: 0xFFFFFF
        bg_grad_color: 0xC0C0C0
        bg_grad_dir: VER
        bg_opa: COVER
    slider:
      border_width: 1
      border_opa: 15%
      bg_color: 0xcccaca
      bg_opa: 15%
      indicator:
        bg_color: 0x1d5f96
        bg_grad_color: 0x03324A
        bg_grad_dir: VER
        bg_opa: COVER
      knob:
        bg_color: 0x2F8CD8
        bg_grad_color: 0x005782
        bg_grad_dir: VER
        bg_opa: COVER
        border_color: 0x0077b3
        border_width: 1
        text_color: 0xFFFFFF
  style_definitions:
    - id: header_footer
      bg_color: 0x2F8CD8
      bg_grad_color: 0x005782
      bg_grad_dir: VER
      bg_opa: COVER
      border_opa: TRANSP
      radius: 0
      pad_all: 0
      pad_row: 0
      pad_column: 0
      border_color: 0x0077b3
      text_color: 0xFFFFFF
      width: 100%
      height: 30
```

--------------------------------

### Implement LVGL Grid Layout

Source: https://esphome.io/cookbook/lvgl

Configures a container with a grid layout, defining proportional rows and columns to automatically position child widgets.

```yaml
lvgl:
    ...
    pages:
      - id: room_page
        widgets:
          - obj: # a properly placed container object for all these controls
              align: CENTER
              width: 240
              height: 256
              pad_all: 6
              bg_opa: TRANSP
              border_opa: TRANSP
              layout: # enable the GRID layout for the children widgets
                type: GRID # split the rows and the columns proportionally
                grid_columns: [FR(1), FR(1), FR(1)] # equal
                grid_rows: [FR(10), FR(30), FR(30), FR(30)] # like percents
                pad_row: 6
                pad_column: 8
              widgets:
                - label:
                    text: "East"
                    grid_cell_column_pos: 0 # place the widget in
                    grid_cell_row_pos: 0 # the corresponding cell
                    grid_cell_x_align: CENTER
                    grid_cell_y_align: STRETCH
                - button:
                    id: but_cov_up_east
                    grid_cell_column_pos: 0
                    grid_cell_row_pos: 1
                    grid_cell_x_align: STRETCH
                    grid_cell_y_align: STRETCH
                    widgets:
                      - label:
                          id: cov_up_east
                          align: CENTER
                          text: "\uF077"
                          text_font: montserrat_48
                - button:
                    id: but_cov_stop_east
                    grid_cell_column_pos: 0
                    grid_cell_row_pos: 2
                    grid_cell_x_align: STRETCH
                    grid_cell_y_align: STRETCH
                    widgets:
                      - label:
                          id: cov_stop_east
                          align: CENTER
                          text: "\uF04D"
                          text_font: montserrat_30
                - button:
                    id: but_cov_down_east
                    grid_cell_column_pos: 0
                    grid_cell_row_pos: 3
                    grid_cell_x_align: STRETCH
                    grid_cell_y_align: STRETCH
                    widgets:
                      - label:
                          id: cov_down_east
                          align: CENTER
                          text: "\uF078"
                          text_font: montserrat_48


                - label:
                    text: "South"
                    grid_cell_column_pos: 1
                    grid_cell_row_pos: 0
                    grid_cell_x_align: CENTER
                    grid_cell_y_align: STRETCH
                - button:
                    id: but_cov_up_south
                    grid_cell_column_pos: 1
                    grid_cell_row_pos: 1
                    grid_cell_x_align: STRETCH
                    grid_cell_y_align: STRETCH
                    widgets:
                      - label:
                          id: cov_up_south
                          align: CENTER
                          text: "\uF077"
                          text_font: montserrat_48
                - button:
                    id: but_cov_stop_south
                    grid_cell_column_pos: 1
                    grid_cell_row_pos: 2
                    grid_cell_x_align: STRETCH
                    grid_cell_y_align: STRETCH
                    widgets:
                      - label:
                          id: cov_stop_south
                          align: CENTER
                          text: "\uF04D"
                          text_font: montserrat_30
                - button:
                    id: but_cov_down_south
                    grid_cell_column_pos: 1
                    grid_cell_row_pos: 3
                    grid_cell_x_align: STRETCH
                    grid_cell_y_align: STRETCH
                    widgets:
                      - label:
                          id: cov_down_south
                          align: CENTER
                          text: "\uF078"
                          text_font: montserrat_48
```

--------------------------------

### Configure Thermostat Control UI

Source: https://esphome.io/cookbook/lvgl

Defines the LVGL page layout with a spinbox and increment/decrement buttons to control climate temperature.

```yaml
lvgl:
    ...
    pages:
      - id: thermostat_control
        widgets:
          - obj:
              align: BOTTOM_MID
              y: -50
              layout:
                type: FLEX
                flex_flow: ROW
                flex_align_cross: CENTER
              width: SIZE_CONTENT
              height: SIZE_CONTENT
              widgets:
                - button:
                    id: spin_down
                    on_click:
                      - lvgl.spinbox.decrement: spinbox_id
                    widgets:
                      - label:
                           text: "-"
                - spinbox:
                    id: spinbox_id
                    align: CENTER
                    text_align: CENTER
                    width: 50
                    range_from: 15
                    range_to: 35
                    selected_digit: 0
                    rollover: false
                    digits: 3
                    decimal_places: 1
                    on_value:
                      then:
                        - homeassistant.action:
                            action: climate.set_temperature
                            data:
                              temperature: !lambda return x;
                              entity_id: climate.room_thermostat
                - button:
                    id: spin_up
                    on_click:
                      - lvgl.spinbox.increment: spinbox_id
                    widgets:
                      - label:
                          text: "+"
```

--------------------------------

### Configure GPIO Binary Sensor for Button

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Defines a GPIO binary sensor attached to GPIO37, configured to toggle the state of the 'led1' switch when pressed.

```yaml
binary_sensor:
  - platform: gpio
    pin:
      number: GPIO37
      inverted: true
    id: button_a
    on_press:
      then:
        - switch.toggle: led1
```

--------------------------------

### Local light switch integration

Source: https://esphome.io/cookbook/lvgl

Uses automations to sync a local light's state with an LVGL switch widget.

```yaml
light:
  - platform: ...
    id: local_light
    name: 'Local light'
    on_state:
      - lvgl.widget.update:
          id: light_switch
          state:
            checked: !lambda return id(local_light).current_values.is_on();


lvgl:
    ...
    pages:
      - id: main_page
        widgets:
          - switch:
              align: CENTER
              id: light_switch
              on_click:
                light.toggle: local_light
```

--------------------------------

### Configure battery charging animation images and widget

Source: https://esphome.io/cookbook/lvgl

Defines a series of binary image files and an animimg widget to create a battery charging animation.

```yaml
image:
  - platform: file
    file: mdi:battery-10
    type: BINARY
    id: batt_10
    resize: 20x20
  - platform: file
    file: mdi:battery-20
    type: BINARY
    id: batt_20
    resize: 20x20
  - platform: file
    file: mdi:battery-30
    type: BINARY
    id: batt_30
    resize: 20x20
  - platform: file
    file: mdi:battery-40
    type: BINARY
    id: batt_40
    resize: 20x20
  - platform: file
    file: mdi:battery-50
    type: BINARY
    id: batt_50
    resize: 20x20
  - platform: file
    file: mdi:battery-60
    type: BINARY
    id: batt_60
    resize: 20x20
  - platform: file
    file: mdi:battery-70
    type: BINARY
    id: batt_70
    resize: 20x20
  - platform: file
    file: mdi:battery-80
    type: BINARY
    id: batt_80
    resize: 20x20
  - platform: file
    file: mdi:battery-90
    type: BINARY
    id: batt_90
    resize: 20x20
  - platform: file
    file: mdi:battery
    type: BINARY
    id: batt_full
    resize: 20x20
  - platform: file
    file: mdi:battery-outline
    type: BINARY
    id: batt_empty
    resize: 20x20


lvgl:
    ...
    pages:
      - id: battery_page
        widgets:
          - animimg:
              align: TOP_RIGHT
              y: 5
              x: -15
              id: ani_battery_charging
              src: [
                batt_empty,
                batt_10,
                batt_20,
                batt_30,
                batt_40,
                batt_50,
                batt_60,
                batt_70,
                batt_80,
                batt_90,
                batt_full
                ]
              duration: 2200ms
```

--------------------------------

### Home Assistant State Light Mapping Automation

Source: https://esphome.io/cookbook/infostrip

This automation maps the state of a binary sensor (e.g., 'bad_status') to a light's color (green for 'on', red for 'off', white for unknown). It runs every 5 minutes.

```yaml
- alias: "State Light Mapping"
  trigger:
  platform: time_pattern
  # You can also match on interval. This will match every 5 minutes
  minutes: "/5"
  action:
    - action: light.turn_on
      data_template:
      entity_id: light.pl1
      brightness_pct: 30
      color_name: >
          {% set map = {'on': 'green', 'off': 'red'} %}
          {% set state = states('binary_sensor.bad_status') %}
          {{ map[state] if state in map else 'white' }}
```

--------------------------------

### Configure Version Text Sensor

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Creates a text sensor to display the current ESPHome version running on the device.

```yaml
text_sensor:
  - platform: version
    name: "${friendly_name} ESPHome version"
```

--------------------------------

### Configure Status Binary Sensor

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Creates a binary sensor that reports the status of the ESPHome device, useful for monitoring its operational state.

```yaml
  - platform: status
    name: "${friendly_name} Status"
```

--------------------------------

### Configure Font

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Loads a custom font file 'OpenSans-Regular.ttf' and assigns it the ID 'font1' with a size of 66.

```yaml
font:
  - file: 'OpenSans-Regular.ttf'
    id: font1
    size: 66
```

--------------------------------

### Configure LVGL Flex Layout for Control Panel

Source: https://esphome.io/cookbook/lvgl

Uses a container object with a FLEX layout to organize multiple cover control buttons and labels in a column-wrapped arrangement.

```yaml
lvgl:
    ...
    pages:
      - id: room_page
        widgets:
          - obj: # a properly placed container object for all these controls
              align: CENTER
              width: 240
              height: 256
              x: 4
              y: 4
              pad_all: 3
              bg_opa: TRANSP
              border_opa: TRANSP
              layout: # enable the FLEX layout for the children widgets
                type: FLEX
                flex_flow: COLUMN_WRAP # the order of the widgets starts top left
                flex_align_cross: CENTER # they sould be centered
                pad_row: 6
                pad_column: 8
              widgets:
                - label:
                    text: "East"
                - button:
                    id: but_cov_up_east
                    width: 70 # choose the button dimensions so
                    height: 68 # they fill the columns nicely as they flow
                    widgets:
                      - label:
                          id: cov_up_east
                          align: CENTER
                          text: "\uF077"
                          text_font: montserrat_48
                - button:
                    id: but_cov_stop_east
                    width: 70
                    height: 68
                    widgets:
                      - label:
                          id: cov_stop_east
                          align: CENTER
                          text: "\uF04D"
                          text_font: montserrat_30
                - button:
                    id: but_cov_down_east
                    width: 70
                    height: 68
                    widgets:
                      - label:
                          id: cov_down_east
                          align: CENTER
                          text: "\uF078"
                          text_font: montserrat_48


                - label:
                    text: "South"
                - button:
                    id: but_cov_up_south
                    width: 70
                    height: 68
                    widgets:
                      - label:
                          id: cov_up_south
                          align: CENTER
                          text: "\uF077"
                          text_font: montserrat_48
                - button:
                    id: but_cov_stop_south
                    width: 70
                    height: 68
                    widgets:
                      - label:
                          id: cov_stop_south
                          align: CENTER
                          text: "\uF04D"
                          text_font: montserrat_30
                - button:
                    id: but_cov_down_south
                    width: 70
                    height: 68
                    widgets:
                      - label:
                          id: cov_down_south
                          align: CENTER
                          text: "\uF078"
                          text_font: montserrat_48


                - label:
                    text: "West"
                - button:
                    id: but_cov_up_west
                    width: 70
                    height: 68
                    widgets:
                      - label:
                          id: cov_up_west
                          align: CENTER
                          text: "\uF077"
                          text_font: montserrat_48
                - button:
                    id: but_cov_stop_west
                    width: 70
                    height: 68
                    widgets:
                      - label:
                          id: cov_stop_west
                          align: CENTER
                          text: "\uF04D"
                          text_font: montserrat_30
                - button:
                    id: but_cov_down_west
                    width: 70
                    height: 68
                    widgets:
                      - label:
                          id: cov_down_west
                          align: CENTER
                          text: "\uF078"
                          text_font: montserrat_48
```

--------------------------------

### Basic Pulse Meter Configuration

Source: https://esphome.io/cookbook/power_meter

Configure the pulse meter sensor in ESPHome to read pulses from the GPIO pin. The 'multiply' filter converts pulses per minute to Watts.

```yaml
sensor:
  - platform: pulse_meter
    name: 'Power'
    id: sensor_pulse_meter # Optional ID, necessary if you want to calculate the total daily energy
    unit_of_measurement: 'W'
    device_class: power
    state_class: measurement
    accuracy_decimals: 0
    pin: GPIO12
    filters:
      - multiply: 6 # (60s / impulse constant) * (1000W / 1kW)
```

--------------------------------

### Home Assistant Pushover Notification Service

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Sets up a Pushover notification service using provided API and user keys. This service is used for sending alerts.

```yaml
notify:
  - name: pushover
    platform: pushover
    api_key: !secret pushover_api_key
    user_key: !secret pushover_user_key
```

--------------------------------

### Define Custom Fonts for Display

Source: https://esphome.io/cookbook/display_time_temp_oled

Configure TrueType fonts for use on the display. Save font files in the ESPHome configuration directory. Supports local TTF files or Google Fonts via `gfonts://` scheme.

```yaml
font:
  - file: 'slkscr.ttf'
    id: small
    size: 8


  - file: 'BebasNeue-Regular.ttf'
    id: medium
    size: 48


  - file: 'arial.ttf'
    id: large
    size: 14
```

```yaml
font:
  - file: "gfonts://Silkscreen"
    id: small
    size: 10
  - file: "gfonts://Roboto"
    id: large
    size: 24
  - file: "gfonts://Silkscreen"
    id: medium
    size: 15
```

--------------------------------

### Configuring Total Daily Energy Sensor

Source: https://esphome.io/cookbook/power_meter

Configure a `total_daily_energy` sensor to track the total energy generated per day. This sensor integrates power values even when Home Assistant is unavailable, ensuring continuous tracking. A filter is applied to convert the power from Watts to Kilowatts.

```yaml
sensor:
  #(...)
  - platform: total_daily_energy
    name: 'Total Daily Energy'
    id: sensor_total_daily_energy
    power_id: sensor_pulse_meter
    unit_of_measurement: 'kWh'
    state_class: total_increasing
    device_class: energy
    accuracy_decimals: 3
    filters:
      # Multiplication factor from W to kW is 0.001
      - multiply: 0.001

time:
  - platform: homeassistant
    id: homeassistant_time
```

--------------------------------

### Configure ESP32 Touch Sensor as Binary Sensor

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Sets up an ESP32 touch sensor on GPIO33 as a binary sensor for leak detection. It triggers a sequence to toggle an LED when pressed and turns off the LED on release.

```yaml
  - platform: esp32_touch
    name: "${friendly_name} Sensor"
    device_class: moisture
    id: leak
    pin: GPIO33
    threshold: 30
    on_press:
      - while:
          condition:
            binary_sensor.is_on: leak
          then:
          - switch.turn_on: led1
          - delay: 200ms
          - switch.turn_off: led1
          - delay: 100ms
          - switch.turn_on: led1
          - delay: 200ms
          - switch.turn_off: led1
          - delay: 400ms
    on_release:
      then:
        - switch.turn_off: led1
```

--------------------------------

### Implement a toggle state icon button

Source: https://esphome.io/cookbook/lvgl

Use a label widget inside a button to display different icons based on Home Assistant entity states, including handling unavailable or unknown states.

```yaml
font:
  - file: "fonts/materialdesignicons-webfont.ttf"
    id: mdi_42
    size: 42
    bpp: 4
    glyphs: [
      "\U000F0335", # mdi-lightbulb
      "\U000F0336", # mdi-lightbulb-outline
      ]


text_sensor:
  - platform: homeassistant
    id: ts_remote_light
    entity_id: light.remote_light
    on_value:
      then:
        - lvgl.widget.update:
            id: btn_lightbulb
            state:
              checked: !lambda return (x == "on");
              disabled: !lambda return ((x == "unavailable") or (x == "unknown"));
        - if:
            condition:
              lambda: return (x == "on");
            then:
              - lvgl.label.update:
                  id: lbl_lightbulb
                  text: "\U000F0335"
            else:
              - lvgl.label.update:
                  id: lbl_lightbulb
                  text: "\U000F0336"


lvgl:
    ...
    pages:
      - id: room_page
        widgets:
          - button:
              align: CENTER
              width: 90
              height: 50
              checkable: true
              id: btn_lightbulb
              widgets:
                - label:
                    id: lbl_lightbulb
                    align: CENTER
                    text_font: mdi_42
                    text: "\U000F0336" # mdi-lightbulb-outline
              on_short_click:
                - homeassistant.action:
                    action: light.toggle
                    data:
                      entity_id: light.remote_light
```

--------------------------------

### Garage Door Control with GPIO Switches

Source: https://esphome.io/cookbook/garage-door

This configuration defines two GPIO switches for opening and closing the garage door and a template cover to manage the door's state and actions. Ensure GPIOXX is replaced with the actual pin numbers used.

```yaml
switch:
  - platform: gpio
    pin: GPIOXX
    name: "Garage Door Open Switch"
    id: open_switch
  - platform: gpio
    pin: GPIOXX
    name: "Garage Door Close Switch"
    id: close_switch
cover:
  - platform: template
    name: "Garage Door"
    open_action:
      # Cancel any previous action
      - switch.turn_off: close_switch
      # Turn the OPEN switch on briefly
      - switch.turn_on: open_switch
      - delay: 0.1s
      - switch.turn_off: open_switch
    close_action:
      - switch.turn_off: open_switch
      - switch.turn_on: close_switch
      - delay: 0.1s
      - switch.turn_off: close_switch
    stop_action:
      - switch.turn_off: close_switch
      - switch.turn_off: open_switch
    optimistic: true
    assumed_state: true

```

--------------------------------

### Configure Status LED

Source: https://esphome.io/cookbook/leak-detector-m5stickc

Configures the status LED connected to GPIO10, inverting its logic so that a HIGH signal turns it OFF and a LOW signal turns it ON.

```yaml
status_led:
  pin:
    number: GPIO10
    inverted: true
```
Tokens:
Raw