内蔵フォントではないフォントを LovyanGFX で使うには、どうしたらいいでしょうか?

今回は、TrueType フォントから、ビットマップフォトを作って LovyanGFX で使う方法を試してみます。

以下は、ASCIIフォント用の作業です。日本語フォントについては、23日目記事
「LovyanGFXで画面描画(11):内蔵以外の日本語フォントを使用して高速道路っぽい表示を作る」
https://qiita.com/nanbuwks/items/6dff294da9f7a5111440
を参照ください

フォントファイルを用意

1001freefonts から、SEGMENT 16C フォントを使ってみました。

https://www.1001freefonts.com/segment16c.font

ダウンロードして、解凍します。

$ unzip segment16c.zip 
$ ls -og
合計 852
-rw-rw-r-- 1   7230 12月 29  2017  Segment16.txt
-rw-rw-r-- 1 202240 12月 29  2017 'Segment16C Bold Italic.ttf'
-rw-rw-r-- 1 188504 12月 29  2017 'Segment16C Bold.ttf'
-rw-rw-r-- 1 200780 12月 29  2017 'Segment16C Italic.ttf'
-rw-rw-r-- 1 191364 12月 29  2017 'Segment16C Regular.ttf'
-rw-rw-r-- 1  69200 12月 26  2017  Segment16C.jpg

fontconvert

Adafruit GFX Library
https://github.com/adafruit/Adafruit-GFX-Library/

の fontcovnert ツールを使ってみます。

先んじて freetype のライブラリをインストールしておきます。

$ sudo apt install libfreetype6-dev

次に Adafruit GFX Library をクローン

$ git clone https://github.com/adafruit/Adafruit-GFX-Library.git
$ cd Adafruit-GFX-Library/fontconvert
$ ls -og
合計 32
-rw-rw-r-- 1   236 12月 27 00:52 Makefile
-rw-rw-r-- 1  4487 12月 27 00:52 bdf2adafruit.py
-rw-rw-r-- 1 10270 12月 27 00:52 fontconvert.c
-rw-rw-r-- 1  3831 12月 27 00:52 fontconvert_win.md
-rwxrwxr-x 1  1221 12月 27 00:52 makefonts.sh

Makefile があるのでこれを使います。

$ make clean
$ make
$ ls -og
合計 48
-rw-rw-r-- 1   236 12月 27 00:52 Makefile
-rw-rw-r-- 1  4487 12月 27 00:52 bdf2adafruit.py
-rwxrwxr-x 1 14472 12月 27 00:53 fontconvert
-rw-rw-r-- 1 10270 12月 27 00:52 fontconvert.c
-rw-rw-r-- 1  3831 12月 27 00:52 fontconvert_win.md
-rwxrwxr-x 1  1221 12月 27 00:52 makefonts.sh

fontconvert ができているので試してみます。

$ ./fontconvert ../../"Segment16C Bold Italic.ttf" 24 > ../../Segment16C_Bold_Italic_24P.h

できた Segment16C_Bold_Italic_24P.h をスケッチと同じフォルダに移します。

スケッチ

Segment16C_Bold_Italic_24P.h の中身は以下のようになっていました。

const uint8_t Segment16C_Bold_Italic24pt7bBitmaps[] PROGMEM = {
  0x00, 0x00, 0x03, 0xF8, 0x00, 0x0F, 0xE0, 0x00, 0x5F, 0x00, 0x03, 0x80,
  0x00, 0x1E, 0x20, 0x00, 0x71, 0x80, 0x01, 0xCE, 0x00, 0x07, 0x30, 0x00,
  0x1D, 0xC0, 0x00, 0xF7, 0x00, 0x03, 0xDC, 0x00, 0x0F, 0xE0, 0x00, 0x3B,
.
.
.
  0x2F, 0xB0, 0x00, 0x7F, 0x00, 0x00, 0xF8, 0x00 };

const GFXglyph Segment16C_Bold_Italic24pt7bGlyphs[] PROGMEM = {
  {     0,   1,   1,  26,    0,    0 },   // 0x20 ' '
  {     1,  22,  35,  26,    2,  -34 },   // 0x21 '!'
  {    98,  22,  15,  26,    3,  -32 },   // 0x22 '"'
.
.
.
  {  6399,  22,  19,  26,    3,  -34 } }; // 0x7E '~'

const GFXfont Segment16C_Bold_Italic24pt7b PROGMEM = {
  (uint8_t  *)Segment16C_Bold_Italic24pt7bBitmaps,
  (GFXglyph *)Segment16C_Bold_Italic24pt7bGlyphs,
  0x20, 0x7E, 47 };

このうちの2箇所

const GFXfont Segment16C_Bold_Italic24pt7b PROGMEM = {

const GFXfont Segment16C_Bold_Italic24pt7b PROGMEM = {

を

const ::lgfx::GFXfont Segment16C_Bold_Italic24pt7b PROGMEM = {

const ::lgfx::GFXfont Segment16C_Bold_Italic24pt7b PROGMEM = {

と書き換えます。

この `` をスケッチにインクルードすると使えるようになります。
今回作成したスケッチは以下のとおりです。

#define LGFX_USE_V1
#include "arduinolib_for_PC.hpp"
#include <LovyanGFX.hpp>
#include <LGFX_AUTODETECT.hpp>
#include "Segment16C_Bold_Italic_24P.h"

#include <time.h> // for PC
static LGFX display ( 256,256,1 );
static LGFX_Sprite sprite(&display);
extern const lgfx::GFXfont Segment16C_Bold_Italic24pt7b;
char str[]=  "12:45 ABC Brown Fox";

void setup() {
  display.init();
  display.setSwapBytes(true); 
  sprite.createSprite(256,256);
}

void loop(){
  struct tm *newtime;
  time_t ltime;
  time(&ltime);
  newtime = localtime(&ltime);
  sprite.clear();
  sprite.fillRect(0,0,256,256,display.color888(0,40,0));
  sprite.setTextSize(1);
  sprite.setFont(&Segment16C_Bold_Italic24pt7b);
  sprite.setTextColor(display.color888(100,255,150));
  sprite.setCursor(20,10);
  sprite.printf("%02d:%02d:%02d\n",
        newtime->tm_hour, newtime->tm_min, newtime->tm_sec);
  sprite.print("TheQuickBrownFoxJumpsOverTheLazyDog");
  sprite.pushSprite(0,0);
  delay(1000);
}

フォントがかっこいいのでデジタル時計にしてみました。

おまけ u8g 形式で試してみた結果

今回は GFX 形式のフォントデータを使いましたが、u8g 形式のフォントだとどうかな?
bdf2u8g を使って試してみましたが、こちらは全然だめでした。
https://github.com/olikraus/u8glib/wiki/bdf2u8g

$ otf2bdf -p 12 -r 72  Segment16C\ Bold\ Italic.ttf -o Segment16C_Bold_Italic.bdf

$ cc bdf2u8g.c  -o bdf2u8g
$ ./bdf2u8g Segment16C_Bold_Italic.bdf Segment16C_Bold_Italic Segment16C_Bold_Italic.c

できた Segment16C_Bold_Italic.c の中身

/*
  Fontname: -FreeType-Segment16C-Bold-I-Normal--12-120-72-72-P-51-ISO10646-1
  Copyright: -FreeType-Segment16C-Bold-I-Normal--12-120-72-72-P-51-ISO10646-1
  Capital A Height: 9, '1' Height: 8
  Calculated Max Values w= 6 h= 9 x= 5 y= 8 dx= 7 dy= 0 ascent= 9 len= 9
  Font Bounding box     w= 8 h=12 x=-1 y=-2
  Calculated Min Values           x=-1 y= 0 dx= 0 dy= 0
  Pure Font   ascent = 9 descent= 0
  X Font      ascent = 9 descent= 0
  Max Font    ascent = 9 descent= 0
*/
#include "u8g.h"
const u8g_fntpgm_uint8_t Segment16C_Bold_Italic[2604] U8G_FONT_SECTION("Segment16C_Bold_Italic") = {
  0,8,12,255,254,9,1,187,3,117,32,255,0,9,0,9,
  0,0,0,0,7,0,0,5,9,9,7,1,0,24,32,48,
  48,0,0,0,0,192,5,4,4,7,1,5,128,136,136,136,
  5,8,8,7,1,1,40,40,40,208,40,40,72,240,5,9,
  9,7,1,0,248,160,160,160,208,40,40,72,240,5,9,9,
  7,1,0,224,160,176,176,208,104,168,200,48,5,9,9,7,
  0,0,48,48,48,48,104,144,152,176,224,1,3,3,7,3,
  6,128,128,128,1,6,6,7,4,2,128,128,0,0,128,128,
  2,7,7,7,1,1,64,64,64,0,64,128,128,4,7,7,
  7,1,1,96,112,112,208,96,208,224,4,7,7,7,1,2,
  32,32,32,208,32,32,64,2,4,4,7,1,1,192,64,128,
  128,4,1,1,7,1,4,208,1,1,1,0,255,1,128,4,
  6,6,7,1,2,16,16,0,64,128,128,6,9,9,7,0,
  0,124,68,76,76,0,164,196,196,248,2,8,8,7,4,0,
.
.
.

これを書き換えてみましたが・・・

こちらはあまり追求してません。

LovyanGFXで画面描画(10):内蔵以外のフォントを使用してデジタル時計を作る

フォントファイルを用意

fontconvert

スケッチ

おまけ u8g 形式で試してみた結果