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.
和原网站(gamepadviewer.com)不同的是，线性 LT/RT 显示 Strength Meter 默认为开 1，方便捕获油门/刹车力度，不推荐关。
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 gamepadsSimilar 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.
点击下方的链接即可复制，一般情况下不需要改参数。
和原网站(gamepadviewer.com)不同的是，线性 LT/RT 显示 Strength Meter 默认为开(Enable)，方便捕获油门/刹车力度，不推荐关。
本魔改版除了优化国内访问速度、精简代码以外，皮肤 Xbox One (White) 的方向摇杆也从黑色变成白色，更方便观看者观察转向情况。
如有其他需求可以直接联系我修改，B站 买本子，QQ 610915518
2022年5月18日更新：把 jsdeliver 源更换为本站源，访问更稳定，以解决国内部分偏远地区访问困难的问题。
2023年1月30日更新：尝试修复在部分电脑上，手柄显示不全的问题。顺便修改了其他手柄皮肤，方便展示摇杆操作。
不懂怎么使用可以看这个 OBS 手柄映射教程 将手柄操作映射到视频与直播中 视频教学，个人比较推荐视频中的第二种方法。
友情提醒：
本网站已做全网(电信/联通/移动/海外)优化，大部分情况无需开启网络辅助软件。如遇显示问题请刷新浏览器，推荐使用谷歌 Chrome 浏览器，IE 不兼容
如果你曾经使用过 DS4Windows 但是发现本网站无法识别出你的 XBOX 手柄，请打开 DS4Windows 软件，并且点击右下角按钮关闭映射。
按键重新绑定（修改按键布局）
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.此页面为联系 gamepadviewer.com 原作者 Christopher Rodriguez 相关，并非联系翻译者。
If you want to send me a message about asking me a question or anything like that, just join the discord.
此页面为捐助 gamepadviewer.com 原作者 Christopher Rodriguez 相关，并非捐助翻译者 买本子。
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.
