Garmin ウォッチ用ウォッチフェイスを作る（その３）

アプリ開発 ギア

前回は、文字表示について、時、分を大きな文字で表示し、その下に秒の表示、更に、上部に月、日、曜日を表示するところまでやりました。
alasixosaka.hatenablog.com
今回は、グラフィックスを使ってバッテリーの残量表示をしてみたいと思います。
まずは、バッテリーの残量を取得しないといけません。いつもお世話になっているこのサイトによると、
take4-blue.com
バッテリーの残量は、System.getSystemStats().battery　で取得することができそうです。
そこでまず、例によってlayout.xmlを編集して下の一行を追加します。

<label id ="BatLabel" x="180" y="210" font="Graphics.FONT_TINY" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_WHITE" />

ラベルのIdはBatLabelでフォントは小さくするためTINYを使いました。
次にfunction onUpdateに次の一行を追加します。

var batt = System.getSystemStats().battery;

これで、変数battにバッテリーの残量が入ります。
そして、

var battString = Lang.format("$1$%", [batt.format("%02d")]);

と

var view4 = View.findDrawableById("BatLabel") as Text;

更に

view4.setText(battString);

を追記すると右下に小さくバッテリー残量が表示されます。

バッテリー残量が表示された

グラフィックスを追加する

確かにこれで残量が数字で表示されるようになったんですが、やっぱりアイコンチックなものが欲しい。
そこで、数字の左にアイコンを表示するようにしてみた。
アイコンはフリーの素材のがいろいろネットに落ちているので好きなのを選んでダウンロードして使えばよいが、自分はここのサイトのを使ってみた。
www.mingcute.com
サイズが豊富なのと色も自由に変更できるのが良い。
色々サイズを試してみたが、24pxelがちょうどよいようだ。バッテリーのアイコンを適当にダウンロードして、drawableのフォルダに入れる。
参考にさせていただいているmayoさんのこちらのサイトにも画像を表示する方法が書いてあるが、実はここに書いてある、layout.xmlにビットマップを追記する方法だと常に表示されることになってしまう。つまり、書いたり消したりが自由にできない。
note.com
どうも、文字盤の背景なんかを表示する方法のようだ。
バッテリーの残量表示は残量によってアイコンを切り替えたいので、常に表示は困る。試しに、２つのアイコンを登録してみたが、２つのアイコンが重なって表示され、後に書いた方で上書きされてしまった。また、スマホとbluetoothで接続されているかどうかをアイコンで表示したり、メッセージがスマホに来ているかどうかをアイコンで表示したりするのにも必要に応じてアイコンを書いたり消したりする必要がある。
別の方法はないかと探したところ、connect IQのフォーラムに、下記の記事を見つけた。
forums.garmin.com
この方法によると、ビットマップをdrawableに登録して表示するらしい。Androidでもdrawableにビットマップを登録して表示していたので、そうなんじゃないかと思っていたがやっぱりそうだった。具体的には下記の手順で追記をすればよい。
まず、drawableにビットマップを登録する。デフォルトではランチャーアイコンが登録されてるはずなので、その下に次の文を追記する。ファイル名は先ほどdrawableフォルダにダウンロードしたアイコンのファイル名。

<bitmap id="BAT1" filename="battery_1_line.png" />

それから、watchfaceView.mcに戻って、ビットマップ表示のための変数を定義する。ここではBAT1とした。

var BAT1;

次に、function onLayoutに下記の文を追記する。

BAT1 = WatchUi.loadResource(Rez.Drawables.BAT1);

最後に、function onUpdateのView.onUpdate(dc);の後に

dc.drawBitmap(140,210, BAT1);

を追記する。これでアイコンが表示される。表示したくない時は最後に追記した文を実行しなければよい。if文などで判断して表示するしないを決定すればよい。

バッテリーのアイコンが表示された

図形描画で対応させてみる

上の方法で、バッテリー残量によってアイコンの表示を切り替えて表示しようと最初は考えていたが、APIを読んでいると、四角形を描画するコマンドが用意されているのを発見した。アイコンで何段階かに分けてアイコンを切り替えていく方法もよいが、図形描画を使えばもっと細かく視覚的に表示が可能になる。
しかも、描画の方が簡単で手間が少ない。
やり方はfunction onUpdateの最後に下記の３文を追記するだけです。

dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_BLACK);
dc.drawRectangle(140, 217, 20, 10);
dc.fillRectangle(140, 217, 20*batt/100, 10);
残量がグラフィカルに表示された

だいぶコツがつかめてきた。この調子で残りの表示部分も完成させてみたいと思っています。