[BUG] Text behind icon in action 'esphome.ulanzi_icon_screen'

[hiscorebob]

Bug report

Describe the bug

I had to update my Ulanzi TC001 to ESPHome2024.11.1 because I had a missing weather state icon.
Now, when Home Assistant calls the service 'esphome.ulanzi_icon_screen' , the icon and text are displayed, but the text scrolls visibly behind the icon, which was not the case before.

Additional information

• used Hardware:
  • ESP32 / Ulanzi TC001
  • EspHoMaTriXv2 version: main

To Reproduce

Steps to reproduce the behavior:
Update Ulanzi to Esphome 2024.11.1
Use Home Assistant Action/Service Call 'esphome.ulanzi_icon_screen' with an icon and text

Expected behavior

Scrolling Text should not be visible behind Icon

Configuration

substitutions:
  devicename: ulanzi
  friendly_name: LED Matrix
  board: esp32dev
  # Pin definition from https://github.com/aptonline/PixelIt_Ulanzi 
  battery_pin: GPIO34 
  ldr_pin: GPIO35 
  matrix_pin: GPIO32 
  left_button_pin: GPIO26 
  mid_button_pin: GPIO27 
  right_button_pin: GPIO14 
  scl_pin: GPIO22 
  sda_pin: GPIO21
  buzzer_pin: GPIO15 


rtttl:
  output: rtttl_out

switch:
  - platform: template
    name: "Auto-Adjust Brightness"
    id: switch_autobrightness
    icon: mdi:brightness-auto
    restore_mode: RESTORE_DEFAULT_ON
    lambda: |-
      if (id(aab_enable)) {
        return true;
      } else {
        return false;
      }
    turn_on_action:
      lambda: |-
        id(aab_enable) = true;
    turn_off_action:
      lambda: |-
        id(aab_enable) = false;

globals:
  # aab = auto-adjustable brightness
  - id: aab_enable
    type: "bool"
    restore_value: true
    initial_value: "true"
  - id: aab_add
    type: int
    initial_value: '10'
  - id: aab_max
    type: int
    initial_value: '220'
  - id: aab_min
    type: int
    initial_value: '20'

external_components:
  - source:
      type: git
      url: https://github.com/lubeda/EspHoMaTriXv2
      ref: main
    refresh: 60s 
    components: [ ehmtxv2 ]   

esphome:
  comment: "EHMTXv2 from LuBeDa"
  name: $devicename 
  project:
    name: "Ulanzi.EHMTXv2"
    version: "2.0.0"
  on_boot:
    then:
      - ds1307.read_time:

esp32:
  board: esp32dev

font:
  # Font included in this folder
  #- file: fonts/mateine.ttf
  - file: fonts/Calcium.ttf
    size: 16
    id: default_font
    glyphs: >-
      !?"%()+*=,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnÖÄÜöäüopqrstuvwxyz@<>ߧ€/
  # Matrix Clock Fonts
  # Grab these from https://github.com/trip5/Matrix-Fonts
  # See https://github.com/lubeda/EspHoMaTriXv2#font
  # Store in a "fonts" subfolder of your ESPHome config folder or change paths below
  
  
  #- file: fonts/MatrixLight8.bdf
    #id: default_font
    #glyphs:  |
      #! "#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz°
  - file: fonts/MatrixChunky6.bdf
    id: special_font
    glyphs:  >-
      ! "#$%&'()*+,-./0123456789:APMTapmt
  
binary_sensor:
  - platform: status
    name: "$devicename Status"
  - platform: gpio
    pin:
      number: $left_button_pin
      inverted: true
    name: "Left button"
  - platform: gpio
    pin: 
      inverted: true
      number: $mid_button_pin
      mode: INPUT_PULLUP
    name: "Middle button"
  - platform: gpio
    pin: 
      number: $right_button_pin
      inverted: true
    name: "Right button"

logger:
  level: WARN

#output:
  #- platform: gpio
    #pin:
      #number: GPIO15
      #ignore_strapping_warning: true
    #id: buzzer_pin
    
output:
  - platform: ledc
    pin: $buzzer_pin
    id: rtttl_out

api:
  services: 
    - service: tune
      variables:
        tune: string
      then:
        - rtttl.play:
            rtttl: !lambda 'return tune;'

