initial commit

app/index.js

@@ -0,0 +1,130 @@
+import document from "document";
+import clock from "clock";
+import { preferences } from "user-settings";
+import { HeartRateSensor } from "heart-rate";
+import { vibration } from "haptics";
+import { today } from "user-activity";
+import { display } from "display";
+import * as messaging from "messaging";
+import * as fs from "fs";
+import * as digits from "../common/digits";
+
+let hrm = new HeartRateSensor;
+let hrTimer;
+
+let touchArea = document.getElementById('touchArea');
+
+let settings = {
+  colors: ['#843E86', '#00b0a0', 'white'],
+  dateReverse: false // US date
+};
+
+var storedSettings;
+var fileSuccess = true;
+console.log('reading settings');
+try {
+  storedSettings = fs.readFileSync("settings.txt", "cbor");
+}
+catch(err) {
+  fileSuccess = false;
+  console.log('settings not found');
+}
+if (fileSuccess) {
+  settings = storedSettings;
+}
+
+function updateClock() {
+  let currDate = new Date();
+  let hours = currDate.getHours();
+  let displayHours = hours;
+  let day = currDate.getDate();
+  let month = currDate.getMonth()+1;
+  
+  if (preferences.clockDisplay === '12h') {
+    displayHours = displayHours % 12;
+    displayHours = displayHours ? displayHours : 12;
+  }
+  
+  let minutes = currDate.getMinutes();
+  
+  let newDigits = [
+    Math.floor(displayHours/10),
+    displayHours%10,
+    Math.floor(minutes/10),
+    minutes%10
+  ];
+  newDigits = [1, 2, 5, 7];
+  let dateString;
+  if (settings.dateReverse) {
+    dateString = month+"/"+day;
+  } else {
+    dateString = day+"/"+month;
+  }
+  digits.setSmallDigits('date', dateString, true);
+  digits.setDigits([newDigits[0], newDigits[1], newDigits[2], newDigits[3]], settings.colors);
+}
+
+hrm.onreading = () => {
+  if (display.on) {
+    let heartRate = (hrm.heartRate || null);
+    digits.setSmallDigits('hr', heartRate, false);
+  }
+  clearTimeout(hrTimer);
+  hrTimer = setTimeout(() => {
+    digits.setSmallDigits('hr', null, false);
+  }, 5000);
+  hrm.stop();
+}
+
+function updateSteps() {
+  if (display.on) {
+    let steps = (today.adjusted.steps || null);
+    digits.setSmallDigits('steps', steps, true);
+  }
+}
+
+function updateHealthDisplay() {
+  hrm.start();
+  updateSteps();
+}
+
+clock.granularity = "minutes";
+clock.ontick = () => updateClock();
+
+setInterval(() => {
+  updateHealthDisplay();
+}, 2000);
+
+updateHealthDisplay();
+
+messaging.peerSocket.onmessage = e => {
+  console.log("Message received -> "+e.data.key+": "+e.data.newValue);
+  display.poke();
+  vibration.start("bump");
+  switch (e.data.key) {
+    case 'hrcolor':
+      settings.colors[0] = e.data.newValue;
+      break;
+    case 'mincolor':
+      settings.colors[1] = e.data.newValue;
+      break;
+    case 'date':
+      settings.dateReverse = e.data.newValue;
+      break;
+  };
+  updateClock();
+  
+  fs.writeFileSync("settings.txt", settings, "cbor");
+}
+
+messaging.peerSocket.onopen = () => {
+  console.log("Clockface opened socket");
+};
+
+messaging.peerSocket.close = () => {
+  console.log("Clockface closed socket");
+};
+
+messaging.peerSocket.onerror = (err) => {
+  console.log("Clockface socket error: " + err.code + " - " + err.message);
+}

common/characters.js

