LVGL graphic meter indicator not working

ESPHome
1

I’m trying to use an image as a meter indicator. I don’t get any errors it just doesn’t show up at all. I have another object that puts the meter indicator in the upper left of the screen so I can verify the file is available and working OK.

I can’t find anybody on the internet that has used a graphic meter so there are not any examples of working code but this seems to follow the documentation.

The code work fine with a standard “line” indicator but does nothing if I switch to a graphic indicator.

image

                - meter:
                    height: 335
                    width: 335
                    scales:
                      range_from: 1
                      range_to: 100
                      angle_range: 360
                      rotation: 270
                      ticks:
                        count: 13
                        length: 10
                      indicators:
                        - image:
                            id: tide_level
                            src: tide_pointer
                            pivot_x: 22
                            pivot_y: 78
                            value: 0
                        # - line:
                        #     id: tide_level
                        #     width: 3
                        #     color: red
                        #     r_mod: -4
                        - arc:
                            color: gray
                            width: 20
                            end_value: 100
                            start_value: 0
2

Is it because your range is between 1 and 100, and your initial value is 0 (which isn’t between 1 and 100)?

3

It’s a bug. Add this to your yaml:

external_components:
  - source: github://pr#8005
    components: [lvgl]
4

That worked. Thanks for the fix @clydebarrow.

Screenshot 2025-01-02 123954

5

It looks a lot better now. Does anybody know how to get rid of that black dot in the center? The only needle I have is a graphic one that has a white center. That black dot seems to be built into the meter and not removable.

                - meter:
                    height: 100%
                    width: 100%
                    text_font: roboto24
                    outline_width: 1
                    scales:
                        - range_from: 1
                          range_to: 100
                          angle_range: 360
                          rotation: 270
                          indicators:
                            - image:
                                id: tide_level
                                src: tide_pointer
                                opa: COVER
                                pivot_x: 44
                                pivot_y: 44
                                value: 0
                          ticks:
                            count: 0
                        - range_from: 5
                          range_to: 1
                          angle_range: 120
                          rotation: 300
                          ticks:
                            width: 1
                            count: 5
                            major:
                              label_gap: 25
                              stride: 1
                              width: 2
                              length: 20
                        - range_from: 5
                          range_to: 1
                          angle_range: 120
                          rotation: 120
                          ticks:
                            width: 1
                            count: 5
                            major:
                              label_gap: 25
                              stride: 1
                              width: 2
                              length: 20

tide_meter

6

Try the background properties on the indicator part. Negative padding might also work. There was discussion of this in Discord, I can’t recall all the details.

7

Yeah that worked. I made it transparent.

              widgets:
                - meter:
                    height: 100%
                    width: 100%
                    text_font: roboto24
                    outline_width: 1
                    indicator:
                      opa: TRANSP
1 Like