[Basic feature request] Render presses for a longer time

[jkidd1]

Thank you very much for creating and maintaining this very useful plugin. In my case, I am using it to visualize hits on a drum controller (each hit maps to a keyboard press). The issue is that the keys/hits only stay pressed for a very short amount of time, so the visuals ultimately do not look very smooth. I am wondering whether it would be easy/trivial to add an option for extending the render of the "pressed" icon. For example, the key could display the "pressed" state for an additional second after it is released.

If this is too much effort to implement, I totally understand. And if it's not done through the plugin, does anyone have tips for how it could be accomplished in OBS? Is there perhaps another plugin I could use in tandem with this one?

[univrsal]

You could use the browser source. https://github.com/univrsal/input-overlay/tree/master/data/overlay_render contains an example for rendering the gamepad preset in the browser source. It cold be adapted to load any other gamepad preset and to extend button presses.

[jkidd1]

Thank you so much for the suggestion. I have coding experience but am not familiar with javascript, so my apologies if I am a bit slow. I found a draw function in here in elements.js. If I understand correctly, this is where you perform the trick of shifting the render window downwards in the texture file so that the "pressed" image is shown. The shift only happens if this.pressed is true. I also see that you have some wrappers, e.g., on_keyboard_input, that presumably keep track of the state of each key code on each tick. What approach should I be taking to the modification? Should I be trying to keep this.pressed true for additional ticks after the initial change of the state? Any advice would be highly appreciated.

[univrsal]

Yeah basically just keep track of whether the button was pressed before and if it isn't any more delay the switch from true to false by however long you wan the presses to last.

[jkidd1]

Hi again! I never got around to trying this out until recently. I am able to run the "normal" rendering example just fine. But when I try adding the delay, I encounter an issue. I modified the keyboard_button class as follows:

class keyboard_button extends button {
    on_keyboard_input(vc, state) {
        if (vc === this.data.code) {
            if (!state){
                setTimeout(function(){this.pressed = state}, 1000);
            }
            else {
                this.pressed = state;
            }
        }
    }
}

I expected that setTimeout would delay the switch by 1000ms. But when I run in Chrome, I find that once a button is pressed, it just stays pressed forever... Any ideas?

[jkidd1]

Ok, the issue was related to class object references in JavaScript (sorry, again I'm still new to the language). I fixed it by creating a temporary variable:

var self = this;
if (!state) {
    setTimeout(function(){self.pressed = state}, 50);
}

Now it runs as expected in Chrome -- great! However, I am not able to get it working in OBS right now. I can run the input-history-windows example just fine, but when I try to add my modified render.html as a browser source, it's not picking up any inputs. I guess there is some issue with the WebSocket server? I saw that you had start_websocket() commented in render.html. I tried uncommenting it, but still couldn't get it to work. Right now, it only works while running in Chrome with the window active.

[univrsal]

It gets a bit more tricky there, you have to handle the input data in the on_data function.
Basically something like this:

// Keyboard event
if (data.event_type === "key_pressed" || data.event_type === "key_released") { 
  if (cfg !== null)
    cfg.elements.forEach(element => element.on_keyboard_input(data.keycode, data.event_type === "key_pressed"));
}