@@ -0,0 +1,64 @@
+export const charwidth = 3;
+export const charheight = 5;
+
+export const numbers = [[
+	[1,1,1],
+	[1,0,1],
+	[1,0,1],
+	[1,0,1],
+	[1,1,1]
+], [
+	[0,1,1],
+	[0,0,1],
+	[0,0,1],
+	[0,0,1],
+	[0,0,1]
+], [
+	[1,1,1],
+	[0,0,1],
+	[1,1,1],
+	[1,0,0],
+	[1,1,1]
+], [
+	[1,1,1],
+	[0,0,1],
+	[0,1,1],
+	[0,0,1],
+	[1,1,1]
+], [
+	[1,0,1],
+	[1,0,1],
+	[1,1,1],
+	[0,0,1],
+	[0,0,1]
+], [
+	[1,1,1],
+	[1,0,0],
+	[1,1,1],
+	[0,0,1],
+	[1,1,1]
+], [
+	[1,1,1],
+	[1,0,0],
+	[1,1,1],
+	[1,0,1],
+	[1,1,1]
+], [
+	[1,1,1],
+	[0,0,1],
+	[0,0,1],
+	[0,0,1],
+	[0,0,1]
+], [
+	[1,1,1],
+	[1,0,1],
+	[1,1,1],
+	[1,0,1],
+	[1,1,1]
+], [
+	[1,1,1],
+	[1,0,1],
+	[1,1,1],
+	[0,0,1],
+	[0,0,1]
+]];

common/digits.js

@@ -0,0 +1,125 @@
+import document from "document";
+import * as characters from "characters";
+
+function getSquares(character) {
+  return characters.numbers[character];
+}
+
+function splitNumber(number) {
+  let numberString = number.toString();
+  return splitString(numberString);
+}
+
+function splitString(input) {
+  let chars = [];
+  for (let i = 0; i < input.length; i += 1) {
+    chars.push(input.charAt(i));
+  }
+  return chars;
+}
+
+const smallDigits = ['0','1','2','3','4','5','6','7','8','9','/'];
+
+export function setSmallDigits(name, input, rightJustify) {
+  let chars = [];
+  let smallNumElem = document.getElementById(name);
+  
+  if (typeof input === 'number') {
+    chars = splitNumber(input);
+  } else if (typeof input === 'string') {
+    chars = splitString(input);
+  }
+  if (rightJustify) {
+    chars = chars.reverse();
+  }
+  for (let i=0; i<6; i++) {
+    let digitElem = smallNumElem.getElementById('digit'+(i+1));
+    let char = chars[i];
+    if (rightJustify) {
+      char = chars[5-i];
+    }
+    if (typeof char === 'number') {
+      char = char.toString();
+    }
+    if (typeof char !== 'undefined' && smallDigits.indexOf(char) > -1) {
+      if (char == "/") {
+        char = "slash";
+      }
+      digitElem.href="img/"+char+".png";
+    } else {
+      digitElem.href="";
+    }
+  }
+}
+
+export function setDigits(chars, colors) {
+  let matrix = [
+    [0,0,0,0,0,0,0],
+    [0,0,0,0,0,0,0],
+    [0,0,0,0,0,0,0],
+    [0,0,0,0,0,0,0],
+    [0,0,0,0,0,0,0],
+    [0,0,0,0,0,0,0],
+    [0,0,0,0,0,0,0],
+  ];
+  
+  for (let char = 0; char < 4; char++) {
+    let squares = getSquares(chars[char]);
+    let offsX = 0;
+    let offsY = 0;
+    let color = 0;
+    switch (char) {
+      case 0:
+        color = 1;
+        break;
+      case 1:
+        color = 1;
+        offsX = 4;
+        break;
+      case 2:
+        color = 2;
+        offsY = 2;
+        break;
+      case 3:
+        color = 2;
+        offsX = 4;
+        offsY = 2;
+        break;
+    }
+    for (let i = 0; i < (characters.charwidth*characters.charheight); i++) {
+      let row = Math.floor(i/characters.charwidth);
+      let col = i%characters.charwidth;
+      matrix[row+offsY][col+offsX] += color*squares[row][col];
+    }
+  }
+  
+  for (let i = 0; i < (7*7); i++) {
+    let col = i%7;
+    let row = Math.floor(i/7);
+    let square = matrix[row][col];
+    let locationCode = (row+1)+'-'+(col+1);
+    let squareElem = document.getElementById('squares').getElementById(locationCode);
+    
+    if (square >= 1) {
+      squareElem.style.display = 'inline';
+      squareElem.href = "img/"+locationCode+".png";
+      switch (square) {
+        case 1:
+          squareElem.layer = 1;
+          squareElem.style.fill = colors[0];
+          break;
+        case 2:
+          squareElem.layer = 2;
+          squareElem.style.fill = colors[1];
+          break;
+        case 3:
+          squareElem.layer = 3;
+          squareElem.style.fill = colors[2];
+          break;
+      }
+    } else {
+      squareElem.style.display = 'none';
+      squareElem.href = "";
+    }
+  }
+}

