GamePad Viewer - The Official Controller Display & Tester

Free GamePad Viewer - The Official Controller Display & Tester v2.0-beta

KJThaDon

New Member
mrmcpowned said:
Well, as I have no PS4 controller to test with, my answers on that are of a theoretical nature. As for the PS4 image, yes, that's part of a list of controller faces I'll be making for the viewer. As I'm currently a student, I don't have as much time to be rigorously working on this, so I work on the controller faces in my off time.

No problem, thanks for taking the time to look at it. Everything works as the 360 controller except the "middle" and "touchpad" buttons. Would you be willing to make this open source so we can add to it?

I have web development and programming knowledge and also Photoshop. I can produce a ps4 controller if needed. I am just not sure how you have it setup.

Thanks!
 

mrmcpowned

Member
KJThaDon said:
mrmcpowned said:
Well, as I have no PS4 controller to test with, my answers on that are of a theoretical nature. As for the PS4 image, yes, that's part of a list of controller faces I'll be making for the viewer. As I'm currently a student, I don't have as much time to be rigorously working on this, so I work on the controller faces in my off time.

No problem, thanks for taking the time to look at it. Everything works as the 360 controller except the "middle" and "touchpad" buttons. Would you be willing to make this open source so we can add to it?

I have web development and programming knowledge and also Photoshop. I can produce a ps4 controller if needed. I am just not sure how you have it setup.

Thanks!

Well, the Guide/PS buttons and touchpad as of now will not work due to the constraints of the gamepad API. Whenever the W3C decides to update said API, and when browsers begin to push that implementation, I'll be able to look into it. Though, to be honest, I don't see the Guide/PS buttons getting any support, since if they were of importance, there'd be data for it already.

I appear to have been wrong. According to the W3Cs documentation, the guide/PS button is mapped to button 16. I'll have to do some minor css/html tweaking to have that show. The touchpad is still pretty up in the air as I'm not sure how the gamepad API will be handling that, if it the W3C ever decides to that is.
Edit: Seems that's the working draft of the gamepad API, so as of now, there is no button 16, but there will be.

As for the open source part, the source is in fact "open", I just don't have it uploaded to a repository anywhere. Any web scraper will do if you're looking to download the Gamepad Viewer for local editing and whatnot.

For the code setup, a quick view through the source and CSS files should give you a gist of what I've been doing. Using chrome's dev tools helps as well; it's what I use when fine tuning the asset placement.
 

uFCrit

New Member
Really interested in using this tool for my stream. I was thinking about how i could use this for console gaming. Is there any way i can split the signal from my xbox 360 wired controller to go to my pc and my xbox? or is there a looping software that i can use to loop it from my pc to my xbox? any thoughts or suggestions would be great
 

BravoGangUS

New Member
KJThaDon said:
Ok most of it is done. Some of it still has to be tweaked etc, but it functions for now. Still need to get the "PS" button and "Touchpad" working...

You can test it out with an xbox controller here..
http://ngx2gaming.com/controller/

Works great. For one of the tweaks could you change how the on-screen directional pad responds to the button presses? The thin blue arrows that appear seem like they would be hard to see on a stream.

Maybe make the entire button or the triangle next to each directional button light up?
 

yJIuTKo

New Member
I made a version with the ability to change styles: PS3, xbox360, xbox one.
You can see it here
 
Last edited:

20047m

New Member
Can I make this an .exe file? I can wrap it into an exe so anybody can use it offline. That way, you don't have to worry about hosting it anymore.
 

mrmcpowned

Member
Sorry I haven't been able to reply for a while. For some reason I haven't been getting notification emails...

uFCrit said:
Really interested in using this tool for my stream. I was thinking about how i could use this for console gaming. Is there any way i can split the signal from my xbox 360 wired controller to go to my pc and my xbox? or is there a looping software that i can use to loop it from my pc to my xbox? any thoughts or suggestions would be great

For this I'm unsure. I've actually tried finding software like that but it seems none exist.

20047m said:
Can I make this an .exe file? I can wrap it into an exe so anybody can use it offline. That way, you don't have to worry about hosting it anymore.

This might be possible using the Chrome Embedded Framework, but I'm not sure how exactly I could package that, as I haven't looked into doing so.

I'd also like to note that I haven't been able to work on this as of late due to school and whatnot. I'll probably be actively working on it during May, which is when the semester ends. It's also quite interesting to see all the derivatives as well seeing you've all placed proper attribution. Thanks for that :)
 

PocketSand

New Member
Love this application and the idea behind it, but when scaled down and with reduced opacity to be less intrusive in OBS the activity on the face buttons can be a little difficult to see. My only real suggestion is a high contrast or minimalist version so that it can be tucked away in the corner and kept transparent so as to not obstruct vision but still retaining the visibility of which buttons are being pressed.
 

mrmcpowned

Member
Indignation said:
Suggestion: Skin for an arcade / fightstick, that'd be really neat for streaming fighting games! :]
That's been on my todo list, although I haven't had it added to the main post. :)
 

mrmcpowned

Member
mrmcpowned submitted a new resource:

Gamepad Display - Web based gamepad display for representing visual gamepad input in streams

So, I've made a gamepad viewer similar to that of the one at HTML5 Rocks. Due to the experimental nature of the Gamepad API, this currently only works in Chrome (since version 22) and in nightly builds of Firefox. Don't even bother asking about IE, that hunk of garbage died a long time ago.

The viewer is located at http://mrmcpowned.com/xbrc/ http://mrmcpowned.com/gamepad...

Read more about this resource...
 

mrmcpowned

Member
mrmcpowned updated Gamepad Display with a new update entry:

0.2.0 Update - Now with skins!

I've added a PlayStation 3 skin as well as an easy way of switching between them on the fly.

I'll have to redo the Xbox controller skin at some point as well as add other skins, such as fightsticks and retro controllers.

Hopefully, for those of you who prefer to use a PS3 layout, this new update provides you with a damn fine looking controller ;)

Read the rest of this update entry...
 

mrmcpowned

Member
I also want to note that if anyone doesn't want their instance of Chrome tabs being mixed with the Gamepad Display, or unnecessarily have to create a new chrome window for it, they can create an application shortcut. Here's a little video tutorial on how to do that.

 

ball2hi

Member
Is there a way you can make this as a plugin for OBS rather than using the website? I looked into using this, but as soon as I saw that I had to use window capture from the browser I was turned off.
 
Top