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

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

このページは 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;
    }
  }
}

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": []
  }
}

{

"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!");
  }
);

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");
  }

);

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!");
      }
    );
  }
);

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を用意して、ユーザが設定を変更できるようにする。

<!DOCTYPE html>
<html>
  <head>
    <title>SDKTut9 Configuration</title>
  </head>
  <body>
    <h1>Pebble Config Tutorial</h1>
    <p>Choose watchapp settings</p>
 
    <p>Invert watchapp:
    <select id="invert_select">
      <option value="off">Off</option>
      <option value="on">On</option>
    </select>
    </p>
 
    <p>
    <button id="save_button">Save</button>
    </p>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>SDKTut9 Configuration</title>

</head>

<body>

<h1>Pebble Config Tutorial</h1>

<p>Choose watchapp settings</p>

<p>Invert watchapp:

</select>

</p>

<p>

</p>

</body>

</html>

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

<script>
  //Setup to allow easy adding more options later
  function saveOptions() {
    var invertSelect = document.getElementById("invert_select");
 
    var options = {
      "invert": invertSelect.options[invertSelect.selectedIndex].value
    }
     
    return options;
  };
 
  var submitButton = document.getElementById("save_button");
  submitButton.addEventListener("click", 
    function() {
      console.log("Submit");
 
      var options = saveOptions();
      var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(options));
       
      document.location = location;
    }, 
  false);
</script>

//Setup to allow easy adding more options later

function saveOptions() {

var invertSelect = document.getElementById("invert_select");

var options = {

"invert": invertSelect.options[invertSelect.selectedIndex].value

}

return options;

};

var submitButton = document.getElementById("save_button");

submitButton.addEventListener("click",

function() {

console.log("Submit");

var options = saveOptions();

var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(options));

document.location = location;

false);

</script>

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

Message コメントをキャンセル

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

PREV: MX4D で進撃の巨人実写版をみた
NEXT: iPhone 6 Plus iSight カメラ交換プログラムに行ってきた

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

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

作業の流れ

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

appinfo.json に appkeys を追加する

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

関連記事

Android Hacks (株式会社ブリリアントサービス著) のメモ

iPad用ケース TUNESHELL for iPad

SHIELD iShell iPhone 4 用ケース購入

[Pebble] CES 2014 で Pebble が何か発表するらしい → Pebble Steel だった

iPad用ペン AluPen を買ってみた。

[iPhone 6 Plus] カラビナ付きケースを買ってみた

ついにiPhoneとつながるG-SHOCKが!

[Pebble SDK] Pebble appstore にアプリを公開してみる

FlashAir W-03活用開始

MacBookとWindowsでキーボード切り替え

Message コメントをキャンセル

NEW ENTRY

MY WORKS

最近の投稿

カテゴリー

アーカイブ

メタ情報

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

iPhone, iPad, MacBook Pro, ガジェットやアプリ開発記事を紹介

	ドラムちゃん
	価格:	￥360

	Reibun
	価格:	￥240

	EverLearn 英単語
	価格:	￥170

	おんぷ先生
	価格:	無料