Using alpha blending

[brightproject]

Good day @tobozo 😀

The TFT_eSPI library has a color mixing function

uint16_t TFT_eSPI::alphaBlend(uint8_t alpha, uint16_t fgc, uint16_t bgc)
{
  // Split out and blend 5-bit red and blue channels
  uint32_t rxb = bgc & 0xF81F;
  rxb += ((fgc & 0xF81F) - rxb) * (alpha >> 2) >> 6;
  // Split out and blend 6-bit green channel
  uint32_t xgx = bgc & 0x07E0;
  xgx += ((fgc & 0x07E0) - xgx) * alpha >> 8;
  // Recombine channels
  return (rxb & 0xF81F) | (xgx & 0x07E0);
}

The LovyanGFX library has such a function

struct effect_fill_alpha
  {
    effect_fill_alpha(argb8888_t src)
      : _inv { (uint_fast16_t)(256 - src.A8()) }
      , _r8a { (uint_fast16_t)(src.R8() * (1 + src.A8())) }
      , _g8a { (uint_fast16_t)(src.G8() * (1 + src.A8())) }
      , _b8a { (uint_fast16_t)(src.B8() * (1 + src.A8())) }
    {}
    void set(argb8888_t src)
    {
      _inv = (uint_fast16_t)(256 - src.A8());
      _r8a = (uint_fast16_t)(src.R8() * (1 + src.A8()));
      _g8a = (uint_fast16_t)(src.G8() * (1 + src.A8()));
      _b8a = (uint_fast16_t)(src.B8() * (1 + src.A8()));
    }
    template <typename TDstColor>
    void operator() (int32_t x, int32_t y, TDstColor& dst)
    {
      (void)x; (void)y;
      dst.set((_r8a + dst.R8() * _inv) >> 8
             ,(_g8a + dst.G8() * _inv) >> 8
             ,(_b8a + dst.B8() * _inv) >> 8
             );
    }
    template <typename TDstColor, typename TSrcColor>
    void operator() (int32_t x, int32_t y, TDstColor& dst, TSrcColor& src)
    {
      (void)x; (void)y;
      uint_fast16_t  a8 = 1 + src.A8();
      uint_fast16_t inv = 257 - a8;
      uint_fast16_t r8a = a8 * src.R8();
      uint_fast16_t g8a = a8 * src.G8();
      uint_fast16_t b8a = a8 * src.B8();

      dst.set((r8a + dst.R8() * inv) >> 8
             ,(g8a + dst.G8() * inv) >> 8
             ,(b8a + dst.B8() * inv) >> 8
             );
    }
  private:
    uint_fast16_t _inv;
    uint_fast16_t _r8a;
    uint_fast16_t _g8a;
    uint_fast16_t _b8a;
  };

Is there any way to use a similar color mix?

gdraw.fillSprite(gdraw.alphaBlend(150, TFT_CYAN, TFT_BLUE)); // tft_eSPI
gdraw.fillSprite(gdraw.effect_fill_alpha(150, TFT_CYAN, TFT_BLUE)); // LGFX

[tobozo]

Hi,

gdraw.fillSprite(gdraw.effect_fill_alpha(150, TFT_CYAN, TFT_BLUE)); // LGFX

does this work?

gdraw.setColorDepth(32);
gdraw.fillSprite((lgfx::argb8888)0xFF00FFFFu); // fill argb(cyan 100% opaque)
gdraw.fillRectAlpha( 0, 0, gdraw.width(), gdraw.height(), 150, (lgfx::rgb888)0x0000FFu ); // blend 0x96 opacity with rgb(blue)

Otherwise you should be able to use lgfx::argb8888 for anything related to alpha blending, but this means both source and destination must support ::setColorDepth(32).

lgfx::argb8888 bg = 0xFF0000FFu // blue opaque (background)
lgfx::argb8888 fg = 0x9600FFFFu; // cyan semi transparent (to blend)

gdraw.setColorDepth(32);
gdraw.fillSprite(bg);
graw.fillRect(10, 10, 100, 100, fg); // should blend with background

Non-alpha blending can happen with other color depths when invoking pushRotatedWithAA()/pushImageRotateZoomWithAA() functions, it only affects the antialiased zones though.

And if you have an esp32p4, just use ppa_blend.

[brightproject]

does this work?

gdraw.setColorDepth(32);
gdraw.fillSprite((lgfx::argb8888)0xFF00FFFFu); // fill argb(cyan 100% opaque)
gdraw.fillRectAlpha( 0, 0, gdraw.width(), gdraw.height(), 150, (lgfx::rgb888)0x0000FFu ); // blend 0x96 opacity with rgb(blue)

I had to change argb8888 to argb8888_t in your pseudo code😀

gdraw.setColorDepth(32);
gdraw.fillSprite((lgfx::argb8888_t)0xFF00FFFFu); // fill argb(cyan 100% opaque)
gdraw.fillRectAlpha( 0, 0, gdraw.width(), gdraw.height(), 150, (lgfx::argb8888_t)0x0000FFu ); // blend 0x96 opacity with rgb(blue)

But even then, I can't see anything on the screen.
Actually, I have lgfx::Panel_ST7701_guition_esp32_4848S040, and to draw primitives on it properly, I use the following code:

#include <LovyanGFX.h>
#include <lgfx/v1/platforms/esp32s3/Panel_RGB.hpp>
#include <lgfx/v1/platforms/esp32s3/Bus_RGB.hpp>

LGFX tft;
LGFX_Sprite gdraw(&tft);

tft.init();
tft.setSwapBytes(true);
gdraw.setPsram(true);
gdraw.setColorDepth(lgfx::rgb332_1Byte); 
gdraw.createSprite(480, 480);
gdraw.fillSprite (TFT_BLACK);
gdraw.pushSprite (0, 0);

A color image is obtained only with rgb332_1Byte.

Maybe my ST7701 display, connected via SPI, does not support alpha channels?