def process_pre_video(n_clicks, dic_of_names, clip_1_start, clip_1_end, video_width, text, font, crop_bot, crop_top): if n_clicks is None: raise PreventUpdate if dic_of_names is None: return None if text is None: text = '' clip_1 = mpy.VideoFileClip(dic_of_names[list(dic_of_names)[0]]) clip_1 = clip_1.fx(mpy.vfx.resize, width=video_width) clip_1 = clip_1.subclip(t_start=clip_1_start, t_end=clip_1_end) clip_1 = clip_1.fx(mpy.vfx.crop, y1=crop_top, y2=clip_1.size[1]-crop_bot) txt_clip = mpy.TextClip(text, size=clip_1.size, color='white', bg_color='black', font=font ).set_duration(clip_1.duration) clip_1 = clip_1.set_mask(txt_clip.to_mask()) ffname = Path("downloads") / f'{str(uuid.uuid4())}.mp4' Path.mkdir(ffname.parent, parents=True, exist_ok=True) cvc = mpy.CompositeVideoClip([clip_1], bg_color=(255, 255, 255)) # preview video set to 540 width and 5 fps fn_pre = '.'.join(str(ffname).split('.')[:-1]) + 'preview_.webm' cvc.fx(mpy.vfx.resize, width=540).write_videofile(fn_pre, audio=False, fps=5) # write full deal cvc.write_videofile(str(ffname), audio=False, fps=clip_1.fps) vid = open(fn_pre, 'rb') base64_data = b64encode(vid.read()) base64_string = base64_data.decode('utf-8') return [html.Video(src=f'data:video/webm;base64,{base64_string}', controls=True)], f'/{ffname}', False
def file_download_link(filename): """Create a Plotly Dash 'A' element that downloads a file from the app.""" location = "{}/{}".format(STATIC_VIDEO_URL, filename) return html.Video([ html.Source(src=location, type="video/webm"), html.Source(src=location, type="video/mov"), html.Source(src=location, type="video/mp4") ], controls='controls', width="100%"),
def analyze_video(n, exercise, link, src): print("click") print(link) print(n) if (link != None): all_points, fig, fig1, fig2, anglerange, angleavg, smallestang, angles, perf_angles = read_video_red( link) #fig.show() ##update result video #return fig print(src) figure = dcc.Graph(figure=fig) figure1 = dcc.Graph(figure=fig1) figure2 = dcc.Graph(figure=fig2) currentime = time.ctime() video = html.Center( html.Video(id="resultvid", src="assets/result.mp4?dummy=" + currentime, controls=True)) dataframe = pd.read_csv('UserData.csv') df1 = pd.DataFrame({ "Range": [anglerange], "Avg": [angleavg], "Smallest": [smallestang], "Good": [perf_angles.get("Good")], "Bad": [perf_angles.get("Bad")], "Acceptable": [perf_angles.get("Acceptable")], "Angles": [str(angles)] }) df1.insert(0, 'TimeStamp', pd.datetime.now().replace(microsecond=0)) dataframe = dataframe.append(df1, ignore_index=True) dataframe.to_csv('UserData.csv', index=False) """table = dash_table.DataTable( id='table', style_data={ 'whiteSpace': 'normal', 'height': 'auto', 'lineHeight': '15px' }, style_cell={'maxWidth': '500px', 'textAlign': 'left'}, columns=[{"name": i, "id": i} for i in dataframe.columns], data=dataframe.to_dict('records'), )""" #print (dataframe.index) fig = dcc.Graph(figure=go.Figure( go.Scatter(x=dataframe['TimeStamp'], y=dataframe['Avg'], name='Angles over Time'))) #fig.show() ##return table (converted) return figure, figure1, figure2, video, anglerange + u"\N{DEGREE SIGN}", angleavg + u"\N{DEGREE SIGN}", smallestang + u"\N{DEGREE SIGN}", fig else: print("prevent update called") return dash.no_update
def fun1(ncliks): return [ html.Video(src=url, style={ 'max-width': '50%', 'height': 'auto', 'verticalAlign': 'top' }, controls=True, autoPlay=True, loop=True) for url in gen_video_url_list(video_url_list) ], ' 剩余{}条'.format(len(video_url_list))
def show_OBC_Video(clickData): if clickData != None: #print("Click Processing") print("OBC Video") X = clickData Y = X["points"][0] print(Y) return html.Div([ html.Video(src="/assets/23012020AK.mp4", controls=True, loop=True, autoPlay=True) ])
def popup_100_pics(n_clicks): global img_path_list return_list = [] previous_img_catalog = '〄 ' + 'default'.capitalize() for idx in range(page_capacity): try: img_path = img_path_list.pop(0) current_img_catalog = '〄 ' + img_path.split('/')[-2].capitalize() except IndexError: break if current_img_catalog != previous_img_catalog: return_list.append( html.H1(current_img_catalog, id='img_catalog_' + current_img_catalog, style={"width": "100%"})) previous_img_catalog = current_img_catalog return_list.append( html.Video(src=img_path, muted=True, autoPlay=True, controls=True, loop=True, style={ 'max-height': '380px', 'vertical-align': 'middle' }, id={ 'type': 'pics', 'index': idx }) if os.path.splitext(img_path)[-1].lower() in ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.ts', '.webm'] else html. A(html.Img(src=img_path, style={ 'max-height': '380px', 'vertical-align': 'middle' }, id={ 'type': 'pics', 'index': idx }), href=img_path, target='_blank')) browserd_img_list.append(img_path) if len(img_path_list) == 0: img_path_list = get_img_path_list(img_path_list) remain_count = '还剩{}张'.format(len(img_path_list)) if len([i for i in return_list if isinstance(i, html.H1)]) == 1: return_list.insert( 0, html.H1('Only one category in the page!', id='promotion')) return return_list, remain_count
def _video_elem(title, url, max_height): """Create a video element with title""" if not url: return 'No video found' vid_el = html.Video( src=url, controls=True, loop=True, preload='auto', title=title, style={'max-height': max_height, 'max-width': '100%'}, ) # return html.Div([title, vid_el]) # titles above videos return vid_el
def upload_video(filename, contents, last_modified): if filename: content_type, content_string = contents.split(',') decoded = base64.b64decode(content_string) submit_date = str(datetime.datetime.now().date()) d = datetime.datetime.now().strftime('%m/%d/%Y') filename = filename.replace(" ", '_') path = str('configure/') + current_user.email + str( '/upload/') + submit_date + str('_') + filename if not os.path.exists( str('configure/') + current_user.email + str('/upload/')): os.makedirs( str('configure/') + current_user.email + str('/upload/')) with open(path, "wb") as file: file.write(decoded) encoded_video = base64.b64encode(open(path, 'rb').read()) review_video = html.Div([ html.Video(src='data:image/png;base64,{}'.format( encoded_video.decode()), controls=True, style={ "height": "30rem", "border-bottom": "none", "text-align": "center" }), ]) cap = cv2.VideoCapture(path) if cap.isOpened(): rate = cap.get(5) FrameNumber = cap.get(7) duration = int(FrameNumber / rate) size = round(os.path.getsize(path) / (1024 * 1024), 1) header = html.Div([ html.H4("Berg Balance Scale -- " + str(d) + " Completed"), html.H5(submit_date + '_' + filename + ' | ' + str(duration) + 's | ' + str(size) + 'MB | Last Modified: ' + str( datetime.datetime.fromtimestamp( last_modified).strftime('%m/%d/%Y'))) ]) return review_video, html.Div( ["\u2705", " Your video has been successfully uploaded."]), header else: return "", "", ""
def update_video_player(file): if file is not None: fullfile = f"{APP_DATA_DIR}/{file}" return [ html.H5(f"{Path(fullfile).name}"), html.Video( controls=True, id="movie_player", src=f"/files/{file}", autoPlay=False, style={"width": "100%"}, ), ] else: raise PreventUpdate
def display_images(entity_1, entity_2, entity_3, entity_4, entity_5, entity_6): images = [] list_images = get_images(entity_3, entity_4, entity_5, entity_6) len_list = len(list_images) start = (entity_1 - 1) * entity_2 end = entity_1 * entity_2 list_images = list_images[start:end] for i in range(int(entity_2)): images.append( html.Div([ html.Div([ html.Plaintext(i + 1) ], style={'width': '3%', 'text-align': 'center', 'vertical-align': 'middle', 'display': 'inline-block', 'fontWeight': 'bold', 'text-decoration': 'underline', 'font-family': 'Arial, Helvetica, sans-serif'}), html.Div([ html.Video(src=list_images[i], autoPlay=True, loop=True) ], style={'width': '20%', 'text-align': 'center', 'vertical-align': 'middle', 'display': 'inline-block', 'fontWeight': 'bold', 'text-decoration': 'underline', 'font-family': 'Arial, Helvetica, sans-serif'}) ], style={ #'borderWidth': 'medium', #'borderColor': 'blue', 'borderTop': 'thin lightgrey solid', 'borderLeft': 'thin lightgrey solid', 'borderRight': 'thin lightgrey solid', 'borderBottom': 'thin lightgrey solid', 'backgroundColor': 'rgb(250, 250, 250)', 'padding': '40px 40px', 'border-radius': '15px', 'margin-bottom': ' 5px', }), ) return html.Div(images), [{'label': i, 'value': i} for i in range(1, (int((len_list) / int(entity_2))) + 2)]
def launch_layout(): return html.Div([ html.Div( [ html.Video(src=app.get_asset_url("launch_mesh.mov"), autoPlay=True, loop=True, style={"height":"45rem","border-bottom":"none", "text-align":"center"}) ], style={"text-align":"center"} ), html.Div( [ html.P("© 2020 Powered by The Sinolation Group. ") ], style={"text-align":"center", "font-size":"1rem"} ), html.Div( [ html.Img(src=app.get_asset_url("coeus.png"),style={"height":"2rem"}), html.H1(u"ValueGen Solution",style={"background-color":"transparent","font-size":"5rem","padding-top":"1rem"}), dbc.Card([ dbc.CardBody( [ dbc.Row( [ dbc.Col(dbc.Button("Contract Optimizer", color="light", className="mr-1", href = "/vbc-demo/contract-optimizer/", style={"font-family":"NotoSans-Regular", "font-size":"1rem", "padding":"1rem","border-radius":"1rem","border":"1px solid #ececf6","box-shadow":"0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1)"}), style={"border-radius":"1rem","width":"5rem"}), dbc.Col(dbc.Button("Contract Manager", color="light", className="mr-1", href = "/vbc-demo/contract-manager/", style={"font-family":"NotoSans-Regular", "font-size":"1rem", "padding":"1rem", "padding":"1rem", "border-radius":"1rem","border":"1px solid #ececf6","box-shadow":"0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1)"}), style={"border-radius":"1rem","width":"5rem"}), dbc.Col(dbc.Button("Tele Case Manager", color="light", className="mr-1", href = "/vbc-demo/tele-case-manager/", style={"font-family":"NotoSans-Regular", "font-size":"1rem", "padding":"1rem", "border-radius":"1rem","border":"1px solid #ececf6","box-shadow":"0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1)"}), style={"border-radius":"1rem","width":"5rem"}), ], style={"background-color":"none", "font-family":"NotoSans-Regular", "font-size":"1rem", "border":"none","padding-top":"1rem","padding-bottom":"1rem","padding-left":"16rem","padding-right":"24rem"} ) ] ) ], style={"background-color":"transparent", "border":"none", "width":"1400px", "margin":"auto"} ), ], style={"margin-top":"-32rem","background-color":"transparent","text-align":"center"} ) ], style={"background-color":"#fff","height":"100vh"})
def burn_into_video_button(n_clicks, store_s, selection, video_file_name): if store_s is None or n_clicks == 0: raise PreventUpdate video_file = Path(f"{APP_DATA_DIR}/{video_file_name}") video_subs_file_name = ( f"{Path(video_file_name).stem}_{'_'.join(selection)}_subs.mp4") def select(sb: SubtitleBlock, selection): sb.name_texts = [(n, t) for n, t in sb.name_texts if n in selection] return sb subtitle_blocks = [ select(SubtitleBlock(**d), selection) for d in json.loads(store_s) ] with NamedTemporaryFile(suffix=".ass") as f: create_ass_file( subtitle_blocks, f.name, styles={name: StyleConfig(fontsize=10.0) for name in selection}, ) subprocess.check_output( f"/usr/bin/ffmpeg -y -i '{video_file}' -vf ass={f.name} '{APP_DATA_DIR}/{video_subs_file_name}'", shell=True, ) return [ html.H5(f"{video_subs_file_name}"), html.Video( controls=True, id="movie_player", src=f"/files/{video_subs_file_name}", autoPlay=False, style={"width": "100%"}, ), html.Li( html.A( "download video-file", href=f"/download/{urlquote(video_subs_file_name)}", )), ]
def update_region_dropdown(state_select): df = pd.read_csv("input_data/base_data.csv") df = df.loc[np.unique(np.random.randint(0, df.shape[0], (40)))] for i in df.columns[1:]: df[i] = df[i].apply(lambda x: x.replace(",", "").replace(" ", "")) df[i] = df[i].apply(lambda x: int(x) if len(x) > 0 else 0) df = df.sort_values('Total Cases', ascending=False) traces, layouts = table_creater(df) traces_hori1, layouts_hori2 = horigental_plots(df.iloc[:8, :]) return ([{ 'data': traces, 'layout': layouts }, { 'data': traces_hori1, 'layout': layouts_hori2 }, html.Video(src='/static/2_5_1.webm', controls=True, autoPlay=True, loop=True, width="220%", height='400%')])
def change_spot_content(tab, n): global counter # reset counter to 0 if counter >= 17: counter = 0 if tab == 'a': return html.Video(src='/static/sample_with_count.webm', style=dict(height='350px', width='100%'), loop=True, autoPlay=True) elif tab == 'b': img = "./static/spotb.png" return html.Img( src=img, style=dict(height='350px', width='100%'), ) elif tab == 'c': # img = f"https://www.schwaebisch-gmuend.de/files/upload/webcam/marktplatz1/gmuendcam.jpg?rnd={time.time()}" counter = counter + 1 img = f'./static/img/market/{counter}market_out.jpg' return html.Img( src=img, style=dict(height='350px', width='100%'), ) elif tab == 'd': # img = f"https://www.schwaebisch-gmuend.de/webcam_ropa.php?image=weleda.jpg&rnd={time.time()}" counter = counter + 1 img = f'./static/img/tunnel/{counter}tunnel_out.jpg' return html.Img( src=img, style=dict(height='350px', width='100%'), )
def upload_content2(contents, from_choice, algo, name): if contents is not None and from_choice == "fl": tmp = algo[:-1] if contents[5:10] == 'image': x = len(contents) // (2 * 10**6) if x > 0: x = str(x) + ' min.' else: x = str((len(contents) % (2 * 10**6)) // 33333) + ' s.' return [ html.Img(src=contents, style=demo_style), html.Header( className="align-center", children=html.P('Anonymization of ' + name + ' using the ' + tmp + ' algorithm will take aproximately ' + x)) ] else: x = str(len(contents) // (8 * 10**5)) + ' min.' return [ html.Header( className="align-center", children=[ html.Video(src=contents, style={ 'max-width': '600px', 'width': '80%' }, controls='controls'), html.P('Anonymization of ' + name + ' using the ' + tmp + ' algorithm will take aproximately ' + x) ]) ] else: return []
row = dbc.Row([ dbc.Col(card, width=3), dbc.Col([row_stats, cardfig]), ]) images = html.Div( html.Img(src=app.get_asset_url('img1.jpg'), style={ 'height': '10%', 'width': '45%', 'margin': '3%' })) video = html.Video( src="assets/result.mp4", controls=True) ##center video and fix style, try to put in card modal = html.Div([ dbc.Button("Open modal", id="open"), dbc.Modal( [ dbc.ModalHeader("Guidelines"), dbc.ModalBody(), dbc.ModalFooter( dbc.Button("Close", id="close", className="ml-auto", style="display:none")), ], id="modal",
def patient_collapse_item(assessment_type, Completion_date, result, pid, itemid): cd = datetime.datetime.strptime(Completion_date, '%m/%d/%Y') submit_date = str(cd.date()) if assessment_type == "Self Recording": path = str('../configure/demo-patient/upload/') + submit_date + str('_') file = glob.glob(path +'*.*')[0].replace('\\','/') encoded_video = base64.b64encode(open(file, 'rb').read()) review_video = html.Div( [ html.Video(src='data:image/png;base64,{}'.format(encoded_video.decode()), controls = True, style={"height":"16rem","border-bottom":"none", "text-align":"center"} ), ] ) cap = cv2.VideoCapture(file) if cap.isOpened(): rate = cap.get(5) FrameNumber = cap.get(7) duration = int(FrameNumber/rate) size = round(os.path.getsize(file)/(1024*1024),1) if result == "Start Review": score_div = html.Div( [ html.H2("Physician Assessment", style={"font-size":"0.8rem"}), modal_berg_scale_body(), html.Div(style = {'display':'none'}, id= {"type": "physician-assessment-collapse-score", 'index': str(pid)+'-'+str(itemid)}) ] ) else: score_div = [html.Div(id= {"type": "physician-assessment-collapse-score", 'index': str(pid)+'-'+str(itemid)})] return html.Div( [ dbc.Row( [ dbc.Col(review_video), dbc.Col( [ dbc.Row("Video Uploaded on: " + Completion_date), dbc.Row("Video Length: " + str(duration) + 's'), dbc.Row("Video Size: " + str(size) + 'MB') ], style={"font-size":"0.8rem"} ) ], style={"padding":"16px"} ), html.Hr(), dbc.Row( [ html.Div( [ html.Div(score_div), ] ) ] ), html.Div( dbc.Button("Finish", id= {"type": "physician-assessment-collapse-close", 'index': str(pid)+'-'+str(itemid)}), style={"text-align":"end","padding":"1rem"} ), ], style={"padding-left":"2rem"} ) else: file = str('../configure/demo-patient/kccq_questionarie_' + submit_date + '.json') answer = json.load(open(file), encoding = 'utf-8') pl_score, sf_score, ql_score, sl_score, all_score = cal_kccq_score(answer) current_score = [pl_score, sf_score, ql_score, sl_score, all_score] df=data_process(df_kccq_score,current_score,Completion_date) if result == "Start Review": summary_graph = [ html.Div(all_score, style = {'display':'none'}, id= {"type": "physician-assessment-collapse-score", 'index': str(pid)+'-'+str(itemid)}), html.Div(children=tbl(df),style={"padding":"2rem"}), dcc.Graph(figure=bargraph(df),config={'displayModeBar': False},style={"padding":"2rem"}),] else: summary_graph = [html.Div(id= {"type": "physician-assessment-collapse-score", 'index': str(pid)+'-'+str(itemid)})] return html.Div([ html.H2("KCCQ_12 Questionnaire submitted by " + Completion_date, style={"font-size":"0.8rem"}), html.Hr(), dbc.Row([ dbc.Col("Physical Limitation"), dbc.Col("Symptom Frequency"), dbc.Col("Quality of Life"), dbc.Col("Social Limitation"), dbc.Col("Summary Score"), ],style={"padding-left":"1rem","padding-right":"1rem"}), dbc.Row([ dbc.Col(pl_score,style={"text-align":"text"}), dbc.Col(sf_score,style={"text-align":"text"}), dbc.Col(ql_score,style={"text-align":"text"}), dbc.Col(sl_score,style={"text-align":"text"}), dbc.Col(all_score,style={"text-align":"text"}), ],style={"text-align":"text","padding-left":"1rem","padding-right":"1rem"}), html.Hr(), html.Div(summary_graph, id= {"type": "physician-assessment-graph-kccq-summary", 'index': str(pid)+'-'+str(itemid)}), html.Div( html.Div( modal_kccq_questionaire_body_answer_prior(answer), ), style={"overflow-y":"scroll","height":"80vh","border":"1px solid #000"} ), html.Div( dbc.Button("Finish", id= {"type": "physician-assessment-collapse-close", 'index': str(pid)+'-'+str(itemid)}),style={"text-align":"end","padding":"1rem"} ), ],style={"padding":"1rem", "width":"100%"})
children=[ html.H1(className='display-4 text-white mt-5 mb-2', children='¿Qué es Analy.sis?'), html.P(className='lead mb-5 text-white', children=''' Analys.sis es un proyecto que analiza las intervenciones realizadas en el Parlamento de Andalucía entre 2008 y 2012. La finalidad es saber y poner al alcance de la ciudadanía el tiempo que invierten los parlamentarios en diferentes temas que son de interés para la sociedad. ''') ])))) layout = [ html.Div(id='overlay'), html.Video(id='init-video', autoPlay='autoplay', muted='muted', loop=True, src='assets/media/data_science.mp4'), dbc.Container( className='mt-5', children=[ dbc.Row( className='justify-content-around', children=[ dbc.Col(className='mb-5 bg-white-75 p-4', md=8, children=[ html.H2([ html.I(className='fas fa-search mr-2'), '¿Que encontraré en la web?' ]),
# -*- coding: utf-8 -*- import dash import os import flask import dash_core_components as dcc import dash_html_components as html external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) app.layout = html.Video(src='/data/f.mp4') server = app.server @server.route('/data/<path:path>') def serve_static(path): root_dir = os.getcwd() return flask.send_from_directory(os.path.join(root_dir, 'data'), path) if __name__ == '__main__': app.run_server(debug=True)
print('setting up components') t0 = time.time() components.plot_selection_dropdown.options = container_plot_options components.container_overview_dropdown.options = container_overview_plot_options components.container_overview_iframe.src = app.get_asset_url( 'qc_plots/overview_plots/d_prime_container_overview.html') components.plot_inventory_iframe.src = 'https://dougollerenshaw.github.io/figures_to_share/container_plot_inventory.html' # app.get_asset_url('qc_plots/container_plot_inventory.html') components.data_table.columns = [{ "name": i.replace('_', ' '), "id": i } for i in container_table.columns] components.data_table.data = container_table.to_dict('records') print('done setting up components, it took {} seconds'.format(time.time() - t0)) app.layout = html.Video(src='/static/my-video.webm') server = app.server # APP LAYOUT app.layout = html.Div( [ html.H3('Visual Behavior Data QC Viewer'), # checklist for components to show html.Div([components.show_overview_checklist], style={'display': 'none'}), components.plot_inventory_graph_div, # container level dropdown components.container_overview_dropdown, # frame with container level plots components.container_overview_iframe,
], style={'width': '49%', 'display': 'inline-block', 'padding': '0 20'}), html.Div([ dcc.Graph(id='x-time-series'), dcc.Graph(id='y-time-series'), ], style={'display': 'inline-block', 'width': '49%'}), html.Label('Age of Plant'), html.Div(dcc.Slider( id='crossfilter-day--slider', min=df['Day'].min(), max=df['Day'].max(), value=df['Day'].max(), marks={str(Day): str(Day) for Day in df['Day'].unique()}, step=None ), style={'width': '49%', 'padding': '0px 20px 20px 20px'}), html.Div([html.Video(src='/static/my-video.webm'), html.Button('Start Server', id='btn-nclicks-1', n_clicks=0), html.Button('Start Camera', id='btn-nclicks-2', n_clicks=0), html.Button('Button 3', id='btn-nclicks-3', n_clicks=0), html.Label('PlantName,Indicator Name,Day,Value'), dcc.Input(id='input-1-state', type='text', value='CsvFile'), html.Button(id='submit-button-state', n_clicks=0, children='Submit'), html.Label('-i nameof.file -o nameofnew.file'), dcc.Input(id='input-2-state', type='text', value='ndvifile'), html.Button(id='submit-button-state2', n_clicks=0, children='Submit'), html.Div(id='output-state'), html.Div(id='output2-state')],) ])
html.H1('🏁 Formula 1 History Dashboard 🏁', className='box box_title', style={ 'font-size': '40px', }), #race charts html.Div( [ #drivers html.Div([ html.Video(src='/static/pilot_winners.mp4', controls=False, loop=True, width="100%", height="300", autoPlay=True, muted=True), ], style={'width': '50%'}, className='box box_graph'), #teams html.Div([ html.Video(src='/static/team_winners.mp4', controls=False, loop=True, width="100%", height="300", autoPlay=True,
server = app.server app.config.suppress_callback_exceptions = True ########################## # prediction distribution ########################## global posterior_histogram posterior_histogram = [] layout = html.Div( [ html.Div([ html.Div([ html.Video(id='test-video', preload="auto", autoPlay="autoplay", src='data:video/mp4;base64,{}'.format(encoded_data)) ], id='video-holder-guy', className="col-sm"), ], className="row"), html.Button(id='load-video', n_clicks=0, type="button", children='GetVideo', className="btn btn-primary"), # Hidden div inside the app that stores the intermediate value html.Div(id='current_sample', style={'display': 'none'}) ],
html.Div("Shuttle Bus Dispatch Count - Dummy Data", className="card-header"), html.Div([ dcc.Graph(figure=shutfig), ]), ], # className="card border-primary mb-3" ), ]), dbc.Row([ dbc.Col( html.Div([ html.Div("Bus 91 (High Load) Accumulative Capture", className="card-header"), html.Video(controls=True, autoPlay=True, src='/static/Bus91SDA_Accumulate.mp4'), ], className="card border-primary mb-3")), ]), dbc.Row([ dbc.Col( html.Div([ html.Div("Bus 91 Temporal Capture", className="card-header"), html.Video(controls=True, autoPlay=True, src='/static/Bus91Temporal.mp4'), ], className="card border-primary mb-3")), ]),
]), ]), dcc.Slider( min=0, max=1, marks={ 1: 'Col Map', 0: 'Scatter Plot' }, value=0, id='fig-slider', ), html.Div(children=[ html.Video(controls=True, id='movie_player', src="https://www.w3schools.com/html/mov_bbb.mp4", autoPlay=True, className="center"), ]), dash_table.DataTable( id='table', columns=[{ 'name': i, 'id': i } for i in df.columns], data=df.head(5).to_dict('records'), ) ]) @app.callback(Output('table', 'data'), [Input('scatter', 'clickData')])
was recently improved in Dash v1.16.0 by Community Member [`@jjaraalm`](https://github.com/jjaraalm) in [#1179](https://github.com/plotly/dash/pull/1179). Many thanks `@jjaraalm`!_ **Screenshot** ![The Dash Dev Tools Callback Graph](/assets/images/devtools/callback-graph.png) *** **60 second demo video (no sound)** '''), html.Video(style={'maxWidth': '100%'}, controls=True, children=[ html.Source(src=tools.relpath('/assets/images/devtools/callback-graph.mp4'), type='video/mp4'), html.P([ "Your browser doesn't support HTML5 video. Here is a ", html.A('link to the video', href=tools.relpath('/assets/images/devtools/callback-graph.mp4')), 'instead.' ]) ]), dcc.Markdown(''' The Dash Dev Tools Callback Graph provides **Live Introspection**, **Profiling**, and **Live Debuging** of your callback graph. This includes: - The **rounded green boxes** represent your **callback functions**: - The top number represents the number of times the function has been called - The bottom number represents how long the request took. This includes the network time (sending the data from the browser client to the backend and back) and the compute time (the total time minus the network time or how long the function spent in Python). - Click on a **green box** to see the **detailed view** about the callback. This includes: - `type` - Whether the callback was a [clientside callback](/clientside-callbacks) or a serverside callback.
def modal_self_recording_review_prior(app, filename, score, num): submit_date = filename.split('_')[0] d = submit_date.split('-')[1]+'/'+submit_date.split('-')[2]+'/'+submit_date.split('-')[0] path = str('configure/') + current_user.email +str('/upload/') + filename encoded_video = base64.b64encode(open(path, 'rb').read()) cap = cv2.VideoCapture(path) if cap.isOpened(): rate = cap.get(5) FrameNumber = cap.get(7) duration = int(FrameNumber/rate) size = round(os.path.getsize(path)/(1024*1024),1) return html.Div( [ html.H6("Review", style={"font-size":"0.7rem","padding-top":"10px"}), dbc.Button(children = [html.Img(src=app.get_asset_url("icon-laptop-play-video-100.png"), style={"height":"1.5rem", "padding-top":"0px"})], color="light",style={"border-radius":"10rem"}, id = u'video-modal-review-prior-button-open-{}'.format(num)), dbc.Modal( [ dbc.ModalHeader( html.Div( [ html.H1("Berg Balance Scale",style={"font-size":"1.5rem"}), dbc.Badge(d + " Completed", color="primary", className="mr-1",style={"font-family":"NotoSans-SemiBold","font-size":"1rem"}), html.Div(style={"height":"20px"}), dbc.Row( [ dbc.Col( [ html.H6("File Name : "+ filename), html.H6("Duration : "+ str(duration)+' s'), html.H6("Size : "+ str(size)+' MB'), ] ), # dbc.Col( # html.Div( # [ # dbc.Badge("Total Score: ", color="warning", className="mr-1",style={"font-family":"NotoSans-SemiBold","font-size":"0.8rem"}), # html.H1(score + "/56", style={"font-size":"2rem","color":"#ffc107"}), # ] # ) # ), ], style={"width":"1600px"} ) ], style={"padding-left":"40px","padding-right":"40px","padding-top":"10px","padding-bottom":"10px"} ) ), dbc.ModalBody( html.Div( [ html.Video(src='data:image/png;base64,{}'.format(encoded_video.decode()), controls = True, style={"height":"25rem","border-bottom":"none", "text-align":"center"} ), ], style={"text-align":"center"} ) ), dbc.ModalFooter( dbc.Button("close", id=u"video-modal-review-prior-button-submit-{}".format(num), className="mr-2"), ) ], id = u"modal-selfrecording-review-prior-{}".format(num), size = 'xl', backdrop = "static" ) ] )
"justify-content": "center" }, ), brs, html.Div( [ html.P( [ html.H2("Evolução dos casos acumulados por bairro"), html.H6("(alguns bairros)"), html.H6("Fonte: Prefeitura de Goiânia"), ], className="control_label", ), html.Video(src=app.get_asset_url('bar_race_bairro.mp4'), controls=True, autoPlay=True, height=300), ], className="pretty_container", style={ "display": "flex", "flex-direction": "column", "justify-content": "center" }, ), brs, html.Div( [ html.P( [ html.H2("Evolução dos casos acumulados por região"),
id="bottom", style={ 'width': '49%', 'float': 'left', 'display': 'inline-block' }, children=[ html.H4( children="条形变化图", style={'font-family': 'Microsoft JhengHei'}, ), html.Video( controls=True, style={ 'Align': 'center', }, height="400", width="600", id="histrogram", src="/static/plot3.mp4", ), ], ), html.Div( id="right-bottom", style={ 'width': '49%', 'float': 'right', 'display': 'inline-block' }, children=[ dcc.Graph(
2500: "2500", 2750: "2750", 3019: "3019", }, ), dcc.Graph(id="map"), ], ), ], ), html.Div( className="card", children=[ dcc.Markdown("**Topographic map of rising sea levels**"), html.Video(id="video", src="/static/Earth_Flooding.mp4", controls=True), ], ), ], ) @app.callback( Output("map", "figure"), [Input("sea_level", "value"), Input("rate_slider", "value")], ) def update_map(year, rate): figure = go.Figure()