プログラミング初心者がPebble Time Watchfaceを作ってみた

Last updated at 2016-04-12Posted at 2015-12-21

こんにちは、この記事はGoodpatchのエンジニア※がお送りするGoodpatch Advent Calendar 2015の22日目の記事です。

先日はAndroidエンジニアの @u-16 MaterialDesignと戯れてみて思ったこととかでした。

私はProttでプロジェクトマネージャーをやっています。今回は、プログラミング未経験でPebble TimeのWatchfaceを開発してみた話を非エンジニア枠でひっそり書いてみようと思います。

#Pebble Timeって？

Pebble TimeはスマートウォッチのひとつでApple WatchやAndroid Wearと違う点は

OS：独自のPebble OS
ペアリング：AndroidとiOSの両方とペアリングが可能！
操作方法：タップではなく、左右についているボタンのみ

です。他、Pebble Time Roundはびっくりするくらい薄くて、普通の時計をつけている感覚でつけていられます。
アニメーションがいい感じで使っていてすごい楽しいです。Watchfaceはおそらく非公式であろうキャラクターものや、アナログ、デジタル共にたくさんあります。

Pebble Time for Androidはこんなかんじ。

#Watchfaceを作ってみる

##まずはじめに

##開発環境

Cloud Pebbleという、オンラインの開発環境で今回は開発をしました。

##言語

基本的にC言語での開発になりますが、~~Simply.jsを利用することで~~ Pebble.jsを利用することで JavaScript のみの開発もできるとのこと。

英語ですが、公式できちんとドキュメントを用意してくれています。

##画面サイズとか

Pebble Timeはシリーズで現在までで、3種類出てるので画面サイズなどはそれぞれ、下記で用意が必要です。

DEVELOPER GUIDES

COLOR PICKER

Pebble内では上記の色のみ使用可能なので、デザインするときは上記を参考にしながら作ります。

BENEFITS OF DESIGN GUIDELINES

デザインガイドラインも用意してあります。

上記に目を通してみて、初めてのプログラミングは、まず簡単にこんな感じに作ってみよう！っていうことで開発をスタート。

#作ってみた

とりあえずチュートリアルとか、サンプルコードを引っ張ってきて、理解しながらやってみました。初めてのプログラミングでも、コードをちゃんと読めば理解できるので、いいかんじ。

main.c


#include <pebble.h>

static Window *s_main_window;

static GBitmap *s_bitmap;
static BitmapLayer *s_bitmap_layer;

static TextLayer *s_time_layer, *s_date_layer;


static void update_time() {
  // Get a tm structure
  time_t temp = time(NULL); 
  struct tm *tick_time = localtime(&temp);

  // Write the current hours and minutes into a buffer
  static char s_buffer[8];
  strftime(s_buffer, sizeof(s_buffer), clock_is_24h_style() ?
                                          "%H:%M" : "%I:%M", tick_time);

  // Display this time on the TextLayer
  text_layer_set_text(s_time_layer, s_buffer);
  
  // Copy date into buffer from tm structure
static char date_buffer[16];
  strftime(date_buffer, sizeof(date_buffer), "%b %d (%a)", tick_time);

// Show the date
  text_layer_set_text(s_date_layer, date_buffer);

}

static void tick_handler(struct tm *tick_time, TimeUnits units_changed) {
  update_time();
}



static void main_window_load(Window *window) {
  // Get information about the Window
  Layer *window_layer = window_get_root_layer(window);
  GRect bounds = layer_get_bounds(window_layer);

  // Create the TextLayer with specific bounds
  s_time_layer = text_layer_create(
      GRect(0, PBL_IF_ROUND_ELSE(48, 52), bounds.size.w, 50));

  // Create time TextLayer
  text_layer_set_background_color(s_time_layer, GColorClear);
  text_layer_set_text_color(s_time_layer, GColorBlack);
  text_layer_set_text(s_time_layer, "00:00");
  text_layer_set_font(s_time_layer, fonts_get_system_font(FONT_KEY_BITHAM_42_MEDIUM_NUMBERS));
  text_layer_set_text_alignment(s_time_layer, GTextAlignmentCenter);

  // Add it as a child layer to the Window's root layer
  layer_add_child(window_layer, text_layer_get_layer(s_time_layer));
  
  
  // Create date TextLayer
  s_date_layer = text_layer_create(GRect(0, 93, 180, 40));
  text_layer_set_text_color(s_date_layer, GColorBlack);
  text_layer_set_background_color(s_date_layer, GColorClear);
  text_layer_set_font(s_date_layer, fonts_get_system_font(FONT_KEY_GOTHIC_18_BOLD));
  text_layer_set_text_alignment(s_date_layer, GTextAlignmentCenter);
  
  // Add to Window
  layer_add_child(window_get_root_layer(window), text_layer_get_layer(s_date_layer));
  
  s_bitmap = gbitmap_create_with_resource(RESOURCE_ID_DOG);
  s_bitmap_layer = bitmap_layer_create(bounds);
  bitmap_layer_set_bitmap(s_bitmap_layer, s_bitmap);
  bitmap_layer_set_compositing_mode(s_bitmap_layer, GCompOpSet);
  layer_add_child(window_layer, bitmap_layer_get_layer(s_bitmap_layer));
}

static void main_window_unload(Window *window) {
  // Destroy TextLayer
  text_layer_destroy(s_time_layer);
  bitmap_layer_destroy(s_bitmap_layer);
  gbitmap_destroy(s_bitmap);
  
}


static void init() {
  // Create main Window element and assign to pointer
  s_main_window = window_create();

  // Set handlers to manage the elements inside the Window
  window_set_window_handlers(s_main_window, (WindowHandlers) {
    .load = main_window_load,
    .unload = main_window_unload
  });

  // Show the Window on the watch, with animated=true
  window_stack_push(s_main_window, true);

  // Make sure the time is displayed from the start
  update_time();

  // Register with TickTimerService
  tick_timer_service_subscribe(MINUTE_UNIT, tick_handler);
}

static void deinit() {
  // Destroy Window
  window_destroy(s_main_window);
}

int main(void) {
  init();
  app_event_loop();
  deinit();
}