[v0.5]

* Replace spiral image with arc drawing routines.
* UI is redrawn using the UI Editor on CloudPebble.

Author: Stefan

Fibonacci_Clock.pbw

@@ -8,24 +8,19 @@
     "projectType": "native",
     "resources": {
         "media": [
-            {
-                "file": "images/spiral.png",
-                "name": "IMAGE_SPIRAL",
-                "type": "png"
-            },
             {
                 "file": "images/charging.png",
                 "name": "IMAGE_CHARGING",
                 "type": "png"
             },
             {
-                "file": "images/plugged.png",
-                "name": "IMAGE_PLUGGED",
+                "file": "images/battery.png",
+                "name": "IMAGE_BATTERY",
                 "type": "png"
             },
             {
-                "file": "images/battery.png",
-                "name": "IMAGE_BATTERY",
+                "file": "images/plugged.png",
+                "name": "IMAGE_PLUGGED",
                 "type": "png"
             },
             {
@@ -42,7 +37,7 @@
         "basalt"
     ],
     "uuid": "1289bd91-5811-40a5-a270-e8f97c126f18",
-    "versionLabel": "0.4",
+    "versionLabel": "0.5",
     "watchapp": {
         "watchface": true
     }

Fibonacci_Clock.png

@@ -1,23 +1,96 @@
 #include <pebble.h>
+#include "main.h"
 
-// Windows
-static Window *s_main_window;
+#define USE_FIXED_TIME_FOR_PUBLISHING_IMAGE 0
 
-// Layers
-static Layer *s_grid_layer;
+// BEGIN AUTO-GENERATED UI CODE; DO NOT MODIFY
+static Window *s_window;
+static GFont s_res_bitham_30_black;
+static Layer *s_fibo_layer;
 static TextLayer *s_time_layer;
 static Layer *s_charge_layer;
+static Layer *s_arc5x5_layer;
+static Layer *s_arc3x3_layer;
+static Layer *s_arc2x2_layer;
+static Layer *s_arc1x1L_layer;
+static Layer *s_arc1x1R_layer;
+
+static void initialise_ui(void) {
+  s_window = window_create();
+  window_set_background_color(s_window, GColorBlack);
+  #ifndef PBL_SDK_3
+    window_set_fullscreen(s_window, true);
+  #endif
+  
+  s_res_bitham_30_black = fonts_get_system_font(FONT_KEY_BITHAM_30_BLACK);
+  // s_fibo_layer
+  s_fibo_layer = layer_create(GRect(19, 1, 105, 165));
+  layer_add_child(window_get_root_layer(s_window), (Layer *)s_fibo_layer);
+  
+  // s_time_layer
+  s_time_layer = text_layer_create(GRect(0, 65, 144, 40));
+  text_layer_set_background_color(s_time_layer, GColorClear);
+  text_layer_set_text(s_time_layer, "10:30");
+  text_layer_set_text_alignment(s_time_layer, GTextAlignmentCenter);
+  text_layer_set_font(s_time_layer, s_res_bitham_30_black);
+  layer_add_child(window_get_root_layer(s_window), (Layer *)s_time_layer);
+  
+  // s_charge_layer
+  s_charge_layer = layer_create(GRect(127, 142, 15, 22));
+  layer_add_child(window_get_root_layer(s_window), (Layer *)s_charge_layer);
+  
+  // s_arc5x5_layer
+  s_arc5x5_layer = layer_create(GRect(21, 63, 101, 101));
+  layer_add_child(window_get_root_layer(s_window), (Layer *)s_arc5x5_layer);
+  
+  // s_arc3x3_layer
+  s_arc3x3_layer = layer_create(GRect(21, 3, 61, 61));
+  layer_add_child(window_get_root_layer(s_window), (Layer *)s_arc3x3_layer);
+  
+  // s_arc2x2_layer
+  s_arc2x2_layer = layer_create(GRect(81, 3, 41, 41));
+  layer_add_child(window_get_root_layer(s_window), (Layer *)s_arc2x2_layer);
+  
+  // s_arc1x1L_layer
+  s_arc1x1L_layer = layer_create(GRect(81, 43, 21, 21));
+  layer_add_child(window_get_root_layer(s_window), (Layer *)s_arc1x1L_layer);
+  
+  // s_arc1x1R_layer
+  s_arc1x1R_layer = layer_create(GRect(101, 43, 21, 21));
+  layer_add_child(window_get_root_layer(s_window), (Layer *)s_arc1x1R_layer);
+}
 
+static void destroy_ui(void) {
+  window_destroy(s_window);
+  layer_destroy(s_fibo_layer);
+  text_layer_destroy(s_time_layer);
+  layer_destroy(s_charge_layer);
+  layer_destroy(s_arc5x5_layer);
+  layer_destroy(s_arc3x3_layer);
+  layer_destroy(s_arc2x2_layer);
+  layer_destroy(s_arc1x1L_layer);
+  layer_destroy(s_arc1x1R_layer);
+}
+// END AUTO-GENERATED UI CODE
+ 
 #if 1
   // GRects (Vertical)
+  static struct GRect s_3x3_square  = {{ 2,  2}, { 61,  61}}; // 3x3 Square
+  static struct GRect s_2x2_square  = {{62,  2}, { 41,  41}}; // 2x2 Square
+  static struct GRect s_1x1L_square = {{62, 42}, { 21,  21}}; // 1x1 Square (left)
+  static struct GRect s_1x1R_square = {{82, 42}, { 21,  21}}; // 1x1 Square (right)
+  static struct GRect s_5x5_square  = {{ 2, 62}, {101, 101}}; // 5x5 Square
+  static struct GRect s_outline     = {{ 0,  0}, {105, 165}};
+#elif 0
+  // GRects (Vertical)  (WARNING! coordinates are for the OLD layer position/size, replaced by above)
   static struct GRect s_3x3_square  = {{ 21,  3}, { 61,  61}}; // 3x3 Square
   static struct GRect s_2x2_square  = {{ 81,  3}, { 41,  41}}; // 2x2 Square
   static struct GRect s_1x1L_square = {{ 81, 43}, { 21,  21}}; // 1x1 Square (left)
   static struct GRect s_1x1R_square = {{101, 43}, { 21,  21}}; // 1x1 Square (right)
   static struct GRect s_5x5_square  = {{ 21, 63}, {101, 101}}; // 5x5 Square
   static struct GRect s_outline     = {{ 19,  1}, {105, 165}};
 #else
-  // GRects (Horizontal)
+  // GRects (Horizontal)  (WARNING! coordinates are for the OLD layer position/size)
   static struct GRect s_3x3_square  = {{ 3,  75}, { 52,  52}}; // 3x3 Square
   static struct GRect s_2x2_square  = {{ 3,  41}, { 35,  35}}; // 2x2 Square
   static struct GRect s_1x1L_square = {{ 37, 58}, { 18,  18}}; // 1x1 Square (bottom)
@@ -27,14 +100,17 @@ static Layer *s_charge_layer;
 #endif
 
 // GBitmap
-static GBitmap *s_spiral_image;
 static GBitmap *s_battery_image;
 static GBitmap *s_charging_image;
 static GBitmap *s_plugged_image;
 
 // Global time
 static int s_curr_hour;
-static int s_curr_min;
+static int s_curr_min; 
+
+static void handle_window_unload(Window* window) {
+  destroy_ui();
+}
 
 static void update_time() {
   // Create a long-lived buffer
@@ -43,17 +119,56 @@ static void update_time() {
   // Write the current hours and minutes into the buffer
   clock_copy_time_string(time_str, sizeof(time_str));
 
+#if USE_FIXED_TIME_FOR_PUBLISHING_IMAGE
+  strcpy(time_str, "10:30");
+#endif
+  
   // Update current time on the TextLayer
   text_layer_set_text(s_time_layer, time_str);
 }
 
-static void grid_layer_update_callback(Layer *layer, GContext *ctx) {
+static void draw_spiral_arc(GContext *ctx, GPoint center, uint16_t radius ) {
+  graphics_context_set_stroke_color(ctx, GColorDarkGray);
+  graphics_context_set_stroke_width(ctx, 3);
+  graphics_draw_circle(ctx, center, radius - 2);
+}
+
+static void arc3x3_layer_update_callback(Layer *layer, GContext *ctx) {
+  GRect bound = layer_get_frame(layer);
+  draw_spiral_arc(ctx, GPoint(bound.size.w, bound.size.h), bound.size.w);
+}
+
+static void arc2x2_layer_update_callback(Layer *layer, GContext *ctx) {
+  GRect bound = layer_get_frame(layer);
+  draw_spiral_arc(ctx, GPoint(0, bound.size.h), bound.size.w);
+}
+
+static void arc1x1L_layer_update_callback(Layer *layer, GContext *ctx) {
+  GRect bound = layer_get_frame(layer);
+  draw_spiral_arc(ctx, GPoint(bound.size.w, 0), bound.size.w);
+}
+
+static void arc1x1R_layer_update_callback(Layer *layer, GContext *ctx) {
+  GRect bound = layer_get_frame(layer);
+  draw_spiral_arc(ctx, GPoint(0, 0), bound.size.w);
+}
+
+static void arc5x5_layer_update_callback(Layer *layer, GContext *ctx) {
+  GRect bound = layer_get_frame(layer);
+  draw_spiral_arc(ctx, GPoint(bound.size.w, 0), bound.size.w);
+}
 
+static void fibo_layer_update_callback(Layer *layer, GContext *ctx) {
   GColor fill_color[] = {GColorWhite, GColorRed, GColorGreen, GColorBlue};
   int8_t fc1L = 0, fc1R = 0, fc2 = 0, fc3 = 0, fc5 = 0;
   int8_t h = s_curr_hour;
   int8_t m = s_curr_min / 5; // Since only values from 1-12 can be displayed
 
+#if USE_FIXED_TIME_FOR_PUBLISHING_IMAGE
+  h = 10;
+  m = 30 / 5;
+#endif
+
   // Determine what fill color to use in each box
   if (h >= 5) { fc5  |= 0x01; h -= 5; }
   if (h >= 3) { fc3  |= 0x01; h -= 3; }
@@ -96,10 +211,6 @@ static void grid_layer_update_callback(Layer *layer, GContext *ctx) {
     }
   }
 
-  // Draw spiral
-  graphics_context_set_compositing_mode(ctx, GCompOpSet);
-  graphics_draw_bitmap_in_rect(ctx, s_spiral_image, gbitmap_get_bounds(s_spiral_image));
-  
   // Draw the outline
   graphics_context_set_stroke_color(ctx, GColorDarkGray);
   graphics_context_set_stroke_width(ctx, 1);
@@ -135,83 +246,42 @@ static void charge_layer_update_callback(Layer *layer, GContext *ctx) {
   }
 }
 
-static void main_window_load(Window *window) {
-  // Get windows root layer and its bounds
-  Layer *root_layer = window_get_root_layer(window);
-  GRect root_bounds = layer_get_frame(root_layer);
-
-  // Create the grid layer
-  s_grid_layer = layer_create(root_bounds);
-  layer_set_update_proc(s_grid_layer, grid_layer_update_callback);
-
-  // Add it as a child layer to the Window's root layer
-  layer_add_child(root_layer, s_grid_layer);
-
-  // Create time TextLayer
-  s_time_layer = text_layer_create(GRect(root_bounds.origin.x, 65, root_bounds.size.w, 40));
-  text_layer_set_background_color(s_time_layer, GColorClear);
-  text_layer_set_text_color(s_time_layer, GColorBlack);
-
-  // Improve the layout to be more like a watchface
-  text_layer_set_font(s_time_layer, fonts_get_system_font(FONT_KEY_BITHAM_30_BLACK));
-  text_layer_set_text_alignment(s_time_layer, GTextAlignmentCenter);
-
-  // Add it as a child layer to the Window's root layer
-  layer_add_child(root_layer, text_layer_get_layer(s_time_layer));
-
-  // Create charge layer
-  s_charge_layer = layer_create(GRect(127, 142, 15, 22));
-  layer_set_update_proc(s_charge_layer, charge_layer_update_callback);
-
-  // Add it as a child layer to the Window's root layer
-  layer_add_child(root_layer, s_charge_layer);
-  
-  // Createing bitmaps
-  s_spiral_image = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_SPIRAL);
-  s_battery_image = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_BATTERY);
-  s_charging_image = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_CHARGING);
-  s_plugged_image = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_PLUGGED);
-  
-  // Make sure that the currnet time is displayed from the start
-  update_time();
-}
-
-static void main_window_unload(Window *window) {
-  gbitmap_destroy(s_plugged_image);
-  gbitmap_destroy(s_charging_image);
-  gbitmap_destroy(s_battery_image);
-  gbitmap_destroy(s_spiral_image);
-  layer_destroy(s_charge_layer);
-  text_layer_destroy(s_time_layer);
-  layer_destroy(s_grid_layer);
-}
-
 static void tick_handler(struct tm *tick_time, TimeUnits units_changed) {
   update_time();
 
   s_curr_hour = (tick_time->tm_hour > 12) ? tick_time->tm_hour - 12 : tick_time->tm_hour;
   s_curr_min = tick_time->tm_min;
 
-  layer_mark_dirty(s_grid_layer);
+  layer_mark_dirty(s_fibo_layer);
 }
 
