Add ESP8266 LittleFS examples

The ESP8266 has the LittleFS Flash filing system which is significantly faster than SPIFFS. New Smooth Font examples have been added that use LittleFS.

User_Setup_Select.h

@@ -72,7 +72,7 @@
 //#include <User_Setups/Setup44_TTGO_CameraPlus.h>   // Setup file for ESP32 and TTGO T-CameraPlus ST7789 SPI bus TFT    240x240
 //#include <User_Setups/Setup45_TTGO_T_Watch.h>      // Setup file for ESP32 and TTGO T-Watch ST7789 SPI bus TFT  240x240
 
-//#include <User_Setups/Setup47_ST7735.h>              // Setup file configured for ST7735 128 x 160
+//#include <User_Setups/Setup47_ST7735.h>            // Setup file configured for ST7735 128 x 128 animated eyes
 
 //#include <User_Setups/Setup50_SSD1963_Parallel.h>  // Setup file for ESP32 and SSD1963 TFT display
 

examples/Smooth Fonts/LittleFS/Font_Demo_1/Font_Demo_1.ino

+/*
+  There are four different methods of plotting anti-aliased fonts to the screen.
+
+  This sketch uses method 1, using tft.print() and tft.println() calls.
+
+  In some cases the sketch shows what can go wrong too, so read the comments!
+  
+  The font is rendered WITHOUT a background, but a background colour needs to be
+  set so the anti-aliasing of the character is performed correctly. This is because
+  characters are drawn one by one.
+  
+  This method is good for static text that does not change often because changing
+  values may flicker. The text appears at the tft cursor coordinates.
+
+  It is also possible to "print" text directly into a created sprite, for example using
+  spr.println("Hello"); and then push the sprite to the screen. That method is not
+  demonstrated in this sketch.
+  
+*/
+//  The fonts used are in the sketch data folder, press Ctrl+K to view.
+
+//  Upload the fonts and icons to LittleFS (must set at least 1M for LittleFS) using the
+//  "Tools"  "ESP8266 LittleFS Data Upload" menu option in the IDE.
+//  To add this option follow instructions here for the ESP8266:
+//  https://github.com/earlephilhower/arduino-esp8266littlefs-plugin
+
+//  Close the IDE and open again to see the new menu option.
+
+//  A processing sketch to create new fonts can be found in the Tools folder of TFT_eSPI
+//  https://github.com/Bodmer/TFT_eSPI/tree/master/Tools/Create_Smooth_Font/Create_font
+
+//  This sketch uses font files created from the Noto family of fonts:
+//  https://www.google.com/get/noto/
+
+#define AA_FONT_SMALL "NotoSansBold15"
+#define AA_FONT_LARGE "NotoSansBold36"
+
+// Font files are stored in Flash FS
+#include <FS.h>
+#include <LittleFS.h>
+#define FlashFS LittleFS
+
+#include <SPI.h>
+#include <TFT_eSPI.h>       // Hardware-specific library
+
+TFT_eSPI tft = TFT_eSPI();
+
+
+void setup(void) {
+
+  Serial.begin(250000);
+
+  tft.begin();
+
+  tft.setRotation(0);
+
+  if (!LittleFS.begin()) {
+    Serial.println("Flash FS initialisation failed!");
+    while (1) yield(); // Stay here twiddling thumbs waiting
+  }
+  Serial.println("\n\Flash FS available!");
+  
+  bool font_missing = false;
+  if (LittleFS.exists("/NotoSansBold15.vlw")    == false) font_missing = true;
+  if (LittleFS.exists("/NotoSansBold36.vlw")    == false) font_missing = true;
+
+  if (font_missing)
+  {
+    Serial.println("\nFont missing in Flash FS, did you upload it?");
+    while(1) yield();
+  }
+  else Serial.println("\nFonts found OK.");
+}
+
+
+void loop() {
+
+  tft.fillScreen(TFT_BLACK);
+
+  tft.setTextColor(TFT_WHITE, TFT_BLACK); // Set the font colour AND the background colour
+                                          // so the anti-aliasing works
+
+  tft.setCursor(0, 0); // Set cursor at top left of screen
+
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Small font
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+  tft.loadFont(AA_FONT_SMALL, LittleFS); // Must load the font first
+
+  tft.println("Small 15pt font"); // println moves cursor down for a new line
+
+  tft.println(); // New line
+
+  tft.print("ABC"); // print leaves cursor at end of line
+
+  tft.setTextColor(TFT_CYAN, TFT_BLACK);
+  tft.println("1234"); // Added to line after ABC
+
+  tft.setTextColor(TFT_YELLOW, TFT_BLACK);
+  // print stream formatting can be used,see:
+  // https://www.arduino.cc/en/Serial/Print
+  int ivalue = 1234;
+  tft.println(ivalue);       // print as an ASCII-encoded decimal
+  tft.println(ivalue, DEC);  // print as an ASCII-encoded decimal
+  tft.println(ivalue, HEX);  // print as an ASCII-encoded hexadecimal
+  tft.println(ivalue, OCT);  // print as an ASCII-encoded octal
+  tft.println(ivalue, BIN);  // print as an ASCII-encoded binary
+
+  tft.println(); // New line
+  tft.setTextColor(TFT_MAGENTA, TFT_BLACK);
+  float fvalue = 1.23456;
+  tft.println(fvalue, 0);  // no decimal places
+  tft.println(fvalue, 1);  // 1 decimal place
+  tft.println(fvalue, 2);  // 2 decimal places
+  tft.println(fvalue, 5);  // 5 decimal places
+
+  delay(5000);
+
+  // Get ready for the next demo while we have this font loaded
+  tft.fillScreen(TFT_BLACK);
+  tft.setCursor(0, 0); // Set cursor at top left of screen
+  tft.setTextColor(TFT_WHITE, TFT_BLACK);
+  tft.println("Wrong and right ways to");
+  tft.println("print changing values...");
+
+  tft.unloadFont(); // Remove the font to recover memory used
+
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Large font
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+  tft.loadFont(AA_FONT_LARGE, LittleFS); // Load another different font
+
+  //tft.fillScreen(TFT_BLACK);
+  
+  // Draw changing numbers - does not work unless a filled rectangle is drawn over the old text
+  for (int i = 0; i <= 20; i++)
+  {
+    tft.setCursor(50, 50);
+    tft.print("      "); // Overprinting old number with spaces DOES NOT WORK!
+    tft.setTextColor(TFT_GREEN, TFT_BLACK);
+    tft.setCursor(50, 50);
+    tft.print(i / 10.0, 1);
+
+    tft.fillRect (50, 90, 60, 40, TFT_BLACK); // Overprint with a filled rectangle
+    tft.setTextColor(TFT_GREEN, TFT_BLACK);
+    tft.setCursor(50, 90);
+    tft.print(i / 10.0, 1);
+    
+    delay (200);
+  }
+
+  delay(5000);
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Large font text wrapping
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+  tft.fillScreen(TFT_BLACK);
+  
+  tft.setTextColor(TFT_YELLOW, TFT_BLACK); // Change the font colour and the background colour
+
+  tft.setCursor(0, 0); // Set cursor at top left of screen
+
+  tft.println("Large font!");
+
+  tft.setTextWrap(true); // Wrap on width
+  tft.setTextColor(TFT_CYAN, TFT_BLACK);
+  tft.println("Long lines wrap to the next line");
+
+  tft.setTextWrap(false, false); // Wrap on width and height switched off
+  tft.setTextColor(TFT_MAGENTA, TFT_BLACK);
+  tft.println("Unless text wrap is switched off");
+
+  tft.unloadFont(); // Remove the font to recover memory used
+
+  delay(8000);
+}

