lilygo t5 working but ugly

gistfile1.txt

substitutions:
  name: esphome-web-45eef0
  friendly_name: Lily

esphome:
  name: ${name}
  friendly_name: ${friendly_name}
  min_version: 2024.6.0
  name_add_mac_suffix: false
  platformio_options:
    board_build.f_flash: 80000000L
#    board_upload.flash_size: 16MB
    board_build.flash_mode: qio
    board_build.psram_type: opi
    board_build.partitions: default_16MB.csv
    board_build.arduino.memory_type: qio_opi

  includes:
    - common.h
  project:
    name: esphome.web
    version: dev

esp32:
  variant: esp32s3
  board: esp32-s3-devkitc-1

# Enable logging
logger:

# Enable Home Assistant API
api:

# Allow Over-The-Air updates
ota:
- platform: esphome

# Allow provisioning Wi-Fi via serial
improv_serial:

wifi:
  # Set up a wifi access point
  ap: {}

# In combination with the `ap` this allows the user
# to provision wifi credentials to the device via WiFi AP.
captive_portal:

dashboard_import:
  package_import_url: github://esphome/firmware/esphome-web/esp32s3.yaml@main
  import_full_config: true

# To have a "next url" for improv serial
web_server:
  port: 80
  include_internal: true

external_components:
  # https://github.com/nickolay/esphome-lilygo-t547plus
  - source: github://nickolay/esphome-lilygo-t547plus
    components: ["t547"]
  # https://github.com/kaeltis/esphome-lilygo-t547plus
  - source: github://kaeltis/esphome-lilygo-t547plus
    components: ["lilygo_t5_47_battery"]

i2c:
  - id: bus_a
    sda: GPIO18
    scl: GPIO17
    frequency: 100khz
    # There is some problems with i2c scan so turn scan off if problem appear on your board
    scan: False

time:
  - platform: homeassistant
    id: ha_time

font:
  - file: "fonts/OpenSans-Medium.ttf"
    id: font_small
    size: 28    
    glyphs: |-
      !"%()+=,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz'/&|ÁÉÍÓÖŐÚÜŰáéíóöőúüű
  - file: "fonts/OpenSans-Medium.ttf"
    id: font_medium
    size: 38
    glyphs: |-
      !"%()+=,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz'/&|ÁÉÍÓÖŐÚÜŰáéíóöőúüű
  - file: "fonts/OpenSans-Bold.ttf"
    id: font_medium_bold
    size: 38
    glyphs: |-
      !"%()+=,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz'/&|ÁÉÍÓÖŐÚÜŰáéíóöőúüű
  - file: "fonts/OpenSans-Medium.ttf"
    id: font_big
    size: 48
    glyphs: |-
      !"%()+=,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz'/&|ÁÉÍÓÖŐÚÜŰáéíóöőúüű
  - file: "fonts/OpenSans-Medium.ttf"
    id: font_large
    size: 56
    glyphs: |-
      !"%()+=,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz'/&|ÁÉÍÓÖŐÚÜŰáéíóöőúüű
  - file: "fonts/OpenSans-Bold.ttf"
    id: font_xlarge_bold
    size: 72
    glyphs: |-
      !"%()+=,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz'/&|ÁÉÍÓÖŐÚÜŰáéíóöőúüű
  # material UI icons - from https://pictogrammers.github.io/@mdi/font/5.3.45/
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_icons
    size: 130
    glyphs:
      - "\U000F0594" # clear-night
      - "\U000F0590" # cloudy
      - "\U000F0591" # fog
      - "\U000F0592" # hail
      - "\U000F0593" # lightning
      - "\U000F067E" # lightning-rainy
      - "\U000F0F31" # night-partly-cloudy
      - "\U000F0595" # partly-cloudy
      - "\U000F0596" # pouring
      - "\U000F0597" # rainy
      - "\U000F0F36" # snowy
      - "\U000F067F" # snowy-rainy
      - "\U000F0599" # sunny
      - "\U000F059D" # windy
      - "\U000F059E" # windy-variant
      - "\U000F0F38" # exCentereptional
      - "\U000F03D6"  # package icon
      - "\U000F050F"  # Thermometer (temperature) icon
      - "\U000F151F"  # Home icon
      - "\U000F02E3" # Bed
      - "\U000F1086"  # Moped (iFood) icon
      - "\U000F007A"  # charging 10 icon
      - "\U000F089B"  # charging 20 icon
      - "\U000F089C"  # charging 30 icon
      - "\U000F089D"  # charging 40 icon
      - "\U000F007E"  # charging 50 icon
      - "\U000F007F"  # charging 60 icon
      - "\U000F0080"  # charging 70 icon
      - "\U000F0081"  # charging 80 icon
      - "\U000F0082"  # charging 90 icon
      - "\U000F0085"  # charging 90 icon
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_icons_small
    size: 56
    glyphs:
      # weather
      - "\U000F0594" # clear-night
      - "\U000F0590" # cloudy
      - "\U000F0591" # fog
      - "\U000F0592" # hail
      - "\U000F0593" # lightning
      - "\U000F067E" # lightning-rainy
      - "\U000F0F31" # night-partly-cloudy
      - "\U000F0595" # partly-cloudy
      - "\U000F0596" # pouring
      - "\U000F0597" # rainy
      - "\U000F0F36" # snowy
      - "\U000F067F" # snowy-rainy
      - "\U000F0599" # sunny
      - "\U000F059D" # windy
      - "\U000F059E" # windy-variant
      - "\U000F0F38" # exceptional
      # moon phases
      - "\U000F0F61" # moon-first-quarter
      - "\U000F0F62" # moon-full
      - "\U000F0F63" # moon-last-quarter
      - "\U000F0F64" # moon-new
      - "\U000F0F65" # moon-waning-crescent
      - "\U000F0F66" # moon-waning-gibbous
      - "\U000F0F67" # moon-waxing-crescent
      - "\U000F0F68" # moon-waxing-gibbous
      # other icons
      - "\U000F10C2" # Temperature High
      - "\U000F10C3" # Temperature Low
      - "\U000F054B" # umbrella
      - "\U000F02E3" # Bed
      - "\U000F064D" # human-male
      - "\U000F0649" # human-female
      - "\U000F04B9" # sofa
      - "\U000F04DB" # stop
      - "\U000F040A" # play
      - "\U000F03E4" # pause
      - "\U000F0643" # man
      - "\U000F1078" # woman
      - "\U000F0E7C" # baby-face
      - "\U000F03D6"  # package icon
      - "\U000F050F"  # Thermometer (temperature) icon
      - "\U000F151F"  # Home icon
      - "\U000F1086"  # Moped (iFood) icon
      - "\U000F007A"  # charging 10 icon
      - "\U000F089B"  # charging 20 icon
      - "\U000F089C"  # charging 30 icon
      - "\U000F089D"  # charging 40 icon
      - "\U000F007E"  # charging 50 icon
      - "\U000F007F"  # charging 60 icon
      - "\U000F0080"  # charging 70 icon
      - "\U000F0081"  # charging 80 icon
      - "\U000F0082"  # charging 90 icon
      - "\U000F0085"  # charging 90 icon

  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_icons_tiny
    size: 32
    glyphs:
      - "\U000F005E" # arrow-up-thick
      - "\U000F0046" # arrow-down-thick
      - "\U000F059C" # Sunrise
      - "\U000F059B" # Sunset


