Add smooth (antialiased) fonts

This commit is contained in:
Bodmer committed 2018-02-24 19:02:20 +00:00
1 parent 02a902f617
commit 8752236ac2
34 files changed
+4031 -1915

No files matched your search

@@ -0,0 +1,195 @@
/*
Sketch to demonstrate using the print class with smooth fonts
Sketch is writtent for a 240 x 320 display
Load the font file into SPIFFS first by using the Arduino IDE
Sketch Data Upload menu option. Font files must be stored in the
sketch data folder (Ctrl+k to view).
https://github.com/esp8266/arduino-esp8266fs-plugin
https://github.com/me-no-dev/arduino-esp32fs-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.
Note: SPIFFS does not accept an underscore _ in filenames!
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 file is stored in SPIFFS
#define FS_NO_GLOBALS
#include <FS.h>
// Graphics and font library
#include <TFT_eSPI.h>
#include <SPI.h>
TFT_eSPI tft = TFT_eSPI(); // Invoke library
// -------------------------------------------------------------------------
// Setup
// -------------------------------------------------------------------------
void setup(void) {
Serial.begin(115200); // Used for messages
tft.init();
tft.setRotation(1);
if (!SPIFFS.begin()) {
Serial.println("SPIFFS initialisation failed!");
while (1) yield(); // Stay here twiddling thumbs waiting
}
Serial.println("\r\nInitialisation done.");
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);
// Display all characters of the font
tft.showFont(2000);
// Set "cursor" at top left corner of display (0,0)
// (cursor will move to next line automatically during printing with 'tft.println'
// or stay on the line is there is room for the text with tft.print)
tft.setCursor(0, 0);
// Set the font colour to be white with a black background, set text size multiplier to 1
tft.setTextColor(TFT_WHITE, TFT_BLACK);
// We can now plot text on screen using the "print" class
tft.println("Hello World!");
// Set the font colour to be yellow
tft.setTextColor(TFT_YELLOW, TFT_BLACK);
tft.println(1234.56);
// Set the font colour to be red
tft.setTextColor(TFT_RED, TFT_BLACK);
tft.println((uint32_t)3735928559, HEX); // Should print DEADBEEF
// Set the font colour to be green with black background
tft.setTextColor(TFT_GREEN, TFT_BLACK);
tft.println("Anti-aliased font!");
tft.println("");
// Test some print formatting functions
float fnumber = 123.45;
// Set the font colour to be blue
tft.setTextColor(TFT_BLUE, TFT_BLACK);
tft.print("Float = "); tft.println(fnumber); // Print floating point number
tft.print("Binary = "); tft.println((int)fnumber, BIN); // Print as integer value in binary
tft.print("Hexadecimal = "); tft.println((int)fnumber, HEX); // Print as integer number in Hexadecimal
// Unload the font to recover used RAM
tft.unloadFont();
delay(10000);
}
// -------------------------------------------------------------------------
// List files in ESP8266 or ESP32 SPIFFS memory
// -------------------------------------------------------------------------
void listFiles(void) {
Serial.println();
Serial.println("SPIFFS files found:");
#ifdef ESP32
listDir(SPIFFS, "/", true);
#else
fs::Dir dir = SPIFFS.openDir("/"); // Root directory
String line = "=====================================";
Serial.println(line);
Serial.println(" File name Size");
Serial.println(line);
while (dir.next()) {
String fileName = dir.fileName();
Serial.print(fileName);
int spaces = 25 - fileName.length(); // Tabulate nicely
if (spaces < 0) spaces = 1;
while (spaces--) Serial.print(" ");
fs::File f = dir.openFile("r");
Serial.print(f.size()); Serial.println(" bytes");
yield();
}
Serial.println(line);
#endif
Serial.println();
delay(1000);
}
#ifdef ESP32
void listDir(fs::FS &fs, const char * dirname, uint8_t levels) {
Serial.printf("Listing directory: %s\n", dirname);
fs::File root = fs.open(dirname);
if (!root) {
Serial.println("Failed to open directory");
return;
}
if (!root.isDirectory()) {
Serial.println("Not a directory");
return;
}
fs::File file = root.openNextFile();
while (file) {
if (file.isDirectory()) {
Serial.print("DIR : ");
String fileName = file.name();
Serial.print(fileName);
if (levels) {
listDir(fs, file.name(), levels - 1);
}
} else {
String fileName = file.name();
Serial.print(" " + fileName);
int spaces = 32 - fileName.length(); // Tabulate nicely
if (spaces < 1) spaces = 1;
while (spaces--) Serial.print(" ");
String fileSize = (String) file.size();
spaces = 8 - fileSize.length(); // Tabulate nicely
if (spaces < 1) spaces = 1;
while (spaces--) Serial.print(" ");
Serial.println(fileSize + " bytes");
}
file = root.openNextFile();
}
}
#endif
// -------------------------------------------------------------------------
@@ -0,0 +1,83 @@
/*====================================================================================
This sketch supports for the ESP6266 and ESP32 SPIFFS filing system
Created by Bodmer 15th Jan 2017
==================================================================================*/
//====================================================================================
// Print a SPIFFS directory list (root directory)
//====================================================================================
void listFiles(void) {
Serial.println();
Serial.println("SPIFFS files found:");
#ifdef ESP32
listDir(SPIFFS, "/", true);
#else
fs::Dir dir = SPIFFS.openDir("/"); // Root directory
String line = "=====================================";
Serial.println(line);
Serial.println(" File name Size");
Serial.println(line);
while (dir.next()) {
String fileName = dir.fileName();
Serial.print(fileName);
int spaces = 25 - fileName.length(); // Tabulate nicely
if (spaces < 0) spaces = 1;
while (spaces--) Serial.print(" ");
fs::File f = dir.openFile("r");
Serial.print(f.size()); Serial.println(" bytes");
yield();
}
Serial.println(line);
#endif
Serial.println();
delay(1000);
}
//====================================================================================
#ifdef ESP32
void listDir(fs::FS &fs, const char * dirname, uint8_t levels) {
Serial.printf("Listing directory: %s\n", dirname);
fs::File root = fs.open(dirname);
if (!root) {
Serial.println("Failed to open directory");
return;
}
if (!root.isDirectory()) {
Serial.println("Not a directory");
return;
}
fs::File file = root.openNextFile();
while (file) {
if (file.isDirectory()) {
Serial.print("DIR : ");
String fileName = file.name();
Serial.print(fileName);
if (levels) {
listDir(fs, file.name(), levels - 1);
}
} else {
String fileName = file.name();
Serial.print(" " + fileName);
int spaces = 32 - fileName.length(); // Tabulate nicely
if (spaces < 1) spaces = 1;
while (spaces--) Serial.print(" ");
String fileSize = (String) file.size();
spaces = 8 - fileSize.length(); // Tabulate nicely
if (spaces < 1) spaces = 1;
while (spaces--) Serial.print(" ");
Serial.println(fileSize + " bytes");
}
file = root.openNextFile();
}
}
#endif
@@ -0,0 +1,148 @@
// 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!
*/
//====================================================================================
// Libraries
//====================================================================================
// Call up the SPIFFS FLASH filing system this is part of the ESP Core
#include <TFT_eSPI.h> // Hardware-specific library
TFT_eSPI tft = TFT_eSPI(); // Invoke custom library
uint16_t bg = TFT_BLACK;
uint16_t fg = TFT_WHITE;
//====================================================================================
// Setup
//====================================================================================
void setup()
{
Serial.begin(115200); // Used for messages and the C array generator
Serial.println("NodeMCU vlw font test!");
if (!SPIFFS.begin()) {
Serial.println("SPIFFS initialisation failed!");
while (1) yield(); // Stay here twiddling thumbs waiting
}
Serial.println("\r\nInitialisation done.");
listFiles(); // Lists the files so you can see what is in the SPIFFS
tft.begin();
tft.setRotation(0); // portrait
fg = TFT_WHITE;
bg = TFT_BLACK;
}
//====================================================================================
// Loop
//====================================================================================
void loop()
{
tft.setTextColor(fg, bg);
//----------------------------------------------------------------------------
// Anti-aliased font test
String test1 = "Hello World";
// Load a smooth font from SPIFFS
tft.loadFont("Final-Frontier-28");
tft.setRotation(0);
// Show all characters on screen with 2 second (2000ms) delay between screens
tft.showFont(2000); // Note: This function moves the cursor position!
tft.fillScreen(bg);
tft.setCursor(0,0);
tft.println(test1);
// Remove font parameters from memory to recover RAM
tft.unloadFont();
delay(2000);
//----------------------------------------------------------------------------
// We can have any random mix of characters in the font
String test2 = "仝倀"; // Unicodes 0x4EDD, 0x5000
tft.loadFont("Unicode-Test-72");
tft.setRotation(1);
// Show all characters on screen with 2 second (2000ms) delay between screens
tft.showFont(2000); // Note: This function moves the cursor position!
tft.fillScreen(bg);
tft.setCursor(0,0);
tft.setTextColor(TFT_CYAN, bg);
tft.println(test2);
tft.setTextColor(TFT_YELLOW, bg);
tft.println("12:00pm");
tft.setTextColor(TFT_MAGENTA, bg);
tft.println("1000Ω");
// Remove font parameters from memory to recover RAM
tft.unloadFont();
delay(2000);
//----------------------------------------------------------------------------
// Latin and Hiragana font mix
String test3 = "こんにちは";
tft.loadFont("Latin-Hiragana-24");
tft.setRotation(0);
// Show all characters on screen with 2 second (2000ms) delay between screens
tft.showFont(2000); // Note: This function moves the cursor position!
tft.fillScreen(bg);
tft.setTextColor(TFT_GREEN, bg);
tft.setCursor(0,0);
tft.println("Konnichiwa");
tft.println(test3);
tft.println();
tft.println("Sayonara");
tft.println("さようなら"); // Sayonara
// Remove font parameters from memory to recover RAM
tft.unloadFont();
delay(2000);
//
//----------------------------------------------------------------------------
}
//====================================================================================
@@ -0,0 +1,194 @@
/*
This tests the alpha blending function that is used with the antialiased
fonts:
Alpha = 0 = 100% background, alpha = 255 = 100% foreground colour
blendedColor = tft.alphaBlend(alpha, fg_color, bg_color);
The alphaBlend() function operates on 16 bit colours only
A test is included where the colours are mapped to 8 bits after blending
Information on alpha blending is here
https://en.wikipedia.org/wiki/Alpha_compositing
Example for library:
https://github.com/Bodmer/TFT_eSPI
The sketch has been tested on a 320x240 ILI9341 based TFT, it
could be adapted for other screen sizes.
Created by Bodmer 10/2/18
#########################################################################
###### DON'T FORGET TO UPDATE THE User_Setup.h FILE IN THE LIBRARY ######
#########################################################################
*/
#include <TFT_eSPI.h> // Include the graphics library
TFT_eSPI tft = TFT_eSPI(); // Create object "tft"
// -------------------------------------------------------------------------
// Setup
// -------------------------------------------------------------------------
void setup(void) {
tft.init();
tft.setRotation(0);
tft.fillScreen(TFT_DARKGREY);
}
// -------------------------------------------------------------------------
// Main loop
// -------------------------------------------------------------------------
void loop()
{
// 16 bit colours (5 bits red, 6 bits green, 5 bits blue)
// Blend from white to full spectrum
for (int a = 0; a < 256; a+=2) // Alpha 0 = 100% background, alpha 255 = 100% foreground
{
for (int c = 0; c < 192; c++) tft.drawPixel(c, a/2, tft.alphaBlend(a, rainbow(c), TFT_WHITE));
}
// Blend from full spectrum to black
for (int a = 255; a > 2; a-=2)
{
for (int c = 0; c < 192; c++) tft.drawPixel(c, 128 + (255-a)/2, tft.alphaBlend(a, rainbow(c), TFT_BLACK));
}
// Blend from white to black (32 grey levels)
for (uint16_t a = 0; a < 255; a++) // Alpha 0 = 100% background, alpha 255 = 100% foreground
{
tft.drawFastHLine(192, a, 12, tft.alphaBlend(a, TFT_BLACK, TFT_WHITE));
tft.drawFastHLine(204, a, 12, tft.alphaBlend(a, TFT_BLACK, TFT_RED));
tft.drawFastHLine(216, a, 12, tft.alphaBlend(a, TFT_BLACK, TFT_GREEN));
tft.drawFastHLine(228, a, 12, tft.alphaBlend(a, TFT_BLACK, TFT_BLUE));
}
delay(4000);
// Blend from white to colour (32 grey levels)
for (uint16_t a = 0; a < 255; a++) // Alpha 0 = 100% background, alpha 255 = 100% foreground
{
//tft.drawFastHLine(192, a, 12, tft.alphaBlend(a, TFT_BLACK, TFT_WHITE));
tft.drawFastHLine(204, a, 12, tft.alphaBlend(a, TFT_RED, TFT_WHITE));
tft.drawFastHLine(216, a, 12, tft.alphaBlend(a, TFT_GREEN, TFT_WHITE));
tft.drawFastHLine(228, a, 12, tft.alphaBlend(a, TFT_BLUE, TFT_WHITE));
}
delay(4000);
//*
// Decrease to 8 bit colour (3 bits red, 3 bits green, 2 bits blue)
// Blend from white to full spectrum
for (int a = 0; a < 256; a+=2) // Alpha 0 = 100% background, alpha 255 = 100% foreground
{
// Convert blended 16 bit colour to 8 bits to reduce colour resolution, then map back to 16 bits for displaying
for (int c = 0; c < 192; c++) tft.drawPixel(c, a/2, tft.color8to16(tft.color16to8(tft.alphaBlend(a, rainbow(c), 0xFFFF))));
}
// Blend from full spectrum to black
for (int a = 255; a > 2; a-=2)
{
// Convert blended 16 bit colour to 8 bits to reduce colour resolution, then map back to 16 bits for displaying
for (int c = 0; c < 192; c++) tft.drawPixel(c, 128 + (255-a)/2, tft.color8to16(tft.color16to8(tft.alphaBlend(a, rainbow(c), 0))));
}
// Blend from white to black (4 grey levels - it will draw 4 more with a blue tinge due to lower blue bit count)
// Blend from black to a primary colour
for (uint16_t a = 0; a < 255; a++) // Alpha 0 = 100% background, alpha 255 = 100% foreground
{
tft.drawFastHLine(192, a, 12, tft.color8to16(tft.color16to8(tft.alphaBlend(a, TFT_BLACK, TFT_WHITE))));
tft.drawFastHLine(204, a, 12, tft.color8to16(tft.color16to8(tft.alphaBlend(a, TFT_BLACK, TFT_RED))));
tft.drawFastHLine(216, a, 12, tft.color8to16(tft.color16to8(tft.alphaBlend(a, TFT_BLACK, TFT_GREEN))));
tft.drawFastHLine(228, a, 12, tft.color8to16(tft.color16to8(tft.alphaBlend(a, TFT_BLACK, TFT_BLUE))));
}
delay(4000);
//*/
/*
// 16 bit colours (5 bits red, 6 bits green, 5 bits blue)
for (int a = 0; a < 256; a+=2) // Alpha 0 = 100% background, alpha 255 = 100% foreground
{
for (int c = 0; c < 192; c++) tft.drawPixel(c, a/2, tft.alphaBlend(a, rainbow(c), TFT_CYAN));
}
// Blend from full spectrum to cyan
for (int a = 255; a > 2; a-=2)
{
for (int c = 0; c < 192; c++) tft.drawPixel(c, 128 + (255-a)/2, tft.alphaBlend(a, rainbow(c), TFT_YELLOW));
}
//*/
/*
// Blend other colour transitions for test purposes
for (uint16_t a = 0; a < 255; a++) // Alpha 0 = 100% background, alpha 255 = 100% foreground
{
tft.drawFastHLine(192, a, 12, tft.alphaBlend(a, TFT_WHITE, TFT_WHITE)); // Should show as solid white
tft.drawFastHLine(204, a, 12, tft.alphaBlend(a, TFT_BLACK, TFT_BLACK)); // Should show as solid black
tft.drawFastHLine(216, a, 12, tft.alphaBlend(a, TFT_YELLOW, TFT_CYAN)); // Brightness should be fairly even
tft.drawFastHLine(228, a, 12, tft.alphaBlend(a, TFT_CYAN, TFT_MAGENTA));// Brightness should be fairly even
}
delay(4000);
//*/
}
// #########################################################################
// Return a 16 bit rainbow colour
// #########################################################################
unsigned int rainbow(byte value)
{
// If 'value' is in the range 0-159 it is converted to a spectrum colour
// from 0 = red through to 127 = blue to 159 = violet
// Extending the range to 0-191 adds a further violet to red band
value = value%192;
byte red = 0; // Red is the top 5 bits of a 16 bit colour value
byte green = 0; // Green is the middle 6 bits, but only top 5 bits used here
byte blue = 0; // Blue is the bottom 5 bits
byte sector = value >> 5;
byte amplit = value & 0x1F;
switch (sector)
{
case 0:
red = 0x1F;
green = amplit; // Green ramps up
blue = 0;
break;
case 1:
red = 0x1F - amplit; // Red ramps down
green = 0x1F;
blue = 0;
break;
case 2:
red = 0;
green = 0x1F;
blue = amplit; // Blue ramps up
break;
case 3:
red = 0;
green = 0x1F - amplit; // Green ramps down
blue = 0x1F;
break;
case 4:
red = amplit; // Red ramps up
green = 0;
blue = 0x1F;
break;
case 5:
red = 0x1F;
green = 0;
blue = 0x1F - amplit; // Blue ramps down
break;
}
return red << 11 | green << 6 | blue;
}