added color configuration to the C part

added pebble-js-app.js
turned divs into labels to make color pickers work
2025-12-14 07:35:21 +01:00 · 2015-11-14 20:38:08 +01:00 · 2015-11-14 19:44:20 +01:00 · 2015-11-14 19:43:39 +01:00 · 2015-11-14 19:31:07 +01:00 · 2015-11-14 19:28:49 +01:00
14 changed files with 208 additions and 10 deletions
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# Pebble-Time-Watchface---Super-Simple
+# “Super Simple” watchface for Pebble Time Round and Pebble Time
--- a/appinfo.json
+++ b/appinfo.json
@@ -1,5 +1,10 @@
 {
-    "appKeys": {},
+    "appKeys": {
+        "colorbg": 0,
+        "colorh": 2,
+        "colorm": 1,
+        "colorp": 3
+    },
    "capabilities": [
        "configurable"
    ],
--- a/assets/basalt/screenshot.afphoto
+++ b/assets/basalt/screenshot.afphoto
--- a/assets/basalt/screenshot.png
+++ b/assets/basalt/screenshot.png
--- a/assets/chalk/screenshot.afphoto
+++ b/assets/chalk/screenshot.afphoto
--- a/assets/chalk/screenshot.png
+++ b/assets/chalk/screenshot.png
--- a/config/css/slate.min.css
+++ b/config/css/slate.min.css
--- a/config/fonts/PFDinDisplayPro-Light.woff
+++ b/config/fonts/PFDinDisplayPro-Light.woff
--- a/config/fonts/ptsans-regular.woff
+++ b/config/fonts/ptsans-regular.woff
--- a/config/index.html
+++ b/config/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Super Simple Settings</title>
+	<link rel="stylesheet" href="css/slate.min.css">
+<body>
+	
+	<div class="item-container">
+    	<div class="item-container-header">Color settings</div>
+    	<div class="item-container-content">
+        	<label class="item">
+            	Background
+            	<input id="color-bg" type="text" class="item-color item-color-normal" value="#000000">
+        	</label>
+        	<label class="item">
+            	Minute Hand
+            	<input id="color-m" type="text" class="item-color item-color-normal" value="#ffffff">
+        	</label>
+        	<label class="item">
+            	Hour Hand
+            	<input id="color-h" type="text" class="item-color item-color-normal" value="#ff0000">
+        	</label>
+        	<label class="item">
+            	Center Peg
+            	<input id="color-p" type="text" class="item-color item-color-normal" value="#555555">
+        	</label>
+    	</div>
+	</div>
+    
+    <div class="item-container">
+      <div class="button-container">
+        <input id="send" type="button" class="item-button" value="SEND">
+      </div>
+    </div>
+	
+    <script src="js/slate.min.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>
--- a/config/js/main.js
+++ b/config/js/main.js
@@ -0,0 +1,63 @@
+(function() {
+  loadOptions();
+  submitHandler();
+})();
+
+function submitHandler() {
+  var $submitButton = $('#send');
+
+  $submitButton.on('click', function() {
+    console.log('Submit');
+
+    var return_to = getQueryParam('return_to', 'pebblejs://close#');
+    document.location = return_to + encodeURIComponent(JSON.stringify(getAndStoreConfigData()));
+  });
+}
+
+function loadOptions() {
+  var $colorbg = $('#color-bg');
+  var $colorm = $('#color-m');
+  var $colorh = $('#color-h');
+  var $colorp = $('#color-p');
+
+  if (localStorage.colorbg) {
+    $colorbg[0].value = localStorage.colorbg;
+    $colorm[0].value = localStorage.colorm;
+    $colorh[0].value = localStorage.colorh;
+    $colorp[0].value = localStorage.colorp;
+  }
+}
+
+function getAndStoreConfigData() {
+  var $colorbg = $('#color-bg');
+  var $colorm = $('#color-m');
+  var $colorh = $('#color-h');
+  var $colorp = $('#color-p');
+
+  var options = {
+    colorbg: $colorbg.val(),
+    colorm: $colorm.val(),
+    colorh: $colorh.val(),
+    colorp: $colorp.val(),
+  };
+
+  localStorage.colorbg = options.colorbg;
+  localStorage.colorm = options.colorm;
+  localStorage.colorh = options.colorh;
+  localStorage.colorp = options.colorp;
+
+  console.log('Got options: ' + JSON.stringify(options));
+  return options;
+}
+
+function getQueryParam(variable, defaultValue) {
+  var query = location.search.substring(1);
+  var vars = query.split('&');
+  for (var i = 0; i < vars.length; i++) {
+    var pair = vars[i].split('=');
+    if (pair[0] === variable) {
+      return decodeURIComponent(pair[1]);
+    }
+  }
+  return defaultValue || false;
+}
--- a/config/js/slate.min.js
+++ b/config/js/slate.min.js
--- a/src/js/pebble-js-app.js
+++ b/src/js/pebble-js-app.js
@@ -0,0 +1,26 @@
+Pebble.addEventListener('ready', function() {
+    console.log('PebbleKit JS ready!');
+});
+
+Pebble.addEventListener('showConfiguration', function() {
+    var url='http://pebble.lastfuture.de/config/supersimple/';
+    console.log('Showing configuration page: '+url);
+    Pebble.openURL(url);
+});
+
+Pebble.addEventListener('webviewclosed', function(e) {
+    var configData = JSON.parse(decodeURIComponent(e.response));
+    console.log('Configuration page returned: '+JSON.stringify(configData));
+    if (configData.colorbg) {
+        Pebble.sendAppMessage({
+            colorbg: parseInt(configData.colorbg, 16),
+            colorm: parseInt(configData.colorm, 16),
+            colorh: parseInt(configData.colorh, 16),
+            colorp: parseInt(configData.colorp, 16)
+        }, function() {
+            console.log('Send successful!');
+        }, function() {
+            console.log('Send failed!');
+        });
+    }
+});
--- a/src/main.c
+++ b/src/main.c
@@ -1,9 +1,9 @@
 #include <pebble.h>

-#define MINUTE_COLOR       GColorWhite
-#define HOUR_COLOR         GColorRed
-#define PEG_COLOR          GColorDarkGray
-#define BG_COLOR           GColorBlack
+#define KEY_BG_COLOR           0
+#define KEY_MINUTE_COLOR       1
+#define KEY_HOUR_COLOR         2
+#define KEY_PEG_COLOR          3


 #define ANTIALIASING true
@@ -31,6 +31,39 @@ static int s_radius = 0;
 static bool s_animating = false;
 static float anim_offset;

+static GColor gcolorbg, gcolorm, gcolorh, gcolorp;
+
+static void inbox_received_handler(DictionaryIterator *iter, void *context) {
+  Tuple *colorbg_t = dict_find(iter, KEY_BG_COLOR);
+  Tuple *colorm_t = dict_find(iter, KEY_MINUTE_COLOR);
+  Tuple *colorh_t = dict_find(iter, KEY_HOUR_COLOR);
+  Tuple *colorp_t = dict_find(iter, KEY_PEG_COLOR);
+    
+  if(colorbg_t) {
+    int colorbg = colorbg_t->value->int32;
+    persist_write_int(KEY_BG_COLOR, colorbg);
+    gcolorbg = GColorFromHEX(colorbg);
+  }
+  if(colorm_t) {
+    int colorm = colorm_t->value->int32;
+    persist_write_int(KEY_MINUTE_COLOR, colorm);
+    gcolorm = GColorFromHEX(colorm);
+  }
+  if(colorh_t) {
+    int colorh = colorh_t->value->int32;
+    persist_write_int(KEY_HOUR_COLOR, colorh);
+    gcolorh = GColorFromHEX(colorh);
+  }
+  if(colorp_t) {
+    int colorp = colorp_t->value->int32;
+    persist_write_int(KEY_PEG_COLOR, colorp);
+    gcolorp = GColorFromHEX(colorp);
+  }
+  if(s_canvas_layer) {
+    layer_mark_dirty(s_canvas_layer);
+  }
+}
+
 /*************************** AnimationImplementation **************************/

 static void animation_started(Animation *anim, void *context) {
@@ -73,7 +106,7 @@ static void tick_handler(struct tm *tick_time, TimeUnits changed) {
 static void update_proc(Layer *layer, GContext *ctx) {
  // Color background?
  GRect bounds = layer_get_bounds(layer);
-  graphics_context_set_fill_color(ctx, BG_COLOR);
+  graphics_context_set_fill_color(ctx, gcolorbg);
  graphics_fill_rect(ctx, bounds, 0, GCornerNone);
  graphics_context_set_antialiased(ctx, ANTIALIASING);

@@ -109,17 +142,17 @@ static void update_proc(Layer *layer, GContext *ctx) {
  // Draw hands with positive length only
  if((s_radius - HAND_MARGIN_OUTER) > HAND_MARGIN_INNER) {
    if(s_radius > 2 * HAND_MARGIN_OUTER) {
-      graphics_context_set_stroke_color(ctx, HOUR_COLOR);
+      graphics_context_set_stroke_color(ctx, gcolorh);
      graphics_context_set_stroke_width(ctx, HAND_WIDTH);
      graphics_draw_line(ctx, hour_hand_inner, hour_hand_outer);
    } 
    if(s_radius > HAND_MARGIN_OUTER) {
-      graphics_context_set_stroke_color(ctx, MINUTE_COLOR);
+      graphics_context_set_stroke_color(ctx, gcolorm);
      graphics_context_set_stroke_width(ctx, HAND_WIDTH);
      graphics_draw_line(ctx, minute_hand_inner, minute_hand_outer);
    }
  }
-  graphics_context_set_fill_color(ctx, PEG_COLOR);
+  graphics_context_set_fill_color(ctx, gcolorp);
  graphics_fill_circle(ctx, s_center, DOT_RADIUS);

 }
@@ -129,6 +162,31 @@ static void window_load(Window *window) {
  GRect window_bounds = layer_get_bounds(window_layer);

  s_center = grect_center_point(&window_bounds);
+    
+  if (persist_read_int(KEY_BG_COLOR)) {
+    int colorbg = persist_read_int(KEY_BG_COLOR);
+    gcolorbg = GColorFromHEX(colorbg);
+  } else {
+    gcolorbg=GColorBlack;
+  }
+  if (persist_read_int(KEY_MINUTE_COLOR)) {
+    int colorm = persist_read_int(KEY_MINUTE_COLOR);
+    gcolorm = GColorFromHEX(colorm);
+  } else {
+    gcolorm=GColorWhite;
+  }
+  if (persist_read_int(KEY_HOUR_COLOR)) {
+    int colorh = persist_read_int(KEY_HOUR_COLOR);
+    gcolorh = GColorFromHEX(colorh);
+  } else {
+    gcolorh=GColorRed;
+  }
+  if (persist_read_int(KEY_PEG_COLOR)) {
+    int colorp = persist_read_int(KEY_PEG_COLOR);
+    gcolorp = GColorFromHEX(colorp);
+  } else {
+    gcolorp=GColorDarkGray;
+  }

  s_canvas_layer = layer_create(window_bounds);
  layer_set_update_proc(s_canvas_layer, update_proc);
@@ -165,6 +223,9 @@ static void init() {
  window_stack_push(s_main_window, true);

  tick_timer_service_subscribe(MINUTE_UNIT, tick_handler);
+    
+  app_message_register_inbox_received(inbox_received_handler);
+  app_message_open(app_message_inbox_size_maximum(), app_message_outbox_size_maximum());

  // Prepare animations
  AnimationImplementation radius_impl = {
Author	SHA1	Message	Date
Peter Marquardt	c34c5e9b4c	added color configuration to the C part	2015-11-14 20:38:08 +01:00
Peter Marquardt	c9d52de376	added pebble-js-app.js	2015-11-14 19:44:20 +01:00
Peter Marquardt	6d69c296d9	turned divs into labels to make color pickers work	2015-11-14 19:43:39 +01:00
Peter Marquardt	f616ae6dd2	corrected colors to reflect default colors in watchface	2015-11-14 19:31:07 +01:00
Peter Marquardt	99e43e6502	added HTML/JS/CSS for config page (but not the integration into the watchface yet)	2015-11-14 19:28:49 +01:00
Peter Marquardt	99b0cdeee6	added assets for basalt as well	2015-11-14 18:00:10 +01:00
Peter Marquardt	aff6eaa6c0	added assets for pebble watch app store	2015-11-14 17:55:26 +01:00