37 files changed, 251 insertions, 2 deletions

diff --git a/README.md b/README.md
index 2f3c0fd..0413036 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,12 @@
-# sdk-lcd-clock
-Fitbit SDK example application.
+# LCD Clock Face
+
+Fitbit SDK example application which looks like a retro LCD digital clock.
+
+Uses images instead of fonts, colors are configurable.
+
+Find out more information on the
+[Fitbit Developer Website](https://dev.fitbit.com).
+
+## License
+
+This example is licensed under the [MIT License](./LICENSE).
diff --git a/app/index.js b/app/index.js
new file mode 100644
index 0000000..f042714
--- /dev/null
+++ b/app/index.js
@@ -0,0 +1,89 @@
+import document from "document";
+import * as messaging from "messaging";
+
+let page = document.getElementById("page");
+
+// TIME
+let separator = document.getElementById("separator");
+let hours1 = document.getElementById("hours1");
+let hours2 = document.getElementById("hours2");
+let mins1 = document.getElementById("mins1");
+let mins2 = document.getElementById("mins2");
+
+// DATE
+let day = document.getElementById("day");
+let date1 = document.getElementById("date1");
+let date2 = document.getElementById("date2");
+
+clocker();
+setInterval(clocker, 1000);
+
+function clocker() {
+  let d = new Date();
+
+  // DATE
+  setDate(d.getDate());
+
+  // DAY NAME
+  setDay(d.getDay());
+
+  // HOURS
+  let hour = ("0" + d.getHours()).slice(-2);
+  setHours(hour);
+
+  // MINUTES
+  let minute = ("0" + d.getMinutes()).slice(-2);
+  setMins(minute);
+
+  // BLINK SEPARATOR
+  setSeparator(d.getSeconds());
+}
+
+// Apply theme colors to elements
+function applyTheme(background, foreground) {
+  let items = document.getElementsByClassName("background");
+  items.forEach(function(item) {
+    item.style.fill = background;
+  });
+  let items = document.getElementsByClassName("foreground");
+  items.forEach(function(item) {
+    item.style.fill = foreground;
+  });
+}
+
+// Blink time separator
+function setSeparator(val) {
+  separator.style.display = (val % 2 === 0 ? "inline" : "none");
+}
+
+function setHours(val) {
+  drawDigits("", val, hours1, hours2);
+}
+
+function setMins(val) {
+  drawDigits("", val, mins1, mins2);
+}
+
+function setDate(val) {
+  drawDigits("datenum_", val, date1, date2);
+}
+
+function setDay(val) {
+  day.href = getDayImg(val);
+}
+
+function drawDigits(prefix, val, place1, place2) {
+  place1.href = Math.floor(val / 10) + ".png";
+  place2.href = Math.floor(val % 10) + ".png";
+}
+
+function getDayImg(index) {
+  let days = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+  return "day_" + days[index] + ".png";
+}
+
+// Listen for the onmessage event
+messaging.peerSocket.onmessage = function(evt) {
+  // console.log("device got: " + evt.data.background);
+  applyTheme(evt.data.background, evt.data.foreground);
+}
diff --git a/companion/index.js b/companion/index.js
new file mode 100644
index 0000000..963fd09
--- /dev/null
+++ b/companion/index.js
@@ -0,0 +1,12 @@
+import { settingsStorage } from "settings";
+import * as messaging from "messaging";
+
+settingsStorage.onchange = function(evt) {
+  if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
+    let data = JSON.parse(evt.newValue);
+    messaging.peerSocket.send(data["values"][0].value);
+  } else {
+    console.log("companion - no connection");
+  }
+}
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..44bec71
--- /dev/null
+++ b/package.json
@@ -0,0 +1,8 @@
+{
+  "fitbit": {
+    "appUUID": "950272ae-22bc-49d5-9e1c-c30e20742526",
+    "appType": "clockface",
+    "appDisplayName": "LCD Watch",
+    "wipeColor": "#8bc34a"
+  }
+}
\ No newline at end of file
diff --git a/resources/0.png b/resources/0.png
new file mode 100644
index 0000000..3d969f0
--- /dev/null
+++ b/resources/0.png
diff --git a/resources/1.png b/resources/1.png
new file mode 100644
index 0000000..1b0cf38
--- /dev/null
+++ b/resources/1.png
diff --git a/resources/2.png b/resources/2.png
new file mode 100644
index 0000000..f275513
--- /dev/null
+++ b/resources/2.png
diff --git a/resources/3.png b/resources/3.png
new file mode 100644
index 0000000..52223ce
--- /dev/null
+++ b/resources/3.png
diff --git a/resources/4.png b/resources/4.png
new file mode 100644
index 0000000..218f742
--- /dev/null
+++ b/resources/4.png
diff --git a/resources/5.png b/resources/5.png
new file mode 100644
index 0000000..c7b99b8
--- /dev/null
+++ b/resources/5.png
diff --git a/resources/6.png b/resources/6.png
new file mode 100644
index 0000000..037ca8b
--- /dev/null
+++ b/resources/6.png
diff --git a/resources/7.png b/resources/7.png
new file mode 100644
index 0000000..7a046a2
--- /dev/null
+++ b/resources/7.png
diff --git a/resources/8.png b/resources/8.png
new file mode 100644
index 0000000..dd21b00
--- /dev/null
+++ b/resources/8.png
diff --git a/resources/9.png b/resources/9.png
new file mode 100644
index 0000000..85b1fe4
--- /dev/null
+++ b/resources/9.png
diff --git a/resources/background.png b/resources/background.png
new file mode 100644
index 0000000..a682e84
--- /dev/null
+++ b/resources/background.png
diff --git a/resources/datenum_0.png b/resources/datenum_0.png
new file mode 100644
index 0000000..7fb9a20
--- /dev/null
+++ b/resources/datenum_0.png
diff --git a/resources/datenum_1.png b/resources/datenum_1.png
new file mode 100644
index 0000000..8531984
--- /dev/null
+++ b/resources/datenum_1.png
diff --git a/resources/datenum_2.png b/resources/datenum_2.png
new file mode 100644
index 0000000..ae2842c
--- /dev/null
+++ b/resources/datenum_2.png
diff --git a/resources/datenum_3.png b/resources/datenum_3.png
new file mode 100644
index 0000000..f271eaa
--- /dev/null
+++ b/resources/datenum_3.png
diff --git a/resources/datenum_4.png b/resources/datenum_4.png
new file mode 100644
index 0000000..4058a03
--- /dev/null
+++ b/resources/datenum_4.png
diff --git a/resources/datenum_5.png b/resources/datenum_5.png
new file mode 100644
index 0000000..193a75a
--- /dev/null
+++ b/resources/datenum_5.png
diff --git a/resources/datenum_6.png b/resources/datenum_6.png
new file mode 100644
index 0000000..93821a2
--- /dev/null
+++ b/resources/datenum_6.png
diff --git a/resources/datenum_7.png b/resources/datenum_7.png
new file mode 100644
index 0000000..ef65359
--- /dev/null
+++ b/resources/datenum_7.png
diff --git a/resources/datenum_8.png b/resources/datenum_8.png
new file mode 100644
index 0000000..0b37301
--- /dev/null
+++ b/resources/datenum_8.png
diff --git a/resources/datenum_9.png b/resources/datenum_9.png
new file mode 100644
index 0000000..131148b
--- /dev/null
+++ b/resources/datenum_9.png
diff --git a/resources/day_fri.png b/resources/day_fri.png
new file mode 100644
index 0000000..f4e79fd
--- /dev/null
+++ b/resources/day_fri.png
diff --git a/resources/day_mon.png b/resources/day_mon.png
new file mode 100644
index 0000000..cd8ba2b
--- /dev/null
+++ b/resources/day_mon.png
diff --git a/resources/day_sat.png b/resources/day_sat.png
new file mode 100644
index 0000000..2feb012
--- /dev/null
+++ b/resources/day_sat.png
diff --git a/resources/day_sun.png b/resources/day_sun.png
new file mode 100644
index 0000000..c23d41e
--- /dev/null
+++ b/resources/day_sun.png
diff --git a/resources/day_thu.png b/resources/day_thu.png
new file mode 100644
index 0000000..5b0f518
--- /dev/null
+++ b/resources/day_thu.png
diff --git a/resources/day_tue.png b/resources/day_tue.png
new file mode 100644
index 0000000..242207f
--- /dev/null
+++ b/resources/day_tue.png
diff --git a/resources/day_wed.png b/resources/day_wed.png
new file mode 100644
index 0000000..e2a4804
--- /dev/null
+++ b/resources/day_wed.png
diff --git a/resources/index.gui b/resources/index.gui
new file mode 100644
index 0000000..e461139
--- /dev/null
+++ b/resources/index.gui
@@ -0,0 +1,27 @@
+<svg id="page" class="portrait-view">
+
+  <image id="background" href="background.png" x="0" y="0" width="100%" height="100%" fill="#000000" class="background" />
+   
+  <image id="day" x="192" y="75" width="68" height="30" fill="#FFFFFF" class="foreground" />
+  
+  <image id="date1" x="292" y="75" width="20" height="30" fill="#FFFFFF" class="foreground" />
+  <image id="date2" x="319" y="75" width="20" height="30" fill="#FFFFFF" class="foreground" />
+  
+  <svg> 
+    <image href="separator.png" x="166" y="137" width="18" height="71" fill="#FFFFFF" opacity=".1" class="foreground" />
+    <image href="8.png" x="7" y="118" width="69" height="108" fill="#FFFFFF" opacity=".1" class="foreground" />
+    <image href="8.png" x="87" y="118" width="69" height="108" fill="#FFFFFF" opacity=".1" class="foreground" />
+    <image href="8.png" x="194" y="118" width="69" height="108" fill="#FFFFFF" opacity=".1" class="foreground" />
+    <image href="8.png" x="272" y="118" width="69" height="108" fill="#FFFFFF" opacity=".1" class="foreground" />
+
+    <image id="separator" href="separator.png" x="166" y="137" width="18" height="71" fill="#FFFFFF" class="foreground" />
+    <image id="hours1" href="1.png" x="7" y="118" width="69" height="108" fill="#FFFFFF" class="foreground" />
+    <image id="hours2" href="3.png" x="87" y="118" width="69" height="108" fill="#FFFFFF" class="foreground" />
+    <image id="mins1" href="3.png" x="194" y="118" width="69" height="108" fill="#FFFFFF" class="foreground" />
+    <image id="mins2" href="7.png" x="272" y="118" width="69" height="108" fill="#FFFFFF" class="foreground" />
+  </svg>
+  
+</svg>
+
+<!-- 348x250 -->
+
diff --git a/resources/separator.png b/resources/separator.png
new file mode 100644
index 0000000..09bacbe
--- /dev/null
+++ b/resources/separator.png
diff --git a/resources/styles.css b/resources/styles.css
new file mode 100644
index 0000000..ccf38e9
--- /dev/null
+++ b/resources/styles.css
@@ -0,0 +1,20 @@
+text     {
+  font-size: 32;
+  font-family: System-Regular;
+  font-weight: regular;
+  y: 12;
+  text-length: 32;
+}
+
+textarea {
+  font-size: 32;
+  font-family: System-Regular;
+  font-weight: regular;
+  y: 12;
+  text-length: 1024;
+}
+
+#page {
+  fill: black;
+}
+
diff --git a/resources/widgets.gui b/resources/widgets.gui
new file mode 100644
index 0000000..adf26e9
--- /dev/null
+++ b/resources/widgets.gui
@@ -0,0 +1,6 @@
+<svg>
+  <defs>
+    <link rel='stylesheet' href='styles.css' />
+    <link rel='import' href='/mnt/sysassets/widgets_common.gui'/>
+  </defs>
+</svg>
diff --git a/settings/index.jsx b/settings/index.jsx
new file mode 100644
index 0000000..7160032
--- /dev/null
+++ b/settings/index.jsx
@@ -0,0 +1,77 @@
+function mySettings(props) {
+  return (
+    <Page>
+         <Select
+            label="Theme"
+            settingsKey="theme"
+            options={[
+               {
+                 name: "Classic Green",
+                 value: {
+                   background: "#002200",
+                   foreground: "#00ff00"
+                 }
+               },
+               {
+                 name: "Classic Red",
+                 value: {
+                   background: "#220000",
+                   foreground: "#ff0000"
+                 }
+               },
+               {
+                 name: "Classic Blue",
+                 value: {
+                   background: "#000022",
+                   foreground: "#0000ff"
+                 }
+               },
+               {
+                 name: "Classic Yellow",
+                 value: {
+                   background: "#222200",
+                   foreground: "#ffff00"
+                 }
+               },
+               {
+                 name: "Classic Pink",
+                 value: {
+                   background: "#220022",
+                   foreground: "#ff00ff"
+                 }
+               },
+               {
+                 name: "Classic Cyan",
+                 value: {
+                   background: "#002222",
+                   foreground: "#00ffff"
+                 }
+               },
+               {
+                 name: "I love Gold",
+                 value: {
+                   background: "#221100",
+                   foreground: "#FF8C00"
+                 }
+               },
+               {
+                 name: "Black and White",
+                 value: {
+                   background: "#FFFFFF",
+                   foreground: "#000000"
+                 }
+               },
+               {
+                 name: "White and Black",
+                 value: {
+                   background: "#000000",
+                   foreground: "#FFFFFF"
+                 }
+               }]
+            }
+          />
+    </Page>
+  );
+}
+
+registerSettingsPage(mySettings);