Dash DAQ

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

BooleanSwitch

A switch component that toggles between on and off.

import dash_daq as daq

daq.BooleanSwitch(
  id='my-daq-booleanswitch',
  on=True
)  

More BooleanSwitch Examples and Reference

ColorPicker

A color picker.

import dash_daq as daq

daq.ColorPicker(
  id='my-daq-colorpicker',
  label="colorPicker"
)  

More ColorPicker Examples and Reference

Gauge

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
)  

More Gauge Examples and Reference

GraduatedBar

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
)  

More GraduatedBar Examples and Reference

Indicator

A boolean indicator LED.

import dash_daq as daq

daq.Indicator(
  id='my-daq-indicator',
  value=True,
  color="#00cc96"
)  

More Indicator Examples and Reference

Joystick

A joystick that can be used to apply direction and force.

import dash_daq as daq

daq.Joystick(
  id='my-daq-joystick'
)  

More Joystick Examples and Reference

Knob

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
)  

More Knob Examples and Reference

LEDDisplay

A 7-segment LED display component.

import dash_daq as daq

daq.LEDDisplay(
  id='my-daq-leddisplay',
  value="3.14159"
)  

More LEDDisplay Examples and Reference

NumericInput

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
)  

More NumericInput Examples and Reference

PowerButton

A power button component that can be turned on or off.

import dash_daq as daq

daq.PowerButton(
  id='my-daq-powerbutton',
  on=True
)  

More PowerButton Examples and Reference

PrecisionInput

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
)  

More PrecisionInput Examples and Reference

Slider

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"}}
)  

More Slider Examples and Reference

StopButton

A stop button.

import dash_daq as daq

daq.StopButton(
  id='my-daq-stopbutton'
)  

More StopButton Examples and Reference

Tank

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
)  

More Tank Examples and Reference

Thermometer

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
)  

More Thermometer Examples and Reference

ToggleSwitch

A switch component that toggles between two values.

import dash_daq as daq

daq.ToggleSwitch(
  id='my-daq-toggleswitch'
)  

More ToggleSwitch Examples and Reference

DarkThemeProvider

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)

More DarkThemeProvider Examples and Reference