Black Lives Matter. Please consider donating to Black Girls Code today.

Automated Switcher between pages

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

Hi @Huutrewda,

I think you’ll have better luck switching this post to the Dash category,

All the best,
-Jon