Widgets overlayed on image


Widget image overlay

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


What LVGL version are you using?


What do you want to achieve?

I’m making a custom gui for a synthesizer, and I would like to overlay widgets on top of custom lv_images. Is this possible, and is masking the way to achieve this? I would greatly appreciate a simple example of how to do this or perhaps even just a link to the pertinent section of the documentation. Cheers!

I’m a bit confused. What do you mean by a custom lv_img? Presumably you are trying to do more than just put widgets on top of a normal image; you could do the latter by just calling lv_obj_move_background on the image, or by creating your widgets after creating the image.

Sorry for the confusing lingo, I just meant an png 24 I import via the img tool. When I try to place a widget over an image contained in a container object in a tab, regardless of layout style it places the widget outside the canvas area of the image. Essentially, I’d like to overlay labels and dropdowns overtop an image. The image below might give a better picture… simply i want Wavetable Position label overtop of the image

Okay, so your problem here is that you are trying to use a container and at the same time overlay things on top of each other. Containers like to control the positions and/or sizes of objects themselves, so you would want to do this using a regular base lv_obj as the container. lv_obj doesn’t control its children in any fashion.

You can then align/size the Wavetable Position label to be on top of the image.

1 Like

Good deal, thanks!