Connect IQ SDKを使って、歩数に応じた顔文字を表示させるウォッチフェイスを作ってみる

#■はじめに
年末になり時間が出来たので、ガーミンのスマートウォッチ用に自分用のウォッチフェイスを作ってみました！
今回のゴールはConnectIQストアに公開するとかではなく、普段ランニングに使用しているスマートウォッチ「ForeAthlete 245 Music」に自作のウォッチフェースを表示させるまでとしました。

#■イメージ
まずレイアウトを考えてみます。
コロナ禍で運動量が減ってきているので、「自然と歩数を増やしたくなるウォッチフェイス」という事で、歩数に応じて表示させる顔文字を分岐させる事を目指しました。

表示させる顔文字は、2000歩ずつでこんな風に変えてみます。

#■顔文字が表示できないと気付く。。
環境構築後、サンプルプログラムで色々試してみた所、文字列として 顔文字😊 を表示させてみようとしても表示されません。。
色々やり方はあるのかもしれませんが、手っ取り早い方法として、事前に顔文字の透過pngを用意して表示させる方法にしました。

とはいえ、画像の表示の仕方がいまいち分からない為、sdkをインストールした際に一緒に入ってくるサンプルプログラムを一通り調べてみると、「Drawable」というプロジェクトを見つけました。本サンプルで雲がアニメーションで流れるサンプルで、リソースフォルダの画像を読み込む良いサンプルになりました。

透過pngの作成は、以下サイトを利用させて頂きました！
https://www.peko-step.com/tool/alphachannel.html

####① resource側の手順
【bitmaps.xml】
用意した透過pngをimagesフォルダに格納後、XMLに追加した画像を追記します。

<resources>
    <bitmap id="LauncherIcon" filename="launcher_icon.png" />
    <bitmap id="face1" filename="icon.png" />
    <bitmap id="face2" filename="icon2.png" />
    <bitmap id="face3" filename="icon3.png" />
    <bitmap id="face4" filename="icon4.png" />
    <bitmap id="face5" filename="icon5.png" />
</resources>

####② 画像の読み込み＆表示
【watchfaceView.mc】
・グローバル変数
サンプルに倣い、画像用変数をグローバル変数に追記。

var face1; // 顔文字１
var face2; // 顔文字２
var face3; // 顔文字３
var face4; // 顔文字４
var face5; // 顔文字５
var distance; // 歩数退避用

・initializeメソッド
用意したリソースを読み込みます。
※今回は自分用ウォッチフェイスとして作成したので、ForeAthlete 245 Music以外だと狙った位置に表示されない可能性があります。

face = new WatchUi.Bitmap({:rezId=>Rez.Drawables.face1,:locX=>80,:locY=>50});
face2 = new WatchUi.Bitmap({:rezId=>Rez.Drawables.face2,:locX=>80,:locY=>50});
face3 = new WatchUi.Bitmap({:rezId=>Rez.Drawables.face3,:locX=>80,:locY=>50});
face4 = new WatchUi.Bitmap({:rezId=>Rez.Drawables.face4,:locX=>80,:locY=>50});
face5 = new WatchUi.Bitmap({:rezId=>Rez.Drawables.face5,:locX=>80,:locY=>50});

・onUpdateメソッド
ActivityMonitor.getIofo()より、歩数情報を取得できるので、歩数に応じて表示させる顔文字を分岐させます。

// アクティビティ情報取得
var info = ActivityMonitor.getInfo();

// 歩数情報取得
distance = info.steps;

// 歩数により顔文字表記を分岐
if(distance <= 2000) {
    face1.draw(dc);
}else if (distance <= 5000) {
    face2.draw(dc);
}else if (distance <= 7500) {
    face3.draw(dc);
}else if (distance <= 10000) {
    face4.draw(dc);
}else{
    face5.draw(dc);
}

試行錯誤を繰り返した結果、以下の様に表示出来ました！
※心拍数やバッテリー値は、調査の過程で表示の仕方が分かったのでついでに表示しています笑。　

#■実機に転送してみる。
①メニュー⇒Connect IQ⇒Build For Device Wizard..を選択。

②本メニューで prgファイルが作成されます。
自環境では「watchface.prg」が作成されました。

③スマートウォッチをUSB接続し、garminフォルダのappフォルダ配下に格納すると、、
出来た！歩数を増やすとちゃんと表情も変わりました！これで運動に対するモチベーションがちょっとUPしました。

#■参考になったサイト
調査の過程で参考にさせて頂いたサイトです。公式のマニュアルが日本語化されていなかったので、とても助かりました。

Take4-blue
⇒全般的な実装の流れを学ぶ際にとても参考になりました。

旅に出たり、走ったり、旅に出て走ったり
⇒実機に資産を転送する手順で参考になりました。

#■今後試したいこと。
ウォッチフェイスを作っている過程で、色々試したい事が増えてきました。
・ 画像をアニメーションさせてみたい。
・ ウォッチフェース以外（アクティビティとか）も作ってみたい。
・ connectiqストアに登録してみたい。

今後、少しずつ試してみたいです！