Replace the knob of lv_slider with an image

How-to
1

Description

i am using lv_slider in my project. I want to replace knob whit a image or create an image on knob.
but I don’t know what to do.(sorry, my english is not good, If the description is not clear, please let me know )

What LVGL version are you using?

v7.0

What do you want to achieve?

I want to replace knob whit a image or create an image on knob.

What have you tried so far?

I tried to change the knob style, but the results were not ideal

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

2

I think you can do this by setting the pattern_image property in a style and then applying that to LV_SLIDER_PART_KNOB.

3

Hi,embeddedt. I have trid it，but there are some errors. Below is my code，

    lv_style_t style;
    lv_style_init(&style);
	lv_style_set_pattern_image(&style, LV_STATE_DEFAULT, LV_SYMBOL_OK);

	lv_obj_t *slider = lv_slider_create(lv_scr_act(), NULL);
	lv_obj_add_style(slider, LV_SLIDER_PART_KNOB, &style);
	lv_obj_set_size(slider, 280, 100);
	lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 0);
	lv_slider_set_range(slider, 0, 100);
4

Can you use image resources for this，like this
lv_style_set_pattern_image(&style, LV_STATE_DEFAULT, &img_cogwheel_argb);

5

Yes; I’m pretty sure that images will work as well as symbols.

1 Like
6

Your code works well for me in the simulator.

7

Thanks，I will check what went errors.

8

image
image854×345 7.76 KB

I am using version 7.0.1, I also updated to 7.1.0 to try.Unfortunately,none of them work properly.
:sob:

9

lv_style_t style; should be static lv_style_t style;

See https://docs.lvgl.io/latest/en/html/overview/style.html#initialize-styles-and-set-get-properties

10

I have done it ,thanks

11

Good afternoon, can I use another object, such as canvas, instead of an image?

12

Unfortunately, you have to use an image as the slider handle is not a real object.

1 Like
13

Thanks for the answer