Resource icon

Input overlay plugin based on HTML

Overview Updates (2) Reviews (2) Discussion
Zergatul

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....
Click to expand...

Read more about this resource...
 
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?
 
I just downloaded this plugin. I really like it however I wanted to change the "tilde" key to "\" since my layout is Italian.
 
Rellish08 said:
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?
Click to expand...
Sorry, that's not possible. In order to capture inputs from Nintendo Switch we need to run program on console.
 
Bagny89 said:
I just downloaded this plugin. I really like it however I wanted to change the "tilde" key to "\" since my layout is Italian.
Click to expand...
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?
 
Zergatul said:
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?
Click to expand...

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
 
Bagny89 said:
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
Click to expand...
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>
 
Zergatul said:
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 ❤
Click to expand...
 
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
 
Bagny89 said:
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
Click to expand...
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
 
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!
 
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!
 
Sarumonin said:
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!
Click to expand...
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);
            }
        }
    }
}
 
marvel12 said:
is there away i can change it from localhost to a ip ?
Click to expand...
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.
 
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
 
Jaysauris said:
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
Click to expand...
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
 
You must log in or register to reply here.
Back
Top