ads

Sunday, March 31, 2019

Joystick Visualizer

Here we go. http://a.teall.info/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 =)

47 comments:

  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!

    ReplyDelete
    Replies
    1. Hi Paul,
      Thanks!
      Can you please write me directly on my email? teal.na@gmail.com
      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.

      Delete
    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.

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

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

    ReplyDelete
    Replies
    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.

      Delete
  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*

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

    https://www.leobodnar.com/shop/index.php?main_page=product_info&products_id=187

    :(

    ReplyDelete
    Replies
    1. https://i.imgur.com/2tGna1H.png

      Delete
    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.

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

      Delete
  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

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

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

    ReplyDelete
    Replies
    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.

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

    ReplyDelete
  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.

    Hi.
    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.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    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.

      Delete
    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.

      Delete
  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.

    ReplyDelete
    Replies
    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

      Delete
    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: https://discord.gg/mACjS8h

      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.

      Delete
    3. Oops. Forgot to mention the library from evilC is https://github.com/evilC/AHK-CvJoyInterface

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

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

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

    ReplyDelete
  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

    ReplyDelete
    Replies
    1. +1 for this, it would be awesome if you could choose the devices that show up

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

    ReplyDelete
  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?


    http://a.teall.info/joystick/?c=%5B%5B%5B3-665-300-%22PITCH%22-%22ROLL%22-0-%5B3-1%5D-%5B3-2%5D-%5B%3B1-1-0-0%5D-%5B%3B1-1-0-0%5D%5D-%5B1-680-250-%22YAW%22-%5B3-6%5D-%5B%3B1-1-0-0%5D%5D-%5B0-545-350-%22FIRE%22-0-%220%22-%5B3-2-0%5D%5D-%5B2-360-385-%22THROTTLE%22-1-%5B3-3%5D-%5B%3B1-1-0-0%5D%5D-%5B5-550-405-%22hat%201%22-%5B3-10%5D%5D-%5B0-495-295-%22TRIGGER%22-1-%22125%22-%5B3-1-0%5D%5D-%5B0-610-380-%22A%22-0-%220%22-%5B3-3-0%5D%5D-%5B0-605-425-%22B%22-0-%220%22-%5B3-4-0%5D%5D-%5B0-490-450-%22C%22-0-%220%22-%5B3-5-0%5D%5D-%5B0-530-495-%22Pinky%22-1-%22100%22-%5B3-6-0%5D%5D-%5B0-310-435-%22D%22-0-%220%22-%5B3-7-0%5D%5D-%5B0-260-405-%22E%22-0-%220%22-%5B3-8-0%5D%5D-%5B1-190-485-%22SLIDER%22-%5B3-7%5D-%5B%3B1-1-0-0%5D%5D-%5B1-230-340-%22E%20ROTATION%22-%5B3-5%5D-%5B%3B1-1-0-0%5D%5D-%5B1-275-535-%22i%20ROTATION%22-%5B3-4%5D-%5B%3B1-1-0-0%5D%5D-%5B0-515-535-%22T1%22-0-%220%22-%5B3-9-0%5D%5D-%5B0-515-570-%22T2%22-0-%220%22-%5B3-10-0%5D%5D-%5B0-555-535-%22T3%22-0-%220%22-%5B3-11-0%5D%5D-%5B0-555-570-%22T4%22-0-%220%22-%5B3-12-0%5D%5D-%5B0-595-535-%22T5%22-0-%220%22-%5B3-13-0%5D%5D-%5B0-595-570-%22T3%22-0-%220%22-%5B3-14-0%5D%5D-%5B0-495-255-%22SECONDARY%22-1-%22125%22-%5B3-15-0%5D%5D-%5B0-300-485-%22i%22-0-%220%22-%5B3-31-0%5D%5D-%5B6-525-615-%22FLIGHT%20STICK%22-100-0%5D-%5B6-290-580-%22THROTTLE%22-100-0%5D-%5B3-0-460-%22%22-%22%22-0-%5B3-9%5D-%5B3-8%5D-%5B%3B1-1-0-0%5D-%5B%3B1-1-0-0%5D%5D-%5B0-110-535-%22M1%22-0-%220%22-%5B3-16-0%5D%5D-%5B0-25-430-%22DN%22-0-%220%22-%5B3-17-0%5D%5D-%5B0-65-430-%22UP%22-0-%220%22-%5B3-18-0%5D%5D-%5B6-40-575-%22MOUSE%22-100-0%5D-%5B0-495-370-%22RT%22-0-%220%22-%5B3-21-0%5D%5D-%5B0-455-340-%22UP%22-0-%220%22-%5B3-20-0%5D%5D-%5B0-460-400-%22DN%22-0-%220%22-%5B3-22-0%5D%5D-%5B0-425-370-%22LT%22-0-%220%22-%5B3-23-0%5D%5D-%5B0-100-385-%22LT%22-0-%220%22-%5B3-27-0%5D%5D-%5B0-135-345-%22UP%22-0-%220%22-%5B3-26-0%5D%5D-%5B0-170-380-%22RT%22-0-%220%22-%5B3-25-0%5D%5D-%5B0-135-425-%22DN%22-0-%220%22-%5B3-24-0%5D%5D-%5B0-665-535-%22MODE%201%22-1-%220%22-%5B3-28-0%5D%5D-%5B0-665-500-%22MODE%202%22-1-%220%22-%5B3-29-0%5D%5D-%5B0-665-465-%22MODE%203%22-1-%220%22-%5B3-30-0%5D%5D-%5B0-370-505-%22FN%22-0-%220%22-%5B3-32-0%5D%5D-%5B6-185-95-%22Logitech%20G%20X52%20Pro%20HOTAS%22-130-0%5D%5D-%5B%22%23f08020%22-%22%23000000c0%22-1-%22%23000000e0%22-1.5-0.5-%22Euro%20Caps-%20Arial%22-130-100-100-1-%22%23505050%22-%22%2300ff00%22-0.02-10%5D%5D

    ReplyDelete
    Replies
    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.

      Delete
    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

      Delete
  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!

    ReplyDelete
  17. Great work! It's a really intuitive to use solution for overlaying HOTAS input.

    One thing for you to consider: a major advantage of using browser source in OBS is to have a transparent website background. However it seems this website must have a colored background? If it can also be transparent, this will save all the hassle of chroma keying.

    ReplyDelete
  18. I am running Joystick Gremlin and using a vJoy for my sticks. It sees the vJoy device in the list as the 4th joystick but everything is NaN. I have my right stick is apparently joystick 5, but this does not support more than 4.

    ReplyDelete
    Replies
    1. I am having the same problem, more than four devices, tried to use joystick gremlin to get around this, but axes show as NAN.

      Delete
    2. I believe, sadly, it has been stated before that the 4 device limit is a hard cap from within the browser and outside of their control. It is MS i think that needs to be lobbied on that front

      Delete
    3. The thing that I can't figure out is that it seems to grab a random four devices each time I start my PC. I don't understand how that works or if there is some way to tell it which four to use as the Xinput devices.

      Delete
    4. I wonder if it is picked up at browser load. If you unplug all controllers and replug after the browser instance has loaded.. can you force a decectuon order?

      Delete
  19. So this is a problem that I think will only be applicable to Arma 3. But it seems like when I'm playing arma 3, your program is unable to detect any inputs to my t.16000m setup.

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. unfortunately, I've run into an edge case: JS does not properly read the axes of vJoy. However HTML5 does read it fine (example here https://greggman.github.io/html5-gamepad-test/ ). Other commenters have run into the same problem without pursuing the Why-How. would it be possible to get a revision/fork of this that runs on HTML5 instead? This seems to be the most versatile and flexible JoyVis around, due to its unconstrained design options for the number of axes and dual-axes displays plus a lot of choices in colors. I would love to use it but not being able to work with vjoy makes it a non-starter

    ReplyDelete
    Replies
    1. Yep, you can modify and use the sourses as you wish

      Delete
    2. Are you sure you got vJoy to work with HTML 5? Mine also shows NaN on https://greggman.github.io/html5-gamepad-test. Did you have to change something?

      Delete