気まぐれDeveloperブログ: Pebble

ラベル Pebble の投稿を表示しています。すべての投稿を表示

2016年8月27日土曜日

オリジナルのPebbleアプリを作成 2 - シンプルな時計表示 -

今回もCloudPebbleを使ってシンプルな時計を表示するアプリを作成してみます。

最小プログラム

まずは一番最小となるアプリを作成してみます。
新規にプロジェクトを作成します。プロジェクト名はSAMPLE2にしてます。

PROJECT TYPE : Pebble C SDK
SDK VERSION: SDK3
TEMPLATE: Empty project

※今回はTEMPLATEをEmpty projectにしています。

作成後新規にソースファイルを追加します。

ファイル名はmain.cにしてます。
作成したmain.cを以下に編集します。

#include <pebble.h>

static Window *s_window;

int main(void) {
  s_window = window_create();
  window_stack_push(s_window, true);

  app_event_loop();

  window_destroy(s_window);
}

処理内容としては、

Windowポインタをwindow_create()で取得
表示させる為にwindow_stack_pushでstackにpush

この時の第二引数はアニメーションの有無です。
※PebbleOSはWindow Stack APIにて画面遷移など行います。
app_event_loopでExitするまでメインループを実行
最後window_destroyでWindowを破棄して終了

となります。
早速エミュレータで確認してみます。
COMPILATION > EMULATOR > RUN BUILD > APLITEで実行できます。

実行した結果がこちら↓

当然ながら何も表示されてませんが、一応最小のプログラムができました。

時計表示

最小限のプログラムを改良して、シンプルな時計を表示させるアプリを作成してみます。

#include <pebble.h>

static Window *s_window;
static TextLayer *s_time_layer;
static char s_buffer[] = "00:00:00";

// Windowが読み込まれた時に呼ばれる
static void window_load(Window *window) {
  // ルートのレイヤーのサイズを取得
  Layer *window_layer = window_get_root_layer(s_window);
  GRect bounds = layer_get_bounds(window_layer);

  // 時計を表示するレイヤーの作成
  s_time_layer = text_layer_create(
      GRect(0, 0, bounds.size.w, bounds.size.h));

  // レイヤーの設定
  text_layer_set_background_color(s_time_layer, GColorPastelYellow);
  text_layer_set_text_color(s_time_layer, GColorBlack);
  text_layer_set_font(s_time_layer, fonts_get_system_font(FONT_KEY_ROBOTO_CONDENSED_21));
  text_layer_set_text_alignment(s_time_layer, GTextAlignmentCenter);

  // レイヤーの追加
  layer_add_child(window_layer, text_layer_get_layer(s_time_layer));
}

// Windowが解放された時に呼ばれる
static void window_unload(Window *window) {
  text_layer_destroy(s_time_layer);
}

// 時間更新
static void update_time() {
  // 現在時刻の取得
  time_t temp = time(NULL);
  struct tm *tick_time = localtime(&temp);

  // フォーマット指定で文字列に出力
  strftime(s_buffer, sizeof(s_buffer), "%T", tick_time);

  // ディスプレイ出力
  text_layer_set_text(s_time_layer, s_buffer);
}

// 秒毎に呼ばれるハンドラ
static void tick_handler(struct tm *tick_time, TimeUnits units_changed) {
  update_time();
}

// メイン
int main(void) {
  // ウィンドウの作成
  s_window = window_create();
  window_set_window_handlers(s_window, (WindowHandlers) {
    .load = window_load,
    .unload = window_unload
  });
  // イベント登録
  tick_timer_service_subscribe(SECOND_UNIT, tick_handler);
  // Window Stackに追加
  window_stack_push(s_window, true);
  // 一度現在時刻で表示
  update_time();

  // メインループ
  app_event_loop();
  // 終了処理
  window_destroy(s_window);
}

やってる事としては、、

window_set_window_handlersでWindowがload、unloadした時のハンドライベントを設定します
Windowがloadしたタイミングで時計を表示するレイヤー(s_time_layer)を作成します

※指定できるフォントはこちらを参考にしました
tick_timer_service_subscribeで1秒毎にtick_handler関数を呼び出すように登録します
update_timeで現在時刻をs_time_layerに書き出します

です。ただ今回tick_timer_service_subscribeで1秒毎(SECOND_UNIT)に
ハンドラを呼び出してますが、実機だと電池がその分消費されるので注意です。

最後にエミュレータで動作させた結果がこちらです↓

2016年8月24日水曜日

Pebbleを購入して約3週間よく使うアプリやWatchface

最近Pebbleネタが続いてますが、、
今回は個人的にPebbleを購入して約3週間でよく使ってるアプリやWatchfaceを
紹介できればと思います。

Watchface

かなりの数のWatchfaceがあるので、
選ぶだけでかなり時間を使ってしまいますw

MIYAMOTO REDUX

最近はデザインが気に入ってずっとこのWatchfaceをしてるんですが、
時計盤がデジタル/アナログの切り替えができるのと、
時間と共に時計盤の周りが変化するので飽きないです。

MARIO TIME WATCHFACE

言わずもがなマリオです。
ユニークなWatchfaceですが、なかなか機能面でも優れてます。
バッテリーやBluetoothの接続状態
(接続が切れると振動で教えてくれるように設定できます)
気温などを表示してくれます。
ただちょっとおもちゃっぽくなってしまう感じが。。(自分だけ?)

Apps

まだまだ全然いろんなアプリを試せては無いんですが、
インストールして今も使ってるアプリを紹介したいと思います。

STOPWATCH