Help component/variable store and incrementing

Dash Python
1

Hello,
I’m having some issues with variable stores. If i try to have multiple inputs or outputs in app.callback, my page/app won’t update properly. Also, I can’t seem to increment my current component_property correctly.

I want to define two variables/components as correct/wrong inputs. This is to have one tracking wrong inputs/answers, one tracking correct inputs/answers.

I’ve tried implementing the ideas in https://dash.plot.ly/dash-core-components/store , but I can’t seem to do it correctly.

How would I commit my component_property ‘n_clicks’ to memory or local so that they increment properly? Also, how can I have two separate output/inputs defined which update/load properly?

Lastly, I can’t seem to find a way to make my index page hide when another page is loaded.

Any help is greatly appreciated!
Thanks!

edit: cleaned up the code a bit

this is my initial attempt

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_daq as daq
import random
import re
import time
import updater
print(dcc.__version__) # 0.6.0 or above is required

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

colors = ["#3cb44b", "#000000", "#FFC0CB", "#FFFF00", "#FF0000", "#4363d8", "#f57231", "#800080", "#a9a9a9", "#9A6324"]
hexcolors = ["Green", "Black", "Pink", "Yellow", "Red", "Blue", "Orange", "Purple", "Grey", "Brown"]

combined = list(zip(colors, hexcolors))
random.shuffle(combined)
colors[:], hexcolors[:] = zip(*combined)
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
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([
	html.H1('Please choose the number of color tests', style={'text-align': 'center'}),
	dcc.Input(id='inputrange', type='number', placeholder="1", min=1, max=20, step=1, style={'align': 'center'}),
	html.Button('Submit', id='button'), 
    html.Div(id='tests-div'),
])

@app.callback(
	Output(component_id='tests-div', component_property='children'),
	[Input(component_id='button', component_property='n_clicks')],
)

def update_output(n_clicks):
	if n_clicks == 1:
		return ((color1))
	if n_clicks == 2:
		return (color2)
	if n_clicks == 3:
		return (color3)
	if n_clicks == 4:
		return (color4)

color1 = html.Div([
	html.H1('color1', style={'text-align': 'center'}),
	html.H1([(hexcolors[1])], style={'text-align': 'center'}),
	html.A(html.Button('', id='button', n_clicks=1, style={'height': '400px','margin-right': '10%', 'width': '40%', 'backgroundColor':colors[0]})), html.A(html.Button('', id='btn-submit5', style={'height': '400px', 'marginLeft': '10%', 'width': '40%','backgroundColor':colors[1]})),
	html.Audio(id='audio', src='http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3', controls=False, autoPlay=False, style={'align': 'center'}),
])

color2 = html.Div([
    html.H1('color2', style={'text-align': 'center'}),
    html.H1([(hexcolors[2])], style={'text-align': 'center'}),
    html.A(html.Button('', id='button', n_clicks=2, style={'height': '400px','margin-right': '10%', 'width': '40%', 'backgroundColor':colors[2]})), html.A(html.Button('', id='btn-submit5', style={'height': '400px', 'marginLeft': '10%', 'width': '40%','backgroundColor':colors[3]})),
    html.Audio(id='audio', src='http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3', controls=False, autoPlay=False, style={'align': 'center'}),
])

color3 = html.Div([
    html.H1('color3', style={'text-align': 'center'}),
    html.H1([(hexcolors[5])], style={'text-align': 'center'}),
    html.A(html.Button('', id='button', n_clicks=3, style={'height': '400px','margin-right': '10%', 'width': '40%', 'backgroundColor':colors[5]})), html.A(html.Button('', id='btn-submit5', style={'height': '400px', 'marginLeft': '10%', 'width': '40%','backgroundColor':colors[4]})),
    html.Audio(id='audio', src='http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3', controls=False, autoPlay=False, style={'align': 'center'}),
])

color4 = html.Div([
    html.H1('color4', style={'text-align': 'center'}),
    html.H1([(hexcolors[8])], style={'text-align': 'center'}),
    html.A(html.Button('', id='button', n_clicks=4, style={'height': '400px','margin-right': '10%', 'width': '40%', 'backgroundColor':colors[8]}), href='/color4'), html.A(html.Button('', id='btn-submit5', style={'height': '400px', 'marginLeft': '10%', 'width': '40%','backgroundColor':colors[7]})),
    html.Audio(id='audio', src='http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3', controls=False, autoPlay=False, style={'align': 'center'}),
])

# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
	if pathname == '/color1':
		return page_1_layout 
	elif pathname == '/color2':
		return color2
	elif pathname == '/color3':
		return color3
	elif pathname == '/color4':
		return color4
	else:
		return index_page


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

this is my attempt at tracking n_clicks

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_daq as daq
import random
import re
import time
import updater
print(dcc.__version__) # 0.6.0 or above is required

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

colors = ["#3cb44b", "#000000", "#FFC0CB", "#FFFF00", "#FF0000", "#4363d8", "#f57231", "#800080", "#a9a9a9", "#9A6324"]
hexcolors = ["Green", "Black", "Pink", "Yellow", "Red", "Blue", "Orange", "Purple", "Grey", "Brown"]

combined = list(zip(colors, hexcolors))
random.shuffle(combined)
colors[:], hexcolors[:] = zip(*combined)
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions = True

