# Joystick Examples and Reference

### Default Joystick

An example of a default Joystick without any extra properties.

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

    app <- Dash$new()

    app$layout(htmlDiv(list(
      daqJoystick(id = 'my-joystick',
                   label = 'Default',
                   angle = 0),
      htmlDiv(id = 'joystick-output')
    )))

    app$callback(
      output(id = "joystick-output", property = "children"),
      params = list(
        input(id = "my-joystick", property = "angle"),
        input(id = "my-joystick", property = "force")
      ),

      update_output <- function(angle, force) {
        return(list(
          sprintf('Angle is %s', angle),
          htmlBr(),
          sprintf('Force is %s', force)
        ))
      }
    )

    app$run_server()

Default
Angle is 0
Force is None

### Label

Change the label and label orientation with `label` and `labelPosition`.

    library(dashDaq)

    daqJoystick(
        label = "Label",
        labelPosition = "bottom",
    )

Label

### Size

Change the size of the joystick with `size`.

    library(dashDaq)

    daqJoystick(
        size = 250
    )

## 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` (character; optional): The ID used to identify the Joystick in Dash callbacks.

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

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

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

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

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

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