Custom drawing in LVGL v8

Hi,

I’m new to LVGL, and have a couple questions related to custom drawing in v8.

  1. If I wanted to round only the bottom two corners of a button (see example below) would this be possible using a style, or do I need to override the drawing function associated with the object? lv_obj_set_style_radius doesn’t seem to have the flexibility for this.

button_example

  1. I read this blog post: Extend the functionality of objects in LittlevGL | LVGL’s Blog, however the APIs in LVGL v8 have changed, and replacing the object’s design function via lv_obj_get_design_func and lv_obj_set_design_func is no longer possible, because these functions do not exist. What is the proper way to override drawing of an object in LVGL v8? I’m guessing the answer involves Hook Drawing but it’s not clear to me how to replace the drawing that would occur in the LV_EVENT_DRAW_MAIN event.

I read the reply to this post by @kisvegabor, but as I mentioned above the ability to replace the design function appears to have been deprecated, unless I’m missing something. Any help would be appreciated!

The problem is that not only the styles but the draw engine itself doen’t have the flexibility to draw different radius on each corner.

You can do 2 things:

  1. Use an image
  2. Use lv_imgbtn which required smaller images and has more flexibility.

Thank you - lv_imgbtn will work, but the drawback of this approach is that changing application themes (e.g. light mode to dark mode) requires a different image.

Just to confirm, is piecemeal drawing not possible in this scenario? (draw line, arc, line, etc.) Will the drawing engine be able to fill the enclosed space?

Another use case - my project will also need menu items that look like this:

menu_item_examples

Thanks in advance for any help you are able to provide. It is greatly appreciated :slight_smile:

This is a too complex shape for LVGL’s current SW draw engine.
If using light/dark themes is a concern you can also use the objects’s bg_img property. As it’s a style property it can be easily changed globally.