Radial Gradient

Description

I want to make a background as in the attachment.

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

NXP IMXRT1176

What LVGL version are you using?

v9.0

What do you want to achieve?

I want to have a background as in the attachment.

What have you tried so far?

I have tried with 4 container but gradient seems 2 direction vertical and horizontal. I could not achieve my goal.

image

What about simple bmp-image as a background? You can create screen from img object.

Sorry I had to give info about concers, it’s size is very big for embedded systems memory, so if possible, I have to do it with software.

Hello,

as far as I know there is no support for radial gradients like this in LVGL. As glory-man suggested a simple image would be the easiest option here, aside from looking quite a bit better depending on the constraints of your display (for instance, 16-bit displays need dithering for gradients to look good, LVGL does not do this by itself).

Seeing as the image is symmetrical in 4 axis you should be able to get away with splitting the image in four parts like so:

and arranging them to make a whole background.

I opened an issue on the LVGL Github repo about doing this.

I provided some code examples of how to go about doing it. The code examples are in Python and should be able to be ported to C code without much issue. The example outputs the data to a BMP file so you would need to work out how to get the data into a buffer instead. Shouldn’t be too hard to do.