sensor:
  - platform: sht3xd
    temperature:
      name: "$devicename Temperature"
    humidity:
      name: "$devicename Relative Humidity"
    update_interval: 60s
  - platform: adc
    pin: $battery_pin
    name: "$devicename Battery"
    id: battery_voltage
    update_interval: 10s
    device_class: battery
    accuracy_decimals: 0
    attenuation: auto
    filters:
      - sliding_window_moving_average:
          window_size: 15
          send_every: 15
          send_first_at: 1
      - multiply: 1.6
      - lambda: |-
          auto r = ((x - 3) / 0.69 * 100.00);
          if (r >= 100) return 100;
          if (r > 0) return r;
          if (r <= 0) return 1;
          return 0;
    unit_of_measurement: '%'
  - platform: adc
    id: light_sensor
    name: "$devicename Illuminance"
    pin: $ldr_pin
    update_interval: 10s
    attenuation: auto
    unit_of_measurement: lx
    device_class: illuminance
    accuracy_decimals: 0
    filters:
      - lambda: |-
          return (x / 10000.0) * 2000000.0 - 15 ;
    on_value:
      then:
        - lambda: |-
            if ( id(aab_enable) ) {
              int n = x / 4 + id(aab_add); // new_value
              if (n > id(aab_max)) n = id(aab_max);
              if (n < id(aab_min)) n = id(aab_min);
              int c = id(rgb8x32)->get_brightness(); // current value
              c = c>0?c:1 ; 
              int d = (n - c) * 100 / c; // diff in %
              if ( abs(d) > 2 ) id(rgb8x32)->set_brightness(n);
            }
      
ota:
  platform: esphome
  password: !secret ota_password

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

web_server:

i2c:
  sda: $sda_pin
  scl: $scl_pin
  scan: true
  id: i2cbus

light:
  - platform: neopixelbus
    id: ehmtx_light
    type: GRB
    internal: true
    variant: WS2812
    pin: $matrix_pin
    num_leds: 256
    color_correct: [30%, 30%, 30%]
    gamma_correct: 2.0
    name: "$devicename Light"
    restore_mode: ALWAYS_OFF
    
time:
  - platform: homeassistant
    on_time_sync:
      then:
        ds1307.write_time:
  - platform: ds1307
    update_interval: never
    id: ehmtx_time

display:
  - platform: addressable_light
    id: ehmtx_display
    addressable_light_id: ehmtx_light
    width: 32
    height: 8
    pixel_mapper: |-
      if (y % 2 == 0) {
        return (y * 32) + x;
      }
      return (y * 32) + (31 - x);
    rotation: 0°
    update_interval: 16ms
    auto_clear_enabled: true
    lambda: |-
      id(rgb8x32)->tick();
      id(rgb8x32)->draw();
      
ehmtxv2:
  id: rgb8x32
  icons2html: true
  matrix_component: ehmtx_display
  time_component: ehmtx_time
  time_format: "%H:%M"
  date_format: "%d.%m"
  show_seconds: false
  show_dow: false
  # Uncomment below if using the mateine font
  default_font_id: default_font
  default_font_yoffset: 8
  special_font_id: default_font
  # Comment out below if using mateine font
  #default_font_id: default_font
  #default_font_yoffset: 8
  #special_font_id: special_font
  #special_font_yoffset: 6
  # until here
  boot_logo: "[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,63519,63519,63519,63519,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,63519,0,0,0,0,2016,0,0,0,0,0,0,0,0,0,0,31,0,0,0,0,0,0,0,0,0,63488,0,63488,0,0,0,63519,0,0,0,0,2016,2016,0,0,0,65514,0,65514,0,0,0,31,0,0,0,64512,0,0,64512,0,63488,63488,0,63488,63488,0,0,63519,63519,63519,0,0,2016,0,2016,0,65514,0,65514,0,65514,0,31,31,31,0,0,0,64512,64512,0,0,63488,63488,63488,63488,63488,0,0,63519,0,0,0,0,2016,0,2016,0,65514,0,65514,0,65514,0,0,31,0,0,0,0,64512,64512,0,0,0,63488,63488,63488,0,0,0,63519,63519,63519,63519,0,2016,0,2016,0,65514,0,65514,0,65514,0,0,0,31,31,0,64512,0,0,64512,0,0,0,63488,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"
  icons: 
    - id: error
      lameid: 40530
    - id: home_assistant
      lameid: 47693
    #- id: temperature
      #lameid: 2056
    - id: lightbulb
      lameid: 1762
    - id: music
      lameid: 45625
    - id: phone
      lameid: 1232
    - id: car
      lameid: 2819
    - id: clear_night
      lameid: 53383
    - id: snowy
      lameid: 58081
    - id: fog
      lameid: 12196
    - id: sleep8x32
      url: https://user-images.githubusercontent.com/16407309/224850723-634c9b2d-55d9-44f2-9f93-765c0485b090.gif
    - id: sunny
      file: pixel-icons-8x8/sunny.png
    - id: partlycloudy
      file: pixel-icons-8x8/cloud.png
    - id: cloudy
      file: pixel-icons-8x8/cloud.png
    - id: rainy
      file: pixel-icons-8x8/rain.gif
    - id: pouring
      file: pixel-icons-8x8/rain.gif
    - id: windy
      file: pixel-icons-8x8/wind.png
    - id: washmachine
      file: pixel-icons-8x8/washmachine.gif
    - id: dryer
      file: pixel-icons-8x8/dryer.gif
    - id: printer
      file: pixel-icons-8x8/3dprinter.gif
    - id: spotify
      file: pixel-icons-8x8/spotify.gif
    - id: temperature
      file: pixel-icons-8x8/temperature_celsius.png
    - id: trash
      file: pixel-icons-8x8/trash.png
    - id: paper
      file: pixel-icons-8x8/paper.png
    - id: glass
      file: pixel-icons-8x8/glass.png
    - id: bio
      file: pixel-icons-8x8/bio.png
    - id: valorlux
      file: pixel-icons-8x8/valorlux.png

  on_next_screen:
    - homeassistant.event:
        event: esphome.new_screen
        data_template:
          iconname: !lambda "return icon.c_str();"
          text: !lambda "return text.c_str();"

