From f837e2f12f1fa69870b74e0e04602993dad58707 Mon Sep 17 00:00:00 2001
From: Christoph Raaflaub <raaflaub@puzzle.ch>
Date: Fri, 4 Dec 2015 13:53:07 +0100
Subject: [PATCH 1/5] added original config page

---
 config.html | 125 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 config.html
diff --git a/config.html b/config.html
new file mode 100644
index 0000000..cef05bf
--- /dev/null
+++ b/config.html
@@ -0,0 +1,125 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Configurable</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
+    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
+    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
+  </head>
+  <body>
+    <div data-role="page" id="main">
+      <div data-role="header" class="jqm-header">
+        <h1>Configuration</h1>
+      </div>
+
+      <div data-role="content">
+
+        <div data-role="fieldcontain">
+          <label for="color_select">Word Color:</label>
+          <select name="color_select" id="color_select" data-role="text-box">
+              <option value="1">Light Blue</option>
+              <option value="2">Dark Blue</option>
+              <option value="3">Oxford Blue</option>
+              <option value="4">White</option>
+              <option value="5">Light Gray</option>
+              <option value="6">Black</option>
+              <option value="7">Yellow</option>
+              <option value="8">Orange</option>
+              <option value="9">Light Red</option>
+              <option value="10">Dark Red</option>
+              <option value="11">Bright Green</option>
+              <option value="12">Light Green</option>
+              <option value="13">Dark Green</option>
+              <option value="14">Vivid Violet</option>
+              <option value="15">Light Purple</option>
+              <option value="16">Dark Purple</option>
+
+          </select>
+        </div>
+
+          <div data-role="fieldcontain">
+          <label for="color2_select">Numbers Color:</label>
+          <select name="color2_select" id="color2_select" data-role="text-box">
+              <option value="1">Light Blue</option>
+              <option value="2">Dark Blue</option>
+              <option value="3">Oxford Blue</option>
+              <option value="4">White</option>
+              <option value="5">Light Gray</option>
+              <option value="6">Black</option>
+              <option value="7">Yellow</option>
+              <option value="8">Orange</option>
+              <option value="9">Light Red</option>
+              <option value="10">Dark Red</option>
+              <option value="11">Bright Green</option>
+              <option value="12">Light Green</option>
+              <option value="13">Dark Green</option>
+              <option value="14">Vivid Violet</option>
+              <option value="15">Light Purple</option>
+              <option value="16">Dark Purple</option>
+          </select>
+        </div>
+
+
+          <div data-role="fieldcontain">
+          <label for="color1_select">Background Color:</label>
+          <select name="color1_select" id="color1_select" data-role="text-box">
+              <option value="1">Light Blue</option>
+              <option value="2">Dark Blue</option>
+              <option value="3">Oxford Blue</option>
+              <option value="4">White</option>
+              <option value="5">Light Gray</option>
+              <option value="6">Black</option>
+              <option value="7">Yellow</option>
+              <option value="8">Orange</option>
+              <option value="9">Light Red</option>
+              <option value="10">Dark Red</option>
+              <option value="11">Bright Green</option>
+              <option value="12">Light Green</option>
+              <option value="13">Dark Green</option>
+              <option value="14">Vivid Violet</option>
+              <option value="15">Light Purple</option>
+              <option value="16">Dark Purple</option>
+          </select>
+        </div>
+
+        </div>
+
+        <div class="ui-body ui-body-b">
+          <fieldset class="ui-grid-a">
+              <div class="ui-block-a"><button type="submit" data-theme="d" id="b-cancel">Cancel</button></div>
+              <div class="ui-block-b"><button type="submit" data-theme="a" id="b-submit">Submit</button></div>
+            </fieldset>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      function saveOptions() {
+        var options = {
+          'color': $("#color_select").val(),'color1': $("#color1_select").val(),'color2': $("#color2_select").val(),
+        }
+        return options;
+      }
+
+      $().ready(function() {
+        $("#b-cancel").click(function() {
+          console.log("Cancel");
+          document.location = "pebblejs://close";
+        });
+
+        $("#b-submit").click(function() {
+          console.log("Submit");
+                             
+        var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(saveOptions()));
+          console.log("Warping to: " + location);
+          console.log(location);
+          document.location = location;
+        });
+
+      });
+    </script>
+  </body>
+</html>

From c2157e386ffde791bc69491ecfec3cce72f0c836 Mon Sep 17 00:00:00 2001
From: Christoph Raaflaub <raaflaub@puzzle.ch>
Date: Fri, 4 Dec 2015 13:57:51 +0100
Subject: [PATCH 2/5] changed config page url to github page

---
 src/pebble-js-app.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pebble-js-app.js b/src/pebble-js-app.js
