pebble
  • Tutorials
  • Get the SDK
  • Guides
  • Documentation
  • Examples
  • Community
  • Blog
  • More
Privacy
Cookies
Publish

Tutorials

  • C言語でウォッチフェイスを開発する
    • Part 1 - 時間を表示する
    • Part 2 - ウォッチフェイスをカスタマイズする
    • Part 3 - ウェブコンテンツを追加する
    • Part 4 - バッテリーバーを追加する
    • Part 5 - スマホ切断時にバイブレーションする
  • JavaScriptでウォッチフェイスを開発する
    • Part 1 - 時間を表示する
    • Part 2 - ウェブコンテンツを追加する
  • 上級者向けチュートリアル
    • ベクターアニメーション

スマホとの接続切断時に振動する

このチュートリアルシリーズで探求される最後の人気のあるウォッチフェイスの追加機能は、Bluetooth 接続サービスを使用して、ウォッチが接続または切断されたときにユーザーに警告するという概念です。これは、ウォッチが範囲外にあり通知を受信できないことを知るため、またはユーザーがスマートフォンを持たずにどこかに行ってしまったかもしれないことを知らせるために役立ちます。

このセクションは Part 4 から続くので、必ずコードを再利用するか、その完成したプロジェクトから始めてください。

TickTimerService と BatteryStateService の両方と同様の方法で、Bluetooth 接続に関連するイベントは、サブスクリプションを介して開発者に提供されます。これには追加のコールバック、つまり ConnectionHandler が必要です。以下の形式でこれを作成します:

static void bluetooth_callback(bool connected) {

}

Bluetooth 関連イベントへのサブスクリプションは init() に追加されます:

// Register for Bluetooth connection updates
connection_service_subscribe((ConnectionHandlers) {
  .pebble_app_connection_handler = bluetooth_callback
});

インジケーター自体は、ウォッチが切断されたときに表示され、再接続されたときに非表示になる次の「Bluetooth 切断」アイコンの形式になります。このプロジェクトで使用するために以下の画像を保存してください:

上記のアイコン画像を resources プロジェクトディレクトリにコピーし、package.json の media 配列に次のような新しい JSON オブジェクトを追加して、このアイコンをプロジェクトに追加します:

{
  "type": "bitmap",
  "name": "IMAGE_BT_ICON",
  "file": "bt-icon.png"
},

このアイコンは、時刻表示の上の BitmapLayer に表示するための GBitmap としてアプリにロードされます。既存のこれらのタイプの変数に加えて、ファイルの先頭でこれら両方をポインタとして宣言します:

static BitmapLayer *s_background_layer, *s_bt_icon_layer;
static GBitmap *s_background_bitmap, *s_bt_icon_bitmap;

main_window_load() で両方の新しいオブジェクトを割り当て、次に BitmapLayer のビットマップを新しいアイコン GBitmap として設定します:

// Create the Bluetooth icon GBitmap
s_bt_icon_bitmap = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_BT_ICON);

// Create the BitmapLayer to display the GBitmap
s_bt_icon_layer = bitmap_layer_create(GRect(59, 12, 30, 30));
bitmap_layer_set_bitmap(s_bt_icon_layer, s_bt_icon_bitmap);
layer_add_child(window_get_root_layer(window), bitmap_layer_get_layer(s_bt_icon_layer));

いつものように、これらのオブジェクトを作成するために割り当てられたメモリも main_window_unload() で解放されることを確認してください:

gbitmap_destroy(s_bt_icon_bitmap);
bitmap_layer_destroy(s_bt_icon_layer);

UI が配置されたら、BluetoothConnectionHandler の実装を完了できます。イベントが発生したときの接続の状態に応じて、インジケーターアイコンは必要に応じて非表示または表示されます。ウォッチが切断された場合は、通知や電話の着信のフィードバックと区別するために、独特の振動もトリガーされます:

static void bluetooth_callback(bool connected) {
  // Show icon if disconnected
  layer_set_hidden(bitmap_layer_get_layer(s_bt_icon_layer), connected);

  if(!connected) {
    // Issue a vibrating alert
    vibes_double_pulse();
  }
}

初期化時に、再接続イベントが発生して現在の状態が評価されない限り、アプリはアイコンを表示します。正しい初期状態を表示するために、main_window_load() でハンドラを手動で呼び出します:

// Show the correct state of the BT connection from the start
bluetooth_callback(connection_service_peek_pebble_app_connection());

この最後の機能が配置されたら、アプリを実行して Bluetooth 接続を切断すると、新しいインジケーターが表示され、ウォッチが 2 回振動します。

bt

完成したプロジェクトのソースコードは この GitHub Gist で確認できます。

次は?

機能豊富なウォッチフェイスの構築に成功したので、次は 公開 しましょう!

Overview

  • 次は?