Grid of Buttons

📊 Plotly Python
1

I have created a Grid of Buttons like the following

image

html.Div([
        html.Div([
            html.Button('Button 1', id='b_q0', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 2', id='b_25', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 3', id='b_q50', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 4', id='b_q75', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 5', id='b_q100', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
        ], className='b_row'),
        html.Div([
            html.Button('Button 18', id='b_sq0', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 19', id='b_sq25', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 20', id='b_sq50', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 21', id='b_sq75', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 22', id='b_sq100', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
        ], className='b_srow'),
        html.Div([
            html.Button('Button 7', id='exq0', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 8', id='exq25', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 9', id='exq50', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 10', id='exq75', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 11', id='exq100', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
        ], className='exrow'),
        html.Div([
            html.Button('Button 13', id='exsq0', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 14', id='exsq25', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 15', id='exsq50', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 16', id='exsq75', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
            html.Button('Button 17', id='exsq100', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
        ], className='exsrow'),
        html.Div([
            html.Button('Button 24', id='cancle', n_clicks=0,style = {'background-color': 'black','color': 'white','textAlign': 'center','margin-left' : '15px','margin-top' : '15px','width':'150px'}),
        ], className='cancle_row'),
    ], className='buttons_container')

Can i write a plotly call back routine that updated the label of button after every n intervals , labels are update from the callback interval with the following code

[html.Div([html.Button(id = r+t,children=f"{r}10",n_clicks=0,style={'background-color':'red'}) for t in ['q0','q25','q50','q75','q100']],className=f"{r}_row") for r in ['b','s','ex','exs']]

Also how can i defined function and associate it with the any button i want, that will perform a certain action on click. e.g. function1 is given to button 1, button 2 . function 2 is given to rest of the buttons etc

2

HI @yogi_dhiman take a look into pattern matching callbacks:

2 Likes