text_sensor:
  - platform: homeassistant
    id: current_weather
    entity_id: weather.home
    name: "Current Weather"
  - platform: homeassistant
    id: forecast_condition
    entity_id: weather.home
    attribute: temperature  # Access the first forecast's condition (string)
    name: "Forecast Temperature"
  - platform: homeassistant
    id: last_package
    entity_id: input_text.last_package
    name: "Last Package"
  - platform: homeassistant
    id: last_package_updated
    entity_id: input_text.last_package
    attribute: last_changed  # Track the last updated date
    name: "Last Package Updated"
  - platform: homeassistant
    id: delivery_eta
    entity_id: input_number.ifood_eta_delivery_end
    name: "iFood ETA"
  - platform: homeassistant
    id: macbook_battery
    entity_id: sensor.lucass_macbook_pro_3_internal_battery_level
    name: "Lucas's MacBook Battery"
  - platform: homeassistant
    id: iphone_battery
    entity_id: sensor.iphone_de_lucas_battery_level
    name: "Lucas's iPhone Battery"
  - platform: homeassistant
    id: watch_battery
    entity_id: sensor.iphone_de_lucas_watch_battery
    name: "Lucas's Watch Battery"

binary_sensor:
  - platform: gpio
    pin: 
      number: GPIO21 #was GPIO39 on the previous board
      inverted: true
    name: "Button 1"
    on_press:
      - logger.log: PhysButton Pressed
  - platform: homeassistant
    id: room_presence
    entity_id: binary_sensor.esphome_web_58a86f_presence
    name: "Room Presence"
  - platform: homeassistant
    id: office_presence
    entity_id: binary_sensor.esphome_web_f70727_presence
    name: "Office Presence"

# For example cycle through pages on a timer
interval:
  - interval: 30s
    then:
      - display.page.show_next: my_display
      - component.update: my_display

