proof of concept /video

rowers/templates/embedded_video.html

@@ -0,0 +1,108 @@
+{% extends "newbase.html" %}
+{% load staticfiles %}
+{% load rowerfilters %}
+{% load i18n %}
+
+{% block title %}Workout Video{% endblock %}
+
+{% block main %}
+<p>
+  {% if workout|previousworkout:rower.user %}
+  <a href="/rowers/workout/{{ workout|previousworkout:rower.user }}/stats"
+     title="Jump to preceding workout"><em>Previous</em></a>&nbsp;
+  {% endif %}
+  {% if workout|nextworkout:rower.user %}
+  <a href="/rowers/workout/{{ workout|nextworkout:rower.user }}/stats"
+     title="Jump to following workout"><em>Next</em></a>
+  {% endif %}
+</p>
+
+{% language 'en' %}
+<h1>Workout Video for {{ workout.name }}</h1>
+<ul class="main-content">
+  <li class="grid_4">
+    <p>
+      This page will contain an embedded video
+    </p>
+  </li>
+  <li>
+    Video Time
+    <span id="time">
+    </span> seconds
+  </li>
+  <li>
+    Boat Speed
+    <span id="speed">
+    </span> m/s
+  </li>
+  <li class="grid_4">
+    <div id="player"></div>
+
+    <script>
+      // 2. This code loads the IFrame Player API code asynchronously.
+      var tag = document.createElement('script');
+
+      tag.src = "https://www.youtube.com/iframe_api";
+      var firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+      // 3. This function creates an <iframe> (and YouTube player)
+      //    after the API code downloads.
+      var player;
+      var videotime = 0;
+      var boatspeed = [{% for s in boatspeed %}{{ s|floatformat:4 }},{% endfor %}];
+
+      function onYouTubeIframeAPIReady() {
+        player = new YT.Player('player', {
+          height: '390',
+          width: '640',
+          videoId: '9dLFC2q9RWc',
+          events: {
+            'onReady': onPlayerReady
+          }
+        });
+      }
+
+      // 4. The API will call this function when the video player is ready.
+      function onPlayerReady(event) {
+        event.target.playVideo();
+        function updateTime() {
+          var oldTime = videotime;
+          if(player && player.getCurrentTime) {
+            videotime = player.getCurrentTime();
+            velo = boatspeed[Math.round(videotime)];
+
+            console.log(Math.round(videotime),velo);
+            document.getElementById("time").innerHTML = Math.round(videotime);
+            document.getElementById("speed").innerHTML = velo;
+          }
+          if(videotime !== oldTime) {
+            onProgress(videotime);
+          }
+        }
+        timeupdater = setInterval(updateTime, 1000);
+      }
+
+      // when the time changes, this will be called.
+      function onProgress(currentTime) {
+        if(currentTime > 20) {
+          console.log("the video reached 20 seconds!");
+        }
+      }
+
+      function stopVideo() {
+        player.stopVideo();
+      }
+
+    </script>
+  </li>
+
+
+</ul>
+{% endlanguage %}
+
+{% endblock %}
+
+{% block sidebar %}
+{% include 'menu_workout.html' %}
+{% endblock %}

rowers/urls.py

@@ -104,7 +104,6 @@ def permissiondenied_view(request):
 
 
 def filenotfound_view(request):
-    print('aapje')
     return rowers.views.error403_view(request)
 
 def response_error_handler(request, exception=None):
@@ -344,6 +343,7 @@ urlpatterns = [
     re_path(r'^workout/(?P<id>\b[0-9A-Fa-f]+\b)/split/$',views.workout_split_view,name='workout_split_view'),
 #    re_path(r'^workout/(?P<id>\d+)/interactiveplot/$',views.workout_biginteractive_view),
     re_path(r'^workout/(?P<id>\b[0-9A-Fa-f]+\b)/view/$',views.workout_view,name='workout_view'),
+    re_path(r'^workout/(?P<id>\b[0-9A-Fa-f]+\b)/video/$',views.workout_video_view,name='workout_video_view'),
 #    re_path(r'^workout/(?P<id>\d+)/$',views.workout_view,name='workout_view'),
     re_path(r'^workout/(?P<id>\b[0-9A-Fa-f]+\b)/$',views.workout_view,name='workout_view'),
     re_path(r'^workout/fusion/(?P<id1>\b[0-9A-Fa-f]+\b)/(?P<id2>\b[0-9A-Fa-f]+\b)/$',views.workout_fusion_view,name='workout_fusion_view'),

rowers/views/workoutviews.py

@@ -6,6 +6,27 @@ from __future__ import unicode_literals
 from rowers.views.statements import *
 import rowers.teams as teams
 
+# Show a video compared with data
+@user_passes_test(ispromember,login_url="/rowers/paidplans/",
+                  message="This functionality requires a Pro plan or higher",
+                  redirect_field_name=None)
+def workout_video_view(request,id=0):
+    w = get_workout_permitted(request.user,id)
+    df = getsmallrowdata_db(['time','velo'],ids=[w.id])
+    df2 = pd.DataFrame({'time':[0]})
+    df.sort_values(by='time',inplace=True)
+    df.set_index(pd.to_timedelta(df['time'],unit='s'),inplace=True)
+    df2 = df.resample('1s').mean().interpolate()
+    boatspeed = df2['velo']
+
+    return render(request,
+                  'embedded_video.html',
+                  {
+                      'workout':w,
+                      'rower':request.user.rower,
+                      'boatspeed': boatspeed.values,
+                      })
+
 # Show the EMpower Oarlock generated Stroke Profile
 @user_passes_test(ispromember,login_url="/rowers/paidplans/",
                   message="This functionality requires a Pro plan or higher",