Input overlay plugin based on HTML

[Zergatul]

Zergatul submitted a new resource:

Input overlay plugin based on HTML - input keyboard mouse overlay

Input Overlay can display inputs from keyboard/mouse over your game for streaming or recording.

How it works
You start separate application, and it acts like server. It catches your inputs and sends it via websocket protocol. In OBS you add Browser source, it connects to the server app and displays your inputs.
Since all drawing capabilities done via HTML/CSS/JavaScript, it requires basic knowledge to show/hide more keys, change style or animations....

Read more about this resource...

 

[Rellish08]

I play smash from time to time on my Nintendo switch. Could this also be used for inputs on a controller through a capture card?

 

[Bagny89]

I just downloaded this plugin. I really like it however I wanted to change the "tilde" key to "\" since my layout is Italian.

 

[Zergatul]

I play smash from time to time on my Nintendo switch. Could this also be used for inputs on a controller through a capture card?

Sorry, that's not possible. In order to capture inputs from Nintendo Switch we need to run program on console.

 

[Zergatul]

I just downloaded this plugin. I really like it however I wanted to change the "tilde" key to "\" since my layout is Italian.

Does this button work correctly for you? You just want to change displaying symbol?
I mean, if you press it on keyboard, plugin highlights tilde key? Or it doesn't?

 

[Bagny89]

Does this button work correctly for you? You just want to change displaying symbol?
I mean, if you press it on keyboard, plugin highlights tilde key? Or it doesn't?

In addition to the key display, the key itself I would like to change. Because from the question you asked me, actually when I press it, it does not activate, because in the Italian layout the or the "tilde" or is not there or is some other key. I have this layout

 

[Zergatul]

In addition to the key display, the key itself I would like to change. Because from the question you asked me, actually when I press it, it does not activate, because in the Italian layout the or the "tilde" or is not there or is some other key. I have this layout

View attachment 72732

Please get latest release (I added support for "\" key).
Go to wwwroot folder, open keyboard.html in text editor. Find line:

<div class="button" id="Tilde">~</div>

And replace it with:

<div class="button" id="Backslash">\</div>

 

[Bagny89]

Scarica l'ultima versione (ho aggiunto il supporto per il tasto "\").
Vai alla cartella wwwroot, apri keyboard.html nell'editor di testo. Trova riga:
[CODICE]<div class="pulsante" id="Tilde">~</div>[/CODICE]
E sostituiscilo con:
[CODICE]<div class="pulsante" id="barra rovesciata">\</div>[/CODICE]
[/CITAZIONE]
[/ Quote]

grazie ❤

 

[Bagny89]

I've updated the plugin. the only thing i don't understand is why it doesn't load the keyboard correctly on the screen. the mouse as you can see does.

 

[Zergatul]

I've updated the plugin. the only thing i don't understand is why it doesn't load the keyboard correctly on the screen. the mouse as you can see does.

View attachment 73204

View attachment 73205

You made changes I mentioned above and keyboard stopped working? You may did something wrong. Could you show me: content of wwwroot folder, log from server application after you try to show keyboard in OBS. Or you can write me in Telegram, maybe this will be quicker: https://t.me/z3rgatul

 

[Avers]

Hi! Can you please add support for the key right next to L? It is ";" for me. I am a lefty and use "okl;" layout instead of "wasd". It would be really nice to be able to use your plugin for my streams. Thank you!

 

[Zergatul]

More keys added

 

[Sarumonin]

Hey there, any way to change the coloring of the mouse to white instead of the green/yellow? Maybe a White while pressed, light blueish as it transitions out? I've managed to do it in the styles for the keyboard, no dice on mouse though! Hope you can help ^^ Looks really cool!

 

[Zergatul]

Hey there, any way to change the coloring of the mouse to white instead of the green/yellow? Maybe a White while pressed, light blueish as it transitions out? I've managed to do it in the styles for the keyboard, no dice on mouse though! Hope you can help ^^ Looks really cool!

You can change mouse colors in engine.js. Mouse is SVG element, and I didn't find a way how to configure its colors in CSS like for keyboard.
Open engine.js and find these lines in the end:

if (eventType == 2 && data.type == 2) {
    if (data.pressed) {
        state[data.button] = true;
        var element = document.getElementById(data.button);
        if (element) {
            element.style.fill = '#2DA026'; // <--- this is key press color
            element.style.filter = 'url(#glow)';
            removeSvgReleased(element);
        }
    } else {
        if (state[data.button]) {
            delete state[data.button];
            var element = document.getElementById(data.button);
            if (element) {
                element.style.fill = '#96CF13'; // <--- this is key release color
                element.style.filter = 'none';
                addSvgReleased(element);
            }
        }
    }
}

 

[marvel12]

is there away i can change it from localhost to a ip ?

 

[Zergatul]

is there away i can change it from localhost to a ip ?

I didn't think someone will need this, but it is possible. Imagine you need to run server at 192.168.1.123:12345
1. Find line in engine.js: var ws = new WebSocket('ws://localhost:5001/ws'); and change it to: var ws = new WebSocket('ws://192.168.1.123:12345/ws');
2. Run executable with parameter: Zergatul.Obs.InputOverlay.exe --urls http://192.168.1.123:12345/

In the log you should see:

info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://192.168.1.123:12345

Why do you need this? Maybe it worth for me to add change/instructions and make it easier.

 

[Zergatul]

Zergatul updated Input overlay plugin based on HTML with a new update entry:

Version 2.0.1

Added support for mouse movements. 3 examples added:

• Mouse movement circle indicator
• Mouse speed overlay
• Flick detection

You can check all 5 overlays in action below. They are optional and don't rely on each other. For more documentation visit github page https://github.com/Zergatul/Zergatul.Obs.InputOverlay

Read the rest of this update entry...

 

[Zergatul]

Zergatul updated Input overlay plugin based on HTML with a new update entry:

Version 2.2.0

Added gamepads support. Example below. For more documentation visit github page https://github.com/Zergatul/Zergatul.Obs.InputOverlay

Read the rest of this update entry...

 

[Jaysauris]

I edited the colors and key layout, the overlay displays properly but there isn't any key detection? I'm not sure if I'm supposed to save my file at the localhost address but I did try that and it wouldn't let me

 

[Zergatul]

I edited the colors and key layout, the overlay displays properly but there isn't any key detection? I'm not sure if I'm supposed to save my file at the localhost address but I did try that and it wouldn't let me

You should place your file in wwwroot folder, and access it using http://localhost. It will not work if you access it directly in filesystem