CrossBrowdy - Examples

Input

Keyboard, TV remotes, gamepads and other controllers

An example managing keyboard, TV remotes, gamepads and other controllers:

index.html:

<!DOCTYPE html>
<html>
	<head>
		<!-- This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="canonical" href="https://crossbrowdy.com/examples/input/keyboard_tv_remotes_gamepads_and_other_controllers/try" />
		<title>Input: Keyboard, TV remotes, gamepads and other controllers - Example</title>
		<!-- Loads the needed CSS files: -->
		<link rel="stylesheet" type="text/css" href="main.css" />
		<!-- Loads CrossBrowdy.js (main file): -->
		<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
		<script src="https://crossbrowdy.com/CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
		<!-- Loads the other needed script files: -->
		<script src="main.js" type="text/javascript" language="javascript"></script>
	</head>
	<body>
		<h3>Keyboard and compatible (TV remotes and some gamepads and controllers which fire keycodes):</h3>
		Keys down: <span id="keys_down"></span><br />
		'UP' down: <span id="key_up"></span><br />
		'DOWN' down: <span id="key_down"></span><br />
		'LEFT' down: <span id="key_left"></span><br />
		'RIGHT' down: <span id="key_right"></span><br />
		'LEFT' or 'RIGHT' down (any): <span id="left_or_right"></span><br />
		'LEFT' and 'RIGHT' down (simultaneously): <span id="left_and_right"></span><br />
		Last key down: <span id="last_key_down"></span><br />
		Last key up: <span id="last_key_up"></span><br />
		Last keys pressed (expires automatically after a desired time without pressing anything): <span id="last_keys_pressed"></span><br />
		Last typed string (expires automatically after a desired time without pressing anything): <span id="last_typed_string"></span><br />
		<h3>Gamepads and other controllers (which use HTML5 Gamepad API or proprietary API):</h3>
		Standard gamepads (compatible with HTML5 Gamepad API): <span id="gamepads_standard"></span><br />
		Proprietary gamepads (compatible with proprietary API): <span id="gamepads_proprietary"></span><br />
		Last gamepad connected: <span id="last_gamepad_connected"></span><br />
		Last gamepad disconnected: <span id="last_gamepad_disconnected"></span><br />
		"0" or "1" axes down (any) in any gamepad: <span id="zero_or_one_any"></span><br />
		"0" and "1" axes down (simultaneously) in any gamepad: <span id="zero_and_one_any"></span><br />
		"0" or "1" axes down (any) in gamepad #1: <span id="zero_or_one_gamepad0"></span><br />
		"0" and "1" axes down (simultaneously) in gamepad #1: <span id="zero_and_one_gamepad0"></span><br />
		"1" or "2" buttons down (any) in any gamepad: <span id="one_or_two_any"></span><br />
		"1" and "2" buttons down (simultaneously) in any gamepad: <span id="one_and_two_any"></span><br />
		"1" or "2" buttons down (any) in gamepad #1: <span id="one_or_two_gamepad0"></span><br />
		"1" and "2" buttons down (simultaneously) in gamepad #1: <span id="one_and_two_gamepad0"></span><br />
		Buttons available in any gamepad: <span id="buttons_all_any"></span><br />
		Buttons available in gamepad #1: <span id="buttons_all_gamepad0"></span><br />
		Buttons down:<br />
		<span id="buttons_down"></span>
		<br />
		<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
		<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
			<span style="font-weight:bold;">Console:</span><br />
		</div>
		<div id="crossbrowdy_info"><a href="https://crossbrowdy.com/examples/input/keyboard_tv_remotes_gamepads_and_other_controllers" target="_blank">CrossBrowdy.com example</a></div>
	</body>
</html>

main.css:

/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */

body { background-color:#aaddee; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span { color:#aa0000; }

main.js:

/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */

CB_init(main); //It will call the "main" function when ready.


//This function will be called when CrossBrowdy is ready:
function main()
{
	//Manages the keyboard (also compatible with some TV remotes, gamepads and controllers which fire key codes):
	CB_Keyboard.onKeyDown(function(e, keyCode) { CB_Elements.insertContentById("last_key_down", keyCode); }); //Event fired when a key is down (pressed).
	CB_Keyboard.onKeyUp(function(e, keyCode) { CB_Elements.insertContentById("last_key_up", keyCode); }); //Event fired when a key is up (released).
	showKeyboardInformation(); //Starts showing the information constantly.
	
	//Manages the gamepads and controllers which use HTML5 Gamepad API or proprietary API:
	CB_Controllers.onConnect(function(gamepad) { CB_Elements.insertContentById("last_gamepad_connected", "#" + gamepad.index + " (" + gamepad.id + ")"); updateGamepadsInformation(); }); //Event fired when a gamepad is connected.
	CB_Controllers.onDisconnect(function(gamepad) { CB_Elements.insertContentById("last_gamepad_disconnected", "#" + gamepad.index + " (" + gamepad.id + ")"); updateGamepadsInformation(); }); //Event fired when a gamepad is disconnected.
	showGamepadsButtonsInformation(); //Starts showing the information constantly.
}


//Shows the keyboard information (also compatible with some TV remotes, gamepads and controllers which fire key codes):
function showKeyboardInformation()
{
	//Shows the information:
	CB_Elements.insertContentById("keys_down", getKeysDown());
	CB_Elements.insertContentById("key_up", CB_Keyboard.isKeyDown(CB_Keyboard.keys.UP) ? "Yes" : "No");
	CB_Elements.insertContentById("key_down", CB_Keyboard.isKeyDown(CB_Keyboard.keys.DOWN) ? "Yes" : "No");
	CB_Elements.insertContentById("key_left", CB_Keyboard.isKeyDown(CB_Keyboard.keys.LEFT) ? "Yes" : "No");
	CB_Elements.insertContentById("key_right", CB_Keyboard.isKeyDown(CB_Keyboard.keys.RIGHT) ? "Yes" : "No");
	CB_Elements.insertContentById("left_or_right", CB_Keyboard.isKeyDown([CB_Keyboard.keys.LEFT, CB_Keyboard.keys.RIGHT]) ? "Yes" : "No");
	CB_Elements.insertContentById("left_and_right", CB_Keyboard.isKeyDown([CB_Keyboard.keys.LEFT, CB_Keyboard.keys.RIGHT], true) ? "Yes" : "No");
	CB_Elements.insertContentById("last_keys_pressed", CB_Keyboard.getKeysPressed());
	CB_Elements.insertContentById("last_typed_string", CB_Keyboard.getTypedString());
	
	//Calls itself again:
	setTimeout(showKeyboardInformation, 1);
}


//Returns the key downs (as a string):
function getKeysDown()
{
	var output = "";
	
	var keysDown = CB_Keyboard.getKeysDown();
	for (var keyCode in keysDown)
	{
		if (keysDown[keyCode])
		{
			output += keyCode + ", ";
		}
	}
	
	return CB_rtrim(output, [" ", ","]);
}


function updateGamepadsInformation()
{
	var controllersAll = CB_Controllers.getGamePads(); //Object with two properties ("standard", containing gamepads that use the HTML5 GamePad API, and "proprietary" the gamepad objects for each proprietary system).
	
	//Shows information about the gamepads compatible with the HTML5 Gamepad API:
	var gamepadsStandardInfo = "";
	for (var gamepadIndex in controllersAll.standard.gamepads)
	{
		gamepadsStandardInfo += "#" + gamepadIndex + " (" + controllersAll.standard.gamepads[gamepadIndex].id + "), ";
		CB_console(controllersAll.standard.gamepads[gamepadIndex]); //Shows in the console the status object of this device.
	}
	CB_Elements.insertContentById("gamepads_standard", CB_rtrim(gamepadsStandardInfo, [" ", ","]));

	//Shows information about the gamepads compatible with a proprietary API:
	var gamepadsProprietaryInfo = "";
	for (var proprietarySystem in controllersAll)
	{
		if (proprietarySystem === "standard") { continue; }
		gamepadsProprietaryInfo += proprietarySystem;
		for (var gamepadType in controllersAll[proprietarySystem])
		{
			gamepadsProprietaryInfo += " (" + gamepadType + ": ";
			for (var gamepadIndex in controllersAll[proprietarySystem][gamepadType])
			{
				gamepadsProprietaryInfo += gamepadIndex + ", ";
				CB_console(controllersAll[proprietarySystem][gamepadType][gamepadIndex]); //Shows in the console the status object of this device.
			}
			gamepadsProprietaryInfo = CB_rtrim(gamepadsProprietaryInfo, [" ", ","]);
			gamepadsProprietaryInfo += ")";
		}
		gamepadsProprietaryInfo += ", ";
	}
	CB_Elements.insertContentById("gamepads_proprietary", CB_rtrim(gamepadsProprietaryInfo, [" ", ","]));
}


//Shows the gamepads' buttons information:
function showGamepadsButtonsInformation()
{
	var controllersAll = CB_Controllers.getGamePads(); //Object with two properties ("standard", containing gamepads that use the HTML5 GamePad API, and "proprietary" the gamepad objects for each proprietary system).
	
	//Shows all buttons being pressed and available axes:
	var buttonsDownOutput = "";
	for (var system in controllersAll)
	{
		buttonsDownOutput += "<h4>" + ((system === "standard") ? "STANDARD (compatible with HTML5 Gamepad API)" : system) + "</h4>";
		for (var gamepadType in controllersAll[system])
		{
			buttonsDownOutput += "<h5>" + gamepadType + "</h5>";
			for (var gamepadIndex in controllersAll[system][gamepadType])
			{
				buttonsDownOutput += "<h6>#" + gamepadIndex + " (" + controllersAll[system][gamepadType][gamepadIndex].id + "):</h6>";

				buttonsDownOutput += "Axis pressed: " + CB_Controllers.getAxes(controllersAll[system][gamepadType][gamepadIndex].id) + "<br />";
				
				buttonsDownOutput += "Buttons pressed: ";
				for (buttonCode in CB_Controllers.getButtonsDown(controllersAll[system][gamepadType][gamepadIndex].id))
				{
					buttonsDownOutput += buttonCode + ", ";
				}
				buttonsDownOutput = CB_rtrim(buttonsDownOutput, [" ", ","]);
			}
		}
	}
	CB_Elements.insertContentById("buttons_down", buttonsDownOutput);
	
	//Shows available buttons (all):
	CB_Elements.insertContentById("buttons_all_any", JSON.stringify(CB_Controllers.getButtons()));
	CB_Elements.insertContentById("buttons_all_gamepad0", JSON.stringify(CB_Controllers.getButtons(0)));

	//Managing axes pressed currently:
	if (CB_Controllers.isAxisDown([0, 1]))
	{
		CB_console("Axis 0 or 1 (maybe both) is being pressed in some or all gamepads");
		CB_Elements.insertContentById("zero_or_one_any", "Yes");
	}
	else { CB_Elements.insertContentById("zero_or_one_any", "No"); }

	if (CB_Controllers.isAxisDown([0, 1], 0))
	{
		CB_console("Axis 0 or 1 (maybe both) is being pressed in gamepad whose index is '0'");
		CB_Elements.insertContentById("zero_or_one_gamepad0", "Yes");
	}
	else { CB_Elements.insertContentById("zero_or_one_gamepad0", "No"); }

	if (CB_Controllers.isAxisDown([0, 1], 0, null, null, true))
	{
		CB_console("Axes 0 and 1 are both being pressed in gamepad whose index is '0'");
		CB_Elements.insertContentById("zero_and_one_gamepad0", "Yes");
	}
	else { CB_Elements.insertContentById("zero_and_one_gamepad0", "No"); }
	
	if (CB_Controllers.isAxisDown([0, 1], "", null, null, true))
	{
		CB_console("Axes 0 and 1 are both being pressed, regardless they are being pressed in the same gamepad or in different ones");
		CB_Elements.insertContentById("zero_and_one_any", "Yes");
	}
	else { CB_Elements.insertContentById("zero_and_one_any", "No"); }
	
	//Managing buttons pressed currently:
	if (CB_Controllers.isButtonDown([1, 2]))
	{
		CB_console("Button 1 or 2 (maybe both) is being pressed in some or all gamepads");
		CB_Elements.insertContentById("one_or_two_any", "Yes");
	}
	else { CB_Elements.insertContentById("one_or_two_any", "No"); }

	if (CB_Controllers.isButtonDown([1, 2], 0))
	{
		CB_console("Button 1 or 2 (maybe both) is being pressed in gamepad whose index is '0'");
		CB_Elements.insertContentById("one_or_two_gamepad0", "Yes");
	}
	else { CB_Elements.insertContentById("one_or_two_gamepad0", "No"); }

	if (CB_Controllers.isButtonDown([1, 2], 0, true))
	{
		CB_console("Button 1 and 2 are both being pressed in gamepad whose index is '0'");
		CB_Elements.insertContentById("one_and_two_gamepad0", "Yes");
	}
	else { CB_Elements.insertContentById("one_and_two_gamepad0", "No"); }

	if (CB_Controllers.isButtonDown([1, 2], "", true))
	{
		CB_console("Button 1 and 2 are both being pressed, regardless they are being pressed in the same gamepad or in different ones");
		CB_Elements.insertContentById("one_and_two_any", "Yes");
	}
	else { CB_Elements.insertContentById("one_and_two_any", "No"); }

	//Calls itself again:
	setTimeout(showGamepadsButtonsInformation, 1);
}

Try this example

You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.

All the examples together can be downloaded here.

Go back to Guides & Tutorials

Try this example












Share