initial commit

resources/index.gui

@@ -0,0 +1,39 @@
+<svg>
+  <gradientRect x="0" y="80%" width="100%" height="40%" id="background"
+    gradient-type="linear"
+    gradient-x1="0" gradient-y1="0"
+    gradient-x2="0" gradient-y2="100%"
+    gradient-color1="black" gradient-color2="#444444"
+  />
+  <gradientRect x="0" y="0" width="1" height="100%" id="progress"
+    gradient-type="linear"
+    gradient-x1="0" gradient-y1="20"
+    gradient-x2="0" gradient-y2="100%-20"
+    gradient-color1="black" gradient-color2="black"
+  />
+  <image href="img/dithernoise.png" id="fakedither" opacity="0.1" fill="black" />
+  <text class="text" id="time" fill="white" x="20" y="70" />
+  <text class="text" id="date" fill="white" x="20" y="110" />
+  <text id="hr" fill="white" x="20" y="100%-22" />
+  <use href="#heart" id="heartbeat" x="20" y="100%-34" />
+  
+  <g id="overlay">
+    <use href="#overlayShade" id="overlayShadeInstance" />
+    <use href="#healthText" x="35%" y="22%" class="healthTextInstance" id="stepsText">
+      <set href="healthTextIcon" attributeName="href" to="img/icon-steps.png" />
+    </use>
+    <use href="#healthText" x="35%" y="47%" class="healthTextInstance" id="calText">
+      <set href="healthTextIcon" attributeName="href" to="img/icon-cal.png" />
+    </use>
+    <use href="#healthText" x="35%" y="72%" class="healthTextInstance" id="distText">
+      <set href="healthTextIcon" attributeName="href" to="img/icon-dist.png" />
+    </use>
+    <use href="#healthText" x="76%" y="22%" class="healthTextInstance" id="elevText">
+      <set href="healthTextIcon" attributeName="href" to="img/icon-elev.png" />
+    </use>
+    <use href="#healthText" x="76%" y="47%" class="healthTextInstance" id="actminText">
+      <set href="healthTextIcon" attributeName="href" to="img/icon-actmin.png" />
+    </use>
+  </g>
+  <rect x="0" y="0" width="100%" height="100%" opacity="0" id="touchArea" pointer-events="visible" />
+</svg>

resources/styles.css

@@ -0,0 +1,35 @@
+.text {
+  font-family: Colfax-Regular;
+}
+
+#date {
+  text-length: 8;
+  font-size: 33;
+}
+
+#hr {
+  text-length: 6;
+  font-size: 28;
+}
+
+#time {
+  font-family: Fabrikat-Regular;
+  font-size: 60;
+  text-length: 5;
+}
+
+#overlay {
+  display: none;
+}
+
+#overlayShadeColor {
+  fill: black;
+}
+
+.healthTextLabel {
+  font-size: 28;
+  font-family: Fabrikat-Regular;
+  text-length: 8;
+  text-anchor: end;
+  fill: white;
+}

resources/widgets.gui

@@ -0,0 +1,37 @@
+<svg>
+  <defs>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
+    
+    <symbol id="overlayShade">
+      <rect id="overlayShadeColor" width="100%" height="100%" opacity="0.85" />
+      <animate attributeName="opacity" begin="enable" from="0" to="1" dur="0.25" final="freeze" />
+      <animate attributeName="opacity" begin="disable" from="1" to="0" dur="0.1" final="freeze" />
+    </symbol>
+    
+    <symbol id="heart">
+      <g transform="scale(0.95),translate(26, 3)" id="healthTextHrIcon">
+          <animateTransform attributeType="scale" begin="load" from="0.95" to="0.85" dur="0.9" final="restore" repeatCount="indefinite" easing="ease-out"/>
+          <svg width="27" height="27">
+            <circle cx="-24%" cy="-24%" r="26%" fill="white" />
+            <circle cx="24%" cy="-24%" r="26%" fill="white" />
+            <g transform="translate(0, 40%), rotate(-135)">
+              <rect x="0" y="0" width="62%" height="38%" fill="white" />
+              <rect x="0" y="0" width="38%" height="62%" fill="white" />
+            </g>
+          </svg>
+        </g>
+    </symbol>
+      
+    <symbol id="healthText">
+      <g opacity="0">
+        <text x="0" y="14" class="healthTextLabel" id="healthTextLabel" />
+        <image x="11" y="-12" width="30" height="30" href="" fill="white" id="healthTextIcon" />
+        <animate attributeName="opacity" begin="enable" from="0" to="1" dur="0.25" final="freeze" />
+        <animateTransform attributeType="translate" begin="enable" from="0, -10" to="0, 0" dur="0.25" final="freeze" easing="ease-out" />
+        <animate attributeName="opacity" begin="disable" from="1" to="0" dur="0.1" final="freeze" />
+        <animateTransform attributeType="translate" begin="disable" from="0, 0" to="0, 10" dur="0.1" final="freeze" easing="ease-out" />
+      </g>
+    </symbol>
+  </defs>
+</svg>