Clearing old text from the gradient or image background #2446

otl1 · 2023-02-25T19:18:58Z

otl1
Feb 25, 2023

Hi @Bodmer , Thank you for the awesome library. I am trying to clear the old values printed on the gradient background. I tried it printing the blanks to clear the old values but no success. I also tried to cover the old values with transparent fillrectangle, it does clear it but leaves behind the dark green background. I want to keep the gradient as it is and don't want to reprint it again (printed once in setup()) and new values to be printed on it. How would I be able to achieve this? I have attached my code.
Thanks in Advance!

#include <Arduino.h>
#include "SPI.h"
#include <TFT_eSPI.h>

#define MAX_DISPLAY_WIDTH 240
#define MAX_DISPLAY_HEIGHT 320

TFT_eSPI tft = TFT_eSPI();

void setup()
{
  Serial.begin(115200);
  tft.begin();
  tft.fillRectVGradient(0, 0, MAX_DISPLAY_WIDTH, MAX_DISPLAY_HEIGHT, TFT_RED, TFT_YELLOW);
  tft.setTextFont(6);
  tft.setTextColor(TFT_BLUE);
} 

void loop()
{
  // tft.drawString("                  ", 106, 103);
  tft.drawString(String(random(1, 300)), 106, 103);
}

Answered by Bodmer

Feb 25, 2023

The only way to do this is to use a sprite with the correct background gradient drawn in it. Here is an example:

#include <Arduino.h>
#include "SPI.h"
#include <TFT_eSPI.h>

#define MAX_DISPLAY_WIDTH 240
#define MAX_DISPLAY_HEIGHT 320

TFT_eSPI tft = TFT_eSPI();
TFT_eSprite spr = TFT_eSprite(&tft);

void setup()
{
  Serial.begin(115200);
  tft.begin();
  tft.fillRectVGradient(0, 0, MAX_DISPLAY_WIDTH, MAX_DISPLAY_HEIGHT, TFT_RED, TFT_YELLOW);
}

