How to set value indicator on horizontal/vertical scale

How-to
1

Description

I want to use a horizontal scale (LV_SCALE_MODE_HORIZONTAL_BOTTOM) and have no probems creating a nice-looking scale. But how am I supposed to indicate a value on the widget? looking at API calls (and scrolling through the LVGL implementation), I cannot find any obvious way to get the scale widget to handle this. Is it as simple as you should combine this with a bar widget?

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

ESP32-S3

What LVGL version are you using?

9.2.2

What do you want to achieve?

See description.

What have you tried so far?

Studying the API and looking at the LVGL code.

Code to reproduce

Not really applicable, any code to get a working horizontal scale is fine.

1 Like
2

I’m not sure what effect you need, do you have any example pictures to take a look at

Scale (lv_scale) — LVGL documentation

3

I don1t want any specific effect. I want it to show/indicate a value. The round scales have support for at needle (Line added bu user). But there are no similar support for any kind of bar or arrow or other indicator on a straight scale.

1 Like
4

I’m in the same boat as you, I’m not sure if there’s some kind of bug, but I’m able to create round scales with indicators without a problem, any time I try creating a horizontal or vertical scale I’m unable to apply the same logic as in a round one to produce any kind of needle. Now granted I’m new to lvgl however I was successfully able to get it running under code blocks and I’ve ported it to actual hardware, and both platforms have the same problem.

Here’s an example of what DOESN’T work under both 9.2.2 and 9.3

    lv_obj_t * scale = lv_scale_create(lv_screen_active());
    lv_obj_set_size(scale, 200, 60);
    lv_scale_set_mode(scale, LV_SCALE_MODE_HORIZONTAL_BOTTOM);
    lv_obj_center(scale);

    lv_scale_set_label_show(scale, true);
    lv_obj_set_style_transform_rotation(scale, 450, LV_PART_INDICATOR);
    lv_obj_set_style_length(scale, 30, LV_PART_INDICATOR);
    lv_obj_set_style_translate_x(scale, 5, LV_PART_INDICATOR);

    lv_scale_set_total_tick_count(scale, 31);
    lv_scale_set_major_tick_every(scale, 5);

    lv_obj_set_style_length(scale, 5, LV_PART_ITEMS);
    lv_obj_set_style_length(scale, 10, LV_PART_INDICATOR);
    lv_scale_set_range(scale, 10, 40);
    
    lv_obj_t * needle_line = lv_line_create(scale);
    lv_obj_set_style_line_width(needle_line, 3, LV_PART_MAIN);
    lv_obj_set_style_line_rounded(needle_line, true, LV_PART_MAIN);
    lv_scale_set_line_needle_value(scale, needle_line, 40, 33);
5

I experimented with putting a bar just above the horizontal scale. Worked fine after some styling. In the end I skipped the scale and just kept the bar :slight_smile: