Merge branch 'feature/gauges' into develop

Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3-alpine
+COPY ./requirements.txt ./
+WORKDIR /usr/src/app/
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+EXPOSE 8000
+CMD ["python", "./manage.py", "runserver"]

rowers/metrics.py

@@ -258,7 +258,7 @@ rowingmetrics = (
         'ax_min': 0,
         'ax_max': 30,
         'default': 0,
-        'sigfigs': 0,
+        'sigfigs': 1,
         'mode':'water',
         'type': 'pro',
         'group': 'stroke'}),

rowers/templates/embedded_video.html

@@ -29,6 +29,8 @@
 {% block meta %}
 {% leaflet_js %}
 {% leaflet_css %}
+<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+<script type="text/javascript" src="{% static 'js/videogauges.js' %}"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script>
@@ -252,7 +254,7 @@ function copyText() {
             // catchangle = ctch[Math.round(datatime)];
             {% for id, metric in metrics.items %}
             {{ id }}_now = {{ id }}_values[Math.round(datatime)];
-            // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
+            // console.log(datatime,{{ id }},{{ id }}_now, "{{ metric.name }}")
             {% endfor %}
 
 
@@ -270,7 +272,9 @@ function copyText() {
             {% for group in metricsgroups %}
             try {
               set_{{ group }}();
-            } catch (e) {}
+            } catch (e) {
+              console.log(e);
+            }
             {% endfor %}
             try {
               var newLatLng = new L.LatLng(lat, lon);
@@ -370,13 +374,36 @@ function copyText() {
         </span> {{ metric.unit }}
       </li>
       {% endfor %}
-      {% for group in metricsgroups %}
+      </ul>
-      <li class="grid_2">
+      <ul class="main-content">
-        <canvas id="{{ group }}"></canvas>
+      {% if 'basic' in metricsgroups %}
+      <li class="grid_1">
+        <div id="basic_spm"></div>
       </li>
-      {% endfor %}
+      <li class="grid_1">
+        <div id="basic_boatspeed"></div>
+      </li>
+      {% endif %}
+      {% if 'forcepower' in metricsgroups %}
+      <li class="grid_1">
+        <div id="forcepower_power"></div>
+      </li>
+      {% endif %}
+      {% if 'athlete' in metricsgroups %}
+      <li class="grid_1">
+        <div id="athlete_hr"></div>
+      </li>
+      {% endif %}
+      {% if 'stroke' in metricsgroups %}
+      {% if workout.workouttype == 'water' %}
+      <li class="grid_2" style="height:500px">
+        <div style="width:100%;height:70%;" id="stroke_angles"></div>
+      </li>
+      {% endif %}
+      {% endif %}
       </ul>
     </li>
+
     <li class="grid_2">
       {% if analysis and user.is_authenticated and user == analysis.workout.user.user %}
       <p>
@@ -384,12 +411,88 @@ function copyText() {
       </p>
       {% endif %}
     </li>
+    <li class="grid_2">
+      <p>We're building Gauges to show the video data based on the
+        <a href="https://developers.google.com/chart">Google charts API</a>.
+        You can contribute by developing your own gauge in
+        <a href="https://jsfiddle.net/">JSFiddle</a> like
+        <a href="https://jsfiddle.net/roosendaalsander/5xrez3bu/">this example</a>.
+        Please send us the link to the JSFiddle example by email using the
+        <a href="/rowers/email/">Contact Form</a> and we'll discuss the possibilities
+        with you.
+      </p>
+    </li>
   </ul>
 </form>
 <p>&nbsp;</p>
 
   <script>
     $(document).ready( function() {
+      $(window).load(function() {
+        // initialize data fields
+        console.log('initializing first value of data');
+        {% for id, metric in metrics.items %}
+        {{ id }}_now = {{ id }}_values[0];
+        document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
+        document.getElementById("{{ id }}").className = 'bold';
+        {% endfor %}
+        document.getElementById("time").innerHTML = Math.round(videotime);
+        var slider = document.getElementById("myRange");
+        document.getElementById("datatime").innerHTML = slider.value;
+
+      // gauge settings
+      {% if workout.workouttype != 'water' %}
+        speedoptions.max = 7;
+        speedoptions.redTo = 7;
+        speedoptions.majorTicks = ['0','1','2','3','4','5','6','7'];
+      {% endif %}
+
+      {% if 'basic' in metricsgroups %}
+      spm_now = spm_values[0];
+      boatspeed_now = boatspeed_values[0];
+      set_basic();
+      {% endif %}
+      {% if 'forcepower' in metricsgroups %}
+        poweroptions.max = {{ rower.pw_an|add:100|round100 }};
+        poweroptions.greenFrom = {{ rower.pw_ut2 }};
+        poweroptions.greenTo = {{ rower.pw_at }};
+        poweroptions.yellowFrom = {{ rower.pw_at }};
+        poweroptions.yellowTo = {{ rower.pw_an }};
+        poweroptions.redFrom = {{ rower.pw_an }};
+        poweroptions.redTo = {{ rower.pw_an|add:100|round100 }};
+        poweroptions.majorTicks = {{ rower.pw_an|add:100|round100|majorticks }};
+        {% if workout.workouttype == 'water' %}
+        poweroptions.max = {{ rower.pw_an|waterpower:rower|add:100|round100 }}
+        poweroptions.greenFrom = {{ rower.pw_ut2|waterpower:rower }};
+        poweroptions.greenTo = {{ rower.pw_at|waterpower:rower }};
+        poweroptions.yellowFrom = {{ rower.pw_at|waterpower:rower }};
+        poweroptions.yellowTo = {{ rower.pw_an|waterpower:rower }};
+        poweroptions.redFrom = {{ rower.pw_an|waterpower:rower }};
+        poweroptions.redTo = {{ rower.pw_an|waterpower:rower|add:100|round100 }};
+        poweroptions.majorTicks = {{ rower.pw_an|waterpower:rower|add:100|round100|majorticks }};
+        {% endif %}
+        power_now = power_values[0];
+        set_forcepower();
+      {% endif %}
+      {% if 'athlete' in metricsgroups %}
+      hroptions.max = {{ rower.max|round20 }}
+      hroptions.greenFrom = {{ rower.ut2 }}
+      hroptions.greenTo = {{ rower.at }}
+      hroptions.yellowFrom = {{ rower.at }}
+      hroptions.yellowTo = {{ rower.an }}
+      hroptions.redFrom = {{ rower.an }}
+      hroptions.redTo = {{ rower.max }}
+      hroptions.majorTicks = {{ rower.max|round20|hrmajorticks:rower.rest }}
+      hr_now = hr_values[0];
+      set_athlete();
+      {% endif %}
+      {% if 'stroke' in metricsgroups %}
+      {% if workout.workouttype == 'water' %}
+      anglesoptions.PieStartAngle = 90+catch_now;
+      set_stroke();
+      {% endif %}
+      {% endif %}
+
       // cookie reader
       function createCookie(name,value,days) {
         if (days) {
@@ -496,7 +599,8 @@ function copyText() {
     {% for group in metricsgroups %}
     try {
       set_{{ group }}();
-    } catch (e) {}
+    } catch (e) {
+    }
     {% endfor %}
     try {
       var newLatLng = new L.LatLng(lat, lon);
@@ -563,7 +667,9 @@ function copyText() {
     {% for group in metricsgroups %}
     try {
       set_{{ group }}();
-    } catch (e) {}
+    } catch (e) {
+      console.log(e);
+    }
     {% endfor %}
     try {
       var newLatLng = new L.LatLng(lat, lon);
@@ -691,6 +797,7 @@ dataplay.onclick = function() {
 // }
 
 });
+ });
 </script>
 {% endlanguage %}
 

rowers/templatetags/rowerfilters.py

@@ -121,6 +121,37 @@ def is_coach(rower,rowers):
 
     return True
 
+@register.filter
+def waterpower(x,rower):
+    return int(x*(100-rower.otwslack)/100.)
+
+@register.filter
+def round20(x):
+    return int(20.*(1+int(int(x)/20)))
+
+@register.filter
+def round100(x):
+    return int(100.*(1+int(int(x)/100)))
+
+@register.filter
+def majorticks(maxval):
+    ticks = range(1+int(maxval/100.))
+    newticks =[]
+    for t in ticks:
+        newticks.append(t*100)
+
+    return newticks
+
+@register.filter
+def hrmajorticks(maxval,minval):
+    ticks = range(int((maxval-minval)/20.)-1)
+    newticks =[]
+    for t in ticks:
+        newticks.append(100+t*20)
+
+    print(newticks)
+    return newticks
+
 def strfdeltah(tdelta):
     hours, rest = divmod(tdelta.seconds,3600)
     minutes,seconds = divmod(rest,60)
@@ -762,6 +793,3 @@ def previousworkout(workout,user):
         return encoder.encode_hex(ws[0].id)
     else:
         return 0
-
-        
-

static/js/videogauges.js

@@ -1,60 +1,209 @@
-// var opts = {
+google.charts.load('current', {'packages':['gauge','corechart']});
-//   lines: 12,
+google.charts.setOnLoadCallback(drawSPMChart);
-//   angle: 0.15,
+google.charts.setOnLoadCallback(drawSpeedChart);
-//   lineWidth: 0.44,
+google.charts.setOnLoadCallback(drawPowerChart);
-//   pointer: {
+google.charts.setOnLoadCallback(drawHRChart);
-//     length: 0.9,
+google.charts.setOnLoadCallback(drawStrokeAngleChart);
-//     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 spmdata = [
+  ['Label', 'Value'],
+  ['SPM', 21],
+];
 
+var speeddata = [
+  ['Label', 'Value'],
+  ['V m/s', 0],
+];
 
-var opts = {
+var powerdata = [
-    angle: 0, // The span of the gauge arc
+  ['Label','Value'],
-    lineWidth: 0.2, // The line thickness
+  ['PWR',150],
-    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: 2}, // Greem
-        {strokeStyle: "#0000FF", min: 2, max: 3}, // Blue`
-        {strokeStyle: "#00FFFF", min: 3, max: 4}, // Cyan
-        {strokeStyle: "#FFDD00", min: 4, max: 5}, // Orange
-        {strokeStyle: "#FF0000", min: 5, max: 6}  // Red
-     ],
 
-  };
+var hrdata = [
-  var target = document.getElementById('basic'); // your canvas element
+  ['Label','Value'],
-  var gaugeboatspeed = new Gauge(target).setOptions(opts); // create sexy gauge!
+  ['HR',110],
-  gaugeboatspeed.maxValue = 6; // set max gauge value
+]
-  gaugeboatspeed.setMinValue(0);  // Prefer setter over gauge.minValue = 0
-  gaugeboatspeed.animationSpeed = 10; // 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
+var angledata = [
-  function set_basic() {
+  ['Angle', 'deg'],
-    gaugeboatspeed.set(boatspeed_now);
+  ['slip',    10 ],
+  ['load',      50],
+  ['unload',  50],
+  ['wash', 10],
+  ['recovery',240 ]
+]
+
+var anglesoptions = {
+  title: 'Stroke Angles',
+  legend: 'none',
+  pieHole: 0.5,
+  chartArea: { width: "100%" },
+  pieStartAngle: 35,
+  pieSliceText: 'value',
+  pieSliceTextStyle: {color:'black',fontSize:12},
+  slices: {
+    0: { color: 'lightblue' },
+    1: { color: 'lightgreen' },
+    2: { color: 'yellow'},
+    3: { color: 'orange'},
+    4: { color: 'transparent', textStyle: {color:'transparent'}}
   }
+};
+
+
+var hroptions = {
+  min: 100, max: 200,
+  width: 400, height: 120,
+  greenFrom: 100, greenTo: 135,
+  yellowFrom: 135,yellowTo: 157,
+  redFrom: 157, redTo: 200,
+  minorTicks: 5
+};
+
+
+var spmoptions = {
+  min:0, max: 50,
+  width: 400, height: 120,
+  greenFrom: 20, greenTo: 30,
+  yellowFrom: 30,yellowTo: 40,
+  redFrom: 40, redTo: 50,
+  majorTicks: ['0','10','20','30','40','50'],
+  minorTicks: 10
+};
+
+var speedoptions = {
+  min:0, max: 6,
+  width: 400, height: 120,
+  greenFrom: 2, greenTo: 4,
+  yellowFrom: 4,yellowTo: 5,
+  redFrom: 5, redTo: 6,
+  majorTicks: ['0','1','2','3','4','5','6'],
+  minorTicks: 10
+};
+
+var poweroptions = {
+  min: 0, max: 1000,
+  width: 400, height: 120,
+  greenFrom: 100, greenTo: 200,
+  yellowFrom: 200,yellowTo: 400,
+  redFrom: 400, redTo: 1000,
+  majorTicks: ['0','200','400','600','800','1000'],
+  minorTicks: 5
+};
+
+
+var dataspm = null;
+var dataspeed = null;
+var spmchart = null;
+var speedchart = null;
+var powerchart = null;
+var datapower = null;
+var dataangles = null;
+
+// SPM chart
+function drawSPMChart() {
+  console.log('first draw SPM chart');
+  dataspm = new google.visualization.arrayToDataTable(spmdata);
+
+
+  try {
+  spmchart = new google.visualization.Gauge(document.getElementById('basic_spm'));
+  spmchart.draw(dataspm,spmoptions);
+} catch(err) {
+
+}
+  // spmchart.draw(data, spmoptions);
+
+  // Define set_basic(values) so that gauges can be set by metricsgroups
+
+};
+
+// Speed Chart
+function drawSpeedChart() {
+  dataspeed = new google.visualization.arrayToDataTable(speeddata);
+
+  try {
+  speedchart = new google.visualization.Gauge(document.getElementById('basic_boatspeed'));
+  speedchart.draw(dataspeed,speedoptions);
+} catch(err) {
+
+}
+}
+
+// Power chart
+function drawPowerChart() {
+  datapower = new google.visualization.arrayToDataTable(powerdata);
+  try {
+  powerchart = new google.visualization.Gauge(document.getElementById('forcepower_power'));
+  powerchart.draw(datapower,poweroptions)
+} catch(err) {
+
+}
+
+}
+
+// HR chart
+function drawHRChart() {
+  datahr = new google.visualization.arrayToDataTable(hrdata);
+  try {
+    hrchart = new google.visualization.Gauge(document.getElementById('athlete_hr'));
+    hrchart.draw(datahr,hroptions);
+  } catch(err) {
+    console.log('no hr div');
+  }
+
+}
+
+// Stroke angle chart
+function drawStrokeAngleChart() {
+  dataangles = new google.visualization.arrayToDataTable(angledata);
+  try {
+    angleschart = new google.visualization.PieChart(document.getElementById('stroke_angles'));
+    angleschart.draw(dataangles,anglesoptions);
+  } catch(err) {
+    console.log('no angles div');
+  }
+
+}
+
+function set_basic() {
+  dataspm.setCell(0,1,spm_now);
+  spmchart.draw(dataspm, spmoptions);
+
+  dataspeed.setCell(0,1,boatspeed_now);
+  speedchart.draw(dataspeed,speedoptions);
+}
+
+function set_athlete() {
+  datahr.setCell(0,1,hr_now);
+  try {
+    hrchart.draw(datahr,hroptions);
+  } catch(err) {}
+}
+
+function set_stroke() {
+  var piestartangle = 90+catch_now;
+  var load = Math.max(-catch_now-slip_now+peakforceangle_now);
+  var unload = Math.max(finish_now-wash_now-peakforceangle_now) ;
+  var recovery = Math.max(360+catch_now-finish_now);
+  // console.log('load ',load,'; unload ',unload,'; recovery ',recovery,'; pie start angle ',piestartangle);
+  dataangles.setCell(0,1,slip_now);
+  dataangles.setCell(1,1,load);
+  dataangles.setCell(2,1,unload);
+  dataangles.setCell(3,1,wash_now);
+  dataangles.setCell(4,1,recovery);
+  anglesoptions.pieStartAngle = piestartangle;
+  try {
+    angleschart.draw(dataangles,anglesoptions);
+  } catch(err) {
+    console.log('failed: ',err);
+  }
+}
+
+function set_forcepower() {
+ datapower.setCell(0,1,power_now);
+ try {
+ powerchart.draw(datapower,poweroptions);
+} catch(err) {}
+}