Add initial configuration

package.json

@@ -10,7 +10,9 @@
         "speedometer"
     ],
     "private": true,
-    "dependencies": {},
+    "dependencies": {
+        "@rebble/clay": "^1.0.10"
+    },
     "pebble": {
         "displayName": "Civic Segments",
         "uuid": "162d2a72-f509-4cc6-a570-e28031ff4602",
@@ -25,6 +27,9 @@
             "watchface": true
         },
         "messageKeys": [
+            "PKJS_READY",
+            "PKJS_TEMP_BAR_COUNT",
+            "CLAY_SHOW_TIME_MG",
             "CLAY_LED_COLOR",
             "CLAY_BG_COLOR",
             "CLAY_MG_COLOR",

src/c/main.c

@@ -37,6 +37,7 @@ static GColor8 s_fg_color;
 
 // bitmaps
 static GBitmap *s_font_bitmaps[10];
+static GBitmap *s_time_mg_0;
 static GBitmap *s_c_icon;
 static GBitmap *s_h_icon;
 static GBitmap *s_e_icon;
@@ -128,8 +129,11 @@ static void main_window_load() {
 	layer_set_update_proc(s_fuel_mg_layer, fuel_mg_update_proc);
 
 	if (persist_read_bool(storage_key_show_time_mg)) {
+		s_time_mg_0 = gbitmap_create_with_resource(RESOURCE_ID_0);
+		replace_gbitmap_color(GColorWhite, s_mg_color, s_time_mg_0, NULL);
 		for (int i = 0; i < 4; ++i) {
 			s_time_mg_layers[i] = bitmap_layer_create(s_time_grects[i]);
+			bitmap_layer_set_bitmap(s_time_mg_layers[i], s_time_mg_0);
 			bitmap_layer_set_compositing_mode(s_time_mg_layers[i], GCompOpSet);
 			layer_add_child(window_layer, bitmap_layer_get_layer(s_time_mg_layers[i]));
 		}
@@ -181,6 +185,9 @@ static void main_window_unload() {
 		if (s_time_mg_layers[i]) {
 			bitmap_layer_destroy(s_time_mg_layers[i]);
 			s_time_mg_layers[i] = NULL;
+			if (i == 0) {
+				gbitmap_destroy(s_time_mg_0);
+			}
 		}
 	}
 }
@@ -235,6 +242,25 @@ static void soft_reload(bool first_load) {
 	window_stack_push(s_main_window, false);
 }
 
+static void inbox_received_handler(DictionaryIterator *iter, void *context) {
+	Tuple *ready_tuple = dict_find(iter, MESSAGE_KEY_PKJS_READY);
+	if (ready_tuple) {
+		APP_LOG(APP_LOG_LEVEL_DEBUG, "PKJS IS READY");
+		// TODO request temp bars from PKJS
+		return;
+	}
+
+	// TODO set up receive handler for temp bars; be sure to return after to avoid soft reloading
+
+	Tuple *time_mg_tuple = dict_find(iter, MESSAGE_KEY_CLAY_SHOW_TIME_MG);
+	if (time_mg_tuple) {
+		APP_LOG(APP_LOG_LEVEL_DEBUG, "TIME MG TOGGLED");
+		persist_write_bool(storage_key_show_time_mg, time_mg_tuple->value->int32 == 1);
+		soft_reload(false);
+		return;
+	}
+}
+
 static void init() {
 	// load bitmaps
 	s_font_bitmaps[0] = gbitmap_create_with_resource(RESOURCE_ID_0);
@@ -263,7 +289,12 @@ static void init() {
 
 	update_minute_1();
 	batt_callback(battery_state_service_peek());
+
+	app_message_register_inbox_received(inbox_received_handler);
+	app_message_open(255, 64);
+
 	soft_reload(true);
+
 	tick_timer_service_subscribe(MINUTE_UNIT, minute_handler);
 	battery_state_service_subscribe(batt_callback);
 }

src/pkjs/config.js

@@ -0,0 +1,91 @@
+module.exports = [
+    {
+        "type": "heading",
+        "defaultValue": "Civic Segments | Settings"
+    },
+    {
+        "type": "section",
+        "items": [
+            {
+                "type": "heading",
+                "size": 3,
+                "defaultValue": "Options"
+            },
+            {
+                "type": "toggle",
+                "messageKey": "CLAY_SHOW_TIME_MG",
+                "defaultValue": false,
+                "label": "Show time segments midground"
+            }
+        ]
+    },
+    {
+        "type": "section",
+        "items": [
+            {
+                "type": "heading",
+                "size": 3,
+                "defaultValue": "Colors"
+            },
+            {
+                "id": "custom_colors_toggle",
+                "type": "toggle",
+                "defaultValue": false,
+                "label": "Use custom colors"
+            },
+            {
+                "id": "color_preset_selector",
+                "type": "select",
+                "defaultValue": "Standard",
+                "label": "Color Preset",
+                "options": [
+                    {
+                        "label": "Civic Standard",
+                        "value": "civic_standard"
+                    },
+                    {
+                        "label": "Civic Si",
+                        "value": "civic_si"
+                    }
+                ]
+            },
+            {
+                "id": "custom_color_led",
+                "type": "color",
+                "capabilities": ["PLATFORM_EMERY"],
+                "messageKey": "CLAY_LED_COLOR",
+                "defaultValue": "0000ff",
+                "label": "LED color",
+                "sunlight": false,
+            },
+            {
+                "id": "custom_color_bg",
+                "type": "color",
+                "messageKey": "CLAY_BG_COLOR",
+                "defaultValue": "0000ff",
+                "label": "Background color",
+                "sunlight": false,
+            },
+            {
+                "id": "custom_color_mg",
+                "type": "color",
+                "messageKey": "CLAY_MG_COLOR",
+                "defaultValue": "aaaaaa",
+                "label": "Midground color",
+                "sunlight": false,
+            },
+            {
+                "id": "custom_color_fg",
+                "type": "color",
+                "messageKey": "CLAY_FG_COLOR",
+                "defaultValue": "ffffff",
+                "label": "Foreground color",
+                "sunlight": false,
+            }
+        ]
+    },
+    {
+        "type": "submit",
+        "defaultValue": "Save Settings"
+    }
+];

src/pkjs/customClay.js

@@ -0,0 +1,46 @@
+module.exports = function (minified) {
+    var clayConfig = this;
+    var _ = minified._;
+    var $ = minified.$;
+    var HTML = minified.HTML;
+
+    // TODO set LED color (only on emery)
+    function setColorsToPreset() {
+        selectedPreset = clayConfig.getItemById('color_preset_selector').get()
+        switch (selectedPreset) {
+            case 'civic_si':
+                clayConfig.getItemById('custom_color_bg').set('ff0000');
+                clayConfig.getItemById('custom_color_mg').set('aaaaaa');
+                clayConfig.getItemById('custom_color_fg').set('ffffff');
+                break
+            default:
+                clayConfig.getItemById('custom_color_bg').set('0000ff');
+                clayConfig.getItemById('custom_color_mg').set('aaaaaa');
+                clayConfig.getItemById('custom_color_fg').set('ffffff');
+        }
+    }
+
+    // TODO show/hide LED color selector (only on emery)
+    function toggleCustomColors() {
+        setColorsToPreset();
+        if (this.get()) {
+            clayConfig.getItemById('color_preset_selector').hide();
+            clayConfig.getItemById('custom_color_bg').show();
+            clayConfig.getItemById('custom_color_mg').show();
+            clayConfig.getItemById('custom_color_fg').show();
+        } else {
+            clayConfig.getItemById('color_preset_selector').show();
+            clayConfig.getItemById('custom_color_bg').hide();
+            clayConfig.getItemById('custom_color_mg').hide();
+            clayConfig.getItemById('custom_color_fg').hide();
+        }
+    }
+
+    clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function () {
+        var customColorsToggle = clayConfig.getItemById('custom_colors_toggle');
+        toggleCustomColors.call(customColorsToggle);
+        customColorsToggle.on('change', toggleCustomColors);
+
+        clayConfig.getItemById('color_preset_selector').on('change', setColorsToPreset());
+    });
+};

src/pkjs/index.js

@@ -0,0 +1,8 @@
+var Clay = require('@rebble/clay');
+var clayConfig = require('./config');
+var customClay = require('./customClay');
+new Clay(clayConfig, customClay);
+
+Pebble.addEventListener("ready", function () {
+    Pebble.sendAppMessage({ PKJS_READY: 1 });
+});