Перемещение вертикальной линии на графике в зависимости от прогресса видео - PullRequest
Новая
       12

Перемещение вертикальной линии на графике в зависимости от прогресса видео

0 голосов
/ 25 мая 2019

Я работаю над небольшим приложением Dash, которое показывает средний балл в графике за секунду для видео.Я хочу иметь возможность отображать движущуюся вертикальную линию на графике при воспроизведении видео, т.е. если видео находится на 5-й секунде, линия должна быть на x = 5 и т. Д.

Моя первоначальная идея заключалась в добавлении shapes и обновлять график с помощью JavaScript, но я не очень хорошо знаю и не знаю, как передать значение времени видео в Python / Dash.

Пример приложения без видео: 

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children = [

    html.Div(children = [
        html.Video(
            controls = True,
            id = 'movie_player',
        ),
    ]),
    html.Div(children = [
        dcc.Graph(
            id = 'mean_chart',
            figure = {
                'data': [go.Scatter(
                    x = [0,1,2,3,4,5,6,7,8,9,10],
                    y = [0,1,2,4,5,4,3,5,3,2,1],
                )],
                'layout': go.Layout(
                    xaxis = {
                        'title': 'Second',
                        'type': 'linear',
                    },
                    yaxis = {
                        'title': 'Average score',
                    },
                    shapes = [{
                        'type': 'line',
                        'x0': 3,
                        'y0': -1,
                        'x1': 3,
                        'y1': 6,
                    },]
                ),
            },
        ),
    ]),
])


if __name__ == '__main__':
    app.run_server(debug = True)

Мой графикнаходится в @app.callback в полной версии приложения.

Функция JavaScript, которая, я не уверен, верна, и что с ней делать, то есть, как передать значение в x0 и x1 в shapes: 

var sec;

setInterval(function(){showChart(); }, 100);

function showChart(){
     ytplayer = document.getElementById("movie_player");
     sec = ytplayer.currentTime;
     return sec;
}

Можете ли вы предложить лучший способ сделать это?Возможно ли это без JS или лучше, чем с помощью shapes?

Спасибо!

...