バッテリーバーの追加
多くのウォッチフェイスに追加される人気のある機能の 1 つにバッテリーメーターがあります。これにより、ユーザーは Pebble のバッテリー充電レベルの状態を一目で確認できます。これは通常、現在の充電レベルに応じて埋まる古典的な「バッテリーアイコン」として実装されますが、一部のウォッチフェイスはより最小限のアプローチを好み、ここではそれを実装します。
このセクションは Part 3 から続くので、必ずコードを再利用するか、その完成したプロジェクトから始めてください。
バッテリーの状態は BatteryStateService を使用して取得されます。このサービスは、現在のレベルを「覗き見る」か、バッテリー状態が変化したときに発生するイベントをサブスクライブするという 2 つの使用モードを提供します。ここでは後者のアプローチを採用します。バッテリーレベルのパーセンテージは、ファイルの先頭の整数に保存されます：
static int s_battery_level;
すべての Event Services と同様に、新しいバッテリー情報が利用可能になったときにイベントを受信するには、コールバックを登録する必要があります。BatteryStateHandler のシグネチャを使用してこのコールバックを作成し、提供された BatteryChargeState パラメータを使用して現在の充電パーセンテージを保存します：
static void battery_callback(BatteryChargeState state) {
// Record the new battery level
s_battery_level = state.charge_percent;
}
バッテリーレベルが変化したときにこの関数が呼び出されるようにするには、init() で更新をサブスクライブします：
// Register for battery level updates
battery_state_service_subscribe(battery_callback);
サブスクリプションが配置されたら、UI を作成できます。これは、バッテリーレベルを使用して時刻表示の上部に沿って薄くミニマリストな白いメーターを描画する LayerUpdateProc を持つ Layer の形式になります。
バッテリーメーターの描画に使用される LayerUpdateProc を作成します：
static void battery_update_proc(Layer *layer, GContext *ctx) {
}
ファイルの先頭でこの新しい Layer を宣言します：
static Layer *s_battery_layer;
main_window_load() で Layer を割り当て、それを描画する LayerUpdateProc を割り当て、それをメインの Window の子として追加して表示できるようにします：
// Create battery meter Layer
s_battery_layer = layer_create(GRect(14, 54, 115, 2));
layer_set_update_proc(s_battery_layer, battery_update_proc);
// Add to Window
layer_add_child(window_get_root_layer(window), s_battery_layer);
充電レベルが変化するたびにバッテリーメーターが更新されるようにするには、battery_callback() 内で 'dirty' にマークします（次の機会にシステムに再レンダリングを要求するため）：
// Update meter
layer_mark_dirty(s_battery_layer);
パズルの最後のピースは、LayerUpdateProc 内で行われるバッテリーメーターの実際の描画です。メーターの背景は、背景画像を「上書き」するように描画され、その後、メーターの「バー」の幅が、バーの全幅（114px）のパーセンテージとして現在の値を使用して計算されます。
更新手順の完成版を以下に示します：
static void battery_update_proc(Layer *layer, GContext *ctx) {
GRect bounds = layer_get_bounds(layer);
// Find the width of the bar (total width = 114px)
int width = (s_battery_level * 114) / 100;
// Draw the background
graphics_context_set_fill_color(ctx, GColorBlack);
graphics_fill_rect(ctx, bounds, 0, GCornerNone);
// Draw the bar
graphics_context_set_fill_color(ctx, GColorWhite);
graphics_fill_rect(ctx, GRect(0, 0, width, bounds.size.h), 0, GCornerNone);
}
最後に、TickTimerService と同様に、BatteryStateHandler は init() で手動で呼び出して初期値を表示できます：
// Ensure battery level is displayed from the start
battery_callback(battery_state_service_peek());
新しいバッテリーメーターによって使用されるメモリを解放することを忘れないでください：
layer_destroy(s_battery_layer);
この新しい機能により、ウォッチフェイスは既存のデザインスタイルとうまく統合されたミニマリストな方法でウォッチのバッテリー充電レベルを表示するようになります。
次は？
次の、そして最後のチュートリアルセクションでは、Connection Service を使用して、Pebble スマートウォッチがスマートフォンから切断されたときにユーザーに通知します。