display:
  - platform: t547
    id: my_display
    update_interval: 30s
    pages:
      # Page 1: Bedroom and Office Items
      - id: page1
        lambda: |-
          // Room Presence with Person icon
          it.printf(400, 220, id(font_icons), "\U000F02E3");  // Bed icon for bedroom
          if (id(room_presence).state) {
            it.printf(550, 260, id(font_medium_bold), "Occupied");
          } else {
            it.printf(550, 260, id(font_medium_bold), "Empty");
          }

          // Office Presence with Home icon
          it.printf(400, 380, id(font_icons), "\U000F151F");  // Home icon for office presence
          if (id(office_presence).state) {
            it.printf(550, 420, id(font_medium_bold), "Occupied");
          } else {
            it.printf(550, 420, id(font_medium_bold), "Empty");
          }

          // Display current time
          it.strftime(750, 0, id(font_xlarge_bold), "%H:%M", id(ha_time).now());

      # Page 2: Weather, Forecast, and Package Information
      - id: page2
        lambda: |-
          // Weather condition with icons
          if (id(current_weather).state == "clear-night") {
            it.printf(0, 0, id(font_icons), "\U000F0594");
          } else if (id(current_weather).state == "cloudy") {
            it.printf(0, 0, id(font_icons), "\U000F0590");
          } else if (id(current_weather).state == "sunny") {
            it.printf(0, 0, id(font_icons), "\U000F0599");
          } else if (id(current_weather).state == "rainy") {
            it.printf(0, 0, id(font_icons), "\U000F0597");
          } else if (id(current_weather).state == "partly-cloudy") {
            it.printf(0, 0, id(font_icons), "\U000F0595");
          } else {
            it.printf(0, 0, id(font_icons), "\U000F0F38");
          }
          it.printf(130, 0, id(font_xlarge_bold), "%s", id(current_weather).state.c_str());

          // Forecast temperature with Thermometer icon
          it.printf(0, 200, id(font_icons), "\U000F050F");  // Thermometer icon for forecast
          it.printf(130, 200, id(font_xlarge_bold), "%s°C", id(forecast_condition).state.c_str());

          // Last Package with Package icon
          it.printf(0, 380, id(font_icons), "\U000F03D6");  // Package icon for last package
          it.printf(130, 380, id(font_medium_bold), "%s", id(last_package).state.c_str());

          // Display current time
          it.strftime(750, 0, id(font_xlarge_bold), "%H:%M", id(ha_time).now());

          // Display Delivery ETA
          it.printf(400, 200, id(font_icons), "\U000F1086");  // Moped for iFood
          int eta_seconds = atoi(id(delivery_eta).state.c_str());
          int minutes = eta_seconds / 60;
          int seconds = eta_seconds % 60;
          it.printf(550, 210, id(font_xlarge_bold), "%d m:%d s", minutes, seconds);
      - id: page3
        lambda: |-
          // Function to select the correct battery icon based on the percentage
          auto get_battery_icon = [](std::string battery_level_str) -> const char* {
            float battery_level = atof(battery_level_str.c_str());
            if (battery_level <= 10) {
              return "\U000F007A";  // Charging 10 icon
            } else if (battery_level <= 20) {
              return "\U000F089B";  // Charging 20 icon
            } else if (battery_level <= 30) {
              return "\U000F089C";  // Charging 30 icon
            } else if (battery_level <= 40) {
              return "\U000F089D";  // Charging 40 icon
            } else if (battery_level <= 50) {
              return "\U000F007E";  // Charging 50 icon
            } else if (battery_level <= 60) {
              return "\U000F007F";  // Charging 60 icon
            } else if (battery_level <= 70) {
              return "\U000F0080";  // Charging 70 icon
            } else if (battery_level <= 80) {
              return "\U000F0081";  // Charging 80 icon
            } else if (battery_level <= 90) {
              return "\U000F0082";  // Charging 90 icon
            } else {
              return "\U000F0085";  // Charging 100 icon
            }
          };

          // MacBook Battery with dynamically selected icon
          it.printf(0, 0, id(font_icons), get_battery_icon(id(macbook_battery).state));  // MacBook battery icon
          it.printf(130, 0, id(font_xlarge_bold), "MacBook: %s%%", id(macbook_battery).state.c_str());

          // iPhone Battery with dynamically selected icon
          it.printf(0, 150, id(font_icons), get_battery_icon(id(iphone_battery).state));  // iPhone battery icon
          it.printf(130, 150, id(font_xlarge_bold), "iPhone: %s%%", id(iphone_battery).state.c_str());

          // Watch Battery with dynamically selected icon
          it.printf(0, 300, id(font_icons), get_battery_icon(id(watch_battery).state));  // Watch battery icon
          it.printf(130, 300, id(font_xlarge_bold), "Watch: %s%%", id(watch_battery).state.c_str());

          // Display current time
          it.strftime(750, 0, id(font_xlarge_bold), "%H:%M", id(ha_time).now());