Fade/Grey portions of the screen

[bobwolff68]

Hey all,
Is there a decent way to basically fade or grey a portion of the screen based upon what is already painted? The use case here is I've created a window-system where a dialog can pop up on top of the existing display and that display is built of several separate sprites which each draw their portion on their own. I've got a way to halt the screen sprites from drawing while I put up the dialog "on top", but to make it super clear that the dialog is the user's main focus, I'd love to paint the surrounding areas a dimmer/faded version of itself to make it super obvious.

The one thought I had was to use the screen capture which reads every pixel into memory - modify the parts I want to grey out, and then send the image back to the screen before putting the dialog up. But that seems really intense in terms of bandwidth over SPI and processing side.

Any experienced/brilliant thoughts? :)

[Bodmer]

This is not something I have done.

Clearly a large area of the screen has to be redrawn with reduced intensity colours. You don't say what processor or pixel count screen you have, or whether it is readable. There is an alphaBlend function to mix 2 colours, see example. There are also functions to read the screen areas and write back. There is a readRect() function that was written to move areas of the screen when used with pushRect(), one complication is that the 16 bit colour values are byte swapped when using readRect() so it is compatible with the SPI byte output order. However bytes can be swapped easily.

Here is one approach:

#include <TFT_eSPI.h>                   // Hardware-specific library
TFT_eSPI tft = TFT_eSPI();              // Invoke custom library

const uint16_t w = 320, h = 240;

uint8_t alpha = 80; // Alpha in range 0 - 255

// readRect values are byte swapped so must swap bytes to get true colour
inline uint16_t swap(uint16_t col)
{
  return col << 8 | col >> 8;
}

void setup() {
  tft.begin();
  tft.setRotation(1);
}

void loop() {
  static uint16_t lineBuf[w];

  tft.fillScreen(random(0x10000));
  
  // Draw some random rectangles
  for (int i = 0; i < 40; i++)
  {
    int rw = random(100);
    int rh = random(100);
    int rx = random(w - rw);
    int ry = random(h - rh);
    tft.fillRect(rx, ry, rw, rh, random(0x10000));
  }

  for (uint16_t y = 0; y < h; y++)
  {
    tft.readRect(0, y, w, 1, lineBuf);
    for (uint16_t x = 0; x < w; x++)
    {
      uint16_t pixel = swap(lineBuf[x]);
      // Area above and below
      if (y < 50 || y > h - 50)
      {
        lineBuf[x] = swap(tft.alphaBlend(128, pixel, TFT_BLACK));
      }
      // Area to left and right
      else if ( x < 50 || x > w - 50)
      {
        lineBuf[x] = swap(tft.alphaBlend(128, pixel, TFT_BLACK));
      }
    }
    tft.pushRect(0, y, w, 1, lineBuf);
  }

  delay(2000);
}

If the screen cannot be read then this will not work. As you may see the line scan it might be better visually to have the line scan converge towards the central section.

Here is another simple cross hatching technique that should be fast:

#include <TFT_eSPI.h>                   // Hardware-specific library
TFT_eSPI tft = TFT_eSPI();              // Invoke custom library

const uint16_t w = 320, h = 240;

uint8_t alpha = 80; // Alpha in range 0 - 255

// readRect values are byte swapped so must swap bytes to get true colour
inline uint16_t swap(uint16_t col)
{
  return col << 8 | col >> 8;
}

void setup() {
  tft.begin();
  tft.setRotation(1);
}

void loop() {

  tft.fillScreen(random(0x10000));

  // Draw some random rectangles
  for (int i = 0; i < 40; i++)
  {
    int rw = random(100);
    int rh = random(100);
    int rx = random(w - rw);
    int ry = random(h - rh);
    tft.fillRect(rx, ry, rw, rh, random(0x10000));
  }

  for (uint16_t y = 0; y < h; y += 2)
  {
    // Area above and below
    if (y < 50 || y > h - 50)
    {
      tft.drawFastHLine(0, y, w, TFT_BLACK);
    }
    // Area to left and right
    else
    {
      tft.drawFastHLine(0, y, 50, TFT_BLACK);
      tft.drawFastHLine(w - 50, y, 50, TFT_BLACK);
    }
  }

  for (uint16_t x = 0; x < w; x += 2)
  {
    // Area to left and right
    if (x < 50 || x > w - 50)
    {
      tft.drawFastVLine(x, 0, h, TFT_BLACK);
    }
    // Area above and below
    else
    {
      tft.drawFastVLine(x, 0, 50, TFT_BLACK);
      tft.drawFastVLine(x, h - 50, 50, TFT_BLACK);
    }
  }
  delay(2000);
}

[bobwolff68]

@Bodmer -- You ROCK! Wow. Thank you. I would have been thankful to have gotten good advice about using alpha blending or cross hatching neither of which I had considered. But to throw the code in the reply as well is over the top. Can't wait to give this all a try.
--bob

[bobwolff68]

Well - I had GREAT luck with the cross-hatch effect. It's super fast and I dialed in the skip-line amount from y+=2 to y+=3 and it still is an obvious 'greyed out' area with less drawing to do. It does its work in 20-25 ms.
I tried the Alphablend version and just doing the readRect operations was taking 250ms so I abandoned using that one.
Thanks again for the ideas and the starter code too.