Pure javascript-driven gamepad monitor (styled for Dualshock 3)
Find a file
2023-09-06 12:49:17 +03:00
DS.css Added styling. Fixed style selection on a fresh page. Known issues: 1. RT on xbox won't show pressure; 2. Xbox.css isn't named proparly, will probably fail to load on Linux/Mac. 2023-08-27 19:22:35 +03:00
gpcon.js Fixed: - Xbox style; - removed dropdown; - replaced screenshot; - added flatpack instructions; moved around declarations 2023-09-06 12:49:17 +03:00
index.html Fixed: - Xbox style; - removed dropdown; - replaced screenshot; - added flatpack instructions; moved around declarations 2023-09-06 12:49:17 +03:00
NES.css Added styling. Fixed style selection on a fresh page. Known issues: 1. RT on xbox won't show pressure; 2. Xbox.css isn't named proparly, will probably fail to load on Linux/Mac. 2023-08-27 19:22:35 +03:00
README.md Fixed: - Xbox style; - removed dropdown; - replaced screenshot; - added flatpack instructions; moved around declarations 2023-09-06 12:49:17 +03:00
Screenshot.png Fixed: - Xbox style; - removed dropdown; - replaced screenshot; - added flatpack instructions; moved around declarations 2023-09-06 12:49:17 +03:00
SNES.css Added styling. Fixed style selection on a fresh page. Known issues: 1. RT on xbox won't show pressure; 2. Xbox.css isn't named proparly, will probably fail to load on Linux/Mac. 2023-08-27 19:22:35 +03:00
XBOX.css Fixed: - Xbox style; - removed dropdown; - replaced screenshot; - added flatpack instructions; moved around declarations 2023-09-06 12:49:17 +03:00

JS-DualShock3-Monitor

Pure javascript-driven gamepad monitor (styled for mini-Dualshock 3, NES, SNES, XBox 360)

Built to be used in OBS an an overlay. That means the controller will be semi-transparent. Compatible with any XInput device (xbox controllers, Mayflash Magic adapters in XInput mode, etc)

How to use

  • Add a browser source
  • Set page size to 500x400
  • Tick the "Local File" box
  • Click "Browse" and select the index.html from this repo
  • Tick the "Shutdown source when not visible" box
  • Tick the "Refresh browser when scene becomes active" box
  • Make suse the browser source has body { background-color: rgba(0, 0, 0, 0)!important; overflow: hidden; } in the Custom CSS field

To change styles:

  • Right click your browser source
  • Pick the "Ineteract" options
  • Select "Controller type"
  • Adjust strokes and fill colors using sliders

Flatpack OBS

Flatpack OBS is a weird beast (as all flatpacks surely are), but many consider it to be the only way to use OBS on their Linux system. At least on Manjaro, the default "permissions" of flatpacks disallow controller access. That is fixable, but opens a can of worms of its own. If you're okay with that, add --filesystem=/run/udev --device=all to your .desktop file/launch script.
Mine ended up looking like this:

/usr/bin/flatpak run --filesystem=/run/udev --device=all --branch=stable --arch=x86_64 --command=obs com.obsproject.Studio

Screenshots

screenshot