Sunday, March 31, 2019

Joystick Visualizer

Here we go.

This simple web page is used to visualize your joystick buttons and axes.
Yep, there are only few widgets, but layout still may be complex enough.

There is direct link to the preset shown above:

As it utilizes javascript Gamepad API, it can support up to 4 devices.
It's highly recommended to use Chrome-based web browser since Firefox doesn't see all possible axes.

Important notice. The Joystick Visualizer does not store your personal data, nor uses cookies. All presets you'd made are stored at your web-browser local storage.

The visualizer was (in primary) created for using whilst playing Elite: Dangerous. Of course, it may also be used in other various simulator games. My friend CMDR [Dax] requested visualizator that is as much flexible as possible to freely support his 2 joysticks with throttle and pedals setup.

This visualizer is good at use as a "Browser" source in OBS application.
I asked CMDR [Dax] to give me a sight on his experience of using the visualizer with OBS. Here is his comprehensive answer:

Using Joystick Visualizer in OBS.

Step 1. Configure widgets.
- go to
- double click anywhere to add widget. You may use buttons, hats, labels and single or double axis widgets.
- configure widgets. Double click on widget, set label(s) and joystick(s) and axis number(s). These numbers you can find using the "Joysticks" menu.
- configure general settings like shadows, colors etc.
- save yor settings.

Step 2. OBS.
Well, you will need to experiment a bit with settings to achieve decent results.

Disclaimer: These are mine personal recommendatons. They work for me, your mileage may vary.

At first, choose a proper color for your chroma key background. The usual acid green is not always the best option. We'll need a bit of theory here.

The ChromaKey technology works as a dynamic mask determined by the color. This color is filtered out by software during the video processing and all areas of that color are considered as transparent.
This works very well with sharp-edged objects, where we have a distinct border between the colors. But if you have any kind of antialiasing, shadows or edge feathering involved, things are more complicated because of the process called "color spill" which is basically a blending of the colors at the edges of an object. To minimise this effect you need to choose the chroma key color which is:
 a) opposite to the color of the object
 b) not very bright
Some numbers to illustrate this:
Every color is composed from 3 basic color channels - Red, Green and Blue. In 24 bit color palette each color value can be from 0 to 255 (or from 00h to FFh in hexadecimal notation)

#ff7100 - this is the code for orange color of Elite Dangerous.  As you can see, it consists of 255 (FFh) Red, 113 (71h) Green and 0 (00h) Blue. Since this orange color does not contain Blue channel at all, a kind of blue chroma key color will be easiest to remove and is the best choice for orange widgets. Also, it should be not too bright, because the dull colors "spill" less. The shade of blue with code #000080 shoud work just fine.

Chroma key color should be set in "Settings" menu of Teall Joystick site. Save your configuration and then use "Export" in the "Save" dialog. You will see the "Direct link" option, copy that link.

Now we need to add this to OBS.

In OBS add new "Browser" source.
Insert the link that you have copied from the website to the "URL" field and set desired browser window size. I recommend to start with the size of your video frame and than reduce it to the minimal required dimensions later. When you click OK, you should see your widgets in the OBS along with chroma key background. Now we need to remove it.

Right click on browser you have just created and choose "Filters". Click on "+" an add "Chroma Key" fiter.
Set "Key Color Type" to "Custom" and choose chroma key color either by using palette\number fields or color picker.

Now is the time for fine tuning.
Set "Similarity", "Smoothness"and "Key Color Spill Reduction" to minimum.
"Similarity" is how close to the base color you want OBS to remove. Adjusting this slider will allow OBS to remove wider chroma key color variations of the screen. Make sure not to increase this so much that some parts of your widget is being removed too.
Adjust "Similarity" so you can see the widgets clearly with minimal residue of chroma key color. It should be small value in our case since we have very uniform key color.
"Smoothness" works in tandem with "Similarity" in trying to make sure that the filter isn’t too harsh. You shouldn’t have to move this to a large degree. Use it to hone in on the perfect amount of what’s left on the screen.
"Spill Reduction" applies to the edges of what the filter is and isn’t removing from the screen. If you're noticing some key color residue on the edges of your widgets, move this slider to remove it.
Most probably, you will need to disable shadows in the website settings to get better results. This largely depends on used color schemes though.

Step 3. Final adjustments.
As the last steps, adjust widgets placing (you will need to save new settings and apply new URL to the OBS browser) and OBS browser overlay size. After the overlay size has been roughly set, you may crop the overlay instead of resize by holding "Alt" key while adjusting overlay borders.
Please note, that chromakey processing is a tough computational task, so you will need a computer with a decent CPU to avoid lags and framedrops.

