LED display Examples and Reference

Default LED display

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

using Dash
using DashDaq

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash(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
  ),
])

callback!(app,
  Output("my-LED-display", "value"),
  [Input("my-LED-display-slider", "value")]
) do value
  return string(value)
end

run_server(app, "0.0.0.0", debug=true)

Label

Set the label and label position with label and labelPosition.

using Dash
using DashDaq

app = dash()

app.layout = daq_leddisplay(
  label="Label",
  labelPosition="bottom",
  value="12:34"
)  

run_server(app, "0.0.0.0", debug=true)

Size

Adjust the size of the LED display with size.

using Dash
using DashDaq

app = dash()

app.layout = daq_leddisplay(
  label="Large",
    value="9:34",
    size=64,
)  

run_server(app, "0.0.0.0", debug=true)

Color

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

using Dash
using DashDaq

app = dash()

app.layout = daq_leddisplay(
  label="color",
    value="1.001",
    color="#FF5E5E"
)  

run_server(app, "0.0.0.0", debug=true)

Background Color

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

using Dash
using DashDaq

app = dash()

app.layout = daq_leddisplay(
    label="color",
    value="1.001",
    backgroundColor="#FF5E5E"
)  

run_server(app, "0.0.0.0", debug=true)

LEDDisplay Properties

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.

value (Real | 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.

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

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

size (Real; default 42):
Size of the display.

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

label (Dict; optional):
Description to be displayed alongside the control. To control styling,
pass an object with label and style properties.

label is a String | Dict with keys:

label (String; optional)
style (Dict; optional)

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

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

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