08-gamepad.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <script src="../frameworks/jquery-2.0.3.min.js"></script>
</head>
<body>
    <div style="text-align: center;">
        <img src="standard_gamepad.svg" style="width:100%;max-width:800px;" />
        <div style="width:100%;max-width:400px;text-align:left;margin: auto;">
            <div id="gamepadPrompt"></div>
            <div id="gamepadDisplay"></div>
        </div>
    </div>
        
    <script>
    var repGP;
    var hasGP = false;
    
    function canGame() {
        return "getGamepads" in navigator;
    }

    $(document).ready(function() {

        if(canGame()) {

            var prompt = "Para empezar a usar el gamepad, conéctelo y presione cualquier botón!";
            $("#gamepadPrompt").text(prompt);
            
            $(window).on("gamepadconnected", function(e) {
                hasGP = true;
                console.log("connection event");
                $("#gamepadPrompt").html("Gamepad conectado!");
                startReportOnGamepad();
            });

            $(window).on("gamepaddisconnected", function(e) {
                console.log("disconnection event");
                $("#gamepadPrompt").text(prompt);
                endReportOnGamepad()
            });

            //setup an interval for Chrome
            var checkGP = window.setInterval(function() {
                console.log('checkGP');
                if(navigator.getGamepads()[0]) {
                    if(!hasGP) {
                        $(window).trigger("gamepadconnected",{gamepad:navigator.getGamepads()[0]});
                    }
                    window.clearInterval(checkGP);
                }
            }, 500);
        }
        
    });
    
    function startReportOnGamepad(){
        repGP = window.setInterval(reportOnGamepad,100);
    }
    function endReportOnGamepad() {
        window.clearInterval(repGP);
    }
    
    function reportOnGamepad() {
        var gp = navigator.getGamepads()[0];
        var html = "";
            html += "<b>id:</b> "+gp.id+"<br/>";
            html += "<b>mapping:<b> "+gp.mapping+"<br/>";
        for(var i=0;i<gp.buttons.length;i++) {
            html+= "<b>buttons[ "+(i)+"]:</b> ";
            if(gp.buttons[i].pressed) html+= " pulsado";
            html+= "<br/>";
        }
        
        for(var i=0;i<gp.axes.length; i++) {
            html+= "<b>axes["+i+"]:</b> "+gp.axes[i]+"<br/>";
        }
        
        $("#gamepadDisplay").html(html);
    }
    </script>
    </body>
</html>