Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Beridok
Beridok authored Mar 23, 2020
1 parent a7ed06c commit aa59107
Show file tree
Hide file tree
Showing 3 changed files with 228 additions and 0 deletions.
90 changes: 90 additions & 0 deletions tmpad.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
.wrapper{
width: 100%;
height: 100%;
}

.row{
height: 50%;
float: center;
}

.column{
width: 33%;
float: left;
}

.triangle-up {
width: 0;
height: 0;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 400px solid #555;
float: center;
position: absolute;
left: 34%;
right: 34%;
}
.active-up {
border-bottom: 400px solid #00ff00;
}
.triangle-down {
width: 0;
height: 0;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-top: 400px solid #555;
float: center;
position: absolute;
left: 34%;
right: 34%;
top: 50%;
}
.active-down {
border-top: 400px solid #ff0000;
}
.triangle-left {
width: 0;
height: 0;

border-top: 200px solid transparent;
border-right: 500px solid #555;
border-bottom: 200px solid transparent;
position: absolute;
right: 66%;
}

.active-left {
float: right;
border-right: 100px solid #ffffff;

width: 0;
height: 0;
position: absolute;
right: 66%;
z-index: 2;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
}

.triangle-right {
width: 0;
height: 0;

position: absolute;
left: 61%;
border-top: 200px solid transparent;
border-left: 500px solid #555;
border-bottom: 200px solid transparent;
}
.active-right {
float: left;
border-left: 100px solid #ffffff;

width: 0;
height: 0;
position: absolute;
left: 61%;
z-index: 2;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
}
43 changes: 43 additions & 0 deletions tmpad.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<html>
<head>
<title>Gamepad visualizer for TM games in browser</title>
<link rel="stylesheet" type="text/css" href="tmpad.css">
</head>
<body style="background-color:#200000;"> <!-- ff00ff -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="tmpad.js">
</script>


<div class="wrapper">
<div class="row">
<div class="column">
<div>&nbsp;</div>
</div>
<div class="column">
<div id="up" class="triangle-up"></div>
</div>
<div class="column">
<div>&nbsp;</div>
</div>
</div>
<div class="row">
<div class="column">
<div id="left" class="active-left"></div>
<div class="triangle-left"></div>
</div>
<div class="column">
<div id="down" class="triangle-down"></div>
</div>
<div class="column">
<div id="right" class="active-right"></div>
<div class="triangle-right"></div>
</div>
</div>
<div class="row">
<!-- nothing -->
</div>
</div>

</body>
</html>
95 changes: 95 additions & 0 deletions tmpad.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
//config
var deadzone = 0.01;
var accButton = 1;
var brakeButton = 5;
var gamepadID = 0; //Leave "0" if you have only one. If more, then you need to try switching this number.
var pixels = 500; //How wide are the triangles for analog sticks.
var frames = 60; //Default frames per second
//end of config
/* default config
var deadzone = 0.01;
var accButton = 1;
var brakeButton = 5;
var gamepadID = 0; //Leave "0" if you have only one. If more, then you need to try switching this number.
var pixels = 500; //How wide are the triangles for analog sticks.
var frames = 60; //Default frames per second
//end of config
*/
/*
visit this website and check what is value of AXIS0 and AXIS1 when your stick is in rest position
https://html5gamepad.com/
Also check which number of button is pressed when you use Acceleration and Brake, for me it's 1 and 5.
*/

var startTime = new Date();
console.log("Script started @ "+startTime);

window.addEventListener("gamepadconnected", function(e) {
console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
e.gamepad.index, e.gamepad.id,
e.gamepad.buttons.length, e.gamepad.axes.length);
});

window.addEventListener("gamepaddisconnected", function(e) {
console.log("Gamepad disconnected from index %d: %s",
e.gamepad.index, e.gamepad.id);
alert("Gamepad disconnected! Replug it to initate detection.");
});

function accelOn(){
document.getElementById('up').className = "triangle-up active-up";
}
function accelOff(){
document.getElementById('up').className = "triangle-up"
}
function brakeOn(){
document.getElementById('down').className = "triangle-down active-down";
}
function brakeOff(){
document.getElementById('down').className = "triangle-down"
}

function analog(value){
if ( value == 0 || value < deadzone && value > -deadzone )
{
document.getElementById('left').style['border-right'] = "0px solid #CD5B33";
document.getElementById('right').style['border-left'] = "0px solid #CD5B33";
}
else if ( value <= -deadzone )
{
stickLevel = -pixels*value;
document.getElementById('left').style['border-right'] = stickLevel+"px solid #CD5B33";
document.getElementById('right').style['border-left'] = "0px solid #CD5B33";

}
else if ( value >= deadzone )
{
stickLevel = pixels*value;
document.getElementById('left').style['border-right'] = "0px solid #CD5B33";
document.getElementById('right').style['border-left'] = stickLevel+"px solid #CD5B33";
}
}

/*
var gp = navigator.getGamepads()[gamepadID];
var gpA1 = gp.axes[0];
var gpA2 = gp.axes[1];
var gpAcc = gp.buttons[1].pressed;
var gpBrk = gp.buttons[5].pressed;
*/

var refreshInterval = (1000/frames).toFixed(2);
setInterval(() => {
var gp = navigator.getGamepads()[0];
var gpAnal = gp.axes[0];
var gpAcc = gp.buttons[1].pressed;
var gpBrk = gp.buttons[5].pressed;
if ( gpAnal != 0 )
{
analog(gpAnal);
}
if ( gpAcc === true ) { accelOn() }
else if ( gpAcc === false ) { accelOff() }
if ( gpBrk === true ) { brakeOn() }
else if ( gpBrk === false ) { brakeOff() }
}, refreshInterval)

0 comments on commit aa59107

Please sign in to comment.