Skip to content

DarrenVs/analog_keyboard_overlay

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

analog_keyboard_overlay

This is a browser plugin overlay for OBS Studio. This overlay displays (virtual)controller axes as a keyboard for those who want to show off their analog keyboards on stream/recordings.

Methods used to read analog input:

The analog input is read from Navigator.getGamepads(). Reading axis from any connected controller with axes and displaying the values in HTML5 Canvas.

The current limitations of the OBS browser plugin scope is that you cannot read background keystrokes. However, gamepad information does update in the background. This overlay makes use of the gamepad information and reverses it back as keyboard information.

Doing it this way does not show any accuracy of how far the key is pressed (due to the many factors that go into the joystick output such as Analog Curve). It will however give a general idea on how keypresses could translate to the joystick output.

Alternative projects worth checking out

Easy to use OBS friendly analog input visualiser for your entire Wooting keyboard with help from a background service.
It may also display the state of your key when pressed in colors which is especially useful for demonstrating/streaming the behavior of Rapid Trigger to your audience.

Installation & use

OBS Installation:

Create a new browser element and add one of the following URL's as the source.

Overlay installation

Different interrations:

Move elements around:

Edit/move overlay elements

Preview

clip_1608307576360.mp4

Wooting profiles

Left-Joystick movement

Wooting Profile Template code: '86031f1a-8848-46ec-9d8a-12424c2d48dc'

https://darrenvs.github.io/analog_keyboard_overlay/index.html

Or map the following axes to your keyboard keys:

image

MOBA Gamers only:

Wooting Profile Template code '8ae20ae2-3482-4f66-af63-9fea29043f3f'

https://darrenvs.github.io/analog_keyboard_overlay/index.html#moba

Or map the following axes to your keyboard keys:

image

Demoing/Reviewing uses:

Since the up and down axes are linked, we cannot accuractly show both W and S pressed at the same time. If you would like to show the full range of all 4 keys for demoing purposes, use the following overlay:

https://darrenvs.github.io/analog_keyboard_overlay/index.html#review

This overlay separates W and A to left joystick, and D and S to right joystick axes to more accuractly demonstrate the key presses.


Wooting Profile Template code '7adb6844-fa01-4fd9-9413-a4c6ddb4356c'

Or map the following axes to your keyboard keys:

wootility-lekker-dev_bg7jXQ0JWg