Restrictions With Using High Color

General discussion
1

What are the LVGL restrictions when targeting a device that uses High Color (16 bit) like the Raspberry Pi?

Trying to draw a rectangle (via Canvas) however some issues have occurred:

  1. Shadows aren’t drawn
  2. Borders aren’t drawn
  3. Setting a background gradient color causes the rectangle to be invisible
  4. A Segmentation Fault occurs when setting background opacity, or background gradient direction

What is the formula for calculating the canvas buffer size when High Color is used? I am following the Canvas 1 example however it isn’t designed with High Color in mind (what changes need to be made?).

2

Very strange that a Rectangle Descriptor requires a color format, yet a LVGL object doesn’t require a color format. A gradient and shadow is shown on a LVGL object, however no gradient and shadow is shown on a rectangle (via a Rectangle Descriptor). The following fields can be successfully set on an LVGL object:

  • bg_opa
  • bg_grad_dir
  • bg_grad_color
  • shadow_width
  • shadow_ofs_x
  • shadow_ofs_y
3

Below is the LVGL object version which shows the gradient, border, and shadow:

// ...
LvglObject.create(Screen.activeScreen).apply {
        setRadiusStyle(5)
        setBackgroundOpacityStyle(LV_OPA_COVER.toUByte())
        setBackgroundColorStyle(lightenPaletteColor(LV_PALETTE_GREY, 1u))
        setBackgroundGradientColorStyle(mainPaletteColor(LV_PALETTE_BLUE))
        setBackgroundGradientDirectionStyle(LV_GRAD_DIR_VER.toUByte())
        setBackgroundMainStopStyle(128)
        setBackgroundGradientStopStyle(192)
        setShadowWidthStyle(5)
        setShadowXOffsetStyle(5)
        setShadowYOffsetStyle(5)
        setBorderWidthStyle(2)
        setBorderOpacityStyle(LV_OPA_90.toUByte())
        setBorderColorStyle(mainPaletteColor(LV_PALETTE_GREEN))
        center()
    }
// ...

Below is the Rectangle Descriptor version, which doesn’t show the gradient, border, and shadow:

// ...
rectangleDescriptor {
    radius = 10
    // Causes seg fault.
//    backgroundOpacity = LV_OPA_COVER.toUByte()
    // Causes seg fault.
//    backgroundGradientDirection = LV_GRAD_DIR_HOR.toUByte()
    backgroundColor = mainPaletteColor(LV_PALETTE_RED)
    // Causes the rectangle to be invisible.
//    backgroundGradientColor = mainPaletteColor(LV_PALETTE_BLUE)
    borderWidth = 2
    borderOpacity = LV_OPA_90.toUByte()
    borderColor = lv_color_white().toColor()
    shadowWidth = 5
    shadowYOffset = 5
    shadowXOffset = 5
}
// ...
4

It appears as though there are some bugs with Rectangle Descriptor and/or Canvas in the LVGL library.

5

By “High color” you mean RGB565, right? If so, it’s the most common format for embedded so it’s very well supported.

I can’t clearly see how your code is mapped to C and what happens in the background. For example in LVGL backgroundOpacity is called bg_opa.

Could you test in a simulator in C and send a code snippet that we can use the reproduce the issue?

6

There is a Git branch I have created that reproduces the issues. Just about all relevant code can be found in the drawRectangle function. Despite the fact that it isn’t C code the Kotlin code is close enough to C that it can be easily converted. Some relevant code is positioned towards the top of the source file:

// ...
private const val CANVAS_WIDTH = 200.toShort()
private const val CANVAS_HEIGHT = 150.toShort()
private val arena = Arena()
private val canvasBuf = arena.allocArray<lv_color_t>(trueColorBufferSize(CANVAS_WIDTH, CANVAS_HEIGHT).toInt())
// ...
7

We found a bug in a recent gradient feature. It should work well now.

8

Which LVGL version contains the fix?

9

Latest master branch