As always, Joystick Visualizer is completely free for use and copy. If you like it, feel free to donate =)


  1. Why has no-one commented on this post to say "oh my god this is AMAZING!!"??

    Because, as a flight-sim streamer, I can say it ~is~ amazing.

    I do seem to have an issue with it though, due to my complicated setup. i have more than 4 controllers attached, but the tool only detects the first 4. anything past that is either not seem or extremely problematic to locate, at I|D drop-downs are not constrained by the number of detected devices.

    If you can get it to work for me, there is a donation in-bound! :)

    Great work!

    1. Hi Paul,
      Can you please write me directly on my email?
      If you can, attach also screenshots.
      I know the issue with device numbers above 4. This is browser restrictions in some cases, but I want to be sure if something can be done.

    2. I have the same issue, MFG Crosswind is not recognized, also my Virpil Mongoost-50 throttle is divided into 2 separate devices otherwise some games only see 32 buttons.

  2. Incidentally.... none of your posts are worthless! They all look interesting in different ways.. the boat model, the old images...

  3. Is it possible to use this over 2 Pc's....I have a gaming and Streaming PC

    1. I think is possible if you use OBS on both computers with NDI to transfer the display capture from gaming to streaming PC and include the joystick visualizer.

  4. this is just brilliant, thank you very much.. it worked for me so far, but today I figured that the visualisation stopped working when I use the export -> direct link option.. has anything changed? is it just me... worked fine a few days or weeks ago... *thinking*

  5. G25 pedals with Pedals Adapter for Logitech G25, G27, G29, G920
    no detection



    2. Hi Joe,

      Unfortunately, modern web-browsers do not support more than 4 (or somethimes 8) peripheral devices. I know this sucks, but there is only one way to get rid of that. Combine your Transmaster devices into one virtual device. AFAIK there is useful software named TARGET. This will help.

    3. Ok, Thank you for such a reactive response !

  6. I can get it work fine in chrome but Edge doesn't.

    Is there a way to get it to work in MS Edge

    1. Yeah, it was a small bug within the source code. Now it works in Edge as well.

  7. Hi Anton. Je Pendular T-rudder is detected but axis move is not . any idea?

    1. Unfortunately, if your web-browser does not see it, there is no way to make it work. I can just suggest you to check if axis detected in your rudder calibration software. Maybe it is unplugged? Sorry if this is useless.

  8. How can I use this in a 2 pc setup (stream / game PC)?

  9. Hola.
    Me encanta tu trabajo, muchisimas gracias.
    Quisiera saber si con este programa, hay alguna posibilidad de tener los mandos mapeados en el juego miestras juegas o es solamente para grabaciones on line.

    Gracias por tu tiempo.

    I love your work, thank you very much.
    I would like to know if with this program, there is any possibility of having the controllers mapped in the game while you play or is it only for online recordings.

    Thanks for your time.

    1. This comment has been removed by the author.

    2. Thank you for positive feedback.
      As far as I know, there are such applications to run html overlay a top of other windows (this means you have play "Full Screen Windowed"). But to be honest, I failed to google something sutable. Hope you will have better luck. Anyway, this is a good idea, maybe someday I will write similar application.

    3. Si lo haces,los jugadores de simulación seguro que la utilizarán. Sobre todo los que empiezan así ven como llevan los joystick.
      Gracias por tu tiempo.

  10. First of all, thanks for this. It's amazingly simple and polished.

    CMDR Exigious had posted a YouTube video about another method, which involved reskinning a gamepad, that was very complicated.

    I'm wondering, though, if we can get this to work with a keyboard alongside the joystick, since some of us use a keyboard and a stick rather than a HOTAS.

    1. Hi! Thanks for both of your comments =)
      Unfortunately, using web-browser based method does not allow to catch keyboard events.
      I have thougts about how to make it in form of application, an overlay for entire screen. Just have to have a free time for this... (yeah, as always)
      I was asked to make it many times, so eventually it will be done.
      Happy New Year. o7

    2. Happy new year!

      I don't know if you've heard of the Newton's Gambit squadron from Elite: Dangerous. It's focused mainly on flying with flight assist off and instructing other commanders about it.

      Having an overlay of the inputs is specially useful for those teaching sessions. A lot of us are using your tool.

      You should drop by our discord, if you want:

      In the meanwhile, I've found a workaround for my problem, using vJoy and AutoHotKey, with a library from evilC that let us bind virtual joystick commands to keyboard keys. It's a bit of work to set up, but It works for the time being.

    3. Oops. Forgot to mention the library from evilC is

  11. is any chance to get source? now library require https connection

    1. It's client only, so just download the whole page via your browser, and you get it.

  12. This is truly amazing! Thank you for the hard work

  13. This is incredible! One request though - I currently have five devices that this detects. Is there any way for me to be able to choose which four of those are shown here? Changing the windows joyid doesn't seem to affect the API

  14. hi trying to install to Streamlabs obs but it wont show url all do you know why this happening..

  15. hey, i just got the Logitech X52 Pro HOTAS and on the site, everything's working beautifully, i set up my own preset here:

    unfortunately it won't work in OBS, or even when the page is tabbed out. it ONLY works when directly focused on the page. any ideas?

    1. I'm curious about this as well. When I am in game, and not focused the web page the gui doesnt respond to my inputs.

    2. i literally just fixed this today. use a browsersource capture in OBS. if it's having issues, run OBS as an admin. if it's still not working, swap your inputs to a different player, probably player 1

      sorry if this is a mess of a reply, i just finished a drinking stream

  16. What a great visualiser. Spent a cople of hours working on a nice display for my Ursa driving/racing using a HOTAS (X52 Pro) in Star Citizen.

    I have noticed people have used square larger dots on ther display while I can only use a smaller round dot.

    Am I missing something?

    Well done. Love it!