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 knobs(cur_input, cur_tab):
return html.Div(
[
daq.Knob(
value=cur_input[cur_tab]["frequency_input"],
id="frequency-input",
label="Frequency (Hz)",
labelPosition="bottom",
size=70,
color=theme["primary"],
max=2500000,
min=1e5,
style={"background": "transparent"},
className="four columns",
),
daq.Knob(
value=cur_input[cur_tab]["amplitude_input"],
id="amplitude-input",
label="Amplitude (mV)",
labelPosition="bottom",
size=70,
scale={"labelInterval": 10},
color=theme["primary"],
max=10,
min=0,
className="four columns",
),
daq.Knob(
value=cur_input[cur_tab]["offset_input"],
id="offset-input",
label="Offset (mV)",
labelPosition="bottom",
size=72,
scale={"labelInterval": 10},
color=theme["primary"],
max=10,
min=0,
className="four columns",
),
],
className="knobs",
)
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 enable_disable_light_intensity(ls, pwr):
disable = not (pwr and ls != "" and ls is not None)
return [
daq.Knob(id='light-intensity-knob',
size=110,
color=colors['accent'],
scale={
'interval': '1',
'labelInterval': '1'
},
disabled=disable)
]
def preserve_set_light_intensity(intensity, ls, pwr):
if ls != "" and ls is not None:
spec.send_light_intensity(ls, intensity)
disable = not (pwr and ls != "" and ls is not None)
return [
daq.Knob(
id="light-intensity-knob",
size=110,
color=colors["accent"],
scale={"interval": "1", "labelInterval": "1"},
disabled=disable,
value=intensity,
)
]
def knobs(cur_input, cur_tab):
return html.Div([
daq.Knob(value=cur_input[cur_tab]['frequency_input'],
id="frequency-input",
label="Frequency (Hz)",
labelPosition="bottom",
size=75,
color=theme['primary'],
scale={'interval': 100000},
max=2500000,
min=100000,
className='four columns'),
daq.Knob(value=cur_input[cur_tab]['amplitude_input'],
id="amplitude-input",
label="Amplitude (mV)",
labelPosition="bottom",
size=75,
scale={'labelInterval': 10},
color=theme['primary'],
max=10,
min=0,
className='four columns'),
daq.Knob(value=cur_input[cur_tab]['offset_input'],
id="offset-input",
label="Offset (mV)",
labelPosition="bottom",
size=75,
scale={'labelInterval': 10},
color=theme['primary'],
max=10,
min=0,
className='four columns')
],
style={
'marginLeft': '20%',
'textAlign': 'center'
})
def preserve_set_light_intensity(intensity, ls, pwr):
if ls != "" and ls is not None:
spec.send_light_intensity(ls, intensity)
disable = not (pwr and ls != "" and ls is not None)
return [
daq.Knob(id='light-intensity-knob',
size=110,
color=colors['accent'],
scale={
'interval': '1',
'labelInterval': '1'
},
disabled=disable,
value=intensity)
]
def hide_graph(clicked: int, timestamp, data, content):
if timestamp is None:
raise PreventUpdate
xs = data.get('lastXs')
ys = data.get('lastYs')
if len(xs) > 1:
x_prev = xs[-2]
y_prev = ys[-2]
x = xs[-1]
y = ys[-1]
else:
x_prev = y_prev = x = y = None
KNOB = sd_material_ui.Paper(zDepth=1,
style=dict(height=625, width=750),
children=[
html.Div([
daq.Knob(label="Gradient Ranges",
value=7,
size=500,
color={
"gradient": True,
"ranges": {
"red": [0, 5],
"yellow": [5, 9],
"green": [9, 10]
}
},
style=dict(
position='relative',
top='25px',
left='0px'))
])
]),
if x_prev != x or y_prev != y: # Moved
return content
else:
if content is None or content == []:
return KNOB
elif content:
return []
html.Img(
src=app.get_asset_url("dash-daq-logo.png"), className="logo"
),
html.Div(
id="controls",
title="All of the spectrometer parameters that can be changed.",
children=[ctrl.create_ctrl_div(True) for ctrl in controls],
),
html.Div(html.Label("Light Intensity"), className="control"),
html.Div(
[
html.Div(
[
daq.Knob(
id="light-intensity-knob",
size=110,
color="#565656",
value=0,
)
],
id="light-intensity-knob-container",
)
],
className="control",
),
html.Div(
[
html.Div([html.Label("Autoscale Plot")]),
html.Div(
[
daq.BooleanSwitch(
id="autoscale-switch", color="#565656", on=True
],
style={
'width': '98vw',
'textAlign': 'center',
'margin': 'auto'
})
shared = html.Div(id='shared-info', style={'display': 'none'})
lookback_knob = html.Div([
daq.Knob(id='lookback-knob',
label='Keep on',
size=90,
max=10,
value=default_lookback,
scale={
'start': 0,
'labelInterval': 10,
'interval': 1
},
theme=theme),
html.Div(id='lookback-knob-output', style={'display': 'none'})
],
style={
'width': '10%',
'display': 'inline-block'
})
noise_knob = html.Div([
daq.Knob(id='noise-knob',
label='Drunk',
'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 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
}
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)
else:
theme.update(dark=False)
),
html.Br(),
html.Div(
id="mode-set",
children=[
html.H5(id="word", style={"textAlign": "center"})
],
),
html.Div(
[
daq.Knob(
id="stepper-velocity",
label="Velocity (Steps)",
color="default",
max=51200,
min=0,
value=0,
size=75,
scale={"interval": 12800},
className="three columns",
style={"marginLeft": "17%", "textAlign": "center"},
),
daq.Knob(
id="stepper-position",
label="Position (Degree)",
color="default",
max=360,
min=0,
value=0,
size=75,
scale={"interval": 90},
className="three columns",
import dash
import dash_daq as daq
import dash_html_components as html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([daq.Knob(id='my-knob', ), html.Div(id='knob-output')])
@app.callback(dash.dependencies.Output('knob-output', 'children'),
[dash.dependencies.Input('my-knob', 'value')])
def update_output(value):
return 'The knob value is {}.'.format(value)
if __name__ == '__main__':
app.run_server(debug=True)
],
className='six columns',
style={'margin-bottom': '15px'}),
], style={'margin': '15px 0'})
], className='row power-settings-tab'),
html.Div([
html.Div(
[html.H3("FUNCTION", id="function-title")],
className='Title'),
html.Div([
daq.Knob(
value=1E6,
id="frequency-input",
label="Frequency (Hz)",
labelPosition="bottom",
size=75,
color="#447EFF",
scale={'interval': 1E5},
max=2.5E6,
min=1E5,
className='four columns'
),
daq.Knob(
value=1,
id="amplitude-input",
label="Amplitude (mV)",
labelPosition="bottom",
size=75,
scale={'labelInterval': 10},
color="#447EFF",
max=10,
className='four columns'
def PDF_report_options(options=None):
"""
Generate the layout of the PDF generator.
Optional Args:
options (list(dict)): Not relevant; here only for API compatibility.
Returns:
A Dash element or list of elements.
"""
return html.Div([
html.Button("Render & Finalise!", id="render_PDF"),
html.Div([
# header
html.Div([
dcc.Textarea(id="header_input"),
], className="row", id="header_text"),
# first row
html.Div([
html.Div([
dcc.Textarea(id="row1_header_input"),
], className="col-sm-12 col_header", id="row1_header_text"),
# first four columns of row
html.Div([
dcc.Textarea(id="row1col1_input"),
], className="col-sm-4", id="row1col1"),
# second eight columns of row
html.Div([
dcc.Graph(id="graph12",
figure={
'data': [],
'layout': layouts.PDF_Layout1.first_figure,
},
# hide upper plotly menu
config={'displayModeBar': False}),
], className="col-sm-8"),
], className="row"),
# second row
html.Div([
html.H3("Row2 header", className="col-sm-12 col_header"),
# first sub-row
# first eight columns of row
html.Div([
dcc.Graph(id="graph21",
figure={
'data': [],
'layout': layouts.PDF_Layout1.second_figure,
},
# hide upper plotly menu
config={'displayModeBar': False}),
], className="col-sm-8"),
# last four columns of row, (1st subrow)
html.Div([
html.P("Lorem ipsum dolor sit amet, consectetur "
" adipisicing elit, sed do eiusmod tempor "
"incididunt ut labore et dolore magna aliqua. "
" Ut enim ad minim veniam, quis nostrud "
"exercitation ullamco laboris nisi ut aliquip "
"ex ea commodo consequat. Duis aute irure "
"dolor in reprehenderit in voluptate velit "
"esse cillum dolore eu fugiat nulla "
"pariatur. Excepteur sint occaecat cupidatat "
"non proident, sunt in culpa qui officia "
"deserunt mollit anim id est laborum."),
], className="col-sm-4"),
# second sub-row
html.Br(),
# first eight columns of row, (1st subrow)
html.Div([
html.P("Lorem ipsum dolor sit amet, consectetur "
"adipisicing elit, sed do eiusmod tempor "
"incididunt ut labore et dolore magna aliqua. "
"Ut enim ad minim veniam, quis nostrud "
"exercitation ullamco laboris nisi ut aliquip "
"ex ea commodo consequat. Duis aute irure "
"dolor in reprehenderit in voluptate velit esse "
" cillum dolore eu fugiat nulla "
"pariatur. Excepteur sint occaecat cupidatat "
"non proident, sunt in culpa qui officia "
"deserunt mollit anim id est laborum."),
], className="col-sm-8"),
# last four columns of row
html.Div([
daq.Knob(
id='my-daq-knob',
max=10,
min=0
)
], className="col-sm-4"),
], className="row"),
# footer
html.Div([
html.H4("Nothing in the footer",
className="col-sm-12 col_header")
], className="row", style={"backgroundColor": "red"}),
], className="container", id="printablePDF")
])
{'label': 'Savage', 'value': 'Savage_Main'},
{'label': 'DihorOtok', 'value': 'DihorOtok_Main'}
],
value='Erangel_Main',
className='mb-6',
),
html.Br(),
dcc.Markdown(
'#### Walk distance 🏃 (How far can you run?)(in meters)'),
daq.Knob(
id='walk_distance',
min=0,
max=15000,
value=500,
color={"gradient": True, "ranges": {
"#77E856": [0, 2000], "#FFE55F":[2000, 13000], "#EF584A":[13000, 15000]}},
className='mb-6',
),
html.Br(),
dcc.Markdown(
'#### Ride distance 🏎️ (How far can you ride?)(in meters)'),
daq.Knob(
id='ride_distance',
min=0,
max=20000,
value=0,
color={"gradient": True, "ranges": {
# *************************************************************************
app.layout = html.Div([
html.Div(
[
html.H1("Room Temperature"),
html.Div(
daq.Knob(
id="my-knob",
label="Set Temperature",
min=30,
max=100,
value=40,
scale={
"start": 40,
"labelInterval": 10,
"interval": 10
},
color={
"gradient": True,
"ranges": {
"blue": [30, 75],
"red": [75, 100]
},
},
),
className="two columns",
),
html.Div(
daq.Thermometer(id="my-thermometer", min=30, max=99, value=40),
className="three columns",
),
Knob = html.Div(children=[
html.H1('Knob Examples and Reference'),
html.Hr(),
html.H3('Default Knob'),
reusable_components.Markdown("An example of a default Knob without \
any extra properties."),
reusable_components.Markdown(
examples['knob'][0],
style=styles.code_container
),
html.Div(
examples['knob'][1],
className='example-container',
style={'overflow-x': 'initial'}
),
html.Hr(),
html.H3('Size'),
reusable_components.Markdown("Set the size(diameter) of the knob in pixels with `size`."),
ComponentBlock('''import dash_daq as daq
daq.Knob(
size=140,
value=3
)''', style=styles.code_container),
html.Hr(),
html.H3('Max'),
reusable_components.Markdown("Set the maximum value of the knob using `max`."),
ComponentBlock('''import dash_daq as daq
daq.Knob(
max=100,
value=3
)''', style=styles.code_container),
html.Hr(),
html.H3('Color Ranges'),
reusable_components.Markdown("Control color ranges with: \
\n `color={'ranges':{'<color>':[<value>,<value>],'<color>':[<value>,<value>], '<color>':[<value>,<value>]}}`."),
ComponentBlock('''import dash_daq as daq
daq.Knob(
label="Color Ranges",
value=3,
color={"ranges":{"green":[0,5],"yellow":[5,9],"red":[9,10]}}
)''', style=styles.code_container),
html.Hr(),
html.H3('Color Gradient'),
reusable_components.Markdown("Set up a color gradient with: \
\n `color={'gradient':True,'ranges':{'<color>':[<value>,<value>],'<color>':[<value>,<value>], '<color>':[<value>,<value>]}}`."),
ComponentBlock('''import dash_daq as daq
daq.Knob(
label="Gradient Ranges",
value=7,
color={"gradient":True,"ranges":{"green":[0,5],"yellow":[5,9],"red":[9,10]}}
)''', style=styles.code_container),
html.Hr(),
html.H3('Scale'),
reusable_components.Markdown("Adjust the scale interval, label interval, \
and start of the scale with `scale`."),
ComponentBlock('''import dash_daq as daq
daq.Knob(
label="Scale",
value=7,
max=18,
scale={'start':0, 'labelInterval': 3, 'interval': 3}
)''', style=styles.code_container),
html.Hr(),
html.H3("Knob Properties"),
generate_prop_info('Knob', lib=daq)
])
# href="data:text/csv;charset=iso-8859-1," + urllib.parse.quote(df.to_csv(index=False, sep=';', encoding='iso-8859-1').encode('iso-8859-1')),
# target="_blank",
# style={'margin-top': '20px', 'display': 'block'},
# ),
# html.A(
# 'Télécharger les ordres/avis',
# id='download_link',
# download="DONNEES.csv",
# href="data:text/csv;charset=iso-8859-1," + urllib.parse.quote(
# df.to_csv(index=False, sep=';', encoding='iso-8859-1').encode('iso-8859-1')),
# target="_blank"
# ),
html.A('Download CSV', id='my-link'),
daq.Knob(id='my-daq-knob',
value=8,
max=10,
min=0),
],
style={'margin-top': '10px'},
id='div-interval-control',
className='row'),
],
className="two columns sticky",
style={
'border-left:': '10px',
'margin-top': '20px'
}),
dash_table.DataTable(id='datatable-upload-container'),
],
className="row"),
],
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.Knob(id='my-daq-knob', min=0, max=10, value=8)])
if __name__ == '__main__':
app.run_server(debug=True)
html.H1(children='Xander... the Cat!!!! .....Long term.....'),
html.Div(children='''
Long Term Analysis!!!.
'''),
##################################### Next Line #############################
html.Div([
daq.Knob(id='my-knob',
label="Data Quality, Cover Ratio",
max=100,
value=90,
scale={
'start': 0,
'labelInterval': 10,
'interval': 5
},
color={
"gradient": True,
"ranges": {
"red": [0, 50],
"yellow": [50, 89],
"green": [89, 100]
}
}),
html.Div(id='knob-output')
],
style={
'width': '50%',
'display': 'inline-block'
}),
html.Div([
]
)
# ---- 06. mode switch
mode_switch = daq.BooleanSwitch(
id='mode_switch',
on=False,
label='Instant Update',
labelPosition='top',
),
# ---- 07. Icon nob
icon_nob = daq.Knob(
label="Display length (mins)",
size=100,
value=5,
max=5,
scale={'start': 0, 'labelInterval': 1, 'interval': 0.5},
id="win_nob"
)
# ---- 08. Tabs
tab_style = {
'borderBottom': '1px solid #d6d6d6',
'padding': '6px',
'fontWeight': 'bold'
}
tab_selected_style = {
'borderTop': '1px solid #d6d6d6',
'borderBottom': '1px solid #d6d6d6',
'backgroundColor': '#119DFF',
'color': 'white',
daq.GraduatedBar(
value=4,
color=theme['primary'],
id='darktheme-daq-graduatedbar',
className='dark-theme-control'
), html.Br(),
daq.Indicator(
value=True,
color=theme['primary'],
id='darktheme-daq-indicator',
className='dark-theme-control'
), html.Br(),
daq.Knob(
min=0,
max=10,
value=6,
id='darktheme-daq-knob',
className='dark-theme-control'
), html.Br(),
daq.LEDDisplay(
value="3.14159",
color=theme['primary'],
id='darktheme-daq-leddisplay',
className='dark-theme-control'
), html.Br(),
daq.NumericInput(
min=0,
max=10,
value=4,
id='darktheme-daq-numericinput',
className='dark-theme-control'
dbc.Label("Tracking File:"),
dbc.Select(
id="tracking-file",
options=[{
"label": i,
"value": i
} for i in tracking_files],
value=None,
placeholder="Select a file for tracking",
),
]),
dbc.Card(
daq.Knob(
id="speed-knob",
label="Playback Speed",
value=2.5,
max=5,
color={"default": "#3598DC"},
size=100,
)),
dbc.Button("Submit", className="mr-2", id="submit-button", color="info"),
]
# Configure main app layout
app.layout = dbc.Container(
fluid=True,
children=[
html.Header([html.H3("Match Analysis Tool")]),
dbc.Card(dbc.Row([dbc.Col(c) for c in static_graph_controls],
form=True),
body=True),
dbc.Row(
sources['power'] = sources['power_density'] * sources['area'] / 1000. * 24
# sources['power'] = 20
# sources['area'] = sources['power'] / sources['power_density'] * 1000 / 24.
# sources['cumulative_power'] = sources['power'].cumsum()
knobs = []
inputs = []
states = []
for source in sources['source']:
knobs += [
daq.Knob(
id=source.lower(),
min=0,
max=500 if source != 'Plants' else 1000,
value=10,
label=source,
size=64,
style={'display': 'inline-block'},
),
]
inputs += [Input(source.lower(), 'value')]
states += [State(source.lower(), 'label')]
app.layout = html.Div(children=[
html.H1(children='A plan that adds up', style={
'text-align': 'center',
}),
html.Div(children=[
html.Div(
id='knobs',
"paddingBottom": "3%",
},
),
html.Div([
daq.Knob(
id="knob-pitch",
label=" ",
size=100,
value=261,
color="#FF5E5E",
max=440,
min=261,
scale={
"custom": {
"440": "A",
"415": "G#",
"392": "G",
"370": "F#",
"349": "F",
"330": "E",
"311": "D#",
"294": "D",
"277": "C#",
"261": "C",
}
},
),
daq.StopButton(
id="stop-beep",
buttonText="Beep",
style={
def image_edit_tab(app):
return html.Div([
content_header('Image Editing', 'Draw on images'),
html.P('Users can edit images directly by drawing on them, or just draw on a blank canvas!'),
html.Br(),
html.P('Step 1: Upload an image (optional)'),
html.P('Step 2: Start drawing!'),
html.Div([
# Left item
html.Div([
html.Div([
dcc.Upload([
html.Img(src=app.get_asset_url('upload.svg')),
html.Span('Drag and drop image here, or click to upload')
],
id='upload-image',
multiple=False
),
],
id='div-image-input',
className='div-with-image small-image'
),
html.Br(),
html.Div([
DashCanvas(
id='image-canvas',
width=600,
height=400,
goButtonTitle='Save',
hide_buttons=['zoom', 'line', 'rectangle', 'select'],
),
html.Button(
'clear',
id='button-canvas-clear',
style={
'float': 'right',
'transform': 'translateY(-58px)'
}
)
],
id='div-image-output'
)
],
className='custom-dark-div custom-div-left custom-div-space-above custom-div-large-full'
),
# Right item
html.Div([
html.P('Brush width'),
daq.Knob(
id='knob-canvas',
min=2,
max=40,
value=5
),
html.Button(
html.P('-', style={'font-size': '2em'}),
id='button-image-minus',
style={
'display': 'inline-block',
'margin': 0,
'margin-right': '10px',
'transform': 'translateY(-50px)',
}
),
html.Button(
html.P('+', style={'font-size': '2em'}),
id='button-image-plus',
style={
'display': 'inline-block',
'margin': 0,
'transform': 'translateY(-50px)',
}
),
html.P('Brush colour'),
daq.ColorPicker(
id='image-color-picker',
label=' ',
value=dict(hex='#119DFF'),
style={
'border': 'none',
'overflow': 'hidden'
}
)
],
className='custom-div-center custom-div-space-above custom-div-smaller'
),
# Bottom item
html.Div(
id='image-result'
)
],
className='custom-container'
)
])
],
className='six columns',
style={'margin-bottom': '15px'}),
],
style={'margin': '15px 0'})
],
className='row power-settings-tab'),
html.Div([
html.Div([html.H3("FUNCTION", id="function-title")],
className='Title'),
html.Div([
daq.Knob(value=fgen.get_frequency(),
id="frequency-input",
label="Frequency (Hz)",
labelPosition="bottom",
size=75,
color="#447EFF",
scale={'interval': 1E5},
max=2.5E6,
min=1E5,
className='four columns'),
daq.Knob(value=fgen.get_amplitude(),
id="amplitude-input",
label="Amplitude (mV)",
labelPosition="bottom",
size=75,
scale={'labelInterval': 10},
color="#447EFF",
max=10,
className='four columns'),
daq.Knob(value=fgen.get_offset(),
id="offset-input",
