Skip to content

Wooting dev portal

The resource guide for Wooting code

Wooting dev portal

  • Introduction developer portal
  • Analog SDK guide
    • Introduction
    • Analog API description
    • Basic example with Node
    • Advanced example with Node
    • Unity example
  • RGB SDK guide
    • Introduction
    • RGB API description
    • Basic example with Node
    • Advanced example with Node
  • Spotlight
Search

Analog Keyboard Overlay for Twitch streams/etc. by DarrenVs

First posted: October 21, 2018November 13, 2018Filed under: Contest entries
  • Spotlight

Description

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.

Media

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.

https://thumbs.gfycat.com/FilthyHarmoniousBudgie-mobile.mp4

 

Download

View the GitHub repo here

Installation

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.

 

 

 

Contest entries, Spotlight

Post navigation

Previous Post:

ManiaPlanet RGB Effects for Wooting one

Next Post:

Wooting Simulator by Gudenau

About the Author

Tino Parkkinen

All posts byTino Parkkinen

Hide

code-it entries

  • Analog overlay for streams by DarrenVs
  • Game Detection / profile switching by Copvampire
  • GInput Wooting by Silent
  • SDK visualizer/emulator by hollow
  • Woot MIDI Mania by Yoshihiro
  • Wooting Piano by microdee
  • Wooting Simulator by Gudenau

SDK's

  • Guide analog SDK
  • Guide RGB SDK

Useful links

  • About us
  • Wooting blog
  • Wooting one
  • Wooting two
Visit Us On FacebookVisit Us On TwitterVisit Us On InstagramVisit Us On Youtube

Want to submit a creation you made using one of our API’s? Hop on over to our Discord and let us know what you made.

  • contest
  • Vote now!
  • Wooting dev portal