でんげき☆ Network Service

Perl の GD::Simple モジュールでフォントを指定したりしてみるメモ

　
初期のインターネットっていうか Web サイト黎明期の CGI と云えば Perl でキマリ！！って時代もありましたよね…って感じすらすっかり忘れ去られたかのように近年では全く話題にもならない Perl ですが「三つ子の魂百まで」なのか何なのかあまりにも手に馴染みすぎてついつい使っちゃうって事はありませんか？　私はあります　いやむしろ未だに他の言語が使えず Perl にどっぷりなんです悪いか！！(-_-#)って事なのか何なのかそんな忘れ去られつつある言語である Perl と…その Perl で画像を扱う GD ライブラリの（主に文字フォント系の）使い方を少しばかり探求してみたかなりニッチな需要的な忘れ物防止メモです

そんな Perl の GD ライブラリですが…以下のようにコマンド一発で簡単にインストールできます
sudo apt install libgd-perl
依存関係とか詳しく調べてないんでアレだけど…ちょっと見た感じでは我が家の環境にいつの間にか libgd-text-perl なんてのも入っていたんで文字フォントの扱いに不具合が発生した時には sudo apt install libgd-text-perl してみるのもいいかもです（汗

あーあと標準的な Raspberry Pi OS のセットアップではゴシック書体の日本語フォントしか入ってないっぽい？　後に説明するけど…フォント名に Sans とだけ付いてるフォントは概ねゴシック書体です　明朝書体には Serif と付くらしいんだけどラズパイにはそれが入ってないみたい？なんで…後の動作確認しやすいように明朝書体が含まれる程よいフォントを追加でインストールしておきます
sudo apt install fonts-ipaexfont
日本語フォントファイルってのはそれなりに容量が大きいんで…少容量 microSD とかで運用してる方などには要注意かもですがまぁその辺はうまいことどうにかしてやってください（瀧汗

※ 追記 ※
Google の「No more 豆腐」と呼ばれるフォントのインストール方法
sudo apt install fonts-noto-cjk
中国語(C)と日本語(J)と韓国語(K)が一緒くたに入っちゃう感じっぽいです

そんな下準備が済んだトコロで…現在システムに入ってるフォントの一覧を取得する方法です　それには fc-list ってコマンドを使うんだけど…日本語に非対応なフォントとかも羅列されて心もち見づらいんでその辺を絞り込んで表示させてみましょう
fc-list :lang=ja | sort | uniq
sort と uniq は並べ替えてダブり行を除去してくれるんで見やすくなると思います
ここで表示される内容は…フォントのパス付きファイル名とフォントファミリー名とスタイルです　後に説明する GD のフォント指定で…何となくフォントのパス付きファイル名で指定してたんだけどそれではダメでデフォルトのフォントが使用され続けてて悩んでたんだけどどうやら「フォントファミリー名：スタイル」で指定するといいって事を突き止めたんで
fc-list -f '%{family}:%{style}\n' :lang=ja | sort | uniq
このようなオプション指定で実行するといいと思います

実行すると（環境によって違うと思うけど）こんな感じの一覧が出ます
Droid Sans Fallback:Regular
IPAexゴシック,IPAexGothic:Regular
IPAex明朝,IPAexMincho:Regular
Noto Sans CJK JP,Noto Sans CJK JP Black:Black,Regular
Noto Sans CJK JP,Noto Sans CJK JP Bold:Bold,Regular
Noto Sans CJK JP,Noto Sans CJK JP DemiLight:DemiLight,Regular
Noto Sans CJK JP,Noto Sans CJK JP Light:Light,Regular
Noto Sans CJK JP,Noto Sans CJK JP Medium:Medium,Regular
Noto Sans CJK JP,Noto Sans CJK JP Regular:Regular
Noto Sans CJK JP,Noto Sans CJK JP Thin:Thin,Regular
Noto Sans CJK KR,Noto Sans CJK KR Black:Black,Regular
---- 中略 ----
この中から使いたいフォントの行をコピーして後の GD のフォント指定に使用するといい感じに使えるようです　そして今後は「IPAex明朝,IPAexMincho:Regular」を使って話を進めていきます

それでは早速その辺を使ったサンプルを作ってみますかね

----------

#!/usr/bin/perl
use GD::Simple;

$img_obj = GD::Simple->new(500, 500);

$img_obj->font('IPAex明朝,IPAexMincho:Regular'); # フォント
#$img_obj->font('/usr/share/fonts/opentype/ipaexfont-mincho/ipaexm.ttf'); # このフォント指定じゃダメみたい
$img_obj->fgcolor('red'); # 文字色
$img_obj->fontsize(30); # フォントサイズ
$img_obj->moveTo(20, 100); # 始点 x, y
$img_obj->string("日本語フォント表示\nRaspberry Pi\n1234567890"); # 文字列（最後に記述）

# ファイルへ出力
#open(IMG, "> gd_out1.gif"); # GIF で出力
#open(IMG, "> gd_out1.jpg"); # JPEG で出力
open(IMG, "> gd_out1.png"); # PNG で出力
binmode IMG; # バイナリ・ストリームへ書き込む
#print IMG $img_obj->gif(); # GIF で出力
#print IMG $img_obj->jpeg(100); # JPEG (品質：0〜100) で出力
print IMG $img_obj->png(); # PNG で出力
close(IMG);

----------

実行すると以下のような感じの画像が生成されると思います

今回は PNG で保存してみましたが GIF や JPEG でも保存できます　「ファイルへ出力」の辺りのコメントアウトしてある部分で切り替えられるんで試してみてください

　　：

そんな Perl で画像を生成するって話だと…既存の画像を読み込んで文字とかを描き込んで使いたい場合があると思います　そんな時には以下のように指定します

[サンプル画像]

----------

#!/usr/bin/perl
use GD::Simple;

#$img_obj = GD::Simple->newFromGif("./gd_test2.gif"); # GIF 画像の時
#$img_obj = GD::Simple->newFromJpeg("./gd_test2.jpg", 1); # JPEG 画像の時　最後の「1」は True Color のフラグ？（未解明）
$img_obj = GD::Simple->newFromPng("./gd_test2.png", 1); # PNG 画像の時　最後の「1」は True Color のフラグ？（未解明）

$img_obj->font('IPAex明朝,IPAexMincho:Regular'); # フォント
$img_obj->fgcolor('red'); # 文字色
$img_obj->fontsize(30); # フォントサイズ
$img_obj->moveTo(20, 100); # 始点 x, y
$img_obj->string("日本語フォント表示\nRaspberry Pi\n1234567890"); # 文字列（最後に記述）

# ファイルへ出力
#open(IMG, "> gd_out1.gif"); # GIF で出力
#open(IMG, "> gd_out1.jpg"); # JPEG で出力
open(IMG, "> gd_out1.png"); # PNG で出力
binmode IMG; # バイナリ・ストリームへ書き込む
#print IMG $img_obj->gif(); # GIF で出力
#print IMG $img_obj->jpeg(100); # JPEG (品質：0〜100) で出力
print IMG $img_obj->png(); # PNG で出力
close(IMG);

----------

実行すると以下のように読み込んだ画像の上に文字を描き込んだ画像が出力されます

ちゃんと文字が描き込まれていますね　なお色数の多い JPEG と PNG は True Color フラグとなる「1」を指定しておかないと色が正しく再現されないような感じでした

　　：

お次は複数の画像を読み込んで 1 枚の画像に合成するってのをやってみます

[サンプル画像]

----------

#!/usr/bin/perl
use GD::Simple;

$img_obj = GD::Simple->new(500, 500, 1); # 最後の「1」は True Color のフラグ？（未解明）

$img_gif = GD::Image->newFromGif("./gd_test2.gif"); # GIF 画像の時
$img_jpg = GD::Image->newFromJpeg("./gd_test2.jpg", 1); # JPEG 画像の時　最後の「1」は True Color のフラグ？（未解明）
$img_png = GD::Image->newFromPng("./gd_test2.png", 1); # PNG 画像の時　最後の「1」は True Color のフラグ？（未解明）

# 参考までに…読み込んだ画像の簡易な情報を表示
($width, $height) = $img_gif->getBounds();
$is_truecolor = $img_gif->isTrueColor();
print "GIF:[$width][$height][$is_truecolor]\n";
($width, $height) = $img_jpg->getBounds();
$is_truecolor = $img_jpg->isTrueColor();
print "JPG:[$width][$height][$is_truecolor]\n";
($width, $height) = $img_png->getBounds();
$is_truecolor = $img_png->isTrueColor();
print "PNG:[$width][$height][$is_truecolor]\n";

# コピー元オブジェクト, コピー先X座標, コピー先Y座標, コピー元X座標, コピー元Y座標, 横サイズ, 縦サイズ
$img_obj->copy($img_gif, 0, 150, 200, 140, 200, 200); # GIF 画像をコピーする
$img_obj->copy($img_jpg, 180, 280, 240, 135, 200, 200); # JPEG 画像をコピーする
$img_obj->copy($img_png, 300, 100, 140, 140, 200, 200); # PNG 画像をコピーする

$img_obj->font('IPAex明朝,IPAexMincho:Regular'); # フォント
$img_obj->fgcolor('red'); # 文字色
$img_obj->fontsize(30); # フォントサイズ
$img_obj->moveTo(20, 100); # 始点 x, y
$img_obj->string("日本語フォント表示\nRaspberry Pi\n1234567890"); # 文字列（最後に記述）

# ファイルへ出力
#open(IMG, "> gd_out1.gif"); # GIF で出力
#open(IMG, "> gd_out1.jpg"); # JPEG で出力
open(IMG, "> gd_out1.png"); # PNG で出力
binmode IMG; # バイナリ・ストリームへ書き込む
#print IMG $img_obj->gif(); # GIF で出力
#print IMG $img_obj->jpeg(100); # JPEG (品質：0〜100) で出力
print IMG $img_obj->png(); # PNG で出力
close(IMG);

----------

実行すると以下のように読み込んだ画像の指定範囲を切り抜き合成してその上に文字を描き込んだ画像が出力されます

なお画像の copy にはパラメータを全て指定する必要があるようです　ちょっと面倒ですね(-_-；)　今回は指定範囲を切り抜くような形でコピーしたけど…サイズが不定な画像を読み込んだ際に正しく範囲指定できるように読み込んだ画像サイズを取得できる getBounds ってのも使っているので参考までに

なお既存のファイルを読み込む際に newFromGif や newFromJpeg や newFromPng といった感じに予め画像フォーマットを知っておく必要があるようです　しかしざっと調べた感じでは GD で画像フォーマットを調べる術がないようなんで…ちょっと困りますね
そこで標準的に用意されている file コマンドを使って画像フォーマットを調べるサンプルを即興で用意してみました

----------

#!/usr/bin/perl

$cmd = 'file -b -i'; # file コマンドを使う
$file = './gd_test2.gif'; # 画像ファイル名 [GIF]
#$file = './gd_test2.jpg'; # 画像ファイル名 [JPEG]
#$file = './gd_test2.png'; # 画像ファイル名 [PNG]

chomp($res = `$cmd $file`); # コマンドを実行して出力を取り込む
if ($?) { die "Command error:"; } # 何らかのエラーが発生
print "$res\n"; # コマンドを実行した出力はこんな感じ

if ($res =~ /^cannot open/) { # file コマンドが何らかのエラーを返した
  print "File error: $file\n";
} elsif ($res =~ /^image\/gif;/) { # GIF ファイルらしい
  print "[\$img_obj = GD::Simple->newFromGif(\"$file\"); を使う]\n";
} elsif ($res =~ /^image\/jpeg;/) { # JPEG ファイルらしい
  print "[\$img_obj = GD::Simple->newFromJpeg(\"$file\"); を使う]\n";
} elsif ($res =~ /^image\/png;/) { # PNG ファイルらしい
  print "[\$img_obj = GD::Simple->newFromPng(\"$file\"); を使う]\n";
} else { # それ以外のファイルっぽい
  print "扱えないファイルです(-_-；)\n";
}

----------

file コマンドについて詳しく調べてないんでアレなんだけど…これで概ね画像フォーマットを特定できると思います　この辺ちょっと面倒ですね(-_-；)

まぁそんなこなんで時既に情報が古すぎて調べられない GD::Simple のアレこれをまとめてみました　この GD::Simple は…その昔の N88-Disk Basic の LINE 文や CIRCLE 文とかでお絵描きしてた頃のようなシンプルな操作で作画できて懐かしく思ったりしながら愛用しています　しょーみこれを今さらわざわざ使おうって思う人も居ないかなーって思いつつ今後の参考ってことで残しておきます　長々とお疲れさまでした！ #[Raspberry Pi] #Perl

Arduino Leonardo (Pro Micro) でマルチメディアキーボードを作ろう！

　
前回に引き続き Arduino 的な諸々をひとつって事で…マルチメディア・キーボードって云うんですかね？

＋α的に実装されている音量調節などのキーとかノート PC でよく見かける Fn キーと併用して使える再生とか早送りなどのキーを ATmega32U4 を搭載した Arduino Leonardo (Pro Micro) でどうにかしてみるお話です

そんな今回の実験の様子

以前のマウスクリック超連射実験の回路がくっついたままなんで判りにくいですよね…


申し訳程度に回路図を描いてみたけど…それでも判りづらいですよね（汗　まぁとにかく 2 番ピンと 3 番ピンを使用しました

今回のマルチメディア・キーボード(？)的な機能を簡単に実装するためにライブラリを追加してみました

Arduino IDE で [スケッチ] → [ライブラリをインクルード] → [ライブラリ管理] してライブラリ管理画面を出す


目的のライブラリを「hid」ってキーワードで検索して…出てきた「HID-Project」をインストールする　※画面は既にインストール済みだけどまぁそんな感じで（汗

後は Arduino IDE でこんな感じのを用意してそれをマイコンボードに書き込みます

----------

// include the HID library
#include "HID-Project.h" // 今回インストールしたやつをインクルードする

// definitions for each pin used
const int pinLed = LED_BUILTIN;
const int playButton = 2; // 今回使うピン番号
const int fwdButton = 3; // 今回使うピン番号
const int backButton = 4; // 以下今回は使わない(-_-；)
const int volUpButton = 5;
const int volDwnButton = 6;
const int muteButton = 7;


void setup() {
  // define the pin mode for each pin used
  pinMode(pinLed, OUTPUT);
  pinMode(playButton, INPUT_PULLUP); // 今回使うピン番号
  pinMode(fwdButton, INPUT_PULLUP); // 今回使うピン番号
  pinMode(backButton, INPUT_PULLUP); // 以下今回は使わない(-_-；)
  pinMode(volUpButton, INPUT_PULLUP);
  pinMode(volDwnButton, INPUT_PULLUP);
  pinMode(muteButton, INPUT_PULLUP);

  // begin HID connection
  Consumer.begin();
}

void loop() {
  if (!digitalRead(playButton)) {
    digitalWrite(pinLed, HIGH); // turn on LED
    Consumer.write(MEDIA_PLAY_PAUSE); // 一時停止・再生的なコマンド
    delay(500); // 動作確認用の LED 点滅
    digitalWrite(pinLed, LOW); // turn off LED
  }
  
  if (!digitalRead(fwdButton)) {
    digitalWrite(pinLed, HIGH);
    Consumer.write(MEDIA_NEXT); // 次の曲的なコマンド
    delay(500); // 動作確認用の LED 点滅
    digitalWrite(pinLed, LOW);
  }
}

----------


Ubuntu 20.04.3 LTS と Audacious 3.10.1 で動作チェックしたところ…「再生/一時停止」と「次の曲」の動作をタクトスイッチの押下にて実現できました　やったね！

わりと入手しづらいイメージのマルチメディア・キーボード(？)の拡張部分を Arduino Leonardo (Pro Micro) でどうにかできる事が判明しました　後は程よいケースとスイッチを用意すれば完成なんだけど…それはまた後の話ってかんじで

　　：

他にも機能があるっていうか…キーコードは Arduino/libraries/HID-Project/src/HID-APIs/ConsumerAPI.h に定義されています　※ファイルの場所は環境によって異なる場合があります

enum ConsumerKeycode : uint16_t {
  // Some keys might only work with linux
  CONSUMER_POWER = 0x30,
  CONSUMER_SLEEP = 0x32,

  MEDIA_RECORD = 0xB2,
  MEDIA_FAST_FORWARD = 0xB3,
  MEDIA_REWIND = 0xB4,
  MEDIA_NEXT = 0xB5,
  MEDIA_PREVIOUS = 0xB6,
  MEDIA_PREV = 0xB6, // Alias
  MEDIA_STOP = 0xB7,
  MEDIA_PLAY_PAUSE = 0xCD,
  MEDIA_PAUSE = 0xB0,

  MEDIA_VOLUME_MUTE = 0xE2,
  MEDIA_VOL_MUTE = 0xE2, // Alias
  MEDIA_VOLUME_UP = 0xE9,
  MEDIA_VOL_UP = 0xE9, // Alias
  MEDIA_VOLUME_DOWN = 0xEA,
  MEDIA_VOL_DOWN = 0xEA, // Alias

  CONSUMER_BRIGHTNESS_UP = 0x006F,
  CONSUMER_BRIGHTNESS_DOWN = 0x0070,

  CONSUMER_SCREENSAVER = 0x19e,

  CONSUMER_PROGRAMMABLE_BUTTON_CONFIGURATION = 0x182,
  CONSUMER_CONTROL_CONFIGURATION = 0x183,
  CONSUMER_EMAIL_READER = 0x18A,
  CONSUMER_CALCULATOR = 0x192,
  CONSUMER_EXPLORER = 0x194,

  CONSUMER_BROWSER_HOME = 0x223,
  CONSUMER_BROWSER_BACK = 0x224,
  CONSUMER_BROWSER_FORWARD = 0x225,
  CONSUMER_BROWSER_REFRESH = 0x227,
  CONSUMER_BROWSER_BOOKMARKS = 0x22A,

今回使った MEDIA_PLAY_PAUSE と MEDIA_NEXT の他にもいろいろあります　例えば CONSUMER_BROWSER_REFRESH を超連打して…いわゆる F5 アタックを実装するのもいいかもしれません　※やめて！(>_<)ｑ

　　：

まぁざっくりこんな感じですかね　これを用いてちょっと便利な補助キーボードを作れるとイイナ！ #Arduino

Arduino Leonardo (Pro Micro) でマウスクリック連射装置を作ろう！

　
ワンボードマイコンっていうか…ここんとこ Arduino が人気沸騰で気になりますよね！って事なんでモノは試しに安っすい VKLSVAN Pro Micro USB ATmega32U4 を買ってぼちぼちイジってみることにしました


まぁなんか Arduino にもいろいろあるようで…その中で ATmega32U4 を搭載した Arduino Leonardo と呼ばれるものが HID 機能を搭載しているって事で気になっていました　そんな Arduino Leonardo の互換機が今回購入した Pro Micro って感じです
その HID 機能とはなんぞや？って話ですがまぁざっくり PC の標準的なキーボードやマウスを指すようです　要するに USB 接続した Arduino Leonardo (Pro Micro) がキーボードやマウスに化けるって事なんですね
そこで今回は連打系ブラウザゲーとして名高い CookieClicker を超連射できるボタンを実装してみることにしました


そんな Pro Micro のピン配列図　なんかいろいろ書いてあるけど…単純な On/Off スイッチを付ける場合は 　Arduino　 と色付けされた 0 から 20 までのピンを使うようです


それを今回はこんな感じで 10 番ピンに配線しました
そしてお次はそれを制御するプログラムで…

----------

#define RX_LED 17 // RX LED はポート 17 っぽい？
#define TX_LED 30 // TX LED はポート 30 っぽい？
#define SW 10 // スイッチ用
#include <Mouse.h> // マウス機能を使いたい

void setup() {
  pinMode(SW, INPUT_PULLUP);
  Mouse.begin();
}

void loop() {
  if(!digitalRead(SW)) {
    digitalWrite(TX_LED, LOW); // TX LED を点灯
    //Mouse.click();
    //delay(100);
    Mouse.press(MOUSE_LEFT);
    //delay(17); // 最速
    delay(20);
    Mouse.release(MOUSE_LEFT);
    //delay(9); // 最速
    delay(10);
    digitalWrite(TX_LED, HIGH); // TX LED 消灯
  } else {
    digitalWrite(RX_LED, LOW); // RX LED を点灯
    delay(40);
    digitalWrite(RX_LED, HIGH); // RX LED 消灯
    delay(20);
  }
}

----------

Arduino IDE でこんな感じのを用意してそれをマイコンボードに書き込みます　書き込まれた後に直ちに動作を開始します
スイッチが Off の時には基板上の LED が細かく点滅しています　スイッチを On にするとマウスクリックの連射が始まります

マウスのクリックには Mouse.click(); って関数と Mouse.press(); Mouse.release(); とを選べるようです
Mouse.click(); は…いい感じに「押して離す」をまとめて実行できるようです
Mouse.press(); は…ドラッグ操作っていうんですかね　この関数を実行するとマウスボタンが押されたままになり Mouse.release(); を実行するとマウスボタンが離されます

どちらの関数をどのようなタイミングで繰り返すかは個々の環境によって違うかと思いますが…

我が家の環境では Mouse.press(); Mouse.release(); を使って 1 秒間に 38 連射を記録しました → マウスクリック連射速度テスト
高橋名人もびっくりな超高速連射を実装できて満足しました！

Arduino Leonardo (Pro Micro) の HID 機能は手軽に有用な機能を実装できてなかなか楽しいです　またぼちぼちイジっていきたいと思いました #Arduino