How do I get the values of a nipple.js joystick

Question

I'm having 2 joysticks and want to get their position and size properties with JS. The official documentation s hard for me to understand, because it is very very theoretical and has no practical examples.

I tried using the console to get the properties by checking the value of the joysticks, but I miserably failed getting any information out of that.

All I need is to get both joystick centers and stick positions.

Here is my js:

/touchdevice is set to true the moment a touch action happens 
if(touchdevice) {

    /mstick and astick are predefined

    mstick = document.querySelector("#mstick");
    astick = document.querySelector("#astick");

    window.mstick = nipplejs.create({
      color: "#000000",
      shape: "square",
      zone: mstick,
      threshold: 0.5,
      fadeTime: 300
    });

    window.astick = nipplejs.create({
      color: "#000000",
      shape: "circle",
      zone: astick,
      threshold: 0.5,
      fadeTime: 300
    });
    
  }

Answer 1

My friend and fellow developer colleague Wef324 (on Discord) helped me with this question. Here is the end result:

if (touchdevice) {

  //mstick and astick are predefined
  const mstick = document.querySelector("#mstick");
  const astick = document.querySelector("#astick");

  window.mstick = {
    position: {
      x:0, y:0
    }, 
    distance: 0,
  };  

  window.astick = {
    position: {
      x:0, y:0
    }, 
    distance: 0,
  };

  window.mstickInstance = nipplejs.create({
    color: "#000000",
    shape: "square",
    zone: mstick,
    threshold: 0.5,
    fadeTime: 300,
  });

  window.astickInstance = nipplejs.create({
    color: "#000000",
    shape: "circle",
    zone: astick,
    threshold: 0.5,
    fadeTime: 300,
  }); 

  window.mstickInstance.on("move", (event, nipple) => {
    window.mstick.position = nipple.position;
    window.mstick.distance = nipple.distance;
    window.mstick.direction = nipple.angle.radian;
    console.log(window.mstick);
  });

  window.astickInstance.on("move", (event, nipple) => {
    window.astick.position = nipple.position;
    window.astick.distance = nipple.distance;
    window.astick.direction = nipple.angle.radian;
    console.log(window.astick);
  });
}

This code basically saves picked values the "move" event delivers with it and saves them into the corresponding window.stickname variable`.