Pebble:構成を追加し、設定をアプリケーションに保存します

アプリケーションの機能性と複雑さが増すにつれて、ユーザーが必要なパラメーターを構成する機会をユーザーに与えることが必要になります。 次に、アプリケーションは、これらの設定を保存し、それらを管理するためのインターフェイスをユーザーに提供できる必要があります。 Pebble開発者はどのツールと機能を提供しましたか?



Pebbleプロジェクトのドキュメントは適切であり、上記の目的はそれを複製することではありません。 これは、データストレージとアプリケーション構成機能を1か所で収集する試みです。 以下は、ドキュメントからの簡単な抜粋とサンプルプロジェクトとしてのコードです。



データ保存



開発者は、アプリケーションデータを保存するために次のオプションを提供しています。

  1. デバイス自体へのアプリケーションデータの保存。

    これを行うために、アプリケーションのキーと値のストレージごとに個別のストレージがあります。 最大256バイトのストレージサイズは、整数、文字列、バイト配列の格納をサポートします。 特徴的な機能は、データが時計自体に保存されることです。その結果、コンパニオンアプリケーションとのペアリングが不要になり、結果として速度と省エネが実現します。 [1]
  2. コンパニオンアプリケーションの電話にデータを保存します。

    公式のPebbleKitモバイルアプリでは、JavaScriptはlocalStorageオブジェクトに基づいてAPIを実装しています。 [2]




アプリケーションのセットアップ



PebbleKit JavaScriptを使用すると、開発者が定義したURLに配置され、アクセス可能な設定ウィンドウ(Webアプリケーション)をスマートフォンの画面に表示できます。 [3]

ユーザーがWebアプリケーションでの作業を終了すると、特別なURL「pebblejs:// close」を呼び出し、必要なデータをモバイルアプリケーションに転送します。



実装



アプリケーションが設定で完全に機能するには、次を実装する必要があります。



最初に、画面に時間を表示するシンプルなアプリケーションに次のオプションを追加します。





永続的ストレージ



設定を個別のパラメーターではなく、構造に保存します。

コンパイラーは構造の各フィールドを32ビット境界に沿って整列するため、ドキュメントの推奨に従ってデータをパックします。

また、デフォルト値を設定します-Bluetooth接続のステータスを変更する場合は振動し、分を変更する場合はサイレントにします



#define STORAGE_KEY 99 typedef struct persist { bool vibe_bt; bool vibe_min; } __attribute__((__packed__)) persist; persist settings = { .vibe_bt = true, .vibe_min = false };
      
      





データの読み取りと書き込みは次のようになります。



  /*...*/ persist_read_data(STORAGE_KEY, &settings, sizeof(settings)); /*...*/ persist_write_data(STORAGE_KEY, &settings, sizeof(settings));
      
      





イベントハンドラを設定し、イベントのサブスクライブとサブスクライブ解除を行い、アプリケーションの起動時にストアからの読み取りを追加し、終了時に書き込みを追加します。



 static void tick_handler(struct tm *tick_time, TimeUnits units_changed) { /*...*/ if ((units_changed & MINUTE_UNIT) && (settings.vibe_min)) { vibes_double_pulse(); }; } void bt_handler(bool connected) { if (settings.vibe_bt) { vibes_long_pulse(); }; } static void init(void) { if (persist_exists(STORAGE_KEY)) { persist_read_data(STORAGE_KEY, &settings, sizeof(settings)); } else { persist_write_data(STORAGE_KEY, &settings, sizeof(settings)); }; /*...*/ window_stack_push(window, animated); tick_timer_service_subscribe(MINUTE_UNIT, tick_handler); bluetooth_connection_service_subscribe(bt_handler); } static void deinit(void) { /*...*/ persist_write_data(STORAGE_KEY, &settings, sizeof(settings)); tick_timer_service_unsubscribe(); bluetooth_connection_service_unsubscribe(); }
      
      





アプリケーションが設定の状態を保存できるようになったので、電話のストレージの整理に進みます。



ローカルストレージとWebベースのインターフェイス



設定ウィンドウが呼び出される場所をクリックして歯車アイコンを表示するには、 appinfo.jsonで適切なオプションを有効にする必要があります。



 { /* ... */ "capabilities": [ "configurable" ], /* ... */ }
      
      





歯車をクリックするとshowConfigurationイベントが生成され、 pebble-js-app.jsハンドラーで指定されたページがWebViewにロードされます。



 Pebble.addEventListener('showConfiguration', function(e) {Pebble.openURL("http://domain.tld/index.html"); })
      
      





たとえば、2つのチェックボックスと「送信」ボタンのシンプルなインターフェイスは、基本的にフォームに「ラップ」しません。

まず、 localStorageから値を読み取り、これに従ってチェックボックスにチェックマークを付けます。パラメーターがストレージにない場合は、デフォルト値で初期化します。



 <script> $().ready(function() { var vibe_bt = parseInt(localStorage.getItem("vibe_bt")); var vibe_min = parseInt(localStorage.getItem("vibe_min")); if (isNaN(vibe_bt)) { vibe_bt = 1; }; if (vibe_bt) { $('#vibe_bt').prop('checked', true); } else { $('#vibe_bt').prop('checked', false); }; if (isNaN(vibe_min)) { vibe_min = 0; }; if (vibe_min) { $('#vibe_min').prop('checked', true); } else { $('#vibe_min').prop('checked', false); }; }); /*...*/ </script>
      
      





