第9回　Garmin本体にアプリを移す【Garmin Programming】

こんにちは。継続のコツは「しれっと再開すること」だそうです。
前回作ったウォッチフェイスを少し調整し、加えてGarmin本体に移すまで。
調整するのは、画像の表示サイズです。今日は自宅のWin環境から。

前回までの成果物

前回は背景画像を表示できたものの、デカすぎたのではみ出ていた、というところまで来ていました。

今日は別でいじっていた自宅のWinぱそからなので少し見た目は変わっていますが、基本は同じ。こちらの背景画像は外側が丸なのですが、見切れています。

元画像。myBitmap.pngです。

コードも載せておきます。
こうしてみると分量が多いけど、ほとんどが初期設定（サンプルコード）として入れてくれるものなので、自分で書く部分はほとんどありません。
変更すべき場所の目安としてのせています。

layout.xml

<layout id="WatchFace">
	<bitmap id="myBitmap" x="center" y="center" filename="../images/myBitmap.png"/>
  	<label id="TimeLabel" x="center" y="center" font="Graphics.FONT_LARGE" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_WHITE" />
</layout>

TestProjectView.mc

using Toybox.WatchUi;
using Toybox.Graphics;
using Toybox.System;
using Toybox.Lang;

var mybitmap;

class TestProjectView extends WatchUi.WatchFace {

   function initialize() {
       WatchFace.initialize();
       mybitmap = new WatchUi.Bitmap({
       	:rezID => Rez.Drawables.myBitmap,
       	:locX => "50%",
       	:locY => "50%"
       });
   }

   // Load your resources here
   function onLayout(dc) {
       setLayout(Rez.Layouts.WatchFace(dc));
   }

   // Called when this View is brought to the foreground. Restore
   // the state of this View and prepare it to be shown. This includes
   // loading resources into memory.
   function onShow() {
   }

   // Update the view
   function onUpdate(dc) {
       // Get and show the current time
       var clockTime = System.getClockTime();
       var timeString = Lang.format("$1$:$2$:$3$", [clockTime.hour, clockTime.min.format("%02d"),clockTime.sec.format("%02d")]);
       var view = View.findDrawableById("TimeLabel");
       var view2 = View.findDrawableById("Label");
       view.setText(timeString);
       mybitmap.draw(dc);
       // Call the parent onUpdate function to redraw the layout
       View.onUpdate(dc);
   }

   // Called when this View is removed from the screen. Save the
   // state of this View here. This includes freeing resources from
   // memory.
   function onHide() {
   }

   // The user has just looked at their watch. Timers and animations may be started here.
   function onExitSleep() {
   }

   // Terminate any active timers and prepare for slow updates.
   function onEnterSleep() {
   }

}

GarminDevicesの仕様一覧

さて改めて調べてみると、アプリ上でサイズ変更の方法は、ありません(！)
え、えー、、、
一つの画面に対して、絶対サイズで背景画像を一つ作る必要があります。

VenuSQの画面サイズ（解像度）は、240×240px。16ビットカラ―です笑。
仕様はこちらのページから見られます。

Reference Guides

それぞれのデバイスに対して、画面の形、解像度、TouchScreenかどうか、使える色数、アイコンの大きさ、物理ボタンの名前が調べられます。

VenuSQの場合、物理ボタンは本体には２コしかついていないんですが、先ほどのページだと、enter, esc, menuの３種類あるなどよくわからないところもあります。

画像サイズを直してみる

ともかく、画像の大きさを合わせて表示してみると、

やはり若干の粗さは目立つものの、きちんと表示ができました。デザインとしてはいまいちですが、ひとまずこれを実際にVenuSQへ移します。

Garmin本体へアプリ（ウォッチフェイス）を移す

Connect IQ > Build For Device Wizard、

書き出したいフォルダを選んで、Finish。

書き出しが終わっても特に表示はないので、先ほどChoose the output directoryで指定したフォルダに行くとPRG形式のファイルができているはず。
Garminをパソコンへつないで、
Primary > GARMIN > APPS へPRGファイルを移します（ドラッグ＆ドロップでオッケー）。
パソから外して、本体からウォッチフェイスの選択画面に行くと、自分が作ったものが選べるようになっています。

また、パソコン用のGarminカスタマイズアプリ、Garmin Expressからも入っている状態が確認できます。

実際に設定してみるとこんな感じ。時計としてはかなり見辛いですね。

でも自分が作ったオリジナルの時計盤が表示されるのは、やっぱりうれしさひとしおですね！

次回は時計の数字をカスタマイズします。