ただ、走るだけ。いつまでも

ただただ走ってます。いつかはサブ3.5。

はじめてのConnectIQプログラミング〜時計に表示。onUpdate()を編集〜

みなさんおつかれさまです。

 今日も暑いですね。この暑さの中、小布施見にマラソンやよこはま月例などに参加されたみなさんおつかれさまでした。

私も岩本能史コーチのトレーニング1週目のロング走。90分キロ5分30秒に行ってきました。90分で良かった。120分だと倒れますね。

f:id:yoneba_1717:20180715130924j:image

 

にほんブログ村 その他スポーツブログ マラソンへ
にほんブログ村 

 

☆★☆

 

さて、vivoactive3でConnectIQ。今回で、動くものができそうです。

これまでの流れです。

【予告編】ガーミンVivoactive3を自分でカスタマイズしたいぞ - ただ、走るだけ。いつまでも

初めてのConnectIQアプリ〜セットアップ編〜 - ただ、走るだけ。いつまでも

初めてのConnectIQアプリ〜サンプルプロジェクトの実行編〜 - ただ、走るだけ。いつまでも

ビルドアップ走から、初めてのConnectIQアプリ〜新規プロジェクトでMonkeyC編〜 - ただ、走るだけ。いつまでも

初めてのConnectIQアプリ〜データフィールド構築compute(info)編〜 - ただ、走るだけ。いつまでも

はじめてのConnectIQプログラミング〜レイアウトを決める。 onLayout()の編集〜 - ただ、走るだけ。いつまでも

 

いよいよ表示する値も決まって、表示するレイアウトも決まりました。あとは枠(レイアウト)に値をはめるだけです。後はビルドしてデプロイです。

 

1 データフィールドの表示の流れ

まず最初に、データフィールドの表示までの流れをもう一度。

onLayout()で表示レイアウトを決定(済)-compute()で表示する値を計算(済)-onUpdate()でレイアウトに値をはめ込む。

という流れでした。

いよいよonUpdate()では、1秒に1回くらい呼び出されて、compute()で計算された値を時計のデータフィールドに表示することになります。

2 onUpdate()の編集

今回表示対象となるのは、compute()で保存したこれらの値です。

    hidden var averagePaceMinute=0;

    hidden var averagePaceSecond=0;

    hidden var distance=0.0f;

 ペースと距離ですね。

 右側を距離にします。onLayout()で場所は確保してます。

まずやること。

バックグラウンドにカラーをセットします。

// データフィールドの背景色をレイアウトの背景色にセットします。これをしておかないと画面は真っ黒。

View.findDrawableById("Background").setColor(getBackgroundColor());

これは実は必要性はよくわからないのですが、無いと真っ黒で動かないので、入れておきます。どうも、バックグラウンドカラーでクリアしているみたいです。

次は、テキストをセットするので、はめ込む対象レイアウトを取り出しておきます。

var distanceValue = View.findDrawableById("distanceValue");

var paceValue = View.findDrawableById("paceValue");

さて、vivoactive3のバックグラウンドカラーは白と黒から選べます。白地には黒、黒地には白で書き出さないと見えませんw

それをセットします。getBackgroundcolor()は、データフィールドの背景色を取り出すメソッドです。

// 背景が白の時は黒字で背景が黒の時は白字で書く。

        if (getBackgroundColor() == Gfx.COLOR_BLACK) {

            distanceValue.setColor(Gfx.COLOR_WHITE);

            paceValue.setColor(Gfx.COLOR_WHITE);

        } else {

            distanceValue.setColor(Gfx.COLOR_BLACK);

            paceValue.setColor(Gfx.COLOR_BLACK);

        }

10kmを過ぎると桁数が増えて、距離表示とペース表示がかぶりそうです。フォントを小さくするか小数点以下の桁数を減らすかするんですが、今回はフォントを1段階小さくしてみます。

