[epaper_spi] Enhance color capabilities for spectra e6 with dithering

[super-qua]

Component name

epaper_spi

Link to component documentation on our website

https://esphome.io/components/display/epaper_spi/

Describe the enhancement

Currently the implementation for mapping colors for the spectra e6 in https://github.com/esphome/esphome/blob/dev/esphome/components/epaper_spi/epaper_spi_spectra_e6.cpp limits the colors to the 6 built-in colors of the display.

By applying dithering techniques, this could be enhanced to display more colors, for example for LVGL widgets filling or for text colors.

In a simple form, limited to any combination of the 6 built-in colors, this could be managed by applying a checkerboard dithering between two built in colors, producing colors like cyan, magenta, orange, etc.

Example1: color magenta (rgb(255,0,255))
instead of returning RED for every pixel in a 3x3 area, return

R B R
B R B
R B R

(R=RED, B=BLUE) which produces a purple effect for the viewer.

Example2: lighter red color (rgb(255,130,130)) as a mix of RED and WHITE pixels

W R W
R W R
W R W

Note: This does not require more sophisticated dithering algorithms like FloydSteinberg, as in this simple form only a static mapping is applied. Therefore it's less compute-intensive.

By combining only two built-in colors, theoretically 15 more colors could be displayed on the epaper which would then result in 21 colors instead of 6.

Use cases

Allows more colors to be displayed on the epaper screen when drawing objects.

Anything else?

Blog post which explains the desired result in more detail: https://myembeddedstuff.com/e-ink-spectra-6-color

This is a continuation of the discussion in esphome/esphome#12709

[github-actions[bot]]

🏷️ I've automatically added the component: epaper_spi label to help categorize this feature request.

[Julian-1-2-3-4-5]

you could probably do this youself using a good amount of code within the lambda. Not saying that's how it should be, it's way harder than it should be, but that should work

[super-qua]

definitely true. unfortunately that's exceeding my (rusty) C++ experience level at this point.

[super-qua]

To fill backgrounds with a background color not supported by default, I am now applying a workaround that should have minimum size and hopefully memory effect on the application.

Instead of setting a bg_image, for which the image has to have the same dimension - and therefore is rather big, I add a image widget as the first child of the obj I want to fill the background for.
Because LVGL repeats the image file content in the image widget if the size is lower, I can use only a 2x2 or 4x4 dithered image with the color I want.

For example if I want a cyan background, I create a 2x2 bmp image with

B G
G B

then in the yaml code, I load the image normally

image:
  - file: "<path_to_bmp>"
    type: RGB565
    id: bg_cyan

and add it to the object

- obj:
    pad_all: 0
    bg_opa: TRANSP
    clip_corner: true
    width: 100%
    height: 70
    widgets:
      - image:
          src: bg_cyan
          width: 100%
          height: 100%

It's important to set pad_all: 0, bg_opa: TRANSP and clip_corner: true on the obj, and width: 100% height: 100% on the image.

This works quite well for me for the moment. Just in case anyone tries to achieve the same.