google gauge working

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>
@@ -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);
@@ -372,7 +376,7 @@ function copyText() {
       {% endfor %}
       {% for group in metricsgroups %}
       <li class="grid_2">
-        <canvas id="{{ group }}"></canvas>
+        <div id="{{ group }}"></div>
       </li>
       {% endfor %}
       </ul>
@@ -496,7 +500,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 +568,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);
@@ -692,8 +699,6 @@ dataplay.onclick = function() {
 
 });
 </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 %}

static/js/videogauges.js

@@ -1,60 +1,42 @@
-// 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);
+google.charts.load('current', {'packages':['gauge']});
+google.charts.setOnLoadCallback(drawSPMChart);
 
-// https://github.com/bernii/gauge.js/issues/193
+var spmdata = [
+  ['Label', 'Value'],
+  ['SPM', 21.0],
+
+];
+
+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 data = null;
+var spmchart = null;
+
+// SPM chart
+function drawSPMChart() {
+
+  data = new google.visualization.arrayToDataTable(spmdata);
 
 
-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: 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 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 = 10; // set animation speed (32 is default value)
-  gaugeboatspeed.set(0); // set actual value
+  spmchart = new google.visualization.Gauge(document.getElementById('basic'));
 
-// Define set_basic(values) so that gauges can be set by metricsgroups
-  function set_basic() {
-    gaugeboatspeed.set(boatspeed_now);
-  }
+  // spmchart.draw(data, spmoptions);
+
+  // Define set_basic(values) so that gauges can be set by metricsgroups
+
+};
+
+var spmchart;
+function set_basic() {
+  data.setCell(0,1,spm_now);
+  spmchart.draw(data, spmoptions)
+}