Add libraries, picocalc notes.
This commit is contained in:
@@ -0,0 +1,183 @@
|
||||
/*
|
||||
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.setTextColor(TFT_GREEN, TFT_BLACK); // TFT_BLACK is used for anti-aliasing only
|
||||
// By default background fill is off
|
||||
tft.print(" "); // Overprinting old number with spaces DOES NOT WORK!
|
||||
tft.setCursor(50, 50);
|
||||
tft.print(i / 10.0, 1);
|
||||
|
||||
// Adding a parameter "true" to the setTextColor() function fills character background
|
||||
// This extra parameter is only for smooth fonts!
|
||||
tft.setTextColor(TFT_GREEN, TFT_BLACK, true);
|
||||
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);
|
||||
}
|
||||
@@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
*/
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,234 @@
|
||||
/*
|
||||
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);
|
||||
|
||||
// The "true" parameter forces background drawing for smooth fonts
|
||||
tft.setTextColor(TFT_GREEN, TFT_BLUE, true); // 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);
|
||||
}
|
||||
|
||||
// Turn off text padding by setting value to 0
|
||||
tft.setTextPadding(0);
|
||||
|
||||
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, false);
|
||||
|
||||
// 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);
|
||||
}
|
||||
@@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
*/
|
||||
Binary file not shown.
Binary file not shown.
@@ -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 anti-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 different "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 inter-character 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();
|
||||
}
|
||||
@@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
*/
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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 <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 anti-aliased 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);
|
||||
}
|
||||
@@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
*/
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,149 @@
|
||||
/*
|
||||
Sketch to demonstrate using the print class with smooth fonts
|
||||
|
||||
Sketch is written 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 Multilingual Plane:
|
||||
https://en.wikipedia.org/wiki/Plane_(Unicode)#Basic_Multilingual_Plane
|
||||
|
||||
Make sure all the display driver and pin connections are correct by
|
||||
editing 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);
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
Binary file not shown.
@@ -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 achieved 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 commensurate 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);
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@@ -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 achieved 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 during 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 function 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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@@ -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);
|
||||
}
|
||||
//====================================================================================
|
||||
|
||||
@@ -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 variables 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);
|
||||
//
|
||||
//----------------------------------------------------------------------------
|
||||
}
|
||||
//====================================================================================
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user