From 8a8a331096d0399f77bbac665e2523cf994353d3 Mon Sep 17 00:00:00 2001 From: Jon Barlow Date: Thu, 24 Aug 2017 15:05:51 +0100 Subject: Initial --- README.md | 14 ++++++-- app/index.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++ companion/index.js | 12 +++++++ package.json | 8 +++++ resources/0.png | Bin 0 -> 842 bytes resources/1.png | Bin 0 -> 430 bytes resources/2.png | Bin 0 -> 777 bytes resources/3.png | Bin 0 -> 749 bytes resources/4.png | Bin 0 -> 676 bytes resources/5.png | Bin 0 -> 762 bytes resources/6.png | Bin 0 -> 854 bytes resources/7.png | Bin 0 -> 611 bytes resources/8.png | Bin 0 -> 940 bytes resources/9.png | Bin 0 -> 853 bytes resources/background.png | Bin 0 -> 881 bytes resources/datenum_0.png | Bin 0 -> 151 bytes resources/datenum_1.png | Bin 0 -> 140 bytes resources/datenum_2.png | Bin 0 -> 154 bytes resources/datenum_3.png | Bin 0 -> 156 bytes resources/datenum_4.png | Bin 0 -> 150 bytes resources/datenum_5.png | Bin 0 -> 154 bytes resources/datenum_6.png | Bin 0 -> 155 bytes resources/datenum_7.png | Bin 0 -> 150 bytes resources/datenum_8.png | Bin 0 -> 152 bytes resources/datenum_9.png | Bin 0 -> 154 bytes resources/day_fri.png | Bin 0 -> 693 bytes resources/day_mon.png | Bin 0 -> 866 bytes resources/day_sat.png | Bin 0 -> 795 bytes resources/day_sun.png | Bin 0 -> 777 bytes resources/day_thu.png | Bin 0 -> 749 bytes resources/day_tue.png | Bin 0 -> 761 bytes resources/day_wed.png | Bin 0 -> 818 bytes resources/index.gui | 27 ++++++++++++++ resources/separator.png | Bin 0 -> 139 bytes resources/styles.css | 20 +++++++++++ resources/widgets.gui | 6 ++++ settings/index.jsx | 77 ++++++++++++++++++++++++++++++++++++++++ 37 files changed, 251 insertions(+), 2 deletions(-) create mode 100644 app/index.js create mode 100644 companion/index.js create mode 100644 package.json create mode 100644 resources/0.png create mode 100644 resources/1.png create mode 100644 resources/2.png create mode 100644 resources/3.png create mode 100644 resources/4.png create mode 100644 resources/5.png create mode 100644 resources/6.png create mode 100644 resources/7.png create mode 100644 resources/8.png create mode 100644 resources/9.png create mode 100644 resources/background.png create mode 100644 resources/datenum_0.png create mode 100644 resources/datenum_1.png create mode 100644 resources/datenum_2.png create mode 100644 resources/datenum_3.png create mode 100644 resources/datenum_4.png create mode 100644 resources/datenum_5.png create mode 100644 resources/datenum_6.png create mode 100644 resources/datenum_7.png create mode 100644 resources/datenum_8.png create mode 100644 resources/datenum_9.png create mode 100644 resources/day_fri.png create mode 100644 resources/day_mon.png create mode 100644 resources/day_sat.png create mode 100644 resources/day_sun.png create mode 100644 resources/day_thu.png create mode 100644 resources/day_tue.png create mode 100644 resources/day_wed.png create mode 100644 resources/index.gui create mode 100644 resources/separator.png create mode 100644 resources/styles.css create mode 100644 resources/widgets.gui create mode 100644 settings/index.jsx 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 Binary files /dev/null and b/resources/0.png differ diff --git a/resources/1.png b/resources/1.png new file mode 100644 index 0000000..1b0cf38 Binary files /dev/null and b/resources/1.png differ diff --git a/resources/2.png b/resources/2.png new file mode 100644 index 0000000..f275513 Binary files /dev/null and b/resources/2.png differ diff --git a/resources/3.png b/resources/3.png new file mode 100644 index 0000000..52223ce Binary files /dev/null and b/resources/3.png differ diff --git a/resources/4.png b/resources/4.png new file mode 100644 index 0000000..218f742 Binary files /dev/null and b/resources/4.png differ diff --git a/resources/5.png b/resources/5.png new file mode 100644 index 0000000..c7b99b8 Binary files /dev/null and b/resources/5.png differ diff --git a/resources/6.png b/resources/6.png new file mode 100644 index 0000000..037ca8b Binary files /dev/null and b/resources/6.png differ diff --git a/resources/7.png b/resources/7.png new file mode 100644 index 0000000..7a046a2 Binary files /dev/null and b/resources/7.png differ diff --git a/resources/8.png b/resources/8.png new file mode 100644 index 0000000..dd21b00 Binary files /dev/null and b/resources/8.png differ diff --git a/resources/9.png b/resources/9.png new file mode 100644 index 0000000..85b1fe4 Binary files /dev/null and b/resources/9.png differ diff --git a/resources/background.png b/resources/background.png new file mode 100644 index 0000000..a682e84 Binary files /dev/null and b/resources/background.png differ diff --git a/resources/datenum_0.png b/resources/datenum_0.png new file mode 100644 index 0000000..7fb9a20 Binary files /dev/null and b/resources/datenum_0.png differ diff --git a/resources/datenum_1.png b/resources/datenum_1.png new file mode 100644 index 0000000..8531984 Binary files /dev/null and b/resources/datenum_1.png differ diff --git a/resources/datenum_2.png b/resources/datenum_2.png new file mode 100644 index 0000000..ae2842c Binary files /dev/null and b/resources/datenum_2.png differ diff --git a/resources/datenum_3.png b/resources/datenum_3.png new file mode 100644 index 0000000..f271eaa Binary files /dev/null and b/resources/datenum_3.png differ diff --git a/resources/datenum_4.png b/resources/datenum_4.png new file mode 100644 index 0000000..4058a03 Binary files /dev/null and b/resources/datenum_4.png differ diff --git a/resources/datenum_5.png b/resources/datenum_5.png new file mode 100644 index 0000000..193a75a Binary files /dev/null and b/resources/datenum_5.png differ diff --git a/resources/datenum_6.png b/resources/datenum_6.png new file mode 100644 index 0000000..93821a2 Binary files /dev/null and b/resources/datenum_6.png differ diff --git a/resources/datenum_7.png b/resources/datenum_7.png new file mode 100644 index 0000000..ef65359 Binary files /dev/null and b/resources/datenum_7.png differ diff --git a/resources/datenum_8.png b/resources/datenum_8.png new file mode 100644 index 0000000..0b37301 Binary files /dev/null and b/resources/datenum_8.png differ diff --git a/resources/datenum_9.png b/resources/datenum_9.png new file mode 100644 index 0000000..131148b Binary files /dev/null and b/resources/datenum_9.png differ diff --git a/resources/day_fri.png b/resources/day_fri.png new file mode 100644 index 0000000..f4e79fd Binary files /dev/null and b/resources/day_fri.png differ diff --git a/resources/day_mon.png b/resources/day_mon.png new file mode 100644 index 0000000..cd8ba2b Binary files /dev/null and b/resources/day_mon.png differ diff --git a/resources/day_sat.png b/resources/day_sat.png new file mode 100644 index 0000000..2feb012 Binary files /dev/null and b/resources/day_sat.png differ diff --git a/resources/day_sun.png b/resources/day_sun.png new file mode 100644 index 0000000..c23d41e Binary files /dev/null and b/resources/day_sun.png differ diff --git a/resources/day_thu.png b/resources/day_thu.png new file mode 100644 index 0000000..5b0f518 Binary files /dev/null and b/resources/day_thu.png differ diff --git a/resources/day_tue.png b/resources/day_tue.png new file mode 100644 index 0000000..242207f Binary files /dev/null and b/resources/day_tue.png differ diff --git a/resources/day_wed.png b/resources/day_wed.png new file mode 100644 index 0000000..e2a4804 Binary files /dev/null and b/resources/day_wed.png differ 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/separator.png b/resources/separator.png new file mode 100644 index 0000000..09bacbe Binary files /dev/null and b/resources/separator.png differ 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 @@ + + + + + + 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 ( + +