Gamepad HTML example.

Rescator
Location: Trondheim, Norway
Contact:

Gamepad HTML example.

Postby Rescator » Wed Nov 12, 2014 5:53 am

Since a few coders hang around here I thought this might be of interest to some.
If you have a more recent version of Chrome, Firefox, Opera then this should work, IE should support this in the future (maybe IE12).
It is suggested you use a Xinput compatible gamepad (a few gamepads may also have a switch or button to toggle Xinput and DirectInput).

Just save the code below in a .html file then open it in your browser, press a button on your gamepad and it should work.

Code: Select all

<!doctype html>
<html>
<!-- (c) 2014 Roger Hågensen -->
<!-- zlib License, http://en.wikipedia.org/wiki/Zlib_License -->
<head>
<meta charset="utf-8">
<title>Gamepad Test</title>
</head>
</body>
<script>
var gamepad = new Object();
function gamepad_init()
{
   gamepad.name = '';
   gamepad.face1 = 0.0;
   gamepad.face2 = 0.0;
   gamepad.face3 = 0.0;
   gamepad.face4 = 0.0;
   gamepad.shoulderl = 0.0;
   gamepad.shoulderr = 0.0;
   gamepad.triggerl = 0.0;
   gamepad.triggerr = 0.0;
   gamepad.back = 0.0;
   gamepad.forward = 0.0;
   gamepad.stickl = 0.0;
   gamepad.stickr = 0.0;
   gamepad.dpadu = 0.0;
   gamepad.dpadr = 0.0;
   gamepad.dpadl = 0.0;
   gamepad.dpadd = 0.0;
   gamepad.sticklx = 0.0;
   gamepad.stickly = 0.0;
   gamepad.stickrx = 0.0;
   gamepad.stickry = 0.0;
   gamepad.enabled = true;
   if (typeof navigator.getGamepads === 'undefined')
   {
      gamepad.enabled = false;
   }
}

//returns true if a gamepad with that index exists and it's current state.
//the index number may change if a gamepad is re-ordered by the OS or the browser.
function gamepad_get(index)
{
   if (gamepad.enabled === false)
   {
      return false;
   }
   if ((index < 0) || (index > 15))
   {
      return false;
   }
   var tmpad = navigator.getGamepads();
   if (tmpad.length === 0)
   {
      return false;
   }
   if (typeof tmpad[index] === 'undefined')
   {
      return false;
   }
   if (tmpad[index] === null)
   {
      return false;
   }

   gamepad.name = tmpad[index].mapping;
   gamepad.face1 = tmpad[index].buttons[0].value;
   gamepad.face2 = tmpad[index].buttons[1].value;
   gamepad.face3 = tmpad[index].buttons[2].value;
   gamepad.face4 = tmpad[index].buttons[3].value;
   gamepad.shoulderl = tmpad[index].buttons[4].value;
   gamepad.shoulderr = tmpad[index].buttons[5].value;
   gamepad.triggerl = tmpad[index].buttons[6].value;
   gamepad.triggerr = tmpad[index].buttons[7].value;
   gamepad.back = tmpad[index].buttons[8].value;
   gamepad.forward = tmpad[index].buttons[9].value;
   gamepad.stickl = tmpad[index].buttons[10].value;
   gamepad.stickr = tmpad[index].buttons[11].value;
   gamepad.dpadu = tmpad[index].buttons[12].value;
   gamepad.dpadd = tmpad[index].buttons[13].value;
   gamepad.dpadl = tmpad[index].buttons[14].value;
   gamepad.dpadr = tmpad[index].buttons[15].value;
   gamepad.sticklx = tmpad[index].axes[0];
   gamepad.stickly = tmpad[index].axes[1];
   gamepad.stickrx = tmpad[index].axes[2];
   gamepad.stickry = tmpad[index].axes[3];

   return true;
}