-void battery_charge_handler(BatteryChargeState charge) {
+static void battery_charge_handler(BatteryChargeState charge) {
   layer_mark_dirty(s_charge_layer);
 }
 
-void init(void) {
-  // Create main Window element and assign to pointer
-  s_main_window = window_create();
-  window_set_background_color(s_main_window, GColorBlack);
-
-  // 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
+void show_main(void) {
+  initialise_ui();
+  window_set_window_handlers(s_window, (WindowHandlers) {
+    .unload = handle_window_unload,
   });
-
-  // Show the Window on the watch, with animated = true
-  window_stack_push(s_main_window, true);
+  window_stack_push(s_window, true);
+  
+  // Set up layer callbacks
+  layer_set_update_proc(s_fibo_layer, fibo_layer_update_callback);
+  layer_set_update_proc(s_charge_layer, charge_layer_update_callback);
+  layer_set_update_proc(s_arc3x3_layer, arc3x3_layer_update_callback);
+  layer_set_update_proc(s_arc2x2_layer, arc2x2_layer_update_callback);
+  layer_set_update_proc(s_arc1x1L_layer, arc1x1L_layer_update_callback);
+  layer_set_update_proc(s_arc1x1R_layer, arc1x1R_layer_update_callback);
+  layer_set_update_proc(s_arc5x5_layer, arc5x5_layer_update_callback);
+  
+  // Create bitmaps
+  s_battery_image = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_BATTERY);
+  s_charging_image = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_CHARGING);
+  s_plugged_image = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_PLUGGED);
+  
+  // Make sure that the currnet time is displayed from the start
+  update_time();
 
   // Register with TickTimerService
   tick_timer_service_subscribe(MINUTE_UNIT, tick_handler);
@@ -220,14 +290,19 @@ void init(void) {
   battery_state_service_subscribe(battery_charge_handler);
 }
 
-void deinit(void) {
-  battery_state_service_unsubscribe();
+void hide_main(void) {
+  window_stack_remove(s_window, true);
+
+  gbitmap_destroy(s_battery_image);
+  gbitmap_destroy(s_charging_image);
+  gbitmap_destroy(s_plugged_image);
+
   tick_timer_service_unsubscribe();
-  window_destroy(s_main_window);
+  battery_state_service_unsubscribe();
 }
 
 int main(void) {
-  init();
+  show_main();
   app_event_loop();
-  deinit();
+  hide_main();
 }

appinfo.json

@@ -0,0 +1,2 @@
+void show_main(void);
+void hide_main(void);