Input and Output controls

I created a chart to visualize plots from a computation done online. The computation uses some controls (Input) and produces plots.

However I would also like to upload a file containing the calculation parameters and trough this to perform the calculation. Reading from the file, however I need to update the status of the controls tat therefore must also be in Output.

So I am in the condition to have Input values from the controls but, if the reading is from an uploaded file, I need to update the same controls. How can I do ?

So: Case 1)
control x-> Value=45 → Computation(45) → Plot

    Case 2)
          upload a file _>  Read the value of x = 55 - > Update control x with 55 ->  Computation(55) ->  Plot

Control x is Input in the first case but is Output in the second case. I tried to use two different ccallbacks but it does not work because a control cannot be in Input and in output even if coming from different callbacks

I also thought to use querystring to call again the app and use querystring parameters but it seems not the case.

Hi @annunal,

Is not so clear to me your issue.

But: You can have different callback where some elements are Input and others where the same elements are Output, the limitation is to have same element as Input and Output in the same callback, bat also it exist tools to do it, see this link:

In the example below, If I press the first button I use the value of the parameter in the text box Input1. Suppose that this trigger a series of calculations using the value of the textbox.

If I press the second button I will just set the value of the textbox Input1.

What I cannot do is to execute, without changing the value when the text box is changed. I would like to change the text box value, and trigger the callback: if the trigger is the textbox itself, it should just show, as the first button does. If I include Input1 in the Triggers, the system says ‘Same input and output’; which is fine, I will manage it.

import dash_html_components as html
import dash
from dash_extensions.enrich import Output, Dash, Trigger, State, Input
import dash_core_components as dcc

app = Dash(prevent_initial_callbacks=True)
app.layout = html.Div([
    html.Button("Click me to execute", id="btn"), 
    html.Button("Click me to set", id="btn1"),
    dcc.Input(id='input1',value=''),
    html.Div(id="log")
])


@app.callback(Output("log", "children"),Output("input1", "value"), Trigger("btn", "n_clicks"),Trigger("btn1", "n_clicks"),State('input1','value'))
def func(value1): 
    ctx=dash.callback_context
    ctxiD=ctx.triggered[0]['prop_id']
    print(ctx.triggered[0]['prop_id'])
    if ctxiD=='btn1.n_clicks':
        value1=100
        return ' You have set input1 to: '+str(value1),100
    else:
        print('value1=',value1)
        return "You clicked to execute with input1:"+str(value1), value1


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

Hi @annual,

It’s is still confusing to me :woozy_face:

The dcc.Input component allows the user to enter ‘something’ and it could be used for trigger a callback as input (to do your calculations), you don’t need the button and the input label is shown in the input box.

When the second button is clicked, it trigger a second callback where the dcc.Button is the input and one of the output could be the dcc.Input value, there are no conflicts.

    html.Button("Click me to set", id="btn1"),
    dcc.Input(id='input1',value=''),
    html.Div(id="log")

If the user use the dcc.Input

@app.callback(Output("log", "children"),
             [Input("input1", 'value')])
def func(value1):
      calculation = "do what you need"+value1

     return calculation

If the user clicks the button:

@app.callback(Output("log", "children"),
             (Output("input1", 'value'),
             [Input("Click me to set", 'n_clicks')])
def func(click):
      calculation = "do what you need"
      value1 = "something"

     return calculation, value1

Hope it helps :slightly_smiling_face:

Thanks Eduardo, indeed it helped