#3 vertical speed, slight layout adjustments

README.md

@@ -16,8 +16,11 @@ Trail running focused Garmin watch DataField (for myself)
   - current
   - gain
   - loss
+- configurable top left field
+  - cadence
   - grade
-- cadence (instead of grade) TODO
+  - gap
+  - vertical speed
 - distance to destination gauge
 
 # Settings

resources-epix2pro51mm/layouts.xml

@@ -0,0 +1,72 @@
+<layouts>
+    <!-- A generic, centered layout. -->
+    <layout id="MainLayout">
+        <drawable class="Background"/>
+        <drawable class="BgOverlay" id="BgOverlay">
+            <param name="x">178</param>
+            <param name="y">78</param>
+            <param name="h">280</param>
+            <param name="d">-36</param>
+        </drawable>
+        <drawable class="HeartRate" id="HeartRate">
+            <param name="y">80</param>
+        </drawable>
+        <drawable class="Track" />
+        <!-- drawable class="Stamina" /-->
+
+        <!-- hr labels -->
+        <label id="hr" x="center" y="12" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_MEDIUM" />
+        <label id="ahr" x="30%" y="24" color="0x888888" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_TINY" />
+        <label id="mhr" x="70%" y="24" color="0x888888" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_TINY" />
+
+        <!-- time/timer -->
+        <label id="timerHM" x="138" y="298" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_MEDIUM" />
+        <label id="timerS" x="140" y="318" color="Graphics.COLOR_LT_GRAY" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_XTINY" />
+        <label id="time" x="50%" y="375" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
+
+        <!-- distance/pace/avg pace -->
+        <label id="pace" x="390" y="82" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM"/>
+        <bitmap id="iconPace" filename="../resources/drawables/pace.png" x="394" y="142" />
+        <label id="apace" x="390" y="198" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_LARGE"/>
+        <bitmap id="iconAPace" filename="../resources/drawables/apace.png" x="394" y="228" />
+        <label id="distance" x="390" y="250" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM" />
+        <label id="distanceLabel" x="392" y="276" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_XTINY" text="km"/>
+
+        <!-- cadence -->
+        <bitmap id="iconCadence" filename="../resources/drawables/cadence.png" x="36" y="116" />
+        <label id="cadence" x="62" y="92" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_MEDIUM" />
+
+        <!-- elevation, egain -->
+        <bitmap id="iconHills" filename="../resources/drawables/hills.png" x="22" y="154" />
+        <label id="elevation" x="62" y="142" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_MEDIUM"/>
+        <bitmap id="iconEGain" filename="../resources/drawables/e_gain.png" x="22" y="204" />
+        <label id="elevationGain" x="62" y="192" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_MEDIUM"/>
+        <bitmap id="iconELoss" filename="../resources/drawables/e_loss.png" x="22" y="254" />
+        <label id="elevationLoss" x="62" y="242" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_MEDIUM"/>
+
+    </layout>
+
+    <!-- Layouts used for the for the four quadrants. -->
+    <layout id="TopLayout">
+        <drawable class="Background" />
+        <drawable class="HeartRate" id="HeartRate">
+            <param name="y">80</param>
+        </drawable>
+
+        <!-- hr labels -->
+        <label id="hr" x="center" y="6" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_MEDIUM" />
+        <label id="ahr" x="32%" y="18" color="0x888888" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_TINY" />
+        <label id="mhr" x="68%" y="18" color="0x888888" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_TINY" />
+    </layout>
+    <layout id="BottomLayout">
+        <drawable class="Background" />
+        <drawable class="HeartRate" id="HeartRate">
+            <param name="y">80</param>
+        </drawable>
+
+        <!-- hr labels -->
+        <label id="hr" x="center" y="72" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_MEDIUM" />
+        <label id="ahr" x="32%" y="72" color="0x888888" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_TINY" />
+        <label id="mhr" x="68%" y="72" color="0x888888" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_TINY" />
+    </layout>
+</layouts>

resources-round-240x240/layouts.xml

@@ -25,11 +25,11 @@
         <label id="time" x="50%" y="200" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
 
         <!-- distance/pace/avg pace -->
-        <label id="pace" x="200" y="56" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM"/>
+        <label id="pace" x="200" y="52" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM"/>
         <bitmap id="iconPace" filename="../resources/drawables/pace.png" x="198" y="68" />
         <label id="apace" x="200" y="100" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_LARGE"/>
         <bitmap id="iconAPace" filename="../resources/drawables/apace.png" x="198" y="104" />
-        <label id="distance" x="200" y="144" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM" />
+        <label id="distance" x="200" y="136" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM" />
         <label id="distanceLabel" x="202" y="140" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_XTINY" text="km"/>
 
         <!-- cadence -->

