Knob Examples and Reference

Default Knob

An example of a default Knob without any extra properties.

library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  daqKnob(id = 'my-knob'),
  htmlDiv(id = 'knob-output')
)))

app$callback(
  output(id = "knob-output", property = "children"),
  params = list(input(id = "my-knob", property = "value")),

  update_output <- function(value) {
    return(sprintf('The knob value is %s', value))
  }
)

app$run_server()

Size

Set the size(diameter) of the knob in pixels with size.

library(dashDaq)

daqKnob(
    size = 140,
    value = 3
)

Max

Set the maximum value of the knob using max.

library(dashDaq)

daqKnob(
    max = 100,
    value = 3
)

Color Ranges

Control color ranges with:

color = list(
    'ranges' = list(
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;),
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;),
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;)
        )
    )

library(dashDaq)

daqKnob(label = "Color Ranges",
        value = 3,
        color = list("ranges" =
                       list(
                         "green" = list(0, 5),
                         "yellow" = list(5, 9),
                         "red" = list(9, 10)
                       )
                     )
        )

Color Gradient

Set up a color gradient with:

color = list(
    'gradient' =  TRUE,
    'ranges' = list(
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;),
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;),
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;)
        )
    )

library(dashDaq)

daqKnob(
  label = "Color Ranges",
  value = 3,
  color = list(
    "gradient" = TRUE,
    "ranges" =
      list(
        "green" = list(0, 5),
        "yellow" = list(5, 9),
        "red" = list(9, 10)
      )
  )
)

Scale

Adjust the scale interval, label interval, and start of the scale with scale.

library(dashDaq)

daqKnob(
    value = 7,
    max = 18,
    scale = list("start" = 0, "labelInterval" = 3, "interval" = 3)
)

Knob 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 (character; optional):
The ID used to identify this compnent in Dash callbacks.

value (numeric; optional):
The value of knob.

color (named list; optional):
Color configuration for the knob’s track.

color is a character | named list with keys:

  • default (character; optional):
    Color used for current value text and other minor accents.

  • gradient (logical; optional):
    Display ranges as a gradient between given colors.

  • ranges (named list; optional):
    Define multiple color ranges on the knob’s track. The key
    determines the color of the range and the value is the start,end
    of the range itself. Ranges must be contiguous along the entirety
    of the knob’s range of values.

    ranges is a named list with keys:

    • color (unnamed list of numerics; optional)

size (numeric; optional):
The size (diameter) of the knob in pixels.

min (numeric; default 0):
The minimum value of the knob.

max (numeric; default 10):
The maximum value of the knob.

disabled (logical; optional):
If TRUE, knob cannot be moved.

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

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

label is a character | named list with keys:

  • label (character; optional)

  • style (named list; optional)

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

scale (named list; optional):
Configuration for the component scale.

scale is a named list with keys:

  • custom (named list; optional):
    Custom scale marks. The key determines the position and the value
    determines what will show. If you want to set the style of a
    specific mark point, the value should be an object which contains
    style and label properties.

    custom is a numeric | named list with keys:

    • label (character; optional)

    • style (character; optional)

  • interval (numeric; optional):
    Interval by which the scale goes up. Attempts to dynamically
    divide min-max range by default.

  • labelInterval (numeric; optional):
    Interval by which labels are added to scale marks. Defaults to 2
    (every other mark has a label).

  • start (numeric; optional):
    Value to start the scale from. Defaults to min.

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

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

persistence (logical | character | numeric; optional):
Used to allow user interactions in this component to be persisted when
the component - or the page - is refreshed. If persisted is truthy
and hasn’t changed from its previous value, a value that the user
has changed while using the app will keep that change, as long as the
new value also matches what was given originally. Used in
conjunction with persistence_type.

persisted_props (unnamed list of values equal to: ‘value’; default ['value']):
Properties whose user interactions will persist after refreshing the
component or the page. Since only value is allowed this prop can
normally be ignored.

persistence_type (a value equal to: ‘local’, ‘session’ or ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data is
cleared once the browser quit.