working on counter

rowers/templates/embedded_video.html

@@ -99,6 +99,8 @@
       <input type="range" min="0" max="{{ maxtime }}" value="{{ analysis.delay }}"
       id="myRange">
     </div>
+    <div id="dataplay"></div>
+    <div id="datastop"></div>
   </li>
   <li class="grid_2">
     <div id="player"></div>
@@ -304,6 +306,7 @@
   $(document).ready( function() {
   // lock
   var lock = document.getElementById("lock");
+  // lock.onchange nog doen
   var output = document.getElementById("id_delay");
   {% if locked %}
   lock.checked = true;
@@ -468,7 +471,54 @@
     } else {
       output.disabled = false;
     }
+}
+// Slider start stop
+// moet de buttons pas hieronder definieren en dan in de html
+// pluggen
+var timer;
+
+function clock() {
+  timer = setInterval(myClock, 1000);
+  var c = parseInt(slider.value,10);
+  console.log('starting clock');
+
+  function myClock() {
+    document.getElementById("datatime").innerHTML = c;
+    c = c+1;
+    slider.value = c;
+
+    // update data fields
+
+    if (lock.checked) {
+      player.seekTo(c+parseInt(output.value));
+    }
+    if (c == latitude.length) {
+      clearInterval(timer);
+      c = 0;
+    }
   }
+}
+
+// onderstaande alleen als lock.checked
+var dataplay = document.createElement("input");
+dataplay.type = "button";
+dataplay.value = "Play";
+document.getElementById("dataplay").appendChild(dataplay);
+
+var datastop = document.createElement("input");
+datastop.type = "button";
+datastop.value = "Stop";
+document.getElementById("datastop").appendChild(datastop)
+
+dataplay.onclick = function() {
+  clock();
+}
+
+datastop.onclick = function() {
+  console.log('stopping');
+  clearInterval(timer);
+}
+
 });
 </script>
 <script type="text/javascript" src="https://bernii.github.io/gauge.js/dist/gauge.js"></script>