companion/index.js

@@ -0,0 +1,43 @@
+import * as messaging from "messaging";
+import { settingsStorage } from "settings";
+
+//console.log("Companion Started");
+
+messaging.peerSocket.onopen = () => {
+};
+
+messaging.peerSocket.close = () => {
+};
+
+settingsStorage.onchange = evt => {
+  let data = {}
+  switch(evt.key) {
+    case 'mincolor':
+    case 'hrcolor':
+      data = {
+        key: evt.key,
+        newValue: JSON.parse(evt.newValue)
+      };
+      break;
+    case 'date':
+      data = {
+        key: evt.key,
+        newValue: (evt.newValue === 'true')
+      };
+      break;
+    default:
+      data = {
+        key: evt.key,
+        newValue: evt.newValue
+      };
+      break;
+  }
+  
+  sendVal(data);
+};
+
+function sendVal(data) {
+  if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
+    messaging.peerSocket.send(data);
+  }
+}

package.json

@@ -0,0 +1,22 @@
+{
+  "fitbit": {
+    "appUUID": "06f0823f-7344-4ed2-a1f3-68427356c245",
+    "appType": "clockface",
+    "appDisplayName": "Frosted",
+    "iconFile": "resources/icon.png",
+    "wipeColor": "#607d8b",
+    "requestedPermissions": [
+      "access_activity",
+      "access_heart_rate"
+    ],
+    "buildTargets": [
+      "meson",
+      "higgs"
+    ],
+    "i18n": {
+      "en": {
+        "name": "Frosted"
+      }
+    }
+  }
+}

resources/img/coordinates.txt

