Updated for Versa

README.md

@@ -2,7 +2,9 @@
 
 Fitbit SDK example application which looks like a retro LCD digital clock.
 
-Uses images instead of fonts, colors are configurable.
+![Screenshot](screenshot.png)
+
+Uses images instead of fonts, and colors are configurable.
 
 Find out more information on the
 [Fitbit Developer Website](https://dev.fitbit.com).

app/index.js

@@ -1,7 +1,16 @@
+import { me } from "appbit";
+import clock from "clock";
 import document from "document";
+import * as fs from "fs";
 import * as messaging from "messaging";
+import { preferences } from "user-settings";
+import * as util from "./utils";
 
-let page = document.getElementById("page");
+const SETTINGS_TYPE = "cbor";
+const SETTINGS_FILE = "settings.cbor";
+
+let settings = loadSettings();
+applyTheme(settings.background, settings.foreground);
 
 // TIME
 let separator = document.getElementById("separator");
@@ -15,11 +24,10 @@ let day = document.getElementById("day");
 let date1 = document.getElementById("date1");
 let date2 = document.getElementById("date2");
 
-clocker();
-setInterval(clocker, 1000);
+clock.granularity = "seconds";
 
-function clocker() {
-  let d = new Date();
+clock.ontick = evt => {
+  let d = evt.date;
 
   // DATE
   setDate(d.getDate());
@@ -28,8 +36,15 @@ function clocker() {
   setDay(d.getDay());
 
   // HOURS
-  let hour = ("0" + d.getHours()).slice(-2);
-  setHours(hour);
+  let hours = d.getHours();
+  if (preferences.clockDisplay === "12h") {
+    // 12h format
+    hours = hours % 12 || 12;
+  } else {
+    // 24h format
+    hours = util.zeroPad(hours);
+  }
+  setHours(hours);
 
   // MINUTES
   let minute = ("0" + d.getMinutes()).slice(-2);
@@ -49,6 +64,8 @@ function applyTheme(background, foreground) {
   items.forEach(function(item) {
     item.style.fill = foreground;
   });
+  settings.background = background;
+  settings.foreground = foreground;
 }
 
 // Blink time separator
@@ -57,33 +74,57 @@ function setSeparator(val) {
 }
 
 function setHours(val) {
-  drawDigits("", val, hours1, hours2);
+  if (val > 9) {
+    drawDigit(Math.floor(val / 10), hours1);
+  } else {
+    drawDigit("", hours1);
+  }
+  drawDigit(Math.floor(val % 10), hours2);
 }
 
 function setMins(val) {
-  drawDigits("", val, mins1, mins2);
+  drawDigit(Math.floor(val / 10), mins1);
+  drawDigit(Math.floor(val % 10), mins2);
 }
 
 function setDate(val) {
-  drawDigits("datenum_", val, date1, date2);
+  drawDigit(Math.floor(val / 10), date1);
+  drawDigit(Math.floor(val % 10), date2);
 }
 
 function setDay(val) {
-  day.href = getDayImg(val);
+  day.image = getDayImg(val);
 }
 
-function drawDigits(prefix, val, place1, place2) {
-  place1.href = prefix + Math.floor(val / 10) + ".png";
-  place2.href = prefix + Math.floor(val % 10) + ".png";
+function drawDigit(val, place) {
+  place.image = `${val}.png`;
 }
 
 function getDayImg(index) {
   let days = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
-  return "day_" + days[index] + ".png";
+  return `day_${days[index]}.png`;
 }
 
 // Listen for the onmessage event
-messaging.peerSocket.onmessage = function(evt) {
-  // console.log("device got: " + evt.data.background);
+messaging.peerSocket.onmessage = evt => {
   applyTheme(evt.data.background, evt.data.foreground);
 }
+
+// Register for the unload event
+me.onunload = saveSettings;
+
+function loadSettings() {
+  try {
+    return fs.readFileSync(SETTINGS_FILE, SETTINGS_TYPE);
+  } catch (ex) {
+    // Defaults
+    return {
+      background: "#000000",
+      foreground: "#FFFFFF"
+    }
+  }
+}
+
+function saveSettings() {
+  fs.writeFileSync(SETTINGS_FILE, settings, SETTINGS_TYPE);
+}

app/utils.js

@@ -0,0 +1,7 @@
+// Add zero in front of numbers < 10
+export function zeroPad(i) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  return i;
+}

companion/index.js

@@ -3,10 +3,9 @@ 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");
+    if (evt.key === "theme") {
+      let data = JSON.parse(evt.newValue);
+      messaging.peerSocket.send(data["values"][0].value);
+    }
   }
 }
-

package.json

@@ -1,7 +1,18 @@
 {
   "fitbit": {
     "appType": "clockface",
-    "appDisplayName": "LCD Watch",
-    "wipeColor": "#8bc34a"
+    "appDisplayName": "LCD Clock",
+    "iconFile": "resources/icon.png",
+    "wipeColor": "#8bc34a",
+    "requestedPermissions": [],
+    "buildTargets": [
+      "higgs",
+      "meson"
+    ],
+    "i18n": {
+      "en": {
+        "name": "LCD Clock"
+      }
+    }
   }
 }

resources/index.gui

@@ -2,10 +2,10 @@
 
   <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="day" href="day_mon.png" 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" />
+  <image id="date1" href="1.png" x="292" y="75" width="20" height="30" fill="#FFFFFF" class="foreground" />
+  <image id="date2" href="1.png" 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" />

resources/index~300x300.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" href="day_mon.png" x="165" y="107" width="59" height="26" fill="#FFFFFF" class="foreground" />
+
+  <image id="date1" href="1.png" x="251" y="107" width="18" height="26" fill="#FFFFFF" class="foreground" />
+  <image id="date2" href="1.png" x="275" y="107" width="18" height="26" fill="#FFFFFF" class="foreground" />
+
+  <svg> 
+    <image href="separator.png" x="143" y="161" width="16" height="63" fill="#FFFFFF" opacity=".1" class="foreground" />
+    <image href="8.png" x="6" y="144" width="61" height="91" fill="#FFFFFF" opacity=".1" class="foreground" />
+    <image href="8.png" x="75" y="144" width="61" height="91" fill="#FFFFFF" opacity=".1" class="foreground" />
+    <image href="8.png" x="167" y="144" width="61" height="91" fill="#FFFFFF" opacity=".1" class="foreground" />
+    <image href="8.png" x="234" y="144" width="61" height="91" fill="#FFFFFF" opacity=".1" class="foreground" />
+
+    <image id="separator" href="separator.png" x="143" y="161" width="16" height="63" fill="#FFFFFF" class="foreground" />
+    <image id="hours1" href="1.png" x="6" y="144" width="61" height="91" fill="#FFFFFF" class="foreground" />
+    <image id="hours2" href="3.png" x="75" y="144" width="61" height="91" fill="#FFFFFF" class="foreground" />
+    <image id="mins1" href="3.png" x="167" y="144" width="61" height="91" fill="#FFFFFF" class="foreground" />
+    <image id="mins2" href="7.png" x="234" y="144" width="61" height="91" fill="#FFFFFF" class="foreground" />
+  </svg>
+
+</svg>
+
+<!-- 300x300 -->
+

resources/styles.css

@@ -1,19 +1,3 @@
-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;
 }

resources/widgets.gui

@@ -1,6 +1,6 @@
 <svg>
   <defs>
-    <link rel='stylesheet' href='styles.css' />
-    <link rel='import' href='/mnt/sysassets/widgets_common.gui'/>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="import" href="/mnt/sysassets/widgets_common.gui"/>
   </defs>
 </svg>