Hi,
I am trying to build a dashboard which can switch automatically between different pages. In the first step I want to activate the function over a simple button on the main page.
The code seems to work except of changing the selected page. Has anyone a better idea for implementation?
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input, Event
import time
def autochange(start, Nmax, href_arr, deltaT):
if start:
i = 0
time.sleep(1)
while i < Nmax:
i = i + 1
n = i%len(href_arr)
print('Change to ' + str(n))
if href_arr[n] == '/page-1':
display_page('/page-1')
time.sleep(deltaT)
elif href_arr[n] == '/page-2':
display_page('/page-2')
time.sleep(deltaT)
else:
display_page('None')
time.sleep(deltaT)
return
app = dash.Dash()
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
index_page = html.Div([
dcc.Link('Go to Page 1', href='/page-1'),
html.Br(),
dcc.Link('Go to Page 2', href='/page-2'),
html.Br(),
html.Div(id='main-button'),
html.Button('Automated Switcher', id='my-button', n_clicks=0),
])
@app.callback(Output('main-button', 'children'),
[Input('my-button', 'n_clicks')])
def on_click(n_clicks):
if n_clicks > 0:
print('Rest')
print(n_clicks)
href_arr = ['/page-1', '/page-2', '/Teste']
autochange(True, 10, href_arr, 3)
page_1_layout = html.Div([
html.H1('Page 1'),
dcc.Dropdown(
id='page-1-dropdown',
options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
value='LA'
),
html.Div(id='page-1-content'),
html.Br(),
dcc.Link('Go to Page 2', href='/page-2'),
html.Br(),
dcc.Link('Go back to home', href='/'),
])
@app.callback(dash.dependencies.Output('page-1-content', 'children'),
[dash.dependencies.Input('page-1-dropdown', 'value')])
def page_1_dropdown(value):
return 'You have selected "{}"'.format(value)
page_2_layout = html.Div([
html.H1('Page 2'),
dcc.RadioItems(
id='page-2-radios',
options=[{'label': i, 'value': i} for i in ['Orange', 'Blue', 'Red']],
value='Orange'
),
html.Div(id='page-2-content'),
html.Br(),
dcc.Link('Go to Page 1', href='/page-1'),
html.Br(),
dcc.Link('Go back to home', href='/')
])
@app.callback(dash.dependencies.Output('page-2-content', 'children'),
[dash.dependencies.Input('page-2-radios', 'value')])
def page_2_radios(value):
return 'You have selected "{}"'.format(value)
# Update the index
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/page-1':
return page_1_layout
elif pathname == '/page-2':
return page_2_layout
else:
return index_page
app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})
if __name__ == '__main__':
app.run_server(debug=True)
Thanks