More than 3 years have passed since last update.

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

Posted at 2020-12-31

■はじめに

年末になり時間が出来たので、ガーミンのスマートウォッチ用に自分用のウォッチフェイスを作ってみました！
今回のゴールは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);
}

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