Only have 4 directions

[ChopsKingsland]

I would like to use this to control an RPi car, but I only need 4 directions (up, down, left & right). How do I make these mutually exclusive (eg It can't be up left)?

[cptx032]

Hi ChopsKingsland!
Your project looks cool!
I think that the easy way to adapt the example to make it mutually exclusive is remove the ifs side by side, and rearrange them using else-ifs, for example:

Instead:

if ( joystick.up ) text += 'up ';
if ( joystick.down ) text += 'down ';
if ( joystick.left ) text += 'left ';
if ( joystick.right ) text += 'right';

You can do:

if (joystick.up)
	text = 'up'
else if (joystick.down)
	text = 'down'
else if (joystick.left)
	text = 'left'
else if (joystick.right)
	text = 'right'

Let me know if this this helps you :D

[ChopsKingsland]

That works, apart from the way that I control the car sends a request to a URL, and I don't what to sending requests hundreds of times per second. Is there a way to only do this when the position of the joystick changes?

[cptx032]

A simplistic approach is to create a variable to store the last direction, something like:

function do_my_request(dir) {
    console.log("REQUEST", dir)
}
var direction = null
window.addEventListener("load", () => {
    let joystick = new JoyStick({
        radius: 80,
        x: window.innerWidth / 2,
        y: window.innerHeight /2,
        inner_radius: 70
    })
    
    function run_all_time() {
        if (joystick.up) {
            if (direction != 'up')
                do_my_request('up')
            direction = 'up'
        }
        else if (joystick.down) {
            if (direction != 'down')
                do_my_request('down')
            direction = 'down'
        }
        else if (joystick.left) {
            if (direction != 'left')
                do_my_request('left')
            direction = 'left'
        }
        else if (joystick.right) {
            if (direction != 'right')
                do_my_request('right')
            direction = 'right'
        }
        
        requestAnimationFrame(run_all_time)
    }
    run_all_time()
})

Maybe this works for you

[cptx032]

The last example have some glitches when passing through the angles. You can give an look in the first example of https://yoannmoi.net/nipplejs/#demo too. They have an attribute called "angle", that gives you what you want.