Pebble 開発チュートリアル(1-3):色を付けてみる

せっかくPebble SDK 3使っているのに、白黒なのは残念ですよね。ということで、チュートリアルからは外れますが、色を付けてみましょう。

Pebble Timeで使える色は64色。Developerサイトにカラーピッカーがあります。
pebble3_01

色を選ぶと、名称やHTML色コードや色設定サンプルコードも出てくる親切ページ。

Window *window = window_create();
window_set_background_color(window, GColorBrightGreen);
window_stack_push(window, true);

こういう感じで「GColor~」で指定してやればよいみたいですね。では、さっそく、TextLayerの背景をGColorDarkGray、文字色をGColorBrightGreenにしてみます。

 text_layer_set_background_color(s_time_layer, GColorDarkGray);
 text_layer_set_text_color(s_time_layer, GColorBrightGreen);

pebble3_02

あれ?なんか該当行に、バッテン付いてますね。

pebble3_03

コンパイルしてみると、やっぱり失敗。

../src/main.c: In function 'main_window_load':
../src/main.c:34:49: error: 'GColorDarkGray' undeclared (first use in this function)
../src/main.c:34:49: note: each undeclared identifier is reported only once for each function it appears in
../src/main.c:35:43: error: 'GColorBrightGreen' undeclared (first use in this function)
Waf: Leaving directory `/tmp/tmpMXfVRB/build'
Build failed

ビルドログによると、値の未定義。

これは、コンパイラが白黒Pebble用とカラーPebble用の両方をコンパイルするため、白黒用のコンパイル時に、カラー指定のところでエラーが出ているのでした。

pebble3_06

バッテンのところにマウスオーバーすると、エラー理由出してくれます。ブラウザ上のエディタなのにスゴイです。「aptile: use of undeclared Identifier ‘GColorDarkGray’」とのことじゃ。

pebble3_04

白黒用のコンパイルをしないために、SETTING で「APLITE」を対象から外します。一番下の「SAVE CHANGES」押すの忘れずに。

ただ、この設定にしても、バッテンは消えないのです。まあ、それは気にせず、実行してみると…

pebble3_05

やったー。色が付いたー。

ひとまずうまくいったとはいえ、バッテンは消したいですよね。マイグレーションガイドによると、「#ifdef PBL_COLOR」を使って白黒とカラーで処理を分ける必要があるとのこと。

#ifdef PBL_COLOR
  text_layer_set_background_color(s_time_layer, GColorDarkGray);
  text_layer_set_text_color(s_time_layer, GColorBrightGreen);
#else
  text_layer_set_background_color(s_time_layer, GColorClear);
  text_layer_set_text_color(s_time_layer, GColorBlack);
#endif

これでOK。

pebble3_07

はい、きれいになった。白黒・カラーの両対応したなら、先ほど外したSETTING の「APLITE」も、戻しておくといいでしょう。

pebble3_08

左メニューの「COMPILATION」から実行すると、エミュレータ実行時に、白黒実行/カラー実行を選択すること可能です。


pebble3_09

ちなみに、ブラウザで表示倍率を大きくすると、エミュレータ部分がでっかくなって楽しいですよ。


修正~コンパイルを繰り返していると、時々エミュレータへのインストールで止まってしまうときがあります。

pebble3_10

エミュレータ側にはタイムアウトとか出てたりしますね。その時はブラウザをリロードしてやりなおしてみましょう。

pebble3_11

リロードしてもうまくいかないってこともあるのですが、そうなったら

pebble3_12

いったん、エミュレータをシャットダウンしてからやるとうまくいきますよ。