Build a custom widget for the LVGL 7.1.1

Hello,

How can I build something like this as a widget and use it inside the LVGL engine? I know the background could be a fixed size PNG image, as well as its needle.

2021-04-27_18-18-09

Thank you for your invitation.
Lvgl has a built-in dashboard engine called scale
image
Here some description of properties from document

Scale properties

Auxiliary properties for scale-like elements. Scales have a normal and end region. As the name implies the end region is the end of the scale where can be critical values or inactive values. The normal region is before the end region. Both regions could have different properties.

  • scale_grad_color ( lv_color_t ): In normal region make gradient to this color on the scale lines. Default value: LV_COLOR_BLACK .
  • scale_end_color ( lv_color_t ): Color of the scale lines in the end region. Default value: LV_COLOR_BLACK .
  • scale_width ( lv_style_int_t ): Width of the scale. Default value: LV_DPI / 8 . Default value: LV_DPI / 8 .
  • scale_border_width ( lv_style_int_t ): Width of a border drawn on the outer side of the scale in the normal region. Default value: 0.
  • scale_end_border_width ( lv_style_int_t ): Width of a border drawn on the outer side of the scale in the end region. Default value: 0.
  • scale_end_line_width ( lv_style_int_t ): Width of a scale lines in the end region. Default value: 0.
2 Likes

FYI, in v8 it became much more powerful.
See the examples here https://github.com/lvgl/lvgl/tree/master/examples/widgets/meter

1 Like

The second post did not answer my question, it talks about something else, however, I know in my question I may be able to handle it with a fixed image and rotating needle (rotating image).

By the way, How can I create something like the below gauge? the color of the bar could be something from value a to b, another color from b +1 to c, c+1 to d and … etc.

Javascript-Animated-Gauges-Plugin-JustGage

Try using arc widget
https://docs.lvgl.io/latest/en/html/widgets/arc.html

I tryed to write this and in simulator…

    lv_obj_t * screen;
    screen = lv_obj_create(lv_scr_act(), NULL);
    lv_obj_set_size(screen, 480, 320);
    lv_obj_align(screen, NULL, LV_ALIGN_CENTER, 0, 0);
    //        lv_obj_set_style_local_bg_color(screen, LV_OBJ_PART_MAIN,   LV_STATE_DEFAULT, LV_COLOR_BLUE);

      
    
    lv_obj_t * gauge;
    gauge = lv_arc_create(screen, NULL);
    lv_obj_set_size(gauge, 250, 250);
    lv_arc_set_angles(gauge, 180, 360);
    lv_arc_set_bg_angles(gauge, 180, 360);
    lv_arc_set_value(gauge, 72);
            
    lv_obj_set_style_local_bg_opa(gauge, LV_ARC_PART_BG, LV_STATE_DEFAULT, 0);                      /* remove background arc */
    lv_obj_set_style_local_border_opa(gauge, LV_ARC_PART_BG, LV_STATE_DEFAULT, 0);                  /* remove border arc */
    lv_obj_set_style_local_line_color(gauge, LV_ARC_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_ORANGE); /* active line indicator orange */
    lv_obj_set_style_local_line_rounded(gauge, LV_ARC_PART_INDIC, LV_STATE_DEFAULT, false);         /* square line of arc indicator */
    lv_obj_set_style_local_line_rounded(gauge, LV_ARC_PART_BG, LV_STATE_DEFAULT, false);            /* square line of arc bg */
    
    lv_obj_set_style_local_line_width(gauge, LV_ARC_PART_INDIC, LV_STATE_DEFAULT, 40);              /* line more big */
    lv_obj_set_style_local_line_width(gauge, LV_ARC_PART_BG, LV_STATE_DEFAULT, 40);                 /* and bg of arc */
    lv_obj_set_style_local_value_str(gauge, LV_ARC_PART_BG, LV_STATE_DEFAULT, "pounds");            /* text */
    lv_obj_align(gauge, NULL, LV_ALIGN_CENTER, 0, 0);
    
    /* text of value */
    lv_obj_t * txt;
    txt = lv_label_create(screen, NULL);
    lv_label_set_text(txt, "72");
    lv_obj_set_style_local_text_font(txt, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_36);
    lv_obj_align(txt, gauge, LV_ALIGN_IN_BOTTOM_MID, 0, -((lv_obj_get_height(gauge)/2)+5));