initial commit

resources/healthOverlay.gui

@@ -0,0 +1,44 @@
+<svg>
+  <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="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>
+  
+  <symbol id="healthOverlay">
+    <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/stat_steps_solid_32px.png" />
+      </use>
+      <use href="#healthText" x="35%" y="47%" class="healthTextInstance" id="calText">
+        <set href="healthTextIcon" attributeName="href" to="img/stat_cals_solid_32px.png" />
+      </use>
+      <use href="#healthText" x="35%" y="72%" class="healthTextInstance" id="distText">
+        <set href="healthTextIcon" attributeName="href" to="img/stat_dist_solid_32px.png" />
+      </use>
+      <use href="#healthText" x="76%" y="22%" class="healthTextInstance" id="elevText">
+        <set href="healthTextIcon" attributeName="href" to="img/stat_floors_solid_32px.png" />
+      </use>
+      <use href="#healthText" x="76%" y="47%" class="healthTextInstance" id="actminText">
+        <set href="healthTextIcon" attributeName="href" to="img/stat_am_solid_32px.png" />
+      </use>
+    </g>
+
+    
+    <rect x="0" y="0" width="100%" height="100%" opacity="0" id="touchArea" pointer-events="visible" />
+  </symbol>
+    
+</svg>
+

resources/index.gui

@@ -0,0 +1,7 @@
+<svg id="background">
+  <text x="50%" y="50%" text-anchor="middle" fill="white">Touch Me</text>  
+  
+  
+  <!-- Add the health overlay last so touch area is on top of everything else -->
+  <use href="#healthOverlay" id="healthOverlayInstance" />
+</svg>

resources/styles.css

@@ -0,0 +1,20 @@
+#background {
+  viewport-fill: red;
+}
+
+.healthTextLabel {
+  font-size: 28;
+  font-family: System-Regular;
+  font-weight: regular;
+  text-length: 8;
+  text-anchor: end;
+  fill: white;
+}
+
+#overlay {
+  display: none;
+}
+
+#overlayShadeColor {
+  fill: black;
+}

resources/widgets.gui

@@ -0,0 +1,10 @@
+<svg>
+  <defs>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
+    
+    <!-- line below required to import the health overlay -->
+    <link rel="import" href="healthOverlay.gui" />
+    
+  </defs>
+</svg>