resources-round-280x280/layouts.xml

@@ -3,7 +3,7 @@
     <layout id="MainLayout">
         <drawable class="Background"/>
         <drawable class="BgOverlay" id="BgOverlay">
-            <param name="x">100</param>
+            <param name="x">110</param>
             <param name="y">42</param>
             <param name="h">170</param>
             <param name="d">-18</param>
@@ -25,12 +25,12 @@
         <label id="time" x="50%" y="230" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
 
         <!-- distance/pace/avg pace -->
-        <label id="pace" x="230" y="40" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM"/>
-        <bitmap id="iconPace" filename="../resources/drawables/pace.png" x="228" y="68" />
-        <label id="apace" x="230" y="106" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_LARGE"/>
-        <bitmap id="iconAPace" filename="../resources/drawables/apace.png" x="228" y="114" />
-        <label id="distance" x="230" y="140" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM" />
-        <label id="distanceLabel" x="232" y="156" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_XTINY" text="km"/>
+        <label id="pace" x="240" y="40" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM"/>
+        <bitmap id="iconPace" filename="../resources/drawables/pace.png" x="238" y="68" />
+        <label id="apace" x="240" y="106" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_LARGE"/>
+        <bitmap id="iconAPace" filename="../resources/drawables/apace.png" x="238" y="114" />
+        <label id="distance" x="240" y="140" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM" />
+        <label id="distanceLabel" x="242" y="156" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_XTINY" text="km"/>
 
         <!-- cadence -->
         <bitmap id="iconCadence" filename="../resources/drawables/cadence.png" x="24" y="70" />

resources-round-390x390/layouts.xml

@@ -3,7 +3,7 @@
     <layout id="MainLayout">
         <drawable class="Background"/>
         <drawable class="BgOverlay" id="BgOverlay">
-            <param name="x">140</param>
+            <param name="x">150</param>
             <param name="y">62</param>
             <param name="h">260</param>
             <param name="d">-32</param>

resources-round-454x454/layouts.xml

@@ -3,7 +3,7 @@
     <layout id="MainLayout">
         <drawable class="Background"/>
         <drawable class="BgOverlay" id="BgOverlay">
-            <param name="x">158</param>
+            <param name="x">178</param>
             <param name="y">78</param>
             <param name="h">280</param>
             <param name="d">-36</param>

resources/settings/properties.xml

@@ -5,5 +5,5 @@
     <property id="themeColor3" type="string">FFFF00</property>
     <property id="hrDisplay" type="number">0</property>
     <property id="speedNotPace" type="boolean">false</property>
-    <property id="tlFieldData" type="number">2</property>
+    <property id="tlFieldData" type="number">1</property>
 </properties>

resources/settings/settings.xml

@@ -24,7 +24,7 @@
             <listEntry value="0">@Strings.TLFCadence</listEntry>
             <listEntry value="1">@Strings.TLFGrade</listEntry>
             <listEntry value="2">@Strings.TLFGAP</listEntry>
-            <!-- listEntry value="3">@Strings.TLFVSpeed</listEntry -->
+            <listEntry value="3">@Strings.TLFVSpeed</listEntry>
         </settingConfig>
     </setting>
     <setting propertyKey="@Properties.speedNotPace" title="@Strings.SpeedNotPace">

source/RepaFieldView.mc

@@ -12,6 +12,7 @@ const HR_TYPE_ZONE = 2;
 const TLF_CADENCE = 0;
 const TLF_GRADE = 1;
 const TLF_GAP = 2;
