app = dash.Dash(__name__)
server = app.server
app.scripts.config.serve_locally = True
app.layout = html.Div([
html.Div(style={
'width': '40%',
'float': 'left',
'margin': '0% 5% 1% 5%'
},
children=[
dash_player.DashPlayer(
id='video-player',
url='http://media.w3.org/2010/05/bunny/movie.mp4',
controls=True,
width='100%'),
html.Div(id='div-current-time', style={'margin': '10px 0px'}),
html.Div(id='div-method-output', style={'margin':
'10px 0px'}),
dcc.Markdown(
dedent('''
### Video Examples
* mp4: http://media.w3.org/2010/05/bunny/movie.mp4
* mp3: https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp3
* webm: https://media.w3.org/2010/05/sintel/trailer.webm
* ogv: http://media.w3.org/2010/05/bunny/movie.ogv
* Youtube: https://www.youtube.com/watch?v=sea2K4AuPOk
'''))
]),
html.H6("Select a junction to view footage."),
html.Div(
style={
"width": "100%",
"paddingBottom": "56.25%",
"position": "relative",
},
children=player.DashPlayer(
id="video-display",
style={
"position": "absolute",
"width": "100%",
"height": "100%",
"top": "0",
"left": "0",
"bottom": "0",
"right": "0",
},
controls=True,
playing=False,
volume=1,
width="100%",
height="100%",
),
)
],
),
html.Div(
className="control-section",
children=[
html.Div(
'label': '000094.mp4',
'value': '000094'
},
{
'label': '000099.mp4',
'value': '000099'
},
{
'label': '000149.mp4',
'value': '000149'
},
],
value='000099'),
dash_player.DashPlayer(id='video-player',
url="http://localhost:8080/mov/0or1/000099.mp4",
controls=True,
width='100%',
height='100%'),
dcc.Graph(
id="graph",
figure={
"data": [
go.Scatter(y=y_0["000099"],
mode="lines",
name="手前の選手：出力値",
marker={"color": "rgb(252,141,89)"}),
go.Scatter(y=y_1["000099"],
mode="lines",
name="奥の選手：出力値",
marker={"color": 'rgb(145,191,219)'}),
go.Scatter(
"will be displayed in accordance to the current video-playing time."
),
html.Button("Learn More",
id="learn-more-button",
n_clicks=0),
],
),
html.Div(
className="video-outer-container",
children=html.Div(
className="video-container",
children=player.DashPlayer(
id="video-display",
url=
"https://www.youtube.com/watch?v=gPtn6hD7o8g",
controls=True,
playing=False,
volume=1,
width="100%",
height="100%",
),
),
),
html.Div(
className="control-section",
children=[
html.Div(
className="control-element",
children=[
html.Div(children=[
"Minimum Confidence Threshold:"
]),
className='video-outer-container',
children=html.Div(
style={
'width': '100%',
'paddingBottom': '56.25%',
'position': 'relative'
},
children=player.DashPlayer(
id='video-display',
style={
'position': 'absolute',
'width': '100%',
'height': '100%',
'top': '0',
'left': '0',
'bottom': '0',
'right': '0'
},
url=
'https://www.youtube.com/watch?v=gPtn6hD7o8g',
controls=True,
playing=False,
volume=1,
width='100%',
height='100%'))),
html.Div(
className='control-section',
children=[
html.Div(
className='control-element',
children=[
html.Div(
def display_value(mode_chosen):
df = pd.read_csv(DATA_PATH.joinpath(modes_dict[mode_chosen]))
rounded = np.round(df)
fig = make_subplots(rows=2,
cols=2,
subplot_titles=("x1 graph", "x2 graph", "y1 graph",
"y2 graph"))
#find optimal and delete it from data frame
optimal = df.tail(1)
x1_optimal = optimal['x1'].tolist()[0]
y1_optimal = optimal['y1'].tolist()[0]
x2_optimal = optimal['x2'].tolist()[0]
y2_optimal = optimal['y2'].tolist()[0]
df = df.head(-1)
#find all par for graphs
time = df['computer_time'].tolist()
start_time = time[0]
time = [i - start_time for i in time]
x1 = df['x1'].tolist()
x1 = [i + x1_optimal for i in x1]
y1 = df['y1'].tolist()
y1 = [i - y1_optimal for i in y1]
x2 = df['x2'].tolist()
x2 = [i + x2_optimal for i in x2]
y2 = df['y2'].tolist()
y2 = [i - y2_optimal for i in y2]
# Add traces
fig.add_trace(go.Scatter(x=time, y=x1), row=1, col=1)
fig.add_trace(go.Scatter(x=time, y=y1), row=2, col=1)
fig.add_trace(go.Scatter(x=time, y=x2), row=1, col=2)
fig.add_trace(go.Scatter(x=time, y=y2), row=2, col=2)
# Update xaxis properties
fig.update_xaxes(title_text="time", row=1, col=1)
fig.update_xaxes(title_text="time", row=2, col=1)
fig.update_xaxes(title_text="time", row=1, col=2)
fig.update_xaxes(title_text="time", row=2, col=2)
# # Update yaxis properties
fig.update_yaxes(title_text="x1", row=1, col=1, range=[-90, 90])
fig.update_yaxes(title_text="y1", row=2, col=1, range=[-90, 90])
fig.update_yaxes(title_text="x2", row=1, col=2, range=[-90, 90])
fig.update_yaxes(title_text="y2", row=2, col=2, range=[-90, 90])
# Update title and height
fig.update_layout(title_text="Posture position", height=500, width=600)
video = player.DashPlayer(
id="video-display",
url=videos_dict[mode_chosen],
controls=True,
playing=False,
volume=1,
width="600px",
height="450px",
)
return fig, video
]),
html.Div(className='video-outer-container',
children=html.Div(style={
'width': '100%',
'paddingBottom': '56.25%',
'position': 'relative'
},
children=player.DashPlayer(
id='video-display',
style={
'position': 'absolute',
'width': '100%',
'height': '100%',
'top': '0',
'left': '0',
'bottom': '0',
'right': '0'
},
url="static/1.mp4",
controls=True,
playing=False,
volume=1,
width='100%',
height='100%',
playbackRate=int(args.PLAYBACK_RATE)))),
])
# Data Loading
@app.server.before_first_request
def load_all():
'''
########### Initiate the app
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.title = tabtitle
def stylemarg(a):
return {'margin-bottom': '20px', 'backgroundColor': a}
app.layout = html.Div([
html.Div([
dash_player.DashPlayer(
id='video-player',
playing=True,
url='/static/ezgifcom-gif-maker_2bmSsLcp_dxTU.mp4',
controls=False),
dcc.Dropdown(id='drop',
style={
'border-radius': '10px',
'width': '200px',
'margin-bottom': '20px',
'position': 'relative',
},
options=[{
'label':
'COOKIE',
'value':
'/static/ezgifcom-gif-maker_2bmSsLcp_dxTU.mp4'
}, {
html.Button("Search",
id="Search-button",
style={
"margin-top": "15%",
"margin-left": "10%",
}),
],
className="pretty_container",
),
html.Div(
id="video-container",
children=[
dash_player.DashPlayer(
id='video-player',
url=VIDEO_PATH,
controls=True,
# playing=True,
width=520,
height=300,
),
],
className="pretty_container",
),
],
className="five columns",
),
html.Div(
[
dcc.Graph(id="magnitude_graph",
style={
"width": "100%",
"position": "relative",
n_intervals=0,
max_intervals=-1,
disabled=True),
html.Div([dcc.Graph(id='my-Gauge', figure=fig1)],
style={'display': 'inline-block'}),
html.Div([dcc.Graph(id='my-Gauge1', figure=fig2)],
style={'display': 'inline-block'}),
html.Div(style={
'width': '40%',
'float': 'left',
'margin': '0% 5% 1% 5%'
},
children=[
dash_player.DashPlayer(id='video-player',
url=video_path,
controls=False,
width='100%',
loop=True)
]),
html.Div(style={
'width': '30%',
'float': 'left'
},
children=[
dcc.Checklist(id='radio-bool-props',
options=[{
'label': 'Play',
'value': 'playing'
}, {
'label': 'mute',
'value': 'muted'
block=True),
html.A(
dbc.Button("Download",
n_clicks=0,
color="info",
outline=True,
block=True),
download="annotations.csv",
id="download",
),
]
video = dbc.Card([
dbc.CardBody(
dash_player.DashPlayer(id="video",
width="100%",
height="auto",
controls=True))
])
graph_detection = dbc.Card([
dbc.CardBody(
dcc.Graph(
id="graph-detection",
config={"modeBarButtonsToAdd": ["drawrect"]},
style={"height": "calc(50vh - 100px)"},
))
])
record_table = dbc.Card(
dash_table.DataTable(
id="record-table",
Row([
Column(width=4, children=[
html.P("Start Frame:"),
html.Label("0",id='sequence-startframe')
]),
Column(width=4, children=[]),
Column(width=4, children=[
html.P("End Frame:"),
html.Label("0",id='sequence-endframe')
])
]),
]),
html.P("Sequence Output"),
html.Div([ dash_player.DashPlayer(
id='sequence-output',
url='static/result.mp4',
controls=True,
style={"height": "70vh"}) ]),
# Inpainting Video
html.Hr(),
Row([
Column(width=2,children=[
html.Button("Run Inpaint", id='button-inpaint', n_clicks=0),
dcc.Loading(id='loading-inpaint-bobble',
type='circle',
children=html.Div(id='loading-inpaint'))
]),
Column(width=2,children=[]), # place holder
Row([
Column(width=4, children=[
html.Button("需要帮助", id="help-button", n_clicks=0),
html.Div(dcc.Input(id='input-box', type='text')),
html.Button('Submit', id='button'),
html.Div(id='output-container-button',
children='输入需要修改的子目录并按下按钮')
],
),
html.Div(
className="video-outer-container",
children=html.Div(
className="video-container",
children=player.DashPlayer(
id="video-display",
url="",
loop=True,
controls=True,
playing=True,
volume=1,
width="100%",
height="100%",
),
),
),
html.Div(
className="control-section",
children=[
html.Div(
className="control-element",
children=[
html.Div(children=["偏移情况:"]),
dcc.RadioItems(
id="shift",
import numpy as np
import time as t
labels = ['steady', 'forward_tilt', 'side_tilt', 'forward_rotation']
values = [390, 161, 97, 52]
# pull is given as a fraction of the pie radius
fig = go.Figure(
data=[go.Pie(labels=labels, values=values, pull=[0.2, 0, 0, 0])])
video = player.DashPlayer(
id="main_video.mp4",
url='https://youtu.be/k6cO7OQNGAA',
controls=True,
playing=False,
volume=1,
width="650px",
height="500px",
)
layout = html.Div([
html.H1('strYa', style={
"textAlign": "center",
"color": "#8A2BE2"
}),
html.Div([
html.Div(dcc.Graph(id='graphs_timeline', figure=fig),
style={
'display': 'inline-block',
'width': '49%'
)
]),
html.Div(className='video-outer-container',
children=html.Div(style={
'width': '100%',
'paddingBottom': '56.25%',
'position': 'relative'
},
children=player.DashPlayer(
id='video-display',
style={
'position': 'absolute',
'width': '100%',
'height': '100%',
'top': '0',
'left': '0',
'bottom': '0',
'right': '0'
},
controls=True,
playing=False,
volume=1,
width='100%',
height='100%'))),
html.Div(
className='control-section',
children=[
html.Div(
className='control-element',
children=[
html.Div(
children=["Минимальная точность:"],
"yellow": [200, 250],
"red": [250, 300]
}
},
max=300,
min=150,
)
],
style={
'display': 'inline-block',
'background-color': '#F4F2F1'
}),
html.H1(id='my-output'),
html.Center([
dash_player.DashPlayer(id='video-player',
url=video_path,
controls=True),
])
]))
'''@app.callback(Output('my-output','children'),
[Input('my-graph','figure')])
def outwsr(fig):
if fig['layout']['updatemenus'][0]['active']==0:
#fig['layout']['updatemenus'][0]['active']=0
return "RAm"
else:
#fig['layout']['updatemenus'][0]['active']=1
return "Abs"
#return fig
'''
app = dash.Dash(__name__)
server = app.server
app.scripts.config.serve_locally = True
app.layout = html.Div([
html.Div(style={
'width': '40%',
'float': 'left',
'margin': '0% 5% 1% 5%'
},
children=[
dash_player.DashPlayer(
id='video-player',
url='static/AtemiBebiBebiBabyBabys0f24HRlH4.mkv',
controls=True,
width='100%'),
html.Div(id='div-current-time', style={'margin': '10px 0px'}),
html.Div(id='div-method-output', style={'margin':
'10px 0px'}),
]),
html.Div(
style={
'width': '30%',
'float': 'left'
},
children=[
dcc.Input(id='input-url',
value='static/AtemiBebiBebiBabyBabys0f24HRlH4.mkv'),
html.Button('Change URL', id='button-update-url'),
import plotly.graph_objects as go
import plotly.express as px
from datetime import datetime as dt
import json
import numpy as np
import pandas as pd
import dash_player as player
###############################################################
#Creaton of the youtube video.
#################################################################
video = html.Div([
html.Div(children=player.DashPlayer(
id='video_player',
url='https://youtu.be/ddT0cy2hlxw',
controls=True,
playing=False,
width='750px',
height='500px',
))
])
###############################################################
#Creaton of the first markdown video.
#################################################################
dropdownvideo = dcc.Dropdown(
id='demo-dropdown',
options=[{
'label': 'Asakusa Kaminarimon Gate',
'value': 'Asakusa_Kaminarimon_Gate_1_mall.mp4'
}, {
