From 1c87210a572d61d38fc491208b471a0dd66639ba Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Sun, 10 Nov 2019 15:19:23 +0100
Subject: [PATCH] simple gauge doing catch angle

---
 rowers/templates/embedded_video.html | 32 +++++++++++++++++++++++++++-
 rowers/views/workoutviews.py         |  6 ++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/rowers/templates/embedded_video.html b/rowers/templates/embedded_video.html
index 27201bc5..a1ebdd87 100644
--- a/rowers/templates/embedded_video.html
+++ b/rowers/templates/embedded_video.html
@@ -109,7 +109,8 @@
       var boatspeed = data["boatspeed"];
       var latitude = data["latitude"];
       var longitude = data["longitude"];
-      var spm = data["spm"]
+      var spm = data["spm"];
+      var ctch = data["catch"];
 
       function onYouTubeIframeAPIReady() {
         player = new YT.Player('player', {
@@ -135,11 +136,13 @@
             lat = latitude[Math.round(datatime)];
             lon = longitude[Math.round(datatime)];
             strokerate = spm[Math.round(datatime)];
+            catchangle = ctch[Math.round(datatime)];
 
             document.getElementById("time").innerHTML = Math.round(videotime);
             document.getElementById("datatime").innerHTML = Math.round(datatime);
             document.getElementById("speed").innerHTML = velo;
             document.getElementById("spm").innerHTML = strokerate;
+            gauge.set(catchangle);
             var newLatLng = new L.LatLng(lat, lon);
             marker.setLatLng(newLatLng);
           }
@@ -160,6 +163,33 @@
 
     </script>
   </li>
+  <li class="grid">
+    <canvas id="angles"></canvas>
+    <script type="text/javascript" src="https://bernii.github.io/gauge.js/dist/gauge.js"></script>
+    <script>
+
+      var opts = {
+        lines: 12,
+        angle: 0.15,
+        lineWidth: 0.44,
+        pointer: {
+          length: 0.9,
+          strokeWidth: 0.035,
+          color: '#000000'
+        },
+        limitMax: 'false',
+        // percentColors: [[0.0, "#a9d70b" ], [0.50, "#a9d70b"], [1.0, "#a9d70b"]], // !!!!
+        strokeColor: '#E0E0E0',
+        generateGradient: true
+      };
+      var target = document.getElementById('angles');
+      var gauge = new Gauge(target).setOptions(opts);
+      gauge.maxValue = 90;
+      gauge.minValue = -90;
+      gauge.animationSpeed = 5;
+      gauge.set(-75);
+    </script>
+  </li>
   <li class="grid_4">
     {% if form %}
     {% if not video_id %}
diff --git a/rowers/views/workoutviews.py b/rowers/views/workoutviews.py
index 1e97d727..48bb5aa2 100644
--- a/rowers/views/workoutviews.py
+++ b/rowers/views/workoutviews.py
@@ -47,7 +47,7 @@ def get_video_id(url):
         raise ValueError
 
 def get_video_data(w):
-    df = getsmallrowdata_db(['time','velo','spm'],ids=[w.id],
+    df = getsmallrowdata_db(['time','velo','spm','catch'],ids=[w.id],
     workstrokesonly=False,doclean=False,compute=False)
     df['time'] = (df['time']-df['time'].min())/1000.
     df.sort_values(by='time',inplace=True)
@@ -63,6 +63,7 @@ def get_video_data(w):
 
     boatspeed = (100*df2['velo']).astype(int)/100.
     spm = (10*df2['spm']).astype(int)/10.
+    catch = (10*df2['catch']).astype(int)/10.
 
     coordinates = dataprep.get_latlon_time(w.id)
 
@@ -83,7 +84,8 @@ def get_video_data(w):
         'boatspeed':[ v for v in boatspeed.values],
         'latitude':[ l for l in latitude.values],
         'longitude':[ l for l in longitude.values],
-        'spm':[ s for s in spm.values ]
+        'spm':[ s for s in spm.values ],
+        'catch': [c for c in catch.values]
         }
 
     maxtime = coordinates['time'].max()