def turn_dark(dark_theme):
if (dark_theme):
theme.update(dark=True)
else:
theme.update(dark=False)
return daq.DarkThemeProvider(theme=theme,
children=[
daq.Knob(id='servo-knob',
value=138,
max=250,
min=50),
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),
])
def edit_theme(dark):
if (dark):
theme.update(dark=True)
else:
theme.update(dark=False)
return daq.DarkThemeProvider(theme=theme, children=rootLayout)
def edit_theme(dark, p, s, d):
if(dark):
theme.update(
dark=True
)
else:
theme.update(
dark=False
)
if p is not None:
theme.update(
primary=p['hex']
)
for child in getattr(rootLayout, 'children'):
if hasattr(child, 'color'):
setattr(child, 'color', p['hex'])
if s is not None:
theme.update(
secondary=s['hex']
)
if d is not None:
theme.update(
detail=d['hex']
)
return daq.DarkThemeProvider(theme=theme, children=rootLayout)
def turn_dark(dark_theme):
if (dark_theme):
theme.update(dark=True)
lvd = 'Dark'
else:
theme.update(dark=False)
lvd = 'Light'
return daq.DarkThemeProvider(theme=theme, children=rootLayout1)
def turn_dark(dark_theme):
if(dark_theme):
theme.update(
dark=True
)
else:
theme.update(
dark=False
)
return daq.DarkThemeProvider(theme=theme, children=
daq.Knob(value=6))
def render_tab_content(tab_switch):
if tab_switch == 0:
return 'tab1', build_tab_1(), False, True, {'display': 'inline-block', 'float': 'right'}
if tab_switch:
return ['tab2', daq.DarkThemeProvider(theme=theme, children=[
html.Div(
id='status-container',
children=[
build_quick_stats_panel(),
build_top_panel(),
build_chart_panel(),
]
)
]), True, False, {'display': 'none'}]
def render_content(tab):
if tab == 'tab-1':
return html.Div(tab1_data())
elif tab == 'tab-2':
print("ptessed tab2")
return html.Div([dcc.Graph(figure=
tab2_data())])
elif tab=='tab-3':
return html.Div(children=[
html.Br(),
daq.DarkThemeProvider(theme=theme, children=[
html.Div([
daq.BooleanSwitch(
id='my-toggle-switch',
label="Rural or Urban",
on=True ),
html.Div(id='toggle-switch-output')
])] )])
'primary': '#00EA64',
'secondary': '#6E6E6E'
}
app.layout = html.Div(id='dark-theme-provider-demo', children=[
html.Br(),
daq.ToggleSwitch(
id='daq-light-dark-theme',
label=['Light', 'Dark'],
style={'width': '250px', 'margin': 'auto'},
value=False
),
html.Div(
id='dark-theme-component-demo',
children=[
daq.DarkThemeProvider(theme=theme, children=
daq.Knob(value=6))
],
style={'display': 'block', 'margin-left': 'calc(50% - 110px)'}
)
])
@app.callback(
Output('dark-theme-component-demo', 'children'),
[Input('daq-light-dark-theme', 'value')]
)
def turn_dark(dark_theme):
if(dark_theme):
theme.update(
dark=True
)
def turn_dark(dark_theme):
if (dark_theme):
theme.update(dark=True)
else:
theme.update(dark=False)
return daq.DarkThemeProvider(theme=theme, children=html.Div(id='output'))
def toggle_darkness(dark_theme):
if(dark_theme): theme.update(dark = True)
else: theme.update(dark = False)
return daq.DarkThemeProvider(theme = theme, children = self.__app_components())
]),
html.H4([
"Options",
], className="container_title"),
html.Table([
html.Col(style={'width': '180'}),
html.Col(),
html.Col(),
html.Tr([
html.Td(html.Div("GPU Acceleration"),
className="config-label"),
html.Td(
html.Div([
daq.DarkThemeProvider(
daq.BooleanSwitch(
on=True,
color='#00cc96',
id='gpu-toggle',
)),
dbc.Tooltip(
"Caution: Using CPU compute for more than 50 million points is not recommended.",
target='gpu-toggle',
placement='bottom',
hide_arrow=True,
style={
"textAlign": "left",
"font-size": '15px',
"color": "white",
"width": '350px',
"padding": '15px',
"border-radius": '5px',
"background-color": "#2a2a2e"
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
}],
virtualization=True,
pagination_mode=False)
app.layout = html.Div(children=[
html.H2(children='Workout Summary'),
html.Div([
html.Div(generate_table(table_df), className='pure-u-1-2'),
html.Div(children=[
daq.DarkThemeProvider(theme={
'dark': False,
'detail': color_scheme['white'],
'primary': color_scheme['white'],
'secondary': color_scheme['white']
},
children=daq.Gauge(
id='work_out_intensity_gauge',
min=0,
max=5,
color=color_scheme['green'])),
html.Span(children=f"You've complete {generate_fact()} days workout.",
className='summary')
],
className='pure-u-1-2')
],
className='pure-g'),
html.Div(children=[
html.Div(dcc.Graph(id='time_trend',figure={'layout':{'plot_bgcolor':color_scheme['black'],
'paper_bgcolor':color_scheme['black']}}), className='pure-u-1-2'),
html.Div(dcc.Graph(id='sports_potion_barplot',figure={'layout':{'plot_bgcolor':color_scheme['black'],
def tab1_data():
theme = {
'dark': True,
'detail': '#007439',
'primary': '#00EA64',
'secondary': '#6E6E6E',
}
covid=CovidCases()
regions=covid.latest_cases()
summary=covid.summary()
df = pd.DataFrame({
"States": [i['loc'] for i in regions],
"Confirmed Cases (Indian)": [i['confirmedCasesIndian'] for i in regions],
"Confirmed Cases (Foreign)": [i['confirmedCasesForeign'] for i in regions],
'Discharged' :[i['discharged'] for i in regions],
'Deaths':[i['deaths'] for i in regions],
})
fig = go.Figure(data=[
go.Bar(name='Confirmed Cases-India', x=df['States'], y=df['Confirmed Cases (Indian)']),
go.Bar(name='Confirmed Cases-Foreign', x=df['States'], y=df['Confirmed Cases (Foreign)']),
go.Bar(name='Deaths', x=df['States'], y=df['Deaths']),
go.Bar(name='Discharged', x=df['States'], y=df['Discharged'])],layout= go.Layout(
margin={'l': 40, 'b': 70, 't': 10, 'r': 10},
paper_bgcolor = '#000000',
font= {
'color': 'white'
},
plot_bgcolor = '#000000',
transition= {
'duration': 100,
},
hovermode='closest',
xaxis=dict(
tickangle = 90,
autorange=True,
showgrid= False,
ticks='',
showticklabels=True
),
yaxis=dict(
showgrid=False,
showticklabels=True
)
)
)
fig.update_xaxes(
tickangle = 30,
title_text = "States",
title_font = {"size": 20},
title_standoff = 25)
return html.Div(id='dark-theme-container',children=[daq.DarkThemeProvider(theme=theme),
html.H3(children='Latest Covid-19 Cases'),
html.Div([
html.Table([
html.Tr(
[html.Td(html.H3('Total')),html.Td(html.H3('Overall Confirmed')),html.Td(html.H3('Overall Discharged')),html.Td(html.H3('Overall Deaths'))]
),
html.Tr(
[html.Td(daq.LEDDisplay(
value=summary['total'],
color="#00ff00",
backgroundColor="#23262e",
id='darktheme-daq-leddisplay',
className='dark-theme-control',
size=40
)),html.Td(daq.LEDDisplay(
value=summary['confirmedCasesIndian'],
color="#00ff00",
backgroundColor="#23262e",
id='darktheme-daq-leddisplay',
className='dark-theme-control',
size=40
)),html.Td(daq.LEDDisplay(
value=summary['discharged'],
color="#00ff00",
backgroundColor="#23262e",
id='darktheme-daq-leddisplay',
className='dark-theme-control',
size=40
)),html.Td(html.Td(daq.LEDDisplay(
value=summary['deaths'],
color="#00ff00",
backgroundColor="#23262e",
id='darktheme-daq-leddisplay',
className='dark-theme-control',
size=40
)))]
)])
]),
html.H3("Latest COVID-19 Cases across Indian States"),
dcc.Graph(
id='example-graph',
figure=fig,
),
html.H3("Record of Cases"),
html.Div(children=[
html.Table(html.Tr([
html.Td([html.H3("States"),
dcc.Dropdown(
id='region_option',
options=covid.history_labels_regions(),
value='All',
multi=True
)]),html.Td([html.H3("Date"),
dcc.Dropdown(
id='date_option',
options=covid.history_labels_dates(),
value=covid.history_labels_dates()[0]['value'],
)]
)]))
]),
html.Div(children=[html.Div(id="history_table")]),
html.Div(children=[html.H3("Trends Year Till Date"),html.Div(children=[
html.Div(
dcc.Dropdown(id="history_graph",
options=[{'label':'Deaths','value':'Deaths'},
{'label':'Confirmed','value':'Confirmed'},
{'label':'Discharged','value':'Discharged'}],
value='Deaths'
),style={"width":"20%","display":"inline-block"})
,
html.Div(
dcc.Dropdown(id="region_graph",
options=covid.history_labels_regions(),
value='All',
multi=True
),style={"width":"20%","display":"inline-block"}),
dcc.Graph(id="cases_graph")],style={'width':'100%'})])
])
),
],
id='modal',
className='modal',
style={"display": "none"},
),
],
className='row'),
])
app.layout = html.Div(
html.Div(id='dark-theme-container',
children=[
html.Div(id='dark-theme-components',
children=[
daq.DarkThemeProvider(theme=theme,
children=rootLayout)
],
style={
'border': 'solid 1px #A2B1C6',
'border-radius': '5px',
'padding': '20px',
'margin-top': '5px'
}),
html.Br(),
daq.ToggleSwitch(id='toggle-theme',
label=['Light', 'Dark'],
value=True,
style={
'width': '250px',
'margin': 'auto'
}),
def dark_theme():
return html.Div(children=[daq.DarkThemeProvider(\
theme=theme,children=rootLayout)],
style={'backgroundColor':'#303030','color':theme['primary'],\
'border': 'solid 1px #A2B1C6', 'border-radius': '5px',\
'padding': '50px', 'margin-top': '20px'})
###################### OVERALL LAYOUT ######################
layout = [
dcc.Tabs(
id="esi-tabs",
value='esi-tabs',
children=[
dcc.Tab(id='esi-tab1',
label='ESI Summary',
value='esi-tabs1',
className='custom-tab' + class_theme['dark'],
selected_className='custom-tab--selected',
disabled=True,
children=[
html.Br(),
html.Div(id='esi-dark-theme-component-demo',
children=daq.DarkThemeProvider(
theme=theme, children=rootLayout1)),
dcc.Interval(id='esi-polling-interval',
n_intervals=0,
interval=30 * 1000,
disabled=False),
dcc.Store(id='esi-annotations-storage', data=[])
]),
dcc.Tab(id='esi-tab2',
label='ESI Servers',
value='tab2',
className='custom-tab' + class_theme['dark'],
selected_className='custom-tab--selected',
disabled=True,
children=[
html.Div(
id='esi-dark-theme-component-demo2',
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
def render_content(headline="None",
image_url="localhost:8000/404.png",
publication="",
description="",
content="",
audience_filters=['local']):
content = html.Div(
children=daq.DarkThemeProvider(
theme=theme,
children=html.Div([
dcc.Interval(id="tick"),
html.Div([
# dbc.Row(
# [
# dbc.Col(
dbc.Form([
dbc.Container([
dbc.Row([
dbc.Col(
dbc.Label("Categories:", ),
width=1,
),
dbc.Col(
dcc.Dropdown(
options=[
{
"label": "local",
"value": "local",
},
{
"label": "regional",
"value": "regional",
},
{
"label": "state",
"value": "state",
},
{
"label": "national",
"value": "national",
},
{
"label": "international",
"value": "international",
},
{
"label": "unbound",
"value": "unbound",
},
],
id='audience-filters',
value=audience_filters,
multi=True,
),
width=4,
className="mw-25",
# style={"min-width": "25vw"}
),
# className="w-100",
# inline=True,
# className='mr-4',
# dbc.FormGroup(
# [
dbc.Col(dbc.Label("Order by"), width=1),
dbc.Col(
dcc.Dropdown(options=[
{
"label": "gradient descent",
"value": "gradient descent",
},
{
"label": "ambiguity",
"value": "ambiguity",
},
],
id='sort-order'),
width=4,
),
])
])
]),
html.Br(),
# className="w-100",
# inline=True
# ),
# ),
# ]
# ),
# ]), ]),
# dbc.Row(
# [
#
# dbc.Col(
# dbc.Card([dbc.CardImg(src=image_url)], style={'max-height': '38vh'}), width=12,
#
# ),
# # dbc.Col(width=4),
#
# ],
# align='center',
#
# ),
dbc.Row(
[
dbc.Col(
dbc.Jumbotron(
[
html.H6(publication,
className='text-muted',
style={
"font-variant":
'small-caps'
}),
html.H1(
html.B(headline),
className="display-3",
id="headline",
),
html.P(
description,
className="lead",
),
# html.Hr(className="my-2"),
dbc.Card(
[dbc.CardImg(src=image_url)],
style={
"margin":
"1.5vh 3.37vh 1.5vh 0.57vh"
}),
*[
html.
P(f"""{line1} {line2 if line2 else ""}""",
className='article-content')
for line1, line2 in grouper(
nlp(content).sents, 2)
],
],
style={"padding": "20px"},
),
width=11)
],
style={'margin-top': '5vh'}),
dbc.Row([dbc.Col(dbc.ListGroup([], id="suggestions"))]),
]),
]),
),
style=CONTENT_STYLE,
)
return content
def bodyLayoutGen():
bodyLayout = html.Div(
id="body",
className=textClassName[theme],
children=[
html.Div(
id="tempSection",
style={"backgroundColor": cardColor[theme]},
children=[
html.H5("System Temprature"),
dcc.Interval(
id='tempInterval',
interval=2 * 1000, # in milliseconds
n_intervals=0),
html.Div(id="tempGraphSection",
className="seven columns",
style={"backgroundColor": backgroundColor[theme]},
children=[
html.Div(id="tempLedDispSection",
style={
"backgroundColor":
cardColor[theme],
},
children=[
daq.LEDDisplay(
id="cpuTempLiveLed",
label="Cpu Temp",
value=0,
color=lightColor[theme],
),
daq.LEDDisplay(
id="gpuTempLiveLed",
label="Gpu Temp",
value=0,
color=lightColor[theme],
),
]),
dcc.Graph(id="tempLiveGraph",
style={"width": "100%"}),
]),
html.Div(id="tempControlSection",
className="two columns",
style={"backgroundColor": cardColor[theme]},
children=[
html.Button("Reset Graph",
id="tempDataResetButton",
n_clicks=0,
className=textClassName[theme]),
daq.PowerButton(
id="tempStopButton",
color=lightColor[theme],
on=True,
size=120,
),
])
]),
html.Div(
id="usageSection",
style={"backgroundColor": cardColor[theme]},
children=[
html.H5("System Usage"),
dcc.Interval(
id='usageInterval',
interval=2 * 1000, # in milliseconds
n_intervals=0),
html.Div(id="usageGraphSection",
className="seven columns",
style={"backgroundColor": backgroundColor[theme]},
children=[
html.Div(id="usageGaugeDispSection",
style={
"backgroundColor":
cardColor[theme]
},
children=[
daq.Gauge(
id='cpuUsageLiveGauge',
min=0,
value=0,
max=100,
label="Cpu Usage",
color=lightColor[theme],
),
daq.Gauge(
id='memUsageLiveGauge',
min=0,
value=0,
label="Mem Usage",
max=100,
color=lightColor[theme],
),
]),
dcc.Graph(id="usageLiveGraph",
style={"width": "100%"}),
]),
html.Div(id="usageControlSection",
className="two columns",
style={"backgroundColor": cardColor[theme]},
children=[
html.Button("Reset Graph",
id="usageDataResetButton",
n_clicks=0,
className=textClassName[theme]),
daq.PowerButton(
id="usageStopButton",
color=lightColor[theme],
on=True,
size=120,
),
])
])
])
if theme == "dark":
return daq.DarkThemeProvider(children=bodyLayout)
if theme == "light":
return bodyLayout
dbc.NavLink("Page 1", href="/page-1", id="page-1-link", className='hidden'),
dbc.NavLink("Page 2", href="/page-2", id="page-2-link"),
dbc.NavLink("Page 3", href="/page-3", id="page-3-link"),
],
vertical=True,
pills=True,
className='hidden'
),
html.Div(id='audience-prediction', children=[]),
html.Div(id='approval-matrix', children=[]),
html.Div(children=daq.DarkThemeProvider(
theme=theme, children=[
daq.Gauge(
color={"gradient":True,"ranges":{"#e74c3c": [0,800],"#f39c12":[800,1600],"#00bc8c":[1600,2000]}},
showCurrentValue=True,
theme=theme,
units="LABELED ARTICLES",
value=0,
max=2000,
min=0,size=250,id='labeled-articles-count',
) ]))
]
)
],
style=SIDEBAR_STYLE,
)
from more_itertools import grouper
from spacy.lang.en import English
label='Ion Pump Check',
width = 30
)
])
])
])
################################### OVERALL LAYOUT #######################################
layout = [
dcc.Tabs(id="tabs", value='tab-1', children=[
dcc.Tab(id='tab1', label='KCWI Summary', value='tabs1', className='custom-tab'+class_theme['dark'],
selected_className='custom-tab--selected'+class_theme['dark'], disabled=True, children=[
html.Br(),
html.Div(id='dark-theme-component-demo',
children=daq.DarkThemeProvider(theme=theme, children=rootLayout1)),
dcc.Interval(id='polling-interval',
n_intervals=0,
interval=30*1000,
disabled=False
),
dcc.Store(id='annotations-storage',
data=[]
)
]),
dcc.Tab(id='tab2', label='KCWI Servers', value='tab2', className='custom-tab'+class_theme['dark'],
selected_className='custom-tab--selected'+class_theme['dark'], disabled=True, children=[
html.Div(id='dark-theme-component-demo2',
children=[
dcc.Tabs(id='subtabs', value='subtabs1', children=[
dcc.Tab(id='subtab4', label='Servers/Settings', value='subtab4', className='custom-tab'+class_theme['dark'],
layout = [
dcc.Tabs(
id="nirspec-tabs",
value='nirspec-tabs',
children=[
dcc.Tab(id='nirspec-tab1',
label='NIRSPEC Summary',
value='nirspec-tabs1',
className='custom-tab' + class_theme['dark'],
selected_className='custom-tab--selected' +
class_theme['dark'],
disabled=True,
children=[
html.Br(),
html.Div(id='nirspec-dark-theme-component-demo',
children=daq.DarkThemeProvider(
theme=theme, children=rootLayout1)),
dcc.Interval(id='nirspec-polling-interval',
n_intervals=0,
interval=30 * 1000,
disabled=False),
dcc.Store(id='nirspec-annotations-storage', data=[])
]),
dcc.Tab(id='nirspec-tab2',
label='NIRSPEC Servers',
value='tab2',
className='custom-tab' + class_theme['dark'],
selected_className='custom-tab--selected' +
class_theme['dark'],
disabled=True,
children=[
html.Div(
hidden=True,
)
]
dark_top_box = html.Div(className="container",
children=[dark_header] + [top_box],
style=dark_top_box_style)
dark_bottom_box = html.Div(className="container",
children=bottom_box,
style=dark_bottom_box_style)
light_top_box = html.Div(className="container",
children=[light_header, top_box])
light_bottom_box = html.Div(className="container", children=bottom_box)
dark_layout = html.Div([daq.DarkThemeProvider(dark_top_box), dark_bottom_box],
id='contentx',
style={
'color': '#2a3f5f',
'padding': '50px 50px 50px 50px',
})
light_layout = html.Div([
light_top_box,
light_bottom_box,
],
id='contentx',
style={
'color': '#F3F6FA',
'padding': '50px 50px 50px 50px',
})
label='Factory Data',
value='tabs1',
className='custom-tab',
selected_className='custom-tab--selected',
children=[
html.Br(),
daq.ToggleSwitch(id='daq-light-dark-theme',
label=['Light', 'Dark'],
style={
'width': '250px',
'margin': 'auto'
},
value=False),
html.Br(),
html.Div(id='dark-theme-component-demo',
children=daq.DarkThemeProvider(
theme=theme, children=rootLayout1)),
dcc.Interval(id='polling-interval',
n_intervals=0,
interval=1 * 1000,
disabled=False),
dcc.Store(id='annotations-storage', data=[])
]),
dcc.Tab(
id='tab2',
label='All Servers',
value='tab2',
className='custom-tab',
selected_className='custom-tab--selected',
children=[
html.Div(
id='dark-theme-component-demo2',
html.H4('Normal'),
html.P(pressureCheckQ['NORMAL'])
])
])
])
###################### OVERALL LAYOUT ######################
layout = [
dcc.Tabs(id="osiris-tabs", value='osiris-tabs', children=[
dcc.Tab(id='osiris-tab1', label='OSIRIS Summary', value='osiris-tabs1', className='custom-tab'+class_theme['dark'],
selected_className='custom-tab--selected', disabled=True, children=[
html.Br(),
html.Div(id='osiris-dark-theme-component-demo',
children=daq.DarkThemeProvider(theme=theme, children=rootLayout1)),
dcc.Interval(id='osiris-polling-interval',
n_intervals=0,
interval=30*1000,
disabled=False
),
dcc.Store(id='osiris-annotations-storage',
data=[]
)
]),
dcc.Tab(id='osiris-tab2', label='OSIRIS Servers', value='tab2', className='custom-tab'+class_theme['dark'],
selected_className='custom-tab--selected', disabled=True, children=[
html.Div(id='osiris-dark-theme-component-demo2',
children=[
dcc.Tabs(id='osiris-subtabs', value='subtabs1', children=[
dcc.Tab(id='osiris-subtab4', label='All Servers/Computers', value='subtab4', className='custom-tab'+class_theme['dark'],
width = 30
)
])
])
])
###################### OVERALL LAYOUT ######################
layout = [
dcc.Tabs(id="nirc2-tabs", value='nirc2-tabs', children=[
dcc.Tab(id='nirc2-tab1', label='NIRC2 Summary', value='nirc2-tabs1', className='custom-tab'+class_theme['dark'],
selected_className='custom-tab--selected', disabled=False, children=[
html.Br(),
html.Div(id='nirc2-dark-theme-component-demo',
children=daq.DarkThemeProvider(theme=theme, children=rootLayout1)),
dcc.Interval(id='nirc2-polling-interval',
n_intervals=0,
interval=30*1000,
disabled=False
),
dcc.Store(id='nirc2-annotations-storage',
data=[]
)
]),
dcc.Tab(id='nirc2-tab2', label='NIRC2 Temperatures', value='nirc2-tab2', className='custom-tab'+class_theme['dark'],
selected_className='custom-tab--selected', disabled=False, children=[
html.Div(id='nirc2-dark-theme-component-demo2',
children=daq.DarkThemeProvider(theme=theme, children=temperatureRoot2)),
dcc.Interval(id='nirc2-polling-interval2',
n_intervals=0,
app.layout = html.Div(id='main', children=[daq.DarkThemeProvider(theme=theme, children=[
# Element 1: Data File Selector
html.Div(
[
dcc.Dropdown(
id='brick_selector',
placeholder='Select FITS files...',
options=[
{'label': '{}'.format(i), 'value': i}
for i in filename_list
],
value=None,
multi=True
)
]
),
# Element 2: Data Amount Selector
html.Div(
[
dcc.Slider(
id='display_count_selection',
#placeholder='',
min=0,
max=display_count_max,
value=display_count,
step=display_count_step,
marks={
0: '0',
display_count_max: "{:,}".format(display_count_max)
}
)
],
style={'height':34, 'width':'97%', 'margin':'auto auto'}
#html.Div(id="selection-container")
),
# Element 3: New Subsample Generator
# To Be Coded
# Element 4: Axes selections, orientation, type
# Axis Selection
html.Div(
[
# 4.1: Select X-Axis
html.Div(
[
#html.H4('x-axis ', style={'display':'inline-block', 'width':60, 'margin': '0 auto', 'float':'left'}),
#html.Div([
dcc.Dropdown(
id='xaxis-column',
placeholder='Select X-Axis...',
options=[
{'label': i, 'value': i}
for i in selected_columns
],
value=settings['default_x_column']
),
#],
#style={'display':'inline-block', 'margin':'auto auto', 'width':'100%'}),
dcc.RadioItems(
id='xaxis-type',
options=[
{'label': i, 'value': i}
for i in ['Linear', 'Log']
],
value='Linear',
labelStyle={'display': 'inline-block'}
),
dcc.RadioItems(
id='xaxis-orientation',
options=[
{'label': i, 'value': i}
for i in ['increasing', 'reversed']
],
value='increasing',
labelStyle={'display': 'inline-block'}
)
],
style={'width': '48%', 'display': 'inline-block'}
),
# 4.2: Select Y-Axis
html.Div(
[
dcc.Dropdown(
id='yaxis-column',
placeholder='Select Y-Axis...',
options=[
{'label': i, 'value': i}
for i in selected_columns
],
value=settings['default_y_column']
),
dcc.RadioItems(
id='yaxis-type',
options=[
{'label': i, 'value': i}
for i in ['Linear', 'Log']
],
value='Linear',
labelStyle={'display': 'inline-block'}
),
dcc.RadioItems(
id='yaxis-orientation',
options=[
{'label': i, 'value': i}
for i in ['increasing', 'reversed']
],
value='increasing',
labelStyle={'display': 'inline-block'}
)
],
style={'width': '48%', 'float': 'right', 'display': 'inline-block'}
),
]
),
# Element 5: Color coding
html.Div(
[
dcc.Dropdown(
id='color-column',
placeholder='Select Color-Axis...',
options=[
{'label': i, 'value': i}
for i in selected_columns
],
value=None
),
]
),
# Element 6: Size coding
html.Div(
[
dcc.Dropdown(
id='size-column',
placeholder='Select Size-Axis...',
options=[
{'label': i, 'value': i}
for i in selected_columns
],
value=None
),
]
),
# Graph 1: Scatter Plot
dcc.Graph(id='indicator-graphic'),
# Element 8: Download Selection
html.A(
'Download *SELECTED* Data',
id='download-selection',
#download="rawdata.fits",
href="",
target="_blank"
),
html.Br(),
# Element 9: Download entire brick
html.A(
'Download *FULL* Data',
id='download-full-link',
download="rawdata.fits",
href="",
target="_blank"
),
html.Br(),
# Dark theme button
daq.ToggleSwitch(
id='toggle-theme',
label=['Light', 'Dark'],
value=True
),
html.Br(),
])], style={'border': 'solid 1px #A2B1C6', 'border-radius': '5px', 'padding': '50px', 'margin-top': '20px'})
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
def turn_dark(dark_theme):
if dark_theme:
theme.update(dark=True)
else:
theme.update(dark=False)
return daq.DarkThemeProvider(theme=theme, children=root_layout)
