<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>最近 ESP32 + MicroPython で遊んでいます．Cに比べて試行錯誤が楽で，日曜プログラミングのネタとしていいですね．こんな感じで OLED につなげて遊んでいます．</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--V95vUTKq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8006ac86474909225d6d27ac.jpg%3Fsha%3D6e4416183b8cca79190cca02614c7bbeea352a47" alt="Image" width="360" loading="lazy" class="md-img"></p>
<p>これを作るにあたって，以下の課題にチャレンジしてみました．</p>
<ol>
<li>MicroPython 公式配布イメージだけで漢字表示 (<strong>再構築や Cを使わない</strong>)．</li>
<li>UTF-8 文字列を素直に受け取る (<strong>UTF-8 → SHIFT_JIS の変換表等不要</strong>)．</li>
<li>
<strong>コンパクトなフォント形式</strong> の設計とフォント作成ツール実装 (車輪の再発明?)</li>
</ol>
<p>できたコードを GitHub に置いてあります．</p>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__149e4f7be57e9" src="https://embed.zenn.studio/card#zenn-embedded__149e4f7be57e9" data-content="https%3A%2F%2Fgithub.com%2Fyoshinari-nomura%2Fpinot" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<p>200KB 程度のフォントファイル 1個と MicroPython で 150行程度のファイル1個を追加すれば，漢字のグリフを扱えるので，日本語表示をちょっと足したい場合に便利だと思います．</p>
<p>以下，自分の備忘録も兼ねて，つらつらと解説を書いてみたいと思います．</p>
<h1 id="%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86" aria-hidden="true"></a> 使ってみよう</h1>
<p>とりあえずどんな物なのか試してみる手順です．</p>
<ol>
<li>
<p>GitHub から pinot を clone</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">git</span> clone https://github.com/yoshinari-nomura/pinot
</code></pre></div>
</li>
<li>
<p>MicroPython で動かす前に手元の PC の Python でテストしてみます．</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">python3 <span class="token parameter variable">-c</span> <span class="token string">'from src.lib.pnfont import Font; f = Font("src/fonts/shnmk16u.pfn"); print(f.glyph("山").banner())'</span>
</code></pre></div>
<pre><code>........#.......
........#.......
........#.......
........#.......
........#.......
..#.....#.....#.
..#.....#.....#.
..#.....#.....#.
..#.....#.....#.
..#.....#.....#.
..#.....#.....#.
..#.....#.....#.
..#.....#.....#.
..#.....#.....#.
..#############.
................
</code></pre>
<p>グリフの展開は，pnfont.py だけで完結していて，150行程度とコンパクトです．</p>
</li>
<li>
<p>MicroPython の動作するマイコンボードを PC の USB に接続して，フォントファイルといくつかのコードを PC からボードに転送します．</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token builtin class-name">export</span> <span class="token assign-left variable">AMPY_PORT</span><span class="token operator">=</span>/dev/ttyUSB0
ampy put src/fonts/shnmk12u.pfn /fonts/shnmk12u.pfn
ampy put src/lib/display.py /lib/display.py
ampy put src/lib/pnfont.py /lib/pnfont.py
ampy put src/lib/ssd1306.py /lib/ssd1306.py
</code></pre></div>
<p>shnmk12u.pfn は 130KB 程度あるので，少し転送時間がかかりますが，他は一瞬です．</p>
</li>
<li>
<p>以下を display-test.py という名前でPC 側に置いて，ampy で走らせてみましょう．Pin と addr あたりは配線に合わせて調整が必要かもしれません．</p>
<div class="code-block-container"><pre class="language-python"><code class="language-python"><span class="token keyword">from</span> machine <span class="token keyword">import</span> Pin<span class="token punctuation">,</span> SoftI2C
<span class="token keyword">from</span> ssd1306 <span class="token keyword">import</span> SSD1306_I2C
<span class="token keyword">from</span> pnfont <span class="token keyword">import</span> Font
<span class="token keyword">from</span> display <span class="token keyword">import</span> PinotDisplay
i2c  <span class="token operator">=</span> SoftI2C<span class="token punctuation">(</span>scl <span class="token operator">=</span> Pin<span class="token punctuation">(</span><span class="token number">22</span><span class="token punctuation">)</span><span class="token punctuation">,</span> sda <span class="token operator">=</span> Pin<span class="token punctuation">(</span><span class="token number">21</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
disp <span class="token operator">=</span> PinotDisplay<span class="token punctuation">(</span>panel <span class="token operator">=</span> SSD1306_I2C<span class="token punctuation">(</span><span class="token number">128</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> i2c<span class="token punctuation">,</span> addr <span class="token operator">=</span> <span class="token number">0x3c</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
		    font  <span class="token operator">=</span> Font<span class="token punctuation">(</span><span class="token string">'/fonts/shnmk12u.pfn'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
disp<span class="token punctuation">.</span>text<span class="token punctuation">(</span><span class="token string">'本日は晴天なり\nってほどでもない'</span><span class="token punctuation">)</span>
</code></pre></div>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">ampy run display-test.py
</code></pre></div>
</li>
</ol>
<p>冒頭のこんなのが出ます．</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--V95vUTKq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8006ac86474909225d6d27ac.jpg%3Fsha%3D6e4416183b8cca79190cca02614c7bbeea352a47" alt="Image" width="240" loading="lazy" class="md-img"></p>
<p>ちなみに，ハードウェアは，このあたりです．Amazon あたりでも買えます．</p>
<ul>
<li><a href="https://akizukidenshi.com/catalog/g/gP-14686/" target="_blank" rel="nofollow noopener noreferrer">有機ELディスプレイ 128×32 白色</a></li>
<li><a href="https://akizukidenshi.com/catalog/g/gM-11819/" target="_blank" rel="nofollow noopener noreferrer">ESP32-DevKitC ESP-WROOM-32 開発ボード</a></li>
</ul>
<p><a href="https://github.com/yoshinari-nomura/pinot" target="_blank" rel="nofollow noopener noreferrer">pinot のリポジトリ</a> には，BDF フォントから今回使用した独自形式のフォント (PFN 形式と命名) ファイルを作るスクリプトも同梱しています．好きな BDF から PFN を作ったり，選択的に必要なグリフだけ (漢字+絵文字とか) 追加したりするのも面白そうです．</p>
<h1 id="pinot-font-(pfn)-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#pinot-font-(pfn)-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88" aria-hidden="true"></a> Pinot Font (PFN) フォーマット</h1>
<p>フォントのファイル構造に関するメモです．</p>
<h2 id="pfn-%E3%81%AE%E7%89%B9%E5%BE%B4">
<a class="header-anchor-link" href="#pfn-%E3%81%AE%E7%89%B9%E5%BE%B4" aria-hidden="true"></a> PFN の特徴</h2>
<p>Pinot Font (PFN) は，マイコン等での利用を想定した Fixed フォントのファイル形式で，以下の特徴があります．</p>
<ol>
<li>
<p>ファイルサイズが比較的小さい<br>
ASCII + JISX0201 + JISX0208 の東雲フォントを PFN に変換すると以下のサイズでした．</p>
<ul>
<li>
<strong>12ドット:</strong> 139,258バイト</li>
<li>
<strong>14ドット:</strong> 188,043バイト</li>
<li>
<strong>16ドット:</strong> 236,670バイト</li>
</ul>
</li>
<li>
<p>1ファイルで完結している<br>
UTF-8 (UCS4) ベースなので UTF-8 → SHIFT_JIS のようなコード変換テーブルが不要です．また，ASCII用/JISX0208用等の区別もありません．</p>
</li>
<li>
<p>ファイルの seek だけでグリフの検索が可能<br>
これは，検索コードの実装依存の話なので特徴ではないですが，全体をメモリに置くことなくグリフを取得できるように意識はしています．</p>
</li>
</ol>
<h2 id="pfn-%E3%81%AE%E5%85%A8%E4%BD%93%E6%A7%8B%E9%80%A0">
<a class="header-anchor-link" href="#pfn-%E3%81%AE%E5%85%A8%E4%BD%93%E6%A7%8B%E9%80%A0" aria-hidden="true"></a> PFN の全体構造</h2>
<p>Pinot font (font-file) の形式を BNF っぽく書くとこんな感じです:</p>
<pre><code>font-file = font-header font-block{1,}
font-block = block-header glyph-entry{num_glyphs}
glyph-entry = codepoint bitmap
</code></pre>
<ul>
<li>font-file は，先頭の font-header とそれに続く1つ以上の font-block からなります．</li>
<li>各 font-block は，先頭の block-header とそれに続く num_glyphs 個の glyph-entry からなります (num_glyphs は block-header 内で与えられている)．</li>
<li>各 glyph-entry は，UCS4 (UTF-32) のコードポイントとビットマップの連接です．</li>
</ul>
<h2 id="%E5%90%84%E3%82%A8%E3%83%AC%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E8%A9%B3%E7%B4%B0">
<a class="header-anchor-link" href="#%E5%90%84%E3%82%A8%E3%83%AC%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E8%A9%B3%E7%B4%B0" aria-hidden="true"></a> 各エレメントの詳細</h2>
<p>以下，font-header, block-header, glyph-entry の構造についての詳細です．なお，断りがなければ，数値は全て符号なしでリトルエンディアンです．</p>
<ul>
<li>
<p>font-header (16 bytes):</p>
<table>
<thead>
<tr>
<th>サイズ</th>
<th>フィールド名</th>
<th>例</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>7</td>
<td>signature</td>
<td>"PINOTFN"</td>
<td>固定の文字列</td>
</tr>
<tr>
<td>1</td>
<td>version</td>
<td>0x01</td>
<td>バージョン番号</td>
</tr>
<tr>
<td>8</td>
<td>fontname</td>
<td>"shnmk14u"</td>
<td>8文字のフォント名</td>
</tr>
</tbody>
</table>
</li>
<li>
<p>block-header (6 bytes):</p>
<table>
<thead>
<tr>
<th>サイズ</th>
<th>フィールド名</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>width</td>
<td>続く glyph-entry 内の bitmap 幅</td>
</tr>
<tr>
<td>1</td>
<td>height</td>
<td>続く glyph-entry 内の bitmap 高さ</td>
</tr>
<tr>
<td>1</td>
<td>codepoint_size</td>
<td>続く glyph-entry 内の codepoint サイズ (1/2/4 いずれか)</td>
</tr>
<tr>
<td>1</td>
<td>attribute</td>
<td>将来(?) 拡張用</td>
</tr>
<tr>
<td>2</td>
<td>num_glyphs</td>
<td>続く glyph-entry の個数</td>
</tr>
</tbody>
</table>
<p>block-header の各フィールドから font-block 全体のサイズを計算できます:</p>
<pre><code>sizeof(font-block) = ((width * height + 7) / 8 + codepoint_size) * num_glyphs
</code></pre>
<p>これによって，次の font-block の先頭まで一気にシークできます．</p>
</li>
<li>
<p>glyph-entry (codepoint_size + (width * height + 7 ) / 8 bytes):</p>
<table>
<thead>
<tr>
<th>サイズ</th>
<th>フィールド名</th>
<th>例</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>codepoint_size</td>
<td>codepoint</td>
<td>0x41 ('A')</td>
<td>UTF-32LE だが必要な桁数</td>
</tr>
<tr>
<td>(width * height + 7) / 8</td>
<td>bitmap</td>
<td>0b00110000….</td>
<td>MSB→LSB 順に水平方向から</td>
</tr>
</tbody>
</table>
</li>
</ul>
<h2 id="%E7%89%B9%E8%A8%98%E4%BA%8B%E9%A0%85">
<a class="header-anchor-link" href="#%E7%89%B9%E8%A8%98%E4%BA%8B%E9%A0%85" aria-hidden="true"></a> 特記事項</h2>
<ul>
<li>各 glyph-entry は，font-block を越えて codepoint 順に並んでいなければなりません．</li>
<li>codepoint_size は，UTF-32 だと本来 4 ですが，ASCII は 1バイト，日本語を扱う場合でもほぼ 2バイトに収まるので，block-header で最適な長さを設定可能にしています．</li>
<li>bitmap のサイズについて，例えば，7x14 のグリフは，7*14 = 98 ビット必要ですが，バイト境界に合わせるために末尾に 6ビットパディングして 104ビット (13バイト) とします．
<ul>
<li>Python だと <code>(width * height + 7) // 8</code> でしょうか</li>
<li>BDF フォントのエンコードと異なることに気をつけて下さい．BDF は，各水平ライン毎に 0 パディングする方式です．</li>
</ul>
</li>
<li>font-block の個数は任意ですが，構造上，グリフの width, height, codepoint_size のいずれかが変化した時点で新たな font-block が必要でしょう．<br>
従って，codepoint でソートした場合にこれらが頻繁に変化するような glyph-entry の集合を扱うのに PFN フォーマットは向いていません．Fixed フォント向けです．</li>
</ul>
<h2 id="%E3%82%B0%E3%83%AA%E3%83%95%E6%A4%9C%E7%B4%A2%E3%81%AE%E4%BE%8B">
<a class="header-anchor-link" href="#%E3%82%B0%E3%83%AA%E3%83%95%E6%A4%9C%E7%B4%A2%E3%81%AE%E4%BE%8B" aria-hidden="true"></a> グリフ検索の例</h2>
<p>フォントファイルからグリフを検索するコード例は， <a href="https://github.com/yoshinari-nomura/pinot" target="_blank" rel="nofollow noopener noreferrer">pinot</a> リポジトリの pnfont.py Font.glyph <a href="https://github.com/yoshinari-nomura/pinot/blob/master/src/lib/pnfont.py#L52" target="_blank" rel="nofollow noopener noreferrer">あたり</a>にあります．各文字について，以下のような処理をしています．</p>
<ol>
<li>UTF-8 → UTF-32 codepoint に変換</li>
<li>当該グリフのある font-block まで seek</li>
<li>font-block 内を codepoint をターゲットにして 2分探索</li>
</ol>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<ul>
<li>
<p>実験のために <a href="http://openlab.ring.gr.jp/efont/shinonome/" target="_blank" rel="nofollow noopener noreferrer">東雲フォント</a> を使いました．作者の皆様ありがとうございます．東雲フォントの 14 ドットって，K14 由来なのですね．昔からお世話になっていました．</p>
</li>
<li>
<p>今回，MicroPython (というか Python) をはじめて書いたのですが，あまりに慣れてなさ過ぎて，大半 Ruby で書いて Python に手で翻訳するという意味不明なことをしていました (おかげで PFN フォントを作るコードは，ボードで動かす訳ではないので，Ruby のままです)．</p>
<p>しかし，この方法は，ロジックを考える部分と記法を調べる部分が独立になるので，新しい言語を学ぶのにかえって効率いいのでは，と思ったりもしました．</p>
</li>
<li>
<p>手元で開発したコードを ampy で PC からボードにチマチマとコピーをするのが面倒になってきたので，ampy を裏で使って rsync のようなことをするスクリプトを書きました．<br>
これも <a href="https://github.com/yoshinari-nomura/pinot" target="_blank" rel="nofollow noopener noreferrer">pinot</a> に収めたので，よかったら使ってみてください．機会があれば，また別の記事で触れたいです．</p>
</li>
</ul>


MicroPython だけで UTF-8 の漢字を表示

米田 聡

Yoshinari Nomura

<p data-line="0" class="code-line"><a href="https://zenn.dev/satoshi_yoneda/articles/pico_pinot_font" target="_blank">C++で利用できるコード</a>を書いてみました。扱いやすいフォント形式を考案いただきありがとうございます。</p>


<p data-line="0" class="code-line">ありがとうございます!!</p>


Discussion