Pebble Time ： GUI で画面レイアウト

に が投稿

CLOUD PEBBLE には、画面のレイアウトをGUIで行う機能があります。パーツ数が少ない時などは、簡単に作れるので良いですよ。

layout_1

SOURCE FILE の「ADD NEW」で、FILE TYPEとして「Windows Layout」を選びます。WINDOW NAMEは何でもいいですが、今回は1画面しか作らないので「main」にしときます。

layout_2

画面レイアウトが表示されます。実際には「main.h」と「main.c」のCのソースが できています。

layout_3

「TOOLKIT」を選んで、GUI部品をドラッグ＆ドロップして画面を作ります。

layout_4

「PROPERTIES」でフォントや色の指定ができます。色は「白」「黒」「透明」しか選択できないです。（他の色付けたい場合は別途プログラム側から指定。）

layout_6_

右の「UI Editor」アイコンで、ソースコード画面に切り替わります。もう一度押すと、GUI画面に戻ります。
この後もGUI Editor使う場合には、

// BEGIN AUTO-GENERATED UI CODE; DO NOT MODIFY
               ：
// END AUTO-GENERATED UI CODE

の間に書いてある内容は、変更しないように気を付けてください。

あとは「deinit()」 と「main()」 を追加すれば、動作します。「main()」で「show_main();」を呼び出せばOK。

static void deinit() {
  // Destroy Window
  window_destroy(s_window);
}
 int main(void) {
  show_main();
  app_event_loop();
  deinit();
}

色を付けたい場合などは、Windows Handlersに main_window_load 指定して、そこで記述すればよいと思います。

static void main_window_load(Window *window) {
  text_layer_set_text(s_textlayer_1, "THURSDAY");
  text_layer_set_text(s_textlayer_2, "00:01");
  text_layer_set_text_color(s_textlayer_1, GColorBlue);
  text_layer_set_text_color(s_textlayer_2, GColorBlue);
  bitmap_layer_set_background_color(s_bitmaplayer_1, GColorBlue);
}

void show_main(void) {
  initialise_ui();
  window_set_window_handlers(s_window, (WindowHandlers) {
    .load = main_window_load,
    .unload = handle_window_unload,
  });
  window_stack_push(s_window, true);
}

実行したらこんな感じだ！

layout_5