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')
])
],
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"
})
html.Div(children=[
"""Choose the input (predefined, i.e. constitution) or custom input""",
dcc.RadioItems(id="choice",
options=[
{
'label': 'predefined',
'value': 'constitution'
},
{
'label': 'custom input',
'value': 'input'
},
],
value='constitution'),
dcc.Textarea(id="custom_input",
placeholder='Enter a value...',
value='This is a TextArea component',
style={'width': '100%'}),
]),
html.Span(children=[
"Count of most occuring words: ",
dcc.Input(id="count", value=100, type="number")
]),
html.Div(children=[
html.Div(children=[
"Scale: ",
dcc.RadioItems(id="scale",
options=[
{
'label': '√n',
'value': 'sqrt'
},
def test_clsd002_chained_serverside_clientside_callbacks(dash_duo):
app = Dash(__name__, assets_folder="assets")
app.layout = html.Div([
html.Label("x"),
dcc.Input(id="x", value=3),
html.Label("y"),
dcc.Input(id="y", value=6),
# clientside
html.Label("x + y (clientside)"),
dcc.Input(id="x-plus-y"),
# server-side
html.Label("x+y / 2 (serverside)"),
dcc.Input(id="x-plus-y-div-2"),
# server-side
html.Div([
html.Label("Display x, y, x+y/2 (serverside)"),
dcc.Textarea(id="display-all-of-the-values"),
]),
# clientside
html.Label("Mean(x, y, x+y, x+y/2) (clientside)"),
dcc.Input(id="mean-of-all-values"),
])
app.clientside_callback(
ClientsideFunction("clientside", "add"),
Output("x-plus-y", "value"),
[Input("x", "value"), Input("y", "value")],
)
call_counts = {"divide": Value("i", 0), "display": Value("i", 0)}
@app.callback(Output("x-plus-y-div-2", "value"),
[Input("x-plus-y", "value")])
def divide_by_two(value):
call_counts["divide"].value += 1
return float(value) / 2.0
@app.callback(
Output("display-all-of-the-values", "value"),
[
Input("x", "value"),
Input("y", "value"),
Input("x-plus-y", "value"),
Input("x-plus-y-div-2", "value"),
],
)
def display_all(*args):
call_counts["display"].value += 1
return "\n".join([str(a) for a in args])
app.clientside_callback(
ClientsideFunction("clientside", "mean"),
Output("mean-of-all-values", "value"),
[
Input("x", "value"),
Input("y", "value"),
Input("x-plus-y", "value"),
Input("x-plus-y-div-2", "value"),
],
)
dash_duo.start_server(app)
test_cases = [
["#x", "3"],
["#y", "6"],
["#x-plus-y", "9"],
["#x-plus-y-div-2", "4.5"],
["#display-all-of-the-values", "3\n6\n9\n4.5"],
["#mean-of-all-values",
str((3 + 6 + 9 + 4.5) / 4.0)],
]
for selector, expected in test_cases:
dash_duo.wait_for_text_to_equal(selector, expected)
assert call_counts["display"].value == 1
assert call_counts["divide"].value == 1
x_input = dash_duo.wait_for_element_by_css_selector("#x")
x_input.send_keys("1")
test_cases = [
["#x", "31"],
["#y", "6"],
["#x-plus-y", "37"],
["#x-plus-y-div-2", "18.5"],
["#display-all-of-the-values", "31\n6\n37\n18.5"],
["#mean-of-all-values",
str((31 + 6 + 37 + 18.5) / 4.0)],
]
for selector, expected in test_cases:
dash_duo.wait_for_text_to_equal(selector, expected)
assert call_counts["display"].value == 2
assert call_counts["divide"].value == 2
def platter_app():
app = Dash(__name__)
app.layout = html.Div(
[
html.Div(id="waitfor"),
html.Label("Upload"),
dcc.Upload(),
html.Label("Horizontal Tabs"),
dcc.Tabs(
id="tabs",
children=[
dcc.Tab(
label="Tab one",
className="test",
style={"border": "1px solid magenta"},
children=[html.Div(["Test"])],
),
dcc.Tab(
label="Tab two",
children=[
html.Div(
[
html.H1("This is the content in tab 2"),
html.P("A graph here would be nice!"),
]
)
],
id="tab-one",
),
dcc.Tab(
label="Tab three",
children=[html.Div([html.H1("This is the content in tab 3")])],
),
],
style={"fontFamily": "system-ui"},
content_style={"border": "1px solid #d6d6d6", "padding": "44px"},
parent_style={"maxWidth": "1000px", "margin": "0 auto"},
),
html.Label("Vertical Tabs"),
dcc.Tabs(
id="tabs1",
vertical=True,
children=[
dcc.Tab(label="Tab one", children=[html.Div(["Test"])]),
dcc.Tab(
label="Tab two",
children=[
html.Div(
[
html.H1("This is the content in tab 2"),
html.P("A graph here would be nice!"),
]
)
],
),
dcc.Tab(
label="Tab three",
children=[html.Div([html.H1("This is the content in tab 3")])],
),
],
),
html.Label("Dropdown"),
dcc.Dropdown(options=OPTIONS, value="MTL", id="dropdown"),
html.Label("Multi-Select Dropdown"),
dcc.Dropdown(options=OPTIONS, value=["MTL", "SF"], multi=True),
html.Label("Radio Items"),
dcc.RadioItems(options=OPTIONS, value="MTL"),
html.Label("Checkboxes"),
dcc.Checklist(options=OPTIONS, value=["MTL", "SF"]),
html.Label("Text Input"),
dcc.Input(value="", placeholder="type here", id="textinput"),
html.Label("Disabled Text Input"),
dcc.Input(
value="disabled",
type="text",
id="disabled-textinput",
disabled=True,
),
html.Label("Slider"),
dcc.Slider(
min=0,
max=9,
marks={
i: "Label {}".format(i) if i == 1 else str(i) for i in range(1, 6)
},
value=5,
),
html.Label("Graph"),
dcc.Graph(
id="graph",
figure={
"data": [{"x": [1, 2, 3], "y": [4, 1, 4]}],
"layout": {"title": u"北京"},
},
),
html.Div(
[
html.Label("DatePickerSingle"),
dcc.DatePickerSingle(
id="date-picker-single", date=datetime(1997, 5, 10)
),
html.Div(
[
html.Label("DatePickerSingle - empty input"),
dcc.DatePickerSingle(),
],
id="dt-single-no-date-value",
),
html.Div(
[
html.Label(
"DatePickerSingle - initial visible month (May 97)"
),
dcc.DatePickerSingle(
initial_visible_month=datetime(1997, 5, 10)
),
],
id="dt-single-no-date-value-init-month",
),
]
),
html.Div(
[
html.Label("DatePickerRange"),
dcc.DatePickerRange(
id="date-picker-range",
start_date_id="startDate",
end_date_id="endDate",
start_date=datetime(1997, 5, 3),
end_date_placeholder_text="Select a date!",
),
html.Div(
[
html.Label("DatePickerRange - empty input"),
dcc.DatePickerRange(
start_date_id="startDate",
end_date_id="endDate",
start_date_placeholder_text="Start date",
end_date_placeholder_text="End date",
),
],
id="dt-range-no-date-values",
),
html.Div(
[
html.Label(
"DatePickerRange - initial visible month (May 97)"
),
dcc.DatePickerRange(
start_date_id="startDate",
end_date_id="endDate",
start_date_placeholder_text="Start date",
end_date_placeholder_text="End date",
initial_visible_month=datetime(1997, 5, 10),
),
],
id="dt-range-no-date-values-init-month",
),
]
),
html.Label("TextArea"),
dcc.Textarea(placeholder="Enter a value... 北京", style={"width": "100%"}),
html.Label("Markdown"),
dcc.Markdown(
"""
#### Dash and Markdown
Dash supports [Markdown](https://rexxars.github.io/react-markdown/).
Markdown is a simple way to write and format text.
It includes a syntax for things like **bold text** and *italics*,
[links](https://rexxars.github.io/react-markdown/), inline `code` snippets, lists,
quotes, and more.
1. Links are auto-rendered: https://dash.plotly.com.
2. This uses ~commonmark~ GitHub flavored markdown.
Tables are also supported:
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
北京
""".replace(
" ", ""
)
),
dcc.Markdown(["# Line one", "## Line two"]),
dcc.Markdown(),
dcc.Markdown(
"""
```py
import python
print(3)
```"""
),
dcc.Markdown(["```py", "import python", "print(3)", "```"]),
dcc.Markdown(),
]
)
yield app
def test_msps001_basic_persistence(dash_dcc):
app = Dash(__name__)
app.layout = html.Div([
dcc.Checklist(
id="checklist",
options=[
{
"label": u"Slow 🐢",
"value": u"🐢"
},
{
"label": u"Fast 🏎️",
"value": u"🏎️"
},
{
"label": u"Faster 🚀",
"value": u"🚀"
},
],
value=[u"🏎️"],
persistence=True,
),
dcc.DatePickerRange(
id="datepickerrange",
start_date="2017-08-21",
end_date="2024-04-08",
start_date_id="start_date",
end_date_id="end_date",
initial_visible_month="2019-05-01",
persistence=True,
),
dcc.DatePickerSingle(id="datepickersingle",
date="2019-01-01",
persistence=True),
dcc.Dropdown(
id="dropdownsingle",
options=[
{
"label": u"One 1️⃣",
"value": u"1️⃣"
},
{
"label": u"Two 2️⃣",
"value": u"2️⃣"
},
{
"label": u"Three 3️⃣",
"value": u"3️⃣"
},
],
value=u"2️⃣",
persistence=True,
),
dcc.Dropdown(
id="dropdownmulti",
options=[
{
"label": u"Four 4️⃣",
"value": u"4️⃣"
},
{
"label": u"Five 5️⃣",
"value": u"5️⃣"
},
{
"label": u"Six 6️⃣",
"value": u"6️⃣"
},
],
value=[u"4️⃣"],
multi=True,
persistence=True,
),
dcc.Input(id="input", value="yes", persistence=True),
dcc.RadioItems(
id="radioitems",
options=[
{
"label": "Red",
"value": "r"
},
{
"label": "Green",
"value": "g"
},
{
"label": "Blue",
"value": "b"
},
],
value="b",
persistence=True,
),
dcc.RangeSlider(id="rangeslider",
min=0,
max=10,
value=[3, 7],
persistence=True),
dcc.Slider(id="slider", min=20, max=30, value=25, persistence=True),
dcc.Tabs(
id="tabs",
children=[
dcc.Tab(label="Eh?", children="Tab A", value="A"),
dcc.Tab(label="Bee", children="Tab B", value="B"),
dcc.Tab(label="Sea", children="Tab C", value="C"),
],
value="A",
persistence=True,
),
dcc.Textarea(id="textarea", value="knock knock", persistence=True),
html.Div(id="settings"),
])
@app.callback(
Output("settings", "children"),
[
Input("checklist", "value"),
Input("datepickerrange", "start_date"),
Input("datepickerrange", "end_date"),
Input("datepickersingle", "date"),
Input("dropdownsingle", "value"),
Input("dropdownmulti", "value"),
Input("input", "value"),
Input("radioitems", "value"),
Input("rangeslider", "value"),
Input("slider", "value"),
Input("tabs", "value"),
Input("textarea", "value"),
],
)
def make_output(*args):
return json.dumps(args)
initial_settings = [
[u"🏎️"],
"2017-08-21",
"2024-04-08",
"2019-01-01",
u"2️⃣",
[u"4️⃣"],
"yes",
"b",
[3, 7],
25,
"A",
"knock knock",
]
dash_dcc.start_server(app)
dash_dcc.wait_for_text_to_equal("#settings", json.dumps(initial_settings))
dash_dcc.find_element("#checklist label:last-child input").click() # 🚀
dash_dcc.select_date_range("datepickerrange", day_range=(4, ))
dash_dcc.select_date_range("datepickerrange",
day_range=(14, ),
start_first=False)
dash_dcc.find_element("#datepickersingle input").click()
dash_dcc.select_date_single("datepickersingle", day="20")
dash_dcc.find_element("#dropdownsingle .Select-input input").send_keys(
"one" + Keys.ENTER)
dash_dcc.find_element("#dropdownmulti .Select-input input").send_keys(
"six" + Keys.ENTER)
dash_dcc.find_element("#input").send_keys(" maybe")
dash_dcc.find_element("#radioitems label:first-child input").click() # red
range_slider = dash_dcc.find_element("#rangeslider")
dash_dcc.click_at_coord_fractions(range_slider, 0.5, 0.25) # 5
dash_dcc.click_at_coord_fractions(range_slider, 0.8, 0.25) # 8
slider = dash_dcc.find_element("#slider")
dash_dcc.click_at_coord_fractions(slider, 0.2, 0.25) # 22
dash_dcc.find_element("#tabs .tab:last-child").click() # C
dash_dcc.find_element("#textarea").send_keys(Keys.ENTER + "who's there?")
edited_settings = [
[u"🏎️", u"🚀"],
"2019-05-04",
"2019-05-14",
"2019-01-20",
u"1️⃣",
[u"4️⃣", u"6️⃣"],
"yes maybe",
"r",
[5, 8],
22,
"C",
"knock knock\nwho's there?",
]
dash_dcc.wait_for_text_to_equal("#settings", json.dumps(edited_settings))
# now reload the page - all of these settings should persist
dash_dcc.wait_for_page()
dash_dcc.wait_for_text_to_equal("#settings", json.dumps(edited_settings))
assert dash_dcc.get_logs() == []