added boat speed gauge

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 %}