From 61eb7e9a86239f4bec7acc577a9808c85521a6d2 Mon Sep 17 00:00:00 2001
From: Gyuri Horak <dyuri@horak.hu>
Date: Fri, 27 Oct 2023 19:23:50 +0200
Subject: [PATCH] #3 vertical speed, slight layout adjustments

---
 README.md                           |  5 +-
 resources-epix2pro51mm/layouts.xml  | 72 +++++++++++++++++++++++++++++
 resources-round-240x240/layouts.xml |  4 +-
 resources-round-280x280/layouts.xml | 14 +++---
 resources-round-390x390/layouts.xml |  2 +-
 resources-round-454x454/layouts.xml |  2 +-
 resources/settings/properties.xml   |  2 +-
 resources/settings/settings.xml     |  2 +-
 source/RepaFieldView.mc             | 52 +++++++++++++++++----
 source/RollingAverage.mc            |  1 +
 10 files changed, 132 insertions(+), 24 deletions(-)
 create mode 100755 resources-epix2pro51mm/layouts.xml

diff --git a/README.md b/README.md
index 881d6cc..6d5c714 100644
--- a/README.md
+++ b/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
diff --git a/resources-epix2pro51mm/layouts.xml b/resources-epix2pro51mm/layouts.xml
new file mode 100755
index 0000000..df1d655
--- /dev/null
+++ b/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>
diff --git a/resources-round-240x240/layouts.xml b/resources-round-240x240/layouts.xml
index 04de36d..dcb4bc0 100755
--- a/resources-round-240x240/layouts.xml
+++ b/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 -->
diff --git a/resources-round-280x280/layouts.xml b/resources-round-280x280/layouts.xml
index 0d90bb2..7968dee 100755
--- a/resources-round-280x280/layouts.xml
+++ b/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" />
diff --git a/resources-round-390x390/layouts.xml b/resources-round-390x390/layouts.xml
index 363279e..2edec0a 100755
--- a/resources-round-390x390/layouts.xml
+++ b/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>
diff --git a/resources-round-454x454/layouts.xml b/resources-round-454x454/layouts.xml
index b8a2785..8ab115f 100755
--- a/resources-round-454x454/layouts.xml
+++ b/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>
diff --git a/resources/settings/properties.xml b/resources/settings/properties.xml
index eb55821..68ae7b7 100644
--- a/resources/settings/properties.xml
+++ b/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>
diff --git a/resources/settings/settings.xml b/resources/settings/settings.xml
index c0b2595..565f0fa 100644
--- a/resources/settings/settings.xml
+++ b/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">
diff --git a/source/RepaFieldView.mc b/source/RepaFieldView.mc
index 39a6c16..0c5cd18 100644
--- a/source/RepaFieldView.mc
+++ b/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);
diff --git a/source/RollingAverage.mc b/source/RollingAverage.mc
index ac67f01..6b3114d 100644
--- a/source/RollingAverage.mc
+++ b/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;