Pebble WatchApp の設定をスマホから変更可能にする

公開日: : 最終更新日:2015/08/22 gadget, Pebble

invert-notinvert

このページは Pebble SDK 2.0 Tutorial #9: App Configuration | try { work(); } finally { code(); } の記事をおおまかに翻訳したものである。(Chris氏から許可いただきました)

Pebble アプリにはWatchface と WatchAppの2種類があり、WatchfaceはPebbleのハードウェアボタンを使用することができないのでPebble上で設定を変更することができない。

このため、Android/iOS 側で設定ページを用意する必要がある。

ここでは例として、Watchface や WatchApp の背景色をPebbleKit JSを使ってスマホ側で変更できるようにしてみる。

参考ページ Developer Guides // Pebble Developers

作業の流れ

  1. PebbleKit JS からデータを送れるように WatchAppでAppMessageを使えるようにする
  2. appinfo.json か、CloudPebble の設定ページで、AppMessageで使うKeyを設定する
  3. PebbleKit JS のコードを変更して設定ページをロードして watchappに送るようにする
  4. HTMLページを用意してユーザが設定を変更できるようにする

PebbleKit JS からデータを送るために WatchAppにAppMessage用コードを追加する

AppMessageInboxReceived ハンドラを用意し、メッセージを受けられるようにする。
ハンドラ中で persist date に値を書き込む。

static void in_recv_handler(DictionaryIterator *iterator, void *context)
{
  //Get Tuple
  Tuple *t = dict_read_first(iterator);
  if(t)
  {
    switch(t->key)
    {
    case KEY_INVERT:
      //It's the KEY_INVERT key
      if(strcmp(t->value->cstring, "on") == 0)
      {
        //Set and save as inverted
        text_layer_set_text_color(text_layer, GColorWhite);
        text_layer_set_background_color(text_layer, GColorBlack);
        text_layer_set_text(text_layer, "Inverted!");
 
        persist_write_bool(KEY_INVERT, true);
      }
      else if(strcmp(t->value->cstring, "off") == 0)
      {
        //Set and save as not inverted
        text_layer_set_text_color(text_layer, GColorBlack);
        text_layer_set_background_color(text_layer, GColorWhite);
        text_layer_set_text(text_layer, "Not inverted!");
 
        persist_write_bool(KEY_INVERT, false);
      }
      break;
    }
  }
}

下記を init などで実行する。

  • app_message_register_inbox_received((AppMessageInboxReceived) in_recv_handler);
  • app_message_open(app_message_inbox_size_maximum(), app_message_outbox_size_maximum());

書き込んだ persist data はwindow_load などで読み込む

appinfo.json に appkeys を追加する

App Metadata (SDK only) // Pebble Developers を参考に appinfo.json に appKeys を追加する。

今回の場合は  KEY_INVERT を追加する。

{
  "uuid": "153ff30e-0288-4411-871c-fce3dcc99e5f",
  "shortName": "sdktut9",
  "longName": "sdktut9",
  "capabilities": [ "configurable" ],
  "companyName": "Chris Lewis",
  "versionCode": 1,
  "versionLabel": "1.0.0",
  "watchapp": {
    "watchface": false
  },
  "appKeys": {
    "KEY_INVERT": 0
  },
  "resources": {
    "media": []
  }
}

PebbleKit JS から設定ページをロードして watchappに送る

PebbleKit JS は、スマートフォンから configuration page を読み込んでwatchappに結果を送るためのもので、src/js/pebble-js-app.js にある。 “showConfiguration” と “webviewclosed” のイベントで設定を行う。 デフォルトの状態

Pebble.addEventListener("ready",
  function(e) {
    console.log("PebbleKit JS ready!");
  }
);

showConfiguration イベントでは、ページを開く

Pebble.addEventListener("showConfiguration",
  function(e) {
    //Load the remote config page
    Pebble.openURL("https://dl.dropboxusercontent.com/u/10824180/pebble%20config%20pages/sdktut9-config.html");
  }

);

webviewclosed では、設定を読み込む

Pebble.addEventListener("webviewclosed",
  function(e) {
    //Get JSON dictionary
    var configuration = JSON.parse(decodeURIComponent(e.response));
    console.log("Configuration window returned: " + JSON.stringify(configuration));
 
    //Send to Pebble, persist there
    Pebble.sendAppMessage(
      {"KEY_INVERT": configuration.invert},
      function(e) {
        console.log("Sending settings data...");
      },
      function(e) {
        console.log("Settings feedback failed!");
      }
    );
  }
);



上記の URLにHTMLを用意して、ユーザが設定を変更できるようにする。


  
    SDKTut9 Configuration
  
  
    

Pebble Config Tutorial

Choose watchapp settings

Invert watchapp:

また、こちらのスクリプトも追加する。

HTML置き場として上記参考ページでは Dropbox の Public folder がおすすめされている。こちらを使うと自前でWebサーバを用意しなくてもすむ。

関連記事

OPCカメラ+キャップレンズBCL-0980

OLYMPUS AIR A01発売(3/6)まであと5日。OPCカメラのテスターを継続中。 テスト

記事を読む

[買ってみた] Ember Temperature Control Mug 2

Ember セラミック マグ posted with amazlet at 20.01.1

記事を読む

[iPhone6 Plus] はじめて保護ガラスを貼ってみた JTT Online Glass Protector

会社の知り合いが色をまちがって購入したということで、iPhone6 Plus 用保護ガラスを

記事を読む

no image

アプリ不具合調査のため 7インチAndroidタブレットSMT-i9100購入

件名: おんぷちゃんLite smt-i9100で、開きません。 このアプリを音楽教室で使いたく

記事を読む

no image

iPad用ケース TUNESHELL for iPad

iPadは使ってないとき机の上に置くと意外に場所を取る。どう置くかは工夫のしどころだと思われる。 ま

記事を読む

[買ってみた] Toast付きLogitec macOS用BDドライブ

子どもの学芸会を撮影したので、実家の親にDVDを送ろうと思い、以前から気になっていた、To

記事を読む

no image

新型 Kindle 3G+Wi-Fi Graphite 到着

昨日Amazonから発送した旨のメールが届いて、Ontario CAにあると思っていたら、翌日

記事を読む

no image

モンハン3 注文

12月1日に発売されたモンスターハンターポータブル3。 発売日には買えず、ちょっと様子を見ようと思っ

記事を読む

no image

ようやく nasne (CECH-ZNR1J) 予約できた

ずっと予約注文すらできず、定価より高く売られていた nasne だが、ソニモバを見ていたら予約可能と

記事を読む

PebbleアプリのPebble Time Round対応

BeforeAfter 丸くなったPebbleを初レビュー。ギークじゃなくても使えるスマートウォッチ

記事を読む

Message

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Transcend TS-HUB5C を買ってみた

前回 USB Type-C ハブを買って返品してしまったので、再度検

TUNEWEAR ALMIGHTY DOCK nano1 USB3.2 5in1ハブ を買ってみた

ちょうどiPhone のリストアを実行中で、2時間程度かかっていたた

Apple Developer Program 更新 2022

今年も Apple Developer Programを更新した。こ

M1 MacBook Air を macOS Monterey にアップデート

Xcode 13.3 アップデート するために、macOS

Xcode 13.3 アップデート

iPhone 11 Pro Max の iOSを15.4に上げてしま

→もっと見る

  • 2015年8月
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31  
PAGE TOP ↑