TFT_eSPI/examples/480 x 320/TFT_Padding_demo/TFT_Padding_demo.ino

/*
 Example to show how text padding and setting the datum works.

 Drawing a numbers at a location can leave the remains of previous numbers.
 for example drawing 999 then 17 may display as:
    179 for left datum
    or
    917 for right datum.

 By setting the correct text padding width and setting a background colour then
 the plotted numbers will overprint old values.  The padding width must be set
 to be large enough to cover the old text.

 This sketch shows drawing numbers and text both with and without padding.
 Unpadded text and numbers plot in red.
 Padded text and numbers plot in green.

 Padding works with all plotting datums set by setTextDatum()

 The height of the padded area is set automatically by the font used.
 
  #########################################################################
  ###### DON'T FORGET TO UPDATE THE User_Setup.h FILE IN THE LIBRARY ######
  #########################################################################
 */

#include <SPI.h>

#include <TFT_eSPI.h> // Hardware-specific library

TFT_eSPI tft = TFT_eSPI();       // Invoke custom library

unsigned long drawTime = 0;

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

void loop() {
  int x = 240;
  int y = 60;
  byte decimal_places = 1;
  byte font = 8;
  
  tft.fillScreen(TFT_BLACK);

  header("Right datum padding demo");

  tft.setTextColor(TFT_RED, TFT_BLUE);

  tft.setTextDatum(TR_DATUM); // Top Right is datum, so decimal point stays in same place
                              // any datum could be used

  //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // The value on screen will be wrong as not all digits are over-printed
  
  tft.setTextPadding(0); // Setting to zero switches off padding

  // Print all numbers from 49.9 to 0.0 in font 8 to show the problem
  
  for (int i = 199; i >= 0; i--) {
    yield(); tft.drawFloat(i/10.0, decimal_places, x, y, font);
  }

  //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // Now set padding width to be 3 digits plus decimal point wide in font 8
  // Padding height is set automatically, all numeric digits are the same width
  // in fonts 1 to 8. The value on screen will now be correct as all digits are over-printed

  int padding = tft.textWidth("99.9", font); // get the width of the text in pixels
  tft.setTextColor(TFT_GREEN, TFT_BLUE);
  tft.setTextPadding(padding);

  for (int i = 199; i >= 0; i--) {
    yield(); tft.drawFloat(i/10.0, decimal_places, x, y + 140, font); // Use 1 decimal place
  }

  delay(5000);

  //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // Now use integers
  // The value on screen will be wrong as not all digits are over-printed
  
  tft.fillScreen(TFT_BLACK);

  header("Left datum padding demo");

  tft.setTextColor(TFT_RED, TFT_BLUE);

  tft.setTextDatum(TL_DATUM); // Top Left is datum
                              // any datum could be used

  tft.setTextPadding(0); // Setting to zero switches off padding

  // Print all numbers from 49.9 to 0.0 in font 8 to show the problem
  
  for (int i = 199; i >= 0; i--) {
    yield(); tft.drawNumber(i, x, y, font);
  }

  //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // Now set padding width to be 3 digits wide in font 8
  // Padding height is set automatically, all numeric digits are the same width
  // in fonts 1 to 8
  // The value on screen will now be correct as all digits are over-printed

  padding = tft.textWidth("999", font); // get the width of the text in pixels
  tft.setTextColor(TFT_GREEN, TFT_BLUE);
  tft.setTextPadding(padding);

  for (int i = 199; i >= 0; i--) {
    yield(); tft.drawNumber(i, x, y + 140, font); // Use 1 decimal place
  }

  delay(5000);

  //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // Now use integers with a centred datum
  // The value on screen will be wrong as not all digits are over-printed
  
  tft.fillScreen(TFT_BLACK);

  header("Centre datum padding demo");
  
  tft.setTextColor(TFT_RED, TFT_BLUE);

  tft.setTextDatum(TC_DATUM); // Top Centre is datum
                              // any datum could be used

  tft.setTextPadding(0); // Setting to zero switches off padding

  // Print all numbers from 49.9 to 0.0 in font 8 to show the problem
  
  for (int i = 199; i >= 0; i--) {
    yield(); tft.drawNumber(i, x, y, font);
  }

  //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // Now set padding width to be 3 digits wide in font 8
  // Padding height is set automatically, all numeric digits are the same width
  // in fonts 1 to 8
  // The value on screen will now be correct as all digits are over-printed

  padding = tft.textWidth("999", font); // get the width of the text in pixels
  tft.setTextColor(TFT_GREEN, TFT_BLUE);
  tft.setTextPadding(padding);

  for (int i = 199; i >= 0; i--) {
    yield(); tft.drawNumber(i, x, y + 140, font); // Use 1 decimal place
  }

  delay(5000);

  //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // Now use text over-printing by setting the padding value
  // Previous text is not wiped by a shorter string

  tft.fillScreen(TFT_LIGHTGREY);

  header("Centred datum text padding demo");
  
  tft.setTextSize(2); // Any text size muliplier will work
  
  tft.setTextColor(TFT_RED, TFT_BLUE);

  tft.setTextDatum(TC_DATUM); // Top Centre is datum
                              // any datum could be used

  tft.setTextPadding(0); // Setting to zero switches off padding

  tft.drawString("Quick brown", x, y, 4);
  delay(2000);
  tft.drawString("fox", x, y, 4);

  delay(2000);
  
  // Now set padding width to longest string
  // Previous text will automatically be wiped by a shorter string!
  font = 4;

  padding = tft.textWidth("Quick brown", font); // get the width of the widest text in pixels
                                                // could set this to any number up to screen width
  tft.setTextPadding(padding);

  tft.setTextColor(TFT_GREEN, TFT_BLUE);
  
  tft.drawString("Quick brown", x, y+80, font);
  delay(2000);
  tft.drawString("fox", x, y+80, font);

  delay(5000);
}

// Print the header for a display screen
void header(const char *string)
{
  tft.setTextSize(1);
  tft.setTextColor(TFT_MAGENTA, TFT_BLACK);
  tft.setTextDatum(TC_DATUM);
  tft.drawString(string, 240, 10, 4);
 
}