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

前回は、開発環境を整えて、とりあえず基本的なプログラムをシミュレータで動かすところまでやりました。
alasixosaka.hatenablog.com
そのままでは、文字がちっちゃいし、時と分のみの表示で面白くないので、今回は、表示を色々弄ってみたいと思います。
今回は、基本的にはこちらのサイトを参考にしました。
note.com
何回か記事があるので、順番に読んでいけばかなり参考になります。
実は、前回参考にしたこちらのサイトの続きの記事で結構いいウォッチフェイスを作っておられたのでそのまま使わせてもらおうかと思ったのですが、ここに掲載されているプログラムそのままでは動きませんでした。世の中そう甘くはないか。
take4-blue.com
どうも、SDKの仕様が変わっているらしく、メインのソースコードだけでは動かない仕様になっているらしい。細かいことは、mayoさんのサイトの記事を読んでいけばいろいろと書いてあるのでここでは詳しくは書きませんが、manifestがあったり、drawableやlayoutやらStringなど何となくAndroidチックになっている。Andoroidのアプリ開発の経験があればmayoさんの記事を読んでいくだけで何となくやり方がわかっていくのではないかと思います。

秒の表示とテキストの表示

まず、上にリンクを貼ったmayoさんの記事の通りに、秒の表示とその上に重ねるように”aaa"の表示をやってみました。当然同じ結果になりました。なので、詳細は省略します。とりあえず、やってみて感じをつかむのが大事。
次に、時、分の表示とは別に秒の表示をさせてみました。
1行で秒まで表示していたのを時と分の表示にするようにデフォルトに戻します。
それから、layout.xmlに1行追加します。mayoさんの記事の通りやっていれば、すでに追加されているはずです。追加されていれば書き換えます。追加するのは、次の一行です。

<label id="Label" x="140" y="180" font="Graphics.FONT_LARGE" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_BLUE" />

xとｙの値は表示の位置を示しています。位置の設定は、center, top, bottom, left, rightという位置指定以外に、相対位置指定（多分前の表示からの相対位置）と絶対位置指定の３種類があります。ここでは絶対位置指定を使っています。
それから、watchfaceView.mcのfunction onUpdateに次の３行を追加します。ちなみに、watchfaceというのはこのプロジェクトの名前です。ですので、プロジェクト名View.mcというファイル名ということです。

var timeString2 = Lang.format("$1$", [clockTime.sec.format("%02d")]);
var view2 = View.findDrawableById("Label") as Text;
view2.setText(timeString2);

これで秒が少し離れた右下に表示されます。

文字を大きくしてみる

このままではまだ文字が小さくて見づらいので、時、分の表示を大きくしてみます。公式のAPIを見るとフォントはいろいろあるようですが、用意されているフォントはどれも形はほぼ同じでサイズが違うだけのようです。
developer.garmin.com
この中で、時計のメインの表示である時、分の表示に使えそうな大きな文字は、HOTかTHAI_HOTとついているやつです。layout.xmlのfont="Graphics.FONT_LARGEの部分をfont="Graphics.FONT_NUMBER_THAI_HOT"として、一番大きな文字にしてみました。

だいぶ見やすくなりました。

日付、曜日の表示

時刻が表示できたので、今度は日付と曜日を表示してみます。
時刻は、ひな形のまんま、var clockTime = System.getClockTime();　で取得していますが、このまま、例えば

var dayString = Lang.format("$1$/$2$", [clockTime.month, clockTime.day.format("%02d")]);

などとやってもエラーになって日時が取得できません。
日時はTimeから取得しないといけないようです。また、元に戻って、こちらのサイトを参考にしました。
take4-blue.com
例によってlayout.xmlに次の一文を挿入します。表示の位置は真ん中の上の方にしました。

<label id ="DayLabel" x="center" y="50" font="Graphics.FONT_LARGE" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_WHITE" />

それから、watchfaceView.mcを変更します。まず冒頭に

import Toybox.Time;

の一文を挿入します。たいていのブログではimport ではなく、usingを使っていますが、ひな形がimportになっていたので、importを使っています。今のところこれでエラーは出ていません。
次に、function.onUpdate に次の文を挿入します。
まず、現在日時の取得。これは、var clockTime = System.getClockTime();　の下に入れました。

var now = Time.now();
var nowM = Time.Gregorian.info(now, Time.FORMAT_MEDIUM);
var nowS = Time.Gregorian.info(now, Time.FORMAT_SHORT);

nowMとnowSの２つを使っている理由は、参考サイトに書いてありますが、FOTMAT_MEDIUMを使うと日時表示の時に月や日まで表示されてしまうためのようです。
それから、次の２文をその下らへんに挿入。

var dayString = Lang.format("$1$/$2$ $3$", [nowS.month, nowS.day, nowM.day_of_week]);
var view3 = View.findDrawableById("DayLabel") as Text;

最後に、下の１文をBT.draw(dc);　の前に挿入。

view3.setText(dayString);

ちなみに、シミュレータ側の言語セッティングを日本語にしておかないと曜日が英語で表示されてしまいます。

ようやくまともな時計らしくなってきました。まだ、スマートウォッチっぽさは全くないですが。次は、画像を表示させてみたいと思います。まだまだ先は長そうだ。