LVGL Meter components not showing correcly

ESPHome
1

Hi all,

I’m trying to create a LVGL display to display a meter. Because my purpose is to reuse this in several displays, the lvgl setup is created in an external package, imported to both esp devices. For my tests, the meter has:

  • a red border
  • a blue arc
  • 10 ticks

In one of the devices, the Meter components are not correctly shown.

In order to try finding out what is happening, I added a few extra objects:

  • full page object, with a green border
  • “test” red text, centered
  • green circle, centered

Except for the Meter, everything else seem to display correctly in both displays.

image
image1920×1440 275 KB

This is the lvgl setup, imported into both devices:

lvgl:
  pages:
    - id: energy_wheel_page      
      width: 100%
      height: 100%
      on_load:
        - script.execute: power_wheel_script 
      widgets:
        - obj:
            id: obj_id
            width: 100%
            height: 100%
            align: CENTER
            bg_opa: TRANSP
            border_opa: COVER
            border_color: green
            border_width: 10
            widgets:
              - obj:
                  align: CENTER
                  width: 100
                  height: 100
                  border_opa: COVER
                  border_color: green
                  border_width: 10
                  radius: 50
              - label:
                  align: CENTER
                  id: lbl_id
                  recolor: true
                  text: "#FF0000 test#"            
              - meter:
                  id: meter
                  width: 100%
                  height: 100%
                  align: center
                  indicator:
                    bg_opa: transp
                  bg_opa: transp
                  border_opa: cover
                  border_color: red
                  scales:
                    - range_from: 0
                      range_to: 100
                      ticks:
                          count: 10
                      indicators:
                        - arc:
                              id: arc_battery_level
                              color: blue
                              r_mod: 0
                              start_value: 0
                              end_value: 50
                              width: 10
                              opa: 100%

This is the display setup in the device that is wrong:

display:
  - platform: mipi_spi 
    id: my_display
    model: ILI9341 
    invert_colors: false
    spi_id: spi_disp
    cs_pin: 13 
    dc_pin: 21 
    reset_pin: 33 
    transform:
      swap_xy: true
      mirror_x: true
      mirror_y: true
    dimensions:
      height: 240
      width: 320
    auto_clear_enabled: false
    update_interval: never

This is the display on the device that is shows correctly:

display:
  - platform: ili9xxx
    id: my_display
    dimensions:
      height: 128
      width: 128
    model: GC9A01A
    data_rate: 20MHz
    cs_pin: GPIO35
    dc_pin: GPIO36
    reset_pin: GPIO34
    color_order: bgr
    invert_colors: true
    auto_clear_enabled: false
    transform:
      mirror_x: false
      mirror_y: false
      swap_xy: false

I tried searching for a similar problem, but I couldn’t find anything.

Does anyone has any idea what could be wrong?

Thanks

2

Given one of your displays is rectangular and the other is square wouldn’t you be better defining the height and width of your meter component as pixels rather than 100 percent. I’d try setting both the same say 128 x 128 as a test or 240 x 240 to fill the screen height.

1 Like
3

Thank you! This works.

I set the size as a package variable, so I can have different pixel sizes for the two displays.

When the meter size is set as pixels, with same height and width, it correctly centers all the meter components. If height and width are different it has the behavior I was seeing.

I don’t understand why it behaves this way. I expected the meter to behave as a single object, with all the components centered.

But your solution works for my needs. Thank you.

4

It could be classed as a bug I suppose, I guess the developers never tested on an elliptical meter. With LVGL I prefer to put everything in an OBJ widget then you can specify as a percentage of the OBJ size, but somewhere you’ll need to define the size if you have different display ratios.