Issue with the display of ticks and major ticks on arc of lv meter

wreyford · July 9, 2021, 1:46pm

Description

I’m trying to set up a meter widget as in the image, but irrespective of the length I make the ticks and major ticks, they keep on displaying from the center of the widget.

The second issue I’m having, is to actually get the ticks to display on the arc. Currently they stop before the arc.

What MCU/Processor/Board and compiler are you using?

VSCode, ESP-IDF, ESP32-Wroom-32E-Devkit4, IL9488 480x320, FT6X06
I’m using [lv_port_esp32 @ 557679a6]

What do you experience?

What LVGL version are you using?

V8.1.0-dev (master)

What do you want to achieve?

See my description above.

What have you tried so far?

See the code below. Irrespective of me changing the length from 10 to 5 or 20 for that matter it remains as in the image.

Code to reproduce

  meter = lv_meter_create(cont);
  lv_obj_set_size(meter, 124, 124);
  /*Add a scale first*/
  lv_meter_scale_t * scale = lv_meter_add_scale(meter);
  lv_meter_set_scale_ticks(meter, scale, 11, 2, 10, lv_color_hex3(0xeee));
  lv_meter_set_scale_major_ticks(meter, scale, 2, 2, 10, lv_palette_main(LV_PALETTE_GREY), 10);
  lv_meter_set_scale_range(meter, scale, 0, 100, 270, 90);  
lv_linemeter_set_scale(meter, 240, 100);

  /* remove the circle from the middle*/
  lv_obj_remove_style(meter, NULL, LV_PART_INDICATOR);
  
  /*Add an arc indicator*/
  lv_meter_indicator_t * indic1 = lv_meter_add_arc(meter, scale, 10, lv_palette_main(LV_PALETTE_BLUE), 10);

  lv_meter_set_indicator_start_value(meter, indic1, 0); /*Set the begin value*/
  lv_meter_set_indicator_end_value(meter, indic1, fs_partition_info->littlefs_partition_percentage_avail); /*Set the current value*/
  
  lv_obj_align(meter, LV_ALIGN_BOTTOM_RIGHT, -10, 10);
  obj = lv_label_create(meter);
  lv_label_set_text_fmt(obj, "%d\%", fs_partition_info->littlefs_partition_percentage_avail);
  lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);
  obj = lv_label_create(meter);
  lv_label_set_text(obj, "Flash");
  lv_obj_align(obj, LV_ALIGN_BOTTOM_MID, 30, -10);

The percentage is 99, and correctly indicated.

Screenshot and/or video

wreyford · July 12, 2021, 12:58pm

I modified the lv_demo_widget.c in the simulator, to get the effect I’m actually looking for.
When I do this, I get the following meter look:

modified_code_in_sim

Before my modification the meter in the example looked as follows:

lv_demo_sim_meter

Here is the example code modified, with the original just commented out.
I just added bg_col, to get the background color for the default theme on the ESP32 build, otherwise same as example.

