E-paperにアイコンフォントを表示する

Posted on

E-paperにicomoonで作ったアイコンフォントでアイコンを表示してみた。 上手くいけば、Bitmapなファイルを用意したり、コード内にビットマップを定義したりしたりせずに済むはず。

今回の環境

接続する

HATなので、重ねればOKだけど、諸処の事情で別なモジュールが繋っていたりしたら、次のとおり繋げる。

E-paper Rpi (pin)
VCC 3.3 (1, 17)
GND GND (6, 9, 14, 20, 25, 30, 34, 39)
DIN MOSI (19)
CLK SCLK (23)
CS CE0 (24)
D/C GPIO6 (22)
RST GPIO0 (11)
BSY GPIO5 (18)

プロジェクトの作成と初期設定

1
2
3
4
sudo apt install -y python3-venv libopenjp2-7 libtiff5 fonts-freefont-ttf
python3 -m venv venv
source venv/bin/activate
pip install --upgrade --no-cache pip epd-library qrcode

pip list するとこんな感じ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
Package       Version
------------- -------
epd-library   0.2.3
Pillow        7.1.2
pip           18.1
pkg-resources 0.0.0
qrcode        6.1
RPi.GPIO      0.7.0
setuptools    40.8.0
six           1.14.0
spidev        3.4

sudo raspi-config で SPI を有効にする

  • 5 Interfacing Options
  • P4 SPI
  • Yes

アイコンフォントを作る

icomoonなりで必要なアイコンが含まれたフォントを作る。アサインされるコードポイントをお忘れなく。

icomoonで作った場合、ダウンロードしたZIPの中にある demo.html を見れば、コードポイントを確認できる。

icomoonで、9つのアイコンを選択して作成したフォント(TTF)は、2836 bytesであった。

Pythonで叩く

epd-libraryPIL を駆使して文字列を描くだけ。

アイコンフォントのアイコンを書くときは、作ったフォントを ImageFont で読み込んで、 アイコンのコードポイントをユニコードコードポイント( "\uxxxx" )で記述する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#!/usr/bin/env python3
import epd2in13b
import qrcode

from PIL import Image, ImageFont, ImageDraw

COLOR = 0
NON_COLOR = 1


def main():
    epd = epd2in13b.EPD()
    epd.init()

    font = ImageFont.truetype('/usr/share/fonts/truetype/freefont/FreeMono.ttf', 16)
    icons = ImageFont.truetype('fonts/icomoon.ttf', 18)

    img_black = Image.new('1', (epd.width, epd.height), 1)
    img_red = Image.new('1', (epd.width, epd.height), 1)

    draw_black = ImageDraw.Draw(img_black)
    draw_black.text((5, 10), 'Iconfont', font=font, fill=COLOR)
    draw_black.text((5, 40), '\ue938\ue98d\ue98f\ue990\ue9c4', font=icons, fill=COLOR)

    draw_red = ImageDraw.Draw(img_red)
    draw_red.text((5, 65), '\uea07\uea0c\uea13\uea14', font=icons, fill=COLOR)

    frame_black = epd.get_frame_buffer(img_black)
    frame_red = epd.get_frame_buffer(img_red)

    epd.display_frame(frame_black, frame_red)

if __name__ == '__main__':
    main()