ボタンの押下を追跡し、ユーザーの選択をアプリケーションに送信し、同時に新しい値をストレージに保存します。



 <script> /*...*/ var submitButton = document.getElementById("b_submit"); submitButton.addEventListener("click", function() { localStorage.setItem("vibe_bt", $('#vibe_bt').prop('checked') ? 1 : 0); localStorage.setItem("vibe_min", $('#vibe_min').prop('checked') ? 1 : 0); var result = { vibe_bt: $('#vibe_bt').prop('checked') ? 1 : 0, vibe_min: $('#vibe_min').prop('checked') ? 1 : 0, }; var location = "pebblejs://close#"+JSON.stringify(result); document.location = location; }, false); </script>
      
      





ページの完全なコードには、ページを開くときにコードを実行するjqueryがないわけではありません。



index.html
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery/jquery.min.js"></script> <title>Configuration window</title> <style> </style> </head> <body> <div> <div> <input id="vibe_bt" type="checkbox" checked /> <span>vibe bluetooth on/off</span> </div> <div> <input id="vibe_min" type="checkbox" checked /> <span>vibe every minute</span> </div> <div> <input id="b_submit" type="submit" value="Save" /> </div> </div> <script> $().ready(function() { var vibe_bt = parseInt(localStorage.getItem("vibe_bt")); var vibe_min = parseInt(localStorage.getItem("vibe_min")); if (isNaN(vibe_bt)) { vibe_bt = 1; }; if (vibe_bt) { $('#vibe_bt').prop('checked', true); } else { $('#vibe_bt').prop('checked', false); }; if (isNaN(vibe_min)) { vibe_min = 0; }; if (vibe_min) { $('#vibe_min').prop('checked', true); } else { $('#vibe_min').prop('checked', false); }; }); var submitButton = document.getElementById("b_submit"); submitButton.addEventListener("click", function() { localStorage.setItem("vibe_bt", $('#vibe_bt').prop('checked') ? 1 : 0); localStorage.setItem("vibe_min", $('#vibe_min').prop('checked') ? 1 : 0); var result = { VIBE_BT: $('#vibe_bt').prop('checked') ? 1 : 0, VIBE_MIN: $('#vibe_min').prop('checked') ? 1 : 0, }; var location = "pebblejs://close#"+JSON.stringify(result); document.location = location; }, false); </script> </body> </html>
      
      







ページウィンドウを閉じるとwebviewclosedイベントが発生し、そのハンドラーはpebble-js-app.jsに登録する必要があります。



 Pebble.addEventListener('webviewclosed', function(e) { Pebble.sendAppMessage(JSON.parse(e.response), function(e) {}, function(e) {}); })
      
      





ユーザーが望むすべてのものをユーザーに見せた瞬間に来ました。彼は彼の選択をしましたが、それは小さいです。この選択を時計のアプリケーションに保存します。



AppMessage API



ドキュメントによると、AppMessage APIはプッシュ指向の交換プロトコルを実装しています。 時計またはスマートフォンのいずれかがメッセージを開始できます。 受信側による処理は、コールバックによって行われます。

各メッセージは、キーと値のペアのリストを含む辞書です。



時計とスマートフォンの両方が交換内容を「理解」するためには、この辞書のパラメーターを少なくとも2つの場所、主にCファイルに記述する必要があります。



 #define VIBE_BT 1 #define VIBE_MIN 2
      
      





そしてappinfo.jsonで

 { /* ... */ "appKeys": { "VIBE_BT": 1, "VIBE_MIN": 2, } /* ... */ }
      
      





コールバックを登録し、AppMessageを初期化します。



 static void init(void) { /*...*/ app_message_register_inbox_received(in_received_handler); const uint32_t inbound_size = 128; const uint32_t outbound_size = 128; app_message_open(inbound_size, outbound_size); /*...*/ }
      
      





最後に、着信メッセージのコールバックについて説明します。



 void in_received_handler(DictionaryIterator *received, void *context) { Tuple *vibe_bt_tuple = dict_find(received, VIBE_BT); Tuple *vibe_min_tuple = dict_find(received, VIBE_MIN); settings.vibe_bt = (bool)vibe_bt_tuple->value->int16; settings.vibe_min = (bool)vibe_min_tuple->value->int16; }
      
      







その結果、最初の起動/インストール時のアプリケーションは永続ストレージを初期化し、データの読み取りと保存ができ、パラメーターを設定するための独自のページを持っています。



Bitbucketの 完全なプロジェクトコード



[1] Pebble Developers //アプリデータの永続化

[2] Pebble Developers //アプリ機能の拡張//データの保存

[3] Pebble Developers //アプリの構成

[4] Pebble SDK 2.0チュートリアル#8:Androidアプリの統合| 試す{work(); }最後に{code(); }

[5] Pebble SDK 2.0チュートリアル#9:アプリの構成| 試す{work(); }最後に{code(); }



All Articles