@@ -0,0 +1,49 @@
+<image href="" fill="white" id="1-1" class="square" x="48" y="36" width="72" height="94" />
+<image href="" fill="white" id="1-2" class="square" x="70" y="36" width="79" height="83" />
+<image href="" fill="white" id="1-3" class="square" x="100" y="27" width="78" height="81" />
+<image href="" fill="white" id="1-4" class="square" x="128" y="17" width="80" height="80" />
+<image href="" fill="white" id="1-5" class="square" x="159" y="7" width="98" height="80" />
+<image href="" fill="white" id="1-6" class="square" x="188" y="0" width="81" height="80" />
+<image href="" fill="white" id="1-7" class="square" x="223" y="0" width="71" height="86" />
+<image href="" fill="white" id="2-1" class="square" x="28" y="49" width="87" height="82" />
+<image href="" fill="white" id="2-2" class="square" x="56" y="39" width="87" height="82" />
+<image href="" fill="white" id="2-3" class="square" x="86" y="30" width="87" height="85" />
+<image href="" fill="white" id="2-4" class="square" x="116" y="21" width="89" height="92" />
+<image href="" fill="white" id="2-5" class="square" x="146" y="14" width="86" height="100" />
+<image href="" fill="white" id="2-6" class="square" x="180" y="9" width="89" height="106" />
+<image href="" fill="white" id="2-7" class="square" x="243" y="62" width="43" height="50" />
+<image href="" fill="white" id="3-1" class="square" x="11" y="53" width="97" height="93" />
+<image href="" fill="white" id="3-2" class="square" x="42" y="44" width="95" height="201" />
+<image href="" fill="white" id="3-3" class="square" x="73" y="36" width="97" height="200" />
+<image href="" fill="white" id="3-4" class="square" x="104" y="30" width="98" height="194" />
+<image href="" fill="white" id="3-5" class="square" x="142" y="25" width="98" height="124" />
+<image href="" fill="white" id="3-6" class="square" x="208" y="86" width="61" height="120" />
+<image href="" fill="white" id="3-7" class="square" x="237" y="88" width="63" height="110" />
+<image href="" fill="white" id="4-1" class="square" x="0" y="59" width="123" height="201" />
+<image href="" fill="white" id="4-2" class="square" x="31" y="51" width="117" height="199" />
+<image href="" fill="white" id="4-3" class="square" x="64" y="45" width="111" height="195" />
+<image href="" fill="white" id="4-4" class="square" x="143" y="122" width="65" height="109" />
+<image href="" fill="white" id="4-5" class="square" x="152" y="118" width="88" height="102" />
+<image href="" fill="white" id="4-6" class="square" x="206" y="120" width="63" height="91" />
+<image href="" fill="white" id="4-7" class="square" x="237" y="120" width="64" height="81" />
+<image href="" fill="white" id="5-1" class="square" x="0" y="67" width="127" height="197" />
+<image href="" fill="white" id="5-2" class="square" x="34" y="62" width="112" height="191" />
+<image href="" fill="white" id="5-3" class="square" x="111" y="150" width="67" height="93" />
+<image href="" fill="white" id="5-4" class="square" x="137" y="154" width="70" height="79" />
+<image href="" fill="white" id="5-5" class="square" x="175" y="152" width="62" height="69" />
+<image href="" fill="white" id="5-6" class="square" x="209" y="155" width="57" height="57" />
+<image href="" fill="white" id="5-7" class="square" x="237" y="155" width="56" height="48" />
+<image href="" fill="white" id="6-1" class="square" x="0" y="78" width="112" height="186" />
+<image href="" fill="white" id="6-2" class="square" x="78" y="183" width="60" height="71" />
+<image href="" fill="white" id="6-3" class="square" x="107" y="184" width="60" height="59" />
+<image href="" fill="white" id="6-4" class="square" x="142" y="187" width="64" height="49" />
+<image href="" fill="white" id="6-5" class="square" x="175" y="180" width="59" height="59" />
+<image href="" fill="white" id="6-6" class="square" x="209" y="178" width="55" height="62" />
+<image href="" fill="white" id="6-7" class="square" x="237" y="187" width="58" height="52" />
+<image href="" fill="white" id="7-1" class="square" x="60" y="215" width="44" height="48" />
+<image href="" fill="white" id="7-2" class="square" x="78" y="218" width="58" height="56" />
+<image href="" fill="white" id="7-3" class="square" x="113" y="216" width="58" height="60" />
+<image href="" fill="white" id="7-4" class="square" x="139" y="219" width="63" height="56" />
+<image href="" fill="white" id="7-5" class="square" x="166" y="215" width="68" height="60" />
+<image href="" fill="white" id="7-6" class="square" x="195" y="205" width="70" height="68" />
+<image href="" fill="white" id="7-7" class="square" x="223" y="197" width="71" height="74" />

resources/index.gui

@@ -0,0 +1,7 @@
+<svg>
+  <use href="#squares" id="squares" x="-24" />
+  <use href="#smallnum" id="hr" x="49" y="42" layer="9" />
+  <use href="#smallnum" id="steps" x="146" y="11" layer="9" />
+  <use href="#smallnum" id="date" x="146" y="219" layer="9" />
+  <rect x="0" y="0" width="100%" height="100%" opacity="0" id="touchArea" pointer-events="visible" layer="99" />
+</svg>

resources/index~348x250.gui

@@ -0,0 +1,7 @@
+<svg>
+  <use href="#squares" id="squares" y="-25" />
+  <use href="#smallnum" id="hr" x="73" y="19" layer="9" />
+  <use href="#smallnum" id="steps" x="128" y="0" layer="9" />
+  <use href="#smallnum" id="date" x="170" y="194" layer="9" />
+  <rect x="0" y="0" width="100%" height="100%" opacity="0" id="touchArea" pointer-events="visible" layer="99" />
+</svg>

resources/widgets.gui

