initial commit

app/index.js

@@ -0,0 +1,81 @@
+import document from "document";
+import clock from "clock";
+import { preferences } from "user-settings";
+
+let currminutes = 99;
+
+let dots = document.getElementById('dots');
+
+let digits = {};
+let colors = document.getElementById('colors');
+digits.digit1 = document.getElementById('d1');
+digits.digit2 = document.getElementById('d2');
+digits.digit3 = document.getElementById('d3');
+digits.digit4 = document.getElementById('d4');
+
+
+function startAnimation() {
+  setTimeout(() => { colors.animate('enable'); }, 5000);
+}
+
+function updateClock(force) {
+  let currDate = new Date();
+  let seconds = currDate.getSeconds();
+  let minutes = currDate.getMinutes();
+  if (seconds%2) {
+    dots.animate('disable');
+  } else {
+    dots.animate('enable');
+  }
+  
+  if (force || currminutes != minutes) {
+    currminutes = minutes;
+    digits.digit1.animate('disable');
+    setTimeout(() => { digits.digit2.animate('disable'); }, 250);
+    setTimeout(() => { digits.digit3.animate('disable'); }, 500);
+    setTimeout(() => { digits.digit4.animate('disable'); }, 750);
+    setTimeout(() => { newDigits(); }, 1000);
+    setTimeout(() => { digits.digit1.animate('enable'); }, 1250);
+    setTimeout(() => { digits.digit2.animate('enable'); }, 1500);
+    setTimeout(() => { digits.digit3.animate('enable'); }, 1750);
+    setTimeout(() => { digits.digit4.animate('enable'); }, 2000);
+    
+    setTimeout(() => { digits.digit1.animate('disable'); }, 2000);
+    setTimeout(() => { digits.digit2.animate('disable'); }, 2250);
+    setTimeout(() => { digits.digit3.animate('disable'); }, 2500);
+    setTimeout(() => { digits.digit4.animate('disable'); }, 2750);
+    setTimeout(() => { digits.digit1.animate('enable'); }, 3250);
+    setTimeout(() => { digits.digit2.animate('enable'); }, 3500);
+    setTimeout(() => { digits.digit3.animate('enable'); }, 3750);
+    setTimeout(() => { digits.digit4.animate('enable'); }, 3000);
+  }
+}
+
+function newDigits() {
+  let currDate = new Date();
+  let hours = currDate.getHours();
+  let displayHours = hours;
+  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
+  ];
+  
+  digits.digit1.href = (newDigits[0] == 0) ? '' : 'img/1-'+newDigits[0]+'.png';
+  digits.digit2.href = 'img/2-'+newDigits[1]+'.png';
+  digits.digit3.href = 'img/3-'+newDigits[2]+'.png';
+  digits.digit4.href = 'img/4-'+newDigits[3]+'.png';
+}
+
+clock.granularity = "seconds";
+clock.ontick = () => updateClock();
+setTimeout(() => { updateClock(true); }, 250);
+
+startAnimation();

package.json

@@ -0,0 +1,19 @@
+{
+  "fitbit": {
+    "appUUID": "5ef87407-00cc-4f0b-8c72-99aaea4c5e8f",
+    "appType": "clockface",
+    "appDisplayName": "Bling",
+    "iconFile": "resources/icon.png",
+    "wipeColor": "#607d8b",
+    "requestedPermissions": [],
+    "buildTargets": [
+      "higgs",
+      "meson"
+    ],
+    "i18n": {
+      "en": {
+        "name": "Bling"
+      }
+    }
+  }
+}

resources/index.gui

@@ -0,0 +1,37 @@
+<svg>
+  <g id="colors">
+    <gradientRect width="100%" height="65%"
+      gradient-type="linear"
+      gradient-x1="0" gradient-y1="0"
+      gradient-x2="0" gradient-y2="100%"
+      gradient-color1="#0000ff" gradient-color2="#ff6808" />
+    <gradientRect width="100%" height="35%" y="65%"
+      gradient-type="linear"
+      gradient-x1="0" gradient-y1="0"
+      gradient-x2="0" gradient-y2="100%"
+      gradient-color1="#ff6808" gradient-color2="#ff00ff" />
+    <animate attributeName="opacity" begin="enable" from="0" to="1" dur="4" final="freeze" />
+    <animate attributeName="opacity" begin="disable" from="1" to="0" dur="0.15" final="freeze" />
+  </g>
+  <image width="100%" height="100%" href="img/bg.png" fill="black" id="bg" />
+  <image width="100%" height="100%" href="" fill="white" id="d1" class="digit">
+    <animate attributeName="opacity" begin="enable" from="0" to="1" dur="0.05" final="freeze" />
+    <animate attributeName="opacity" begin="disable" from="1" to="0" dur="0.15" final="freeze" />
+  </image>
+  <image width="100%" height="100%" href="" fill="white" id="d2" class="digit">
+    <animate attributeName="opacity" begin="enable" from="0" to="1" dur="0.05" final="freeze" />
+    <animate attributeName="opacity" begin="disable" from="1" to="0" dur="0.15" final="freeze" />
+  </image>
+  <image width="100%" height="100%" href="" fill="white" id="d3" class="digit">
+    <animate attributeName="opacity" begin="enable" from="0" to="1" dur="0.05" final="freeze" />
+    <animate attributeName="opacity" begin="disable" from="1" to="0" dur="0.15" final="freeze" />
+  </image>
+  <image width="100%" height="100%" href="" fill="white" id="d4" class="digit">
+    <animate attributeName="opacity" begin="enable" from="0" to="1" dur="0.05" final="freeze" />
+    <animate attributeName="opacity" begin="disable" from="1" to="0" dur="0.15" final="freeze" />
+  </image>
+  <image width="100%" height="100%" href="img/dots.png" fill="white" id="dots">
+    <animate attributeName="opacity" begin="enable" from="0" to="1" dur="0.05" final="freeze" />
+    <animate attributeName="opacity" begin="disable" from="1" to="0" dur="0.15" final="freeze" />
+  </image>
+</svg>

resources/styles.css

@@ -0,0 +1,10 @@
+#bg {
+  opacity: 0.7;
+}
+
+.digit {
+  opacity: 0;
+}
+#colors {
+  opacity: 0;
+}

resources/widgets.gui

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