LED display Examples and Reference


Default LED display

An example of a default LED display without any extra properties.

import dash
import dash_daq as daq
import dash_core_components as dcc
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.LEDDisplay(
        id='my-LED-display',
        label="Default",
        value=6
    ),
    dcc.Slider(
        id='my-LED-display-slider',
        min=0,
        max=10,
        step=1,
        value=5
    ),
])


@app.callback(
    dash.dependencies.Output('my-LED-display', 'value'),
    [dash.dependencies.Input('my-LED-display-slider', 'value')]
)
def update_output(value):
    return str(value)

if __name__ == '__main__':
    app.run_server(debug=True)

Label

Set the label and label position with label and labelPosition.

import dash_daq as daq

daq.LEDDisplay(
    label="Label",
    labelPosition='bottom',
    value='12:34'
)  

Size

Adjust the size of the LED display with size

import dash_daq as daq

daq.LEDDisplay(
    label="Large",
    value="9:34",
    size=64,
)  

Color

Adjust the color of the LED display with color=#<hex_color>

import dash_daq as daq

daq.LEDDisplay(
    label="color",
    value='1.001',
    color="#FF5E5E"
)  

Background Color

Adjust the background color of the LED display using:
backgroundColor=#<hex_color>

import dash_daq as daq

daq.LEDDisplay(
    label="color",
    value='1.001',
    backgroundColor="#FF5E5E"
)  

LED Display Properties

Access this documentation in your Python terminal with:
```python

help(dash_daq.LEDDisplay)
```

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise
.

id (string; optional): The ID used to identify the display in Dash callbacks

backgroundColor (string; default '#fff'): Color of the display’s background

color (string; default colors.PRIMARY): Color of the display

className (string; optional): Class to apply to the root component element

label (dict; optional): Description to be displayed alongside the control. To control styling, pass an object with label and style properties. label has the following type: string | dict containing keys ‘style’, ‘label’. Those keys have the following types:

  • style (dict; optional)
  • label (string; optional)

labelPosition (a value equal to: ‘top’, ‘bottom’; default 'top'): Where the display label is positioned

size (number; default 42): Size of the display

style (dict; optional): Style to apply to the root component element

theme (dict; default light): Theme configuration to be set by a ThemeProvider

value (number | string; optional): Value to be displayed. A number or a string containing only digits (0-9), periods, and colons, and possibly starting with a minus sign.