From 21475330fc2e1de979aa1dc5456accc7ebc84db6 Mon Sep 17 00:00:00 2001 From: Jon Barlow Date: Sun, 11 Mar 2018 18:04:46 +0000 Subject: Updated for Versa --- README.md | 4 ++- app/index.js | 75 ++++++++++++++++++++++++++++++++++---------- app/utils.js | 7 +++++ companion/index.js | 9 +++--- package.json | 15 +++++++-- resources/datenum_0.png | Bin 151 -> 0 bytes resources/datenum_1.png | Bin 140 -> 0 bytes resources/datenum_2.png | Bin 154 -> 0 bytes resources/datenum_3.png | Bin 156 -> 0 bytes resources/datenum_4.png | Bin 150 -> 0 bytes resources/datenum_5.png | Bin 154 -> 0 bytes resources/datenum_6.png | Bin 155 -> 0 bytes resources/datenum_7.png | Bin 150 -> 0 bytes resources/datenum_8.png | Bin 152 -> 0 bytes resources/datenum_9.png | Bin 154 -> 0 bytes resources/index.gui | 6 ++-- resources/index~300x300.gui | 27 ++++++++++++++++ resources/styles.css | 16 ---------- resources/widgets.gui | 4 +-- screenshot.png | Bin 0 -> 8179 bytes 20 files changed, 117 insertions(+), 46 deletions(-) create mode 100644 app/utils.js delete mode 100644 resources/datenum_0.png delete mode 100644 resources/datenum_1.png delete mode 100644 resources/datenum_2.png delete mode 100644 resources/datenum_3.png delete mode 100644 resources/datenum_4.png delete mode 100644 resources/datenum_5.png delete mode 100644 resources/datenum_6.png delete mode 100644 resources/datenum_7.png delete mode 100644 resources/datenum_8.png delete mode 100644 resources/datenum_9.png create mode 100644 resources/index~300x300.gui create mode 100644 screenshot.png 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 Binary files a/resources/datenum_0.png and /dev/null differ diff --git a/resources/datenum_1.png b/resources/datenum_1.png deleted file mode 100644 index 8531984..0000000 Binary files a/resources/datenum_1.png and /dev/null differ diff --git a/resources/datenum_2.png b/resources/datenum_2.png deleted file mode 100644 index ae2842c..0000000 Binary files a/resources/datenum_2.png and /dev/null differ diff --git a/resources/datenum_3.png b/resources/datenum_3.png deleted file mode 100644 index f271eaa..0000000 Binary files a/resources/datenum_3.png and /dev/null differ diff --git a/resources/datenum_4.png b/resources/datenum_4.png deleted file mode 100644 index 4058a03..0000000 Binary files a/resources/datenum_4.png and /dev/null differ diff --git a/resources/datenum_5.png b/resources/datenum_5.png deleted file mode 100644 index 193a75a..0000000 Binary files a/resources/datenum_5.png and /dev/null differ diff --git a/resources/datenum_6.png b/resources/datenum_6.png deleted file mode 100644 index 93821a2..0000000 Binary files a/resources/datenum_6.png and /dev/null differ diff --git a/resources/datenum_7.png b/resources/datenum_7.png deleted file mode 100644 index ef65359..0000000 Binary files a/resources/datenum_7.png and /dev/null differ diff --git a/resources/datenum_8.png b/resources/datenum_8.png deleted file mode 100644 index 0b37301..0000000 Binary files a/resources/datenum_8.png and /dev/null differ diff --git a/resources/datenum_9.png b/resources/datenum_9.png deleted file mode 100644 index 131148b..0000000 Binary files a/resources/datenum_9.png and /dev/null 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 @@ - + - - + + 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 @@ - - + + diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 0000000..513c2e8 Binary files /dev/null and b/screenshot.png differ -- cgit v1.2.3