settings, temporary time shadow

TODO.md

@@ -1,9 +1,11 @@
-- icons
 - settings
   - configurable theme color
   - pace/speed based on sport
   - imperial unit support
 
 - hr gauge => hr zone distribution
-- track color => color coded by elevation gain/loss (or even vertical speed)
+- track color => color coded by elevation gain/loss (or even vertical speed ?)
 - https://github.com/loukad/vertlover 
+
+- refactor
+  - fields to members

resources/layouts/layouts.xml

@@ -23,12 +23,16 @@
         <!-- 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="center" y="330" color="0xDDFF88" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
+        <label id="timeS1" x="212" y="330" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
+        <label id="timeS2" x="214" y="330" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
+        <label id="timeS3" x="213" y="328" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
+        <label id="timeS4" x="213" y="332" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
+        <label id="time" x="213" y="330" color="0x000000" justification="Graphics.TEXT_JUSTIFY_CENTER" font="Graphics.FONT_LARGE" />
 
         <!-- distance/pace/avg pace -->
-        <label id="pace" x="360" y="80" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM" text="12.34"/>
+        <label id="pace" x="360" y="80" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM"/>
         <bitmap id="iconPace" filename="../drawables/pace.png" x="362" y="132" />
-        <label id="apace" x="360" y="178" color="0x4488FF" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_LARGE" text="12.34"/>
+        <label id="apace" x="360" y="178" color="0x0088FF" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_LARGE"/>
         <bitmap id="iconAPace" filename="../drawables/apace.png" x="362" y="198" />
         <label id="distance" x="360" y="224" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM" />
         <label id="distanceLabel" x="364" y="246" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_XTINY" text="km"/>

resources/settings/properties.xml

@@ -0,0 +1,4 @@
+<properties>
+    <property id="appVersion" type="string">0.8.0</property>
+    <property id="themeColor" type="string">0088FF</property>
+</properties>

resources/settings/settings.xml

@@ -0,0 +1,10 @@
+<settings>
+
+    <setting propertyKey="@Properties.appVersion" title="@Strings.AppVersionTitle">
+        <settingConfig type="alphaNumeric" readonly="true" />
+    </setting>
+    <setting propertyKey="@Properties.themeColor" title="@Strings.ThemeColorTitle">
+        <settingConfig type="alphaNumeric" />
+    </setting>
+
+</settings>

resources/strings/strings.xml

@@ -1,5 +1,7 @@
 <strings>
     <string id="AppName">RepaField</string>
+    <string id="AppVersionTitle">Version</string>
+    <string id="ThemeColorTitle">Theme Color</string>
 
     <string id="label">My Value</string>
 </strings>

source/RepaFieldBgOverlay.mc

@@ -11,6 +11,9 @@ class BgOverlay extends WatchUi.Drawable {
     hidden var h as Number;
     hidden var d as Number;
 
+    hidden var c1 as Number;
+    hidden var c2 as Number;
+
     function initialize(params as Dictionary) {
         Drawable.initialize(params);
         x = 132;
@@ -33,12 +36,23 @@ class BgOverlay extends WatchUi.Drawable {
         if (params.hasKey(:d)) {
             d = params.get(:d) as Number;
         }
+
+        c1 = 0x002244;
+        c2 = 0x003366;
+    }
+
+    function setColor1(c as Number) as Void {
+        c1 = c;
+    }
+
+    function setColor2(c as Number) as Void {
+        c2 = c;
     }
 
     function draw(dc as Dc) as Void {
-        dc.setColor(0x002244, Graphics.COLOR_TRANSPARENT);
+        dc.setColor(c1, Graphics.COLOR_TRANSPARENT);
         dc.fillPolygon([[x+w, y], [x, y], [x-d, y+h], [x+w, y+h]]);
-        dc.setColor(0x003366, Graphics.COLOR_TRANSPARENT);
+        dc.setColor(c2, Graphics.COLOR_TRANSPARENT);
         dc.setPenWidth(1);
         dc.drawLine(x+w, y, x, y);
         dc.drawLine(x, y, x-d, y+h);

source/RepaFieldView.mc

@@ -4,9 +4,12 @@ import Toybox.Lang;
 import Toybox.UserProfile;
 import Toybox.WatchUi;
 import Toybox.System;
+import Toybox.Application;
 
 class RepaFieldView extends WatchUi.DataField {
 
+    hidden var themeColor as Numeric;
+
     hidden var hrValue as Numeric;
     hidden var ahrValue as Numeric;
     hidden var mhrValue as Numeric;
@@ -28,6 +31,9 @@ class RepaFieldView extends WatchUi.DataField {
 
     function initialize() {
         DataField.initialize();
+
+        themeColor = Application.Properties.getValue("themeColor").toNumberWithBase(16);
+
         hrValue = 0;
         ahrValue = 0;
         mhrValue = 0;
@@ -86,10 +92,25 @@ class RepaFieldView extends WatchUi.DataField {
             View.setLayout(Rez.Layouts.MainLayout(dc));
         }
 
+        // TODO remove
         var label = View.findDrawableById("label") as Text;
         if (label != null) {
             label.setText(Rez.Strings.label);
         }
+
+        // theme color
+        var bgo = View.findDrawableById("BgOverlay") as BgOverlay;
+        bgo.setColor1(darken(themeColor, 4));
+        bgo.setColor2(darken(themeColor, 2));
+
+        var elevationField = View.findDrawableById("elevation") as Text;
+        elevationField.setColor(themeColor);
+        var elevationGainField = View.findDrawableById("elevationGain") as Text;
+        elevationGainField.setColor(themeColor);
+        var elevationLossField = View.findDrawableById("elevationLoss") as Text;
+        elevationLossField.setColor(themeColor);
+        var aPaceField = View.findDrawableById("apace") as Text;
+        aPaceField.setColor(themeColor);
     }
 
     function compute(info as Activity.Info) as Void {
@@ -198,11 +219,27 @@ class RepaFieldView extends WatchUi.DataField {
         }
 
         // time
+        var time = System.getClockTime();
+        var tstr = time.hour.format("%02d") + ":" + time.min.format("%02d");
         var timeField = View.findDrawableById("time") as Text;
         if (timeField != null) {
-            var time = System.getClockTime();
+            timeField.setText(tstr);
-            timeField.setText(time.hour.format("%02d") + ":" + time.min.format("%02d"));
         }
+        // TODO ?
+        var ts1 = View.findDrawableById("timeS1") as Text;
+        var ts2 = View.findDrawableById("timeS2") as Text;
+        var ts3 = View.findDrawableById("timeS3") as Text;
+        var ts4 = View.findDrawableById("timeS4") as Text;
+        ts1.setColor(themeColor);
+        ts1.setText(tstr);
+        ts2.setColor(themeColor);
+        ts2.setText(tstr);
+        ts3.setColor(themeColor);
+        ts3.setText(tstr);
+        ts4.setColor(themeColor);
+        ts4.setText(tstr);
+
+        // timer
         var timerField = View.findDrawableById("timerHM") as Text;
         var timerSecField = View.findDrawableById("timerS") as Text;
         if (timerField != null) {