第8回　XMLをいじってみる【Garmin Programming】

こんにちは。いじってみる編です。なので、長め＆エラー画面多め。
最終的にできるようになったものを見たい人は第9回へ。
とりあえずのゴールとして、画像表示したい。え？XMLって何。

「XML」もいじらないと、画像表示は出来ない。

公式のこのページやこのページを読んでいたんですが、MonkeyC（今までいじっていたファイル）だけではテキストボックス追加も、画像表示もできません（たぶん）。
XMLを別で書いて、MonkeyCではその読み込みと中身（時刻やメッセージ）の書き込みだけをする、ということのようです。

確かにそのほうが、デバイスが変わったときにもプログラム自体は変えなくていいですし、後々「VivoInactiveSQ（適当）」とか新しいデバイスが追加されても便利です。
ConnectIQでは、デバイスごとに自動で読み込むべきXMLファイルを判断してれるので、新しくそれ用のXMLを調整するだけでオッケーです。
HTMLとjavascript、あるいはドリンクメニューとバリューセットみたいな感じでしょうか。ドリンクが後から増えても対応可能みたいな。違うか。

私VenuSQしか使わないけどね・・・

テキストボックスを増やしてみる

ということでXMLをいじります。
TestProjectのresources、Layoutです。ここが重要そう。

試しに、既にある<label id="TimeLabel" ・・・>をコピペして、適当に名前を付けます。

<label id="Label" x="center" y="center" font="Graphics.FONT_LARGE" justification="Graphics.TEXT_JUSTIFY_RIGHT" color="Graphics.COLOR_BLUE" />

で、TestProjectView.mc (mcというのはMonkeyCの略ですね)に、そのLabelを表示してください、と書きます。変更したのは、

var view2 = View.findDrawableById("Label");

と

view2.setText("aaa");

の部分。

被っていて見辛いですが、テキストボックスが追加されて"aaa"と書かれていることが分かります。

位置を調整してあげればちゃんと読めるように。

<label id="Label" x="10%" y="center" font="Graphics.FONT_LARGE" justification="Graphics.TEXT_JUSTIFY_LEFT" color="Graphics.COLOR_BLUE" />

画像を表示してみる

次は画像だーと思い、実際に書いてみます。
・layout.xmlに画像用のタグを足す、
・imagesフォルダを作ってmyBitmap.pngを入れる、
・TestProject2View.mcに追記。

以下詳細。

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

function initialize()とfunction onUpdate()に追加

function initialize() {
       WatchFace.initialize();
       myBitmap = new WatchUi.Bitmap({
           :rezId=>Rez.Drawables.myBitmap,
           :locX=>10,
           :locY=>30
       });
   }   

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

実行。エラー。

「'myBitmap'が見つかりません。」
Error: Symbol Not Found Error
Details: Could not find symbol 'myBitmap'

うーん。でも、めげません。

pngの画像データ「myBitmap.png」が見つからないのではなく、タグでのmyBitmapの参照がうまくいってないっぽい。
試しに <bitmap id="myBitmap" filename="../images/myBitmap.png" /> から「../」を消すと、layout.xmlの保存の段階でファイルが見つかりませんエラーになるので、layout.xmlの問題ではなさそう。

なぜか実行するたびに、エラーの画面が違う。

ともかく、エラーはinitialize()とgetInitialView()で発生しているそうなので、見てみると、
initialize()は宣言忘れ→varを足します。
getInitialView()はそもそも無くない？と思ったけど、

- getInitialView() at /Users/user/eclipse-workspace/TestProject2/source/TestProject2App.mc:19 0x100001c6

つまり、TestProject2App.mcの、19行目だと言うことなので、見にいきます。TestProject2App.mcはここ。

中身。

using Toybox.Application;

class TestProject2App extends Application.AppBase {

   function initialize() {
       AppBase.initialize();
   }

   // onStart() is called on application start up
   function onStart(state) {
   }

   // onStop() is called when your application is exiting
   function onStop(state) {
   }

   // Return the initial view of your application here
   function getInitialView() {
       return [ new TestProject2View() ];
   }

}

19行目は、

return [ new TestProject2View() ];

要するにTestProject2View内でエラーがあるよ＝initialize()のエラーのようなので、無視。

varを足した状態でもう一度トライ。

実行。エラー。or2

Error: Symbol Not Found Error
Details: Could not find symbol 'myBitmap'
Stack:
- onUpdate() at /Users/user/eclipse-workspace/TestProject2/source/TestProject2View.mc:35 0x10000149

TestProject2Viewの35行目と言うと、

myBitmap.draw(dc);

また別なところでmyBitmapを参照できてない問題です。
ブレークポイントとウォッチを追加してー・・・と思いましたが、そんな機能は無い。まじか。
仕方が無いのでぽちぽちprintlnしてくかと思いましたが、そうか。なんで関数内で宣言してるんや。私。

エラー直せた！

直した後のコード（抜粋）。

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

var myBitmap;

   function initialize() {
       WatchFace.initialize();
       myBitmap = new WatchUi.Bitmap({
           :rezId=>Rez.Drawables.myBitmap,
           :locX=>10,
           :locY=>30
       });
   }

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

実行すると、今度こそ出ました！

。。。

いや、でかいて。

時刻表示も消えています。
第7回で理解した内容を思い出して、layout.xml内の順序を変えます。

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

出ました。

とりあえず今回はここまで。