Шрифты. Больше хороших и разных

Работал я с отладочной платкой Open103V, у нее есть TFT экранчик 3.2" с тачскрином. Встал вопрос выводить красивые картинки и надписи. Картинки понятно откуда брать — есть microSD карточка, грузи-выводи-жди ответного гудка. А вот со шрифтами вышла некоторая заминочка…

По классике, даже в примерах SPL, есть вариант растрового шрифта заданный просто битовым массивом:

const uint16_t ASCII16x24_Table [] = {
/** 
  * @brief        Space ' '  
  */ 
         0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
         0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
         0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
/** 
  * @brief        '!'  
  */ 
         0x0000, 0x0180, 0x0180, 0x0180, 0x0180, 0x0180, 0x0180, 0x0180,
         0x0180, 0x0180, 0x0180, 0x0180, 0x0180, 0x0180, 0x0000, 0x0000,
         0x0180, 0x0180, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
/
.....

С одной стороны, достаточно компактно. С другой стороны — черно-белый, один бит на пиксель. А значит — никакого сглаживания. Ну и понятно, найти русский шрифт — тоже задача не из простых.

И тут я подумал: раз уж все-равно есть подсистема работы с битмапами, почему бы туда не засунуть нужный мне шрифт?

Гуглил, нашел такую интересную программку:
UBFG — Ultimate Bitmap Font Generator



В принципе из скриншота уже понятно ее предназначение: она раскладывает максимально плотно символы в битмапе. Мало того, она даже осуществляет слияние символов (какие получится). Например, английской букве «A» и русской букве «А» будет соответствовать один и тот же участок. Ну или «е» и «ё».

Параллельно с битмапом генерируется и массив координат символов в таком формате:

Arial 9pt -- font name and size
Char  X pos   Y pos   Width   Height   Xoffset  Yoffset  Orig W   Orig H
32    0       0       0       0        3        14       3        14
97    90      36      5       7        1        4        7        14
98    0       41      5       9        1        2        7        14

Я сдеру картинку с пояснениями с сайта, за подробностями лучше к оригиналу:


путем нехитрых преобразований через awk этот файл превращается в заголовочный для включения в проект.

Это исходный файл:

Arial 37pt
32	0	0	0	0	14	56	14	56	
97	0	183	23	27	2	18	27	56	
......
169	218	46	36	36	0	9	36	56	
174	292	44	36	36	0	9	36	56	
Arial 16pt
32	0	0	0	0	6	24	6	24	
97	310	268	10	11	1	8	12	24	
....
169	79	236	15	15	0	4	15	24	
174	225	237	15	15	0	4	15	24	

Это скрипт для awk

/Arial/ {
	if (first == 1) {
		first = 0;
	} else {
		print ("},"); 
		print(num_letters, "},");
	}

	num_letters = 0;

	print ("{ //", $0); 
	print("2101, {");
	next;
}

/^$/ {
	next;
}

{ 
	print( "{", $1, ",", $2, ",", $3, "," $4,",", $5, ",",$6,",", $7, ",",$8,"}," ); 
	num_letters++;
}

BEGIN {
	first = 1;
}

END {
	print("},");
	print(num_letters, "},");
}

Это то, что получилось (myfont.h):

{ // Arial 37pt
2101, { // это номер битмапа, потом поменять вручную
{ 32 , 0 , 0 ,0 , 0 , 14 , 56 , 14 },
{ 97 , 0 , 183 ,23 , 27 , 2 , 18 , 27 },
....

{ 169 , 218 , 46 ,36 , 36 , 0 , 9 , 36 },
{ 174 , 292 , 44 ,36 , 36 , 0 , 9 , 36 },
},
169 }, // это количество символов в шрифте
{ // Arial 16pt
2101, {
{ 32 , 0 , 0 ,0 , 0 , 6 , 24 , 6 },
{ 97 , 310 , 268 ,10 , 11 , 1 , 8 , 12 },
....
{ 169 , 79 , 236 ,15 , 15 , 0 , 4 , 15 },
{ 174 , 225 , 237 ,15 , 15 , 0 , 4 , 15 },
},
169 },

Теперь подключаем все это в проекте:

typedef struct {
	uint8_t ch;
	uint8_t posX;
	uint16_t posY;
	uint8_t W,H;
	uint8_t offsX,offsY;
	uint8_t rW,rH;
} t_FontLetter;

typedef struct {
	uint16_t img;
	t_FontLetter chars[250];
	uint8_t num_char;
} t_FontDescr;

#define NUM_FONTS 2

const t_FontDescr FontArr[NUM_FONTS]= {
#include "myfont.h"
};

Особо не изгалялся по поводу супероптимальной структуры — у меня для каждого шрифта резервируется информация для 250 символов. С учетом того, что эта структура хранится во flash, потери не критичны.

Ну и теперь как это все использовать:

uint8_t BMP_DrawLetter(uint16_t X, uint16_t Y, uint8_t ch, uint8_t font,  GL_Color fColor, GL_Color bgColor) {
	uint8_t i;
	uint16_t tX,tY;

	for(i=0; i<FontArr[font].num_char; i++) { // находим в шрифте нужный символ
		if (FontArr[font].chars[i].ch == ch) {
			break;
		}
	}

	if (i<FontArr[font].num_char) {
		if (bgColor != GL_Transparent) { // если не прозрачный фон, то зарисуем все знакоместо
			for (tX=X; tX<X+FontArr[font].chars[i].rW; tX++) {
				for (tY=Y; tY<Y+FontArr[font].chars[i].rH; tY++) {
					GL_PutPixel(tX, tY, bgColor);
				}
			}
		}
		BMP_ShowFontGlyph(X+FontArr[font].chars[i].offsX, Y+FontArr[font].chars[i].offsY, FontArr[font].chars[i].posX, FontArr[font].chars[i].posY, FontArr[font].chars[i].W, FontArr[font].chars[i].H, FontArr[font].img, fColor, bgColor);
		return FontArr[font].chars[i].rW;
	}

	return 0;
}

Функция BMP_ShowFontGlyph имеет такой прототип:

void BMP_ShowFontGlyph(GL_Coordinate X, GL_Coordinate Y, GL_Coordinate gX, GL_Coordinate gY, GL_Coordinate gW, GL_Coordinate gH, uint16_t num, GL_Color fColor, GL_Color bgColor)

X,Y — координаты на экране
gX,gY — координаты глифа в битмапе
gW, gH — ширина и высота выводимого глифа
num — номер битмапа (они у меня под нумерами)
fColor, bgColor — цвета шрифта и фона, соответственно

Реализация этой функции будет зависеть от того, есть ли фреймбуффер или выводится информация прямо на экран, берется битмап с sd-карточки или из памяти. Приводить свой пока не буду, бо сильно неоптимальный, стыдно показать ))

P.S.
В принципе, таких программ есть больше одной, достаточно погуглить по «bitmaps font generator»