index 395e33c..d4e52a2 100644
--- a/src/pebble-js-app.js
+++ b/src/pebble-js-app.js
@@ -1,3 +1,5 @@
+var url = 'https://rawgit.com/chrira/BlueFuturistic/load-actual-colors/config.html';
+
 Pebble.addEventListener("ready",
   function(e) {
     console.log("PebbleKit JS ready!");
@@ -7,7 +9,7 @@ Pebble.addEventListener("ready",
 Pebble.addEventListener("showConfiguration",
   function(e) {
     //Load the remote config page
-    Pebble.openURL("http://paliantech.com/pebble/BFconfig3G.html");
+    Pebble.openURL(url);
   }
 );
 
@@ -28,4 +30,4 @@ Pebble.addEventListener("webviewclosed",
       }
     );
   }
-);
\ No newline at end of file
+);

From af7cdb6e9e8bdddec6fa0c62a87577d49af97239 Mon Sep 17 00:00:00 2001
From: Christoph Raaflaub <raaflaub@puzzle.ch>
Date: Fri, 4 Dec 2015 14:01:57 +0100
Subject: [PATCH 3/5] changed config page imports to https

---
 config.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/config.html b/config.html
index cef05bf..d3929bc 100644
--- a/config.html
+++ b/config.html
@@ -5,9 +5,9 @@
     <title>Configurable</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
-    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
-    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
+    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
+    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
+    <script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
   </head>
   <body>
     <div data-role="page" id="main">

From f02d7be1f2734b70e55c9ce0d9c03b063cda86cd Mon Sep 17 00:00:00 2001
From: Christoph Raaflaub <raaflaub@puzzle.ch>
Date: Fri, 4 Dec 2015 14:11:37 +0100
Subject: [PATCH 4/5] Config page selects colors on load from url variables

---
 config.html | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/config.html b/config.html
index d3929bc..45a6f4a 100644
--- a/config.html
+++ b/config.html
@@ -97,6 +97,21 @@ <h1>Configuration</h1>
       </div>
     </div>
     <script>
+      function selectElement(select, variable) {
+        var color = getURLVariable(variable);
+        $(select).val(color);
+        $(select).selectmenu('refresh', true);
+      }
+
+      function getURLVariable(name) {
+        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
+        var regexS = "[\\?&]"+name+"=([^&#]*)",
+        regex = new RegExp(regexS),
+        results = regex.exec(window.location.href);
+        if (results == null) return "";
+        else return results[1];
+      }
+
       function saveOptions() {
         var options = {
           'color': $("#color_select").val(),'color1': $("#color1_select").val(),'color2': $("#color2_select").val(),
@@ -104,7 +119,12 @@ <h1>Configuration</h1>
         return options;
       }
 
-      $().ready(function() {
+      $(function() {
+        // select options from request variables
+        selectElement("#color_select", "color");
+        selectElement("#color1_select", "color1");
+        selectElement("#color2_select", "color2");
+
         $("#b-cancel").click(function() {
           console.log("Cancel");
           document.location = "pebblejs://close";

From 8e7a46ddfa05af7fffccf2a11f2cb7a10a6805b7 Mon Sep 17 00:00:00 2001
From: Christoph Raaflaub <raaflaub@puzzle.ch>
Date: Fri, 4 Dec 2015 14:16:55 +0100
Subject: [PATCH 5/5] Save and load color configuration to local storage. Pass
 them as variables to the config page.

---
 src/pebble-js-app.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/pebble-js-app.js b/src/pebble-js-app.js
index d4e52a2..b045d1b 100644
--- a/src/pebble-js-app.js
+++ b/src/pebble-js-app.js
@@ -8,8 +8,14 @@ Pebble.addEventListener("ready",
 
 Pebble.addEventListener("showConfiguration",
   function(e) {
-    //Load the remote config page
-    Pebble.openURL(url);
+    // load color configuration from local storage
+    var color = localStorage.getItem('KEY_COLOR');
+    var color1 = localStorage.getItem('KEY_COLORS');
+    var color2 = localStorage.getItem('KEY_COLOR1');
+    console.log("Got colors from local storage: KEY_COLOR: " + color + ", KEY_COLORS: " + color1 + ", KEY_COLOR1: " + color2);
+
+    //Load the remote config page and give color variables to select actual options
+    Pebble.openURL(url + "?color=" + color + "&color1=" + color1 + "&color2=" + color2);
   }
 );
 
@@ -19,6 +25,11 @@ Pebble.addEventListener("webviewclosed",
     var configuration = JSON.parse(decodeURIComponent(e.response));
     console.log("Configuration window returned: " + JSON.stringify(configuration));
 
+    // save color configuration to local storage
+    localStorage.setItem('KEY_COLOR', configuration.color);
+    localStorage.setItem('KEY_COLORS', configuration.color1);
+    localStorage.setItem('KEY_COLOR1', configuration.color2);
+
     //Send to Pebble, persist there
     Pebble.sendAppMessage(
       {"KEY_COLOR": configuration.color , "KEY_COLORS": configuration.color1, "KEY_COLOR1": configuration.color2},
