From 98d0c42738fc5bf8bf57b68d41c28c6c6501ea02 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 21 Nov 2019 22:08:12 +0100
Subject: [PATCH] added boat speed gauge

---
 rowers/metrics.py                    |  2 +-
 rowers/templates/embedded_video.html | 37 +++++------------
 rowers/views/workoutviews.py         |  3 ++
 static/js/videogauges.js             | 60 ++++++++++++++++++++++++++++
 4 files changed, 74 insertions(+), 28 deletions(-)
 create mode 100644 static/js/videogauges.js

diff --git a/rowers/metrics.py b/rowers/metrics.py
index 922df018..57d2ba77 100644
--- a/rowers/metrics.py
+++ b/rowers/metrics.py
@@ -155,7 +155,7 @@ rowingmetrics = (
         'verbose_name': 'Drive Length (m)',
         'ax_min': 0,
         'ax_max': 2.5,
-        'mode':'both',
+        'mode':'rower',
         'type': 'pro',
         'group':'stroke'}),
 
diff --git a/rowers/templates/embedded_video.html b/rowers/templates/embedded_video.html
index 98713a07..3830eb43 100644
--- a/rowers/templates/embedded_video.html
+++ b/rowers/templates/embedded_video.html
@@ -174,6 +174,9 @@
           {% for id, metric in metrics.items %}
           document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
           {% endfor %}
+          {% for group in metricsgroups %}
+          set_{{ group }}();
+          {% endfor %}
           // gauge.set(catch_now);
           try {
             var newLatLng = new L.LatLng(lat, lon);
@@ -239,33 +242,11 @@
     </span> {{ metric.unit }}
   </li>
   {% endfor %}
-  <!-- <li class="grid_2">
-    <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> -->
+  {% for group in metricsgroups %}
+  <li class="grid_2">
+    <canvas id="{{ group }}"></canvas>
+  </li>
+  {% endfor %}
 </ul>
 <p>&nbsp;</p>
 <form enctype="multipart/form-data" action="" method="post">
@@ -360,6 +341,8 @@
   }
 });
 </script>
+<script type="text/javascript" src="https://bernii.github.io/gauge.js/dist/gauge.js"></script>
+<script type="text/javascript" src="{% static 'js/videogauges.js' %}"></script>
 {% endlanguage %}
 
 {% endblock %}
diff --git a/rowers/views/workoutviews.py b/rowers/views/workoutviews.py
index af70197a..457c6260 100644
--- a/rowers/views/workoutviews.py
+++ b/rowers/views/workoutviews.py
@@ -138,6 +138,7 @@ def workout_video_view(request,id=''):
 
             ]
 
+
     return render(request,
                   'embedded_video.html',
                   {
@@ -154,6 +155,7 @@ def workout_video_view(request,id=''):
                       'metrics':metrics,
                       'locked': True,
                       'metricsform':metricsform,
+                      'metricsgroups': metricsgroups,
                       })
 
 
@@ -261,6 +263,7 @@ def workout_video_create_view(request,id=0):
                       'breadcrumbs':breadcrumbs,
                       'maxtime':maxtime,
                       'metrics':metrics,
+                      'metricsgroups': metricsgroups,
                       'locked': False,
                       })
 
diff --git a/static/js/videogauges.js b/static/js/videogauges.js
new file mode 100644
index 00000000..20f48ad6
--- /dev/null
+++ b/static/js/videogauges.js
@@ -0,0 +1,60 @@
+// 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);
+
+// https://github.com/bernii/gauge.js/issues/193
+
+
+var opts = {
+    angle: 0, // The span of the gauge arc
+    lineWidth: 0.2, // The line thickness
+    radiusScale: 0.89, // Relative radius
+    pointer: {
+      length: 0.54, // // Relative to gauge radius
+      strokeWidth: 0.053, // The thickness
+      color: '#000000' // Fill color
+    },
+    limitMax: false,     // If false, max value increases automatically if value > maxValue
+    limitMin: false,     // If true, the min value of the gauge will be fixed
+    colorStart: '#6FADCF',   // Colors
+    colorStop: '#8FC0DA',    // just experiment with them
+    strokeColor: '#E0E0E0',  // to see which ones work best for you
+    generateGradient: true,
+    highDpiSupport: true,     // High resolution support
+    staticZones: [
+        {strokeStyle: "#00FF00", min: 0, max: 1}, // Red from 100 to 60
+        {strokeStyle: "#0000FF", min: 1, max: 2}, // Yellow
+        {strokeStyle: "#00FFFF", min: 2, max: 3}, // Green
+        {strokeStyle: "#FFDD00", min: 3, max: 5}, // Yellow
+        {strokeStyle: "#FF0000", min: 5, max: 6}  // Red
+     ],
+
+  };
+  var target = document.getElementById('basic'); // your canvas element
+  var gaugeboatspeed = new Gauge(target).setOptions(opts); // create sexy gauge!
+  gaugeboatspeed.maxValue = 6; // set max gauge value
+  gaugeboatspeed.setMinValue(0);  // Prefer setter over gauge.minValue = 0
+  gaugeboatspeed.animationSpeed = 50; // set animation speed (32 is default value)
+  gaugeboatspeed.set(0); // set actual value
+
+// Define set_basic(values) so that gauges can be set by metricsgroups
+  function set_basic() {
+    gaugeboatspeed.set(boatspeed_now);
+  }