Ui update

README.md

@@ -9,3 +9,7 @@ Find out more information on the
 ## License
 
 This example is licensed under the [MIT License](./LICENSE).
+
+
+icon Location From:
+https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Noun_project_1841.svg/1000px-Noun_project_1841.svg.png

app/index.js

@@ -8,14 +8,14 @@ var altitudeLabel = document.getElementById("altitude");
 var pressureLabel = document.getElementById("pressure");
 
 // Initialize the UI with some values
-altitudeLabel.innerText = "-";
+altitudeLabel.text = "-";
 
 // Create a new instance of the Barometer
 var bar = new Barometer();
 
 bar.onreading = function() {
-  altitudeLabel.innerText = altitudeFromPressure(bar.pressure / 100) + " ft";
-  pressureLabel.innerText = Math.round(bar.pressure / 100) + " hPa";
+  altitudeLabel.text = Math.round(altitudeFromPressure(bar.pressure / 100)*100)/100 + " ft";
+  pressureLabel.text = Math.round(bar.pressure / 100) + " hPa";
 }
 
 // Begin monitoring the sensor

manifest.json

@@ -0,0 +1 @@
+{"appManifestVersion":1,"main":"app/index.js","svgMain":"resources/index.gui","svgWidgets":"resources/widgets.gui","appType":"app","i18n":{"en":{"name":"Altimeter"}},"buildId":"0x0ab90f121979b2ad","uuid":"0cb04f31-513b-4afe-9bea-3c6eb955f583","name":"Altimeter","bundleDate":"2018-01-01T17:01:16.275Z","requestedPermissions":[],"wipeColor":"#03a9f4"}

package.json

@@ -1,7 +1,15 @@
 {
   "fitbit": {
+    "appUUID": "0cb04f31-513b-4afe-9bea-3c6eb955f583",
     "appType": "app",
     "appDisplayName": "Altimeter",
-    "wipeColor": "#03a9f4"
+    "iconFile": "resources/icon.png",
+    "wipeColor": "#03a9f4",
+    "requestedPermissions": [],
+    "i18n": {
+      "en": {
+        "name": "Altimeter"
+      }
+    }
   }
 }

resources/index.gui

@@ -1,4 +1,6 @@
 <svg>
-  <text id="altitude" x="50%" y="180" class="large-value">altitude</text>
-  <text id="pressure" x="50%" y="230" class="small-value">pressure</text>
+  <text id="altitude-Label" x="50%" y="50" class="label">Pressure altitude</text>
+  <text id="altitude" x="50%" y="100" class="large-value">-</text>
+  <text id="pressure-label" x="50%" y="150" class="label">Pressure</text>
+  <text id="pressure" x="50%" y="200" class="small-value">-</text>
 </svg>

resources/styles.css

@@ -4,16 +4,25 @@ svg {
 
 .large-value {
   font-family: Seville-Book;
-  font-size: 120;
+  font-size: 64;
   fill: fb-blue;
   width: 100%;
   text-anchor: middle;
+  text-length: 32;
+
 }
 
 .small-value {
   font-family: Seville-Book;
-  font-size: 64;
+  font-size: 44;
   fill: fb-white;
   width: 100%;
   text-anchor: middle;
+  text-length: 32;
 }
+
+.label {
+  font-family: System-Regular;
+  fill: white;
+  text-anchor: middle;
+}