Help mapping New 3DS buttons with HTML5 Gamepad API (using 3DS as a joystick on your PC)

Discussion in '3DS - ROM Hacking, Translations and Utilities' started by Crayon2000, Jan 7, 2016.

  1. Crayon2000
    OP

    Crayon2000 GBAtemp Regular

    Member
    106
    74
    Feb 4, 2013
    Canada
    Hello, I am the author of UsendMii, a software that will let use your Wii U GamePad on your computer. UsendMii will also allow you to view MP4 videos from your PC on the Wii U GamePad and your TV. Previously I have added the 3DS but unfortunately only up/down/left/right and A buttons can be used. Now with the New 3DS I have read on the Wiki (and Nintendo web site) that the Internet Browser supports the HTML5 Gamepad API. The problem is that I don't have a NEW 3DS and I would like to add this feature in UsendMii.

    The first thing I need is that someone with a New 3DS goes to HTML5 Gamepad Tester and tell me if they see buttons. They should be visible because jsa released a preview where he is using the Gamepad API on a web page. From what I see, the buttons are mapped like this:
    Code:
    0  |  B
    1  |  A
    2  |  Y
    3  |  X
    4  |  L
    5  |  R
    6  |  ZL
    7  |  ZR
    8  |  ?
    9  |  ?
    10 |  ?
    11 |  ?
    12 |  D-pad Up
    13 |  D-pad Down
    14 |  D-pad Left
    15 |  D-pad Right
    ?  |  ?
    
    And the axes like this:
    Code:
    0  |  Stick Horizontal
    1  |  Stick Vertical
    2  |  C Horizontal
    3  |  C Vertical
    So I need help where there are question marks. It is possible that buttons on the 3DS will invoke a menu or a different action, but it is possible also possible that even with menu hiding the web page buttons state can be retrieve. For now, UsendMii does not care about what is on the screen, as long as the button state are received on the PC.

    Thank you for help me. I will provide a beta release of UsendMii once I get those information.
     
  2. 730

    730 Professional Shitposter

    Member
    465
    376
    Apr 2, 2015
    Argentina
    I tried entering the site, but doesn't detect any gamepads. I'm on 9.2.

    Tried "waking it up" and nothing happened either.
     
  3. Crayon2000
    OP

    Crayon2000 GBAtemp Regular

    Member
    106
    74
    Feb 4, 2013
    Canada
    OK and when you go to http://jsa.x10host.com/newTab.php does it work ?
     
  4. 730

    730 Professional Shitposter

    Member
    465
    376
    Apr 2, 2015
    Argentina
    Well that works indeed. I dunno how to help with the question marks but I'd say what you need to add is Start, Select, HOME, and probably Touch Screen.
    My inputs perfectly correlate to the graphics on the page, so that's ok at least.
     
  5. Crayon2000
    OP

    Crayon2000 GBAtemp Regular

    Member
    106
    74
    Feb 4, 2013
    Canada
    Perfect, I will try modify UsendMii according to these value first. Will you be able to test on a PC?
     
  6. 730

    730 Professional Shitposter

    Member
    465
    376
    Apr 2, 2015
    Argentina
    Yeah sure!
     
  7. jsa

    jsa GBAtemp Regular

    Member
    211
    194
    Oct 21, 2015
    United Kingdom
    Devon, UK
    Crayon2000 likes this.
  8. jsa

    jsa GBAtemp Regular

    Member
    211
    194
    Oct 21, 2015
    United Kingdom
    Devon, UK
    I updated my demo with buttons 8 and 9, which are Start (St) and Select (Se) respectively. (I meant to do this a while ago - just hadn't got round to it)

    Buttons 10 and 11 don't apply to the New 3DS because they are analogue stick "clicks" (like PlayStation's L3 and R3) and the 3DS doesn't have clickable analogue sticks. I believe they work on Wii U, however.

    — Posts automatically merged - Please don't double post! —

    I updated my demo with buttons 8 and 9, which are Start (St) and Select (Se) respectively.

    Buttons 10 and 11 don't apply to the New 3DS because they are analogue stick "clicks" (like PlayStation's L3 and R3) and the 3DS doesn't have clickable analogue sticks.
     
    730 likes this.
  9. Crayon2000
    OP

    Crayon2000 GBAtemp Regular

    Member
    106
    74
    Feb 4, 2013
    Canada
    Hello, here is the link to the first beta version. Like I said before, there is no way for me to test, so please report any bugs or weird behaviors.

    :download: link removed

    Instruction in English on how to use UsendMii can be found on http://wiiubrew.org/wiki/UsendMii

    By the way, thank you jsa, it was a lot easier with your code :)
     
    Last edited by Crayon2000, Jan 16, 2016
  10. jsa

    jsa GBAtemp Regular

    Member
    211
    194
    Oct 21, 2015
    United Kingdom
    Devon, UK
    You're most welcome. ;) Nice application!

    Out of interest, will you release the source code any time soon?
     
    Last edited by jsa, Jan 9, 2016
  11. Crayon2000
    OP

    Crayon2000 GBAtemp Regular

    Member
    106
    74
    Feb 4, 2013
    Canada
    Thank you very much :lol:

    Since you are also using the New 3DS for Web development I have something to ask you. It might also be useful for you. Can you go this page with your New Nintendo 3DS: http://wiiubrew.org/wiki/Internet_Browser/font

    If possible, I want you to take a good picture / screen capture of what you see. Here is the one I took for the Wii U. All the buttons are there. Currently I'm using two of those on my UsendMii menu screen. The difference between the Wii and Wii U is small so I expect to be the same thing for the 3DS. I just hope there is a Nintendo 3DS image.

    [​IMG]

    I don't care about giving away the code for the web interface, but for now there is no plan to make this project Open Source. Here is my code for the the NEW 3DS web page. Like you ca see I am making the 3DS behave like the Wii U API.

    HTML:
    <!doctype html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="width=1280 height=598 user-scalable=no" />
            <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
            <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
            <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">
            <link rel="stylesheet" type="text/css" href="usendmii.css" />
            <title>UsendMii</title>
            <script type="text/javascript">
                const STICK_PRESSED = 0.06;
                var MySocket = new WebSocket("ws://" + window.location.host);
                var interval;
    
                MySocket.onopen = function()
                {
                    document.getElementById("out").innerHTML = "Connected";
                    setInterval('update()', 30);
                };
    
                MySocket.onmessage = function(evt)
                {
                    document.getElementById("out").innerHTML = evt.data;
                };
    
                MySocket.onclose = function()
                {
                    document.getElementById("out").innerHTML = "Disconnected";
                    clearInterval(interval);
                };
    
                function update()
                {
                    var gp = navigator.webkitGetGamepads()[0];
                    var gamepadState = {hold:0, lStickX:0, lStickY:0, rStickX:0, rStickY:0};
                    var hold = 0;
    
                    if(gp.buttons[0] == 1) {
                        hold |= 0X00004000; // B
                    }
                    if(gp.buttons[1] == 1) {
                        hold |= 0X00008000; // A
                    }
                    if(gp.buttons[2] == 1) {
                        hold |= 0X00001000; // Y
                    }
                    if(gp.buttons[3] == 1) {
                        hold |= 0X00002000; // X
                    }
                    if(gp.buttons[4] == 1) {
                        hold |= 0X00000020; // L
                    }
                    if(gp.buttons[5] == 1) {
                        hold |= 0X00000010; // R
                    }
                    if(gp.buttons[6] == 1) {
                        hold |= 0X00000080; // ZL
                    }
                    if(gp.buttons[7] == 1) {
                        hold |= 0X00000040; // ZR
                    }
                    if(gp.buttons[8] == 1) {
                        hold |= 0X00000008; // Start
                    }
                    if(gp.buttons[9] == 1) {
                        hold |= 0X00000004; // Select
                    }
                    if(gp.buttons[10] == 1) {
                        // N/A
                    }
                    if(gp.buttons[11] == 1) {
                        // N/A
                    }
                    if(gp.buttons[12] == 1) {
                        hold |= 0X00000200; // Up
                    }
                    if(gp.buttons[13] == 1) {
                        hold |= 0X00000100; // Down
                    }
                    if(gp.buttons[14] == 1) {
                        hold |= 0X00000800; // Left
                    }
                    if(gp.buttons[15] == 1) {
                        hold |= 0X00000400; // Right
                    }
                    if(gp.axes[0] < -STICK_PRESSED) {
                        hold |= 0X40000000; // Circle Pad Left
                    }
                    else if(gp.axes[0] > STICK_PRESSED) {
                        hold |= 0X20000000; // Circle Pad Right
                    }
                    if(gp.axes[1] < -STICK_PRESSED) {
                        hold |= 0X10000000; // Circle Pad Up
                    }
                    else if(gp.axes[1] > STICK_PRESSED) {
                        hold |= 0X08000000; // Circle Pad Down
                    }
                    if(gp.axes[2] < -STICK_PRESSED) {
                        hold |= 0X04000000; // C Stick Left
                    }
                    else if(gp.axes[2] > STICK_PRESSED) {
                        hold |= 0X02000000; // C Stick Right
                    }
                    if(gp.axes[3] < -STICK_PRESSED) {
                        hold |= 0X01000000; // C Stick Up
                    }
                    else if(gp.axes[3] > STICK_PRESSED) {
                        hold |= 0X00800000; // C Stick Down
                    }
                    gamepadState.hold = hold;
    
                    gamepadState.lStickX = gp.axes[0]; // Circle Pad X
                    gamepadState.lStickY = gp.axes[1]; // Circle Pad Y
                    gamepadState.rStickX = gp.axes[2]; // C Stick X
                    gamepadState.rStickY = gp.axes[3]; // C Stick Y
    
                    MySocket.send("gamepadstate=" + JSON.stringify(gamepadState));
                }
            </script>
        </head>
        <body>
            <div id="out"></div>
        </body>
    </html>
    You can view my GitHub account to look at my open source projects.
     
  12. jsa

    jsa GBAtemp Regular

    Member
    211
    194
    Oct 21, 2015
    United Kingdom
    Devon, UK
    Hi,
    I looked at that font page and I get the same as I did when I looked at it on my 2DS (which I lost on holiday), which is to say I get the same result as with the picture you provided except after the E070 row there is nothing.
    Sorry I couldn't provide a picture - the webcam on my PC is terrible and the screen is too small for the characters to be visible anyways.

    Hope I helped. ;)
     
  13. Crayon2000
    OP

    Crayon2000 GBAtemp Regular

    Member
    106
    74
    Feb 4, 2013
    Canada
    jsa do you remember if the 2DS was using this user agent:
    Code:
    Mozilla/5.0 (Nintendo 3DS; U; ; <lang>) Version/<version>.<region>
    Nintendo 3DS for a 2DS?
     
  14. jsa

    jsa GBAtemp Regular

    Member
    211
    194
    Oct 21, 2015
    United Kingdom
    Devon, UK
    Yeah, I think that's pretty much it.
    It would say "Nintendo 3DS" for a 2DS as they all use the same firmware.

    — Posts automatically merged - Please don't double post! —

    @Crayon2000 The New 3DS uses something similar (I can't remember off the top of my head) but it can also pretend to be an iPhone running iOS 6 with no kind of indication that it's a 2DS at all.
     
    Crayon2000 likes this.
  15. Crayon2000
    OP

    Crayon2000 GBAtemp Regular

    Member
    106
    74
    Feb 4, 2013
    Canada
  16. jsa

    jsa GBAtemp Regular

    Member
    211
    194
    Oct 21, 2015
    United Kingdom
    Devon, UK