Text Not Centering Correctly on LilyGo T5 4.7

I’m setting up my new LilyGo T5 4.7 in e-ink display but am having issues with my centered text aligning to the right edge of the screen instead of the actual center. I’m new to ESPHome and would greatly appreciate any assistance.

Here’s what I’m seeing:

lilygo-pic

Here’s my YAML:

substitutions:
  esp_name: clock

esphome:
  name: clock
  friendly_name: clock
  platform: esp32
  board: esp32dev
  platformio_options:
    upload_speed: 1500000

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

# Enable logging
logger: 

# Enable Home Assistant API
api:
  encryption:
    key: !secret api_key

ota:
  password: !secret ota_pass

captive_portal:

time:
  - platform: sntp
    id: ntp

button:
  - platform: restart
    name: "${esp_name} Restart"

  - platform: template
    name: "${esp_name} Refresh"
    icon: "mdi:update"
    on_press:
      then:
      - component.update: t5_display

binary_sensor:
  - platform: gpio
    pin: 
      number: GPIO39
      inverted: true
    name: "${esp_name} Button 1"
    on_press:
      then:
       - component.update: t5_display
      
  - platform: gpio
    pin: 
      number: GPIO34
      inverted: true
    name: "${esp_name} Button 2"

  - platform: gpio
    pin: 
      number: GPIO35
      inverted: true
    name: "${esp_name} Button 3"

sensor:
  - platform: adc
    pin: GPIO36
    name: "${esp_name} Battery Voltage"
    id: batt_volt
    attenuation: 11db
    update_interval: never
    filters:
      - multiply: 2

  - platform: template
    name: "${esp_name} Battery"
    id: batt
    unit_of_measurement: "%"
    accuracy_decimals: 0
    device_class: battery
    lambda: |-
      int y = (1-(4.1-id(battery).state)/(4.1-3.3))*100;
      if (y < 100) {return y;} else {return 100;};
  
  - id: battery
    platform: lilygo_t5_47
    internal: True

font:
  - file: "gfonts://Roboto"
    id: font_big
    glyphs: "+-0123456789.:"
    size: 300
  - file: "gfonts://Roboto"
    id: font_med
    size: 100
  - file: "gfonts://Roboto"
    id: font_tiny
    glyphs: "+-0123456789.:"
    size: 25

external_components:
  - source: github://ashald/esphome@lilygo-t5-47
    components:
      - lilygo_t5_47

display:
  - platform: lilygo_t5_47
    id: t5_display
    rotation: 0
    update_interval: 60s
    full_update_every: 5
    lambda: |-

      it.print(10, 150, id(font_med), TextAlign::CENTER, "Current Status");
      
      //Divider
      #define div_pad 40
      #define div_thickness 4
      it.filled_rectangle(50, 270, 860, div_thickness);
     
      it.printf(10, 400, id(font_med), TextAlign::CENTER, "Battery %.0f%%", id(batt).state);

Is something going on with your screen rotation perhaps? What happens if you do this?

rotation: 90

I tried that, and it simply made things display in portrait vs. landscape mode. I was able to solve my own problem, though! I realized the text was essentially centering around the x coordinate, so I adjusted the x-axis location to be half the screen width, and that solved the problem!

So instead of this:

it.print(10, 150, id(font_med), TextAlign::CENTER, "Current Status");

I changed the x-axis coordinate to this:

it.print(480, 150, id(font_med), TextAlign::CENTER, "Current Status");

Since the width of the screen is 960, the text now centers along the center of the screen!

2 Likes

I’m having a problem with the external component: github://ashald/esphome@lilygo-t5-47

I think it has been removed from github. Do you have the same issue? Have you found any solution?
Thank you!!

@paradoxian @Mahko_Mahko

You haven’t said what your issue is, so who can say?

Is unhelpful.

And it still seems to be there

I fully agree, Nick. Thank you for providing the Link.
The display is up and running at the moment, but I cannot update after updating ESPHome to 2023.12.

There seems to be a problem with the external component:

external_components:
  - source: github://ashald/esphome/components@lilygo-t5-47
    components:
      - lilygo_t5_47

display:
  - platform: lilygo_t5_47
    id: t5_display
    rotation: 0
    update_interval: 2min
    
    lambda: |-
      // it.filled_circle(319, 0, 40);

When I try to update, I get an error message.

  File "/usr/local/bin/esphome", line 33, in <module>
    sys.exit(load_entry_point('esphome', 'console_scripts', 'esphome')())
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/esphome/esphome/__main__.py", line 1041, in main
    return run_esphome(sys.argv)
           ^^^^^^^^^^^^^^^^^^^^^
  File "/esphome/esphome/__main__.py", line 1028, in run_esphome
    rc = POST_CONFIG_ACTIONS[args.command](args, config)
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/esphome/esphome/__main__.py", line 458, in command_run
    exit_code = write_cpp(config)
                ^^^^^^^^^^^^^^^^^
  File "/esphome/esphome/__main__.py", line 192, in write_cpp
    generate_cpp_contents(config)
  File "/esphome/esphome/__main__.py", line 204, in generate_cpp_contents
    CORE.flush_tasks()
  File "/esphome/esphome/core/__init__.py", line 679, in flush_tasks
    self.event_loop.flush_tasks()
  File "/esphome/esphome/coroutine.py", line 246, in flush_tasks
    next(task.iterator)
  File "/esphome/esphome/__main__.py", line 184, in wrapped
    await coro(conf)
  File "/data/external_components/2851613f/esphome/components/lilygo_t5_47/display/__init__.py", line 37, in to_code
    await display.register_display(var, config)
  File "/esphome/esphome/components/display/__init__.py", line 119, in register_display
    await cg.register_component(var, config)
  File "/esphome/esphome/cpp_helpers.py", line 56, in register_component
    raise ValueError(
ValueError: Component ID t5_display was not declared to inherit from Component, or was registered twice. Please create a bug report with your configuration.

Thank you!

I struck that. Something changed in 2023.12 ESPHome 2023.12.0 - 20th December 2023 — ESPHome

With the component I was dealing with a fix had been included in esphome and the external component was no longer needed, so I avoided the problem.