img options and transparency tests

[nagyrobi]

From https://docs.lvgl.io/8.3/widgets/core/img.html some options:

• Transparency (correlation with ESPHome's image transparency possibilities?)
• Recolor (img_recolor_opa adn img_recolor similar to bg_*)
• Mosaic
• Offset
• Rounded image
• Transformations (if not already done)

[nagyrobi]

Supported encodings?

[nagyrobi]

Some tests:

        - obj:  # background for test transparency
            id: color_matte
            x: 0
            y: 40
            width: 240
            height: 240
            bg_color: 0x00ffff
            bg_opa: cover
            radius: 0
            pad_all: 0
            border_width: 0
            widgets:
              - img:
                  align: center
                  src: esphome_logo_transparent
                  id: img_transp

with:

image:
  - file: https://esphome.io/_static/made-for-esphome-black-on-transparent.png
    id: esphome_logo_transparent
    resize: 220x72
    type: # as below
    use_transparency: # as below

with type: TRANSPARENT_BINARY (transparency enabled by default) results in:

with type: GRAYSCALE results in (same result with dither: FLOYDSTEINBERG):

with: type: GRAYSCALE and use_transparency: true results in (nothing):

with type: RGB565 results in:

with type: RGB565 and use_transparency: true results in:

with: type: RGB24 results in:

with: type: RGB24 and use_transparency: true results in:

with: type: RGBA (transparency enabled by default) results in:

[nagyrobi]

Repeated some of the tests with SVG image instead of PNG:

image:
  - file: https://esphome.io/_static/made-for-esphome-black-on-transparent.svg
    id: esphome_logo_transparent
    resize: 220x72
    type: # as below
    use_transparency: # as below

with type: TRANSPARENT_BINARY (transparency enabled by default) results in:

with: type: GRAYSCALE and use_transparency: true results in (nothing):

with type: RGB565 and use_transparency: true results in:

[nagyrobi]

I think situation is similar to the fonts, LVGL seems to use a proprietary format, and they have online and offline converter tools for images to C arrays: https://lvgl.io/tools/imageconverter

It's two approaches here:

• the command line tool can be used before compile, like pillow or cairo are used (add another type: LVGL with sub-options maybe?)
• some other implementation needs to be done at runtime for Remote images #14

[nagyrobi]

Scenario for tests. Save this transparent PNG as inc/g64.png.

Configure in ESPHome:

image:
  - file: "inc/g64.png"
    id: transp01
    type: RGB565
  - file: "inc/g64.png"
    id: transp02
    type: RGB565
    use_transparency: true
  - file: "inc/g64.png"
    id: transp03
    type: RGB24
  - file: "inc/g64.png"
    id: transp04
    type: RGB24
    use_transparency: true
  - file: "inc/g64.png"
    id: transp05
    type: RGBA

lvgl:
  ...
    - id: page_imgs
      skip: false
      pad_all: 0
      bg_color: 0xadab00
      border_width: 3
      y: 30
      widgets:
        - img:
            x: 10
            y: 10
            src: transp01
            id: img_transp01
        - label:
            text: RGB565
            align_to:
              id: img_transp01
              align: OUT_BOTTOM_MID

        - img:
            src: transp02
            id: img_transp02
            align_to:
              id: img_transp01
              align: OUT_RIGHT_TOP
              x: 10
        - label:
            text: RGB565+T
            align_to:
              id: img_transp02
              align: OUT_BOTTOM_MID

        - img:
            src: transp03
            id: img_transp03
            align_to:
              id: img_transp02
              align: OUT_RIGHT_TOP
              x: 10
        - label:
            text: RGB24
            align_to:
              id: img_transp03
              align: OUT_BOTTOM_MID

        - img:
            src: transp04
            id: img_transp04
            align_to:
              id: img_transp03
              align: OUT_RIGHT_TOP
              x: 10
        - label:
            text: RGB24+T
            align_to:
              id: img_transp04
              align: OUT_BOTTOM_MID

        - img:
            src: transp05
            id: img_transp05
            align_to:
              id: img_transp04
              align: OUT_RIGHT_TOP
              x: 10
        - label:
            text: RGBA
            align_to:
              id: img_transp05
              align: OUT_BOTTOM_MID

Result:

In the log:

[I][lvgl:000]: [Warn]   (944197.437, +944197437)         lv_img_decoder_built_in_open: Image decoder open: unknown color format         (in lv_img_decoder.c line #464)
[I][lvgl:000]: [Warn]   (944197.437, +0)         _lv_img_cache_open: Image draw cannot open the image resource  (in lv_img_cache.c line #125)
[I][lvgl:000]: [Warn]   (944197.437, +0)         lv_draw_img: Image draw error  (in lv_draw_img.c line #84)
[I][lvgl:000]: [Warn]   (944197.437, +0)         lv_img_decoder_built_in_open: Image decoder open: unknown color format         (in lv_img_decoder.c line #464)
[I][lvgl:000]: [Warn]   (944197.437, +0)         _lv_img_cache_open: Image draw cannot open the image resource  (in lv_img_cache.c line #125)
[I][lvgl:000]: [Warn]   (944197.437, +0)         lv_draw_img: Image draw error  (in lv_draw_img.c line #84)
[I][lvgl:000]: [Warn]   (944197.437, +0)         lv_img_decoder_built_in_open: Image decoder open: unknown color format         (in lv_img_decoder.c line #464)
[I][lvgl:000]: [Warn]   (944197.437, +0)         _lv_img_cache_open: Image draw cannot open the image resource  (in lv_img_cache.c line #125)
[I][lvgl:000]: [Warn]   (944197.437, +0)         lv_draw_img: Image draw error  (in lv_draw_img.c line #84)

[clydebarrow]

Transparency now works, e.g.

image:
  - file: image.png
    resize: 200x200
    type: RGB565
    use_transparency: true
    id: image_png

[clydebarrow]

img_recolor and friends added.

[nagyrobi]

Transparency now works

Hooray: