HOME | Raspberry Pi | ビジネス書籍紹介 | 2024-04-27 (Sat) Today's Access : 906 Total : 921805. Since 10 Sep. 2019

漢字フォントの表示と拡張
2023.10.16

YouTube でも紹介しています。画像をクリックすると再生できます。

今回は漢字フォントを柔軟に活用するための仕組みを考えてみました。 美咲フォントをROM化して TFT LCD に表示する方法を扱った記事はネット上に多々存在しますが、 ここではオリジナルフォントへの拡張も踏まえ、フォントを簡単に扱えるようにしています。

まずは、漢字フォントのベースとして縦横16ドットの東雲フォントを利用します。

●東雲フォント

東雲フォント(0.9.6):[public domain]
東雲フォントは、パブリックドメイン(public domain)で提供されています。
パブリックドメインとは、知的財産権が発生していない状態または消滅した状態にあり、自由に利用可能な素材です。

東雲フォントはBDF(Bitmap Distribution Format)形式のテキストファイルで提供されています。
BDF形式  BDFについて
ダウンロードした shinonome-0.9.11p1.tar.bz2 を解凍して、展開された shnmk16min.bdf をみてみます。
STARTFONT 2.1
FONT -Shinonome-Mincho-Medium-R-Normal--16-150-75-75-C-160-JISX0208.1990-0
SIZE 16 75 75
FONTBOUNDINGBOX 16 16 0 -2 ← 文字サイズ、オフセット
STARTPROPERTIES 20
FONT_ASCENT 14
FONT_DESCENT 2
DEFAULT_CHAR 8481
COPYRIGHT "Public Domain"
FONTNAME_REGISTRY ""
FOUNDRY "Shinonome" ← フォント名
FAMILY_NAME "Mincho" ← 書体名
WEIGHT_NAME "Medium"
SLANT "R"
SETWIDTH_NAME "Normal"
ADD_STYLE_NAME ""
PIXEL_SIZE 16
POINT_SIZE 150
RESOLUTION_X 75
RESOLUTION_Y 75
SPACING "C"
AVERAGE_WIDTH 160
CHARSET_REGISTRY "JISX0208.1983"
CHARSET_ENCODING "0"
_XMBDFED_INFO "Edited with xmbdfed 4.4."
ENDPROPERTIES
CHARS 6879 ← 収録漢字数
~
STARTCHAR 3c53 ← 漢字のJISコード
ENCODING 15443
SWIDTH 960 0
DWIDTH 16 0
BBX 16 16 0 -2
BITMAP ← 16進形式データをビット列に展開すると下記のようになります
0810 → □□□□■□□□□□□■□□□□
0810 → □□□□■□□□□□□■□□□□
0a10 → □□□□■□■□□□□■□□□□
7214 → □■■■□□■□□□□■□■□□
1452 → □□□■□■□□□■□■□□■□
0852 → □□□□■□□□□■□■□□■□
0a51 → □□□□■□■□□■□■□□□■
1295 → □□□■□□■□■□□■□■□■
7f14 → □■■■■■■■□□□■□■□□
0934 → □□□□■□□■□□■■□■□□
2808 → □□■□■□□□□□□□■□□□
2a08 → □□■□■□■□□□□□■□□□
2910 → □□■□■□□■□□□■□□□□
2920 → □□■□■□□■□□■□□□□□
48c0 → □■□□■□□□■■□□□□□□
0b00 → □□□□■□■■□□□□□□□□
ENDCHAR
~ ENDFONT
STARTCHAR ~ ENDCHAR の部分は収録漢字数分繰り返されます。
JIS X 0208は、日本語表記、地名、人名などで用いられる6,879図形文字を含む、主として情報交換用の2バイト符号化文字集合を規定する日本産業規格 (JIS) です。

●Unicode対応 JIS X 0208 文字コード表
ここで別に JIS X 0208 JIS非漢字 文字コード表 を用意します。
区 点 JIS  SJIS EUC  UTF-8  UTF-16 字
01 01 2121 8140 A1A1 E38080 3000    
01 02 2122 8141 A1A2 E38081 3001   、
01 03 2123 8142 A1A3 E38082 3002   。
01 04 2124 8143 A1A4 EFBC8C FF0C   ,
01 05 2125 8144 A1A5 EFBC8E FF0E   .
01 06 2126 8145 A1A6 E383BB 30FB   ・
01 07 2127 8146 A1A7 EFBC9A FF1A   :
01 08 2128 8147 A1A8 EFBC9B FF1B   ;
01 09 2129 8148 A1A9 EFBC9F FF1F   ?
01 10 212A 8149 A1AA EFBC81 FF01   !
 ~~~~~~~~~~~ 

JISコードをキーとして、東雲BDFファイルと文字コード表をマージしてヘッダーファイルを作成すると下記のようになります。

【shnmk16min.h】
typedef struct {
	prog_uint16_t  jis;
	prog_uint16_t  sjis;
	prog_uint16_t  euc;
	prog_uint32_t  utf8;
	prog_uint16_t  utf16;
	prog_uchar     bitmap[32];
} BDF_FORMAT;

int font_num = 6965;

#define FONT_WIDTH  16
#define FONT_HEIGHT 16

const BDF_FORMAT shnmk16min[6965] PROGMEM = {
 ~~~~~~~~~~~ 
{0x3C51,0x8ECF,0xBCD1,0xE785AE,0x716E,{0x00,0x82,~,0x41,0x22}}, // 煮
{0x3C52,0x8ED0,0xBCD2,0xE7A4BE,0x793E,{0x08,0x10,~,0x08,0x00}}, // 社
{0x3C53,0x8ED1,0xBCD3,0xE7B497,0x7D17,{0x08,0x10,~,0x0b,0x00}}, // 紗
{0x3C54,0x8ED2,0xBCD4,0xE88085,0x8005,{0x00,0x80,~,0x02,0x08}}, // 者
{0x3C55,0x8ED3,0xBCD5,0xE8AC9D,0x8B1D,{0x00,0x42,~,0x24,0x22}}, // 謝
 ~~~~~~~~~~~ 
};
Download shnmk16min.zip (解凍して使用してください)

構造体の要素をみるとわかるように、フォントのビットマップ情報は JIS, SJIS, EUC, UTF-8, UTF-16コードで検索可能になっています。

構造体データの prog_uchar bitmap[32] のところに BDFファイルのBITMAP情報が格納されます。 例えば16進2バイト、16行のデータ
BITMAP
0810
~
0b00
は下記のように変換してセットしています。
{0x08,0x10,~,0x0b,0x00}

後述していますが、このフォント情報はSPI FLASHに格納されるため、FLASH領域を実装したESP32マイコンボードが必要になります。

同様に半角のASCII文字には、shnm8x16a.bdf を用いています。
STARTCHAR 65 ← ASCIIコード(16進)
ENCODING 101
SWIDTH 480 0
DWIDTH 8 0
BBX 8 16 0 -2
BITMAP
00 → □□□□□□□□
00 → □□□□□□□□
00 → □□□□□□□□
00 → □□□□□□□□
00 → □□□□□□□□
38 → □□■■■□□□
44 → □■□□□■□□
82 → ■□□□□□■□
82 → ■□□□□□■□
fe → ■■■■■■■□
80 → ■□□□□□□□
82 → ■□□□□□■□
44 → □■□□□■□□
38 → □□■■■□□□
00 → □□□□□□□□
00 → □□□□□□□□
ENDCHAR
このBDFファイルは1バイトのASCIIコードなので、文字コード表とのマージは必要なく、 ASCIIコードとそれに続くビットマップ列になります。

【shnm8x16a.h】
typedef struct {
	prog_uint8_t   ascii;
	prog_uchar     bitmap[16];
} BDF_ASCII_FORMAT;

int font_num = 95;

#define FONT_WIDTH   8
#define FONT_HEIGHT 16