app.layout = html.Div([
	dcc.Store(id='memory'),
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])

index_page = html.Div([
	html.H1('Please choose the number of color tests', style={'text-align': 'center'}),
	dcc.Input(id='inputrange', type='number', placeholder="5", min=1, max=20, step=1, style={'align': 'center'}),
	html.Button('Submit', id='memory-button', n_clicks=1,), 
    html.Div(id='tests-div'),
])
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])

def display_page(pathname):
	if pathname == '/color1':
		return page_1_layout 
	elif pathname == '/color2':
		return color2
	elif pathname == '/color3':
		return color3
	elif pathname == '/color4':
		return color4
	elif pathname == '/color5':
		return color5
	else:
		return index_page

color1 = html.Div([
	html.H1('Please choose a color', style={'text-align': 'center'}),
	html.H1([(hexcolors[1])], style={'text-align': 'center'}),
	html.A(html.Button('', id='memory-button', n_clicks=1, style={'height': '400px','margin-right': '10%', 'width': '40%', 'backgroundColor':colors[0]})), html.A(html.Button('', id='button', n_clicks=1, style={'height': '400px', 'marginLeft': '10%', 'width': '40%','backgroundColor':colors[1]})),
	html.Audio(id='audio', src='http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3', controls=False, autoPlay=False, style={'align': 'center'}),
])

color2 = html.Div([
    html.H1('Please choose a color', style={'text-align': 'center'}),
    html.H1([(hexcolors[2])], style={'text-align': 'center'}),
    html.A(html.Button('', id='button', n_clicks=2, style={'height': '400px','margin-right': '10%', 'width': '40%', 'backgroundColor':colors[2]})), html.A(html.Button('', id='button', n_clicks=2, style={'height': '400px', 'marginLeft': '10%', 'width': '40%','backgroundColor':colors[3]})),
    html.Audio(id='audio', src='http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3', controls=False, autoPlay=False, style={'align': 'center'}),
])

color3 = html.Div([
    html.H1('Please choose a color', style={'text-align': 'center'}),
    html.H1([(hexcolors[5])], style={'text-align': 'center'}),
    html.A(html.Button('', id='button', n_clicks=3, style={'height': '400px','margin-right': '10%', 'width': '40%', 'backgroundColor':colors[5]})), html.A(html.Button('', id='button', n_clicks=3, style={'height': '400px', 'marginLeft': '10%', 'width': '40%','backgroundColor':colors[4]})),
    html.Audio(id='audio', src='http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3', controls=False, autoPlay=False, style={'align': 'center'}),
])

color4 = html.Div([
    html.H1('Please choose a color', style={'text-align': 'center'}),
    html.H1([(hexcolors[7])], style={'text-align': 'center'}),
    html.A(html.Button('', id='button', n_clicks=4, style={'height': '400px','margin-right': '10%', 'width': '40%', 'backgroundColor':colors[6]})), html.A(html.Button('', id='button', n_clicks=4, style={'height': '400px', 'marginLeft': '10%', 'width': '40%','backgroundColor':colors[7]})),
    html.Audio(id='audio', src='http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3', controls=False, autoPlay=False, style={'align': 'center'}),
])

color5 = html.Div([
    html.H1('Please choose a color', style={'text-align': 'center'}),
    html.H1([(hexcolors[8])], style={'text-align': 'center'}),
    html.A(html.Button('', id='button', n_clicks=5, style={'height': '400px','margin-right': '10%', 'width': '40%', 'backgroundColor':colors[8]})), html.A(html.Button('', id='button', n_clicks=5, style={'height': '400px', 'marginLeft': '10%', 'width': '40%','backgroundColor':colors[9]})),
    html.Audio(id='audio', src='http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3', controls=False, autoPlay=False, style={'align': 'center'}),
])

# Update the index

			  

		
for store in ('memory', 'local', 'session'):

	@app.callback(Output(store, 'data'),
				[Input('memory-button'.format(store), 'n_clicks')],
				[State(store, 'data')])
	def on_click(n_clicks, data):
		data = data or {'clicks': 0}

		data['clicks'] = data['clicks'] + 1
		return data
		if n_clicks is None:
            # prevent the None callbacks is important with the store component.
            # you don't want to update the store for nothing.
			raise PreventUpdate
		if n_clicks == 1:
			return color2
        # Give a default data dict with 0 clicks if there's no data.

		
	@app.callback(Output('{}-clicks'.format(store), 'children'),
				# Since we use the data prop in an output,
                  # we cannot get the initial data on load with the data prop.
                  # To counter this, you can use the modified_timestamp
                  # as Input and the data as State.
                  # This limitation is due to the initial None callbacks
                  # https://github.com/plotly/dash-renderer/pull/81
				[Input(store, 'modified_timestamp')],
				[State(store, 'data')])
				
	def on_data(ts, data):
		if ts is None:
			raise PreventUpdate

		data = data or {}

		return data.get('clicks', 0)
		

	def update_output(n_clicks):
		if n_clicks == 1:
			return ((color1))
		if n_clicks == 2:
			return (color2)
		if n_clicks == 3:
			return (color3)
		if n_clicks == 4:
			return (color4)
		if n_clicks == 5:
			return (color5)

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