Dash is a web application framework that provides pure Python abstraction
around HTML, CSS, and JavaScript.
Dash DAQ comprises a robust set of controls that make it simpler to
integrate data acquisition and controls into your Dash applications.
The source is on GitHub at plotly/dash-daq.
These docs are using version 0.5.0.
>>> import dash_daq as daq
>>> print(daq.__version__)
0.5.0
A switch component that toggles between on and off.
import dash_daq as daq
daq.BooleanSwitch(
id='my-daq-booleanswitch',
on=True
)
A color picker.
import dash_daq as daq
daq.ColorPicker(
id='my-daq-colorpicker',
label="colorPicker"
)
A gauge component that points to some value between some range.
import dash_daq as daq
daq.Gauge(
id='my-daq-gauge',
min=0,
max=10,
value=6
)
A graduated bar component that displays a value within some range as a percentage.
import dash_daq as daq
daq.GraduatedBar(
id='my-daq-graduatedbar',
value=4
)
A boolean indicator LED.
import dash_daq as daq
daq.Indicator(
id='my-daq-indicator',
value=True,
color="#00cc96"
)
A joystick that can be used to apply direction and force.
import dash_daq as daq
daq.Joystick(
id='my-daq-joystick'
)
A knob component that can be turned to a value between some range.
import dash_daq as daq
daq.Knob(
id='my-daq-knob',
min=0,
max=10,
value=8
)
A 7-segment LED display component.
import dash_daq as daq
daq.LEDDisplay(
id='my-daq-leddisplay',
value="3.14159"
)
A numeric input component that can be set to a value between some range.
import dash_daq as daq
daq.NumericInput(
id='my-daq-numericinput',
min=0,
max=10,
value=5
)
A power button component that can be turned on or off.
import dash_daq as daq
daq.PowerButton(
id='my-daq-powerbutton',
on=True
)
A numeric input component that converts an input value to the desired precision.
import dash_daq as daq
daq.PrecisionInput(
id='my-daq-precisioninput',
precision=4,
value=299792458
)
A slider component with support for a target value.
import dash_daq as daq
daq.Slider(
id='my-daq-slider',
value=17,
min=0,
max=100,
targets={"25": {"label": "TARGET"}}
)
A stop button.
import dash_daq as daq
daq.StopButton(
id='my-daq-stopbutton'
)
A tank component that fills to a value between some range.
import dash_daq as daq
daq.Tank(
id='my-daq-tank',
min=0,
max=10,
value=5
)
A thermometer component that fills to a value between some range.
import dash_daq as daq
daq.Thermometer(
id='my-daq-thermometer',
min=95,
max=105,
value=98.6
)
A switch component that toggles between two values.
import dash_daq as daq
daq.ToggleSwitch(
id='my-daq-toggleswitch'
)
A component placed at the root of the component tree to make all components match the dark theme.
import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html
app = dash.Dash(__name__)
theme = {
'dark': False,
'detail': '#007439',
'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
)
else:
theme.update(
dark=False
)
return daq.DarkThemeProvider(theme=theme, children=
daq.Knob(value=6))
@app.callback(
Output('dark-theme-provider-demo', 'style'),
[Input('daq-light-dark-theme', 'value')]
)
def change_bg(dark_theme):
if(dark_theme):
return {'background-color': '#303030', 'color': 'white'}
else:
return {'background-color': 'white', 'color': 'black'}
if __name__ == '__main__':
app.run_server(debug=True)