How to update the color of an arc attached to a lvgl meter object during runtime

ESPHome
1

I am using lvgl with an EspHome based Waveshare Display. All this is working perfectly.
One of the LVGL widgets is a meter with 24 indicator arcs (price_1 to price_24), where I want to set the color dynamically during runtime. I simply can’t find a way to do that. Neither using standard yaml nor using a lambda function. But I simply can’t find the right syntax. Can this be done in the current implementation of LVGL in ESPHome?

I have tried things like:

  - lvgl.indicator.update:
      id: price_1
      color: 0x4CAF50

Here is a snippet of the meter definition:

                    - meter:
                        id: meter_clock
                        width: 350
                        height: 350
                        align: CENTER
                        bg_opa: TRANSP
                        border_width: 0
                        text_color: color_light_gray
                        indicator:
                          bg_color: color_red                        
                        scales:
                          - range_from: 0
                            range_to: 60
                            angle_range: 360
                            rotation: 270
                            ticks: 
                              count: 0
                            indicators:
                              - line:
                                  id: needle_minute
                                  width: 2
                                  color: color_light_gray
                                  r_mod: -17
                                  value: 0
                          - range_from: 0
                            range_to: 23
                            angle_range: 345
                            rotation: 270
                            ticks:
                              count: 24
                              width: 1
                              length: 1
                              major:
                                stride: 1
                                width: 2
                                length: 15
                                color: color_white
                                label_gap: 18
                            indicators:
                              - arc:
                                  id: price_1
                                  color: color_dark_gray
                                  start_value: 0
                                  end_value: 1
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_2
                                  color: color_dark_gray
                                  start_value: 1
                                  end_value: 2
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_3
                                  color: color_dark_gray
                                  start_value: 2
                                  end_value: 3
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_4
                                  color: color_dark_gray
                                  start_value: 3
                                  end_value: 4
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_5
                                  color: color_dark_gray
                                  start_value: 4
                                  end_value: 5
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_6
                                  color: color_dark_gray
                                  start_value: 5
                                  end_value: 6
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_7
                                  color: color_dark_gray
                                  start_value: 6
                                  end_value: 7
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_8
                                  color: color_dark_gray
                                  start_value: 7
                                  end_value: 8
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_9
                                  color: color_dark_gray
                                  start_value: 8
                                  end_value: 9
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_10
                                  color: color_dark_gray
                                  start_value: 9
                                  end_value: 10
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_11
                                  color: color_dark_gray
                                  start_value: 10
                                  end_value: 11
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_12
                                  color: color_dark_gray
                                  start_value: 11
                                  end_value: 12
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_13
                                  color: color_dark_gray
                                  start_value: 12
                                  end_value: 13
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_14
                                  color: color_dark_gray
                                  start_value: 13
                                  end_value: 14
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_15
                                  color: color_dark_gray
                                  start_value: 14
                                  end_value: 15
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_16
                                  color: color_dark_gray
                                  start_value: 15
                                  end_value: 16
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_17
                                  color: color_dark_gray
                                  start_value: 16
                                  end_value: 17
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_18
                                  color: color_dark_gray
                                  start_value: 17
                                  end_value: 18
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_19
                                  color: color_dark_gray
                                  start_value: 18
                                  end_value: 19
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_20
                                  color: color_dark_gray
                                  start_value: 19
                                  end_value: 20
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_21
                                  color: color_dark_gray
                                  start_value: 20
                                  end_value: 21
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_22
                                  color: color_dark_gray
                                  start_value: 21
                                  end_value: 22
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_23
                                  color: color_dark_gray
                                  start_value: 22
                                  end_value: 23
                                  width: 15
                                  r_mod: 0
                              - arc:
                                  id: price_24
                                  color: color_dark_gray
                                  start_value: 23
                                  end_value: 0
                                  width: 15
                                  r_mod: 0
                          - range_from: 0
                            range_to: 1440
                            angle_range: 360
                            rotation: 270
                            ticks:
                              count: 0
                            indicators:
                              - line:
                                  id: needle_hour
                                  width: 3
                                  color: color_light_gray
                                  r_mod: -45
                                  value: 0
2

Try

- lvgl.arc.update:
    id: price_1
    arc_color: 0x4CAF50
3

Thanks for your suggestion. Unfortunately this does not work, as the arc indicator that belongs to a meter object does not have the arc_color parameter, only color.

Here is the error it throws:
ID 'price_1' of type lv_meter_indicator_t doesn't inherit from lv_arc_t.

4

Right, sorry for that.
The indicator.update you tried looks correct. What error you got with that?

5

I get this error: [color] is an invalid option for [lvgl.indicator.update]. Please check the indentation.

It seems that indicators can only update the value, and not the settings. But I hope I am wrong.

6

Try something creative like
lvgl.indicator.arc.update

7

Good creative suggestion. I tried lvgl.indicator.arc.update, lvgl.meter.indicator.arc.update and lvgl.meter.arc.update but unfortunately they all come back with Unable to find action with the name ...

8

It’s not possible - the LVGL library does not have a function to update the colour of an indicator.

Instead of using indicator arcs, why not draw arc widgets instead, using align: center?

1 Like
9

Thanks Clyde. I somehow guessed this was the answer.
I went with your idea on using the arc directly, and I am making some progress there. I will post my result when done.