canvas-gui
    Preparing search index...

    Class CvsJoystick

    A multi-mode Joystick control

    This class simulates a multi-mode joystick. Each of the three possible modes apply different constraints to the range of movement allowed they are -

    'X0' : can move in any direction (360°). This is the default value.
    'X4' : constrained to the 4 main compass directions (N, E, S, W).
    'X8' : constrained to the 8 main compass directions (N, NE, E, SE, S, SW, W, NW).

    To handle events use the setAction method to specify the action-method that will be used to process action-info objects created when the joystick is moved.

    The action-info object has several very useful fields that describes the state of the joystick, they include -

    • dir

      • An integer that indicates the direction the stick is pushed. The values returned depend on the current mode -

      Direction values for X4 and X8 modes
     5   6   7
      \  |  /
       \ | /
   4 --- Z --- 0       Z is the dead zone.
       / | \
      /  |  \          If control is in mode 'X0' or the joystick
     3   2   1         position is in the dead zone then the value is -1

      'X0' : always -1
      'X4' : 0, 2, 4 or 6
      'X8' : 0, 1, 2, 3, 4, 5, 6 or 7

    • dead

      • If the stick is in the dead zone which surrounds the stick's rest state then this value will be true.

    • mag

      • The magnitude is in range ≥ 0 and ≤ 1 representing the distance the stick has been pushed.

    • angle

      The angle is in range ≥ 0 and < 2π representing the angle the stick makes to the poistive x axis in the clockwise direction. In modes X4 and X8 the angles will be constrained to the permitted directions.

    • final

      • This is false if the stick is still being moved and true if the stick has been released.

    When the joystick is released it will return back to its rest state i.e. centered.

    Index

    Accessors

    id isEnabled isOpaque isVisible type

    Methods

    addChild config corners disable enable hide leaveParent mode moveBy moveTo opaque parent removeChild scheme setAction setEnabled setVisible show thumbSize tipTextSize tooltip transparent

    Accessors

    • get id(): string

      The unique identifier for this control.

      Returns string

    • get isEnabled(): boolean

      This is true if the control can respond to UI events else false.

      Use enable() and disable() to enable and disable it.

      Returns boolean

    • get isOpaque(): boolean

      This is true if the control background is opaque else false.

      Use opaque() and transparent() display / hide the background.

      Returns boolean

    • get isVisible(): boolean

      This is true if the control is visible else false.

      Use hide() and show() to set visibility.

      Returns boolean

    • get type(): string

      The type name for this control.
      (type name = class name without the Cvs prefix)

      Returns string

    Methods

    • Add a child to this control using its relative position [rx, ry]. If rx and ry are not provided then it uses the values set in the child.

      Parameters

      • child: any

        is the actual control or its id

      • Optionalrx: number
      • Optionalry: number

      Returns any

      this control

    • Execute one or more configuration methods on this control.

      The parameter is a user defined object where each field is the name of a configuration method and its value is the method's parameter(s). Multiple parameters should be in an array and use 'undefined' if the method expects no parameters.

      This object will change the color scheme, text size and alignment, it will also make sure it is visible.

      { scheme : 'red', textSize : 12, textAlign: ['left', 'top'], show : undefined }
      If the field name does not exist or not a valid function of this control it will be silently ignored.

      There is no error checking on the parameters, it is up to the user to ensure they are valid for the control method.

      Parameters

      • cfg: any

        the configuration object

      Returns CvsJoystick

      this control

    • Get or set the corner radii used for this control.

      To set the radii the parameters must be one of the following

      • an array of 4 numbers.
      • a comma seperated list of 4 numbers.
      • a single number to be used for all 4 radii.

      If no parameter is passed or does not match one of the above then an array of the currently used radii values.

      Parameters

      • ...c: any

        valid radii combination

      Returns number[] | CvsControl

      an array of the currently used radii values

    • Disables this control.

      Parameters

      • Optionalcascade: boolean

        if true disable child controls

      Returns CvsControl

      this control

    • Enables this control.

      Parameters

      • Optionalcascade: boolean

        if true enable child controls

      Returns CvsControl

      this control

    • Make this control invisible.

      Parameters

      • Optionalcascade: boolean

        if true hide any children

      Returns CvsControl

      this control

    • Remove this control from its parent

      Returns CvsPin

      this control

    • The mode defines the constraints applied to movement of the joystick. There are three permitted modes -

      • 'X0' : can move in any direction (360°). This is the default value.
      • 'X4' : constrained to the 4 main compass directions (N, E, S, W).
      • 'X8' : constrained to the 8 main compass directions (N, NE, E, SE, S, SW, W, NW).

      Any other value will be silently ignored.

      Parameters

      • m: string

        either 'X0', 'X4' or 'X8'

      Returns string | CvsControl

      this control

    • Move this control relative to current position.

      Parameters

      • x: number

        horizontal distance

      • y: number

        vertical distance

      Returns CvsJoystick

      this control

    • Move this control to an absolute position.

      Parameters

      • x: number

        horizontal position

      • y: number

        vertical position

      Returns CvsJoystick

      this control

    • Makes the controls background opaque. The actual color depends on the controls color scheme.

      The second parameter, alpha, is optional and controls the level of opaqueness from 0 - transparent to 255 - fully opaque (default value).

      Parameters

      • alpha: number = 255

        alpha value for controls background color.

      Returns CvsControl

      this control

    • Adds this control to another control which becomes its parent.

      Parameters

      • parent: any

        is the parental control or its id

      • Optionalrx: number

        x position relative to parent

      • Optionalry: number

        y position relative to parent

      Returns CvsPin

      this control

    • Remove a child control from this one so that it stays in same screen position.

      Parameters

      • child: any

        the control to remove or its id

      Returns CvsJoystick

      this control

    • If the name of a valid color scheme is provided then it will use it to display the control, non-existant scheme names will be ignored. In both cases this control is returned.

      If there is no parameter it returns the name of the current color scheme used by this control.

      Parameters

      • Optionalname: string

        the color scheme name e.g. 'blue'

      • Optionalcascade: boolean

        if true propogate scheme to all child controls.

      Returns ColorScheme | CvsControl

      this control or the control's color scheme

    • This sets the event handler to be used when this control fires an event. The parameter can take one of three forms:

      1. Arrow function definition
      2. Anonymous function definition
      3. Named function declaration

      Parameters

      • event_handler: Function

        the function to handle this control's events.

      Returns CvsJoystick

      this control

    • An alternative to the enable / disable methods.

      Parameters

      • enable: boolean

        true / false

      • Optionalcascade: boolean

        true apply to all children

      Returns CvsPin

      this control

    • An alternative to the show / hide methods.

      Parameters

      • visible: boolean

        true / false

      • Optionalcascade: boolean

        if true hide children

      Returns CvsPin

      this control

    • Make this control visible.

      Parameters

      • Optionalcascade: boolean

        if true then show any children

      Returns CvsControl

      this control

    • Set the thumb size.

      Parameters

      • ts: number

        the diameter of the thumb

      Returns CvsJoystick

      this control

    • Sets the size of the text to use in the tooltip.

      Parameters

      • Optionaltsize: number

        text size for this tooltip

      Returns CvsJoystick

    • Create a tooltip for this control.

      Parameters

      • tiptext: string

        the text to appear in the tooltip

      Returns CvsJoystick

      this control

    • Makes the controls background fully transparent.

      Returns CvsControl

      this control

    Settings

    Member Visibility

    On This Page

    Accessors
    Methods