// 距離が10kmを超えた時はフォントの大きさを小さくしてあまりはみ出ないようにしておきます。

        if (distance > 10.0){

            distanceValue.setFont(Gfx.FONT_NUMBER_MEDIUM);

        } else {

            distanceValue.setFont(Gfx.FONT_NUMBER_HOT);

        }

次は表示フォーマットを整えます。

距離は小数点以下2桁で表示させます。

 // 小数点以下2桁で距離を表示します。

        distanceValue.setText(distance.format("%.2f"));

%は書式記号で.2fが浮動小数点数で小数点以下2桁を示します。

 

ペースは、分と秒の間に":"を表示させます。$1$と$2$に直後のフォーマットで編集された結果が格納されます。秒の表示は、前に0を補完しておきます。

       // 分と秒の表示ができるようにフォーマットを設定してテキストを設定します。

           paceValue.setText(Lang.format(

                       "$1$:$2$",

                       [averagePaceMinute.format("%d"),

                            averagePaceSecond.format("%02d")]

                      )

           );

 

これでレイアウトに動的値を設定できました。

後は、これをいよいよ表示します。表示するには、上位のオブジェクトの同一メソッドを呼ぶことが必要です。

        // super()(親クラスの同じメソッドを呼びます。)

        View.onUpdate(dc);

 これで、プログラミング完了です。

通しで見るとonUpdate()はこんな感じ。

    // ここで、さっき計算した値を表示するんだ。このメソッドはデータフィールドが表示されている

    // 時だけ、1秒に1回くらい呼ばれるからそのつもりでいろよ。

    function onUpdate(dc) {

        // データフィールドの背景色をレイアウトの背景色にセットします。これをしておかないと

       // 画面は真っ黒。

        View.findDrawableById("Background").setColor(getBackgroundColor());

 

        var distanceValue = View.findDrawableById("distanceValue");

        var paceValue = View.findDrawableById("paceValue");

 

        // 背景が白の時は黒字で背景が黒の時は白字で書く。

        if (getBackgroundColor() == Gfx.COLOR_BLACK) {

            distanceValue.setColor(Gfx.COLOR_WHITE);

            paceValue.setColor(Gfx.COLOR_WHITE);

        } else {

            distanceValue.setColor(Gfx.COLOR_BLACK);

            paceValue.setColor(Gfx.COLOR_BLACK);

        }

 

        // 距離が10kmを超えた時はフォントの大きさを小さくしてあまりはみ出ないようにします。

        if (distance > 10.0){

            distanceValue.setFont(Gfx.FONT_NUMBER_MEDIUM);

        } else {

            distanceValue.setFont(Gfx.FONT_NUMBER_HOT);

        }

       // 小数点以下2桁で距離を表示します。

        distanceValue.setText(distance.format("%.2f"));

       // 分と秒の表示ができるようにフォーマットを設定してテキストを設定します。

           paceValue.setText(Lang.format(

                       "$1$:$2$",

                       [averagePaceMinute.format("%d"),

                           averagePaceSecond.format("%02d")]

                      )

           );

        // super()(親クラスの同じメソッドを呼びます。)

        View.onUpdate(dc);

    }

 これで完成。

3 シミュレータで動かしてみる。

yoneba-1717.hatenablog.com

 これに従ってプロジェクトを選択して、実行してみます。

 

あ〜動きました。背景黒にしても動きました。

 

4 実機で確認

同じく、vivoactive3をMacに接続して、Build for Device Wizaedからビルド。ファインダでインストールされていることを確認します。vivoactive3のラン設定からデータページを編集して表示させます。

さあ、走り出す。 

f:id:yoneba_1717:20180714204506j:image

f:id:yoneba_1717:20180714204519j:image

お〜出てる出てる。ガーミンの本体とペースの表示も同じ。ちょっと左側が切れているので、もう少しだけペースを右に寄せようかな。

とりあえず、大成功〜

 

 

にほんブログ村 その他スポーツブログ マラソンへ
にほんブログ村