sander/rowsandall
Private
Public Access
1
0
Fork 0
Code Activity

player Lock function & prep for more metrics

Browse Source
This commit is contained in:
Sander Roosendaal
2019-11-11 21:54:37 +01:00
parent 1c87210a57
commit 87822b4617
2 changed files with 129 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
rowers/templates/embedded_video.html
View File

@@ -59,26 +59,6 @@
{% language 'en' %}
<h1>Video Analysis for {{ workout.name }}</h1>
<ul class="main-content">
<li>
Data Time
<span id="datatime">
</span> seconds
</li>
<li>
Video Time
<span id="time">
</span> seconds
</li>
<li>
SPM
<span id="spm">
</span>
</li>
<li>
Boat Speed
<span id="speed">
</span> m/s
</li>
<li class="grid_2">
<div style="height:100%" id="theplot" class="flexplot mapdiv">
{{ mapdiv | safe}}
@@ -104,13 +84,18 @@
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
var playing;
var videotime = 0;
var data = JSON.parse('{{ data|safe }}');
var boatspeed = data["boatspeed"];
{% for id, metric in metrics.items %}
var {{ id }}_values = data["{{ id }}"];
// console.log("{{ id }}_values",{{ id }}_values);
{% endfor %}
// var boatspeed = data["boatspeed"];
var latitude = data["latitude"];
var longitude = data["longitude"];
var spm = data["spm"];
var ctch = data["catch"];
// var spm = data["spm"];
// var ctch = data["catch"];
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
@@ -118,7 +103,8 @@
width: '640',
videoId: '{{ video_id }}',
events: {
'onReady': onPlayerReady
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
@@ -128,21 +114,34 @@
// event.target.playVideo();
function updateTime() {
var oldTime = videotime;
var slider = document.getElementById("myRange");
var lock = document.getElementById("lock");
if(player && player.getCurrentTime) {
videotime = player.getCurrentTime();
var delay = document.getElementById("myRange").value;
var delay = document.getElementById("id_delay").value;
sliderpos = Math.round(videotime) + Math.round(delay);
slider.value = sliderpos;
var datatime = parseFloat(videotime)+parseFloat(delay);
velo = boatspeed[Math.round(datatime)];
// 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)];
// 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;
gauge.set(catchangle);
// 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;
{% endfor %}
gauge.set(catch_now);
var newLatLng = new L.LatLng(lat, lon);
marker.setLatLng(newLatLng);
}
@@ -155,14 +154,49 @@
// when the time changes, this will be called.
function onProgress(currentTime) {
var slider = document.getElementById("myRange");
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;
}
function stopVideo() {
player.stopVideo();
}
// call this function when player state changes
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
playing = false;
} else {
playing = true;
}
}
</script>
</li>
<li class="grid_4">
<input type="checkbox" name="lock" id="lock" value="Lock">Lock Video
</li>
<li>
Data Time
<span id="datatime">
</span> seconds
</li>
<li>
Video Time
<span id="time">
</span> seconds
</li>
{% for id, metric in metrics.items %}
<li>
{{ metric.name }}
<span id="{{ id }}">
</span> {{ metric.unit }}
</li>
{% endfor %}
<li class="grid">
<canvas id="angles"></canvas>
<script type="text/javascript" src="https://bernii.github.io/gauge.js/dist/gauge.js"></script>
@@ -226,6 +260,13 @@
</li>
</ul>
<script>
// lock
var lock = document.getElementById("lock");
{% if locked %}
lock.checked = true;
{% endif %}
// slider
var slider = document.getElementById("myRange");
{% if analysis and user.is_authenticated and user == rower.user %}
@@ -234,15 +275,44 @@
document.getElementById("myRange").style.display = "none";
{% endif %}
var output = document.getElementById("id_delay");
output.value = slider.value; // Display the default slider value
try {
output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value
}
catch(err) {
output.value = Math.round(slider.value);
}
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.value = this.value;
if (lock.checked) {
if (this.value-output.value > 0) {
player.seekTo(this.value-output.value);
} else {
if (playing) {
player.seekTo(0);
player.startVideo();
}
else {
player.seekTo(0);
player.pauseVideo();
}
}
} else {
console.log('changing');
output.value = this.value-Math.round(player.getCurrentTime());
}
}
output.oninput = function() {
slider.value = this.value;
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;
}
}
</script>
{% endlanguage %}

27
rowers/views/workoutviews.py
View File

@@ -90,7 +90,25 @@ def get_video_data(w):
maxtime = coordinates['time'].max()
return data, mapscript, mapdiv, maxtime
metrics = {
'spm': {
'unit': '',
'metric': 'spm',
'name': 'SPM',
},
'boatspeed': {
'unit': 'm/s',
'metric': 'boatspeed',
'name': 'Boat Speed'
},
'catch': {
'unit': 'degrees',
'metric': 'catch',
'name': 'Catch Angle'
}
}
return data, metrics, mapscript, mapdiv, maxtime
# Show a video compared with data
def workout_video_view(request,id=''):
@@ -141,7 +159,7 @@ def workout_video_view(request,id=''):
form = None
# get data
data, mapscript, mapdiv, maxtime = get_video_data(w)
data, metrics, mapscript, mapdiv, maxtime = get_video_data(w)
breadcrumbs = [
{
@@ -172,6 +190,7 @@ def workout_video_view(request,id=''):
'breadcrumbs':breadcrumbs,
'analysis':analysis,
'maxtime':maxtime,
'metrics':metrics,
})
@@ -221,7 +240,7 @@ def workout_video_create_view(request,id=0):
delay = 0
# get data
data, mapscript, mapdiv, maxtime = get_video_data(w)
data, metrics, mapscript, mapdiv, maxtime = get_video_data(w)
breadcrumbs = [
{
@@ -254,6 +273,8 @@ def workout_video_create_view(request,id=0):
'analysis':analysis,
'breadcrumbs':breadcrumbs,
'maxtime':maxtime,
'metrics':metrics,
'locked': False,
})
# Show the EMpower Oarlock generated Stroke Profile