デジタルフォトフレームを簡易モニターとして使う

汎用電子看板

前回、デジタルフォトフレームをRaspberryの簡易モニターとして利用する方法を紹介しました。
今回は好きな文字をフォトフレームに表示する方法を紹介します。
当然、ほとんどのフォトフレームは画像ファイルしか表示することができません。
そこで、画像編集ソフトを使って画像ファイルに文字を埋め込みます。

【STEP1】パッケージのインストール

画像編集ソフトとしてはImageMagickを使います。

$ sudo apt install imagemagick

【STEP2】日本語フォントのインストール

フリーの日本語TrueTypeフォントをインストールします。
日本語TrueTypeフォントは以下のコマンドで調べることができます。
今回はfonts-takaoを選びました。

$ sudo apt-cache search font japanese |
              grep TrueType

              $ sudo apt install fonts-takao

日本語フォントは以下のディレクトリにインストールされます。

$ cd /usr/share/fonts/truetype/

              $ ls -R

              .:

              dejavu                    




              fonts-japanese-mincho.ttf  takao-mincho

              fonts-japanese-gothic.ttf  takao-gothic

              

              ./dejavu:

              DejaVuSans-Bold.ttf  DejaVuSansMono-Bold.ttf 
              DejaVuSerif-Bold.ttf

              DejaVuSans.ttf      
              DejaVuSansMono.ttf      
              DejaVuSerif.ttf

              

              ./takao-gothic:

              TakaoGothic.ttf  TakaoPGothic.ttf

              

              ./takao-mincho:

              TakaoMincho.ttf  TakaoPMincho.ttf

【STEP3】簡単な動作テスト

以下のコマンドで背景として使うイメージファイルに文字を埋め込みます。

convert -font フォントのパス -pointsize 文字の大きさ
              -fill "文字の色" -draw "text 表示位置(X),表示位置(Y) 

              '表示したい文字'" 背景として使うイメージファイル 出力するイメージファイル

イメージファイルは「素材　フレーム｣などで検索するとフリーで使えるフレーム画像が沢山公開されていますので
気に入った背景イメージを準備してください。
Windowsのペイントなどを使って、オリジナルの背景イメージ（JPEGファイル）を作っても構いません。
私はこちらのページから以下の背景イメージを利用させていただきました。

実際のコマンドは以下の様になります。

$ convert -font
              /usr/share/fonts/truetype/takao-mincho/TakaoMincho.ttf
              -pointsize 200 -fill "blue" -draw "text 10,20 'こんにちは'"
              back.jpg out.jpg

出来上がった画像ファイル(out.jpg)を前回と同様の手順でフォトフレーム側にダウンロードしてやれば
好きな文字をフォトフレームに表示することができます。

【STEP4】汎用電子看板

汎用的に使える卓上電子看板スクリプトを作りましたので紹介します。
使い方は、表示したい文字や色などをCSVファイル(param.csv)に書いて、スクリプト（fusen.sh)を起動すると
文字を埋め込んだイメージファイルを作ってくれます。
CSVファイルの1行は以下の形式です。

表示したい文字,フォントサイズ,文字の色,[G]

文字の色には「white」などの文字のほかに「rgb(255, 0, 0)」の形式も指定することができます。
指定できる色コードの詳細は以下を参照してください。
http://www.imagemagick.org/script/color.php

行の末尾に「G」を指定するとゴシックのフォントを使います。
以下にサンプルのCSVファイルを示します。
表示したい文字を省略すると改行します。
改行時の改行幅はフォントサイズで決まります。また文字の色は意味がありません。

$ cat param.csv

              おはようございます,160,Cyan,G

              ,100,Blue

              今日は7月26日,160,White

              只今の温度は28.7℃,160,Pink

              只今の湿度は36%,160,PaleGreen

              只今の気圧は1010.66hPa,160,Yellow

              ,100,Blue

              いってらっしゃい！！,160,Cyan,G

フォトフレームへの表示は以下の様になります。
同じTranscendのフォトフレームでも機種によるスクリーンの縦横比の関係で表示が変わります。

スクリプトは以下のとおりです。
フォントファイル名(/usr/share/fonts/truetype/takeo-gothic/TakeoGothic.ttf)はお好みで変更してください。
こちらでFreeで使えるフォントを紹介しています。

#!/bin/bash

              #

              #Photo Frame for Raspberry

              #

              if [ $# -lt 3 ]; then

                  echo "USAGE:${0} param_file
              back_ground_file output_file"

                  exit

              fi

              

              ParamFile=$1

              InFile=$2

              OutFile=$3

              Vertical=0

              #水平位置は適当に変更してください

              Horizontal=20

              TmpFile=$(mktemp)

              cp $InFile $TmpFile

              

              #パラメータファイル読み込み

              cat ${ParamFile} | while read line

              do

                col0=`echo ${line} | cut -d , -f 1`

                col1=`echo ${line} | cut -d , -f 2`

                col2=`echo ${line} | cut -d , -f 3`

                col3=`echo ${line} | cut -d , -f 4`

                if test "$col3" = "" ; then

                  col3="M"

                fi

              

              #イメージに文字を挿入

              #フォントファイルはお好きなフォントに 変 更してください

                Vertical=`expr ${Vertical} + ${col1}`

                if test $col3 = "G" ; then

                  convert -font
              /usr/share/fonts/truetype/takao-gothic/TakaoGothic.ttf
              -pointsize ${col1} -fill ${col2} -draw "text
              ${Horizontal},${Vertical} '${col0}'" $TmpFile $OutFile

                else

                  convert -font
              /usr/share/fonts/truetype/takao-gothic/TakaoGothic.ttf
              -pointsize ${col1} -fill ${col2} -draw "text
              ${Horizontal},${Vertical} '${col0}'" $TmpFile $OutFile

                fi

                cp ${OutFile} ${TmpFile}

              done

              

              #ファイルの削除

              rm ${TmpFile}

上記のスクリプトを「fusen.sh」などのファイル名で保存してください。
起動方法は以下の通りです。
back.jpgは背景となるイメージファイルで前もって準備してください。

$ ./fusen.sh param.csv back.jpg
              /tmp/out.jpg

このスクリプト(fusen.sh)に続けて、前回のスクリプト（download.sh)を実行すれば、フォトフレームに好きなタイミングで、
好きな文字を表示することができます。
温度計などのセンサーから読み取った値の表示や、WEBページから必要な情報だけを抜き出した表示に使えると思います。
なお、スクリプトをcronで定期的に実行する場合は必ずフルパスで指定してください。
以下にcronで定期的に実行する場合のスクリプトのサンプルを示します。

#!/bin/bash

              #センサーなどから温度、湿度、気圧などを読み込んで/home/pi/param.csvを作る

              /home/pi/HogeHoge

              

              #画像ファイルに文字を埋め込む

              /home/pi/fusen.sh /home/pi/param.csv /home/pi/back.jpg
              /tmp/out.jpg

              

              #画像ファイルをフォトフレームにダウンロードする

              /home/pi/download.sh

次回はWEBページから必要な情報を抜き出して表示する方法を紹介します。