Color gradient on arc

alpha12 · August 6, 2022, 6:27pm

Hey, newbie here.
at first thank guys for making such easy to use library.
so am working on a personal project, just trying to learn lvgl stuff. I am using ESP-32 and 3.5 inch 320x480 tft screen to display sensor data. everything is working great except displays lags too much, other than that i am happy with results. there is one question on my mind,
I would like a gradient on arc .

something like this, but keep in mind that i am using gauge for my project.
here is how my display looks like.
So color on left gauge arc should change from green to yellow to red. and i would also like to set text color inside the gauge accordingly.

reso · August 8, 2022, 7:34am

As far as I recall, v8 does not support gradient on the arc.
What you can do is use an image of an arc with a gradient and feed it to the arc:

reso · August 8, 2022, 8:39am

@embeddedt @kisvegabor is it possible to use an arc image on the LV_METER arc?

kisvegabor · August 9, 2022, 3:28pm

There is not API for that at this moment, however I agree that it’d be great to make possible setting an arc bg image. I’ll look into it while updating the API for v9.

Until that you can easily hack it by adding an image here

github.com

lvgl/lvgl/blob/4a506542dd3fbcd8d0f39cd12bde542589b57081/src/extra/widgets/meter/lv_meter.c#L353

    
      
          lv_obj_draw_dsc_init(&part_draw_dsc, draw_ctx);
          part_draw_dsc.arc_dsc = &arc_dsc;
          part_draw_dsc.part = LV_PART_INDICATOR;
          part_draw_dsc.class_p = MY_CLASS;
          part_draw_dsc.type = LV_METER_DRAW_PART_ARC;
          
          
_LV_LL_READ_BACK(&meter->indicator_ll, indic) {
              if(indic->type != LV_METER_INDICATOR_TYPE_ARC) continue;
          
          
    arc_dsc.color = indic->type_data.arc.color;
              arc_dsc.width = indic->type_data.arc.width;
              arc_dsc.opa = indic->opa > LV_OPA_MAX ? opa_main : (opa_main * indic->opa) >> 8;
          
          
    lv_meter_scale_t * scale = indic->scale;
          
          
    int32_t start_angle = lv_map(indic->start_value, scale->min, scale->max, scale->rotation,
                                           scale->rotation + scale->angle_range);
              int32_t end_angle = lv_map(indic->end_value, scale->min, scale->max, scale->rotation,
                                         scale->rotation + scale->angle_range);
          
          
    part_draw_dsc.radius = r_out + indic->type_data.arc.r_mod;

like

    arc_dsc.img_src = &my_img;

reso · August 10, 2022, 9:01am

Another option is to keep the meter scale and ticks, but not create the arc on the gauge.
Create an arc object above the meter with the same range/rotation etc.
I’ve done this to create a gauge with a floating needle and an arc that follows the needle.

cheng.hl · March 8, 2023, 8:57am

I am wondering how to change the arc’s color.