# Input overlay plugin based on HTML



## Zergatul (May 29, 2021)

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 (Jun 26, 2021)

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 (Jun 29, 2021)

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


----------



## Zergatul (Jun 30, 2021)

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?


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


----------



## Zergatul (Jun 30, 2021)

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.


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 (Jul 1, 2021)

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?



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 (Jul 1, 2021)

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


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 (Jul 15, 2021)

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


----------



## Bagny89 (Jul 15, 2021)

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 (Jul 15, 2021)

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


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 (Aug 1, 2021)

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 (Aug 1, 2021)

More keys added


----------



## Sarumonin (Aug 30, 2021)

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 (Sep 5, 2021)

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!


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 (Nov 21, 2021)

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


----------



## Zergatul (Nov 23, 2021)

marvel12 said:


> 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 (Dec 30, 2021)

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



Read the rest of this update entry...


----------



## Zergatul (Feb 3, 2022)

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 (Jun 14, 2022)

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 (Jun 30, 2022)

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


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


----------



## abovnbyond (Sep 30, 2022)

hello there!! I really like the freedom this input overlay provides altho its my very first time trying to learn html and I cant figure out why the saved copy doesnt save the colors and padding, I edited them from the inspect of chrome 
( edited in chrome )





( this is how it shows up in obs )




Like I said I'm trying to learn html and maybe its not html that I need to edit , maybe I'm editing in the wrong place pls help!!


----------



## Zergatul (Oct 1, 2022)

abovnbyond said:


> hello there!! I really like the freedom this input overlay provides altho its my very first time trying to learn html and I cant figure out why the saved copy doesnt save the colors and padding, I edited them from the inspect of chrome
> ( edited in chrome )
> View attachment 87111
> 
> ...


By default all changes you make in Chrome dev tools are not saved to disk. Chrome cannot know for sure where files are located on the disk. You can either setup Chrome to be able to save changes: https://developer.chrome.com/docs/devtools/workspaces/
Or edit files from some text editor


----------



## abovnbyond (Oct 2, 2022)

heyyy thank you editing it through a text editor is much easier thank you!


----------

