Add more smooth font examples

The extra examples use smooth fonts stored in arrays and thus can run on STM32 processors which do not support SPIFFS.

examples/Smooth Fonts/FLASH_Array/Print_Smooth_Font/Print_Smooth_Font.ino

+/*
+  Sketch to demonstrate using the print class with smooth fonts,
+  the Smooth fonts are stored in a FLASH program memory array.
+
+  Sketch is written for a 240 x 320 display
+
+  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.
+*/
+
+//  The font is stored in an array within a sketch tab.
+
+//  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
+
+#include "Final_Frontier_28.h"
+
+// 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);
+}
+
+// -------------------------------------------------------------------------
+// Main loop
+// -------------------------------------------------------------------------
+void loop() {
+  // Wrap test at right and bottom of screen
+  tft.setTextWrap(true, true);
+
+  // Font and background colour, background colour is used for anti-alias blending
+  tft.setTextColor(TFT_WHITE, TFT_BLACK);
+
+  // Load the font
+  tft.loadFont(Final_Frontier_28);
+
+  // 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("SPIFFS files found:");
+
+#ifdef ESP32
+  listDir(SPIFFS, "/", true);
+#else
+  fs::Dir dir = SPIFFS.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);
+#endif
+  Serial.println();
+  delay(1000);
+}
+
+#ifdef ESP32
+void listDir(fs::FS &fs, const char * dirname, uint8_t levels) {
+  Serial.printf("Listing directory: %s\n", dirname);
+
+  fs::File root = fs.open(dirname);
+  if (!root) {
+    Serial.println("Failed to open directory");
+    return;
+  }
+  if (!root.isDirectory()) {
+    Serial.println("Not a directory");
+    return;
+  }
+
+  fs::File file = root.openNextFile();
+  while (file) {
+
+    if (file.isDirectory()) {
+      Serial.print("DIR : ");
+      String fileName = file.name();
+      Serial.print(fileName);
+      if (levels) {
+        listDir(fs, file.name(), levels - 1);
+      }
+    } else {
+      String fileName = file.name();
+      Serial.print("  " + fileName);
+      int spaces = 32 - fileName.length(); // Tabulate nicely
+      if (spaces < 1) spaces = 1;
+      while (spaces--) Serial.print(" ");
+      String fileSize = (String) file.size();
+      spaces = 8 - fileSize.length(); // Tabulate nicely
+      if (spaces < 1) spaces = 1;
+      while (spaces--) Serial.print(" ");
+      Serial.println(fileSize + " bytes");
+    }
+
+    file = root.openNextFile();
+  }
+}
+#endif
+// -------------------------------------------------------------------------

examples/Smooth Fonts/FLASH_Array/Smooth_font_gradient/Smooth_font_gradient.ino

+/*
+  This sketch uses Smooth fonts stored in FLASH program memory. It uses 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 background colour gradient is drawn, the color of each pixel can
+  therefore be determined by a function. The TFT does not need to support reading
+  of the graphics memory. The sketch could be adapted so any part of the screen
+  has a color gradient.
+
+  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 gradientColor, so this line is included in setup():
+
+    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_over_image" example.
+*/
+//  The fonts are stored in arrays within the sketch tabs.
+
+//  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 fonts created from the Noto family of fonts:
+//  https://www.google.com/get/noto/
+
+#include "NotoSansBold15.h"
+#include "NotoSansBold36.h"
+
+// Do not include "" around the array name!
+#define AA_FONT_SMALL NotoSansBold15
+#define AA_FONT_LARGE NotoSansBold36
+
+#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);
+}
+
+void loop() {
+
+  // Select a font size comensurate with screen size
+  if (tft.width()>= 320)
+    tft.loadFont(AA_FONT_LARGE);
+  else
+    tft.loadFont(AA_FONT_SMALL);
+
+  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/FLASH_Array/Smooth_font_reading_TFT/Smooth_font_reading_TFT.ino

+/*
+  This sketch uses Smooth fonts stored in FLASH program memory. It uses 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.
+
+  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 are stored in arrays within the sketch tabs.
+
+//  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/
+
+#include "NotoSansBold15.h"
+#include "NotoSansBold36.h"
+
+// Do not include "" around the array name!
+#define AA_FONT_SMALL NotoSansBold15
+#define AA_FONT_LARGE NotoSansBold36
+
+#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);  // Switch on color callback for anti-aliased fonts
+  //tft.setCallback(nullptr);   // Switch off callback (off by default)
+
+  tft.setRotation(1);
+}
+
+
+void loop() {
+
+  rainbow_fill(); // Fill the screen with rainbow colours
+
+  // Select a font size commensurate with screen size
+  if (tft.width()>= 320)
+    tft.loadFont(AA_FONT_LARGE);
+  else
+    tft.loadFont(AA_FONT_SMALL);
+
+  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/FLASH_Array/Unicode_test/Unicode_test.ino

+//  Created by Bodmer 24th Jan 2017
+
+// 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!
+
+*/
+
+//  The fonts are stored in arrays within the sketch tabs.
+
+//  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
+
+#include "Final_Frontier_28.h"
+#include "Latin_Hiragana_24.h"
+#include "Unicode_Test_72.h"
+
+//====================================================================================
+//                                  Libraries
+//====================================================================================
+// Call up the SPIFFS 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("Font test!");
+
+  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 SPIFFS
+  tft.loadFont(Final_Frontier_28);
+
+  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);
+
+  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);
+
+  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Ω");
+
+  // Remove font parameters from memory to recover RAM
+  tft.unloadFont();
+
+  delay(2000);
+
+  //----------------------------------------------------------------------------
+  // Latin and Hiragana font mix
+
+  String test3 = "こんにちは";
+    
+  tft.loadFont(Latin_Hiragana_24);
+
+  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.setTextColor(TFT_GREEN, bg);
+  tft.setCursor(0,0);
+
+  tft.println("Konnichiwa");
+  tft.println(test3);
+  tft.println();
+  tft.println("Sayonara");
+  tft.println("さようなら"); // Sayonara
+
+  // Remove font parameters from memory to recover RAM
+  tft.unloadFont();
+
+  delay(2000);
+  //
+  //----------------------------------------------------------------------------
+}
+//====================================================================================