Ayyy
I started out making this tool because I found that all the alternatives to display gamepad input were too much of a hassle to set up or simply weren't customizable enough to my liking. After a while, I realized that other people could benefit from the tool I made, and ever since I've been updating and extending the original features. I started out with only the Xbox 360 skin and since then I've added several skins, the ability to create custom skins, scaling, input delay and many more features.
Thankfully, this is all possible due to Marcin Wichary's Gamepad.js and Tester.js libraries, which I've modified for my own purposes.
This is a web-based tool used for representing gamepad input visually. You basically get to see what you're doing with your gamepad on screen. Usually, people would use a tool like this for showing their controller input on screen for a stream or recorded video.
Just follow the steps on the Info page and you should be ready to go in no time.
Well, you need to have some basic knowledge of CSS and how it works to make one from scratch, but I have an example file which can help you. be sure to check up on it every once in a while though as I do make changes to in to coincide with updates on the site.
Yes! You can use the editcss= URL parameter to point to a properly
formatted CSS file which will edit the currently selected skin. Here's a small
example edit file just to show
what can be done.
This section contains documentation of each URL parameter. If you'd like to generate your own custom URL, please visit this page.
The player number parameter is the main method of selecting which connected controller to view in Compact Mode.
p=) is required
if you plan on using the skin ID parameter
Setting a skin ID is the only way to choose what gamepad it is you'd like to display in Compact Mode. If
you'd like to use a custom skin, you'll need to read about the
css= parameter below.
When this setting is enabled, the visual representation for the triggers will be strength meters instead of opacity levels.
Enabling this setting allows you to scale the gamepad's size using either integer or decimal values.
This setting is ideal if you have an old gamepad that's experiencing stick drifting, or simply don't want every tiny movement made with the gamepad to be displayed.
If you capture gameplay from a PS4 and have your controller connected to both the computer and console, this setting is for you. Simply enter the stream delay from the console to your PC in milliseconds and your inputs will be synced, instead of ahead.
dz=0
is recommended.
This setting is meant mainly for having the thumbsticks represent wheels, with the option to set their max degree of rotation.
id= parameter.custom
class
Using this parameter allows you to completely change the design of the Gamepad Viewer into one of your own or one somebody has shared.
.edit class is applied to all gamepads
Similar to the css= parameter, you can edit the currently selected skin's
css instead of making a completely new skin.
1. Double click the Browser Source which has your Gamepad Viewer custom URL 2. Scroll down and click
"Clear Cache" 3. Click "Cancel", not "OK" and not the "X" button at the top right 4. Make DOUBLE
sure you click "Cancel" else you'll have to repeat steps 2 and 3.
name, or not to name: Another sort of unimportant-but-still-interesting-I-kinda-suppose-maybe updates was changing the
attribute used to select buttons and axes from name to data-name which has
it fall more inline with HTML5's semantics. Riveting stuff, I know.
Please select the controller to use as a mapping base.
All the currently served skins are made by me. I usually make them in my spare time when I'm not working on the site itself. I also will usually make them to take care of the demand for a certain skin. I don't get paid to offer this service to all of you, and I know some of you have been wanting skins made for some fairly obscure controllers, so as of right now you can adopt a skin! So, what does it mean to adopt a skin? Well, the perks are as follows:
While there are perks, there are also some stipulations, which are listed below:
If you agree to the terms described above, clicking the button below will open the contact page with the proper subject selected
I agree to the Terms and Conditions stated above and would like to inquire about skin adoption.If you want to send me a message about asking me a question or anything like that, just join the discord.
I'm a fair believer in the honor system, so I believe it's up to you to set the amount of what you think my tools are worth to you. Below, you can choose to give me a donation via PayPal (through Twitch Alerts). I've also set up a Patreon for those who wish to donate via that.
