How To Add To OBS

Select the controller style and active button color that you wish to use

Click on the copy button next to the source URL

In OBS, add a new "Browser source", paste in the copied Source URL and enter a width of 1920 and a height of 1080. Assuming you have the "&panel=off" flag in the source URL this control panel will not be displayed.

You can now drag the controller overlay anywhere on your OBS layout, and resize as required

If you are having issues displaying the browser source, go to File > Settings > Advanced and at the bottom of the advanced section under "sources" uncheck "use hardware acceleration". You may also need to run OBS in administrator mode. Note that the keyboard overlay will not work if you're running OBS as an administrator due to Windows security policies.

Some settings in FireFox may prevent interacting with your gamepage. check the following settings in about:config:
dom.gamepad.enabled = true;
privacy.resistFingerprinting = false
dom.gamepad.non_standard_events.enabled = true

Find this useful? Help me keep developing new things by donating on PayPal or check out my other tools.

Controller Image
A
B
X
Y
L1
R1
Select
Start
L3
R3
ESC
F1
F2
F3
F4
F5
`
1
2
3
4
5
6
TAB
Q
W
E
R
T
CAPS
A
S
D
F
G
SHIFT
Z
X
C
V
B
CTRL
FN
ALT
SPACE
LEFT
MID
RIGHT
Mouse X: 0
Mouse Y: 0