Una de las características de los dispositivos que se usan para IoT es la limitación de recursos que tiene. No tienen un sistema operativo disponible y todo lo que queramos que haga hay que programarlo prácticamente de cero. Eso incluye cosas tan peregrinas como definir las fuentes de texto que se utilizarán para escribir en pantalla. Esto es algo que, generalmente, damos por hecho en cualquier otro sistema que programamos, pero que ofrece la oportunidad de ver un poco mejor cómo funciona la informática por dentro.
En principio las pantallas en las que querramos utilizar estas fuentes (en las que queramos escribir algo) son bastante pequeñas, la que vemos en la siguiente imagen, por ejemplo, es de 128×64 pixels (SSD1306):
¿Cómo hacemos para escribir un caracter en una pantalla de estas características? Quitando los comandos propios de inicialización, limpieza y demás, lo único que hacemos es indicar qué pixel queremos que se ilumine y cual no (si hay interés ya desarrollaremos un poco más en profundidad los comandos que se le mandan) y, para ahorrar ciclos y ancho de banda, hay que enviarle los datos en bytes completos (8 bits) y cada bit representa un pixel que se ilumina o no.
Hay software ya desarrollado para convertir fuentes ttf en código c que se puede usar con ciertas librerías, pero vamos a escoger el camino difícil, supongamos que queremos utilizar los primeros 95 caracteres ASCII empezando por el espacio. Serían estos:
Quitando el 127 que no nos interesa porque no es imprimible, una vez decididos los caracteres que queremos imprimir tenemos que decidir el tamaño que queremos utilizar. En este caso queremos que tengan una altura de 8 pixels y, como van a ser de ancho fijo, tendrán una anchura de 8 pixels igualmente. Un carácter se representaría entonces de esta manera:
Y su representación en bits de la primera fila sería 00011000 o lo que es lo mismo 0x18 en hexadecimal. Esta letra, traducida a bytes quedaría: 0x18, 0x3C, 0x66, 0x66, 0x7E, 0x66,0x66,0x00 y con esta información ya sabríamos qué bytes mandar a la pantalla cuando tuviésemos que escribir la letra.
Hacer este proceso para cada letra sería muy pesado, más teniendo en cuenta que son 95 caracteres, pero como nosotros somos programadores os voy a contar un método para extraer estos datos de una mejor manera. Vamos a generar una imagen y vamos a pintar allí las letras que queremos. Para ello abriremos el programa gráfico favorito que tengamos (el mío es gimp) y crearemos una imagen justo del tamaño para que quepan todas nuestras letras (ni más ni menos). En este caso son 95*8 = 760 y 8 de altura, con el fondo negro.
Una vez creada esa imagen, creamos un texto en la fuente que queramos y escribimos los caracteres que queremos:
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~Ajustamos para que quepan todos (quitamos alisado y hints varios) y quedará algo así:
Luego cambiamos el tipo de imagen a indexada con 2 colores (solo blanco y negro) y lo exportamos a formato raw:
Esto lo que hace es generarnos un archivo .data que contiene 1 byte por pixel que, como hemos indexado solo contendrá ceros o unos… Y ahora toca programar.
El objetivo es obtener una ristra de bytes juntando los ceros y unos agrupándolos de 8 en ocho. Luego veremos cómo usarlos. Lo más sencillo es hacer un scrip en python, así que escribimos algo así:
def convert_to_hex(byte_data):
# Agrupamos los datos de 8 en 8
byte_data = [byte_data[i:i+8] for i in range(0, len(byte_data), 8)]
# Convertimos cada byte a su representación en hexadecimal
resu = []
for i in range(len(byte_data)):
byte = sum([byte_data[i][j] << j for j in range(8)])
# Añadimos el valor en hexadecimal a la lista resu
resu.append(f'0x{byte:02X}')
return resu
Y ahora solo nos queda leer de un archivo y escribirlo en otro como código c:
def read_binary_file(file_path):
with open(file_path, 'rb') as file:
return file.read()
def write_hex_file(hex_data, output_path):
with open(output_path, 'w') as file:
# Separamos los valores por comas y ponemos un salto de linea cada 16 valores
file.write ('static const char font_8x8[] = {\n\t')
slice_size = 16
for i in range(0, len(hex_data), slice_size):
file.write(', '.join(hex_data[i:i+slice_size]))
file.write(',\n\t')
file.write('};')
Lo juntamos todo en una función principal pasándole como parámetro el archivo de entrada y el de salida:
def main(input_file, output_file):
binary_data = read_binary_file(input_file)
hex_data = convert_to_hex(binary_data)
write_hex_file(hex_data, output_file)
Y ya podemos ejecutarlo, el resultado sería algo así:
static const char font_8x8[] = {
0x00, 0x0C, 0x36, 0x36, 0x0C, 0x00, 0x1C, 0x06, 0x18, 0x06, 0x00, 0x00, 0x00, 0x00, 0x00, 0x60,
0x3E, 0x0C, 0x1E, 0x1E, 0x38, 0x3F, 0x1C, 0x3F, 0x1E, 0x1E, 0x00, 0x00, 0x18, 0x00, 0x06, 0x1E,
0x3E, 0x0C, 0x3F, 0x3C, 0x1F, 0x7F, 0x7F, 0x3C, 0x33, 0x1E, 0x78, 0x67, 0x0F, 0x63, 0x63, 0x1C,
0x3F, 0x1E, 0x3F, 0x1E, 0x3F, 0x33, 0x33, 0x63, 0x63, 0x33, 0x7F, 0x1E, 0x03, 0x1E, 0x08, 0x00,
0x0C, 0x00, 0x07, 0x00, 0x38, 0x00, 0x1C, 0x00, 0x07, 0x0C, 0x30, 0x07, 0x0E, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x38, 0x18, 0x07, 0x6E, 0x00,
0x1E, 0x36, 0x36, 0x3E, 0x63, 0x36, 0x06, 0x0C, 0x0C, 0x66, 0x0C, 0x00, 0x00, 0x00, 0x30, 0x63,
0x0E, 0x33, 0x33, 0x3C, 0x03, 0x06, 0x33, 0x33, 0x33, 0x0C, 0x0C, 0x0C, 0x00, 0x0C, 0x33, 0x63,
0x1E, 0x66, 0x66, 0x36, 0x46, 0x46, 0x66, 0x33, 0x0C, 0x30, 0x66, 0x06, 0x77, 0x67, 0x36, 0x66,
0x33, 0x66, 0x33, 0x2D, 0x33, 0x33, 0x63, 0x63, 0x33, 0x63, 0x06, 0x06, 0x18, 0x1C, 0x00, 0x0C,
0x00, 0x06, 0x00, 0x30, 0x00, 0x36, 0x00, 0x06, 0x00, 0x00, 0x06, 0x0C, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x0C, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0C, 0x18, 0x0C, 0x3B, 0x00, 0x1E,
0x36, 0x7F, 0x03, 0x33, 0x1C, 0x03, 0x06, 0x18, 0x3C, 0x0C, 0x00, 0x00, 0x00, 0x18, 0x73, 0x0C,
0x30, 0x30, 0x36, 0x1F, 0x03, 0x30, 0x33, 0x33, 0x0C, 0x0C, 0x06, 0x3F, 0x18, 0x30, 0x7B, 0x33,
0x66, 0x03, 0x66, 0x16, 0x16, 0x03, 0x33, 0x0C, 0x30, 0x36, 0x06, 0x7F, 0x6F, 0x63, 0x66, 0x33,
0x66, 0x07, 0x0C, 0x33, 0x33, 0x63, 0x36, 0x33, 0x31, 0x06, 0x0C, 0x18, 0x36, 0x00, 0x18, 0x1E,
0x06, 0x1E, 0x30, 0x1E, 0x06, 0x6E, 0x36, 0x0E, 0x30, 0x66, 0x0C, 0x33, 0x1F, 0x1E, 0x3B, 0x6E,
0x3B, 0x3E, 0x3E, 0x33, 0x33, 0x63, 0x63, 0x33, 0x3F, 0x0C, 0x18, 0x0C, 0x00, 0x00, 0x0C, 0x00,
0x36, 0x1E, 0x18, 0x6E, 0x00, 0x06, 0x18, 0xFF, 0x3F, 0x00, 0x3F, 0x00, 0x0C, 0x7B, 0x0C, 0x1C,
0x1C, 0x33, 0x30, 0x1F, 0x18, 0x1E, 0x3E, 0x00, 0x00, 0x03, 0x00, 0x30, 0x18, 0x7B, 0x33, 0x3E,
0x03, 0x66, 0x1E, 0x1E, 0x03, 0x3F, 0x0C, 0x30, 0x1E, 0x06, 0x7F, 0x7B, 0x63, 0x3E, 0x33, 0x3E,
0x0E, 0x0C, 0x33, 0x33, 0x6B, 0x1C, 0x1E, 0x18, 0x06, 0x18, 0x18, 0x63, 0x00, 0x00, 0x30, 0x3E,
0x33, 0x3E, 0x33, 0x0F, 0x33, 0x6E, 0x0C, 0x30, 0x36, 0x0C, 0x7F, 0x33, 0x33, 0x66, 0x33, 0x6E,
0x03, 0x0C, 0x33, 0x33, 0x6B, 0x36, 0x33, 0x19, 0x07, 0x00, 0x38, 0x00, 0x00, 0x0C, 0x00, 0x7F,
0x30, 0x0C, 0x3B, 0x00, 0x06, 0x18, 0x3C, 0x0C, 0x00, 0x00, 0x00, 0x06, 0x6F, 0x0C, 0x06, 0x30,
0x7F, 0x30, 0x33, 0x0C, 0x33, 0x30, 0x00, 0x0C, 0x06, 0x00, 0x18, 0x0C, 0x7B, 0x3F, 0x66, 0x03,
0x66, 0x16, 0x16, 0x73, 0x33, 0x0C, 0x33, 0x36, 0x46, 0x6B, 0x73, 0x63, 0x06, 0x3B, 0x36, 0x38,
0x0C, 0x33, 0x33, 0x7F, 0x1C, 0x0C, 0x4C, 0x06, 0x30, 0x18, 0x00, 0x00, 0x00, 0x3E, 0x66, 0x03,
0x33, 0x3F, 0x06, 0x33, 0x66, 0x0C, 0x30, 0x1E, 0x0C, 0x7F, 0x33, 0x33, 0x66, 0x33, 0x66, 0x1E,
0x0C, 0x33, 0x33, 0x7F, 0x1C, 0x33, 0x0C, 0x0C, 0x18, 0x0C, 0x00, 0x00, 0x00, 0x00, 0x36, 0x1F,
0x66, 0x33, 0x00, 0x0C, 0x0C, 0x66, 0x0C, 0x0C, 0x00, 0x0C, 0x03, 0x67, 0x0C, 0x33, 0x33, 0x30,
0x33, 0x33, 0x0C, 0x33, 0x18, 0x0C, 0x0C, 0x0C, 0x3F, 0x0C, 0x00, 0x03, 0x33, 0x66, 0x66, 0x36,
0x46, 0x06, 0x66, 0x33, 0x0C, 0x33, 0x66, 0x66, 0x63, 0x63, 0x36, 0x06, 0x1E, 0x66, 0x33, 0x0C,
0x33, 0x1E, 0x77, 0x36, 0x0C, 0x66, 0x06, 0x60, 0x18, 0x00, 0x00, 0x00, 0x33, 0x66, 0x33, 0x33,
0x03, 0x06, 0x3E, 0x66, 0x0C, 0x33, 0x36, 0x0C, 0x6B, 0x33, 0x33, 0x3E, 0x3E, 0x06, 0x30, 0x2C,
0x33, 0x1E, 0x7F, 0x36, 0x3E, 0x26, 0x0C, 0x18, 0x0C, 0x00, 0x00, 0x0C, 0x00, 0x36, 0x0C, 0x63,
0x6E, 0x00, 0x18, 0x06, 0x00, 0x00, 0x0C, 0x00, 0x0C, 0x01, 0x3E, 0x3F, 0x3F, 0x1E, 0x78, 0x1E,
0x1E, 0x0C, 0x1E, 0x0E, 0x0C, 0x06, 0x18, 0x00, 0x06, 0x0C, 0x1E, 0x33, 0x3F, 0x3C, 0x1F, 0x7F,
0x0F, 0x7C, 0x33, 0x1E, 0x1E, 0x67, 0x7F, 0x63, 0x63, 0x1C, 0x0F, 0x38, 0x67, 0x1E, 0x1E, 0x3F,
0x0C, 0x63, 0x63, 0x1E, 0x7F, 0x1E, 0x40, 0x1E, 0x00, 0x00, 0x00, 0x6E, 0x3B, 0x1E, 0x6E, 0x1E,
0x0F, 0x30, 0x67, 0x1E, 0x33, 0x67, 0x1E, 0x63, 0x33, 0x1E, 0x06, 0x30, 0x0F, 0x1F, 0x18, 0x6E,
0x0C, 0x36, 0x63, 0x30, 0x3F, 0x38, 0x18, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x06, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x1F, 0x00, 0x00, 0x1E, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0x78, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x1F, 0x00, 0x00, 0x00, 0x00, 0x00,
};
Y ya estaría… ¿Cómo usaríamos esto en nuestra aplicación IoT? Pues básicamente incluiríamos la cabecera font_8x8.h y cuando necesitásemos localizar un carácter ASCII simplemente tendremos que restarle 32 al caracter, multiplicarlo por el número de caracteres de nuestra fuente (95) y ese sería el primer byte del caracter dentro del array. Como vamos a necesitar todas las líneas del caracter podemos hacer una función que las recupere de esta manera:
char getcharslicefrom8x8font(char c, int rowInChar)
{
return font_8x8[(c - 32) + (rowInChar)*95];
}
Para escribir una cadena completa en una línea habría que localizar la posición inicial de la línea, recuperar todos los bytes de cada caracter que queramos escribir y mandarlos a esa línea de la pantalla (así explicado simplificadamente).
Tenéis todo el código de la conversión de bitmap a c en este repositorio: https://github.com/yoprogramo/font_to_c
Happy coding!
UPDATE: Ya se puede encontrar la fuente así creada en los repositorios de un par de proyectos muy interesantes: https://github.com/fhoedemakers/pico-infonesPlus/ y https://github.com/fhoedemakers/pico-smsplus