//Apply the deadzones and return the result, indicate if the result should be smoothed or not.
//float = gamepad_deadzone(float, float, float, true | false)
function gamepad_deadzone(input, inner, outer, smooth)
{
   if (input === 0.0)
   {
      return input;
   }

   if (smooth !== true)
   {
      if (input > 0.0)
      {
         if (input > outer)
         {
            input = 1.0;
         }
         else if (input < inner)
         {
            input = 0.0;
         }
         return input;
      }
      if (input < -outer)
      {
         input = -1.0;
      }
      else if (input > -inner)
      {
         input = 0.0;
      }
      return input;
   }

   if (input > 0.0)
   {
      if (input > outer)
      {
         input = outer;
      }
      else if (input < inner)
      {
         input = inner;
      }
      return (input - inner) / (outer - inner);
   }

   if (input < -outer)
   {
      input = -outer;
   }
   else if (input > -inner)
   {
      input = -inner;
   }
   return (input + inner) / (outer - inner);
}

function example_gamepadloop()
{
   var text, result, i;

   if (player_gamepad === -1)
   {
      text = 'Please press a button or connect your controller.';
      document.getElementById('example').innerHTML = text;
      for (i = 0; i <= 15; i += 1)
      {
         result = gamepad_get(i);
         if (result === true)
         {
            player_gamepad = i;
            break;
         }
      }
      setTimeout('example_gamepadloop()', 100);
      return;
   }

   result = gamepad_get(player_gamepad);
   if (result === false)
   {
      player_gamepad = -1;
      setTimeout('example_gamepadloop()', 100);
      return;
   }
   text = 'Mapping: ' + gamepad.name + '<br>' +
   'Face 1: ' + gamepad.face1.toFixed(3) + '<br>' +
   'Face 2: ' + gamepad.face2.toFixed(3) + '<br>' +
   'Face 3: ' + gamepad.face3.toFixed(3) + '<br>' +
   'Face 4: ' + gamepad.face4.toFixed(3) + '<br>' +
   'Left Shoulder: ' + gamepad.shoulderl.toFixed(3) + '<br>' +
   'Right Shoulder: ' + gamepad.shoulderr.toFixed(3) + '<br>' +
   'Back: ' + gamepad.back.toFixed(3) + '<br>' +
   'Forward: ' + gamepad.forward.toFixed(3) + '<br>' +
   'Left Stick: ' + gamepad.stickl.toFixed(3) + '<br>' +
   'Right Stick: ' + gamepad.stickr.toFixed(3) + '<br>' +
   'D-Pad Up: ' + gamepad.dpadu.toFixed(3) + '<br>' +
   'D-Pad Down: ' + gamepad.dpadd.toFixed(3) + '<br>' +
   'D-Pad Left: ' + gamepad.dpadl.toFixed(3) + '<br>' +
   'D-Pad Right: ' + gamepad.dpadr.toFixed(3) + '<br>' +
   'Left Trigger: ' + gamepad.triggerl.toFixed(3) + ' (Deadzone) ' + gamepad_deadzone(gamepad.triggerl, 0.125, 0.875, false).toFixed(3) + '<br>' +
   'Right Trigger: ' + gamepad.triggerr.toFixed(3) + ' (Deadzone) ' + gamepad_deadzone(gamepad.triggerr, 0.125, 0.875, true).toFixed(3) + '<br>' +
   'Left Stick X: ' + gamepad.sticklx.toFixed(3) + ' (Deadzone) ' + gamepad_deadzone(gamepad.sticklx, 0.25, 0.75, true).toFixed(3) + '<br>' +
   'Left Stick Y: ' + gamepad.stickly.toFixed(3) + ' (Deadzone) ' + gamepad_deadzone(gamepad.stickly, 0.25, 0.75, true).toFixed(3) + '<br>' +
   'Right Stick X: ' + gamepad.stickrx.toFixed(3) + ' (Deadzone) ' + gamepad_deadzone(gamepad.stickrx, 0.25, 0.75, false).toFixed(3) + '<br>' +
   'Right Stick Y: ' + gamepad.stickry.toFixed(3) + ' (Deadzone) ' + gamepad_deadzone(gamepad.stickry, 0.25, 0.75, false).toFixed(3);
   document.getElementById('example').innerHTML = text;
   setTimeout('example_gamepadloop()', 100);
}

function page_init()
{
   gamepad_init();
   example_gamepadloop();
}

var player_gamepad = -1;

addEventListener('load', page_init, false);

</script>

<div id="example">
</div>
</body>
</html>

Return to “Videogames”

Who is online

Users browsing this forum: Google [Bot], Steve C and 1 guest