Last time we learned about the powerful display capabilities of the Wio Terminal and how to use its graphic functions. This time, let’s take a look at its diversity in font display and how to use it.
1. Display Statements and Usage
1) Setting Colors (Background Color, Foreground Color)
When displaying information on the Wio Terminal, you should first set the color of the text. The function format is:
setTextColor(int32_t color, int32_t bg);
Where color is the specified foreground color, and bg is the specified background color.
The statement to display yellow text on a red background is:
tft.setTextColor(TFT_YELLOW, TFT_RED);
2) Display Specifications
When displaying, you can specify the size of the font. The function format is:
setTextSize(uint8_t size);
The statement to specify a font size of 2 is:
tft.setTextSize(2);
3) Display Characters
Characters are the basic units of information display. The function format is:
drawChar(int32_t x, int32_t y, uint16_t c, uint32_t color, uint32_t bg, uint8_t size);
Where x and y are the horizontal and vertical coordinates of the display position, color and bg are the specified foreground and background colors, c is the character to display, and size is the character size.
The statement to display ‘:’ at the coordinates (80, 60) in size 2 is:
tft.drawChar(':', 80, 60, 2);
4) Display Strings
Using the string display function allows you to display multiple characters simultaneously. The function format is:
drawString(const String& string, int32_t poX, int32_t poY);
The statement to display the string “Wio Terminal!” at the coordinates (20, 120) is:
tft.drawString("Wio Terminal!", 20, 120);
5) Display Numbers
To facilitate data display, a corresponding number display function is also provided. The function format is:
drawNumber(int32_t n, int32_t x, int32_t y, int8_t size);
The statement to display the number 123 at the coordinates (100, 60) in size 4 is:
tft.drawNumber(123, 100, 60, 4);
2. Font Diversity
The Wio Terminal supports different free fonts. By including the header file “Free_Fonts.h”, you can display three types of fonts: Serif, Sans, and Mono, and support three styles: bold, italic, and oblique, with font sizes of 9pt, 12pt, 18pt, and 24pt.
The example program All_Free_Fonts_Demo.ino can be used to browse its demo effects, as shown in Figure 1.
Figure 1 Font Display Effect
For ease of use, the defined character meanings are as follows:
F = Free font library
M = Mono font
SS = Sans Serif font
S = Serif font
B = Bold font style
O = Oblique font style (Note: this is the character “O”, not the number zero.)
I = Italic font style
No = Pixel size, values can be 9, 12, 18, and 24.
There are three ways to use fonts:
Method 1
The form is:
tft.setFreeFont(&FreeSansBoldOblique24pt7b);
This combines the font library, font, style, and font size into one parameter.
Method 2
The form is:
tft.setFreeFont(FF32);
This provides the display parameters by specifying a name defined in the file Free_Fonts.h.
The file Free_Fonts.h is as follows:
#define GFXFF 1#define GLCD 0#define FONT2 2#define FONT4 4#define FONT6 6#define FONT7 7#define FONT8 8...#define FF0 NULL //ff0 reserved for GLCD#define FF1 &FreeMono9pt7b#define FF2 &FreeMono12pt7b#define FF3 &FreeMono18pt7b#define FF4 &FreeMono24pt7b...#define FF29 &FreeSansBoldOblique9pt7b#define FF30 &FreeSansBoldOblique12pt7b#define FF31 &FreeSansBoldOblique18pt7b#define FF32 &FreeSansBoldOblique24pt7b...
Method 3:
The form is:
tft.setFreeFont(FSSBO24);
Thus, the display effects obtained from methods one, two, and three are consistent.
To achieve the effect shown in Figure 2, the program is shown in Figure 3.
Figure 2 Display Effect
Figure 3 Program and Upload
3. Anti-Aliased Fonts
On the Wio Terminal, you can also smoothly display standard English characters with your favorite font.
To achieve the effect shown in Figure 4, the program is shown in Figure 5.
Figure 4 Display Effect
Figure 5 Program and Upload
4. Chinese Display
The Wio Terminal does not provide a Chinese display function. We need to supplement it ourselves.
1) Building a Font Library
To display Chinese characters, support from a Chinese font library is required. Under the hardware conditions, the font library can be written into memory to form a hard font library; of course, in cases where fewer Chinese characters are used, the character patterns can also be stored in an array to solve the problem.
Using a character pattern extraction software, you can obtain the required character patterns. PCtoLCD2002 is a convenient and practical software.
Of course, before extracting character patterns, you need to predefine the extraction format to work with the Chinese character display function. According to the design of the display function, the extraction format is shown in Figure 6.
Figure 6 Extraction Format
After setting the extraction format, you can enter the extracted content in the input bar, as shown in Figure 7.
Figure 7 Character Pattern Extraction
For ease of use, you can store the character patterns in an array for the program to read.
unsigned char Hzk[]={
0x04,0x43,0x30,0x01,0x20,0x25,0x25,0xFD,0x25,0x25,0x20,0x10,0x21,0xC6,0x00,0x00,
0x20,0x20,0x7E,0x80,0x02,0xF3,0x2A,0x22,0x2C,0xF4,0x05,0x82,0x04,0x18,0x60,0x00,
0x08,0x06,0x40,0x31,0x00,0x11,0x11,0xFF,0x11,0x11,0x00,0x7F,0x44,0x44,0x7F,0x00,
0x20,0x20,0x7E,0x80,0x00,0xF8,0x10,0x10,0x10,0xF9,0x06,0xF8,0x42,0x41,0xFE,0x00,
0x08,0x06,0x40,0x31,0x24,0x29,0x21,0xBD,0x61,0x21,0x3D,0x21,0x28,0x24,0x00,0x00,
0x20,0x20,0x7E,0x80,0x00,0x70,0x50,0x50,0x50,0x52,0x51,0xD2,0x1C,0x00,0x00,0x00,
};
2) Chinese Display Function
With the Chinese font library, you can write the corresponding display function. The design idea is to read the character patterns according to the extraction format and use the pixel drawing function to reproduce the Chinese characters in the specified color.
The corresponding Chinese display program is as follows:
Copy
void ShowCHinese(unsigned char x, unsigned char y, unsigned char no, unsigned int color)
{
unsigned char t, adder = 0, i;
unsigned char w = 0;
for(t = 0; t < 16; t++)
{
w = Hzk[32 * no + t];
for(i = 0; i < 8; i++)
{
if(w & 0x80) tft.drawPixel(x + t, y + i, color);
w = w << 1;
}
}
y = y + 8;
for(t = 0; t < 16; t++)
{
w = Hzk[32 * no + t + 16];
for(i = 0; i < 8; i++)
{
if(w & 0x80) tft.drawPixel(x + t, y + i, color);
w = w << 1;
}
}
}To achieve the display effect shown in Figure 8, the display program is as follows:
Copy
void setup() {
tft.begin();
tft.setRotation(3);
tft.fillScreen(TFT_RED); //Red background
tft.drawPixel(4, 7, TFT_BLACK); //drawing a black pixel at (4, 7)
ShowCHinese(100, 100, 0, TFT_YELLOW);
ShowCHinese(120, 100, 1, TFT_YELLOW);
ShowCHinese(140, 100, 2, TFT_YELLOW);
}
void loop() {
}
Figure 8 Chinese Character Display Effect
4) Special Effect Characters
1) Bold Characters
To achieve the display effect of bold characters, the idea is to display the same content offset in the horizontal or vertical direction. The statement to produce the effect shown in Figure 9 is:
ShowCHinese(100, 100, 0, TFT_YELLOW);
ShowCHinese(120, 100, 1, TFT_YELLOW);
ShowCHinese(140, 100, 2, TFT_YELLOW);
ShowCHinese(101, 100, 0, TFT_YELLOW);
ShowCHinese(121, 100, 1, TFT_YELLOW);
ShowCHinese(141, 100, 2, TFT_YELLOW);
Figure 9 Bold Characters
2) Shadow Effect
The idea to create a shadow effect is to display the same content offset at a 45-degree angle. The statement to produce the effect shown in Figure 10 is:
ShowCHinese(101, 100, 0, TFT_BLACK);
ShowCHinese(121, 100, 1, TFT_BLACK);
ShowCHinese(141, 100, 2, TFT_BLACK);
ShowCHinese(100, 99, 0, TFT_YELLOW);
ShowCHinese(120, 99, 1, TFT_YELLOW);
ShowCHinese(140, 99, 2, TFT_YELLOW);
Figure 10 Shadow Effect
3) Hollow Characters
The idea to create hollow characters is to first display the same content offset in four directions (up, down, left, right), and then display that content in the background color. The statement to produce the effect shown in Figure 11 is:
ShowCHinese(99, 100, 0, TFT_YELLOW);
ShowCHinese(119, 100, 1, TFT_YELLOW);
ShowCHinese(139, 100, 2, TFT_YELLOW);
ShowCHinese(101, 100, 0, TFT_YELLOW);
ShowCHinese(121, 100, 1, TFT_YELLOW);
ShowCHinese(141, 100, 2, TFT_YELLOW);
ShowCHinese(100, 99, 0, TFT_YELLOW);
ShowCHinese(120, 99, 1, TFT_YELLOW);
ShowCHinese(140, 99, 2, TFT_YELLOW);
ShowCHinese(100, 101, 0, TFT_YELLOW);
ShowCHinese(120, 101, 1, TFT_YELLOW);
ShowCHinese(140, 101, 2, TFT_YELLOW);
ShowCHinese(100, 100, 0, TFT_RED);
ShowCHinese(120, 100, 1, TFT_RED);
ShowCHinese(140, 100, 2, TFT_RED);
Figure 11 Hollow Characters
This time we explored the diversity of font display on the Wio Terminal and added Chinese character display functionality using the pixel drawing function. In the future, we will explore extensions in interface design to enhance its expressiveness and performance.