From 41a463cddee48d0c7a250d14de9110ea414c1c5c Mon Sep 17 00:00:00 2001 From: Sander Roosendaal Date: Mon, 2 Dec 2019 16:38:19 +0100 Subject: [PATCH 1/4] working on slider update, not on video play when locked --- rowers/templates/embedded_video.html | 81 ++++++++++++++++------------ 1 file changed, 46 insertions(+), 35 deletions(-) diff --git a/rowers/templates/embedded_video.html b/rowers/templates/embedded_video.html index d03c5e78..8fc5e384 100644 --- a/rowers/templates/embedded_video.html +++ b/rowers/templates/embedded_video.html @@ -157,40 +157,14 @@ if(player && player.getCurrentTime) { videotime = player.getCurrentTime(); var delay = document.getElementById("id_delay").value; - sliderpos = Math.round(videotime) + Math.round(delay); - slider.value = sliderpos; + if (lock.checked) { + sliderpos = Math.round(videotime) + Math.round(delay); + slider.value = sliderpos; + } - var datatime = parseFloat(videotime)+parseFloat(delay); - // velo = boatspeed[Math.round(datatime)]; - lat = latitude[Math.round(datatime)]; - lon = longitude[Math.round(datatime)]; - // strokerate = spm[Math.round(datatime)]; - // 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 }}") - {% endfor %} - document.getElementById("time").innerHTML = Math.round(videotime); - document.getElementById("datatime").innerHTML = Math.round(datatime); - // document.getElementById("speed").innerHTML = velo; - // document.getElementById("spm").innerHTML = strokerate; - // document.getElementById("catch").innerHTML = catchangle; - {% for id, metric in metrics.items %} - document.getElementById("{{ id }}").innerHTML = {{ id }}_now; - document.getElementById("{{ id }}").className = 'bold'; - {% endfor %} - {% for group in metricsgroups %} - try { - set_{{ group }}(); - } catch (e) {} - {% endfor %} // gauge.set(catch_now); - try { - var newLatLng = new L.LatLng(lat, lon); - // console.log(newLatLng); - marker.setLatLng(newLatLng); - } catch (e) {} + } if(videotime !== oldTime) { onProgress(videotime); @@ -221,7 +195,6 @@ playing = true; } } - {% if user.is_authenticated and user == workout.user.user %} @@ -296,7 +269,7 @@ lock.checked = true; output.disabled = true; {% endif %} - + var delay = output.value; // slider var slider = document.getElementById("myRange"); @@ -308,9 +281,11 @@ var output = document.getElementById("id_delay"); try { output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value + delay = Math.round(slider.value)-Math.round(player.getCurrentTime()); } catch(err) { output.value = Math.round(slider.value); + delay = Math.round(slider.value); } // Update the current slider value (each time you drag the slider handle) slider.oninput = function() { @@ -329,10 +304,46 @@ } } } else { - // console.log('changing'); + console.log('changing, not checked'); output.value = this.value-Math.round(player.getCurrentTime()); } - timeupdater = setInterval(updateTime, 1000) + var datatime = this.value + var videotime = Math.round(player.getCurrentTime()); + // + // Setting Data + // velo = boatspeed[Math.round(datatime)]; + lat = latitude[Math.round(datatime)]; + lon = longitude[Math.round(datatime)]; + // strokerate = spm[Math.round(datatime)]; + // 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 }}") + {% endfor %} + + document.getElementById("time").innerHTML = Math.round(videotime); + document.getElementById("datatime").innerHTML = Math.round(datatime); + // document.getElementById("speed").innerHTML = velo; + // document.getElementById("spm").innerHTML = strokerate; + // document.getElementById("catch").innerHTML = catchangle; + {% for id, metric in metrics.items %} + document.getElementById("{{ id }}").innerHTML = {{ id }}_now; + document.getElementById("{{ id }}").className = 'bold'; + {% endfor %} + {% for group in metricsgroups %} + try { + set_{{ group }}(); + } catch (e) {} + {% endfor %} + try { + var newLatLng = new L.LatLng(lat, lon); + // console.log(newLatLng); + marker.setLatLng(newLatLng); + } catch (e) { + console.log('error') + } + console.log('changed all') + timeupdater = setInterval(updateTime, 1000); } output.oninput = function() { From 05d82181751a89b0a51ea1058618a7f4e7ebcb88 Mon Sep 17 00:00:00 2001 From: Sander Roosendaal Date: Mon, 2 Dec 2019 21:19:03 +0100 Subject: [PATCH 2/4] slider updated by video only if lock checked --- rowers/templates/embedded_video.html | 77 +++++++++++++++++++++++++++- 1 file changed, 75 insertions(+), 2 deletions(-) diff --git a/rowers/templates/embedded_video.html b/rowers/templates/embedded_video.html index 8fc5e384..112f4f60 100644 --- a/rowers/templates/embedded_video.html +++ b/rowers/templates/embedded_video.html @@ -179,8 +179,10 @@ var lock = document.getElementById("lock"); videotime = player.getCurrentTime(); var delay = document.getElementById("id_delay").value; - sliderpos = Math.round(videotime) + Math.round(delay); - slider.value = sliderpos; + if (lock.checked) { + sliderpos = Math.round(videotime) + Math.round(delay); + slider.value = sliderpos; + } } function stopVideo() { @@ -350,6 +352,77 @@ slider.value = this.value+Math.round(player.getCurrentTime()); } + // lock delay form field if checkbox checked + lock.oninput = function() { + if (this.checked) { + output.disabled = true; + } else { + output.disabled = false; + } + } + // Update the current slider value (each time the slider is changed) + slider.onchange = function() { + clearInterval(timeupdater) + if (lock.checked) { + if (this.value-output.value > 0) { + player.seekTo(this.value-output.value); + } else { + if (playing) { + player.seekTo(0); + player.playVideo(); + } + else { + player.seekTo(0); + player.pauseVideo(); + } + } + } else { + console.log('changing, not checked'); + output.value = this.value-Math.round(player.getCurrentTime()); + } + var datatime = this.value + var videotime = Math.round(player.getCurrentTime()); + // + // Setting Data + // velo = boatspeed[Math.round(datatime)]; + lat = latitude[Math.round(datatime)]; + lon = longitude[Math.round(datatime)]; + // strokerate = spm[Math.round(datatime)]; + // 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 }}") + {% endfor %} + + document.getElementById("time").innerHTML = Math.round(videotime); + document.getElementById("datatime").innerHTML = Math.round(datatime); + // document.getElementById("speed").innerHTML = velo; + // document.getElementById("spm").innerHTML = strokerate; + // document.getElementById("catch").innerHTML = catchangle; + {% for id, metric in metrics.items %} + document.getElementById("{{ id }}").innerHTML = {{ id }}_now; + document.getElementById("{{ id }}").className = 'bold'; + {% endfor %} + {% for group in metricsgroups %} + try { + set_{{ group }}(); + } catch (e) {} + {% endfor %} + try { + var newLatLng = new L.LatLng(lat, lon); + // console.log(newLatLng); + marker.setLatLng(newLatLng); + } catch (e) { + console.log('error') + } + console.log('changed all') + timeupdater = setInterval(updateTime, 1000); + } + + output.oninput = function() { + slider.value = this.value+Math.round(player.getCurrentTime()); + } + // lock delay form field if checkbox checked lock.oninput = function() { if (this.checked) { From b9fd31d67909d0feabb810fcb0d5c35811edf9ae Mon Sep 17 00:00:00 2001 From: Sander Roosendaal Date: Mon, 2 Dec 2019 21:44:15 +0100 Subject: [PATCH 3/4] goede veranderingen --- rowers/templates/embedded_video.html | 51 ++++++++++++++++++++++++---- 1 file changed, 44 insertions(+), 7 deletions(-) diff --git a/rowers/templates/embedded_video.html b/rowers/templates/embedded_video.html index 112f4f60..a5ce8814 100644 --- a/rowers/templates/embedded_video.html +++ b/rowers/templates/embedded_video.html @@ -160,7 +160,7 @@ if (lock.checked) { sliderpos = Math.round(videotime) + Math.round(delay); slider.value = sliderpos; - } + } // gauge.set(catch_now); @@ -179,10 +179,48 @@ var lock = document.getElementById("lock"); videotime = player.getCurrentTime(); var delay = document.getElementById("id_delay").value; + var output = document.getElementById("id_delay"); + datatime = slider.value; + if (lock.checked) { sliderpos = Math.round(videotime) + Math.round(delay); slider.value = sliderpos; + // Setting Data + // velo = boatspeed[Math.round(datatime)]; + lat = latitude[Math.round(datatime)]; + lon = longitude[Math.round(datatime)]; + // strokerate = spm[Math.round(datatime)]; + // 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 }}") + {% endfor %} + + document.getElementById("time").innerHTML = Math.round(videotime); + document.getElementById("datatime").innerHTML = Math.round(datatime); + // document.getElementById("speed").innerHTML = velo; + // document.getElementById("spm").innerHTML = strokerate; + // document.getElementById("catch").innerHTML = catchangle; + {% for id, metric in metrics.items %} + document.getElementById("{{ id }}").innerHTML = {{ id }}_now; + document.getElementById("{{ id }}").className = 'bold'; + {% endfor %} + {% for group in metricsgroups %} + try { + set_{{ group }}(); + } catch (e) {} + {% endfor %} + try { + var newLatLng = new L.LatLng(lat, lon); + // console.log(newLatLng); + marker.setLatLng(newLatLng); + } catch (e) { + } + + } else { + output.value = Math.round(datatime)-Math.round(videotime); } + } function stopVideo() { @@ -292,9 +330,12 @@ // Update the current slider value (each time you drag the slider handle) slider.oninput = function() { clearInterval(timeupdater) + var datatime = this.value + var videotime = Math.round(player.getCurrentTime()); if (lock.checked) { if (this.value-output.value > 0) { player.seekTo(this.value-output.value); + videotime = this.value-output.value; } else { if (playing) { player.seekTo(0); @@ -306,12 +347,10 @@ } } } else { - console.log('changing, not checked'); + // console.log('changing, not checked'); output.value = this.value-Math.round(player.getCurrentTime()); } - var datatime = this.value - var videotime = Math.round(player.getCurrentTime()); - // + // Setting Data // velo = boatspeed[Math.round(datatime)]; lat = latitude[Math.round(datatime)]; @@ -342,9 +381,7 @@ // console.log(newLatLng); marker.setLatLng(newLatLng); } catch (e) { - console.log('error') } - console.log('changed all') timeupdater = setInterval(updateTime, 1000); } From 8e9e17e2dd14e39f8f917fbaf45fb66d5336f5f3 Mon Sep 17 00:00:00 2001 From: Sander Roosendaal Date: Mon, 2 Dec 2019 21:45:51 +0100 Subject: [PATCH 4/4] delay correct --- rowers/templates/embedded_video.html | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/rowers/templates/embedded_video.html b/rowers/templates/embedded_video.html index a5ce8814..5291edcd 100644 --- a/rowers/templates/embedded_video.html +++ b/rowers/templates/embedded_video.html @@ -319,16 +319,17 @@ document.getElementById("myRange").style.display = "none"; {% endif %} var output = document.getElementById("id_delay"); - try { - output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value - delay = Math.round(slider.value)-Math.round(player.getCurrentTime()); - } - catch(err) { - output.value = Math.round(slider.value); - delay = Math.round(slider.value); - } + // Update the current slider value (each time you drag the slider handle) slider.oninput = function() { + try { + output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value + delay = Math.round(slider.value)-Math.round(player.getCurrentTime()); + } + catch(err) { + output.value = Math.round(slider.value); + delay = Math.round(slider.value); + } clearInterval(timeupdater) var datatime = this.value var videotime = Math.round(player.getCurrentTime());