coherent-gameface-interaction-manager
Version:
Library for the most common UI interactions
160 lines (153 loc) • 11.9 kB
HTML
<!--Copyright (c) Coherent Labs AD. All rights reserved. Licensed under the MIT License. See License.txt in the project root for license information. -->
<html lang="en">
<head>
<title>Gamepad demo</title>
<style>
body {
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<h3>Press the right and left shoulder buttons (R1 and L1 on Playstation/ RB and LB on XBox) to change the buttons colors</h3>
<h3>Press the left joystick and left to reset them</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.2"
baseProfile="tiny"
x="0px"
y="0px"
viewBox="-75 -75 800 600"
overflow="visible"
xml:space="preserve"
width="800"
height="600"
>
<g id="top_x5F_buttons">
<g id="R1">
<path
id="5"
fill="#A9A8A9"
d="M429.6,45.9c18-3.1,37.3-2.1,53.7,6.6c2.1,1.1,4.2,2.3,6.1,3.7c1.1,0.8,1.3,2,1.5,3.3 c0.3,1.5,0.6,3,0.7,4.5c0.2-0.4,0.4-0.7,0.6-1.1c-0.6,0.3-2.3-0.3-2.9-0.4c-1.1-0.2-2.3-0.4-3.4-0.6c-2-0.4-4.1-0.7-6.1-1.1 c-4.2-0.8-8.5-1.5-12.7-2.3c-8.3-1.5-16.6-3-24.9-4.4c-4.6-0.8-9.4-1.3-13.7-3.1c0.3,0.4,0.6,0.8,0.9,1.2c0.3-2.4,0.5-4.8,0.8-7.2 z"
/>
</g>
<g id="L1">
<path
id="4"
fill="#A9A8A9"
d="M185,42.6c-9.7-1.8-19.6-2-29.3-0.3c-4.9,0.8-9.6,2.2-14.3,3.7c-4.7,1.5-9.5,2.8-13.8,5.1 c-1.9,1-4.5,2.4-5.6,4.3c-0.6,1-0.6,2.2-0.8,3.4c-0.1,1.4-0.2,2.9-0.1,4.3c0,0.7,0.6,1.3,1.2,1.2c4.2,0,8.2-1.2,12.3-2.1 c4.2-1,8.5-1.8,12.7-2.6c4.2-0.8,8.5-1.6,12.8-2.2c4.2-0.7,8.5-1.4,12.7-1.6c4.5-0.3,9,0,13.3-1.6c0.5-0.2,0.9-0.6,0.9-1.2 z"
/>
</g>
<path id="6" fill="#A9A8A9" d="M101.2,60.2h-12c-2.8,0-5-2.2-5-5V11.5 c0-2.8,2.2-5,5-5h12c2.8,0,5,2.2,5,5v43.7C106.2,58,103.9,60.2,101.2,60.2z" />
<path id="7" fill="#A9A8A9" d="M527.3,60.2h-12c-2.8,0-5-2.2-5-5V11.5 c0-2.8,2.2-5,5-5h12c2.8,0,5,2.2,5,5v43.7C532.3,58,530,60.2,527.3,60.2z" />
</g>
<g id="central_x5F_buttons">
<g>
<path
id="8"
fill="#A9A8A9"
d="M182.9,72.5c0.5,5.4,1.5,11,3.6,16c1.8,4.3,8.6,5.2,11.3,1.3c1.4-2.1,1.3-4.7,0.8-7 c-0.6-2.9-1.4-5.7-2.1-8.5c-0.5-2.2-1-4.5-2.6-6.2c-1.4-1.5-3.6-2.1-5.6-1.7c-5.3,0.9-6.8,7.1-4.3,11.3c0.8,1.4,3,0.1,2.2-1.3 z"
/>
</g>
<g>
<path
id="9"
fill="#A9A8A9"
d="M418.6,70.6c-0.9,3.1-1.7,6.2-2.6,9.3c-0.7,2.5-1.2,5.3-0.5,7.9c1.2,4.3,6.3,6.7,10.3,4.7 c4.7-2.3,5.1-8.7,6-13.2c0.5-2.7,1.3-5.8,0.2-8.5c-0.8-2-2.5-3.5-4.6-4.1c-5.3-1.7-10.3,3.1-9.8,8.4c0.2,1.6,2.7,1.6,2.5,0 z"
/>
</g>
<g>
<path
fill="#A9A8A9"
d="M407.1,56.7c0.5-2-0.2-3.9-1.6-5.4c-1.5-1.7-3.8-2.3-6-2.6c-5.4-0.7-11-0.7-16.5-1 c-11.2-0.5-22.4-1-33.6-1.3c-22.5-0.6-45-0.6-67.5-0.2c-11.3,0.2-22.6,0.6-33.9,1.1c-10.6,0.5-21.4,0.8-31.8,3 c-2.3,0.5-4.7,1-6.9,1.8c-0.7,0.3-1.2,0.5-1.5,1.3c-0.5,1.1-0.8,2.3-1,3.5c-0.9,4.9-0.2,9.8,0.9,14.6c2.4,10.7,5.1,21.4,7.4,32.2 c1.2,5.5,2.3,10.9,3.4,16.4c1,5.1,1.7,10.4,3.4,15.4c1.4,4.2,3.6,8.2,7,11.1c3.5,3,8,4.2,12.5,4.3c2.4,0,4.8-0.2,7.2-0.5 c-0.5-0.5-1-1-1.5-1.5c-0.1,0.2-0.1,0.4-0.2,0.6c-0.3,0.8,0.5,1.5,1.2,1.6c19.4,1.6,39,1.1,58.5,0.9c19.6-0.2,39.1-0.7,58.7-1.2 c2.7-0.1,5.5-0.2,8.2-0.2c2.5-0.1,5-0.2,7.3-0.9c4-1.1,7.4-4,8-8.3c-0.8,0-1.7,0-2.5,0c-0.1,1.1-0.2,2.1-0.3,3.2 c-0.1,1.2,1.8,1.7,2.3,0.6c5.3-11.8,7.5-24.6,9.7-37.3c1.1-6.3,2.2-12.7,3.7-18.9c1.6-6.4,4-12.7,5.2-19.2c1.2-6.7,1.1-14-2.5-20 c-0.8-1.4-3-0.1-2.2,1.3c6.8,11.4,0.2,24.9-2.7,36.4c-3,12-4.4,24.4-7.1,36.5c-1.5,6.8-3.4,13.6-6.3,20c0.8,0.2,1.6,0.4,2.3,0.6 z"
/>
</g>
</g>
<g id="Dpad">
<g id="DTop">
<path
id="12"
fill="#A9A8A9"
d="M142.2,93.5c-2.6,1.4-4.6,3.9-5.2,6.8c-0.4,1.7-0.3,3.5-0.2,5.3c0.1,2.1,0.2,4.1,0.3,6.2 c0.1,1.6,0,3.3,0.7,4.8c0.8,1.6,2.2,2.9,3.4,4.2c1.4,1.6,2.7,3.1,4.1,4.7c1.1,1.3,2.2,2.8,3.6,3.7c2.8,1.7,5.8-0.1,7.8-2.1 c1.5-1.4,2.8-2.9,4.2-4.4c1.3-1.3,2.7-2.6,3.8-4.1c1.1-1.4,1.1-3.1,1.2-4.8c0.1-2,0.2-4.1,0.3-6.1c0.1-2.1,0.2-4.2,0.2-6.3 c0-1.6-0.2-3.2-1-4.6c-1.8-3.1-5.5-4.1-8.9-4c-4.7,0-9.4,0.2-14.2,0.3c-0.8,0-0.8,1.3,0,1.2c3.5-0.1,7-0.1,10.5-0.2 z"
/>
</g>
<g id="DLeft">
<path
id="14"
fill="#A9A8A9"
d="M110.5,125.2c-0.3,4.1-0.5,8.2-0.5,12.3c0,3.4,0.2,7,2.3,9.7c2.1,2.6,5,2.9,8.2,2.8c4-0.2,8.1-0.2,12-0.7 c1.7-0.2,2.8-1.1,4.1-2.2c1.4-1.2,2.9-2.5,4.2-3.8c2.1-2.1,5.5-4.7,5.9-7.9c0.2-1.4-0.5-2.7-1.3-3.8c-1.2-1.5-2.6-2.8-3.8-4.2 c-1.4-1.5-2.7-3-4.2-4.4c-1.1-1.1-2.3-2.1-3.9-2.4c-2-0.5-4.2-0.3-6.3-0.3c-2.3,0-4.7-0.1-7-0.1c-1.8,0-3.9-0.4-5.4,0.7 z"
/>
</g>
<g id="DRight">
<path
id="15"
fill="#A9A8A9"
d="M158.2,134.1c1.8-2.6,4-4.8,6.4-6.8c1.1-0.9,2.2-1.9,3.4-2.8c1.2-0.9,2.4-2,3.9-2.4 c1.5-0.4,3.2-0.1,4.7-0.1c1.8,0,3.6,0.1,5.4,0.1c1.6,0,3.2,0,4.8,0.1c1.9,0.1,2.9,1.9,3.8,3.3c1.8,2.8,1.5,6.1,1.5,9.3 c0.1,3.1,0.5,6.6-0.6,9.6c-0.5,1.3-1.3,2.5-2.5,3.2c-1.5,0.9-3.4,0.9-5.1,1c-3.3,0.1-6.7,0.1-10-0.3c-0.9-0.1-1.8-0.2-2.7-0.5 c-1.1-0.3-1.8-0.9-2.6-1.7c-1.3-1.2-2.5-2.4-3.8-3.7c-1.2-1.3-2.4-2.5-3.6-3.9c-1.1-1.2-3.2-3-3-4.8c-0.2,0.2-0.3,0.4-0.5,0.6 z"
/>
</g>
<g id="DBottom">
<path
id="13"
fill="#A9A8A9"
d="M139.1,153.2c2.2-2.5,4.4-4.9,6.7-7.2c1.1-1.1,2.3-2.3,3.5-3.4c0.7-0.6,1.4-1.2,2.3-1.3 c1.1-0.2,1.8,0.5,2.6,1.2c4.1,3.9,9.7,8.4,10.3,14.4c0.3,3.3,0,6.7-0.1,10c0,1.6,0.1,3.6-0.6,5.1c-0.7,1.4-2.2,2.3-3.6,2.7 c-3.2,1-6.9,0.8-10.2,0.7c-2.9-0.1-6.9,0.1-9.3-1.9c-2.5-2-2.6-5.5-2.6-8.4c0-1.9,0-3.9,0.1-5.8c0-0.5,0.5-5.8,0.3-5.9 z"
/>
</g>
</g>
<g id="Joysticks">
<circle id="10" fill="#A9A8A9" stroke-miterlimit="10" cx="226.9" cy="203.5" r="29.5" />
<circle id="11" fill="#A9A8A9" stroke-miterlimit="10" cx="388" cy="203.5" r="29.5" />
<circle fill="none" stroke="#A9A8A9" stroke-width="3" stroke-miterlimit="10" cx="226.9" cy="203.5" r="40.7" />
<circle fill="none" stroke="#A9A8A9" stroke-width="3" stroke-miterlimit="10" cx="388" cy="203.5" r="40.7" />
</g>
<g id="buttons">
<circle id="3" fill="#A9A8A9" stroke-miterlimit="10" cx="463" cy="98.1" r="15.7" />
<circle id="2" fill="#A9A8A9" stroke-miterlimit="10" cx="426.5" cy="135.2" r="15.7" />
<circle id="1" fill="#A9A8A9" stroke-miterlimit="10" cx="499.8" cy="135.2" r="15.7" />
<circle id="0" fill="#A9A8A9" stroke-miterlimit="10" cx="463" cy="172.2" r="15.7" />
</g>
<g id="gamepad-base">
<g>
<path
fill="#A9A8A9"
d="M499.7,65c-48.2-13.6-98.2-19.1-148.1-20.3c-50.5-1.2-101.1,1.9-151.5,5.4c-28.2,2-56.5,4.4-83.8,12.4 c0.8,0.2,1.6,0.4,2.4,0.6c-0.5-0.5-1-1-1.4-1.5c-1.2-1.2-3-0.8-3.9,0.5C92.1,92.9,82.7,129.8,75.3,166c-4.2,20.6-8.1,41.3-10,62.2 c-1.9,20.8-1.7,41.8,1,62.5c2.1,16.6,5.2,33.8,13.1,48.8c3.6,6.7,8.2,13,14.2,17.7c2.6,2.1,6,4.9,9.3,5.5c1.5,0.2,3,0.1,4.5,0.2 c2.3,0.1,4.7,0.6,6.9,1.1c8.4,1.7,17.2,3.5,24.5-2.2c6.5-5,9.9-13.2,12.8-20.6c5.7-14.9,8.2-30.7,13-45.8c2.3-7.3,5.1-14.5,9.2-21 c4.2-6.7,9.9-13.4,17.2-16.6c9.3-4.1,18.5,1.8,28,1.4c8.9-0.3,17.1-4.4,25.9-5.2c2.1-0.2,4.2-0.2,6.2,0.2c1.9,0.3,2.8,0.3,4.2-1.1 c-0.8,0.2-1.6,0.4-2.4,0.6c23.9,4,48.3,5.4,72.5,4c5.9-0.3,11.8-0.9,17.7-1.5c5.9-0.7,11.9-1.4,17.9-1.2c11.6,0.4,22.4,6,34.2,5.2 c5.9-0.4,11.7-1.7,17.7-1.4c4.7,0.3,9.3,1.9,13.4,4.2c8.6,4.9,14.9,12.7,19.1,21.5c9.8,20.2,9.7,43.6,18.4,64.2 c2.1,5,4.6,10.6,9.1,14.1c4.6,3.6,10.5,3.6,16.1,3.5c11-0.2,22.5-1,31.5-8.1c-0.6,0.2-1.2,0.5-1.8,0.7c3.8-0.1,6.9-5,9.1-7.8 c2.7-3.4,5.1-7,7.2-10.8c4.4-7.9,7.4-16.6,9.5-25.4c4.6-18.8,5.5-38.5,5.6-57.8c0.2-42.2-6.2-84.5-18.9-124.8 c-7.1-22.6-16.2-44.6-27.2-65.7c-1.5-2.9-5.8-0.3-4.3,2.5c18.7,35.9,31.8,74.7,39,114.6c3.6,20.1,5.7,40.5,6.2,60.9 c0.5,19.1,0.1,38.6-3,57.5c-3.2,19.3-9.7,38.6-24.2,52.4c0.6-0.2,1.2-0.5,1.8-0.7c-2.2,0.1-3.4,1.4-5.3,2.5 c-2.2,1.3-4.5,2.2-7,2.9c-4.9,1.4-9.9,1.7-14.9,1.9c-5,0.2-11.1,1-15.5-1.7c-4.6-2.7-7-9-8.9-13.7c-8.4-20.7-8.4-44-18.4-64.2 c-4.3-8.7-10.6-16.5-18.9-21.8c-4-2.6-8.5-4.5-13.2-5.4c-5.3-1-10.6-0.5-15.9,0.1c-6.2,0.8-11.9,1-18-0.3 c-5.6-1.2-11.1-3-16.8-3.7c-12.2-1.7-24.6,1.1-36.8,1.9c-13.7,1-27.5,1.1-41.2,0.4c-6.7-0.4-13.4-1-20.1-1.8 c-3.5-0.4-7-0.9-10.5-1.4c-2.7-0.4-5.1-1.5-7.2,0.6c0.8-0.2,1.6-0.4,2.4-0.6c-8.6-1.9-16.9,0.9-25.2,3c-4.1,1-8.3,1.9-12.6,1.5 c-4.8-0.4-9.4-2.1-14.2-2.7c-16.6-2.1-29.1,13.4-35.7,26.7c-6.7,13.7-9.7,28.8-13.5,43.5c-2,7.4-4.1,14.9-7.2,21.9 c-3.1,7-7.3,15.7-15.7,17.1c-4.4,0.7-8.9-0.4-13.2-1.3c-4.2-0.9-8.2-1.2-12.4-1.4c-0.2,0-0.6,0-0.8-0.1c-0.4-0.1-0.4-0.3,0.1,0 c-0.8-0.4-1.6-0.9-2.4-1.3c-1.5-0.9-3-2-4.4-3.1c-2.8-2.3-5.4-5-7.6-7.9c-9.4-12.4-13.3-28.1-16-43.2c-3.5-20-4.6-40.4-3.6-60.7 c1-20.4,4.2-40.7,8.1-60.8c7-35.8,14.7-72.8,33.2-104.7c2.2-3.8,4.6-7.5,7.1-11.2c-1.3,0.2-2.6,0.3-3.9,0.5c0.5,0.5,1,1,1.4,1.5 c0.6,0.6,1.6,0.9,2.4,0.6c24.1-7.1,49.2-9.7,74.2-11.6c25-1.9,50-3.5,75-4.7c49.6-2.4,99.4-2.7,148.8,2.9 c27.9,3.2,55.6,8.3,82.7,15.9C501.5,70.7,502.8,65.9,499.7,65L499.7,65z"
/>
</g>
</g>
</svg>
<script src="../../dist/gamepad.js"></script>
<script>
gamepad.enabled = true;
const buttons = [];
for (let buttonID = 0; buttonID < 17; buttonID++) {
const element = document.getElementById(buttonID);
if (!element) continue;
buttons.push(element);
}
gamepad.on({
actions: ['playstation.r1', 'playstation.l1'],
callback: () => {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
const color = `rgb(${r}, ${g}, ${b})`;
buttons.forEach((button) => {
button.setAttribute('fill', color);
});
},
});
gamepad.on({
actions: ['playstation.d-pad-left', 'playstation.l3'],
callback: () => {
buttons.forEach((button) => {
button.setAttribute('fill', '#A9A8A9');
});
},
});
</script>
</body>
</html>