meter3 = create_meter_box(parent, "Network Speed", "Low speed", "Normal Speed", "High Speed");
    if(disp_size < DISP_LARGE) lv_obj_add_flag(lv_obj_get_parent(meter3), LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);

    /*Add a special circle to the needle's pivot*/
    lv_obj_set_style_pad_hor(meter3, 10, 0);
    lv_obj_set_style_size(meter3, 10, LV_PART_INDICATOR);
    lv_obj_set_style_radius(meter3, LV_RADIUS_CIRCLE, LV_PART_INDICATOR);
    lv_obj_set_style_bg_opa(meter3, LV_OPA_COVER, LV_PART_INDICATOR);
    lv_obj_set_style_bg_color(meter3, lv_palette_darken(LV_PALETTE_GREY, 4), LV_PART_INDICATOR);
    lv_obj_set_style_outline_color(meter3, lv_color_white(), LV_PART_INDICATOR);
    lv_obj_set_style_outline_width(meter3, 3, LV_PART_INDICATOR);
    lv_obj_set_style_text_color(meter3, lv_palette_darken(LV_PALETTE_GREY, 1), LV_PART_TICKS);

    /*scale = lv_meter_add_scale(meter3);
    lv_meter_set_scale_range(meter3, scale, 10, 60, 220, 360 - 220);
    lv_meter_set_scale_ticks(meter3, scale, 21, 3, 17, lv_color_white());
    lv_meter_set_scale_major_ticks(meter3, scale, 4, 4, 22, lv_color_white(), 15);*/

   /* added to get the background color of the default theme on my ESP32.*/
    lv_color_t bg_col = lv_obj_get_style_bg_color(parent, 0);

    /*Add a scale first*/
    scale = lv_meter_add_scale(meter3);
    lv_meter_set_scale_range(meter3, scale, 0, 100, 270, 90);  //AJW ie 360-270 = 90 
    lv_meter_set_scale_ticks(meter3, scale, 11, 2, 15, bg_col); //lv_color_white()
    lv_meter_set_scale_major_ticks(meter3, scale, 2, 4, 12, bg_col, 10);  //lv_color_white()

    /*indic = lv_meter_add_arc(meter3, scale, 10, lv_palette_main(LV_PALETTE_RED), 0);
    lv_meter_set_indicator_start_value(meter3, indic, 0);
    lv_meter_set_indicator_end_value(meter3, indic, 20);

    indic = lv_meter_add_scale_lines(meter3, scale, lv_palette_darken(LV_PALETTE_RED, 3), lv_palette_darken(LV_PALETTE_RED, 3), true, 0);
    lv_meter_set_indicator_start_value(meter3, indic, 0);
    lv_meter_set_indicator_end_value(meter3, indic, 20);

    indic = lv_meter_add_arc(meter3, scale, 12, lv_palette_main(LV_PALETTE_BLUE), 0);
    lv_meter_set_indicator_start_value(meter3, indic, 20);
    lv_meter_set_indicator_end_value(meter3, indic, 40);

    indic = lv_meter_add_scale_lines(meter3, scale, lv_palette_darken(LV_PALETTE_BLUE, 3), lv_palette_darken(LV_PALETTE_BLUE, 3), true, 0);
    lv_meter_set_indicator_start_value(meter3, indic, 20);
    lv_meter_set_indicator_end_value(meter3, indic, 40);

    indic = lv_meter_add_arc(meter3, scale, 10, lv_palette_main(LV_PALETTE_GREEN), 0);
    lv_meter_set_indicator_start_value(meter3, indic, 40);
    lv_meter_set_indicator_end_value(meter3, indic, 60);

    indic = lv_meter_add_scale_lines(meter3, scale, lv_palette_darken(LV_PALETTE_GREEN, 3), lv_palette_darken(LV_PALETTE_GREEN, 3), true, 0);
    lv_meter_set_indicator_start_value(meter3, indic, 40);
    lv_meter_set_indicator_end_value(meter3, indic, 60); */

    /*Add an arc indicator*/
    indic = lv_meter_add_arc(meter3, scale, 10, lv_palette_main(LV_PALETTE_BLUE), 0);
    lv_meter_set_indicator_start_value(meter3, indic, 0); /*Set the begin value*/
    lv_meter_set_indicator_end_value(meter3, indic, 87); /*Set the current value*/

    indic = lv_meter_add_scale_lines(meter3, scale, lv_palette_darken(LV_PALETTE_BLUE, 3), lv_palette_darken(LV_PALETTE_BLUE, 3), true, 0);
    lv_meter_set_indicator_start_value(meter3, indic, 0); /*Set the begin value*/
    lv_meter_set_indicator_end_value(meter3, indic, 100); /*Set the current value*/
    indic = lv_meter_add_needle_line(meter3, scale, 4, lv_palette_darken(LV_PALETTE_GREY, 4), -25);

    lv_obj_t * mbps_label = lv_label_create(meter3);
    lv_label_set_text(mbps_label, "-");
    lv_obj_add_style(mbps_label, &style_title, 0);

    lv_obj_t * mbps_unit_label = lv_label_create(meter3);
    lv_label_set_text(mbps_unit_label, "Mbps");

The same code on my device in light theme, looks as follows:

This is very frustrating. I cannot get those lines to disappear, and also note that the dark blue ticks on the arc, that show up in the simulator, do not show up on the device.
Thus I can only conclude that the device is not behaving similarly to the simulator.

wreyford · August 9, 2021, 4:06pm

The latest upgrades to LVGL 8 on github have fixed the issue automagically!
Now I’m getting the correct - expected display, without any changes to my code.
A big thanks to everybody who contributed.