Joystick Examples and Reference

Default Joystick

An example of a default Joystick 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_joystick(
      id="my-joystick",
      label="Default",
      angle=0
  ),
  html_div(id="joystick-output")
])

callback!(app,
  Output("joystick-output", "children"),
  [Input("my-joystick", "angle"),
   Input("my-joystick", "force")]) do angle, force 
  return ["Angle is $angle",
          html_br(),
          "Force is $force"]
end

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

Label

Change the label and label orientation with label and labelPosition.

using Dash
using DashDaq

app = dash()

app.layout = daq_joystick(
  label="Label",
  labelPosition="bottom"
)  

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

Size

Change the size of the joystick with size.

using Dash
using DashDaq

app = dash()

app.layout = daq_joystick(
  size=250
)  

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

Joystick 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 Joystick in Dash callbacks.

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

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

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

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 indicator 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.