Style a LED like in the examples

How-to
1
  • Be sure to update lvgl from the latest version from the master branch.

I cannot constantly update to the newest version with my now pretty big project.

Description

I am trying to make LED’s like in the documentation for LED’s. It says “LED with custom style”. What I really like about those is the light coming out of the circle giving the impression that the led is lightning it’s surroundings.
All I need is the styles used for the led in the example.

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

I am working with the simulator in codeblocks.

What LVGL version are you using?

7.0

What do you want to achieve?

To have LED’s like in the example.

What have you tried so far?

I made a rounded container with the leds style which changes brightness but I don’t know how to achieve the over the border light effect.
I tried to figure out what style is applied to it in the examples but I couldn’t figure out what is going on but I guess it could be obvious if I was pointed to the right direction.

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

These are the default LED styles: https://github.com/lvgl/lvgl/blob/0f69469eeeecf41921f870051bc3af311114fa13/src/lv_themes/lv_theme_material.c#L391-L400

And this is where some properties are overridden based on the brightness: https://github.com/lvgl/lvgl/blob/0f69469eeeecf41921f870051bc3af311114fa13/src/lv_widgets/lv_led.c#L208-L219

1 Like
3

I must admit the second part is a bit too advanced but I am very happy with the result using these styles.