diff --git a/User_Setup_Select.h b/User_Setup_Select.h index 8ee352e..5a6d1ca 100644 --- a/User_Setup_Select.h +++ b/User_Setup_Select.h @@ -72,7 +72,7 @@ //#include // Setup file for ESP32 and TTGO T-CameraPlus ST7789 SPI bus TFT 240x240 //#include // Setup file for ESP32 and TTGO T-Watch ST7789 SPI bus TFT 240x240 -//#include // Setup file configured for ST7735 128 x 160 +//#include // Setup file configured for ST7735 128 x 128 animated eyes //#include // Setup file for ESP32 and SSD1963 TFT display diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_1/Font_Demo_1.ino b/examples/Smooth Fonts/LittleFS/Font_Demo_1/Font_Demo_1.ino new file mode 100644 index 0000000..7d41d8d --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Font_Demo_1/Font_Demo_1.ino @@ -0,0 +1,181 @@ +/* + 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 +#include +#define FlashFS LittleFS + +#include +#include // 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); +} diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_1/Notes.ino b/examples/Smooth Fonts/LittleFS/Font_Demo_1/Notes.ino new file mode 100644 index 0000000..f04f2b7 --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Font_Demo_1/Notes.ino @@ -0,0 +1,56 @@ +/* + +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 + + + + + + + + + + + + */ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_1/data/NotoSansBold15.vlw b/examples/Smooth Fonts/LittleFS/Font_Demo_1/data/NotoSansBold15.vlw new file mode 100644 index 0000000..803a1bd Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Font_Demo_1/data/NotoSansBold15.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_1/data/NotoSansBold36.vlw b/examples/Smooth Fonts/LittleFS/Font_Demo_1/data/NotoSansBold36.vlw new file mode 100644 index 0000000..66003f6 Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Font_Demo_1/data/NotoSansBold36.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_2/Font_Demo_2.ino b/examples/Smooth Fonts/LittleFS/Font_Demo_2/Font_Demo_2.ino new file mode 100644 index 0000000..03ec36f --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Font_Demo_2/Font_Demo_2.ino @@ -0,0 +1,230 @@ +/* + 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 +#include +#define FlashFS LittleFS + +#include +#include // 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); +} diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_2/Notes.ino b/examples/Smooth Fonts/LittleFS/Font_Demo_2/Notes.ino new file mode 100644 index 0000000..f04f2b7 --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Font_Demo_2/Notes.ino @@ -0,0 +1,56 @@ +/* + +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 + + + + + + + + + + + + */ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_2/data/NotoSansBold15.vlw b/examples/Smooth Fonts/LittleFS/Font_Demo_2/data/NotoSansBold15.vlw new file mode 100644 index 0000000..803a1bd Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Font_Demo_2/data/NotoSansBold15.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_2/data/NotoSansBold36.vlw b/examples/Smooth Fonts/LittleFS/Font_Demo_2/data/NotoSansBold36.vlw new file mode 100644 index 0000000..66003f6 Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Font_Demo_2/data/NotoSansBold36.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_3/Font_Demo_3.ino b/examples/Smooth Fonts/LittleFS/Font_Demo_3/Font_Demo_3.ino new file mode 100644 index 0000000..f1189a9 --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Font_Demo_3/Font_Demo_3.ino @@ -0,0 +1,231 @@ +/* + 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 +#include +#define FlashFS LittleFS + +#include +#include // 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(); +} diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_3/Notes.ino b/examples/Smooth Fonts/LittleFS/Font_Demo_3/Notes.ino new file mode 100644 index 0000000..bdab3d0 --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Font_Demo_3/Notes.ino @@ -0,0 +1,61 @@ +/* + +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 + + + + + + + + + + + + */ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_3/data/NotoSansBold15.vlw b/examples/Smooth Fonts/LittleFS/Font_Demo_3/data/NotoSansBold15.vlw new file mode 100644 index 0000000..803a1bd Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Font_Demo_3/data/NotoSansBold15.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_3/data/NotoSansBold36.vlw b/examples/Smooth Fonts/LittleFS/Font_Demo_3/data/NotoSansBold36.vlw new file mode 100644 index 0000000..66003f6 Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Font_Demo_3/data/NotoSansBold36.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_3/data/NotoSansMonoSCB20.vlw b/examples/Smooth Fonts/LittleFS/Font_Demo_3/data/NotoSansMonoSCB20.vlw new file mode 100644 index 0000000..4045c62 Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Font_Demo_3/data/NotoSansMonoSCB20.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_4/Font_Demo_4.ino b/examples/Smooth Fonts/LittleFS/Font_Demo_4/Font_Demo_4.ino new file mode 100644 index 0000000..c156320 --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Font_Demo_4/Font_Demo_4.ino @@ -0,0 +1,140 @@ +/* + 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 +#include +#define FlashFS LittleFS + +#include +#include // 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); +} diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_4/Notes.ino b/examples/Smooth Fonts/LittleFS/Font_Demo_4/Notes.ino new file mode 100644 index 0000000..f04f2b7 --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Font_Demo_4/Notes.ino @@ -0,0 +1,56 @@ +/* + +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 + + + + + + + + + + + + */ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_4/data/NotoSansBold15.vlw b/examples/Smooth Fonts/LittleFS/Font_Demo_4/data/NotoSansBold15.vlw new file mode 100644 index 0000000..803a1bd Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Font_Demo_4/data/NotoSansBold15.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Font_Demo_4/data/NotoSansBold36.vlw b/examples/Smooth Fonts/LittleFS/Font_Demo_4/data/NotoSansBold36.vlw new file mode 100644 index 0000000..66003f6 Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Font_Demo_4/data/NotoSansBold36.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Print_Smooth_Font/Print_Smooth_Font.ino b/examples/Smooth Fonts/LittleFS/Print_Smooth_Font/Print_Smooth_Font.ino new file mode 100644 index 0000000..cda3f32 --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Print_Smooth_Font/Print_Smooth_Font.ino @@ -0,0 +1,149 @@ +/* + 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 +#include +#define FlashFS LittleFS + +// Graphics and font library +#include +#include + +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); +} + +// ------------------------------------------------------------------------- diff --git a/examples/Smooth Fonts/LittleFS/Print_Smooth_Font/data/Final-Frontier-28.vlw b/examples/Smooth Fonts/LittleFS/Print_Smooth_Font/data/Final-Frontier-28.vlw new file mode 100644 index 0000000..2872fd5 Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Print_Smooth_Font/data/Final-Frontier-28.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Smooth_font_gradient/Smooth_font_gradient.ino b/examples/Smooth Fonts/LittleFS/Smooth_font_gradient/Smooth_font_gradient.ino new file mode 100644 index 0000000..9e3ca8f --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Smooth_font_gradient/Smooth_font_gradient.ino @@ -0,0 +1,120 @@ +/* + 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 +#include +#define FlashFS LittleFS + +#include +#include // 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); +} diff --git a/examples/Smooth Fonts/LittleFS/Smooth_font_gradient/data/NotoSansBold15.vlw b/examples/Smooth Fonts/LittleFS/Smooth_font_gradient/data/NotoSansBold15.vlw new file mode 100644 index 0000000..803a1bd Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Smooth_font_gradient/data/NotoSansBold15.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Smooth_font_gradient/data/NotoSansBold36.vlw b/examples/Smooth Fonts/LittleFS/Smooth_font_gradient/data/NotoSansBold36.vlw new file mode 100644 index 0000000..66003f6 Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Smooth_font_gradient/data/NotoSansBold36.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Smooth_font_reading_TFT/Smooth_font_reading_TFT.ino b/examples/Smooth Fonts/LittleFS/Smooth_font_reading_TFT/Smooth_font_reading_TFT.ino new file mode 100644 index 0000000..52f2b91 --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Smooth_font_reading_TFT/Smooth_font_reading_TFT.ino @@ -0,0 +1,165 @@ +/* + 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 +#include +#define FlashFS LittleFS + +#include +#include // 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; + } +} diff --git a/examples/Smooth Fonts/LittleFS/Smooth_font_reading_TFT/data/NotoSansBold15.vlw b/examples/Smooth Fonts/LittleFS/Smooth_font_reading_TFT/data/NotoSansBold15.vlw new file mode 100644 index 0000000..803a1bd Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Smooth_font_reading_TFT/data/NotoSansBold15.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Smooth_font_reading_TFT/data/NotoSansBold36.vlw b/examples/Smooth Fonts/LittleFS/Smooth_font_reading_TFT/data/NotoSansBold36.vlw new file mode 100644 index 0000000..66003f6 Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Smooth_font_reading_TFT/data/NotoSansBold36.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Unicode_test/LittleFS_functions.ino b/examples/Smooth Fonts/LittleFS/Unicode_test/LittleFS_functions.ino new file mode 100644 index 0000000..fbdc0aa --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Unicode_test/LittleFS_functions.ino @@ -0,0 +1,39 @@ +/*==================================================================================== + 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); +} +//==================================================================================== + diff --git a/examples/Smooth Fonts/LittleFS/Unicode_test/Unicode_test.ino b/examples/Smooth Fonts/LittleFS/Unicode_test/Unicode_test.ino new file mode 100644 index 0000000..46f2fa0 --- /dev/null +++ b/examples/Smooth Fonts/LittleFS/Unicode_test/Unicode_test.ino @@ -0,0 +1,152 @@ +// 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 + #include + + +//==================================================================================== +// Libraries +//==================================================================================== +// Call up the FLASH filing system this is part of the ESP Core + +#include // 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); + // + //---------------------------------------------------------------------------- +} +//==================================================================================== diff --git a/examples/Smooth Fonts/LittleFS/Unicode_test/data/Final-Frontier-28.vlw b/examples/Smooth Fonts/LittleFS/Unicode_test/data/Final-Frontier-28.vlw new file mode 100644 index 0000000..2872fd5 Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Unicode_test/data/Final-Frontier-28.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Unicode_test/data/Latin-Hiragana-24.vlw b/examples/Smooth Fonts/LittleFS/Unicode_test/data/Latin-Hiragana-24.vlw new file mode 100644 index 0000000..b2f128b Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Unicode_test/data/Latin-Hiragana-24.vlw differ diff --git a/examples/Smooth Fonts/LittleFS/Unicode_test/data/Unicode-Test-72.vlw b/examples/Smooth Fonts/LittleFS/Unicode_test/data/Unicode-Test-72.vlw new file mode 100644 index 0000000..c475756 Binary files /dev/null and b/examples/Smooth Fonts/LittleFS/Unicode_test/data/Unicode-Test-72.vlw differ