Joystick Examples and Reference


Default Joystick

An example of a default Joystick without any extra properties.

import dash
import dash_daq as daq
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.Joystick(
        id='my-joystick',
        label="Default",
        angle=0
    ),
    html.Div(id='joystick-output')
])


@app.callback(
    dash.dependencies.Output('joystick-output', 'children'),
    [dash.dependencies.Input('my-joystick', 'angle'),
     dash.dependencies.Input('my-joystick', 'force')])
def update_output(angle, force):
    return ['Angle is {}'.format(angle),
            html.Br(),
            'Force is {}'.format(force)]


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

Label

Change the label and label orientation with label and labelPosition.

import dash_daq as daq

daq.Joystick(
  label="Label",
  labelPosition="bottom"
)  

Size

Change the size of the joystick with size.

import dash_daq as daq

daq.Joystick(
  size=250
)  

Joystick Properties

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

help(dash_daq.Joystick)
```

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 color picker in Dash callbacks

angle (number; optional): Joystick angle in degrees, 0 = right, 90 = up, 180 = left, 270 = down

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

disabled (boolean; optional): If true, color cannot be picked.

force (number; optional): Joystick force: distance between cursor and center in big-circle radii

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 indicator label is positioned

size (number; default 100): Size (width) of the component in pixels

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

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