Designe Status Bar

How-to
1

I’d like to know if there’s any way to draw this element?

Status bar like the one below?

image

I need design this:

image

2

Hi @allacmc. Maybe a custom progess bar will do the trick. You can overlay the pattern on top to make the pattern. Or even a slider with no interaction to change the knob. There always the option to create your own widget too.

1 Like
3

I see you’re using an older example with ESP-IDF v4.0 instead of v5.5.4. Also, you’re using LVGL v8.0 rather than v9.0 or newer.

image
image958×734 71.8 KB

Yes, lv_slider could help you. Set the knob (triangle indicator) to a background image, set the indicator to another background image (the blue one), and set the default background to an image (black, gray, etc.). If you need help, could you share the images?

4

I using the squareline studio for generate lvgl code.

image
image1851×1134 262 KB

What’s the best way to create this slider?

1 Like
5

Have you tried the Pro Editor? I don’t have experience with the square line studio so I don’t know how to customize components in it

1 Like
6

If you use SquareLine Studio, remember it is only for educational purposes, not for commercial products, and you’re limited to about 150 widgets. You could switch to EEZ Studio, which is 100% free.

You could check how this guy implemented a water tank level using images and try something similar.
ARDUINO IDE + ESP32 + TFT LCD + LVGL + EEZ Studio | Wireless Water Level Monitoring And Controlling

1 Like