def generate_main_layout(
theme='light',
src_type='Voltage',
mode_val='Single measure',
fig=None,
):
"""generate the layout of the app"""
source_label, measure_label = get_source_labels(src_type)
source_unit, measure_unit = get_source_units(src_type)
# As the trigger-measure btn will have its n_clicks reset by the reloading
# of the layout we need to reset this one as well
local_vars.reset_n_clicks()
# Doesn't clear the data of the graph
if fig is None:
data = []
else:
data = fig['data']
html_layout = [
html.Div(
id="page-body-content",
className='row',
children=[
html.Div(
id='figure-card',
className='six columns',
style={'backgroundColor': card_color[theme]},
children=
[
html.P("IV Curve"),
dcc.Graph(
id='IV_graph',
style={'width': '100%'},
figure={
'data': data,
'layout': dict(
paper_bgcolor=card_color[theme],
plot_bgcolor=card_color[theme],
automargin=True,
font=dict(
color=text_color[theme],
size=12,
),
xaxis={
'color': grid_color[theme],
'gridcolor': grid_color[theme]
},
yaxis={
'color': grid_color[theme],
'gridcolor': grid_color[theme]
}
)
}
)
]
),
html.Div(
id='control-container',
className='five columns',
children=[
html.Div(
# controls and options for the IV tracer
id="up-control-card",
style={'backgroundColor': card_color[theme],
'color': text_color[theme]},
children=[
html.Div(
id="control-sections",
children=[
html.Div(
className='IV-source-options',
children=[
html.Label("Sourcing",
title='Choose whether you want to source voltage '
'and measure current, or source current and measure voltage'),
daq.ToggleSwitch(
id='source-choice-toggle',
label=['Voltage', 'Current'],
style={'width': '150px', 'margin': 'auto'},
value=False
)
],
),
html.Div(
className='measure-options',
children=[
html.Label('Measure mode',
title='Choose if you want to do single measurement'
' or to start a sweep mode'),
daq.ToggleSwitch(
id="mode-choice-toggle",
label=['Single measure', 'Sweep'],
style={'width': '150px', 'margin': 'auto'},
value=False
)
]
)]),
daq.StopButton(
id='clear-graph_btn',
buttonText='Clear Graph',
className='daq-button',
size=120
),
daq.Indicator(
id='clear-graph_ind',
color=accent_color[theme],
value=False
)
]
),
html.Div(
id='mid-control-card',
style={'backgroundColor': card_color[theme],
'color': text_color[theme],
'marginTop': '10px'},
children=[
# Sourcing controls
html.Div(
id='source-div',
children=[
# To perform single measures adjusting the source with a knob
html.Div(
id='single_div',
style=single_div_toggle_style,
children=[
daq.Knob(
id='source-knob',
size=100,
value=0.00,
min=0,
max=10,
color=accent_color[theme],
label='%s (%s)' % (
source_label,
source_unit
)
),
daq.LEDDisplay(
id="source-knob-display",
label='Knob readout',
value=0.00,
color=accent_color[theme]
)
]
),
# To perform automatic sweeps of the source
html.Div(
id='sweep_div',
style=sweep_div_toggle_style,
children=[
html.Div(
className='sweep-div-row',
children=[
html.Div(
className='sweep-div-row',
style={'width': '98%'},
children=[
html.Div(
id='sweep-title',
children=html.P(
"%s sweep" % source_label
)),
html.Div(
[
daq.Indicator(
id='sweep-status',
label='Sweep active',
color=accent_color[theme],
value=False
)
],
title='Indicates if the sweep is running'
)
]
)
]
),
html.Div(
className='sweep-div-row',
children=[
html.Div(
className='sweep-div-row-inner',
children=
[
'Start',
daq.PrecisionInput(
id='sweep-start',
precision=4,
label=' %s' % source_unit,
labelPosition='right',
value=0,
),
],
title='The lowest value of the sweep'
),
html.Div(
className='sweep-div-row-inner',
children=[
'Stop',
daq.PrecisionInput(
id='sweep-stop',
precision=4,
label=' %s' % source_unit,
labelPosition='right',
value=10
)
],
title='The highest value of the sweep'
)]),
html.Div(
className='sweep-div-row',
children=[
html.Div(
className='sweep-div-row-inner',
children=[
'Step',
daq.PrecisionInput(
id='sweep-step',
precision=4,
label=' %s' % source_unit,
labelPosition='right',
value=0.2
)
],
title='The increment of the sweep'
),
html.Div(
className='sweep-div-row-inner',
children=[
'Time of a step',
daq.NumericInput(
id='sweep-dt',
value=0.2,
min=0.01,
style={'color': text_color[theme]}
),
's'
],
title='The time spent on each increment'
)
]
)
]
)]),
# Measure button and indicator
html.Div(
id='trigger-div',
children=[
daq.StopButton(
id='trigger-measure_btn',
buttonText='Single measure',
className='daq-button',
size=120,
),
daq.Indicator(
id='measure-triggered',
color=accent_color[theme],
value=False,
label='Measure active'
),
]
)]),
html.Div(
id="bottom-card",
style={'backgroundColor': card_color[theme],
'color': text_color[theme],
'marginTop': '10px'},
children=[
# Display the sourced and measured values
html.Div(
id='measure-div',
children=[
daq.LEDDisplay(
id="source-display",
label='Applied %s (%s)' % (
source_label,
source_unit
),
value=0.00,
color=accent_color[theme]
),
daq.LEDDisplay(
id="measure-display",
label='Measured %s (%s)' % (
measure_label,
measure_unit
),
value=0.0000,
color=accent_color[theme]
)
]
)
]
)
]
)
]
)
]
if theme == 'dark':
return daq.DarkThemeProvider(children=html_layout)
if theme == 'light':
return html_layout
"370": "F#",
"349": "F",
"330": "E",
"311": "D#",
"294": "D",
"277": "C#",
"261": "C",
}
},
),
daq.StopButton(
id="stop-beep",
buttonText="Beep",
style={
"display": "flex",
"justify-content": "center",
"align-items": "center",
"paddingBottom": "19.5%",
},
n_clicks=0,
size=100,
),
]),
],
style={
"border": "1px solid #2a3f5f",
"border-radius": "5px",
"paddingBottom": "5%",
},
)
]),
],
StopButton = html.Div(children=[
html.H1('Stop Button Examples and Reference'),
html.Hr(),
html.H3('Default Stop Button'),
dcc.Markdown("An example of a default stop button without \
any extra properties."),
dcc.Markdown(examples['stop-button'][0], style=styles.code_container),
html.Div(examples['stop-button'][1],
className='example-container',
style={'overflow-x': 'initial'}),
html.Hr(),
html.H3('Label'),
dcc.Markdown(
"Set the label and label position with `label` and `labelPosition`."),
ComponentBlock('''import dash_daq as daq
daq.StopButton(
label='Label',
labelPosition='top'
)''',
style=styles.code_container),
html.Hr(),
html.H3('Size'),
dcc.Markdown(
"Adjust the size (width in pixels) of the stop button with `size`."),
ComponentBlock('''import dash_daq as daq
daq.StopButton(
size=120,
)''',
style=styles.code_container),
html.Hr(),
html.H3('Button Text'),
dcc.Markdown("Set the text displayed in the button `buttonText`."),
ComponentBlock('''import dash_daq as daq
daq.StopButton(
buttonText='text',
)''',
style=styles.code_container),
html.Hr(),
html.H3('Disabled'),
dcc.Markdown("Disable the button by setting `disabled=True`."),
ComponentBlock('''import dash_daq as daq
daq.StopButton(
disabled=True,
)''',
style=styles.code_container),
html.Hr(),
html.H3("Stop Button Properties"),
generate_prop_info('StopButton', lib=daq)
])
def generate_main_layout(theme='light',
src_type='V',
mode_val='single',
fig=None,
sourcemeter=iv_generator):
"""generate the layout of the app"""
source_label, measure_label = get_source_labels(src_type)
source_unit, measure_unit = get_source_units(src_type)
source_max = get_source_max(src_type)
if mode_val == 'single':
single_style = {
'display': 'flex',
'flex-direction': 'column',
'alignItems': 'center'
}
sweep_style = {'display': 'none'}
label_btn = 'Single measure'
else:
single_style = {'display': 'none'}
sweep_style = {
'display': 'flex',
'flex-direction': 'column',
'alignItems': 'center'
}
label_btn = 'Start sweep'
# As the trigger-measure btn will have its n_clicks reset by the reloading
# of the layout we need to reset this one as well
local_vars.reset_n_clicks()
# Doesn't clear the data of the graph
if fig is None:
data = []
else:
data = fig['data']
html_layout = [
html.Div(
className='row',
children=[
# graph to trace out the result(s) of the measurement(s)
html.Div(id='IV_graph_div',
className="eight columns",
children=[
dcc.Graph(id='IV_graph',
figure={
'data':
data,
'layout':
dict(paper_bgcolor=bkg_color[theme],
plot_bgcolor=bkg_color[theme],
font=dict(
color=text_color[theme],
size=15,
),
xaxis={
'color': grid_color[theme],
'gridcolor':
grid_color[theme]
},
yaxis={
'color': grid_color[theme],
'gridcolor':
grid_color[theme]
})
})
]),
# controls and options for the IV tracer
html.Div(
className="two columns",
id='IV-options_div',
children=[
html.H4(
'Sourcing',
title='Choose whether you want to source voltage '
'and measure current or source current and '
'measure voltage'),
dcc.RadioItems(id='source-choice',
options=[{
'label': 'Voltage',
'value': 'V'
}, {
'label': 'Current',
'value': 'I'
}],
value=src_type),
html.Br(),
html.H4(
'Measure mode',
title='Choose if you want to do single measurement'
' or to start a sweep'),
dcc.RadioItems(id='mode-choice',
options=[{
'label': 'Single measure',
'value': 'single'
}, {
'label': 'Sweep',
'value': 'sweep'
}],
value=mode_val),
html.Br(),
html.Div(daq.StopButton(id='clear-graph_btn',
buttonText='Clear graph',
size=150),
style={
'alignItems': 'center',
'display': 'flex',
'flex-direction': 'row'
}),
html.Br(),
daq.Indicator(id='clear-graph_ind',
value=False,
style={'display': 'none'})
]),
# controls for the connexion to the instrument
html.Div(
id='instr_controls',
children=[
html.H4(sourcemeter.instr_user_name, ),
# A button to turn the instrument on or off
html.Div(children=[
html.Div(id='power_button_div',
children=daq.PowerButton(
id='power_button', on='false')),
html.Br(),
html.Div(children=daq.Indicator(
id='mock_indicator',
value=sourcemeter.mock_mode,
label='is mock?'),
style={'margin': '20px'},
title='If the indicator is on, it means '
'the instrument is in mock mode')
],
style=h_style),
# An input to choose the COM/GPIB port
dcc.Input(id='instr_port_input',
placeholder='Enter port name...',
type='text',
value=''),
html.Br(),
# A button which will initiate the connexion
daq.StopButton(id='instr_port_button',
buttonText='Connect',
disabled=True),
html.Br(),
html.Div(id='instr_status_div',
children="",
style={'margin': '10 px'})
],
style={
'display': 'flex',
'flex-direction': 'column',
'alignItems': 'center',
'justifyContent': 'space-between',
'border': '2px solid #C8D4E3',
'background': '#f2f5fa'
})
]),
html.Div(
id='measure_controls_div',
className='row',
children=[
# Sourcing controls
html.Div(
id='source-div',
className="three columns",
children=[
# To perform single measures adjusting the source with
# a knob
html.Div(id='single_div',
children=[
daq.Knob(id='source-knob',
value=0.00,
min=0,
max=source_max,
label='%s (%s)' %
(source_label, source_unit)),
daq.LEDDisplay(id="source-knob-display",
label='Knob readout',
value=0.00)
],
style=single_style),
# To perfom automatic sweeps of the source
html.Div(
id='sweep_div',
children=[
html.Div(
id='sweep-title',
children=html.H4("%s sweep:" %
source_label)),
html.Div(
[
'Start',
html.Br(),
daq.PrecisionInput(
id='sweep-start',
precision=4,
min=0,
max=source_max,
label=' %s' % source_unit,
labelPosition='right',
value=1,
style={'margin': '5px'}),
],
title='The lowest value of the sweep',
style=h_style),
html.Div(
[
'Stop',
daq.PrecisionInput(
id='sweep-stop',
precision=4,
min=0,
max=source_max,
label=' %s' % source_unit,
labelPosition='right',
value=9,
style={'margin': '5px'})
],
title='The highest value of the sweep',
style=h_style),
html.Div([
'Step',
daq.PrecisionInput(
id='sweep-step',
precision=4,
min=0,
max=source_max,
label=' %s' % source_unit,
labelPosition='right',
value=source_max / 20.,
style={'margin': '5px'})
],
title='The increment of the sweep',
style=h_style),
html.Div(
[
'Time of a step',
daq.NumericInput(
id='sweep-dt',
value=0.5,
min=0.1,
style={'margin': '5px'}), 's'
],
title='The time spent on each increment',
style=h_style),
html.Div(
[
daq.Indicator(id='sweep-status',
label='Sweep active',
value=False)
],
title='Indicates if the sweep is running',
style=h_style)
],
style=sweep_style)
]),
# measure button and indicator
html.Div(id='trigger_div',
className="two columns",
children=[
daq.StopButton(id='trigger-measure_btn',
buttonText=label_btn,
size=150),
daq.Indicator(id='measure-triggered',
value=False,
label='Measure active'),
]),
# Display the sourced and measured values
html.Div(id='measure_div',
className="five columns",
children=[
daq.LEDDisplay(id="source-display",
label='Applied %s (%s)' %
(source_label, source_unit),
value="0.0000"),
daq.LEDDisplay(id="measure-display",
label='Measured %s (%s)' %
(measure_label, measure_unit),
value="0.0000")
])
],
style={
'width': '100%',
'flexDirection': 'column',
'alignItems': 'center',
'justifyContent': 'space-between'
}),
html.Div(children=[
html.Div(children=dcc.Markdown('''
**What is this app about?**
This is an app to show the graphic elements of Dash DAQ used to create an
interface for an IV curve tracer using a Keithley 2400 SourceMeter. This mock
demo does not actually connect to a physical instrument the values displayed
are generated from an IV curve model for demonstration purposes.
**How to use the app**
First choose if you want to source (apply) current or voltage, using the radio
item located on the right of the graph area. Then choose if you want to operate
in a single measurement mode or in a sweep mode.
***Single measurement mode***
Adjust the value of the source with the knob at the bottom of the graph area
and click on the `SINGLE MEASURE` button, the measured value will be displayed.
Repetition of this procedure for different source values will reveal the full
IV curve.
***Sweep mode***
Set the sweep parameters `start`, `stop` and `step` as well as the time
spent on each step, then click on the button `START SWEEP`, the result of the
sweep will be displayed on the graph.
The data is never erased unless the button `CLEAR GRAPH is pressed` or if the
source type is changed.
You can purchase the Dash DAQ components at [
dashdaq.io](https://www.dashdaq.io/)
'''),
style={
'max-width': '600px',
'margin': '15px auto 300 px auto',
'padding': '40px',
'alignItems': 'left',
'box-shadow': '10px 10px 5px rgba(0, 0, 0, 0.2)',
'border': '1px solid #DFE8F3',
'color': text_color[theme],
'background': bkg_color[theme]
})
])
]
if theme == 'dark':
return daq.DarkThemeProvider(children=html_layout)
elif theme == 'light':
return html_layout
daq.Knob(id='stepper-knob',
value=1,
max=200,
min=0),
daq.Slider('step-slider',
min=1,
max=100,
value=1,
handleLabel={
"showCurrentValue":
True,
"label": "VALUE"
},
step=1),
daq.StopButton(buttonText='CW',
id='step_cw',
label='Default',
n_clicks=0),
daq.StopButton(buttonText='CCW',
id='step_ccw',
label='Default',
n_clicks=0),
])
],
style={
'display': 'block',
'margin-left': 'calc(50% - 110px)'
},
),
html.Div([],
id='value-container',
style={'display': 'none'}),
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H2('Race Setup'),
dcc.Upload(id='upload-data',
children=html.Div(
['Drag and Drop or ',
html.A('Select Files')]),
style={
'width': '80%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
multiple=True),
# connect usb
html.Div(id='output-data-upload'),
html.H2('Track Setup'),
html.H3('Connect to Track'),
daq.StopButton(id='connect-button', buttonText='Connect'),
html.Div(id='connect-results'),
# default settings
dcc.Markdown(children=tab1markdown_text),
html.Button(id='setup-button'),
html.H3(id='laneset-results'),
html.H3(id='placeset-results'),
html.H3(id='decimal-results'),
html.H3(id='timeout-results'),
])
elif tab == 'tab-2':
return html.Div(children=[
dcc.Interval(
id='interval-component',
interval=10 * 1000, # in milliseconds
n_intervals=0),
html.Div(
id='main_cols',
children=[
html.Div(
id='race',
children=[
daq.NumericInput(id='my-daq-numericinput',
max=60,
value=1,
label='Race Number',
labelPosition='top',
min=1),
daq.ToggleSwitch(
id='edit', label='Editable', value=False),
html.Div(
id='lanes',
children=[
html.H3('Lanes'),
html.Div(
id='lane1',
children=[
html.H3('Lane 1'),
html.Div([
daq.LEDDisplay(
id='time1',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000")
]),
html.Div([
html.H5(id='car1'),
html.H6(id='name1'),
])
],
className="three columns"),
html.Div(
id='lane2',
children=[
html.H3('Lane 2'),
html.Div([
daq.LEDDisplay(
id='time2',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"),
html.Div([
html.H5(id='car2'),
html.H6(id='name2'),
]),
])
],
className="two columns"),
html.Div(
id='lane3',
children=[
html.H3('Lane 3'),
html.Div([
daq.LEDDisplay(
id='time3',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000")
]),
html.Div([
html.H5(id='car3'),
html.H6(id='name3'),
]),
],
className="two columns"),
html.Div(
id='lane4',
children=[
html.H3('Lane 4'),
html.Div([
daq.LEDDisplay(
id='time4',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"),
html.Div([
html.H5(id='car4'),
html.H6(id='name4'),
]),
])
],
className="two columns"),
],
className="twelve columns"),
html.Hr(id='line'),
html.H4('Upcoming Races',
className="eight column"),
html.Div(id='next-race')
],
style={
'font-size': '200%',
'margin': '80px',
'text-align': 'center'
},
className="eight columns")
]),
# second column
html.Div(children=[
daq.StopButton(id='button-results', buttonText='Get Results'),
html.Div(id='results-button-output'),
daq.StopButton(id='button-save', buttonText='Save Results'),
html.Div(id='save-button-output'),
#daq.StopButton(buttonText='Refresh leaderboard', id='Refresh'),
html.H4('Fastest Single Race'),
#generate_table(results_df, max_rows=15)
#dash_table.DataTable(
# id='leadtable',
# columns=[{"name": i, "id": i} for i in resultsdf.columns],
#data=resultsdf.to_dict('records')
# ),
])
])
elif tab == 'tab-3':
#global results_df
rf = resultsdf.groupby(['den', 'car', 'name'], as_index=False).agg({
"time":
"mean"
}).sort_values(['den', 'time'], ascending=True)
#rf['time'] = rf['time'].map('{:,.3f}'.format)
return dash_table.DataTable(
id='final-board',
columns=[{
"name": i,
"id": i
} for i in rf.columns],
#columns=[['name','car','time']],
data=rf.to_dict('records'),
style_data_conditional=[{
'if': {
'row_index': 'odd'
},
'backgroundColor': 'rgb(248, 248, 248)'
}, {
'if': {
'column_id': 'time'
},
'backgroundColor': '#3D9970',
'color': 'white',
}],
style_as_list_view=True,
)
),
dcc.Input(id='location-text',
type='text',
value='',
style={
"display": "flex",
"justify-content": "center",
"align-items": "center",
'display': 'inline-block',
"width": "60%",
}),
daq.StopButton(
id="submit-button",
buttonText="Find",
style={
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "100%",
},
),
html.H3(id='output-submit',
style={
"textAlign": "center",
"width": "100%",
"align-items": "flex-start",
"color": "#DC143C"
}),
get_title("Latitude"),
html.H4(
id='output-latitude',
style={
max=10,
value=4,
id='darktheme-daq-numericinput',
className='dark-theme-control'),
html.Br(),
daq.PowerButton(on=True,
color=theme['primary'],
id='darktheme-daq-powerbutton',
className='dark-theme-control'),
html.Br(),
daq.PrecisionInput(precision=4,
value=299792458,
id='darktheme-daq-precisioninput',
className='dark-theme-control'),
html.Br(),
daq.StopButton(id='darktheme-daq-stopbutton',
className='dark-theme-control'),
html.Br(),
daq.Slider(min=0,
max=100,
value=30,
targets={"25": {
"label": "TARGET"
}},
color=theme['primary'],
id='darktheme-daq-slider',
className='dark-theme-control'),
html.Br(),
daq.Tank(min=0,
max=10,
value=5,
id='darktheme-daq-tank',
def ResetView():
return daq.StopButton(
id='reset-view-button',
buttonText='Reset View',
n_clicks=0
)
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H2('Race Setup'),
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop or ',
html.A('Select Files')
]),
style={
'width': '80%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
multiple=True
),
# connect usb
html.Div(id='output-data-upload'),
html.H2('Track Setup'),
html.H3('Connect to Track'),
daq.StopButton(id='connect-button', buttonText='Connect'),
html.Div(id='connect-results'),
# default settings
dcc.Markdown(children='tab1markdown_text'),
html.Button(id='setup-button'),
html.H3(id='laneset-results'),
html.H3(id='placeset-results'),
html.H3(id='decimal-results'),
html.H3(id='timeout-results'),
])
elif tab == 'tab-2':
return html.Div(children=[
dcc.Interval(
id='interval-component',
interval=10*1000, # in milliseconds
n_intervals=0
),
html.Div(id='main_cols',children=[
html.Div(id='race', children=[
daq.NumericInput(
id='my-daq-numericinput',
max=60,
value=1,
label='Race Number',
labelPosition='top',
min=1),
html.Div(id='lanes', children=[
html.H3('Lanes'),
html.Div(id='lane1', children=[
html.H3('Lane 1'),
html.Div([
html.H5(id='car1'),
html.H4(id='name1'),
]),
html.Div([
daq.LEDDisplay(
id='time1',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"
)
])
]),
html.Div(id='lane2', children=[
html.H3('Lane 2'),
html.Div([
html.H5(id='car2'),
html.H4(id='name2'),
]),
html.Div([
daq.LEDDisplay(
id='time2',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"
)
])
]),
html.Div(id='lane3', children=[
html.H3('Lane 3'),
html.Div([
html.H5(id='car3'),
html.H4(id='name3'),
]),
html.Div([
daq.LEDDisplay(
id='time3',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"
)
])
]),
html.Div(id='lane4', children=[
html.H3('Lane 4'),
html.Div([
html.H5(id='car4'),
html.H4(id='name4'),
]),
html.Div([
daq.LEDDisplay(
id='time4',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"
)
])
]),
]),
daq.StopButton(id='button-results', buttonText='Get Results'),
html.Div(id='results-button-output'),
daq.StopButton(id='button-save', buttonText='Save Results'),
html.Div(id='save-button-output'),
daq.StopButton(buttonText='Refresh leaderboard', id='Refresh'),
html.H4('Upcoming Races', className="eight column"),
html.Div(id='next-race')],
style={'font-size': '200%', 'margin': '80px' , 'text-align': 'center'},
className="eight columns")],
# second column
html.Div(children=[
html.H4('Fastest Single Race'),
html.Div(id='leader-board',
className="three columns",
style={'font-size': '150%','border': 'solid'})
])
)
])
elif tab == 'tab-3':
return html.Div(children=[
gen_tab3() # each tab reloads the csv file
])
dcc.Graph(
id='production-graph',
figure=go.Figure({
'data': [{'x': [], 'y':[]}],
'layout': go.Layout(
yaxis={
'title': 'Total units'
},
height=505
)
}),
)
]),
html.Div(id='status-container', children=[
html.Div(className='indicator-box', children=[
daq.StopButton(id='stop-button')
]),
html.Div(className='indicator-box', children=[
daq.StopButton(id='new-batch', buttonText='Start new batch'),
]),
html.Div(className='indicator-box', children=[
html.H4("Batch number"),
daq.LEDDisplay(
id='batch-number',
value="124904",
color='blue'
),
html.Div(
id='batch-started'
)
]),
def gen_tab2():
#resultsdf = pd.read_csv('./resultsFile.csv')
#resultsdf = pd.DataFrame(columns=['race', 'lane', 'car', 'name', 'time', 'place', 'den', 'category'])
return html.Div(id='main_cols',children=[
html.Div(id='race', children=[
daq.NumericInput(
id='my-daq-numericinput',
max=60,
value=1,
label='Race Number',
labelPosition='top',
min=1),
html.Div(id='lanes', children=[
html.H3('Lanes'),
#html.H3(results_df.loc['race']),
html.Div(id='lane1', children=[
html.H3('Lane 1'),
html.Div(id='name1'),
#html.Div(id='time1')
html.Div([
daq.LEDDisplay(
id='lane1-leddisplay',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"
)
])
], className="two columns"),
html.Div(id='lane2', children=[
html.H3('Lane 2'),
html.Div(id='name2'),
html.Div(id='time2')
], className="two columns"),
html.Div(id='lane3', children=[
html.H3('Lane 3'),
html.Div(id='name3'),
html.Div(id='time3')
], className="two columns"),
html.Div(id='lane4', children=[
html.H3('Lane 4'),
html.Div(id='name4'),
html.Div(id='time4')
], className="two columns"),
dcc.Checklist(options=[
{'label': 'Save Results', 'value': 'Good'},
{'label': 'Do not', 'value': 'bad'},
],
value=['MTL', 'SF']
],
className="twelve columns",
style={'border': 'solid', 'text-align': 'center'}),
daq.StopButton(id='button-results', buttonText='Get Results'),
daq.StopButton(id='button-end', buttonText='Get Results'),
html.Div(id='results-button-output'),
html.Div(id='results-final-output'),
#html.Div(id='race-controls', children=[
# daq.StopButton(id='button-results', buttonText='Get Results'),
# html.Div(id='results-button-output'),
#html.Button('Force Race End', id='button-end'),
#html.Button('Next Race', id='button-next'),
# ],
# style={'margin': '80px' , 'text-align': 'center'},
# className="eight columns"),
html.H4('Upcoming Races', className="eight column"),
html.Div(id='next-race')],
style={'font-size': '200%', 'margin': '80px' , 'text-align': 'center'},
className="eight columns"),
html.Div(id='leader-board', children=[
html.H3('Fastest Times'),
#html.Table([html.Tr(['Name ','Den ', 'Time '])]),
generate_table(resultsdf[['name','time']]),
],
className="two columns",
style={'border': 'solid'}),
],
)
# Callback after upload
@app.callback(Output('output-data-upload', 'children'),
[Input('upload-data', 'contents')],
[State('upload-data', 'filename'),
State('upload-data', 'last_modified')])
def update_output(list_of_contents, list_of_names, list_of_dates):
if list_of_contents is not None:
# for testing load results
#Plotlyresultsdf = pd.read_csv('./resultsFile.csv')
# Read from CSV to load Races
#races = pd.read_csv('Races.csv')
#races = races.set_index('Race Number')
# Read list of racers and cars from CSV
#racers = pd.read_csv('Racers.csv')
#racers = racers.set_index('Number')
children = [
parse_contents(c, n, d) for c, n, d in
zip(list_of_contents, list_of_names, list_of_dates)]
return children
# Connect Call back should read and set statuses of radio buttons
# callback for race change
# update cars for a lane, lanes will pick up their value
### how do we update more values than children, can we call out specific values
## can we update style to show winner??
@app.callback(
Output('next-race', 'children'),
[Input('my-daq-numericinput', 'value')])
def update_output(value):
df = races.loc[value+1:value+3]
return dash_table.DataTable(
id='table',
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict('records')
)
## lane 1
@app.callback(
Output('name1', 'children'),
[Input('my-daq-numericinput', 'value')])
def update_output(value):
carNum = races.loc[value,'Lane 1']
name = racers.loc[carNum,'Name']
return html.Div([
html.H5(carNum ),
html.H4(name),
], style={'background-color': 'grey','border': 'solid', 'text-align': 'center'})
## Lane 2
@app.callback(
Output('name2', 'children'),
[Input('my-daq-numericinput', 'value')])
def update_output(value):
carNum = races.loc[value,'Lane 2']
name = racers.loc[carNum,'Name']
return html.Div([
html.H5(carNum ),
html.H4(name),
], style={'background-color': 'grey','border': 'solid', 'text-align': 'center'})
@app.callback(
Output('time2', 'children'),
[Input('my-daq-numericinput', 'value')])
def update_output(value):
time = resultsdf[(resultsdf['race']==value) & (resultsdf['lane']==2)]['time']
if time is None:
time = 0
return html.Div([
daq.LEDDisplay(
id='lane2-leddisplay',
value=time,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"
)
])
## LAne 3
@app.callback(
Output('name3', 'children'),
[Input('my-daq-numericinput', 'value')])
def update_output(value):
carNum = races.loc[value,'Lane 3']
name = racers.loc[carNum,'Name']
return html.Div([
html.H5(carNum ),
html.H4(name),
], style={'background-color': 'grey','border': 'solid', 'text-align': 'center'})
@app.callback(
Output('time3', 'children'),
[Input('my-daq-numericinput', 'value')])
def update_output(value):
time = resultsdf[(resultsdf['race']==value) & (resultsdf['lane']==3)]['time']
return html.Div([
daq.LEDDisplay(
id='lane3-leddisplay',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"
)
])
## lane 4
@app.callback(
Output('name4', 'children'),
[Input('my-daq-numericinput', 'value')])
def update_output(value):
carNum = races.loc[value,'Lane 4']
name = racers.loc[carNum,'Name']
return html.Div([
html.H5(carNum ),
html.H6(name),
], style={'background-color': 'grey','border': 'solid', 'text-align': 'center'})
@app.callback(
Output('time4', 'children'),
[Input('my-daq-numericinput', 'value')])
def update_output(value):
time = resultsdf[(resultsdf['race']==value) & (resultsdf['lane']==4)]['time']
return html.Div([
daq.LEDDisplay(
id='lane4-leddisplay',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"
)
])
## Race Controls
# # html.Button('Get Results', id='button-results'),
# html.Button('Force Race End', id='button-end'),
# html.Button('Next Race', id='button-next'),
## Get Results
@app.callback(
[Output(component_id='results-button-output', component_property='children'),
Output('lane1-leddisplay', 'value'),
Output('lane2-leddisplay', 'value'),
Output('lane3-leddisplay', 'value'),
Output('lane4-leddisplay', 'value')],
[Input(component_id='button-results', component_property='n_clicks'),
#Input('my-daq-numericinput', 'value')
])
def update_output(clicks):
laneresults = ['1=1.1704a', '2=5.4159b', '3=3.5462c', '4=3.7246d']
# get race results
command = 'rg'+'\r\n'
newcommand = command.encode('ascii')
#ser.write(newcommand)
#results = ser.readline()
#laneresults = results.decode().split()
return clicks,laneresults[0][2:8],laneresults[1][2:8],laneresults[2][2:8],laneresults[3][2:8]
# callback for race change
@app.callback(
Output('lane-character', 'value'),
[Input('lane-number', 'value')])
def update_output(value):
return 'ol1'
## Get Race Results
#laneresults = ['1=1.1704a', '2=5.4159b', '3=3.5462c', '4=3.7246d']
#@app.callback(
# Output('lane-character', 'value'),
# [Input('lane-number', 'value')])
#def update_output(value):
# laneresults = ['1=1.1704a', '2=5.4159b', '3=3.5462c', '4=3.7246d']
# return 'ol1'
if __name__ == '__main__':
app.run_server(debug=True, host='0.0.0.0', port=8050)
def simpleButton(name, **kwargs):
return html.Div(
# style={"margin": "auto"},
children=[daq.StopButton(**kwargs)], )
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_daq as daq
app = dash.Dash(__name__)
app.layout = html.Div([daq.StopButton(id='my-daq-stopbutton')])
if __name__ == '__main__':
app.run_server(debug=True)
def gen_tab2():
#resultsdf = pd.read_csv('./resultsFile.csv')
#resultsdf = pd.DataFrame(columns=['race', 'lane', 'car', 'name', 'time', 'place', 'den', 'category'])
return html.Div(
id='main_cols',
children=[
html.Div(
id='race',
children=[
daq.NumericInput(id='my-daq-numericinput',
max=60,
value=1,
label='Race Number',
labelPosition='top',
min=1),
html.Div(
id='lanes',
children=[
html.H3('Lanes'),
#html.H3(results_df.loc['race']),
html.Div(id='lane1',
children=[
html.H3('Lane 1'),
html.Div(id='name1'),
html.Div(id='time1')
],
className="two columns"),
html.Div(id='lane2',
children=[
html.H3('Lane 2'),
html.Div(id='name2'),
html.Div(id='time2')
],
className="two columns"),
html.Div(id='lane3',
children=[
html.H3('Lane 3'),
html.Div(id='name3'),
html.Div(id='time3')
],
className="two columns"),
html.Div(id='lane4',
children=[
html.H3('Lane 4'),
html.Div(id='name4'),
html.Div(id='time4')
],
className="two columns"),
],
className="twelve columns",
style={
'border': 'solid',
'text-align': 'center'
}),
daq.StopButton(id='button-results',
buttonText='Get Results'),
html.Div(id='results-button-output'),
daq.StopButton(id='button-save',
buttonText='Save Results'),
html.Div(id='save-button-output'),
daq.StopButton(buttonText='Refresh leaderboard',
id='Refresh'),
#html.Div(id='race-controls', children=[
# daq.StopButton(id='button-results', buttonText='Get Results'),
# html.Div(id='results-button-output'),
#html.Button('Force Race End', id='button-end'),
#html.Button('Next Race', id='button-next'),
# ],
# style={'margin': '80px' , 'text-align': 'center'},
# className="eight columns"),
html.H4('Upcoming Races', className="eight column"),
html.Div(id='next-race')
],
style={
'font-size': '200%',
'margin': '80px',
'text-align': 'center'
},
className="eight columns"),
html.H4('Fastest Single Race'),
html.Div(id='leader-board',
className="three columns",
style={
'font-size': '150%',
'border': 'solid'
}),
],
)
def div_device_controls():
"""
Generates an HTML Div containing the DAQ controls
"""
return html.Div(
[
# Title
html.H4('Device Controls', style={"textAlign": "center"}),
# Div with the device selection
html.Div(
[
# Div with the set and stop buttons
html.Div([
# Button that sets the device to the value in the input box
daq.StopButton(id='button-set-device',
children='Set',
className='one column',
disabled=True,
style={
"display": "flex",
"justify-content": "center",
"width": "49%",
}),
# Button that stops the iterative setting of the device
daq.StopButton(id='button-stop-device',
children='Stop',
className='one column',
disabled=True,
style={
"display": "flex",
"justify-content": "center",
"width": "49%",
})
]),
# DAQ device dropdown selector
dcc.Dropdown(id='dropdown-device-selection',
options=[],
className='twelve columns',
clearable=False,
searchable=False,
disabled=True,
placeholder='Select the device to control',
style={
"display": "flex",
"justify-content": "center",
"width": "90%",
'margin-top': '25px',
'margin-left': "5%"
}),
# DAQ device dropdown selector
dcc.Dropdown(id='dropdown-meas-selection',
options=[],
className='twelve columns',
clearable=False,
searchable=False,
disabled=True,
placeholder='Select the quantity to set',
style={
"display": "flex",
"justify-content": "center",
"width": "90%",
'margin-top': '5px',
'margin-left': "5%"
}),
# Div with the value input and the start value
html.Div([
# Input box with the value to set the device to
daq.NumericInput(id='input-device-value',
value=0,
min=-sys.float_info.max,
max=sys.float_info.max,
size=80,
label='Value',
labelPosition='top',
className='six columns',
disabled=True,
style={
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "25%",
"margin-top": "10px",
"margin-left": "10%"
})
]),
# Div with the step size and the time delay between steps
html.Div([
# Input box with the step between each value to set
daq.NumericInput(id='input-device-step',
value=0,
min=0,
max=sys.float_info.max,
size=80,
label='Step',
labelPosition='top',
className='six columns',
disabled=True,
style={
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "25%",
"margin-top": "10px"
}),
# Input box with the time to wait between each value to set
daq.NumericInput(id='input-device-time',
value=30,
min=1,
max=3600,
size=80,
label='Time',
labelPosition='top',
className='four columns',
disabled=True,
style={
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "25%",
"margin-top": "10px",
"margin-bottom": "40px"
})
])
],
id='div-file-control-0',
className='row',
style={'margin-top': 10})
],
className="three columns",
style={
"border-radius": "5px",
"border-width": "5px",
"border": "2px solid rgb(216, 216, 216)",
"position": "relative",
"height": "400px",
"margin-top": "10px"
})
html.H4('Temperature Check'),
daq.Indicator(id='esi-temperature-check',
value=True,
color='blue',
height=50,
label='Loading...',
width=50)
]),
html.Br(),
html.P('Daemon Check Not Ready Yet!!!!!!!')
]),
html.Br(),
html.Div(id='legend-container',
children=[
html.Div(className='indicator-box' + class_theme['dark'],
children=[daq.StopButton(id='esi-stop-button')]),
html.Div(className='indicator-box' + class_theme['dark'],
id='legend-status',
children=[
html.H4("Legend"),
daq.Indicator(width=30,
id='legend-green',
value=True,
color='green',
label='OK ='),
daq.Indicator(width=30,
height=20,
id='legend-yellow',
value=True,
color='yellow',
label='Warning ='),
def div_daq_controls():
"""
Generates an HMTL Div containing the DAQ controls
"""
config_dir = os.environ['DAQ_CFGDIR']
config_files = [
os.path.join(config_dir, f) for f in os.listdir(config_dir)
]
config_options = [{
'label': f.split('/')[-1],
'value': f
} for f in config_files]
return html.Div(
[
# Title
html.H4('DAQ Controls', style={"text-align": "center"}),
# Start and stop button
html.Div([
# Button that starts the DAQ
daq.StopButton(id='button-start-daq',
children='Start',
className='one column',
disabled=False,
style={
"display": "flex",
"justify-content": "center",
"width": "49%",
}),
# Button that stops the DAQ
daq.StopButton(id='button-stop-daq',
children='Stop',
className='one column',
disabled=True,
style={
"display": "flex",
"justify-content": "center",
"width": "49%",
}),
]),
# Div with the config selection
html.Div([
# Input box to specify the name of the DAQ file
dcc.Input(id='input-output-name',
type='text',
value='',
disabled=False,
style={
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "80%",
'margin-top': '80px',
'margin-left': "10%"
}),
# DAQ config file dropdown selector
dcc.Dropdown(id='dropdown-config-selection',
options=config_options,
value=config_dir + '/config_default.yaml',
className='twelve columns',
clearable=False,
searchable=False,
disabled=False,
style={
"display": "flex",
"justify-content": "center",
"width": "90%",
'margin-top': '5px',
'margin-left': "5%"
}),
# Box that display the config file
dcc.Textarea(id="text-config",
placeholder=" ",
value="",
style={
"width": "80%",
"height": "157px",
"margin-left": "10%",
"margin-top": "10px",
},
disabled=True),
# Invisible div that stores the DAQ process ID
dcc.Store(id='store-daq-id'),
# Invisible div that stores the device controller process ID
dcc.Store(id='store-controller-id')
])
],
className="three columns",
style={
"border-radius": "5px",
"border-width": "5px",
"border": "2px solid rgb(216, 216, 216)",
"position": "relative",
"height": "400px",
"margin-top": "10px",
"margin-left": "0px"
})
"value": "Max Current",
"label": "Max Current"
}, {
"value": "Max Voltage",
"label": "Max Voltage"
}],
value="Voltage",
inputStyle={"padding": "0px 0px 0px 25px"},
labelStyle={"padding-top": "20px"},
inputClassName="three columns",
labelClassName="three columns",
className="row"),
]),
html.Div([
daq.StopButton(
id="submit",
size=150,
),
],
className="three columns",
style={"padding-top": "25px"}),
]),
html.Label(
id='error-label',
style=error_label_style,
hidden=True,
)
]
dark_top_box = html.Div(className="container",
children=[dark_header] + [top_box],
style=dark_top_box_style)
def gen_tab2():
#resultsdf = pd.read_csv('./resultsFile.csv')
#resultsdf = pd.DataFrame(columns=['race', 'lane', 'car', 'name', 'time', 'place', 'den', 'category'])
return html.Div(id='main_cols',children=[
html.Div(id='race', children=[
daq.NumericInput(
id='my-daq-numericinput',
max=60,
value=1,
label='Race Number',
labelPosition='top',
min=1),
html.Div(id='lanes', children=[
html.H3('Lanes'),
#html.H3(results_df.loc['race']),
html.Div(id='lane1', children=[
html.H3('Lane 1'),
html.Div(id='name1'),
#html.Div(id='time1')
html.Div([
daq.LEDDisplay(
id='lane1-leddisplay',
value=0,
label='Time',
labelPosition='bottom',
size='40',
color="#FF5E5E",
backgroundColor="#000000"
)
])
], className="two columns"),
html.Div(id='lane2', children=[
html.H3('Lane 2'),
html.Div(id='name2'),
html.Div(id='time2')
], className="two columns"),
html.Div(id='lane3', children=[
html.H3('Lane 3'),
html.Div(id='name3'),
html.Div(id='time3')
], className="two columns"),
html.Div(id='lane4', children=[
html.H3('Lane 4'),
html.Div(id='name4'),
html.Div(id='time4')
], className="two columns"),
],
className="twelve columns",
style={'border': 'solid', 'text-align': 'center'}),
daq.StopButton(id='button-results', buttonText='Get Results'),
daq.StopButton(id='button-end', buttonText='Get Results'),
html.Div(id='results-button-output'),
html.Div(id='results-final-output'),
#html.Div(id='race-controls', children=[
# daq.StopButton(id='button-results', buttonText='Get Results'),
# html.Div(id='results-button-output'),
#html.Button('Force Race End', id='button-end'),
#html.Button('Next Race', id='button-next'),
# ],
# style={'margin': '80px' , 'text-align': 'center'},
# className="eight columns"),
html.H4('Upcoming Races', className="eight column"),
html.Div(id='next-race')],
style={'font-size': '200%', 'margin': '80px' , 'text-align': 'center'},
className="eight columns"),
html.Div(id='leader-board', children=[
html.H3('Fastest Times'),
#html.Table([html.Tr(['Name ','Den ', 'Time '])]),
generate_table(resultsdf[['name','time']]),
],
className="two columns",
style={'border': 'solid'}),
],
)
} for name in list_of_resources],
value=default_resource,
style={'width': '100%'},
searchable=False),
]),
html.Div(className='column middle',
children=[
daq.PowerButton(id='power-button',
color="#FF5E5E",
size=60,
on=False,
label='Power OFF',
labelPosition='top'),
daq.StopButton(
id='my-daq-startbutton',
disabled=True,
buttonText='Run',
n_clicks=0,
),
daq.StopButton(
id='clear-button',
n_clicks=0,
buttonText='Clear',
),
daq.StopButton(
id='refresh-button',
n_clicks=0,
buttonText='Refresh',
),
html.P([
'Mode: ',
daq.BooleanSwitch(
)
]),
html.Div(className='indicator-box'+class_theme['dark'], id='settings-container3', children=[
html.H4('Power Check'), # Indicator for all power, green circle if all up, red box if one or more are down
daq.Indicator(
id='kcwi-power-check',
value=True,
color='blue',height=50,
label='Loading...',
width = 50
)
]),
]),
html.Div(id='legend-container', children=[
html.Div(className='indicator-box'+class_theme['dark'], children=[
daq.StopButton(id='stop-button') # stop button to stop updating
]),
html.Div(className='indicator-box'+class_theme['dark'], id='legend-status', children=[
html.H4("Legend"), # Legend indicators, so nothing changes
daq.Indicator( width = 30,
id='legend-green',
value=True,
color='green',
label='OK ='
),
daq.Indicator( width = 30,
id='legend-yellow',
value=True,
color='yellow',height=20,
label='Warning ='
),
def generate_main_layout(
theme="light",
src_type="Voltage",
mode_val="Single measure",
fig=None,
meas_src=0.00,
meas_display=0.0000,
src_knob=0.00,
source_toggle=False,
mode_toggle=False,
):
"""generate the layout of the app"""
source_label, measure_label = get_source_labels(src_type)
source_unit, measure_unit = get_source_units(src_type)
# As the trigger-measure btn will have its n_clicks reset by the reloading
# of the layout we need to reset this one as well
local_vars.reset_n_clicks()
# Doesn't clear the data of the graph
if fig is None:
data = []
else:
data = fig["data"]
html_layout = [
html.Div(
id="page-body-content",
className="row flex-display",
children=[
html.Div(
id="figure-card",
className="six columns",
style={"backgroundColor": card_color[theme]},
children=[
html.P("IV Curve"),
dcc.Graph(
id="IV_graph",
style={"width": "100%"},
figure={
"data":
data,
"layout":
dict(
paper_bgcolor=card_color[theme],
plot_bgcolor=card_color[theme],
automargin=True,
font=dict(color=text_color[theme],
size=12),
xaxis={
"color": grid_color[theme],
"gridcolor": grid_color[theme],
},
yaxis={
"color": grid_color[theme],
"gridcolor": grid_color[theme],
},
),
},
),
html.Div(
id="bottom-card",
style={
"backgroundColor": card_color[theme],
"color": text_color[theme],
},
children=[
# Display the sourced and measured values
html.Div(
id="measure-div",
children=[
daq.LEDDisplay(
id="source-display",
label="Applied %s (%s)" %
(source_label, source_unit),
value=meas_src,
color=accent_color[theme],
),
daq.LEDDisplay(
id="measure-display",
label="Measured %s (%s)" %
(measure_label, measure_unit),
value=meas_display,
color=accent_color[theme],
),
],
)
],
),
],
),
html.Div(
id="control-container",
className="five columns",
children=[
html.Div(
# controls and options for the IV tracer
id="up-control-card",
style={
"backgroundColor": card_color[theme],
"color": text_color[theme],
},
children=[
html.Div(
id="control-sections",
children=[
html.Div(
className="IV-source-options",
children=[
html.Label(
"Sourcing",
title=
"Choose whether you want to source voltage "
"and measure current, or source current and measure voltage",
),
daq.ToggleSwitch(
id="source-choice-toggle",
label=[
"Voltage", "Current"
],
style={
"width": "150px",
"margin": "auto",
},
value=source_toggle,
),
],
),
html.Div(
className="measure-options",
children=[
html.Label(
"Measure mode",
title=
"Choose if you want to do single measurement"
" or to start a sweep mode",
),
daq.ToggleSwitch(
id="mode-choice-toggle",
label=[
"Single measure",
"Sweep"
],
style={"width": "150px"},
value=mode_toggle,
),
],
),
],
),
daq.StopButton(
id="clear-graph_btn",
buttonText="Clear Graph",
className="daq-button",
size=120,
),
daq.Indicator(
id="clear-graph_ind",
color=accent_color[theme],
value=False,
),
],
),
html.Div(
id="mid-control-card",
style={
"backgroundColor": card_color[theme],
"color": text_color[theme],
"marginTop": "10px",
},
children=[
# Sourcing controls
html.Div(
id="source-div",
children=[
# To perform single measures adjusting the source with a knob
html.Div(
id="single_div",
className="single_div_toggle_style",
children=[
daq.Knob(
id="source-knob",
size=100,
value=src_knob,
min=0,
max=10,
color=accent_color[theme],
label="%s (%s)" %
(source_label,
source_unit),
),
daq.LEDDisplay(
id="source-knob-display",
label="Knob readout",
value=src_knob,
color=accent_color[theme],
),
],
),
# To perform automatic sweeps of the source
html.Div(
id="sweep_div",
className="sweep_div_toggle_style",
children=[
html.Div(
className="sweep-div-row",
children=[
html.Div(
className=
"sweep-div-row",
style={
"width": "98%"
},
children=[
html.Div(
id=
"sweep-title",
children=
html.
P("%s sweep"
%
source_label
),
),
html.Div(
[
daq.
Indicator(
id=
"sweep-status",
label
="Sweep active",
color
=accent_color[
theme],
value
=False,
)
],
title=
"Indicates if the sweep is running",
),
],
)
],
),
html.Div(
className="sweep-div-row",
children=[
html.Div(
className=
"sweep-div-row-inner",
children=[
"Start",
daq.
PrecisionInput(
id=
"sweep-start",
precision=4,
label=" %s"
%
source_unit,
labelPosition
="right",
value=0,
style={
"marginLeft":
"5px"
},
),
],
title=
"The lowest value of the sweep",
),
html.Div(
className=
"sweep-div-row-inner",
children=[
"Stop",
daq.
PrecisionInput(
id=
"sweep-stop",
precision=4,
label=" %s"
%
source_unit,
labelPosition
="right",
value=10,
),
],
title=
"The highest value of the sweep",
),
],
),
html.Div(
className="sweep-div-row",
children=[
html.Div(
className=
"sweep-div-row-inner",
children=[
"Step",
daq.
PrecisionInput(
id=
"sweep-step",
precision=4,
label=" %s"
%
source_unit,
labelPosition
="right",
value=0.2,
),
],
title=
"The increment of the sweep",
),
html.Div(
className=
"sweep-div-row-inner",
children=[
"Time of a step",
daq.
NumericInput(
id=
"sweep-dt",
value=0.2,
min=0.01,
style={
"margin":
"5px"
},
),
"s",
],
title=
"The time spent on each increment",
),
],
),
],
),
],
),
# Measure button and indicator
html.Div(
id="trigger-div",
children=[
daq.StopButton(
id="trigger-measure_btn",
buttonText="Single measure",
className="daq-button",
size=120,
),
daq.Indicator(
id="measure-triggered",
color=accent_color[theme],
value=False,
label="Measure active",
),
],
),
],
),
],
),
],
)
]
if theme == "dark":
return daq.DarkThemeProvider(children=html_layout)
if theme == "light":
return html_layout
html.Div([
html.Div(
[
html.Div(
[
html.H3("Test", style={"textAlign": "center"}),
html.Div(
children=[
html.Div(
[
daq.StopButton(
id="start-button",
buttonText="Start",
style={
"display": "flex",
"justify-content":
"center",
"align-items": "center",
"paddingBottom": "6%",
},
n_clicks=0,
),
daq.StopButton(
id="stop-button",
buttonText="Stop",
style={
"display": "flex",
"justify-content":
"center",
"align-items": "center",
},
n_clicks=0,
]),
html.Div(className='indicator-box'+class_theme['dark'], id='osiris-summary-container6', children=[
html.H4('Settings Check'),
daq.Indicator(
id='osiris-settings-check',
value=True,
color='blue',height=50,
label='Loading...',
width = 50
)
])
]),
html.Br(),
html.Div(id='legend-container', children=[
html.Div(className='indicator-box'+class_theme['dark'], children=[
daq.StopButton(id='osiris-stop-button')
]),
html.Div(className='indicator-box'+class_theme['dark'], id='legend-status', children=[
html.H4("Legend"),
daq.Indicator( width = 30,
id='legend-green',
value=True,
color='green',
label='OK ='
),
daq.Indicator( width = 30,
id='legend-yellow',
value=True,
color='yellow',height=20,
label='Warning ='
),
"align-items": "center",
"marginBottom": "2%",
},
),
html.Hr(),
html.Div(
[
html.Div(
[
daq.StopButton(
"Start",
id=
'flow-meter-readout-start-button',
n_clicks=0,
style={
"width": "20%",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"marginLeft": "2%",
"marginRight": "2%",
"marginBottom": "5%",
}),
daq.StopButton(
"Stop",
id='flow-meter-readout-stop-button',
n_clicks=0,
style={
"width": "20%",
"color": "red",
"display": "flex",
"justify-content": "center",
def generate_main_layout(theme="light",
src_type="V",
mode_val="single",
fig=None,
sourcemeter=iv_generator):
"""generate the layout of the app"""
source_label, measure_label = get_source_labels(src_type)
source_unit, measure_unit = get_source_units(src_type)
source_max = get_source_max(src_type)
if mode_val == "single":
single_style = {
"display": "flex",
"flex-direction": "column",
"alignItems": "center",
}
sweep_style = {"display": "none"}
label_btn = "Single measure"
else:
single_style = {"display": "none"}
sweep_style = {
"display": "flex",
"flex-direction": "column",
"alignItems": "center",
}
label_btn = "Start sweep"
# As the trigger-measure btn will have its n_clicks reset by the reloading
# of the layout we need to reset this one as well
local_vars.reset_n_clicks()
# Doesn't clear the data of the graph
if fig is None:
data = []
else:
data = fig["data"]
html_layout = [
html.Div(
className="row",
children=[
# graph to trace out the result(s) of the measurement(s)
html.Div(
id="IV_graph_div",
className="eight columns",
style={"margin": "20px"},
children=[
dcc.Graph(
id="IV_graph",
figure={
"data":
data,
"layout":
dict(
paper_bgcolor=bkg_color[theme],
plot_bgcolor=bkg_color[theme],
font=dict(color=text_color[theme],
size=15),
xaxis={
"color": grid_color[theme],
"gridcolor": grid_color[theme],
},
yaxis={
"color": grid_color[theme],
"gridcolor": grid_color[theme],
},
),
},
)
],
),
# controls for the connexion to the instrument
html.Div(
id="instr_controls",
className="two columns",
children=[
html.H4(sourcemeter.instr_user_name),
# A button to turn the instrument on or off
html.Div(
children=[
html.Div(
id="power_button_div",
children=daq.PowerButton(id="power_button",
on="false"),
),
html.Br(),
html.Div(
children=daq.Indicator(
id="mock_indicator",
value=sourcemeter.mock_mode,
label="is mock?",
),
style={"margin": "20px"},
title="If the indicator is on, it means "
"the instrument is in mock mode",
),
],
style=h_style,
),
# An input to choose the COM/GPIB port
dcc.Input(
id="instr_port_input",
placeholder="Enter port name...",
type="text",
value="",
),
html.Br(),
# A button which will initiate the connexion
daq.StopButton(id="instr_port_button",
buttonText="Connect",
disabled=True),
html.Br(),
html.Div(
id="instr_status_div",
children="",
style={"margin": "10 px"},
),
],
style={
"margin": "50px",
"display": "flex",
"flex-direction": "column",
"alignItems": "center",
"justifyContent": "space-between",
"border": "2px solid #C8D4E3",
"background": "#f2f5fa",
},
),
],
),
html.Div(
id="measure_controls_div",
className="row",
children=[
# controls and options for the IV tracer
html.Div(
className="two columns",
id="IV-options_div",
children=[
html.H4(
"Sourcing",
title="Choose whether you want to source voltage "
"and measure current or source current and "
"measure voltage",
),
dcc.RadioItems(
id="source-choice",
options=[
{
"label": "Voltage",
"value": "V"
},
{
"label": "Current",
"value": "I"
},
],
value=src_type,
),
html.Br(),
html.H4(
"Measure mode",
title="Choose if you want to do single measurement"
" or to start a sweep",
),
dcc.RadioItems(
id="mode-choice",
options=[
{
"label": "Single measure",
"value": "single"
},
{
"label": "Sweep",
"value": "sweep"
},
],
value=mode_val,
),
html.Br(),
html.Div(
daq.StopButton(id="clear-graph_btn",
buttonText="Clear graph",
size=150),
style={
"alignItems": "center",
"display": "flex",
"flex-direction": "row",
},
),
html.Br(),
daq.Indicator(id="clear-graph_ind",
value=False,
style={"display": "none"}),
],
),
# Sourcing controls
html.Div(
id="source-div",
className="three columns",
children=[
# To perform single measures adjusting the source with
# a knob
html.Div(
id="single_div",
children=[
daq.Knob(
id="source-knob",
value=0.00,
min=0,
max=source_max,
label="%s (%s)" %
(source_label, source_unit),
),
daq.LEDDisplay(
id="source-knob-display",
label="Knob readout",
value=0.00,
),
],
style=single_style,
),
# To perfom automatic sweeps of the source
html.Div(
id="sweep_div",
children=[
html.Div(
id="sweep-title",
children=html.H4("%s sweep:" %
source_label),
),
html.Div(
[
"Start",
html.Br(),
daq.PrecisionInput(
id="sweep-start",
precision=4,
min=0,
max=source_max,
label=" %s" % source_unit,
labelPosition="right",
value=1,
style={"margin": "5px"},
),
],
title="The lowest value of the sweep",
style=h_style,
),
html.Div(
[
"Stop",
daq.PrecisionInput(
id="sweep-stop",
precision=4,
min=0,
max=source_max,
label=" %s" % source_unit,
labelPosition="right",
value=9,
style={"margin": "5px"},
),
],
title="The highest value of the sweep",
style=h_style,
),
html.Div(
[
"Step",
daq.PrecisionInput(
id="sweep-step",
precision=4,
min=0,
max=source_max,
label=" %s" % source_unit,
labelPosition="right",
value=source_max / 20.0,
style={"margin": "5px"},
),
],
title="The increment of the sweep",
style=h_style,
),
html.Div(
[
"Time of a step",
daq.NumericInput(
id="sweep-dt",
value=0.5,
min=0.1,
style={"margin": "5px"},
),
"s",
],
title="The time spent on each increment",
style=h_style,
),
html.Div(
[
daq.Indicator(
id="sweep-status",
label="Sweep active",
value=False,
)
],
title="Indicates if the sweep is running",
style=h_style,
),
],
style=sweep_style,
),
],
),
# measure button and indicator
html.Div(
id="trigger_div",
className="two columns",
children=[
daq.StopButton(id="trigger-measure_btn",
buttonText=label_btn,
size=150),
daq.Indicator(id="measure-triggered",
value=False,
label="Measure active"),
],
),
# Display the sourced and measured values
html.Div(
id="measure_div",
className="five columns",
children=[
daq.LEDDisplay(
id="source-display",
label="Applied %s (%s)" %
(source_label, source_unit),
value="0.0000",
),
daq.LEDDisplay(
id="measure-display",
label="Measured %s (%s)" %
(measure_label, measure_unit),
value="0.0000",
),
],
),
],
style={
# "width": "100%",
"flexDirection": "column",
"alignItems": "center",
"justifyContent": "space-between",
},
),
html.Div(children=[
html.Div(
children=dcc.Markdown("""
**What is this app about?**
This is an app to show the graphic elements of Dash DAQ used to create an
interface for an IV curve tracer using a Keithley 2400 SourceMeter. This mock
demo does not actually connect to a physical instrument the values displayed
are generated from an IV curve model for demonstration purposes.
**How to use the app**
First choose if you want to source (apply) current or voltage, using the radio
item located on the right of the graph area. Then choose if you want to operate
in a single measurement mode or in a sweep mode.
***Single measurement mode***
Adjust the value of the source with the knob at the bottom of the graph area
and click on the `SINGLE MEASURE` button, the measured value will be displayed.
Repetition of this procedure for different source values will reveal the full
IV curve.
***Sweep mode***
Set the sweep parameters `start`, `stop` and `step` as well as the time
spent on each step, then click on the button `START SWEEP`, the result of the
sweep will be displayed on the graph.
The data is never erased unless the button `CLEAR GRAPH is pressed` or if the
source type is changed.
You can purchase the Dash DAQ components at [
dashdaq.io](https://www.dashdaq.io/)
"""),
style={
"margin": "20px",
"padding": "50px",
"alignItems": "left",
"border": "1px solid #DFE8F3",
"color": text_color[theme],
"background": bkg_color[theme],
},
)
]),
]
if theme == "dark":
return daq.DarkThemeProvider(children=html_layout)
elif theme == "light":
return html_layout
id='nirspec-summary-container6',
children=[
html.H4('Mechanisms Check'),
daq.Indicator(id='nirspec-mechanism-check',
value=True,
color='blue',
height=50,
label='Loading...',
width=50)
])
]),
html.Br(),
html.Div(id='legend-container',
children=[
html.Div(className='indicator-box',
children=[daq.StopButton(id='nirspec-stop-button')]),
html.Div(className='indicator-box',
id='legend-status',
children=[
html.H4("Legend"),
daq.Indicator(width=30,
id='legend-green',
value=True,
color='green',
label='OK ='),
daq.Indicator(width=30,
id='legend-yellow',
value=True,
color='yellow',
height=20,
label='Warning ='),
style={
'width': '80%',
'min-width': '150px'
},
searchable=False)
]),
html.Div(className='column middle',
children=[
daq.PowerButton(
id='power-button',
on=None,
color="#FF5E5E",
),
daq.StopButton(
id='my-daq-startbutton',
buttonText='Start',
n_clicks=0,
),
daq.StopButton(
id='my-daq-clearbutton',
n_clicks=0,
buttonText='Clear',
),
daq.StopButton(
id='refresh-button',
n_clicks=0,
buttonText='Refresh',
),
html.P([
'Sensor type:',
dcc.RadioItems(id='rtd-type',
[
html.Div(
[
html.Div(
[
html.H3(
"Serial Monitor",
style={"textAlign": "Center"},
className="seven columns",
),
daq.StopButton(
id="start-stop",
label="",
className="five columns",
n_clicks=0,
style={
"paddingTop": "3%",
"display": "flex",
"justify-content": "center",
"align-items": "center",
},
),
],
className="row",
),
html.Div(
[
dcc.Textarea(
id="serial-response",
placeholder="",
value="",
style={
