aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.md4
-rw-r--r--app/index.js75
-rw-r--r--app/utils.js7
-rw-r--r--companion/index.js9
-rw-r--r--package.json15
-rw-r--r--resources/datenum_0.pngbin151 -> 0 bytes
-rw-r--r--resources/datenum_1.pngbin140 -> 0 bytes
-rw-r--r--resources/datenum_2.pngbin154 -> 0 bytes
-rw-r--r--resources/datenum_3.pngbin156 -> 0 bytes
-rw-r--r--resources/datenum_4.pngbin150 -> 0 bytes
-rw-r--r--resources/datenum_5.pngbin154 -> 0 bytes
-rw-r--r--resources/datenum_6.pngbin155 -> 0 bytes
-rw-r--r--resources/datenum_7.pngbin150 -> 0 bytes
-rw-r--r--resources/datenum_8.pngbin152 -> 0 bytes
-rw-r--r--resources/datenum_9.pngbin154 -> 0 bytes
-rw-r--r--resources/index.gui6
-rw-r--r--resources/index~300x300.gui27
-rw-r--r--resources/styles.css16
-rw-r--r--resources/widgets.gui4
-rw-r--r--screenshot.pngbin0 -> 8179 bytes
20 files changed, 117 insertions, 46 deletions
diff --git a/README.md b/README.md
index 0413036..e35e774 100644
--- a/README.md
+++ b/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).
diff --git a/app/index.js b/app/index.js
index d262ae8..c466b90 100644
--- a/app/index.js
+++ b/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);
+}
diff --git a/app/utils.js b/app/utils.js
new file mode 100644
index 0000000..d401564
--- /dev/null
+++ b/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;
+}
diff --git a/companion/index.js b/companion/index.js
index 963fd09..e4aac6e 100644
--- a/companion/index.js
+++ b/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);
+ }
}
}
-
diff --git a/package.json b/package.json
index 99e4ff0..4f59b07 100644
--- a/package.json
+++ b/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"
+ }
+ }
}
} \ No newline at end of file
diff --git a/resources/datenum_0.png b/resources/datenum_0.png
deleted file mode 100644
index 7fb9a20..0000000
--- a/resources/datenum_0.png
+++ /dev/null
Binary files differ
diff --git a/resources/datenum_1.png b/resources/datenum_1.png
deleted file mode 100644
index 8531984..0000000
--- a/resources/datenum_1.png
+++ /dev/null
Binary files differ
diff --git a/resources/datenum_2.png b/resources/datenum_2.png
deleted file mode 100644
index ae2842c..0000000
--- a/resources/datenum_2.png
+++ /dev/null
Binary files differ
diff --git a/resources/datenum_3.png b/resources/datenum_3.png
deleted file mode 100644
index f271eaa..0000000
--- a/resources/datenum_3.png
+++ /dev/null
Binary files differ
diff --git a/resources/datenum_4.png b/resources/datenum_4.png
deleted file mode 100644
index 4058a03..0000000
--- a/resources/datenum_4.png
+++ /dev/null
Binary files differ
diff --git a/resources/datenum_5.png b/resources/datenum_5.png
deleted file mode 100644
index 193a75a..0000000
--- a/resources/datenum_5.png
+++ /dev/null
Binary files differ
diff --git a/resources/datenum_6.png b/resources/datenum_6.png
deleted file mode 100644
index 93821a2..0000000
--- a/resources/datenum_6.png
+++ /dev/null
Binary files differ
diff --git a/resources/datenum_7.png b/resources/datenum_7.png
deleted file mode 100644
index ef65359..0000000
--- a/resources/datenum_7.png
+++ /dev/null
Binary files differ
diff --git a/resources/datenum_8.png b/resources/datenum_8.png
deleted file mode 100644
index 0b37301..0000000
--- a/resources/datenum_8.png
+++ /dev/null
Binary files differ
diff --git a/resources/datenum_9.png b/resources/datenum_9.png
deleted file mode 100644
index 131148b..0000000
--- a/resources/datenum_9.png
+++ /dev/null
Binary files differ
diff --git a/resources/index.gui b/resources/index.gui
index e461139..e4c34a2 100644
--- a/resources/index.gui
+++ b/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" />
diff --git a/resources/index~300x300.gui b/resources/index~300x300.gui
new file mode 100644
index 0000000..a44b3d7
--- /dev/null
+++ b/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 -->
+
diff --git a/resources/styles.css b/resources/styles.css
index ccf38e9..bdfd6d9 100644
--- a/resources/styles.css
+++ b/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;
}
diff --git a/resources/widgets.gui b/resources/widgets.gui
index adf26e9..f27bbfd 100644
--- a/resources/widgets.gui
+++ b/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>
diff --git a/screenshot.png b/screenshot.png
new file mode 100644
index 0000000..513c2e8
--- /dev/null
+++ b/screenshot.png
Binary files differ