Pebble WatchApp の設定をスマホから変更可能にする
このページは 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
作業の流れ
- PebbleKit JS からデータを送れるように WatchAppでAppMessageを使えるようにする
- appinfo.json か、CloudPebble の設定ページで、AppMessageで使うKeyを設定する
- PebbleKit JS のコードを変更して設定ページをロードして watchappに送るようにする
- 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!"); } ); } );
SDKTut9 Configuration Pebble Config Tutorial
Choose watchapp settings
Invert watchapp:
また、こちらのスクリプトも追加する。
関連記事
-
-
静音アーケードスティック
静音キーボードはあったけれども、静音スティックコントローラはなかった。 そして確かに音がうるさいのは
-
-
確かにきれいに貼れる パワーサポート アンチグレアフィルムセット for iPhone 4 PHK-02
会社の知り合いがiPhone 3GSに貼っていた保護シートがえらくきれいに貼れているのでメーカーを確
-
-
ドラムアプリ「ドラムちゃん」用に電子ドラムiWordを買ってみた
自作ドラム学習アプリ「ドラムちゃん」には以前からMIDIドラムを接続することができたが、これまでな
-
-
スマートフォン手袋を買ってみた 2011
去年買ったスマートフォン用手袋は石油くさくてかなりつらい思いをしながら使ってましたが、今年もこりず
-
-
[iOS SDK] Olympus Camera Kit で Pebble連携アプリを作ってみた
3月25日にOLYMPUS AIR A01が発売されたが、このカメラはOPC(Open Pl
-
-
DELL U2711 のまとめと Samsung S27A850D
なぜか DELL U2711 で検索してこられる方が多いよう(正確には多かった)なので、ちょっと
-
-
DisplayPort to HDMI変換ケーブル QGEEM QG-HD02 で HP ElitebookとApple LED Displayを接続
以前会社で使っていた HP Elitebook 820 G3は DisplayPort があり、A
-
-
2015年に買ったりもらったりリリースしたりしたもの振り返り
年末なので2015年を振り返ってみよう企画。前半は仕事で死んでいたが、思ったよりもいろいろ活動してい
-
-
達人出版会の本をKindleで読んでみる(Windows編)
最近話題の「当事者」の時代の電子書籍版(パブー)や、エキスパート Objective-C プログラミ
-
-
Pebble Time 発表されたのでさっそく出資
新型 Pebbleが2/25 0:00AM JST に発表された。 なんと、今回も Kic