#Compile fix for animation.h, just a blank 1x1 pixel
animation:
  - id: animation_transparent
    file: "fonts/transparent.gif"

image:
  - id: image_transparent
    file: "fonts/transparent.gif"

Screenshots

Logs

(optional) Add relevant logs which could help tackle the problem.

Services calls

data_template:
  default_font: true
  icon_name: |-
      {{ states.weather.town.state }}

  text: "{{ states.weather.town.attributes.temperature }}°C"
  lifetime: 60
  screen_time: 15
  r: 255
  g: 255
  b: 255
action: esphome.ulanzi_icon_screen

[gzxto1]

Similar issues here with 2024.11.1 I first fixed the issue with the Glyphs, but then I also had the issue with the icon_screen. No Icons anymore, just flickering... I did a roll-back to 2024.10.3

[korttoma]

Icons are messed up for me also after updating to ESPHome 2024.11.1.
Icons are not displayed correctly and the scrolling text enters the icon area.

[lubeda]

Hi, i think this is because of: esphome/esphome#7631

[lubeda]

@ hiscorebob
Do you use the home-assistant-addon from esphome?
Can you send me your rain.gif?

I created a transparent gif which works in my setup! (esphome add-on and transparent gif as file)

[hiscorebob]

@ hiscorebob Do you use the home-assistant-addon from esphome? Can you send me your rain.gif?

Yes I use the official ESPHome Add-On in Home Assistant.
I have attached the rain.gif to this message.

[gzxto1]

I'm also using the official esphome add-on and took all of my gifs from la metric.

[kauthmbt]

Having the same issue with icons messed up but running ESPHome in a LXC container under Proxmox.

Example lameids from LaMetric:

• 22160 (animated)
• 2283 (animated)
• 12212 (static)

[andrewjswan]

Could it possibly be related to this: esphome/esphome#7566

[lubeda]

I'm still searching for the cause and the cure. I found a major bug which wasted memory but no cure to this problem

esphome/issues#6498

[lubeda]

please try the latest branch, this is at least a workaround. @clydebarrow may find a better solution.

[hiscorebob]

Note: I have already updated to ESPHome 2024.11.2, but this has no effect.

Then I tried with the latest branch, and can confirm that this fixes the messed up icons. Static and animated icons are now displayed correctly

But I did notice 2 new issues:
Compile error when leaving the following section under "icons":

   - id: sleep8x32
      #file: pixel-icons-8x8/sleep.gif
      url: https://user-images.githubusercontent.com/16407309/224850723-634c9b2d-55d9-44f2-9f93-765c0485b090.gif

(tried both url and file options)
the compile error log :

INFO Preparing icons, this may take some seconds.
WARNING  icon snowy has transparency!
WARNING  icon fog has transparency!
WARNING  icon sleep8x32 has transparency!
Traceback (most recent call last):
  File "/usr/local/bin/esphome", line 8, in <module>
    sys.exit(main())
             ^^^^^^
  File "/esphome/esphome/__main__.py", line 1036, in main
    return run_esphome(sys.argv)
           ^^^^^^^^^^^^^^^^^^^^^
  File "/esphome/esphome/__main__.py", line 1023, in run_esphome
    rc = POST_CONFIG_ACTIONS[args.command](args, config)
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/esphome/esphome/__main__.py", line 503, in command_run
    exit_code = write_cpp(config)
                ^^^^^^^^^^^^^^^^^
  File "/esphome/esphome/__main__.py", line 212, in write_cpp
    generate_cpp_contents(config)
  File "/esphome/esphome/__main__.py", line 224, in generate_cpp_contents
    CORE.flush_tasks()
  File "/esphome/esphome/core/__init__.py", line 684, 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 204, in wrapped
    await coro(conf)
  File "/data/external_components/0d442204/components/ehmtxv2/__init__.py", line 481, in to_code
    data[pos] = rgb >> 8
    ~~~~^^^^^
IndexError: list assignment index out of range

Disabling this icon, and the code compiles.

But the biggest issue, the Ulanzi does not display date or time, it only displays the notifications sent to it.
When the notifications expire, the screen turns black.

[imCharlieB]

Im having this issue after a update a few days ago as well... But my icons dont even show they are like pixelated and text is running behind them. Im on 2024.11.2