How to use nipplejs - 8 common examples

console.warn('Joystick options must be immutable');
            options = new Map(options);
        }
        if (this.nippleZone) {
            options = options.merge({
                'zone': this.nippleZone,
                'color': options.get('color', 'red'),
                'mode': options.get('mode', 'dynamic'),
                'multitouch': false,
                'size': options.get('size', 150),
                'maxNumberOfNipples': 1,
                'threshold': 0,
                'position': options.get('position', {
                    top: '50%', left: '50%'}),
            });
            this.nipple = createNipple(options.toJS());
            // Handle event;
            if (typeof(this.props.onStart) === 'function'){
                this.nipple.on('start', this.props.onStart)
            }
            if (typeof(this.props.onEnd) === 'function'){
                this.nipple.on('end', this.props.onEnd)
            }
            this.nipple.on('move', this.handleChange);
        }
    }

this.rosConnected = true;
        try {
          this.RosService.socket.connect(this.RosService.hostname);
        } catch (e) {
          // eslint-disable-next-line no-console
          console.log(e);
        }
      }
      if (!this.joystick) {
        const options = {
          // zone: document.getElementById('virtual-joystick-container')
          zone: this.joystickContainer,
        };

        // Create new joystick
        this.joystick = nipplejs.create(options);

        /* Use this to dump ALL data it can give you for testing.
        this.joystick.on('start end', function (evt, data) {
            console.log(evt.type);
            console.log(data);
        }).on('move', function (evt, data) {
            console.log(evt.type);
            console.log(data);
        }).on('dir:up plain:up dir:left plain:left dir:down ' +
            'plain:down dir:right plain:right',
            function (evt, data) {
                console.log(evt.type);
                console.log(data);
            }
        ).on('pressure', function (evt, data) {
            console.log(evt.type);

export function init(engine)
{
    let mouse_tracking_unlocked = false;

    joystick = nipplejs.create({
        zone: document.getElementById('joystick_xy'),
        mode: 'static',
        size: 100,
        threshold: 0.01,
        position: { left: '50%', top: '50%' }
    });

    // Fade in the controls as soon as this Javascript is ready
    document.getElementById('engine_controls').classList.remove('hidden');

    function gamepadPoll(gamepad, last_axes, last_pressed)
    {
        if (gamepad && gamepad.connected) {
            const js = joystick[0];
            const pressed = gamepad.buttons.map(b => b.pressed);
            var axes = gamepad.axes;

const initControls = (msg, data) => {
  if (controlsInitialized) return
  if (isMobile) {
    document.getElementById('touchPane').style.display = 'block'
    const touchPaneLeft = window.document.getElementsByClassName('touchPaneLeft')[0]
    const nippleLook = nipplejs.create({
      zone: touchPaneLeft,
      mode: 'static',
      position: { left: '30%', top: '90%' },
      color: 'white'
    })

    // display touch buttons
    Array.from(document.getElementsByClassName('touchButton')).forEach(el => {
      el.style.display = 'block'
    })
    // hide verbose text
    document.getElementById('verbosePane').style.display = 'none'
    // get button X
    const buttonX = document.getElementById('buttonX')
    const pressX = (event) => {
      event.target.style.opacity = 0.5

createLeftStick() {
    this.leftTouchZone = document.createElement("div");
    this.leftTouchZone.classList.add(styles.touchZone, styles.left);
    document.body.appendChild(this.leftTouchZone);
    this.leftStick = nipplejs.create({
      zone: this.leftTouchZone,
      color: "white",
      fadeTime: 0
    });
    this.leftStick.on("start", this.onFirstInteraction);
    this.leftStick.on("move", this.onMoveJoystickChanged);
    this.leftStick.on("end", this.onMoveJoystickEnd);
  },

const observer = new IntersectionObserver((entries) => {
        if (!entries.length || !entries[0].isIntersecting) {
            return;
        }
        observer.disconnect();

        joystick = nipplejs.create({
            zone,
            mode: 'static',
            size: 100,
            threshold: 0.01,
            position: { left: '50%', top: '50%' }
        });

        joystick.on('move', (e, data) => {
            mouseTrackingEnd();
            joystickAxes(data.force * Math.cos(data.angle.radian),
                -data.force * Math.sin(data.angle.radian));
        });

        joystick.on('end', () => {
            joystickAxes(0, 0);
        });

componentDidMount() {
    const { size, setProps } = this.props;
    this.manager = joystick.create({
      mode: 'static',
      color: 'grey',
      size: size,
      position: { left: '50%', top: '50%' },
      zone: this.zoneRef
    });
    this.manager.on('move', (e, data) => {
      const {
        angle: { degree },
        force
      } = data;
      this.lastAngle = degree;
      if (setProps) {
        setProps({
          angle: degree,
          force

$("#touch-special").on("touchend", function(e) {
        A("SPECIAL", false),
        $("#touch-special > .circle").css({
            "background-color": "rgba(255, 255, 255, 0.2)"
        }),
        e.preventDefault()
    });
    var e = {
        zone: $("#touch-joystick")[0],
        mode: "static",
        position: {
            bottom: "50%",
            left: "50%"
        }
    };
    (joystick = nipplejs.create(e)).on("end", Input.touchEnd),
    joystick.on("move", Input.touchMove)
};