acid-drop

- Hacking the planet from a LilyGo T-Deck using custom firmware
git clone git://git.acid.vegas/acid-drop.git
Log | Files | Refs | Archive | README | LICENSE

TFT_Padding_demo.ino (6502B)

      1 /*
      2  Example to show how text padding and setting the datum works.
      3 
      4  Drawing a numbers at a location can leave the remains of previous numbers.
      5  for example drawing 999 then 17 may display as:
      6     179 for left datum
      7     or
      8     917 for right datum.
      9 
     10  By setting the correct text padding width and setting a background colour then
     11  the plotted numbers will overprint old values.  The padding width must be set
     12  to be large enough to cover the old text.
     13 
     14  This sketch shows drawing numbers and text both with and without padding.
     15  Unpadded text and numbers plot in red.
     16  Padded text and numbers plot in green.
     17 
     18  Padding works with all plotting datums set by setTextDatum()
     19 
     20  The height of the padded area is set automatically by the font used.
     21  
     22   #########################################################################
     23   ###### DON'T FORGET TO UPDATE THE User_Setup.h FILE IN THE LIBRARY ######
     24   #########################################################################
     25  */
     26 
     27 #include <SPI.h>
     28 
     29 #include <TFT_eSPI.h> // Hardware-specific library
     30 
     31 TFT_eSPI tft = TFT_eSPI();       // Invoke custom library
     32 
     33 unsigned long drawTime = 0;
     34 
     35 void setup(void) {
     36   tft.begin();
     37   tft.setRotation(1);
     38 }
     39 
     40 void loop() {
     41   int x = 240;
     42   int y = 60;
     43   byte decimal_places = 1;
     44   byte font = 8;
     45   
     46   tft.fillScreen(TFT_BLACK);
     47 
     48   header("Right datum padding demo");
     49 
     50   tft.setTextColor(TFT_RED, TFT_BLUE);
     51 
     52   tft.setTextDatum(TR_DATUM); // Top Right is datum, so decimal point stays in same place
     53                               // any datum could be used
     54 
     55   //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
     56   // The value on screen will be wrong as not all digits are over-printed
     57   
     58   tft.setTextPadding(0); // Setting to zero switches off padding
     59 
     60   // Print all numbers from 49.9 to 0.0 in font 8 to show the problem
     61   
     62   for (int i = 199; i >= 0; i--) {
     63     yield(); tft.drawFloat(i/10.0, decimal_places, x, y, font);
     64   }
     65 
     66   //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
     67   // Now set padding width to be 3 digits plus decimal point wide in font 8
     68   // Padding height is set automatically, all numeric digits are the same width
     69   // in fonts 1 to 8. The value on screen will now be correct as all digits are over-printed
     70 
     71   int padding = tft.textWidth("99.9", font); // get the width of the text in pixels
     72   tft.setTextColor(TFT_GREEN, TFT_BLUE);
     73   tft.setTextPadding(padding);
     74 
     75   for (int i = 199; i >= 0; i--) {
     76     yield(); tft.drawFloat(i/10.0, decimal_places, x, y + 140, font); // Use 1 decimal place
     77   }
     78 
     79   delay(5000);
     80 
     81   //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
     82   // Now use integers
     83   // The value on screen will be wrong as not all digits are over-printed
     84   
     85   tft.fillScreen(TFT_BLACK);
     86 
     87   header("Left datum padding demo");
     88 
     89   tft.setTextColor(TFT_RED, TFT_BLUE);
     90 
     91   tft.setTextDatum(TL_DATUM); // Top Left is datum
     92                               // any datum could be used
     93 
     94   tft.setTextPadding(0); // Setting to zero switches off padding
     95 
     96   // Print all numbers from 49.9 to 0.0 in font 8 to show the problem
     97   
     98   for (int i = 199; i >= 0; i--) {
     99     yield(); tft.drawNumber(i, x, y, font);
    100   }
    101 
    102   //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    103   // Now set padding width to be 3 digits wide in font 8
    104   // Padding height is set automatically, all numeric digits are the same width
    105   // in fonts 1 to 8
    106   // The value on screen will now be correct as all digits are over-printed
    107 
    108   padding = tft.textWidth("999", font); // get the width of the text in pixels
    109   tft.setTextColor(TFT_GREEN, TFT_BLUE);
    110   tft.setTextPadding(padding);
    111 
    112   for (int i = 199; i >= 0; i--) {
    113     yield(); tft.drawNumber(i, x, y + 140, font); // Use 1 decimal place
    114   }
    115 
    116   delay(5000);
    117 
    118   //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    119   // Now use integers with a centred datum
    120   // The value on screen will be wrong as not all digits are over-printed
    121   
    122   tft.fillScreen(TFT_BLACK);
    123 
    124   header("Centre datum padding demo");
    125   
    126   tft.setTextColor(TFT_RED, TFT_BLUE);
    127 
    128   tft.setTextDatum(TC_DATUM); // Top Centre is datum
    129                               // any datum could be used
    130 
    131   tft.setTextPadding(0); // Setting to zero switches off padding
    132 
    133   // Print all numbers from 49.9 to 0.0 in font 8 to show the problem
    134   
    135   for (int i = 199; i >= 0; i--) {
    136     yield(); tft.drawNumber(i, x, y, font);
    137   }
    138 
    139   //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    140   // Now set padding width to be 3 digits wide in font 8
    141   // Padding height is set automatically, all numeric digits are the same width
    142   // in fonts 1 to 8
    143   // The value on screen will now be correct as all digits are over-printed
    144 
    145   padding = tft.textWidth("999", font); // get the width of the text in pixels
    146   tft.setTextColor(TFT_GREEN, TFT_BLUE);
    147   tft.setTextPadding(padding);
    148 
    149   for (int i = 199; i >= 0; i--) {
    150     yield(); tft.drawNumber(i, x, y + 140, font); // Use 1 decimal place
    151   }
    152 
    153   delay(5000);
    154 
    155   //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    156   // Now use text over-printing by setting the padding value
    157   // Previous text is not wiped by a shorter string
    158 
    159   tft.fillScreen(TFT_LIGHTGREY);
    160 
    161   header("Centred datum text padding demo");
    162   
    163   tft.setTextSize(2); // Any text size muliplier will work
    164   
    165   tft.setTextColor(TFT_RED, TFT_BLUE);
    166 
    167   tft.setTextDatum(TC_DATUM); // Top Centre is datum
    168                               // any datum could be used
    169 
    170   tft.setTextPadding(0); // Setting to zero switches off padding
    171 
    172   tft.drawString("Quick brown", x, y, 4);
    173   delay(2000);
    174   tft.drawString("fox", x, y, 4);
    175 
    176   delay(2000);
    177   
    178   // Now set padding width to longest string
    179   // Previous text will automatically be wiped by a shorter string!
    180   font = 4;
    181 
    182   padding = tft.textWidth("Quick brown", font); // get the width of the widest text in pixels
    183                                                 // could set this to any number up to screen width
    184   tft.setTextPadding(padding);
    185 
    186   tft.setTextColor(TFT_GREEN, TFT_BLUE);
    187   
    188   tft.drawString("Quick brown", x, y+80, font);
    189   delay(2000);
    190   tft.drawString("fox", x, y+80, font);
    191 
    192   delay(5000);
    193 }
    194 
    195 // Print the header for a display screen
    196 void header(const char *string)
    197 {
    198   tft.setTextSize(1);
    199   tft.setTextColor(TFT_MAGENTA, TFT_BLACK);
    200   tft.setTextDatum(TC_DATUM);
    201   tft.drawString(string, 240, 10, 4);
    202  
    203 }
    204 
    205 
    206 
    207 
    208