ESPHome LVGL align_to: not working?

ESPHome
1

Hi everyone! I am trying to make wind_icon_label align properly to wind_label, which I read about on LVGL Widgets - ESPHome - Smart Home Made Simple

However, the icon doesn’t appear at all when i define align_to:
When I set position manually, it works fine. (Lower down I have a 64x64 MDI image imported)

Here is a snippet of my code. Any idea if I’ve done something wrong or if it’s an issue with ESPHome/LVGL

font:
  - file: "gfonts://Montserrat@500"
    id: MONTSERRAT_220
    size: 220
    glyphs: " 1234567890.°FfnaN?%-bcdeghijklmopqrstuvwxyzABCDEGHIJKLMOPQRSTUVWXYZ" # Only include needed glyphs
  - file: "gfonts://Montserrat@500"
    id: MONTSERRAT_80
    size: 80
    glyphs: " 1234567890.°FfnaN?%-bcdeghijklmopqrstuvwxyzABCDEGHIJKLMOPQRSTUVWXYZ" # Only include needed glyphs


lvgl: # Set up base settings for LVGL
  log_level: INFO
  color_depth: 16
  bg_color: 0x000000
  border_width: 0
  outline_width: 0
  
  style_definitions: # Drop in styles minus font size
    - id: font_style
      text_color: 0xFFFFFF
      bg_color: 0x000000
      bg_opa: TRANSP
    - id: details_style
      text_color: 0xFFFFFF
      bg_color: 0x000000
      bg_opa: TRANSP
  
  pages: # Define the pages
    - id: main_page
      bg_color: 0x000000
      scrollable: false
      widgets:
        - label:
            id: hpa_label
            text: "?hPa"
            x: 15
            text_align: LEFT
            align: BOTTOM_LEFT
            styles: font_style
            text_font: MONTSERRAT_80 # override font size
            text_color: 0xffffff
        - label:
            id: temperature_label
            text: "KBTR T"
            y: -40
            text_align: LEFT
            align: TOP_LEFT
            styles: font_style
            text_font: MONTSERRAT_220 # override font size
            text_color: 0x00ff00
        - label:
            id: humidity_label
            text: "KBTR H"
            y: -25
            text_align: LEFT
            align: LEFT_MID
            styles: font_style
            text_font: MONTSERRAT_220 # override font size
            text_color: 0x0000ff
        - image:
            id: weather_icon_label
            src: w_cloudy
            x: -80
            #y: 50
            mode: REAL
            align: TOP_RIGHT
            image_recolor: 0xB0BEC5
            image_recolor_opa: 100%
        - label:
            id: wind_label
            text: "00 MPH"
            width: SIZE_CONTENT
            y: -50
            text_align: RIGHT
            align: BOTTOM_RIGHT
            styles: font_style
            text_font: MONTSERRAT_80 # override font size
            text_color: 0xffffff
            bg_color: 0xffffff
            bg_opa: 1
        - image:
            id: wind_icon_label
            src: w_wind
            align_to:
              id: wind_label
              align: OUT_LEFT_MID
              x: 0
              y: 0
            image_recolor: 0xFFFFFF
            image_recolor_opa: 100%

Lower down I have


  # Other Icons
  - file: mdi:weather-windy
    id: w_wind
    resize: 64x64
    type: binary

  - file: mdi:weather-dust
    id: w_wind_gust
    resize: 64x64
    type: binary
2

I don’t recommend using align_to - it is probably useful in some esoteric cases but is very unintuitive - you should just wrap widgets that need to be grouped in a container and use layout to position them.

1 Like
3

I did end up doing that and yeah it does work really nicely.

I do wish I knew what exactly is wrong with align_to:/this config because if it actually doesn’t work it should just be removed.

4

It’s part of the upstream LVGL library, but I will add a note to the docs suggesting not using it unless you really know what you’re doing. I think it’s basically a fossil from the era when the layouts were not available.

1 Like