Resource icon

Input overlay plugin based on HTML

Zergatul

New Member
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

New Member
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

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

Zergatul

New Member
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

New Member
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

New Member
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

1625124883782.png
 

Zergatul

New Member
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:
Code:
<div class="button" id="Tilde">~</div>
And replace it with:
Code:
<div class="button" id="Backslash">\</div>
 

Bagny89

New Member
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

New Member
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.

1626359479898.png


1626359552956.png
 

Zergatul

New Member
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

New Member
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!
 

Sarumonin

New Member
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

New Member
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:
JavaScript:
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);
            }
        }
    }
}
 

Zergatul

New Member
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:
Code:
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.
 

Jaysauris

New Member
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

New Member
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
 
Top