@@ -0,0 +1,67 @@
+<svg>
+  <defs>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
+  </defs>
+  
+  <symbol id="squares">
+    <image href="" load="sync" fill="white" id="1-1" class="square" x="46" y="36" width="74" height="95" />
+    <image href="" load="sync" fill="white" id="1-2" class="square" x="70" y="36" width="80" height="84" />
+    <image href="" load="sync" fill="white" id="1-3" class="square" x="98" y="27" width="80" height="82" />
+    <image href="" load="sync" fill="white" id="1-4" class="square" x="128" y="17" width="80" height="81" />
+    <image href="" load="sync" fill="white" id="1-5" class="square" x="156" y="7" width="101" height="80" />
+    <image href="" load="sync" fill="white" id="1-6" class="square" x="187" y="0" width="82" height="82" />
+    <image href="" load="sync" fill="white" id="1-7" class="square" x="219" y="0" width="75" height="86" />
+    <image href="" load="sync" fill="white" id="2-1" class="square" x="23" y="48" width="93" height="84" />
+    <image href="" load="sync" fill="white" id="2-2" class="square" x="56" y="39" width="88" height="82" />
+    <image href="" load="sync" fill="white" id="2-3" class="square" x="84" y="30" width="89" height="87" />
+    <image href="" load="sync" fill="white" id="2-4" class="square" x="114" y="21" width="91" height="97" />
+    <image href="" load="sync" fill="white" id="2-5" class="square" x="145" y="13" width="89" height="101" />
+    <image href="" load="sync" fill="white" id="2-6" class="square" x="180" y="8" width="89" height="111" />
+    <image href="" load="sync" fill="white" id="2-7" class="square" x="240" y="62" width="46" height="55" />
+    <image href="" load="sync" fill="white" id="3-1" class="square" x="11" y="52" width="112" height="205" />
+    <image href="" load="sync" fill="white" id="3-2" class="square" x="39" y="43" width="105" height="206" />
+    <image href="" load="sync" fill="white" id="3-3" class="square" x="70" y="36" width="102" height="204" />
+    <image href="" load="sync" fill="white" id="3-4" class="square" x="102" y="28" width="124" height="201" />
+    <image href="" load="sync" fill="white" id="3-5" class="square" x="142" y="24" width="102" height="193" />
+    <image href="" load="sync" fill="white" id="3-6" class="square" x="184" y="81" width="89" height="126" />
+    <image href="" load="sync" fill="white" id="3-7" class="square" x="235" y="66" width="65" height="134" />
+    <image href="" load="sync" fill="white" id="4-1" class="square" x="0" y="58" width="123" height="202" />
+    <image href="" load="sync" fill="white" id="4-2" class="square" x="29" y="50" width="122" height="201" />
+    <image href="" load="sync" fill="white" id="4-3" class="square" x="63" y="44" width="120" height="198" />
+    <image href="" load="sync" fill="white" id="4-4" class="square" x="105" y="41" width="107" height="190" />
+    <image href="" load="sync" fill="white" id="4-5" class="square" x="152" y="118" width="88" height="103" />
+    <image href="" load="sync" fill="white" id="4-6" class="square" x="206" y="118" width="71" height="93" />
+    <image href="" load="sync" fill="white" id="4-7" class="square" x="226" y="73" width="75" height="128" />
+    <image href="" load="sync" fill="white" id="5-1" class="square" x="0" y="65" width="127" height="199" />
+    <image href="" load="sync" fill="white" id="5-2" class="square" x="22" y="60" width="126" height="194" />
+    <image href="" load="sync" fill="white" id="5-3" class="square" x="110" y="147" width="68" height="96" />
+    <image href="" load="sync" fill="white" id="5-4" class="square" x="137" y="151" width="73" height="82" />
+    <image href="" load="sync" fill="white" id="5-5" class="square" x="175" y="152" width="68" height="70" />
+    <image href="" load="sync" fill="white" id="5-6" class="square" x="203" y="152" width="65" height="60" />
+    <image href="" load="sync" fill="white" id="5-7" class="square" x="236" y="151" width="57" height="52" />
+    <image href="" load="sync" fill="white" id="6-1" class="square" x="0" y="78" width="128" height="188" />
+    <image href="" load="sync" fill="white" id="6-2" class="square" x="78" y="183" width="64" height="71" />
+    <image href="" load="sync" fill="white" id="6-3" class="square" x="107" y="182" width="64" height="62" />
+    <image href="" load="sync" fill="white" id="6-4" class="square" x="137" y="181" width="69" height="55" />
+    <image href="" load="sync" fill="white" id="6-5" class="square" x="172" y="180" width="64" height="61" />
+    <image href="" load="sync" fill="white" id="6-6" class="square" x="208" y="163" width="57" height="78" />
+    <image href="" load="sync" fill="white" id="6-7" class="square" x="235" y="184" width="60" height="56" />
+    <image href="" load="sync" fill="white" id="7-1" class="square" x="60" y="215" width="46" height="48" />
+    <image href="" load="sync" fill="white" id="7-2" class="square" x="78" y="193" width="67" height="83" />
+    <image href="" load="sync" fill="white" id="7-3" class="square" x="108" y="216" width="65" height="61" />
+    <image href="" load="sync" fill="white" id="7-4" class="square" x="137" y="196" width="67" height="80" />
+    <image href="" load="sync" fill="white" id="7-5" class="square" x="166" y="211" width="68" height="65" />
+    <image href="" load="sync" fill="white" id="7-6" class="square" x="193" y="205" width="72" height="68" />
+    <image href="" load="sync" fill="white" id="7-7" class="square" x="222" y="197" width="73" height="74" />
+  </symbol>
+  
+  <symbol id="smallnum">
+    <image href="" x="0"  y="30" width="19" height="31" id="digit1" class="digit" />
+    <image href="" x="17" y="24" width="19" height="31" id="digit2" class="digit" />
+    <image href="" x="34" y="18" width="19" height="31" id="digit3" class="digit" />
+    <image href="" x="51" y="12" width="19" height="31" id="digit4" class="digit" />
+    <image href="" x="68" y="6"  width="19" height="31" id="digit5" class="digit" />
+    <image href="" x="85" y="0"  width="19" height="31" id="digit6" class="digit" />
+  </symbol>
+</svg>