examples/Smooth Fonts/LittleFS/Font_Demo_1/Notes.ino

+/*
+
+Information notes only:
+======================
+
+//These are the text plotting alignment (reference datum point)
+
+TL_DATUM = Top left (default)
+TC_DATUM = Top centre
+TR_DATUM = Top right
+
+ML_DATUM = Middle left
+MC_DATUM = Middle centre
+MR_DATUM = Middle right
+
+BL_DATUM = Bottom left
+BC_DATUM = Bottom centre
+BR_DATUM = Bottom right
+
+L_BASELINE = Left character baseline (Line the 'A' character would sit on)
+C_BASELINE = Centre character baseline
+R_BASELINE = Right character baseline
+
+// Basic colours already defined:
+
+TFT_BLACK       0x0000
+TFT_NAVY        0x000F
+TFT_DARKGREEN   0x03E0
+TFT_DARKCYAN    0x03EF
+TFT_MAROON      0x7800
+TFT_PURPLE      0x780F
+TFT_OLIVE       0x7BE0
+TFT_LIGHTGREY   0xC618
+TFT_DARKGREY    0x7BEF
+TFT_BLUE        0x001F
+TFT_GREEN       0x07E0
+TFT_CYAN        0x07FF
+TFT_RED         0xF800
+TFT_MAGENTA     0xF81F
+TFT_YELLOW      0xFFE0
+TFT_WHITE       0xFFFF
+TFT_ORANGE      0xFDA0
+TFT_GREENYELLOW 0xB7E0
+TFT_PINK        0xFC9F
+
+
+
+
+
+
+
+
+
+
+ 
+ */

examples/Smooth Fonts/LittleFS/Font_Demo_2/Font_Demo_2.ino

