Closes #1 - wide layout.

appinfo.in.json

@@ -16,6 +16,11 @@
                 "name": "IMG_BACKGROUND",
                 "file": "background.png"
             },
+            {
+                "type": "png",
+                "name": "IMG_BACKGROUND_WIDE",
+                "file": "background_wide.png"
+            },
             {
                 "type": "png",
                 "name": "IMG_BATTERY",
@@ -34,6 +39,7 @@
     "appKeys": {
         "KEY_SECONDS_HAND": 0,
         "KEY_BATTERY_INDICATOR": 1,
-        "KEY_DATE_FORMAT": 2
+        "KEY_DATE_FORMAT": 2,
+        "KEY_WIDE_LAYOUT": 3
     }
 }

config/index.html

@@ -21,6 +21,10 @@
                         Battery Indicator
                         <input id="input-battery-indicator" type="checkbox" class="item-toggle" name="battery-indicator" checked>
                     </label>
+                    <label class="item">
+                        Wide Window
+                        <input id="input-wide-layout" type="checkbox" class="item-toggle" name="wide-layout">
+                    </label>
                     <label class="item">
                         Date Format
                         <select id="input-date-format" name="date-format" class="item-select">
@@ -45,18 +49,21 @@
     function getConfigData() {
         var input_seconds_hand = document.getElementById('input-seconds-hand'),
             input_battery_indicator = document.getElementById('input-battery-indicator'),
-            input_date_format = document.getElementById('input-date-format');
+            input_date_format = document.getElementById('input-date-format'),
+            input_wide_layout = document.getElementById('input-wide-layout');
 
         var options = {
             'seconds_hand': input_seconds_hand.checked,
             'battery_indicator': input_battery_indicator.checked,
-            'date_format': input_date_format.value
+            'date_format': input_date_format.value,
+            'wide_layout': input_wide_layout.checked
         };
 
         // Save for next launch
         localStorage['seconds_hand'] = options['seconds_hand'];
         localStorage['battery_indicator'] = options['battery_indicator'];
         localStorage['date_format'] = options['date_format'];
+        localStorage['wide_layout'] = options['wide_layout'];
 
         console.log('Got options: ' + JSON.stringify(options));
         return options;
@@ -88,7 +95,8 @@
     (function() {
         var input_seconds_hand = document.getElementById('input-seconds-hand'),
             input_battery_indicator = document.getElementById('input-battery-indicator'),
-            input_date_format = document.getElementById('input-date-format');
+            input_date_format = document.getElementById('input-date-format'),
+            input_wide_layout = document.getElementById('input-wide-layout');
 
         if (localStorage['seconds_hand']) {
             input_seconds_hand.checked = JSON.parse(localStorage['seconds_hand']);
@@ -101,6 +109,10 @@
         if (localStorage['date_format']) {
             input_date_format.value = localStorage['date_format'];
         }
+
+        if (localStorage['wide_layout']) {
+            input_wide_layout.checked = JSON.parse(localStorage['wide_layout']);
+        }
     })();
 </script>
 </html>

src/intuiclock.c

@@ -39,6 +39,7 @@ static uint8_t battery_charge = 0;
 static bool hide_seconds_hand = false;
 static bool hide_battery_indicator = false;
 static char date_format[2];
+static bool use_wide_layout = false;
 
 static const GPathInfo MINUTE_HAND_POINTS = {
   4,
@@ -69,6 +70,7 @@ static const GPathInfo HOUR_HAND_POINTS = {
 #define KEY_SECONDS_HAND 0
 #define KEY_BATTERY_INDICATOR 1
 #define KEY_DATE_FORMAT 2
+#define KEY_WIDE_LAYOUT 3
 
 static void update_date_text_layer() {
     static char date_text[DATE_TEXT_SIZE];
@@ -102,6 +104,8 @@ static void update_ampm_text_layer() {
             text_layer_set_text(s_ampm_layer, DUMMY_AMPM_TEXT);
         }
     }
+
+    text_layer_set_text(s_ampm_layer, "AM");
 }
 
 static void tick_handler(struct tm *tick_time, TimeUnits changed_units) {
@@ -195,6 +199,30 @@ static void start_battery_tracking() {
     layer_set_hidden(s_battery_indicator_layer, hide_battery_indicator);
 }
 
+static void update_geometry() {
+    if (s_background_bitmap) {
+        gbitmap_destroy(s_background_bitmap);
+    }
+
+    if (use_wide_layout == false) {
+        s_background_bitmap = gbitmap_create_with_resource(RESOURCE_ID_IMG_BACKGROUND);
+        layer_set_frame(text_layer_get_layer(s_title_layer), GRect(36, 2, 46, 18));
+        layer_set_frame(text_layer_get_layer(s_date_layer), GRect(17, 130, 109, 16));
+        layer_set_frame(text_layer_get_layer(s_ampm_layer), GRect(107, 26, 16, 16));
+        layer_set_frame(bitmap_layer_get_layer(s_battery_icon_layer), GRect(20, 26, 16, 7));
+        layer_set_frame(s_battery_indicator_layer, GRect(21, 27, 13, 5));
+    } else {
+        s_background_bitmap = gbitmap_create_with_resource(RESOURCE_ID_IMG_BACKGROUND_WIDE);
+        layer_set_frame(text_layer_get_layer(s_title_layer), GRect(24, 2, 71, 18));
+        layer_set_frame(text_layer_get_layer(s_date_layer), GRect(4, 130, 136, 16));
+        layer_set_frame(text_layer_get_layer(s_ampm_layer), GRect(122, 25, 16, 16));
+        layer_set_frame(bitmap_layer_get_layer(s_battery_icon_layer), GRect(7, 26, 16, 7));
+        layer_set_frame(s_battery_indicator_layer, GRect(8, 27, 13, 5));
+    }
+
+    bitmap_layer_set_bitmap(s_background_layer, s_background_bitmap);
+}
+
 static void inbox_received_handler(DictionaryIterator *iter, void *context) {
     // Handling seconds_hand setting.
     Tuple *seconds_hand_t = dict_find(iter, KEY_SECONDS_HAND);
@@ -226,11 +254,21 @@ static void inbox_received_handler(DictionaryIterator *iter, void *context) {
 
     persist_write_string(KEY_DATE_FORMAT, date_format);
     update_date_text_layer();
+
+    // Handling wide_layout setting.
+    Tuple *wide_layout_t = dict_find(iter, KEY_WIDE_LAYOUT);
+    if (wide_layout_t && wide_layout_t->value->int32 > 0) {
+        use_wide_layout = true;
+    } else {
+        use_wide_layout = false;
+    }
+
+    persist_write_bool(KEY_WIDE_LAYOUT, use_wide_layout);
+    update_geometry();
 }
 
 static void main_window_load(Window *window) {
     // Loading resources.
-    s_background_bitmap = gbitmap_create_with_resource(RESOURCE_ID_IMG_BACKGROUND);
     s_battery_bitmap = gbitmap_create_with_resource(RESOURCE_ID_IMG_BATTERY);
     s_text_font = fonts_load_custom_font(resource_get_handle(RESOURCE_ID_FONT_TOPAZ_16));
 
@@ -243,12 +281,11 @@ static void main_window_load(Window *window) {
 
     // Creating background image layer.
     s_background_layer = bitmap_layer_create(bounds);
-    bitmap_layer_set_bitmap(s_background_layer, s_background_bitmap);
     bitmap_layer_set_compositing_mode(s_background_layer, GCompOpSet);
     layer_add_child(window_layer, bitmap_layer_get_layer(s_background_layer));
 
     // Creating title text layer.
-    s_title_layer = text_layer_create(GRect(36, 2, 46, 18));
+    s_title_layer = text_layer_create(GRect(0, 0, 71, 18));
     text_layer_set_background_color(s_title_layer, GColorClear);
     text_layer_set_text(s_title_layer, "Clock");
     text_layer_set_font(s_title_layer, s_text_font);
@@ -260,14 +297,14 @@ static void main_window_load(Window *window) {
     layer_add_child(window_layer, s_hands_layer);
 
     // Creating date layer.
-    s_date_layer = text_layer_create(GRect(17, 130, 109, 16));
+    s_date_layer = text_layer_create(GRect(0, 0, 136, 16));
     text_layer_set_text_alignment(s_date_layer, GTextAlignmentCenter);
     text_layer_set_background_color(s_date_layer, GColorClear);
     text_layer_set_font(s_date_layer, s_text_font);
     layer_add_child(window_layer, text_layer_get_layer(s_date_layer));
 
     // Creating AM/PM layer.
-    s_ampm_layer = text_layer_create(GRect(107, 26, 16, 16));
+    s_ampm_layer = text_layer_create(GRect(0, 0, 16, 16));
     text_layer_set_text_alignment(s_ampm_layer, GTextAlignmentCenter);
     text_layer_set_background_color(s_ampm_layer, GColorClear);
     text_layer_set_text_color(s_ampm_layer, GColorWhite);
@@ -275,16 +312,20 @@ static void main_window_load(Window *window) {
     layer_add_child(window_layer, text_layer_get_layer(s_ampm_layer));
 
     // Creating battery icon layer.
-    s_battery_icon_layer = bitmap_layer_create(GRect(20, 26, 16, 7));
+    s_battery_icon_layer = bitmap_layer_create(GRect(0, 0, 16, 7));
     bitmap_layer_set_bitmap(s_battery_icon_layer, s_battery_bitmap);
     bitmap_layer_set_compositing_mode(s_battery_icon_layer, GCompOpSet);
     layer_add_child(window_layer, bitmap_layer_get_layer(s_battery_icon_layer));
 
     // Creating battery indicator layer.
-    s_battery_indicator_layer = layer_create(GRect(21, 27, 13, 5));
+    s_battery_indicator_layer = layer_create(GRect(0, 0, 13, 5));
     layer_set_update_proc(s_battery_indicator_layer, s_battery_indicator_layer_update);
     layer_add_child(window_layer, s_battery_indicator_layer);
 
+    // Update geometry according to wide_layout setting.
+    use_wide_layout = persist_read_bool(KEY_WIDE_LAYOUT);
+    update_geometry();
+
     // Read date_format setting from persistent storage.
     int result = persist_read_string(KEY_DATE_FORMAT, date_format, 2);
     if (result == E_DOES_NOT_EXIST) {

src/js/pebble-js-app.js

@@ -24,7 +24,8 @@
 // });
 
 Pebble.addEventListener('showConfiguration', function(e) {
-    Pebble.openURL('https://pconf.bthlabs.pl/intuiclock/index.html');
+    Pebble.openURL('http://127.0.0.1/u/bilbo/pebble/iclock/index.html');
+    // Pebble.openURL('https://pconf.bthlabs.pl/intuiclock/index.html');
 });
 
 Pebble.addEventListener('webviewclosed', function(e) {
@@ -35,6 +36,7 @@ Pebble.addEventListener('webviewclosed', function(e) {
     dict['KEY_SECONDS_HAND'] = config_data['seconds_hand'];
     dict['KEY_BATTERY_INDICATOR'] = config_data['battery_indicator'];
     dict['KEY_DATE_FORMAT'] = config_data['date_format'];
+    dict['KEY_WIDE_LAYOUT'] = config_data['wide_layout'];
 
     Pebble.sendAppMessage(dict, function() {
         // console.log('Send successful!');