How to submit inputs with variables?

Dash Python
1

I am trying to submit these inputs in order to update my chart, but I have no idea how can I get it…
It looks like this:

image
image1920×871 52.2 KB

and here is the code. The main problem perhaps lay in callbacks because I am not sure if I properly use the submit button.

Kp = 0.5
Kd = 0.5
Ki = 0.5

x_line = []
for i in range(0, 40):
    x_line.append(i)

obj = PID.PID(Kp, Kd, Ki)
obj.getActualLevel()

graph_list = PID.pid_arr
app = dash.Dash()

app.layout = html.Div(children=[
    html.H1('PID Controller'),
    html.Div([
        html.Div([
            html.Div("Level"),
            dcc.Input(
                type="number",
                min=0, max=1, step=0.1,
                id="level_water"
            ),
        ], style={"display":"flex", "flex-direction":"column", "margin-right":"10px"}),

        html.Div([
            html.Div("Kp"),
            dcc.Input(
                type="number",
                min=0, max=1, step=0.1,
                id="kp_value"
            ),
        ], style={"display":"flex", "flex-direction":"column", "margin-right":"10px"}),

        html.Div([
            html.Div("Kd"),
            dcc.Input(
                type="number",
                min=0, max=1, step=0.1,
                id="kd_value"
            ),
        ], style={"display":"flex", "flex-direction":"column", "margin-right":"10px"}),

        html.Div([
            html.Div("Ki"),
            dcc.Input(
                type="number",
                min=0, max=1, step=0.1,
                id="ki_value"
            ),
        ], style={"display":"flex", "flex-direction":"column", "margin-right":"10px"}),

        html.Div([
            html.Button(id='submit-button-state', children='Submit'),
        ], style={"display":"flex", "flex-direction":"column", "margin-right":"10px", "margin-top":"18px"}),

    ], style={"display":"flex"}),
    dcc.Graph(id='example',
              figure ={
                  'data': [
                      {'x':x_line, 'y':graph_list, 'type':'line', 'name':'boats'}

                  ],
                  'layout':{
                      'title':'Actual level of water'
                  }
              })
    ])

@app.callback(
    Output('example', 'figure'),
    [Input('submit-button-state', 'childen'),
    Input('level_water', 'value'),
     Input('kp_value', 'value'),
     Input('kd_value', 'value'),
     Input('ki_value', 'value')]
)
def update_graph(submit,   ordered_value, kp_value, kd_value, ki_value):
    global set_level
    zadanypoziom = ordered_value
    obj = PID.PID(kp_value, kd_value, ki_value)
    obj.getActualLevel()

    return set_levelc

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