+const TLF_VSPEED = 3;
 
 function displayHr(hr as Number, type as Number, zones as Array<Number>) as String {
     if (hr == 0) {
@@ -51,6 +52,8 @@ class RepaFieldView extends WatchUi.DataField {
     hidden var cadenceZoneColors as Array<Number>;
     hidden var gradeZones as Array<Number>;
     hidden var gradeZoneColors as Array<Number>;
+    hidden var vsZones as Array<Number>;
+    hidden var vsZoneColors as Array<Number>;
     hidden var isDistanceMetric as Boolean;
     hidden var isElevationMetric as Boolean;
     hidden var isPaceMetric as Boolean;
@@ -94,6 +97,7 @@ class RepaFieldView extends WatchUi.DataField {
     hidden var edrop as Number;
     hidden var cadence as Number;
     hidden var grade as RollingAverage;
+    hidden var vspeed as RollingAverage;
 
     function initialize() {
         DataField.initialize();
@@ -116,6 +120,8 @@ class RepaFieldView extends WatchUi.DataField {
         cadenceZoneColors = [Graphics.COLOR_RED, Graphics.COLOR_YELLOW, Graphics.COLOR_GREEN, Graphics.COLOR_BLUE, Graphics.COLOR_PURPLE];
         gradeZones = [-10, -1, 1, 3, 6, 10, 15];
         gradeZoneColors = [Graphics.COLOR_PINK, Graphics.COLOR_PURPLE, Graphics.COLOR_LT_GRAY, Graphics.COLOR_BLUE, Graphics.COLOR_GREEN, Graphics.COLOR_YELLOW, Graphics.COLOR_RED, Graphics.COLOR_DK_RED];
+        vsZones = [-16.6, -1.6, 1.6, 5.0, 10.0, 16.6, 25.0];
+        vsZoneColors = gradeZoneColors;
         toDestination = 0.0f;
         distance = 0.0f;
         timer = 0;
@@ -130,6 +136,7 @@ class RepaFieldView extends WatchUi.DataField {
         edrop = 0;
         cadence = 0;
         grade = new RollingAverage(10);
+        vspeed = new RollingAverage(10);
 
         var settings = System.getDeviceSettings();
         isDistanceMetric = settings.distanceUnits == System.UNIT_METRIC;
@@ -233,12 +240,25 @@ class RepaFieldView extends WatchUi.DataField {
         // update rolling values before updating normal fields
         // only calculate them when some time has passed
         if (info.timerTime != null && info.timerTime > 0) {
-            // grade
-            if (info.altitude != null && info.elapsedDistance != null) {
+            if (info.altitude != null) {
                 var altChange = info.altitude - altitude;
-                var distChange = info.elapsedDistance - distance;
-                if (distChange > 0) {
-                    grade.insert(altChange / distChange);
+
+                // grade
+                if (info.elapsedDistance != null) {
+                    var distChange = info.elapsedDistance - distance;
+                    if (distChange > 0) {
+                        grade.insert(altChange / distChange);
+                    }
+                }
+
+                // vspeed - m/min or ft/min
+                var timerChange = info.timerTime - timer;
+                if (timerChange > 0) {
+                    if (!isElevationMetric) {
+                        vspeed.insert(meterToFeet * altChange / (timerChange / 60000.0));
+                    } else {
+                        vspeed.insert(altChange / (timerChange / 60000.0));
+                    }
                 }
             }
         }
@@ -265,7 +285,7 @@ class RepaFieldView extends WatchUi.DataField {
             distance = 0.0f;
         }
         if (info.timerTime != null) {
-            timer = info.timerTime / 1000;
+            timer = info.timerTime;
         } else {
             timer = 0;
         }
@@ -384,9 +404,10 @@ class RepaFieldView extends WatchUi.DataField {
 
         // timer
         if (fTimer != null) {
-            var trh = timer / 3600;
-            var trm = (timer % 3600) / 60;
-            var trs = timer % 60;
+            var timersec = timer / 1000;
+            var trh = timersec / 3600;
+            var trm = (timersec % 3600) / 60;
+            var trs = timersec % 60;
             var timerColor = Graphics.COLOR_RED;
             if (timerState == Activity.TIMER_STATE_ON) {
                 timerColor = Graphics.COLOR_WHITE;
@@ -407,7 +428,9 @@ class RepaFieldView extends WatchUi.DataField {
 
         // distance
         if (fDistance != null) {
-            if (distance >= 10000) {
+            if (distance >= 100000) {
+                fDistance.setText((distance / 1000).format("%.0f"));
+            } else if (distance >= 10000) {
                 fDistance.setText((distance / 1000).format("%.1f"));
             } else {
                 fDistance.setText((distance / 1000).format("%.2f"));
@@ -476,6 +499,15 @@ class RepaFieldView extends WatchUi.DataField {
                 } else {
                     fCadence.setText("-");
                 }
+            } else if (tlFieldData == TLF_VSPEED) {
+                var cvspeed = vspeed.get();
+                var vsColor = calculateZoneColor(cvspeed, vsZones, vsZoneColors);
+                fCadence.setColor(vsColor);
+                if (cvspeed >= 10 || cvspeed <= -10) {
+                    fCadence.setText(cvspeed.format("%.0f"));
+                } else {
+                    fCadence.setText(cvspeed.format("%.1f"));
+                }
             } else {
                 var cadenceColor = calculateZoneColor(cadence, cadenceZones, cadenceZoneColors);
                 fCadence.setColor(cadenceColor);

source/RollingAverage.mc

@@ -1,6 +1,7 @@
 import Toybox.Lang;
 import Toybox.Time;
 import Toybox.Math;
+import Toybox.System;
 
 class RollingAverage {
     hidden var _size as Number;