+/*
+  There are four different methods of plotting anti-aliased fonts to the screen.
+
+  This sketch uses method 2, using graphics calls plotting direct to the TFT:
+    tft.drawString(string, x, y);
+    tft.drawNumber(integer, x, y);
+    tft.drawFloat(float, dp, x, y); // dp = number of decimal places
+
+  setTextDatum() and setTextPadding() functions work with those draw functions.
+
+  This method is good for static text that does not change often because changing
+  values may flicker.
+  
+*/
+//  The fonts used are in the sketch data folder, press Ctrl+K to view.
+
+//  Upload the fonts and icons to LittleFS (must set at least 1M for LittleFS) using the
+//  "Tools"  "ESP8266 LittleFS Data Upload" menu option in the IDE.
+//  To add this option follow instructions here for the ESP8266:
+//  https://github.com/earlephilhower/arduino-esp8266littlefs-plugin
+
+//  Close the IDE and open again to see the new menu option.
+
+// A processing sketch to create new fonts can be found in the Tools folder of TFT_eSPI
+// https://github.com/Bodmer/TFT_eSPI/tree/master/Tools/Create_Smooth_Font/Create_font
+
+// This sketch uses font files created from the Noto family of fonts:
+// https://www.google.com/get/noto/
+
+#define AA_FONT_SMALL "NotoSansBold15"
+#define AA_FONT_LARGE "NotoSansBold36"
+
+// Font files are stored in Flash FS
+#include <FS.h>
+#include <LittleFS.h>
+#define FlashFS LittleFS
+
+#include <SPI.h>
+#include <TFT_eSPI.h>       // Hardware-specific library
+
+TFT_eSPI tft = TFT_eSPI();
+
+void setup(void) {
+
+  Serial.begin(250000);
+
+  tft.begin();
+
+  tft.setRotation(1);
+
+  if (!LittleFS.begin()) {
+    Serial.println("Flash FS initialisation failed!");
+    while (1) yield(); // Stay here twiddling thumbs waiting
+  }
+  Serial.println("\n\Flash FS available!");
+
+  bool font_missing = false;
+  if (LittleFS.exists("/NotoSansBold15.vlw")    == false) font_missing = true;
+  if (LittleFS.exists("/NotoSansBold36.vlw")    == false) font_missing = true;
+
+  if (font_missing)
+  {
+    Serial.println("\nFont missing in Flash FS, did you upload it?");
+    while(1) yield();
+  }
+  else Serial.println("\nFonts found OK.");
+}
+
+void loop() {
+
+  tft.fillScreen(TFT_BLACK);
+
+  tft.setTextColor(TFT_WHITE, TFT_BLACK); // Set the font colour and the background colour
+
+  tft.setTextDatum(TC_DATUM); // Top Centre datum
+
+  int xpos = tft.width() / 2; // Half the screen width
+  int ypos = 10;
+
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Small font
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+  tft.loadFont(AA_FONT_SMALL, LittleFS); // Must load the font first
+
+  tft.drawString("Small 15pt font", xpos, ypos);
+
+  ypos += tft.fontHeight();   // Get the font height and move ypos down
+
+  tft.setTextColor(TFT_GREEN, TFT_BLACK);
+
+  // If the string does not fit the screen width, then the next character will wrap to a new line
+  tft.drawString("Ode To A Small Lump Of Green Putty I Found In My Armpit One Midsummer Morning", xpos, ypos);
+
+  tft.setTextColor(TFT_GREEN, TFT_BLUE); // Background colour does not match the screen background!
+  tft.drawString("Anti-aliasing causes odd looking shadow effects if the text and screen background colours are not the same!", xpos, ypos + 60);
+
+  tft.unloadFont(); // Remove the font to recover memory used
+
+  delay(5000);
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Large font
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+  tft.loadFont(AA_FONT_LARGE, LittleFS); // Load another different font
+
+  tft.fillScreen(TFT_BLACK);
+
+  tft.setTextColor(TFT_GREEN, TFT_BLUE); // Change the font colour and the background colour
+
+  tft.drawString("36pt font", xpos, ypos);
+
+  ypos += tft.fontHeight();  // Get the font height and move ypos down
+
+  // Set text padding to 100 pixels wide area to over-write old values on screen
+  tft.setTextPadding(100);
+
+  // Draw changing numbers - likely to flicker using this plot method!
+  for (int i = 0; i <= 20; i++) {
+    tft.drawFloat(i / 10.0, 1, xpos, ypos);
+    delay (200);
+  }
+
+  tft.unloadFont(); // Remove the font to recover memory used
+
+  delay(5000);
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Setting the 12 datum positions works with free fonts
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+  // Integer numbers, floats and strings can be drawn relative to a x,y datum, e.g.:
+  // tft.drawNumber( 123, x, y);
+  // tft.drawFloat( 1.23, dp, x, y); // Where dp is number of decimal places to show
+  // tft.drawString( "Abc", x, y);
+
+  tft.fillScreen(TFT_BLACK);
+
+  tft.setTextColor(TFT_DARKGREY, TFT_BLACK);
+
+  // Use middle of screen as datum
+  xpos = tft.width() /2;
+  ypos = tft.height()/2;
+
+  tft.loadFont(AA_FONT_SMALL, LittleFS);
+  tft.setTextDatum(TL_DATUM);
+  tft.drawString("[Top left]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(TC_DATUM);
+  tft.drawString("[Top centre]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(TR_DATUM);
+  tft.drawString("[Top right]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(ML_DATUM);
+  tft.drawString("[Middle left]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(MC_DATUM);
+  tft.drawString("[Middle centre]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(MR_DATUM);
+  tft.drawString("[Middle right]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(BL_DATUM);
+  tft.drawString("[Bottom left]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(BC_DATUM);
+  tft.drawString("[Bottom centre]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(BR_DATUM);
+  tft.drawString("[Bottom right]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(L_BASELINE);
+  tft.drawString("[Left baseline]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(C_BASELINE);
+  tft.drawString("[Centre baseline]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setTextDatum(R_BASELINE);
+  tft.drawString("[Right baseline]", xpos, ypos);
+  drawDatumMarker(xpos, ypos);
+  delay(1000);
+
+  tft.unloadFont(); // Remove the font to recover memory used
+
+  delay(4000);
+
+}
+
+// Draw a + mark centred on x,y
+void drawDatumMarker(int x, int y)
+{
+  tft.drawLine(x - 5, y, x + 5, y, TFT_GREEN);
+  tft.drawLine(x, y - 5, x, y + 5, TFT_GREEN);
+}

examples/Smooth Fonts/LittleFS/Font_Demo_2/Notes.ino

+/*
+
+Information notes only:
+======================
+
+//These are the text plotting alignment (reference datum point)
+
+TL_DATUM = Top left (default)
+TC_DATUM = Top centre
+TR_DATUM = Top right
+
+ML_DATUM = Middle left
+MC_DATUM = Middle centre
+MR_DATUM = Middle right
+
+BL_DATUM = Bottom left
+BC_DATUM = Bottom centre
+BR_DATUM = Bottom right
+
+L_BASELINE = Left character baseline (Line the 'A' character would sit on)
+C_BASELINE = Centre character baseline
+R_BASELINE = Right character baseline
+
+// Basic colours already defined:
+
+TFT_BLACK       0x0000
+TFT_NAVY        0x000F
+TFT_DARKGREEN   0x03E0
+TFT_DARKCYAN    0x03EF
+TFT_MAROON      0x7800
+TFT_PURPLE      0x780F
+TFT_OLIVE       0x7BE0
+TFT_LIGHTGREY   0xC618
+TFT_DARKGREY    0x7BEF
+TFT_BLUE        0x001F
+TFT_GREEN       0x07E0
+TFT_CYAN        0x07FF
+TFT_RED         0xF800
+TFT_MAGENTA     0xF81F
+TFT_YELLOW      0xFFE0
+TFT_WHITE       0xFFFF
+TFT_ORANGE      0xFDA0
+TFT_GREENYELLOW 0xB7E0
+TFT_PINK        0xFC9F
+
+
+
+
+
+
+
+
+
+
+ 
+ */

examples/Smooth Fonts/LittleFS/Font_Demo_3/Font_Demo_3.ino

+/*
+  There are four different methods of plotting anti-aliased fonts to the screen.
+
+  This sketch uses method 3, the font characters are first plotted in a Sprite, then the
+  Sprite is pushed to the screen. This method is very flexible and the Sprite can be
+  created, deleted, resized as needed. To render anit-aliased fonts well the Sprite
+  needs to be 16 bit.  The fonts will render in 1 bit per pixel sprites but there
+  will then be no anti-aliasing. Using 1 bit per pixel Sprites is however useful
+  to use the extended Unicode range in fonts on mono displays like ePaper.
+
+  A single Sprite can be re-used for plotting different values and graphics to
+  different positions on the screen. This makes this method a very powerful display tool,
+  for example round buttons can be created, making use of transparent colour plotting.
+  
+*/
+//  The fonts used are in the sketch data folder, press Ctrl+K to view.
+
+//  Upload the fonts and icons to LittleFS (must set at least 1M for LittleFS) using the
+//  "Tools"  "ESP8266 LittleFS Data Upload" menu option in the IDE.
+//  To add this option follow instructions here for the ESP8266:
+//  https://github.com/earlephilhower/arduino-esp8266littlefs-plugin
+
+//  Close the IDE and open again to see the new menu option.
+
+// A processing sketch to create new fonts can be found in the Tools folder of TFT_eSPI
+// https://github.com/Bodmer/TFT_eSPI/tree/master/Tools/Create_Smooth_Font/Create_font
+
+// This sketch uses font files created from the Noto family of fonts:
+// https://www.google.com/get/noto/
+
+#define AA_FONT_SMALL "NotoSansBold15"
+#define AA_FONT_LARGE "NotoSansBold36"
+#define AA_FONT_MONO  "NotoSansMonoSCB20" // NotoSansMono-SemiCondensedBold 20pt
+
+// Font files are stored in Flash FS
+#include <FS.h>
+#include <LittleFS.h>
+#define FlashFS LittleFS
+
+#include <SPI.h>
+#include <TFT_eSPI.h>       // Hardware-specific library
+
+TFT_eSPI    tft = TFT_eSPI();
+TFT_eSprite spr = TFT_eSprite(&tft); // Sprite class needs to be invoked
+
+void setup(void) {
+
+  Serial.begin(250000);
+
+  tft.begin();
+
+  tft.setRotation(1);
+
+  spr.setColorDepth(16); // 16 bit colour needed to show antialiased fonts
+
+  if (!LittleFS.begin()) {
+    Serial.println("Flash FS initialisation failed!");
+    while (1) yield(); // Stay here twiddling thumbs waiting
+  }
+  Serial.println("\n\Flash FS available!");
+
+  bool font_missing = false;
+  if (LittleFS.exists("/NotoSansBold15.vlw")    == false) font_missing = true;
+  if (LittleFS.exists("/NotoSansBold36.vlw")    == false) font_missing = true;
+  if (LittleFS.exists("/NotoSansMonoSCB20.vlw") == false) font_missing = true;
+
+  if (font_missing)
+  {
+    Serial.println("\nFont missing in Flash FS, did you upload it?");
+    while(1) yield();
+  }
+  else Serial.println("\nFonts found OK.");
+}
+
+void loop() {
+
+  tft.fillScreen(TFT_DARKGREY);
+
+  int xpos = tft.width() / 2; // Half the screen width
+  int ypos = 50;
+
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Small font
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+  spr.loadFont(AA_FONT_SMALL, LittleFS); // Must load the font first into the sprite class
+
+  spr.createSprite(100, 50);   // Create a sprite 100 pixels wide and 50 high
+
+  spr.fillSprite(TFT_BLUE);
+
+  spr.drawRect(0, 0, 100, 50, TFT_WHITE); // Draw sprite border outline (so we see extent)
+
+  spr.setTextColor(TFT_YELLOW, TFT_DARKGREY); // Set the sprite font colour and the background colour
+
+  spr.setTextDatum(MC_DATUM); // Middle Centre datum
+  
+  spr.drawString("15pt font", 50, 25 ); // Coords of middle of 100 x 50 Sprite
+
+  spr.pushSprite(10, 10); // Push to TFT screen coord 10, 10
+
+  spr.pushSprite(10, 70, TFT_BLUE); // Push to TFT screen, TFT_BLUE is transparent
+ 
+  spr.unloadFont(); // Remove the font from sprite class to recover memory used
+
+  delay(4000);
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Large font
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+  tft.fillScreen(TFT_BLACK);
+
+  // Beware: Sprites are a differerent "class" to TFT, so different fonts can be loaded
+  // in the tft and sprite instances, so load the font in the class instance you use!
+  // In this example this means the spr. instance.
+
+  spr.loadFont(AA_FONT_LARGE, LittleFS); // Load another different font into the sprite instance
+
+  // 100 x 50 sprite was created above and still exists...
+
+  spr.fillSprite(TFT_GREEN);
+
+  spr.setTextColor(TFT_BLACK, TFT_GREEN); // Set the font colour and the background colour
+
+  spr.setTextDatum(MC_DATUM); // Middle Centre datum
+
+  spr.drawString("Fits", 50, 25); // Make sure text fits in the Sprite!
+  spr.pushSprite(10, 10);         // Push to TFT screen coord 10, 10
+
+  spr.fillSprite(TFT_RED);
+  spr.setTextColor(TFT_WHITE, TFT_RED); // Set the font colour and the background colour
+
+  spr.drawString("Too big", 50, 25); // Text is too big to all fit in the Sprite!
+  spr.pushSprite(10, 70);            // Push to TFT screen coord 10, 70
+
+  // Draw changing numbers - no flicker using this plot method!
+
+  // >>>> Note: it is best to use drawNumber() and drawFloat() for numeric values <<<<
+  // >>>> this reduces digit position movement when the value changes             <<<<
+  // >>>> drawNumber() and drawFloat() functions behave like drawString() and are <<<<
+  // >>>> supported by setTextDatum() and setTextPadding()                        <<<<
+
+  spr.setTextDatum(TC_DATUM); // Top Centre datum
+
+  spr.setTextColor(TFT_WHITE, TFT_BLUE); // Set the font colour and the background colour
+
+  for (int i = 0; i <= 200; i++) {
+    spr.fillSprite(TFT_BLUE);
+    spr.drawFloat(i / 100.0, 2, 50, 10); // draw with 2 decimal places at 50,10 in sprite
+    spr.pushSprite(10, 130); // Push to TFT screen coord 10, 130
+    delay (20);
+  }
+
+  spr.unloadFont(); // Remove the font to recover memory used
+
+  spr.deleteSprite(); // Recover memory
+  
+  delay(1000);
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Mono spaced font
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  
+  spr.loadFont(AA_FONT_MONO, LittleFS); // Mono spaced fonts have fixed intercharacter gaps to
+                              // aid formatting
+  int bnum = 1;
+
+  // Example of drawing buttons
+  for (int j = 0; j < 4; j++)
+  {
+    for (int k = 0; k < 4; k++)
+    {
+      int x = 120 + k * 45;
+      int y = 40  + j * 30;
+      button(x, y, bnum++);
+    }
+  }
+
+  for (int i = 0; i < 100; i++)
+  {
+    button(120, 160, i);
+    delay(50);
+  }
+  
+  spr.unloadFont();
+
+  delay(8000);
+}
+
+// #########################################################################
+// Draw a number in a rounded rectangle with some transparent pixels
+// Load the font before calling
+// #########################################################################
+void button(int x, int y, int num )
+{
+
+  // Size of sprite
+  #define IWIDTH  40
+  #define IHEIGHT 25
+
+  // Create a 16 bit sprite 40 pixels wide, 25 high (2000 bytes of RAM needed)
+  spr.setColorDepth(16);
+  spr.createSprite(IWIDTH, IHEIGHT);
+
+  // Fill it with black (this will be the transparent colour this time)
+  spr.fillSprite(TFT_BLACK);
+
+  // Draw a background for the numbers
+  spr.fillRoundRect(  0, 0,  IWIDTH, IHEIGHT, 8, TFT_RED);
+  spr.drawRoundRect(  0, 0,  IWIDTH, IHEIGHT, 8, TFT_WHITE);
+
+  // Set the font parameters
+
+  // Set text coordinate datum to middle centre
+  spr.setTextDatum(MC_DATUM);
+
+  // Set the font colour and the background colour
+  spr.setTextColor(TFT_WHITE, TFT_RED);
+
+  // Draw the number
+  spr.drawNumber(num, IWIDTH/2, 1 + IHEIGHT/2);
+
+  // Push sprite to TFT screen CGRAM at coordinate x,y (top left corner)
+  // All black pixels will not be drawn hence will show as "transparent"
+  spr.pushSprite(x, y, TFT_BLACK);
+
+  // Delete sprite to free up the RAM
+  spr.deleteSprite();
+}

examples/Smooth Fonts/LittleFS/Font_Demo_3/Notes.ino

+/*
+
+Information notes only:
+======================
+
+Note: it is best to use drawNumber() and drawFloat() for numeric values
+      this reduces digit position movement when the value changes
+      drawNumber() and drawFloat() functions behave like drawString() and are
+      supported by setTextDatum() and setTextPadding()
+
+//These are the text plotting alignment (reference datum point)
+
+TL_DATUM = Top left (default)
+TC_DATUM = Top centre
+TR_DATUM = Top right
+
+ML_DATUM = Middle left
+MC_DATUM = Middle centre
+MR_DATUM = Middle right
+
+BL_DATUM = Bottom left
+BC_DATUM = Bottom centre
+BR_DATUM = Bottom right
+
+L_BASELINE = Left character baseline (Line the 'A' character would sit on)
+C_BASELINE = Centre character baseline
+R_BASELINE = Right character baseline
+
+// Basic colours already defined:
+
+TFT_BLACK       0x0000
+TFT_NAVY        0x000F
+TFT_DARKGREEN   0x03E0
+TFT_DARKCYAN    0x03EF
+TFT_MAROON      0x7800
+TFT_PURPLE      0x780F
+TFT_OLIVE       0x7BE0
+TFT_LIGHTGREY   0xC618
+TFT_DARKGREY    0x7BEF
+TFT_BLUE        0x001F
+TFT_GREEN       0x07E0
+TFT_CYAN        0x07FF
+TFT_RED         0xF800
+TFT_MAGENTA     0xF81F
+TFT_YELLOW      0xFFE0
+TFT_WHITE       0xFFFF
+TFT_ORANGE      0xFDA0
+TFT_GREENYELLOW 0xB7E0
+TFT_PINK        0xFC9F
+
+
+
+
+
+
+
+
+
+
+ 
+ */

examples/Smooth Fonts/LittleFS/Font_Demo_4/Font_Demo_4.ino

+/*
+  There are four different methods of plotting anti-aliased fonts to the screen.
+
+  This sketch uses method 4, printing "String" or character array types only to screen,
+  via a Sprite. The Sprite must NOT have been created already. The printToSprite()
+  function automatically creates a sprite of a minimal size to contain the String,
+  then plots to screen at the "tft" cursor position. Printing via a sprite draws the
+  text faster on the screen. This method minimises flicker but uses RAM for the Sprite,
+  the Sprite is automatically deleted after plotting to the TFT.
+
+  Number and float types must be converted to strings to use printToSprite() e.g.:
+  spr.printToSprite( (String) number );
+  spr.printToSprite( (String) (number * 55 / 1.23) );  // Put calculations within brackets
+
+  The key advantage of this method is that you do not need to calculate the size of sprite
+  needed to contain the text, the library does that for you. The library also fills the
+  the sprite with text background colour for you.
+
+  printToSprite() has a second purpose, if the sprite has been created already the String
+  will be printed into the Sprite at the "sprite" cursor position, which is
+  different to the "tft" cursor position. In this case the Sprite is not deleted and
+  you must use pushSprite() to plot on the screen. This method is not used in this sketch.
+  because in general it is better to use drawString() in an already created sprite.
+  printToSprite() will NOT move the tft cursor.
+
+*/
+//  The fonts used are in the sketch data folder, press Ctrl+K to view.
+
+//  Upload the fonts and icons to LittleFS (must set at least 1M for LittleFS) using the
+//  "Tools"  "ESP8266 LittleFS Data Upload" menu option in the IDE.
+//  To add this option follow instructions here for the ESP8266:
+//  https://github.com/earlephilhower/arduino-esp8266littlefs-plugin
+
+//  Close the IDE and open again to see the new menu option.
+
+// A processing sketch to create new fonts can be found in the Tools folder of TFT_eSPI
+// https://github.com/Bodmer/TFT_eSPI/tree/master/Tools/Create_Smooth_Font/Create_font
+
+// This sketch uses font files created from the Noto family of fonts:
+// https://www.google.com/get/noto/
+
+#define AA_FONT_SMALL "NotoSansBold15"
+#define AA_FONT_LARGE "NotoSansBold36"
+
+// Font files are stored in Flash FS
+#include <FS.h>
+#include <LittleFS.h>
+#define FlashFS LittleFS
+
+#include <SPI.h>
+#include <TFT_eSPI.h>       // Hardware-specific library
+
+TFT_eSPI    tft = TFT_eSPI();
+TFT_eSprite spr = TFT_eSprite(&tft); // Sprite class needs to be invoked
+
+void setup(void) {
+
+  Serial.begin(250000);
+
+  tft.begin();
+
+  tft.setRotation(1);
+
+  spr.setColorDepth(16); // 16 bit colour needed to show antialiased fonts
+
+  if (!LittleFS.begin()) {
+    Serial.println("Flash FS initialisation failed!");
+    while (1) yield(); // Stay here twiddling thumbs waiting
+  }
+  Serial.println("\n\Flash FS available!");
+
+  // ESP32 will crash if any of the fonts are missing
+  bool font_missing = false;
+  if (LittleFS.exists("/NotoSansBold15.vlw")    == false) font_missing = true;
+  if (LittleFS.exists("/NotoSansBold36.vlw")    == false) font_missing = true;
+
+  if (font_missing)
+  {
+    Serial.println("\nFont missing in Flash FS, did you upload it?");
+    while(1) yield();
+  }
+  else Serial.println("\nFonts found OK.");
+}
+
+void loop() {
+
+  tft.fillScreen(TFT_BLACK);
+
+  tft.setTextColor(TFT_WHITE, TFT_BLACK); // Set the font colour and the background colour
+
+  tft.setTextDatum(TC_DATUM); // Top Centre datum
+
+  int xpos = tft.width() / 2; // Half the screen width
+  int ypos = 50;
+
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Small font
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+  spr.loadFont(AA_FONT_SMALL, LittleFS); // Must load the font first into the sprite class
+  
+  spr.setTextColor(TFT_YELLOW, TFT_BLACK); // Set the sprite font colour and the background colour
+
+  tft.setCursor(xpos - 50, ypos);          // Set the tft cursor position, yes tft position!
+  spr.printToSprite("Small 15pt font");    // Prints to tft cursor position, tft cursor NOT moved
+
+  ypos += spr.fontHeight();   // Get the font height and move ypos down
+
+  spr.unloadFont(); // Remove the font from sprite class to recover memory used
+
+  delay(4000);
+
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  // Large font
+  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+  tft.fillScreen(TFT_BLACK);
+
+  spr.loadFont(AA_FONT_LARGE, LittleFS); // Load another different font
+
+  spr.setTextColor(TFT_WHITE, TFT_BLUE); // Set the font colour and the background colour
+
+  tft.setCursor(xpos - 90, ypos);  // Set the tft cursor position
+  spr.printToSprite("36pt font");  // Text is rendered via a minimally sized sprite
+
+  ypos += spr.fontHeight();  // Get the font height and move ypos down
+
+  // Draw changing numbers - no flicker using this plot method!
+  for (int i = 0; i <= 200; i++) {
+    tft.setCursor(10, 10);
+    // Number is converted to String type by (String) (number)
+    spr.printToSprite(" " + (String) (i / 100.0) + " "); // Space padding helps over-write old numbers
+    delay (20);
+  }
+
+  spr.unloadFont(); // Remove the font to recover memory used
+
+  delay(8000);
+}

examples/Smooth Fonts/LittleFS/Font_Demo_4/Notes.ino

+/*
+
+Information notes only:
+======================
+
+//These are the text plotting alignment (reference datum point)
+
+TL_DATUM = Top left (default)
+TC_DATUM = Top centre
+TR_DATUM = Top right
+
+ML_DATUM = Middle left
+MC_DATUM = Middle centre
+MR_DATUM = Middle right
+
+BL_DATUM = Bottom left
+BC_DATUM = Bottom centre
+BR_DATUM = Bottom right
+
+L_BASELINE = Left character baseline (Line the 'A' character would sit on)
+C_BASELINE = Centre character baseline
+R_BASELINE = Right character baseline
+
+// Basic colours already defined:
+
+TFT_BLACK       0x0000
+TFT_NAVY        0x000F
+TFT_DARKGREEN   0x03E0
+TFT_DARKCYAN    0x03EF
+TFT_MAROON      0x7800
+TFT_PURPLE      0x780F
+TFT_OLIVE       0x7BE0
+TFT_LIGHTGREY   0xC618
+TFT_DARKGREY    0x7BEF
+TFT_BLUE        0x001F
+TFT_GREEN       0x07E0
+TFT_CYAN        0x07FF
+TFT_RED         0xF800
+TFT_MAGENTA     0xF81F
+TFT_YELLOW      0xFFE0
+TFT_WHITE       0xFFFF
+TFT_ORANGE      0xFDA0
+TFT_GREENYELLOW 0xB7E0
+TFT_PINK        0xFC9F
+
+
+
+
+
+
+
+
+
+
+ 
+ */

examples/Smooth Fonts/LittleFS/Print_Smooth_Font/Print_Smooth_Font.ino

+/*
+  Sketch to demonstrate using the print class with smooth fonts
+
+  Sketch is writtent for a 240 x 320 display
+
+//  Upload the fonts and icons to LittleFS (must set at least 1M for LittleFS) using the
+//  "Tools"  "ESP8266 LittleFS Data Upload" menu option in the IDE.
+//  To add this option follow instructions here for the ESP8266:
+//  https://github.com/earlephilhower/arduino-esp8266littlefs-plugin
+
+  New font files in the .vlw format can be created using the Processing
+  sketch in the library Tools folder. The Processing sketch can convert
+  TrueType fonts in *.ttf or *.otf files.
+
+  The library supports 16 bit unicode characters:
+  https://en.wikipedia.org/wiki/Unicode_font
+
+  The characters supported are in the in the Basic Multilingal Plane:
+  https://en.wikipedia.org/wiki/Plane_(Unicode)#Basic_Multilingual_Plane
+
+  Make sure all the display driver and pin connenctions are correct by
+  editting the User_Setup.h file in the TFT_eSPI library folder.
+
+  #########################################################################
+  ###### DON'T FORGET TO UPDATE THE User_Setup.h FILE IN THE LIBRARY ######
+  #########################################################################
+*/
+
+// Font files are stored in Flash FS
+#include <FS.h>
+#include <LittleFS.h>
+#define FlashFS LittleFS
+
+// Graphics and font library
+#include <TFT_eSPI.h>
+#include <SPI.h>
+
+TFT_eSPI tft = TFT_eSPI();  // Invoke library
+
+// -------------------------------------------------------------------------
+// Setup
+// -------------------------------------------------------------------------
+void setup(void) {
+  Serial.begin(115200); // Used for messages
+
+  tft.init();
+  tft.setRotation(1);
+
+  if (!LittleFS.begin()) {
+    Serial.println("Flash FS initialisation failed!");
+    while (1) yield(); // Stay here twiddling thumbs waiting
+  }
+  Serial.println("\n\Flash FS available!");
+
+  listFiles(); // Lists the files so you can see what is in the SPIFFS
+
+}
+
+// -------------------------------------------------------------------------
+// Main loop
+// -------------------------------------------------------------------------
+void loop() {
+  // Wrap test at right and bottom of screen
+  tft.setTextWrap(true, true);
+
+  // Name of font file (library adds leading / and .vlw)
+  String fileName = "Final-Frontier-28";
+
+  // Font and background colour, background colour is used for anti-alias blending
+  tft.setTextColor(TFT_WHITE, TFT_BLACK);
+
+  // Load the font
+  tft.loadFont(fileName, LittleFS);
+
+  // Display all characters of the font
+  tft.showFont(2000);
+
+  // Set "cursor" at top left corner of display (0,0)
+  // (cursor will move to next line automatically during printing with 'tft.println'
+  //  or stay on the line is there is room for the text with tft.print)
+  tft.setCursor(0, 0);
+
+  // Set the font colour to be white with a black background, set text size multiplier to 1
+  tft.setTextColor(TFT_WHITE, TFT_BLACK);
+
+  // We can now plot text on screen using the "print" class
+  tft.println("Hello World!");
+
+  // Set the font colour to be yellow
+  tft.setTextColor(TFT_YELLOW, TFT_BLACK);
+  tft.println(1234.56);
+
+  // Set the font colour to be red
+  tft.setTextColor(TFT_RED, TFT_BLACK);
+  tft.println((uint32_t)3735928559, HEX); // Should print DEADBEEF
+
+  // Set the font colour to be green with black background
+  tft.setTextColor(TFT_GREEN, TFT_BLACK);
+  tft.println("Anti-aliased font!");
+  tft.println("");
+
+  // Test some print formatting functions
+  float fnumber = 123.45;
+
+  // Set the font colour to be blue
+  tft.setTextColor(TFT_BLUE, TFT_BLACK);
+  tft.print("Float = ");       tft.println(fnumber);           // Print floating point number
+  tft.print("Binary = ");      tft.println((int)fnumber, BIN); // Print as integer value in binary
+  tft.print("Hexadecimal = "); tft.println((int)fnumber, HEX); // Print as integer number in Hexadecimal
+
+  // Unload the font to recover used RAM
+  tft.unloadFont();
+
+  delay(10000);
+}
+
+
+// -------------------------------------------------------------------------
+// List files in ESP8266 or ESP32 SPIFFS memory
+// -------------------------------------------------------------------------
+void listFiles(void) {
+  Serial.println();
+  Serial.println("Flash FS files found:");
+
+  fs::Dir dir = LittleFS.openDir("/"); // Root directory
+  String  line = "=====================================";
+
+  Serial.println(line);
+  Serial.println("  File name               Size");
+  Serial.println(line);
+
+  while (dir.next()) {
+    String fileName = dir.fileName();
+    Serial.print(fileName);
+    int spaces = 25 - fileName.length(); // Tabulate nicely
+    if (spaces < 0) spaces = 1;
+    while (spaces--) Serial.print(" ");
+    fs::File f = dir.openFile("r");
+    Serial.print(f.size()); Serial.println(" bytes");
+    yield();
+  }
+
+  Serial.println(line);
+
+  Serial.println();
+  delay(1000);
+}
+
+// -------------------------------------------------------------------------

examples/Smooth Fonts/LittleFS/Smooth_font_gradient/Smooth_font_gradient.ino

+/*
+  This sketch is based on Font Demo 1. It introduces a method for rendering
+  anti-aliased fonts on a graded background. This is acheived by telling the
+  TFT_eSPI library the pixel color at each point on the screen. In this sketch
+  a graded background is drawn, the color of each pixel can therefore be
+  determined. The TFT does not need to support reading of the graphics memory.
+  The sketch could be adapted so only part of the screen is has a color gradient.
+
+  The TFT_eSPI library must be given the name of the function in the sketch
+  that will return the pixel xolor at a position x,y on the TFT. In this
+  sketch that function is called gradientColor, so this line is included:
+
+    tft.setCallback(gradientColor);
+
+  TFT_eSPI will call this function during the rendering of the anti-aliased
+  font to blend the edges of each character with the returned color.
+
+  If the TFT supports reading the screen RAM then the returned value can be
+  tft.readPixel(x,y) and anti-aliased text can the be drawn over any screen
+  image. See "Smooth_font_reading_TFT" example.
+*/
+//  The fonts used are in the sketch data folder, press Ctrl+K to view.
+
+//  Upload the fonts and icons to LittleFS (must set at least 1M for LittleFS) using the
+//  "Tools"  "ESP8266 LittleFS Data Upload" menu option in the IDE.
+//  To add this option follow instructions here for the ESP8266:
+//  https://github.com/earlephilhower/arduino-esp8266littlefs-plugin
+
+//  Close the IDE and open again to see the new menu option.
+
+//  A processing sketch to create new fonts can be found in the Tools folder of TFT_eSPI
+//  https://github.com/Bodmer/TFT_eSPI/tree/master/Tools/Create_Smooth_Font/Create_font
+
+//  This sketch uses font files created from the Noto family of fonts:
+//  https://www.google.com/get/noto/
+
+#define AA_FONT_SMALL "NotoSansBold15"
+#define AA_FONT_LARGE "NotoSansBold36"
+
+// Font files are stored in Flash FS
+#include <FS.h>
+#include <LittleFS.h>
+#define FlashFS LittleFS
+
+#include <SPI.h>
+#include <TFT_eSPI.h>       // Hardware-specific library
+
+TFT_eSPI tft = TFT_eSPI();
+
+#define TOP_COLOR    TFT_RED
+#define BOTTOM_COLOR TFT_BLACK
+
+#define GRADIENT_HEIGHT (9 + tft.fontHeight() * 5) // Gradient over 5 lines
+#define OUTSIDE_GRADIENT TFT_BLUE
+
+uint16_t gradientColor(uint16_t x, uint16_t y)
+{
+  if (y > GRADIENT_HEIGHT) return OUTSIDE_GRADIENT;   // Outside gradient area
+  uint8_t alpha = (255 * y) / GRADIENT_HEIGHT;        // alpha is a value in the range 0-255
+  return tft.alphaBlend(alpha, BOTTOM_COLOR, TOP_COLOR);
+}
+
+void fillGradient() {
+  uint16_t w = tft.width();
+  for (uint16_t y = 0; y < tft.height(); ++y) {
+    uint16_t color = gradientColor(0, y); // x not used here
+    tft.drawFastHLine(0, y, w, color);
+  }
+}
+
+void setup(void) {
+  Serial.begin(115200);
+
+  tft.begin();
+
+  tft.setCallback(gradientColor); // Switch on color callback for anti-aliased fonts
+  //tft.setCallback(nullptr);     // Switch off callback (off by default)
+
+  tft.setRotation(1);
+
+  if (!LittleFS.begin()) {
+    Serial.println("Flash FS initialisation failed!");
+    while (1) yield(); // Stay here twiddling thumbs waiting
+  }
+  Serial.println("\n\Flash FS available!");
+
+  bool font_missing = false;
+  if (LittleFS.exists("/NotoSansBold15.vlw") == false) font_missing = true;
+  if (LittleFS.exists("/NotoSansBold36.vlw")    == false) font_missing = true;
+
+  if (font_missing)
+  {
+    Serial.println("\nFont missing in Flash FS, did you upload it?");
+    while (1) yield();
+  }
+  else Serial.println("\nFonts found OK.");
+}
+
+
+void loop() {
+
+  // Select a font size comensurate with screen size
+  if (tft.width()>= 320)
+    tft.loadFont(AA_FONT_LARGE, LittleFS);
+  else
+    tft.loadFont(AA_FONT_SMALL, LittleFS);
+
+  fillGradient(); // Put here after selecting the font so fontHeight() is already set
+
+  tft.setTextColor(TFT_WHITE); // Background color is ignored in gradient area
+  tft.setCursor(0, 10); // Set cursor at top left of screen
+
+  uint32_t t = millis();
+  tft.println(" Ode to a small\n lump of green\n putty I found\n in my armpit\n one midsummer\n morning ");
+  Serial.println(t = millis()-t);
+
+  tft.unloadFont(); // Remove the font to recover memory used
+
+  delay(2000);
+}

examples/Smooth Fonts/LittleFS/Smooth_font_reading_TFT/Smooth_font_reading_TFT.ino

+/*
+  This sketch is based on Font Demo 1. It introduces a method for rendering
+  anti-aliased fonts on an arbitrary background. This is acheived by reading
+  the pixel color at each point on the screen. The TFT must support reading
+  the graphics RAM of the screen memory. This sketch has been tested with
+  ILI9241 and ILI9481 serial and parallel screens. Other screens may or may
+  not work!
+
+  The TFT_eSPI library must be given the name of the function in the sketch
+  that will return the pixel color at a position x,y on the TFT. In this
+  sketch that function is called pixelColor, so this line is included:
+
+    tft.setCallback(pixelColor);
+
+  TFT_eSPI will call this function during the rendering of the anti-aliased
+  font and use it to blend the edges of each character with the screen color.
+*/
+//  The fonts used are in the sketch data folder, press Ctrl+K to view.
+
+//  Upload the fonts and icons to LittleFS (must set at least 1M for LittleFS) using the
+//  "Tools"  "ESP8266 LittleFS Data Upload" menu option in the IDE.
+//  To add this option follow instructions here for the ESP8266:
+//  https://github.com/earlephilhower/arduino-esp8266littlefs-plugin
+
+//  Close the IDE and open again to see the new menu option.
+
+//  A processing sketch to create new fonts can be found in the Tools folder of TFT_eSPI
+//  https://github.com/Bodmer/TFT_eSPI/tree/master/Tools/Create_Smooth_Font/Create_font
+
+//  This sketch uses font files created from the Noto family of fonts:
+//  https://www.google.com/get/noto/
+
+#define AA_FONT_SMALL "NotoSansBold15"
+#define AA_FONT_LARGE "NotoSansBold36"
+
+// Font files are stored in Flash FS
+#include <FS.h>
+#include <LittleFS.h>
+#define FlashFS LittleFS
+
+#include <SPI.h>
+#include <TFT_eSPI.h>       // Hardware-specific library
+
+TFT_eSPI tft = TFT_eSPI();
+
+// Callback function to provide the pixel color at x,y
+uint16_t pixelColor(uint16_t x, uint16_t y) { return tft.readPixel(x, y); }
+
+
+void setup(void) {
+  Serial.begin(115200);
+
+  tft.begin();
+
+  tft.setCallback(pixelColor);  // The callback is only used durung font rendering
+  //tft.setCallback(nullptr);   // Switch off callback (off by default)
+
+  tft.setRotation(1);
+
+  if (!LittleFS.begin()) {
+    Serial.println("Flash FS initialisation failed!");
+    while (1) yield(); // Stay here twiddling thumbs waiting
+  }
+  Serial.println("\n\Flash FS available!");
+
+  // ESP32 will crash if any of the fonts are missing, so check
+  bool font_missing = false;
+  if (LittleFS.exists("/NotoSansBold15.vlw") == false) font_missing = true;
+  if (LittleFS.exists("/NotoSansBold36.vlw") == false) font_missing = true;
+
+  if (font_missing)
+  {
+    Serial.println("\nFont missing in Flash FS, did you upload it?");
+    while (1) yield();
+  }
+  else Serial.println("\nFonts found OK.");
+}
+
+
+void loop() {
+
+  rainbow_fill(); // Fill the screen with rainbow colours
+
+  // Select a font size comensurate with screen size
+  if (tft.width()>= 320)
+    tft.loadFont(AA_FONT_LARGE, LittleFS);
+  else
+    tft.loadFont(AA_FONT_SMALL, LittleFS);
+
+  tft.setTextColor(TFT_BLACK, TFT_WHITE); // Background color is ignored if callback is set
+  tft.setCursor(0, 10); // Set cursor at top left of screen
+
+  uint32_t t = millis();
+  tft.println(" Ode to a small\n lump of green\n putty I found\n in my armpit\n one midsummer\n morning ");
+  Serial.println(t = millis()-t);
+
+  tft.unloadFont(); // Remove the font to recover memory used
+
+  delay(2000);
+}
+
+// #########################################################################
+// Fill screen with a rainbow pattern
+// #########################################################################
+byte red = 31;
+byte green = 0;
+byte blue = 0;
+byte state = 0;
+unsigned int colour = red << 11; // Colour order is RGB 5+6+5 bits each
+
+void rainbow_fill()
+{
+  // The colours and state are not initialised so the start colour changes each time the funtion is called
+  
+  for (int i = 319; i >= 0; i--) {
+    // Draw a vertical line 1 pixel wide in the selected colour
+    tft.drawFastHLine(0, i, tft.width(), colour); // in this example tft.width() returns the pixel width of the display
+    // This is a "state machine" that ramps up/down the colour brightnesses in sequence
+    switch (state) {
+      case 0:
+        green ++;
+        if (green == 64) {
+          green = 63;
+          state = 1;
+        }
+        break;
+      case 1:
+        red--;
+        if (red == 255) {
+          red = 0;
+          state = 2;
+        }
+        break;
+      case 2:
+        blue ++;
+        if (blue == 32) {
+          blue = 31;
+          state = 3;
+        }
+        break;
+      case 3:
+        green --;
+        if (green == 255) {
+          green = 0;
+          state = 4;
+        }
+        break;
+      case 4:
+        red ++;
+        if (red == 32) {
+          red = 31;
+          state = 5;
+        }
+        break;
+      case 5:
+        blue --;
+        if (blue == 255) {
+          blue = 0;
+          state = 0;
+        }
+        break;
+    }
+    colour = red << 11 | green << 5 | blue;
+  }
+}

examples/Smooth Fonts/LittleFS/Unicode_test/LittleFS_functions.ino

+/*====================================================================================
+  This sketch supports the ESP6266 with LittleFS Flash filing system
+
+  Created by Bodmer 15th Jan 2017
+  ==================================================================================*/
+
+//====================================================================================
+//                 Print a Flash FS directory list (root directory)
+//====================================================================================
+
+void listFiles(void) {
+  Serial.println();
+  Serial.println("Flash FS files found:");
+
+  fs::Dir dir = LittleFS.openDir("/"); // Root directory
+  String  line = "=====================================";
+
+  Serial.println(line);
+  Serial.println("  File name               Size");
+  Serial.println(line);
+
+  while (dir.next()) {
+    String fileName = dir.fileName();
+    Serial.print(fileName);
+    int spaces = 25 - fileName.length(); // Tabulate nicely
+    if (spaces < 0) spaces = 1;
+    while (spaces--) Serial.print(" ");
+    fs::File f = dir.openFile("r");
+    Serial.print(f.size()); Serial.println(" bytes");
+    yield();
+  }
+
+  Serial.println(line);
+
+  Serial.println();
+  delay(1000);
+}
+//====================================================================================
+

examples/Smooth Fonts/LittleFS/Unicode_test/Unicode_test.ino

+//  Created by Bodmer 24th Jan 2017 - Tested in Arduino IDE 1.8.5 esp8266 Core 2.4.0
+
+// The latest Arduino IDE versions support UTF-8 encoding of Unicode characters
+// within sketches:
+// https://playground.arduino.cc/Code/UTF-8
+
+/*
+  The library expects strings to be in UTF-8 encoded format:
+  https://www.fileformat.info/info/unicode/utf8.htm
+
+  Creating varaibles needs to be done with care when using character arrays:
+  char c = 'µ';          // Wrong
+  char bad[4] = "5µA";   // Wrong
+  char good[] = "5µA";   // Good
+  String okay = "5µA";   // Good
+
+  This is because UTF-8 characters outside the basic Latin set occupy more than
+  1 byte per character! A 16 bit unicode character occupies 3 bytes!
+
+*/
+
+  // Flash filing system
+  #include <FS.h>
+  #include <LittleFS.h>
+
+
+//====================================================================================
+//                                  Libraries
+//====================================================================================
+// Call up the FLASH filing system this is part of the ESP Core
+
+#include <TFT_eSPI.h>      // Hardware-specific library
+
+TFT_eSPI tft = TFT_eSPI(); // Invoke custom library
+
+uint16_t bg = TFT_BLACK;
+uint16_t fg = TFT_WHITE;
+
+
+//====================================================================================
+//                                    Setup
+//====================================================================================
+void setup()
+{
+  Serial.begin(115200); // Used for messages and the C array generator
+
+  Serial.println("NodeMCU vlw font test!");
+
+  if (!LittleFS.begin()) {
+    Serial.println("Flash FS initialisation failed!");
+    while (1) yield(); // Stay here twiddling thumbs waiting
+  }
+  Serial.println("\nInitialisation done.");
+
+  listFiles(); // Lists the files so you can see what is in the Flash FS
+
+  tft.begin();
+  tft.setRotation(0);  // portrait
+
+  fg = TFT_WHITE;
+  bg = TFT_BLACK;
+}
+
+//====================================================================================
+//                                    Loop
+//====================================================================================
+void loop()
+{
+  tft.setTextColor(fg, bg);
+
+  //----------------------------------------------------------------------------
+  // Anti-aliased font test
+
+  String test1 = "Hello World";
+
+  // Load a smooth font from Flash FS
+  tft.loadFont("Final-Frontier-28", LittleFS);
+
+  tft.setRotation(0);
+
+  // Show all characters on screen with 2 second (2000ms) delay between screens
+  tft.showFont(2000); // Note: This function moves the cursor position!
+
+  tft.fillScreen(bg);
+  tft.setCursor(0,0);
+
+  tft.println(test1);
+
+  // Remove font parameters from memory to recover RAM
+  tft.unloadFont();
+
+  delay(2000);
+
+  //----------------------------------------------------------------------------
+  // We can have any random mix of characters in the font
+
+  String test2 = "仝倀"; // Unicodes 0x4EDD, 0x5000
+
+  tft.loadFont("Unicode-Test-72", LittleFS);
+
+  tft.setRotation(1);
+
+  // Show all characters on screen with 2 second (2000ms) delay between screens
+  tft.showFont(2000); // Note: This function moves the cursor position!
+
+  tft.fillScreen(bg);
+  tft.setCursor(0,0);
+uint32_t dt = millis();
+  tft.setTextColor(TFT_CYAN, bg);
+  tft.println(test2);
+
+  tft.setTextColor(TFT_YELLOW, bg);
+  tft.println("12:00pm");
+
+  tft.setTextColor(TFT_MAGENTA, bg);
+  tft.println("1000Ω");
+Serial.println(millis()-dt);
+  // Remove font parameters from memory to recover RAM
+  tft.unloadFont();
+
+  delay(2000);
+
+  //----------------------------------------------------------------------------
+  // Latin and Hiragana font mix
+
+  String test3 = "こんにちは";
+    
+  tft.loadFont("Latin-Hiragana-24",LittleFS);
+
+  tft.setRotation(0);
+dt = millis();
+  // Show all characters on screen with 2 second (2000ms) delay between screens
+  tft.showFont(2000); // Note: This function moves the cursor position!
+Serial.println(millis()-dt);
+  tft.fillScreen(bg);
+  tft.setTextColor(TFT_GREEN, bg);
+  tft.setCursor(0,0);
+dt = millis();
+  tft.println("Konnichiwa");
+  tft.println(test3);
+  tft.println();
+  tft.println("Sayonara");
+  tft.println("さようなら"); // Sayonara
+Serial.println(millis()-dt);
+  // Remove font parameters from memory to recover RAM
+  tft.unloadFont();
+
+  delay(2000);
+  //
+  //----------------------------------------------------------------------------
+}
+//====================================================================================