#4 next nav point name display

resources-epix2pro42mm/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">150</param>
+            <param name="y">62</param>
+            <param name="h">250</param>
+            <param name="d">-32</param>
+        </drawable>
+        <drawable class="HeartRate" id="HeartRate">
+            <param name="y">64</param>
+        </drawable>
+        <drawable class="Track" />
+        <!-- drawable class="Stamina" /-->
+
+        <!-- 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" />
+
+        <!-- time/timer -->
+        <label id="timerHM" x="132" y="258" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_MEDIUM" />
+        <label id="timerS" x="134" y="278" color="Graphics.COLOR_LT_GRAY" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_XTINY" />
+        <label id="time" x="50%" y="310" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
+
+        <!-- distance/pace/avg pace -->
+        <label id="pace" x="330" y="80" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM"/>
+        <bitmap id="iconPace" filename="../resources/drawables/pace.png" x="332" y="132" />
+        <label id="apace" x="330" y="178" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_LARGE"/>
+        <bitmap id="iconAPace" filename="../resources/drawables/apace.png" x="332" y="198" />
+        <label id="distance" x="330" y="224" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM" />
+        <label id="distanceLabel" x="334" y="246" 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="144" />
+        <label id="elevation" x="62" y="132" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_MEDIUM"/>
+        <bitmap id="iconEGain" filename="../resources/drawables/e_gain.png" x="22" y="184" />
+        <label id="elevationGain" x="62" y="172" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_MEDIUM"/>
+        <bitmap id="iconELoss" filename="../resources/drawables/e_loss.png" x="22" y="224" />
+        <label id="elevationLoss" x="62" y="212" 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">64</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">64</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-epix2pro51mm/layouts.xml

@@ -22,7 +22,7 @@
         <!-- 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" />
+        <label id="time" x="50%" y="365" 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"/>

resources-round-454x454/layouts.xml

@@ -22,7 +22,7 @@
         <!-- 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" />
+        <label id="time" x="50%" y="365" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_MEDIUM" />
 
         <!-- distance/pace/avg pace -->
         <label id="pace" x="390" y="90" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MILD"/>

resources/settings/properties.xml

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

resources/settings/settings.xml

@@ -30,4 +30,7 @@
     <setting propertyKey="@Properties.speedNotPace" title="@Strings.SpeedNotPace">
         <settingConfig type="boolean" />
     </setting>
+    <setting propertyKey="@Properties.showNextPoint" title="@Strings.ShowNextPoint">
+        <settingConfig type="boolean" />
+    </setting>
 </settings>

resources/strings/strings.xml

@@ -9,6 +9,7 @@
     <string id="HrPercentage">Percentage</string>
     <string id="HrZone">Zone</string>
     <string id="SpeedNotPace">Show speed instead of pace</string>
+    <string id="ShowNextPoint">Show next navigation point name (only on newer devices w/ high resolution)</string>
     <string id="TLFieldData">Top-left field data</string>
     <string id="TLFCadence">Cadence</string>
     <string id="TLFGrade">Grade</string>

source/RepaFieldTrack.mc

@@ -9,6 +9,9 @@ class Track extends WatchUi.Drawable {
     hidden var _toNextPoint as Float;
     hidden var _distance as Float;
     hidden var _offCourse as Float;
+    hidden var _nextPointName as String;
+    hidden var _showNextPoint as Boolean;
+    hidden var _font;
 
     function initialize() {
         var dictionary = {
@@ -21,29 +24,23 @@ class Track extends WatchUi.Drawable {
         _toNextPoint = 0.0f;
         _distance = 0.0f;
         _offCourse = 0.0f;
+        _nextPointName = "";
+        _showNextPoint = true;
+
+        if (Graphics has :getVectorFont) {
+            _font = Graphics.getVectorFont({:face => "RobotoCondensedRegular", :size => 24});
+        } else {
+            _font = null;
+        }
     }
 
-    function setToDestination(tdst as Float) as Void {
+    function setTrackData(tdst as Float, tnp as Float, dst as Float, off as Float, nextPointName as String, showNextPoint as Boolean) as Void {
-        _toDestination = tdst;
-    }
-
-    function setToNextPoint(tnp as Float) as Void {
-        _toNextPoint = tnp;
-    }
-
-    function setDistance(dst as Float) as Void {
-        _distance = dst;
-    }
-
-    function setOffCourse(off as Float) as Void {
-        _offCourse = off;
-    }
-
-    function setTrackData(tdst as Float, tnp as Float, dst as Float, off as Float) as Void {
         _toDestination = tdst;
         _toNextPoint = tnp;
         _distance = dst;
         _offCourse = off;
+        _nextPointName = nextPointName;
+        _showNextPoint = showNextPoint;
     }
 
     function draw(dc as Dc) as Void {
@@ -105,6 +102,22 @@ class Track extends WatchUi.Drawable {
             dc.setPenWidth((dc.getWidth() * 0.01).toNumber());
             dc.setColor(0xFFFF00, Graphics.COLOR_TRANSPARENT);
             dc.drawArc(w / 2, h / 2, w / 2 - 2, Graphics.ARC_COUNTER_CLOCKWISE, acurrent, anext);
+
+            // next point name
+            if (_showNextPoint && _font != null && h > 350) {
+                var pointText = (_toNextPoint / 1000.0).format("%.1f");
+                if (_nextPointName.length() > 0 && _nextPointName.length() <= 20) {
+                    pointText += " | " + _nextPointName;
+                } else if (_nextPointName.length() > 20) {
+                    pointText += " | " + _nextPointName.substring(0, 17) + "...";
+                }
+                if (_toNextPoint > 1000) {
+                    dc.setColor(0x88FFFF, Graphics.COLOR_TRANSPARENT);
+                } else {
+                    dc.setColor(0xAAFF44, Graphics.COLOR_TRANSPARENT);
+                }
+                dc.drawRadialText(w / 2, h / 2, _font, pointText, Graphics.TEXT_JUSTIFY_CENTER, 270, h / 2 - 12, Graphics.RADIAL_TEXT_DIRECTION_COUNTER_CLOCKWISE);
+            }
         }
     }
 }

source/RepaFieldView.mc

@@ -44,6 +44,7 @@ class RepaFieldView extends WatchUi.DataField {
     hidden var themeColor3 as Number;
     hidden var hrDisplayType as Number;
     hidden var speedNotPace as Boolean;
+    hidden var showNextPoint as Boolean;
     hidden var tlFieldData as Number;
     hidden var hrZones as Array<Number>;
     hidden var hrHist as Array<Number>;
@@ -109,6 +110,7 @@ class RepaFieldView extends WatchUi.DataField {
         themeColor3 = Application.Properties.getValue("themeColor3").toNumberWithBase(16);
         hrDisplayType = Application.Properties.getValue("hrDisplay").toNumber();
         speedNotPace = Application.Properties.getValue("speedNotPace");
+        showNextPoint = Application.Properties.getValue("showNextPoint");
         tlFieldData = Application.Properties.getValue("tlFieldData").toNumber();
 
         hrValue = 0;
@@ -404,7 +406,7 @@ class RepaFieldView extends WatchUi.DataField {
 
         // track
         if (fTrack != null) {
-            fTrack.setTrackData(toDestination, toNextPoint, distance, offCourse);
+            fTrack.setTrackData(toDestination, toNextPoint, distance, offCourse, nextPointName, showNextPoint);
         }
 
         // time