Analog Keyboard Overlay for Twitch streams/etc. by DarrenVs

This is an analog keyboard overlay that I’ve wanted to see for a while now.
It displays your analog input on the screen, including a simulated analog keyboard to see how far the user is pressing down on WASD and the simulated thumbstick outputting it all.

My intent for this project is to show analog keyboards to the world.
Before this overlay, it was really difficult for me to explain to my friends&followers how analog keyboard inputs affect my game, but with this overlay, all their questions are answered.
If any streamer is using an analog keyboard, they can now also show their viewers all about it and maybe inspire them to also get one.

Here’s a video of the overlay in action with the game Overwatch.
In these clips, I’m playing a hero that relies on her movement’s direction to teleport(blink) in a direction.
Using a binary keyboard, you can only choose from 8 different directions to teleport from, but with my analog keyboard, I can choose from any combination of directions.

View the GitHub repo here

Installing this overlay in OBS Studio is very straightforward.

You add a browser overlay with as source “https://darrenvs.github.io/analog_keyboard_overlay/”.
Then you change the height and width fo the browser plugin window to make it fit perfectly in your OBS.
here’s a video that shows the steps: https://gfycat.com/gifs/detail/VibrantNiceGrasshopper

If you want to remove the thumbstick or the keys, you can crop the window using the Edit Transform options from OBS Studio. I might make a more advanced way to personalize this later.