I created a callback to update Gauges and indicators on this layout with the idea of updating the max or the gauges according to parameters that are saved in a JSON file. The callback runs fine until the return line where the output values are updated. at that point the page becomes unresponsive in the web browser. What could I be doing wrong here?
Here’s the layout and callback:
********Live data Layout
“”"
LiveDataLayout = html.Div([
html.Div([
html.H1(
children=‘KUKA Leak Test System’,
id=‘title’
),
], style={‘color’:‘orange’,‘display’: ‘block’}
),
html.Div(
id='leftContent',
children=[
dcc.Link('Parameter Screen', href='/parameters'),
html.Br(),
dcc.Link('Calibrate Supply Pressure', href='/calSP'),
html.Br(),
dcc.Link('Calibrate Back Pressure', href='/calBP'),
html.Br(),
dcc.Link('Test Results', href='/TestResults'),
html.Br(),
dcc.Link('Back to Live Data Screen', href='/LiveData'),
], style={'width': 220, 'box-sizing': 'border-box', 'padding': 10,
'position': 'absolute', 'top': 60, 'left': 15,'background-color':'white','border-style': 'solid', 'border-color': 'light grey','border-radius':'5%'}
),
html.Div(
id='gauge1field',
children=[
daq.Gauge(
id='SuppPressureGauge',
label={'label': 'Supply Pressure', 'style':{'font-size': 'x-large'}},
showCurrentValue=1,
value=90.000,#replace with Supply Pressure varable
color="#00FF00",
size=200,
max=100,#replace 1000 with max Supply Pressure varable * 1.1
style={'float': 'left', 'display': 'block'}
)
], style={'width': 262, 'box-sizing': 'border-box',
'position': 'absolute', 'top': 60, 'left': 330, 'padding-left': 10,'color': 'lightgray','background-color': 'black',
'border-style': 'solid', 'border-color': 'grey', 'border-radius':'10%','display':'block'}
),
html.Div(
id='gauge2field',
children=[
daq.Gauge(
id='testPressureGauge',
label={'label': 'Test Pressure', 'style':{'font-size': 'x-large'}},
showCurrentValue=1,
value=95.000,#replace 0 with Test Pressure varable
color="#00FF00",
size=200,
max=100,#replace 1000 with max Test Pressure varable * 1.1
style={'float': 'left', 'display': 'block'}
)
], style={'width': 262, 'box-sizing': 'border-box',
'position': 'absolute', 'top': 60, 'left': 602, 'padding-left': 10,'color': 'lightgray','background-color': 'black',
'border-style': 'solid', 'border-color': 'grey', 'border-radius':'10%','display':'block'}
),
html.Div(
id='gauge3field',
children=[
daq.Gauge(
id='flowGauge',
label={'label':'Leak Flow','style':{'font-size': 'x-large'}},
showCurrentValue=1,
value=6,
size=200,
max=leakRateMax,#replace 1000 with max Leak Rate varable * 1.1
color="#00FF00",
style={'float': 'left', 'display': 'block'}
)
], style={'width': 262, 'box-sizing': 'border-box',
'position': 'absolute', 'top': 60, 'left': 874, 'padding-left': 10,'color': 'lightgray','background-color': 'black',
'border-style': 'solid', 'border-color': 'grey', 'border-radius':'10%','display':'block'}
),
html.Div(
id='indicatorfield',
children=[
daq.Indicator(
id='TestValveIndicator',
label={'label':'Test Valve Open','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
width=30,
color="#fb6060",
labelPosition='right',
value=False
),
html.Br(),
daq.Indicator(
id='BypassValveIndicator',
label={'label':'Bypass Valve Closed','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
width=30,
color="#fb6060",
labelPosition='right',
value=True
),
html.Br(),
daq.Indicator(
id='VentValveIndicator',
label={'label':'Vent Valve Open','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
width=30,
color="#fb6060",
labelPosition='right',
value=False
#style={'border': '5px solid red','width': 30}
),
html.Br(),
], style={'width': 262, 'box-sizing': 'border-box',
'position': 'absolute', 'top': 385, 'left': 330, 'padding-left': 10,'color': 'lightgray','background-color': 'black',
'border-style': 'solid', 'border-color': 'grey', 'border-radius':'10%','display':'block'}
),
html.Div(
id='spacer',
children=[
html.Br(),
],
style={'width': 30, 'box-sizing': 'border-box',
'float': 'left', 'padding-left': 30,'display':'block'},
),
html.Div(
id='togglefield',
children=[
daq.ToggleSwitch(
id='TestValveToggle',
label={'label':'Open Test Valve','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
color='grey',
labelPosition='right',
value=False
),
html.Div(id='TestValveToggle-output'),
html.Br(),
daq.ToggleSwitch(
id='BypassValveToggle',
label={'label':'Close Bypass Valve','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
color='grey',
labelPosition='right',
value=False
),
html.Div(id='BypassValveToggle-output'),
html.Br(),
daq.ToggleSwitch(
id='VentValveToggle',
label={'label':'Open Vent Valve','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
color='grey',
labelPosition='right',
value=False
),
html.Br(),
html.Div(id='VentValveToggle-output'),
], style={'width': 262, 'box-sizing': 'border-box',
'position': 'absolute', 'top': 385, 'left': 602, 'padding-left': 10,'color': 'lightgray','background-color': 'black',
'border-style': 'solid', 'border-color': 'grey', 'border-radius':'10%','display':'block'}#document.getElementById("element").style.display = "block"; change to 'none' to hide
),
html.Br(),
dcc.Interval(
id='liveUpdateTimer',
interval=5500, # in milliseconds
n_intervals=0,
)
])
“”"
Update the live data when liveUpdateTimer n_intervals ticks
by running the update_live() function.
“”"
@app.callback(
[Output(‘TestValveIndicator’, ‘value’),
Output(‘BypassValveIndicator’, ‘value’),
Output(‘VentValveIndicator’, ‘value’),
Output(‘SuppPressureGauge’,‘value’),
Output(‘testPressureGauge’,‘value’),
Output(‘flowGauge’, ‘value’),
Output(‘SuppPressureGauge’,‘max’),
Output(‘testPressureGauge’,‘max’),
Output(‘flowGauge’, ‘max’)],
[Input(‘liveUpdateTimer’, ‘n_intervals’),
Input(‘TestValveToggle’, ‘value’),
Input(‘BypassValveToggle’, ‘value’),
Input(‘VentValveToggle’, ‘value’)],
[State(‘sWS_ParamConfig’, ‘children’)],
prevent_initial_call = True
)
def update_live(app_intervals,TVtog, BVtog, VVtog, config):
sWS_ParamConfig = json.loads(config)
print(sWS_ParamConfig)
SupPres = float(sWS_ParamConfig['supplyPressure']['lowerLimit']),
TestPres = float(sWS_ParamConfig['supplyPressure']['upperLimit']),
flo = float(sWS_ParamConfig['leakRate']['lowerLimit']),
SupPresMax = float(sWS_ParamConfig['supplyPressure']['upperLimit']),
TestPresMax = float(sWS_ParamConfig['leakRate']['upperLimit']),
floMax = float(sWS_ParamConfig['leakRate']['upperLimit']),
print(floMax)
return TVtog, BVtog, VVtog, SupPres, TestPres, flo, SupPresMax, TestPresMax, floMax