FitBit Versa SDK に Image Grayscale Magic! という「8-bit Grayscale PNG を用意してSVGから <image>
で読み込むと fill プロパティで色指定が出来るよ!」とうのがあってですね、実際に ImageMagick で変換したんだけどまあうまくいかなくて軽くハマったのでメモ…
% convert original.png -colorspace gray tmp.png
% convert tmp.png -background white -flatten tmp.png
要は Alpha channel があるとちゃんと表示されないらしい。将来のSDKでは直るのかもしれないけど…。
ちなみに FitBit SDK の SVG で fill で塗られる色はどうやら白色らしいので、元が白(ないし透明)地に黒のアイコンの場合は白黒反転させる。
% convert tmp.png -negate dest.png
なお結果はこんな感じになるのが正解っぽい。
% identify dest.png
dest.png PNG 64x64 64x64+0+0 8-bit Gray 256c 1619B 0.000u 0:00.000
% file dest.png
dest.png: PNG image data, 64 x 64, 8-bit grayscale, non-interlaced
→
ここで gray+alpha になってたりするとうまくいかなかった。8-bit Grayscale Gray じゃなく 8-bit Gray 256c の方が問題なく動く気がするけど気のせいかも。なんにしてもこんなのはすんなり使えて欲しい。
おまけでサイズ変更もする場合。ここでは元の画像を縮小し、正方形の 64x64 アイコン画像にしている。
% convert original.png -colorspace gray tmp.png
% convert tmp.png -resize 64 -background white -flatten tmp.png
% convert tmp.png -gravity center -extent 64x64 tmp.png
% convert tmp.png -negate dest.png
この辺、ImageMagick の常ではあるんだけど、コマンド引数や実行の順番を守らないと画像が何故か2値になって色がつぶれたり Versa で認識できなくなったりなんだりあってきっと理由はあるんだけど黒魔術をこれ以上追う元気がない。なお複数ファイルに一括で処理を回すなら convert
の代わりに mogrify
を使うなり shell 内で for / foreach で回すなりしましょう。