FitBit Versa 用の 8-bit Grayscale PNG 作成

Posted 5 months ago by yoosee.
  versa fitbit

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

before convert

after convert

ここで 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 で回すなりしましょう。

 

Fitbit studio obsidian project
FitBit Versa 用ウォッチフ...
FitBit Versa 用ウォッチフェイス Obsidian を書いた際に使った FitBit Dev の開発概要を以下にざっくり記載する。基本的には ...
  programming versa fitbit   5 months ago
Fitbit versa watchface obsidian
FitBit Versa 用のウォッチ...
スマートウォッチを使う楽しみの一つは自分で作ったウォッチフェイスを使えることだと思っていて Pebble 用にも Obsidian Watchface f...
  smartwatch versa fitbit   5 months ago
Fitbit versa watch
FitBit Versa レビュー
少し前から「買収したPebbleの遺伝子を引いている」との評判がある Fitbit Versa を使っているので簡単に利用感をレビューする。スペックなどは...
  smartwatch versa fitbit   5 months ago