const BDF_ASCII_FORMAT shnm8x16a[95] PROGMEM = {
{0x20,{0x00,0x00,0x00,0x00,~,0x00,0x00,0x00,0x00}},
{0x21,{0x00,0x18,0x18,0x18,~,0x00,0x10,0x10,0x00}},
{0x22,{0x6c,0x24,0x24,0x48,~,0x00,0x00,0x00,0x00}},
{0x23,{0x00,0x12,0x12,0x12,~,0x48,0x48,0x48,0x00}},
{0x24,{0x10,0x38,0x54,0x92,~,0x54,0x38,0x10,0x10}},
{0x25,{0x01,0x61,0x92,0x92,~,0x49,0x49,0x86,0x80}},
{0x26,{0x00,0x38,0x44,0x44,~,0x4a,0x31,0x00,0x00}},
 ~~~~~~~~~~~ 
Download shnm8x16a.zip (解凍して使用してください)

テスト用のシステム構成は下記のようになります。

●Seeeduino XIAO Expansion board
検証環境には、4MB FLASHを実装しているAdafruit QT Py ESP32-S2とSSD1306 OLED DISPLAYを使用しています。 ESP32-S2 と OLED DISPLAY はI2C接続です。ここでは配線の手間を省いてXIAO Expansion boardを利用しました。

Adafruit QT Py + XIAO Expansion board
Seeeduino XIAO Expansion board

●Adafruit QT Py ESP32-S2 WiFi Dev Board with STEMMA QT
・ESP32-S2 240MHz
・4 MB Flash & 2 MB PSRAM
・2.4 GHz Wi-Fi (SoC)
・Two I2C ports
・Hardware UART
・Hardware SPI
・Hardware I2S on any pins
・3.3V regulator with 600mA peak output
Adafruit QT Py ESP32-S2

●システム要件
〇漢字コードには、UTF-8を使用する。
〇漢字表示の際には、shnmk16min.h からビットマップ情報を取得する。
〇ASCII文字表示の際には、shnm8x16a.h からビットマップ情報を取得する。
〇フォントは、1 pixelずつ描画する。
〇半角・全角が混在する文字列で行末の漢字が半分欠けてしまう場合には、改行して表示する。
    (128x64ドットの OLED DISPLAY を使った場合)


●開発環境
ソースコードのビルドには、PlatformIOを使用しています。
Arduino開発環境構築 PlatformIO

●ソースコード解説(抜粋)

Download drawFonts.zip (解凍して使用してください)

フォント情報の取得
FLASH領域に保存してあるフォント情報から該当するUTF-8コードを検索します。 UTF-8最大4バイトのコードまで取得できるように、
pgm_read_dword_near()関数を使用します。
続いて、コードに紐づいているフォントのビットマップ情報を取得します。

 for (int i = 0; i < font_num; i++) {
  utf8code = pgm_read_dword_near(&shnmk16min[i].utf8);
  if (utf8code == utf8) {
   pt = (unsigned char *)shnmk16min[i].bitmap;
   for (int pos = 0; pos < 32; pos++, bitmap++, pt++) {
    *bitmap = pgm_read_byte_near(pt);
   }
   break;
  }
 }
ESP32-S2マイコンボードではストレスなく検索を完了しています。

改行処理
ASCIIコードが混在する文字列を表示する際、文字数のみの判断で改行すると不具合が発生します。
ASCIIコードには横8ドット、漢字には16ドット幅のフォントを用いているので、ドット数を考慮して改行処理を行います。
 while(*str) {
  switch(*str) {
   case 0x0a:
   case 0x0d:
    pos_y += FONT_HEIGHT;
    str++;
    break;
   default:
    if ((*str & 0x80) == 0x00) { // 1byte文字
     if ((pos_x + FONT_ASCII_WIDTH) > SCREEN_WIDTH) {
      pos_x = 0;
      pos_y += FONT_HEIGHT;
     } 
     getFontAscii(bitmap, *str);
     drawAscii(bitmap, pos_x, pos_y);
     pos_x += (FONT_WIDTH / 2);
     str++;
    } else {
            if ((*str & 0xE0) == 0xC0) { numByte=2; // 2byte文字
     } else if ((*str & 0xF0) == 0xE0) { numByte=3; // 3byte文字
     } else if ((*str & 0xF8) == 0xF0) { numByte=4; // 4byte文字
     }
     if ((pos_x + FONT_WIDTH) > SCREEN_WIDTH) {
      pos_x = 0;
      pos_y += FONT_HEIGHT;
     }
     for (code = *str, str++, i = 1; i < numByte; i++, str++) {
      code = (code << 8) + *str;
     };
     getFont(bitmap, code);
     drawKanji(bitmap, pos_x, pos_y);
     pos_x += FONT_WIDTH;
    }
    break;
  }
 }
フォント表示
フォント表示は1ドット単位で行います。ビットに1が立っている箇所のみを書き出します。 下記は漢字の場合です。
 for(int y = 0; y < 16; y++) {
  for(int x = 0; x < 8; x++) {
   if (*bitmap & (0x80>>x))
    ssd1306.drawPixel(pos_x + x, pos_y + y, SSD1306_WHITE);
  }
  bitmap++;
  for(int x = 0; x < 8; x++) {
   if (*bitmap & (0x80>>x))
    ssd1306.drawPixel(pos_x + x + 8, pos_y + y, SSD1306_WHITE);
  }
  bitmap++;
 }

●テスト


●オリジナルフォントの作成

再度、東雲フォントBDFファイルと文字コード表をマージして作ったファイルをみてみましょう。
const BDF_FORMAT shnmk16min[6965] PROGMEM = {
 ~~~~~~~~~~~ 
{0x3C51,0x8ECF,0xBCD1,0xE785AE,0x716E,{0x00,0x82,~,0x41,0x22}}, // 煮
{0x3C52,0x8ED0,0xBCD2,0xE7A4BE,0x793E,{0x08,0x10,~,0x08,0x00}}, // 社
{0x3C53,0x8ED1,0xBCD3,0xE7B497,0x7D17,{0x08,0x10,~,0x0b,0x00}}, // 紗
{0x3C54,0x8ED2,0xBCD4,0xE88085,0x8005,{0x00,0x80,~,0x02,0x08}}, // 者
{0x3C55,0x8ED3,0xBCD5,0xE8AC9D,0x8B1D,{0x00,0x42,~,0x24,0x22}}, // 謝
 ~~~~~~~~~~~ 
};
コメント部分には漢字を表記しているので、テキストエディタなどでファイルを開いて、 漢字検索をすれば、該当するビットマップ情報を得ることができます。
{0x3C53,0x8ED1,0xBCD3,0xE7B497,0x7D17,{
0x08,0x10, → □□□□■□□□□□□■□□□□
0x08,0x10, → □□□□■□□□□□□■□□□□
0x0a,0x10, → □□□□■□■□□□□■□□□□
0x72,0x14, → □■■■□□■□□□□■□■□□
0x14,0x52, → □□□■□■□□□■□■□□■□
0x08,0x52, → □□□□■□□□□■□■□□■□
0x0a,0x51, → □□□□■□■□□■□■□□□■
0x12,0x95, → □□□■□□■□■□□■□■□■
0x7f,0x14, → □■■■■■■■□□□■□■□□
0x09,0x34, → □□□□■□□■□□■■□■□□
0x28,0x08, → □□■□■□□□□□□□■□□□
0x2a,0x08, → □□■□■□■□□□□□■□□□
0x29,0x10, → □□■□■□□■□□□■□□□□
0x29,0x20, → □□■□■□□■□□■□□□□□
0x48,0xc0, → □■□□■□□□■■□□□□□□
0x0b,0x00 → □□□□■□■■□□□□□□□□
}}, // 紗
このビットマップ配列を編集することでオリジナルフォントに書き換えることができます。

【参考文献】
【連載】よくわかる!組み込みフォント 第3回「ビットマップフォントを知ろう。」 | FONT SWITCH PROJECT
ESP32で 漢字を表示するプログラムを作ってみた(ESP32、SSD1306)
U8g2 Font List
 Raspberry Pi(ラズベリー パイ)は、ARMプロセッサを搭載したシングルボードコンピュータ。イギリスのラズベリーパイ財団によって開発されている。
2019.12.19 ファイル共有 dokany + Win-sshfs
2019.12.26 Arduino開発環境構築 PlatformIO
2022.02.08 Zero 2 W と Bullseye
2022.07.15 NAS導入とApache2パス設定
2023.04.01 秋月・amazon・PIMORONI・tindie
2023.07.16 ログ表示
2023.10.16 漢字フォントの表示と拡張
2024.04.23 NASリプレース


Arduinoで学ぶ組込みシステム入門(第2版)
●Arduinoを使って組込みシステム開発を理解する
・ハードウェアやソフトウェアなどの基礎知識/ ・設計から実装までを系統的に説明するモデルベース開発/ ・Arduinoを用いた実際の開発例

最新 使える! MATLAB 第3版
◆◆すぐに「使える!」 全ページフルカラー!◆◆
・MATLAB R2022bに対応し、解説もより詳しく!/ ・コマンド・スクリプトの例が豊富で、動かして学べる!/ ・超基本から解説。これから使いはじめる人にぴったり!/ ・全編フルカラー、スクリーンショットも豊富!

Amazon Web Services基礎からのネットワーク&サーバー構築改訂4版
1.システム構築をインフラから始めるには/ 2.ネットワークを構築する/ 3.サーバーを構築する/ 4.Webサーバーソフトをインストールする/ 5.HTTPの動きを確認する/ 6.プライベートサブネットを構築する/ 7.NATを構築する/ 8.DBを用いたブログシステムの構築/ 9.TCP/IPによる通信の仕組みを理解する

C言語は第二の母国語: 独学学生時代から企業内IT職人時代に培った、独立のための技術とノウハウ 平田豊著
学生時代から独学でプログラミングをはじめ、企業内でデバイスドライバを開発し、そして独立後もたくさんのアプリケーション開発や技術書制作に携わってきた著者。その筆者が大事に使い続ける「C言語」の“昔と今”について、気づいたことや役立つ知識、使ってきたツールなどについて、これまで記してきたことを整理してまとめました。 本書では、現役プログラマーだけでなく、これからプログラミングを学ぶ学生などにも有益な情報やノウハウを、筆者の経験を元に紹介しています。

1冊ですべて身につくJavaScript入門講座
・最初の一歩が踏み出せる! 初心者に寄り添うやさしい解説 ・最新の技術が身につく! 今のJavaScriptの書き方・使い方 ・絶対に知っておきたい! アニメーションとイベントの知識 ・プログラミングの基本から実装方法まですべて学べる

図解! Git & GitHubのツボとコツがゼッタイにわかる本
ソフトウェア開発では欠かすことのできないGit、GitHub。 これからGit、GitHubを使いたいという入門者の方でも、実際に手を動かしながら使い方を学べます。

C自作の鉄則!2023 (日経BPパソコンベストムック)
メーカー製のパソコンはスペックが中途半端で、自分が本当に欲しい機種がない――。そう思っている人には、ぜひ自作パソコンをお薦めします。自作パソコンのパーツは進化が速く、しかも驚くほど種類が豊富。価格も性能も、幅広く用意されているため、満足度100%の“自分だけの1台”を手に入れることができます。

Interface 2023年6月号
特集:第1部 フィルタ設計 基礎の基礎/ 第2部 係数アプリや波形観測アプリで合点!FIR&IIRフィルタ作り/ 第3部 配布プリント基板で体験!マイコンで動くフィルタ作り

日経Linux 2023年5月号
【特集 1】 AI時代の最強フリーソフト ~ 25のやりたいを実現! 【特集 2】 AWS、Azureのうまみを無料で体感!面倒なことはクラウドに任せよう 【特集 3】 新しいRaspberry Pi Cameraで遊んでみよう 【特集 4】 Linuxで旧型PCを復活! 1kg切るモバイルPCを「ChromeOS Flex」でChromebook化

ラズパイマガジン2022年秋号
特集:5大人気ボード 電子工作超入門
「半導体不足で在庫が不足し、電子工作のボードがなかなか買えない…」。そんな今にふさわしい特集を企画しました。5種の人気ボードにすべて対応した電子工作の入門特集です。「GPIO」や「I2C」を使った電子パーツの制御方法は、どのボードでも同じです。手に入れられたボードを使って、今こそ電子工作を始めましょう。

地方で稼ぐ! ITエンジニアのすすめ
学歴、理系の知識、専門スキル……全部なくてもITエンジニアになれる! 地方でも高収入でやりがいをもって働ける!ITエンジニアの魅力を一挙大公開

Raspberry Piのはじめ方2022
本書は、ラズパイやPicoの買い方やインストール、初期設定といった基本から、サーバー、電子工作、IoT、AIといったラズパイならではの活用方法まで、1冊でお届けします。 ラズパイをこれから始める方向けに、全36ページの入門マンガ「女子高生とラズベリーパイ」も巻末に掲載。これを読むだけでラズパイがどんなものなのか、すぐに分かって触れるようになります。

ハッカーの学校 IoTハッキングの教科書
生活にとけこみ、家電機器を便利にするIoT技術。 Webカメラなど、便利の裏側に潜むセキュリティの危険性をハッキングで検証。 専門家がパケットキャプチャからハードウェアハッキングまで、その攻撃と防御を徹底解説。 本書は2018年7月に刊行された「ハッカーの学校IoTハッキングの教科書」に一部修正を加えた第2版です。

攻撃手法を学んで防御せよ! 押さえておくべきIoTハッキング
本書は、経済産業省から2021年4月にリリースされた、IoTセキュリティを対象とした『機器のサイバーセキュリティ確保のためのセキュリティ検証の手引き』の『別冊2 機器メーカに向けた脅威分析及びセキュリティ検証の解説書』をもとに、IoT機器の開発者や品質保証の担当者が、攻撃者の視点に立ってセキュリティ検証を実践するための手法を、事例とともに詳細に解説しました。

ポチらせる文章術
販売サイト・ネット広告・メルマガ・ブログ・ホームページ・SNS… 全WEB媒体で効果バツグン! カリスマコピーライターが教える「見てもらう」「買ってもらう」「共感してもらう」すべてに効くネット文章術

プログラマーは世界をどう見ているのか 西村博之著
イーロン・マスク(テスラ)、ジェフ・べゾス(Amazon)、ラリー・ペイジ(Google)…etc. 世界のトップはなぜプログラマーなのか?

ニーア オートマタ PLAY ARTS改 <ヨルハ 二号 B型 DX版> PVC製 塗装済み可動フィギュア
「NieR:Automata」より、ヨルハ二号B型こと2BがPLAY ARTS改に新たに登場! 高級感の感じられるコスチュームや髪の質感、洗練されたボディバランス、細かなデティールに至るまでこだわり抜かれた逸品。 DX版には通常版のラインナップに加え2Bの随行支援ユニット ポッド042などをはじめ“純白の美しい太刀"白の約定やエフェクトパーツ、自爆モードを再現できる換装用ボディパーツ、シーンに合わせて変えられる顔パーツ2種も付属する豪華な仕様に。 作中のあらゆるシーンを再現することが可能なファン必見の一品となっている。

Newtonライト2.0 ベイズ統計
ベイズ統計は,結果から原因を推定する統計学です。AIや医療などの幅広い分野で応用されています。その基礎となるのは18世紀に考えだされた「ベイズの定理」です。 この本では,ベイズ統計学のきほんをやさしく紹介していきます。

白光(HAKKO) ダイヤル式温度制御はんだ吸取器 ハンディタイプ FR301-81


無水エタノールP 500mlx2個パック(掃除)


ケイバ(KEIBA) マイクロニッパー MN-A04


サンハヤト SAD-101 ニューブレッドボード


白光(HAKKO) HEXSOL 巻はんだ 精密プリント基板用 150g FS402-02


[Amazon限定ブランド]【指定第2類医薬品】PHARMA CHOICE 解熱鎮痛薬 解熱鎮痛錠IP 100錠


Copyright © 2011-2024 Sarako Tsukiyono All rights reserved®.