void loop()
{
  // Text and background will be rendered in a sprite
  spr.setTextFont(6);
  uint16_t tw = spr.textWidth("888"); // Width of test to be drawn
  uint16_t th = spr.fontHeight();     // Font height

  spr.createSprite(tw, th);
  spr.set…

View full answer

Bodmer · 2023-02-25T21:40:47Z

Bodmer
Feb 25, 2023
Maintainer

The only way to do this is to use a sprite with the correct background gradient drawn in it. Here is an example:

#include <Arduino.h>
#include "SPI.h"
#include <TFT_eSPI.h>

#define MAX_DISPLAY_WIDTH 240
#define MAX_DISPLAY_HEIGHT 320

TFT_eSPI tft = TFT_eSPI();
TFT_eSprite spr = TFT_eSprite(&tft);

void setup()
{
  Serial.begin(115200);
  tft.begin();
  tft.fillRectVGradient(0, 0, MAX_DISPLAY_WIDTH, MAX_DISPLAY_HEIGHT, TFT_RED, TFT_YELLOW);
}

void loop()
{
  // Text and background will be rendered in a sprite
  spr.setTextFont(6);
  uint16_t tw = spr.textWidth("888"); // Width of test to be drawn
  uint16_t th = spr.fontHeight();     // Font height

  spr.createSprite(tw, th);
  spr.setTextColor(TFT_BLUE);

  // Position of text
  uint16_t textX = 103;
  uint16_t textY = 106;

  // Test in random positions
  //uint16_t textX = random(MAX_DISPLAY_WIDTH - tw);
  //uint16_t textY = random(MAX_DISPLAY_HEIGHT - th);

  // Calculate colour gradient value at top of sprite based on text position
  uint16_t topColor = tft.alphaBlend(255*textY/ MAX_DISPLAY_HEIGHT, TFT_YELLOW, TFT_RED);
  // Calculate colour gradient value at bottom of sprite
  uint16_t bottomColor = tft.alphaBlend(255*(textY + spr.fontHeight()) / MAX_DISPLAY_HEIGHT, TFT_YELLOW, TFT_RED);

  // Fill sprite with the calculated gradient
  spr.fillRectVGradient(0, 0, tw, th, topColor, bottomColor);

  // Draw the value in the sprite
  spr.drawString(String(random(1, 300)), 0, 0);

  // Push sprite to desired position
  spr.pushSprite(textX, textY);

  spr.deleteSprite();

  delay(1000);
}

The loop() code could be made into a function to drawn and text anywhere in the gradient area.

0 replies

otl1 · 2023-02-26T08:49:43Z

otl1
Feb 26, 2023
Author

Thank you @Bodmer for the quick response. It did work, I made the function. But if I use spr.setTextDatum(ML_DATUM); to set the text plotting alignment to the middle left, only half of the text is displayed and background of last two text is also weird, I am also getting following warnings:

src/main.cpp: In function 'void drawTftSprite(const uint16_t&, const uint16_t&, const uint16_t&, const uint16_t&)':
src/main.cpp:18:80: warning: unsigned conversion from 'int' to 'uint16_t' {aka 'short unsigned int'} changes value from '10528252' to '42492' [-Woverflow]
   uint16_t topColor = tft.alphaBlend(255 * textY / MAX_DISPLAY_HEIGHT, 0xf8ac, 0xa0a5fc);
                                                                                ^~~~~~~~
src/main.cpp:20:104: warning: unsigned conversion from 'int' to 'uint16_t' {aka 'short unsigned int'} changes value from '10528252' to '42492' [-Woverflow]
   uint16_t bottomColor = tft.alphaBlend(255 * (textY + spr.fontHeight()) / MAX_DISPLAY_HEIGHT, 0xf8ac, 0xa0a5fc);
                                                                                                        ^~~~~~~~
In file included from src/main.cpp:3:
.pio/libdeps/esp32dev/TFT_eSPI/TFT_eSPI.h: At global scope:
.pio/libdeps/esp32dev/TFT_eSPI/TFT_eSPI.h:734:19: warning: inline function 'uint16_t TFT_eSPI::alphaBlend(uint8_t, uint16_t, uint16_t)' used but never defined
   inline uint16_t alphaBlend(uint8_t alpha, uint16_t fgc, uint16_t bgc);

Code:

#include <Arduino.h>
#include "SPI.h"
#include <TFT_eSPI.h>

#define MAX_DISPLAY_WIDTH 240
#define MAX_DISPLAY_HEIGHT 320

TFT_eSPI tft = TFT_eSPI();
TFT_eSprite spr = TFT_eSprite(&tft);

uint16_t tw, th;

void drawTftSprite(const uint16_t &tw, const uint16_t &th, const uint16_t &textX, const uint16_t &textY)
{
  // Text and background will be rendered in a sprite
  spr.createSprite(tw, th);
  // Calculate colour gradient value at top of sprite based on text position
  uint16_t topColor = tft.alphaBlend(255 * textY / MAX_DISPLAY_HEIGHT, 0xf8ac, 0xa0a5fc);
  // Calculate colour gradient value at bottom of sprite
  uint16_t bottomColor = tft.alphaBlend(255 * (textY + spr.fontHeight()) / MAX_DISPLAY_HEIGHT, 0xf8ac, 0xa0a5fc);
  // Fill sprite with the calculated gradient
  spr.fillRectVGradient(0, 0, tw, th, topColor, bottomColor);
  // Draw the value in the sprite
  spr.drawString(String(random(1, 300)), 0, 0);
  // Push sprite to desired position
  spr.pushSprite(textX, textY);
  spr.deleteSprite();
}

void setup()
{
  Serial.begin(115200);
  tft.begin();
  tft.fillRectVGradient(0, 0, MAX_DISPLAY_WIDTH, MAX_DISPLAY_HEIGHT, 0xa0a5fc, 0xf8ac);
  // Text and background will be rendered in a sprite
  spr.setTextFont(6);
  spr.setTextColor(TFT_BLUE);
  spr.setTextDatum(ML_DATUM);
  tw = spr.textWidth("888"); // Width of test to be drawn
  th = spr.fontHeight();     // Font height
}

void loop()
{
  drawTftSprite(tw, th, 20, 40);
  drawTftSprite(tw, th, 120, 40);
  drawTftSprite(tw, th, 20, 100);
  drawTftSprite(tw, th, 120, 100);
  drawTftSprite(tw, th, 20, 160);
  drawTftSprite(tw, th, 120, 160);
  drawTftSprite(tw, th, 20, 220);
  drawTftSprite(tw, th, 120, 220);
  drawTftSprite(tw, th, 20, 280);
  drawTftSprite(tw, th, 120, 280);
  delay(1000);
}

1 reply

Bodmer Feb 26, 2023
Maintainer

That is to be expected as the text is still being printed at 0,0 in the sprite. I suggest you only use top datums and adjust the text placement accoring to the new datum, examples for each datum:

spr.setTextDatum(TL_DATUM);
spr.drawString(String(random(1, 300)), 0, 0);

spr.setTextDatum(TC_DATUM);
spr.drawString(String(random(1, 300)), tw/2, 0);

spr.setTextDatum(TR_DATUM);
spr.drawString(String(random(1, 300)), tw-1, 0);

All colours are 16 bit, so to use RGB values you must convert the colour,examples:

uint16_t color1 = tft.color565(0xa0, 0xa5, 0xfc);
uint16_t color2 = tft.color565(0x00, 0xf8, 0xac);
tft.fillRectVGradient(0, 0, MAX_DISPLAY_WIDTH, MAX_DISPLAY_HEIGHT, color1, color2);

otl1 · 2023-02-28T18:54:01Z

otl1
Feb 28, 2023
Author

Thanks @Bodmer , I managed to use the Middle left datum but the background of the last two texts is still not seem to blend as expected and I am still getting the following warning (Am I supposed to define alphaBlend somewhere before using it?):

In file included from src/main.cpp:3:
.pio/libdeps/esp32dev/TFT_eSPI/TFT_eSPI.h:734:19: warning: inline function 'uint16_t TFT_eSPI::alphaBlend(uint8_t, uint16_t, uint16_t)' used but never defined
   inline uint16_t alphaBlend(uint8_t alpha, uint16_t fgc, uint16_t bgc);

Following is my modified Code:

#include <Arduino.h>
#include "SPI.h"
#include <TFT_eSPI.h>

#define MAX_DISPLAY_WIDTH 240
#define MAX_DISPLAY_HEIGHT 320

TFT_eSPI tft = TFT_eSPI();
TFT_eSprite spr = TFT_eSprite(&tft);

uint16_t tw, th;

uint16_t color1 = tft.color565(0xa0, 0xa5, 0xfc);
uint16_t color2 = tft.color565(0x00, 0xf8, 0xac);

void drawTftSprite(const uint16_t &tw, const uint16_t &th, const uint16_t &textX, const uint16_t &textY)
{
  // Text and background will be rendered in a sprite
  spr.createSprite(tw, th);
  // Calculate colour gradient value at top of sprite based on text position
  uint16_t topColor = tft.alphaBlend(255 * textY / MAX_DISPLAY_HEIGHT, color2, color1);
  // Calculate colour gradient value at bottom of sprite
  uint16_t bottomColor = tft.alphaBlend(255 * (textY + spr.fontHeight()) / MAX_DISPLAY_HEIGHT, color2, color1);
  // Fill sprite with the calculated gradient
  spr.fillRectVGradient(0, 0, tw, th, topColor, bottomColor);
  // Draw the value in the sprite
  spr.drawString(String(random(1, 300)), 0, th/2);
  // Push sprite to desired position
  spr.pushSprite(textX, textY);
  spr.deleteSprite();
}

void setup()
{
  Serial.begin(115200);
  tft.begin();
  tft.fillRectVGradient(0, 0, MAX_DISPLAY_WIDTH, MAX_DISPLAY_HEIGHT, color1, color2); //0xa0a5fc, 0xf8ac
  // Text and background will be rendered in a sprite
  spr.setTextFont(6);
  spr.setTextColor(TFT_BLUE);
  spr.setTextDatum(ML_DATUM);
  tw = spr.textWidth("888"); // Width of test to be drawn
  th = spr.fontHeight();     // Font height
}

void loop()
{
  drawTftSprite(tw, th, 20, 40);
  drawTftSprite(tw, th, 120, 40);
  drawTftSprite(tw, th, 20, 100);
  drawTftSprite(tw, th, 120, 100);
  drawTftSprite(tw, th, 20, 160);
  drawTftSprite(tw, th, 120, 160);
  drawTftSprite(tw, th, 20, 220);
  drawTftSprite(tw, th, 120, 220);
  drawTftSprite(tw, th, 20, 280);
  drawTftSprite(tw, th, 120, 280);
  delay(1000);
}

1 reply

Bodmer Feb 28, 2023
Maintainer

The problem is that part of the sprite is off the bottom of the screen, where there is no background so the gradient colours will not be calculated correctly. Reduce the sprite height and position to avoid this.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Clearing old text from the gradient or image background #2446

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Clearing old text from the gradient or image background #2446

Uh oh!

otl1 Feb 25, 2023

Replies: 3 comments · 2 replies

Uh oh!

Bodmer Feb 25, 2023 Maintainer

Uh oh!

Uh oh!

otl1 Feb 26, 2023 Author

Uh oh!

Uh oh!

Bodmer Feb 26, 2023 Maintainer

Uh oh!

otl1 Feb 28, 2023 Author

Uh oh!

Bodmer Feb 28, 2023 Maintainer

otl1
Feb 25, 2023

Replies: 3 comments 2 replies

Bodmer
Feb 25, 2023
Maintainer

otl1
Feb 26, 2023
Author

Bodmer Feb 26, 2023
Maintainer

otl1
Feb 28, 2023
Author

Bodmer Feb 28, 2023
Maintainer