Joystick Visualizer

Here we go. http://a.teall.info/joystick/
(https://tealyatinasite.appspot.com/joystick/)

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: http://a.teall.info/joystick/?c=%5B%5B%5B3-460-260-%22PITCH%22-%22ROLL%22-0-%5B1...

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 a.teall.info/joystick/
- 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 =)