Resource icon

Input overlay plugin based on HTML

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 )
1664527685047.png


( this is how it shows up in obs )
1664527777047.png


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

( this is how it shows up in obs )
View attachment 87112

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!!
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
 
Can you just get rid of animation altogether? So annoying

For those who agree with my concern, at least for keyboard part, search this line from "default-keyboard.html":

div.released {
animation: key-released 0.0s ease-out; /* animation settings for key releasing */

and change [0.5s ease-out] to [0.0s ease-out], save then click Refresh button within OBS Studio.

Good riddance
 
Last edited:
Can you just get rid of animation altogether? So annoying

For those who agree with my concern, at least for keyboard part, search this line from "default-keyboard.html":

div.released {
animation: key-released 0.0s ease-out; /* animation settings for key releasing */

and change [0.5s ease-out] to [0.0s ease-out], save then click Refresh button within OBS Studio.

Good riddance
I found the line for mouse clicks

Search this line from "default-mouse.html":

function addSvgReleased(element) {
animate.setAttribute('values', '1.0; 0.0');

and change ('values', '1.0; 0.0') to ('values', '0.0; 0.0'), save then click Refresh button within OBS Studio.

Good riddance
 
Also, if you are like me who want to keep buttons with background color when idle

Search this line from "default-keyboard.html":

div.space-button {

and paste this line

[background-color: black;]

as the first element so it looks like this:

div.space-button {
background-color: black;
border: 2px solid white;
border-radius: 10px;
color: white;
display: inline-block;
font-family: Calibri;
font-size: 20px;
line-height: 40px;
height: 40px;
text-align: center;
width: 40px;
}

You can replace [black] with color of your choice. Apparently, this edit is for space-button but for strange reason it affects all keys.

Now for mouse buttons,

First, restore the "default-mouse.html" file like when you first downloaded, if you prefer,

Search this line from "default-mouse.html":

const buttonReleasedColor = '#96CF13';

change [#96CF13] to [#000000];

Search this line from "default-mouse.html":

function addSvgReleased(element) {
animate.setAttribute('values', '1.0; 0.0');

and change ('values', '1.0; 0.0') to ('values', '1.0; 1.0'), save then click Refresh button within OBS Studio.

You can replace [#000000] with color of your choice. Apparently, each mouse button has to be clicked for the background to take effect, but at least its better than nothing.

Good riddance
 
I know this plugin might be dead and no longer supported by the developer, but im trying to do the remote connection, and long story short i cannot find "engine.js" or how to open such file. The plugin folder has "common.js", but its not very helpful, and "default-keyboard.html" does contain lines like:

var ws = new WebSocket('ws://localhost:5001/ws');
from

but the version im using (v2.2.3) has "default-keyboard.html" contain lines like:

let ws = new WebSocket('ws://' + location.host + '/ws');

It really feels like all i gotta do is simple replace of a variable (like "localhost" to a "ip address") but the developer is not good at explaining anything, and i just cannot find "engine.js" file or how to open in the way it is explained. So replacing the line like:

let ws = new WebSocket('ws://' + location.host + '/ws');
to
let ws = new WebSocket('ws://' + 192.168.???.??? + '/ws');

and applying "--urls http://192.168.???.???:12345/" at the shortcut of the [*.exe] opens an empty window for 5 sec then shuts down. So i dont know how to enable to see any log file of this plugin, and like a said earlier, this developer never explains anything well, so i need help generating a log for this plugin. Sometimes, very rarely, it shows some messages, and i managed to quickly copy&paste:

Unhandled exception. System.Net.Sockets.SocketException (10049): The requested address is not valid in its context.
at System.Net.Sockets.Socket.UpdateStatusAfterSocketErrorAndThrowException(SocketError error, String callerName)
at System.Net.Sockets.Socket.DoBind(EndPoint endPointSnapshot, SocketAddress socketAddress)
at System.Net.Sockets.Socket.Bind(EndPoint localEP)
at Microsoft.AspNetCore.Server.Kestrel.Transport.Sockets.SocketTransportOptions.CreateDefaultBoundListenSocket(EndPoint endpoint)
at Microsoft.AspNetCore.Server.Kestrel.Transport.Sockets.SocketConnectionListener.Bind()
at Microsoft.AspNetCore.Server.Kestrel.Transport.Sockets.SocketTransportFactory.BindAsync(EndPoint endpoint, CancellationToken cancellationToken)
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Infrastructure.TransportManager.BindAsync(EndPoint endPoint, ConnectionDelegate connectionDelegate, EndpointConfig endpointConfig, CancellationToken cancellationToken)
at Microsoft.AspNetCore.Server.Kestrel.Core.KestrelServerImpl.<>c__DisplayClass30_0`1.<<StartAsync>g__OnBind|0>d.MoveNext()
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.AddressBinder.BindEndpointAsync(ListenOptions endpoint, AddressBindContext context, CancellationToken cancellationToken)
at Microsoft.AspNetCore.Server.Kestrel.Core.ListenOptions.BindAsync(AddressBindContext context, CancellationToken cancellationToken)
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.AddressBinder.AddressesStrategy.BindAsync(AddressBindContext context, CancellationToken cancellationToken)
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.AddressBinder.BindAsync(IEnumerable`1 listenOptions, AddressBindContext context, CancellationToken cancellationToken)
at Microsoft.AspNetCore.Server.Kestrel.Core.KestrelServerImpl.BindAsync(CancellationToken cancellationToken)
at Microsoft.AspNetCore.Server.Kestrel.Core.KestrelServerImpl.StartAsync[TContext](IHttpApplication`1 application, CancellationToken cancellationToken)
at Microsoft.AspNetCore.Hosting.GenericWebHostService.StartAsync(CancellationToken cancellationToken)
at Microsoft.Extensions.Hosting.Internal.Host.StartAsync(CancellationToken cancellationToken)
at Microsoft.Extensions.Hosting.HostingAbstractionsHostExtensions.RunAsync(IHost host, CancellationToken token)
at Microsoft.Extensions.Hosting.HostingAbstractionsHostExtensions.RunAsync(IHost host, CancellationToken token)
at Microsoft.Extensions.Hosting.HostingAbstractionsHostExtensions.Run(IHost host)
at Zergatul.Obs.InputOverlay.Program.Main(String[] args) in C:\Users\Zergatul\source\repos\Zergatul.Obs.InputOverlay\src\Program.cs:line 12

Of course, i am OBS plugin illiterate, so i have no idea whats going wrong with the changes i made.

I know this post ended up much longer than intended, but the developer is not good at explaining anything at all, and it feels like a simple replace of a variable from "localhost:5001" to "ip address of the remote PC" is all i have to do, so im really desperate maybe one savvy soul can help me see the line:

info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://192.168.???.???:12345/

Thank you so much for reading such long and superficial issue and the solution to this remote connection will be greatly appreciated.
 
Back
Top