settings/index.jsx

@@ -0,0 +1,76 @@
+function Frosted(props) {
+  return (
+    <Page>
+      <Section>
+        <ColorSelect
+          settingsKey="hrcolor"
+          colors={[
+            {color: '#00b0e7'},
+            {color: '#2084c0'},
+            {color: '#2040c0'},
+            {color: '#5700ad'},
+            {color: '#685098'},
+            {color: '#8820c0'},
+            {color: '#c020c0'},
+            {color: '#843E86'}, // upper
+            {color: '#806480'},
+            {color: '#e800d0'},
+            {color: '#a04890'},
+            {color: '#985070'},
+            {color: '#c02058'},
+            {color: '#e80040'},
+            {color: '#e83800'},
+            {color: '#986850'},
+            {color: '#e89c01'},
+            {color: '#c8e802'},
+            {color: '#788f4b'},
+            {color: '#42bb1b'},
+            {color: '#00e12d'},
+            {color: '#01e890'},
+            {color: '#608078'},
+            {color: '#48a090'},
+            {color: '#508c98'},
+            {color: '#00b0a0'} // lower
+          ]}
+        />
+        <ColorSelect
+          settingsKey="mincolor"
+          colors={[
+            {color: '#00b0e7'},
+            {color: '#2084c0'},
+            {color: '#2040c0'},
+            {color: '#5700ad'},
+            {color: '#685098'},
+            {color: '#8820c0'},
+            {color: '#c020c0'},
+            {color: '#843E86'}, // upper
+            {color: '#806480'},
+            {color: '#e800d0'},
+            {color: '#a04890'},
+            {color: '#985070'},
+            {color: '#c02058'},
+            {color: '#e80040'},
+            {color: '#e83800'},
+            {color: '#986850'},
+            {color: '#e89c01'},
+            {color: '#c8e802'},
+            {color: '#788f4b'},
+            {color: '#42bb1b'},
+            {color: '#00e12d'},
+            {color: '#01e890'},
+            {color: '#608078'},
+            {color: '#48a090'},
+            {color: '#508c98'},
+            {color: '#00b0a0'} // lower
+          ]}
+        />
+        <Toggle
+          settingsKey="date"
+          label="Reverse Date"
+        />
+      </Section>
+    </Page>
+  );
+}
+
+registerSettingsPage(Frosted);