雑文発散

▼ [Pebble] Pebble Time が届いたのでカラーアプリのサンプルを作ってみる

つい先日に Pebble のチュートリアルを書いてみたばかりなので、Pebble アプリについてのノウハウは全然ない状態なのだけど、せっかく Pebble Time が届いたので、何か色が出るアプリを作ってみようと思い立った。

Pebble のドキュメントに「Creating Colorful Apps」というのを見つけたので、これを元に試行錯誤していく。

アプリのひな形は、pebble new-project コマンドで作ったものを使ってみる。

% pebble new-project pebble-time-sample

このまま build して install してみると、このような画面が出てくる。

このひな形を利用してカラーを入れていく。

Pebble Time は RGB が 2 ビットずつで合計 64 色が出る。それに透明度が 2 ビットあるというスペックみたいだ。そして、色を表現する方法はいくつか用意されている。

• GColorFromHEX(0xff0000)
• GColorFromRGB(255, 0, 0)
• (GColor8){ .argb = 0b11110000 }
• (GColor8){ .a = 0b11, .r = 0b11, .g = 0b00, .b = 0b00 }

また、各色は、その名前で定義されていて、「Color Definitions」のページで確認できる。

RGB の数値とか色の名前を見て実際の色が想像付く人にはこれで充分なのかも知れないけど、色に関してもっと簡単にセレクトしたい場合は「Color Picker」が用意されているので、これで選択するのが良さそう。実際の色からその名前や RGB 数値を知ることができる。

この Color Picker をいじっていて、ちょっと目に止まった Folly という色を時計画面の背景色に使ってみる。色の定義名は GColorFolly だ。これを背景色に指定するには、下記の 1 行を追加すれば良いはず。

diff --git a/src/pebble-time-sample.c b/src/pebble-time-sample.c
index 516f7c8..6784617 100644
--- a/src/pebble-time-sample.c
+++ b/src/pebble-time-sample.c
@@ -37,6 +37,7 @@ static void window_unload(Window *window) {

 static void init(void) {
   window = window_create();
+  window_set_background_color(window, GColorFolly);
   window_set_click_config_provider(window, click_config_provider);
   window_set_window_handlers(window, (WindowHandlers) {
     .load = window_load,

これを build して install すれば OK だ、、、と行きたいところだったが、コンパイルエラーが出た。

% pebble build
[snip]
[20/30] c: src/pebble-time-sample.c -> build/src/pebble-time-sample.c.18.o
../src/pebble-time-sample.c: In function 'init':
../src/pebble-time-sample.c:40:39: error: 'GColorFolly' undeclared (first use in this function)
../src/pebble-time-sample.c:40:39: note: each undeclared identifier is reported only once for each function it appears in
Waf: Leaving directory `/Users/norisuzu/work/pebble/pebble-time-sample/build'
Build failed

なんだろう？と思って調べてみたら、どうやら Pebble Time ではなく、初代 Pebble 用のコンパイルでコケていることが分かった。モノクロプラットフォームなので、色指定がされてないってことなのかな。

こいつは、appinfo.json で targetPlatforms から aplite を取り除くことで回避した。

diff --git a/appinfo.json b/appinfo.json
index 0ace8e0..fc2821c 100644
--- a/appinfo.json
+++ b/appinfo.json
@@ -5,7 +5,7 @@
   "companyName": "ZatsubunHassan",
   "versionLabel": "1.0",
   "sdkVersion": "3",
-  "targetPlatforms": ["aplite", "basalt"],
+  "targetPlatforms": ["basalt"],
   "watchapp": {
     "watchface": true
   },

チュートリアルをやっていたときは理解していなかったけど、aplite と basalt の違いは「What's new in SDK 3.0」のページに書かれていた。

ここには書かれていないけど、もうすぐ発売するはずの Pebble Time Steel は Basalt に入るんじゃないかな。

さて、今度こそ build & install をする。

テキストの周りが白いのは、テキストレイヤーの背景色のデフォルトがホワイトだからなのかな？

今度はテキストレイヤーもカラーを変えてみよう。背景色は透明（透過）で、テキストの色は「Medium Spring Green」というのにしてみよう。変更点は下記の 2 行のみ。

diff --git a/src/pebble-time-sample.c b/src/pebble-time-sample.c
index 6784617..e24b32b 100644
--- a/src/pebble-time-sample.c
+++ b/src/pebble-time-sample.c
@@ -28,6 +28,8 @@ static void window_load(Window *window) {
   text_layer = text_layer_create((GRect) { .origin = { 0, 72 }, .size = { bounds.size.w, 20 } });
   text_layer_set_text(text_layer, "Press a button");
   text_layer_set_text_alignment(text_layer, GTextAlignmentCenter);
+  text_layer_set_background_color(text_layer, GColorClear);
+  text_layer_set_text_color(text_layer, GColorMediumSpringGreen);
   layer_add_child(window_layer, text_layer_get_layer(text_layer));
 }

これで build & install してみるとこうなった。

いちおう補色を考えた色合いにしてみたんだけど、、、文字が小さくてちょっと見にくいな。フォントサイズを変えてみよう。

Pebble に内蔵されているシステムフォントを使う方法は「Using Pebble Fonts」で見つかった。

文字がでかくなりそうな FONT_KEY_BITHAM_42_BOLD を指定してみる。

diff --git a/src/pebble-time-sample.c b/src/pebble-time-sample.c
index e24b32b..3474467 100644
--- a/src/pebble-time-sample.c
+++ b/src/pebble-time-sample.c
@@ -30,6 +30,7 @@ static void window_load(Window *window) {
   text_layer_set_text_alignment(text_layer, GTextAlignmentCenter);
   text_layer_set_background_color(text_layer, GColorClear);
   text_layer_set_text_color(text_layer, GColorMediumSpringGreen);
+  text_layer_set_font(text_layer,  fonts_get_system_font(FONT_KEY_BITHAM_42_BOLD));
   layer_add_child(window_layer, text_layer_get_layer(text_layer));
 }

これで build & install してみると、、、テキストレイヤーからはみ出た（笑）

テキストレイヤーのサイズを変えてみる。.origin と bounds.size.w の意味がちょっと分からなかったので、Grect() で直接座標を指定してしまった。それから、うまく左右中心に表示させたかったので「Press a button」の途中に改行を加えた。

diff --git a/src/pebble-time-sample.c b/src/pebble-time-sample.c
index 3474467..49bfa36 100644
--- a/src/pebble-time-sample.c
+++ b/src/pebble-time-sample.c
@@ -25,8 +25,8 @@ static void window_load(Window *window) {
   Layer *window_layer = window_get_root_layer(window);
   GRect bounds = layer_get_bounds(window_layer);

-  text_layer = text_layer_create((GRect) { .origin = { 0, 72 }, .size = { bounds.size.w, 20 } });
-  text_layer_set_text(text_layer, "Press a button");
+  text_layer = text_layer_create(GRect(0, 18, 144, 150));
+  text_layer_set_text(text_layer, "Press\n a \nbutton");
   text_layer_set_text_alignment(text_layer, GTextAlignmentCenter);
   text_layer_set_background_color(text_layer, GColorClear);
   text_layer_set_text_color(text_layer, GColorMediumSpringGreen);

これでまた build & install をする。

「Creating Colorful Apps」のドキュメントには、グラフィック描画用の説明もあるけど、色の指定に関してはだいたい同じようだ。