From 465527d2118b1ad3a21828089314aa834373c48c Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Sat, 16 Nov 2019 16:07:18 +0100
Subject: [PATCH] trying to get slider to work

---
 rowers/interactiveplots.py               | 37 +++++++++++++++++--
 rowers/templates/embedded_video_ote.html | 47 ++----------------------
 rowers/views/workoutviews.py             |  6 ++-
 3 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/rowers/interactiveplots.py b/rowers/interactiveplots.py
index 1c1ef0b4..d00c8a53 100644
--- a/rowers/interactiveplots.py
+++ b/rowers/interactiveplots.py
@@ -2806,13 +2806,16 @@ def interactive_streamchart(id=0,promember=0):
 
     return [script,div]
 
-def interactive_chart(id=0,promember=0,intervaldata = {}):
+def interactive_chart(id=0,promember=0,intervaldata = {}, timepos = None):
     # Add hover to this comma-separated string and see what changes
     if (promember==1):
         TOOLS = 'save,pan,box_zoom,wheel_zoom,reset,tap,hover,crosshair'
     else:
         TOOLS = 'pan,box_zoom,wheel_zoom,reset,tap,hover,crosshair'
 
+    if timepos:
+        TOOLS = ''
+
 
     columns = ['time','pace','hr','fpace','ftime','spm']
     datadf = dataprep.getsmallrowdata_db(columns,ids=[id])
@@ -2931,6 +2934,32 @@ def interactive_chart(id=0,promember=0,intervaldata = {}):
                   right='time_r',source=intervalsource,color='mediumvioletred',
                   y_range_name='spmax',fill_alpha=0.2,line_alpha=0.2)
 
+    if timepos:
+        timepos = datetime.timedelta(seconds=timepos)
+        timeline = ColumnDataSource(
+            data=dict(
+                x = [timepos,timepos],
+                y = [10,100]
+            ))
+        plot.line('x','y',source=timeline,y_range_name='spmax')
+
+        callback = CustomJS(args = dict(timeline=timeline),
+                            code="""
+                            var data = timeline.data
+                            var x = data['x']
+                            var y = data['y']
+                            var sliderpos = cb_obj.value
+                            data['x'] = [sliderpos,sliderpos]
+                            timeline.change.emit();
+                            """
+                            )
+        timemax = int(datadf['time'].max()/1000.)
+        slider = Slider(start=0,end=100,step=1.0,callback=callback)
+        slider.js_on_change('value',callback)
+        layout = layoutcolumn([plot,slider])
+    else:
+        layout = plot
+
 
     hover = plot.select(dict(type=HoverTool))
 
@@ -2945,9 +2974,11 @@ def interactive_chart(id=0,promember=0,intervaldata = {}):
     hover.mode = 'mouse'
     hover.names = ["spm","pace"]
 
-    script, div = components(plot)
+    script, div = components(layout)
+    js_resources = INLINE.render_js()
+    css_resources = INLINE.render_css()
 
-    return [script,div]
+    return [script,div,js_resources,css_resources]
 
 def interactive_multiflex(datadf,xparam,yparam,groupby,extratitle='',
                           ploterrorbars=False,
diff --git a/rowers/templates/embedded_video_ote.html b/rowers/templates/embedded_video_ote.html
index 30925742..64ca6a79 100644
--- a/rowers/templates/embedded_video_ote.html
+++ b/rowers/templates/embedded_video_ote.html
@@ -15,46 +15,8 @@
 
 {% block main %}
 
-<style>
-  .slidecontainer {
-    width: 100%; /* Width of the outside container */
-  }
-
-  /* The slider itself */
-  .slider {
-    -webkit-appearance: none;  /* Override default CSS styles */
-    appearance: none;
-    width: 100%; /* Full-width */
-    height: 25px; /* Specified height */
-    background: #d3d3d3; /* Grey background */
-    outline: none; /* Remove outline */
-    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
-    transition: opacity .2s;
-  }
-
-  /* Mouse-over effects */
-  .slider:hover {
-    opacity: 1; /* Fully shown on mouse-over */
-  }
-
-  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
-  .slider::-webkit-slider-thumb {
-    -webkit-appearance: none; /* Override default look */
-    appearance: none;
-    width: 25px; /* Set a specific slider handle width */
-    height: 25px; /* Slider handle height */
-    background: #4CAF50; /* Green background */
-    cursor: pointer; /* Cursor on hover */
-  }
-
-  .slider::-moz-range-thumb {
-    width: 25px; /* Set a specific slider handle width */
-    height: 25px; /* Slider handle height */
-    background: #4CAF50; /* Green background */
-    cursor: pointer; /* Cursor on hover */
-  }
-</style>
+{{ js_res|safe }}
+{{ css_res|safe }}
 
 {% language 'en' %}
 <h1>Video Analysis for {{ workout.name }}</h1>
@@ -75,15 +37,14 @@
       {{ mapdiv | safe}}
 
     </div>
-    <div class="slidecontainer">
-      <input type="range" min="0" max="{{ maxtime }}" value="{{ analysis.delay }}" class="slider" id="myRange">
+    <div id="myRange">
     </div>
   </li>
   <li class="grid_2">
     <div id="player"></div>
     <script src="https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.js"></script>
+    <script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.0.4.min.js"></script>
 
-      
       {{ mapscript | safe }}
 
     <script>
diff --git a/rowers/views/workoutviews.py b/rowers/views/workoutviews.py
index de9b2705..ba4c2054 100644
--- a/rowers/views/workoutviews.py
+++ b/rowers/views/workoutviews.py
@@ -202,8 +202,10 @@ def workout_video_create_view(request,id=0):
     if hascoordinates:
         mapscript, mapdiv = leaflet_chart_video(data['latitude'],data['longitude'],
                                                 w.name)
+        js_res = ''
+        css_res = ''
     else:
-        mapscript, mapdiv = interactive_chart(w.id,promember=1)
+        mapscript, mapdiv,js_res,css_res = interactive_chart(w.id,promember=1,timepos=78)
 
     breadcrumbs = [
             {
@@ -244,6 +246,8 @@ def workout_video_create_view(request,id=0):
                       'maxtime':maxtime,
                       'metrics':metrics,
                       'locked': False,
+                      'js_res': js_res,
+                      'css_res': css_res
                       })
 
 # Show the EMpower Oarlock generated Stroke Profile