Feature request: modify gamepad

Dear devs,

we are working on a project where this library comes into play. It works really great, we however need some more flexibility and to modify the gamepad, notably reduce the number of buttons, or eventually delete all buttons and add one joystick.

I first thought the application reads the SVG within gamepads.html the same as it does for the keyboard svg (which, in this case, is inserted dynamically), i.e. it fetches the SVG object IDs (e.g. btnX, btnY). But it isn’t the case. I can’t find the link between the SVG paths and the uinput constants.

The joystick is an other story, as it is coded in virtual_gamepad_client.js, and this time does look for path3212 in the SVG. (edit) After testing it, the variable attached to it is actually unused. Only the dirCenter0 path.

Some indications would be highly appreciated. If there is something worth a PR, we will do it.

Thank you.

[robsdedude]

Hey and thanks for you interest. This project is indeed not very streamlined as the gamepad, the touchpad, and the keyboard were developed by 3 different people…

Regarding the link of the SVG paths and the uinput:

public/js/virtual_gamepad_client.js:126

$(".btn").on("touchstart", function() {
    btnId = $(this).data("btn");
    $("#"+btnId).attr("class", "btnSelected");
    socket.emit("padEvent", {type: 0x01, code: $(this).data("code"), value: 1});
    hapticCallback();
});

There you can see that the uinput code is encoded in the data-code attribute of the svg paths. See e.g. public/gamepad.html:997

<path ... id="btnA" class="btn" data-btn="path3253" data-code="0x130" ... />

Regarding the joystick

I’m actually not too familiar with the used library. But indeed path3212 isn’t used currently. I assume it was used to limit the maximum distance the virtual joystick could be moved. Currently this is done using the stickRadius parameter. So yes, as you noted only the the elements with the ids dirCenter and dirContainer are used. So if you want to create a second joystick you would probably have to

1. create a new center element in the svg
2. create a new empty div as container for the joystick
3. call new VirtualJoystick accordingly

I hope this helped. If you have further questions don’t hesitate to ask.

[hyamanieu]

FYI, I pushed my modifications: https://github.com/hyamanieu/node-custom-virtual-gamepads it’s ugly but it works.