Input Overlay

Input Overlay 5.0.0

lazuee

New Member
The 5.0.0 pre release adds the websocket server, and it works just fine for me.

Why does Input Overlay not detect input in some cases?
This is most likely caused by the application protecting its inputs for a variety of reasons. Launching obs-studio as administrator usually fixes this issue.
i tried running obs as admin, but my window detects the input_history.html with a virus or unwanted sowftware when adding a browser source.
 

Attachments

  • Capture.PNG
    Capture.PNG
    55 KB · Views: 33

lazuee

New Member
Last edited:

universallp

Member
View attachment 84785

i tried adding the input history html from https://github.com/univrsal/input-o...ut-history-windows/input-history-windows.html , but it always show a prompt of an unwanted software or contains virus. I can't add it on my browser source :|

I hope someone could see and update the html based input_history.
There's not much I can do about that, I don't even now where one can report false positives, but even if I did it'll probably just keep happening. You can use this version in the meantime:
HTML:
<!DOCTYPE html>
<html>
  <!-- A usable HTML template for input-history overlay using Browser Source and Websocket -->
  <!-- ONLY KEYBOARD INPUT AS OF NOW -->

  <!-- By: https://github.com/christiankyle-ching/ -->
  <head>
    <meta charset="utf-8" />
    <title>input-history Windows</title>

    <style>
  *{margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif;font-size:48px;color:#fff;overflow:hidden}div#history{padding-top:100vh;list-style-type:none}p.key-combination.hidden{opacity:0;transition-property:opacity;transition-timing-function:ease-out;transition-duration:1s}p.key-combination>*{margin-top:.5em;vertical-align:middle}p.key-combination>.separator{display:inline-block;margin-left:.25em;margin-right:.25em}span.key{display:inline-flex;border-radius:.25em;padding:.25em;background-color:rgba(0,0,0,.75);white-space:nowrap}#icons-container{visibility:collapse}.icon-sm{width:1em;height:1em;display:block;margin:auto}
    </style>
  </head>

  <body>
    <!-- #region Icons -->
    <div id="icons-container">
      <!-- Get Icons from FontAwesome -->
      <!-- Copy SVG Code -->

      <!-- Windows Key - VC_META_L / VC_META_R -->
      <svg
        id="SVG_VC_META"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 448 512"
      >
        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
        <path
          d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z"
        />
      </svg>

      <!-- Arrow Left -->
      <svg
        id="SVG_VC_LEFT"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 512 512"
      >
        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
        <path
          d="M512 256C512 273.7 497.7 288 480 288H160.1l0 72c0 9.547-5.66 18.19-14.42 22c-8.754 3.812-18.95 2.077-25.94-4.407l-112.1-104c-10.24-9.5-10.24-25.69 0-35.19l112.1-104c6.992-6.484 17.18-8.218 25.94-4.406C154.4 133.8 160.1 142.5 160.1 151.1L160.1 224H480C497.7 224 512 238.3 512 256z"
        />
      </svg>

      <!-- Arrow Right -->
      <svg
        id="SVG_VC_RIGHT"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 512 512"
      >
        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
        <path
          d="M504.3 273.6l-112.1 104c-6.992 6.484-17.18 8.218-25.94 4.406c-8.758-3.812-14.42-12.45-14.42-21.1L351.9 288H32C14.33 288 .0002 273.7 .0002 255.1S14.33 224 32 224h319.9l0-72c0-9.547 5.66-18.19 14.42-22c8.754-3.809 18.95-2.075 25.94 4.41l112.1 104C514.6 247.9 514.6 264.1 504.3 273.6z"
        />
      </svg>

      <!-- Arrow Up -->
      <svg
        id="SVG_VC_UP"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 320 512"
      >
        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
        <path
          d="M285.1 145.7c-3.81 8.758-12.45 14.42-21.1 14.42L192 160.1V480c0 17.69-14.33 32-32 32s-32-14.31-32-32V160.1L55.1 160.1c-9.547 0-18.19-5.658-22-14.42c-3.811-8.758-2.076-18.95 4.408-25.94l104-112.1c9.498-10.24 25.69-10.24 35.19 0l104 112.1C288.1 126.7 289.8 136.9 285.1 145.7z"
        />
      </svg>

      <!-- Arrow Down -->
      <svg
        id="SVG_VC_DOWN"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 320 512"
      >
        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
        <path
          d="M281.6 392.3l-104 112.1c-9.498 10.24-25.69 10.24-35.19 0l-104-112.1c-6.484-6.992-8.219-17.18-4.404-25.94c3.811-8.758 12.45-14.42 21.1-14.42H128V32c0-17.69 14.33-32 32-32S192 14.31 192 32v319.9h72c9.547 0 18.19 5.66 22 14.42C289.8 375.1 288.1 385.3 281.6 392.3z"
        />
      </svg>
    </div>
    <!-- #endregion -->

    <div id="history"></div>
  </body>

  <script>
 var KEYCODES={1:["VC_ESCAPE","ESC"],59:["VC_F1","F1"],60:["VC_F2","F2"],61:["VC_F3","F3"],62:["VC_F4","F4"],63:["VC_F5","F5"],64:["VC_F6","F6"],65:["VC_F7","F7"],66:["VC_F8","F8"],67:["VC_F9","F9"],68:["VC_F10","F10"],87:["VC_F11","F11"],88:["VC_F12","F12"],91:["VC_F13","F13"],92:["VC_F14","F14"],93:["VC_F15","F15"],99:["VC_F16","F16"],100:["VC_F17","F17"],101:["VC_F18","F18"],102:["VC_F19","F19"],103:["VC_F20","F20"],104:["VC_F21","F21"],105:["VC_F22","F22"],106:["VC_F23","F23"],107:["VC_F24","F24"],41:["VC_BACKQUOTE","`"],2:["VC_1","1"],3:["VC_2","2"],4:["VC_3","3"],5:["VC_4","4"],6:["VC_5","5"],7:["VC_6","6"],8:["VC_7","7"],9:["VC_8","8"],10:["VC_9","9"],11:["VC_0","0"],12:["VC_MINUS","-"],13:["VC_EQUALS","="],14:["VC_BACKSPACE","BACKSPACE"],15:["VC_TAB","TAB"],58:["VC_CAPS_LOCK","CAPS LOCK"],30:["VC_A","A"],48:["VC_B","B"],46:["VC_C","C"],32:["VC_D","D"],18:["VC_E","E"],33:["VC_F","F"],34:["VC_G","G"],35:["VC_H","H"],23:["VC_I","I"],36:["VC_J","J"],37:["VC_K","K"],38:["VC_L","L"],50:["VC_M","M"],49:["VC_N","N"],24:["VC_O","O"],25:["VC_P","P"],16:["VC_Q","Q"],19:["VC_R","R"],31:["VC_S","S"],20:["VC_T","T"],22:["VC_U","U"],47:["VC_V","V"],17:["VC_W","W"],45:["VC_X","X"],21:["VC_Y","Y"],44:["VC_Z","Z"],26:["VC_OPEN_BRACKET","["],27:["VC_CLOSE_BRACKET","]"],43:["VC_BACK_SLASH","\\"],39:["VC_SEMICOLON",";"],40:["VC_QUOTE","'"],28:["VC_ENTER","ENTER"],51:["VC_COMMA",","],52:["VC_PERIOD","."],53:["VC_SLASH","/"],57:["VC_SPACE","SPACE"],3639:["VC_PRINTSCREEN","PrtSc"],70:["VC_SCROLL_LOCK","SCROLL LOCK"],3653:["VC_PAUSE","PAUSE"],3654:["VC_LESSER_GREATER","|"],3666:["VC_INSERT","INSERT"],3667:["VC_DELETE","DELETE"],3655:["VC_HOME","HOME"],3663:["VC_END","END"],3657:["VC_PAGE_UP","PAGE UP"],3665:["VC_PAGE_DOWN","PAGE DOWN"],61010:["VC_INSERT","INSERT"],61011:["VC_DELETE","DELETE"],60999:["VC_HOME","HOME"],61007:["VC_END","END"],61001:["VC_PAGE_UP","PAGE UP"],61009:["VC_PAGE_DOWN","PAGE DOWN"],3656:["VC_UP","ARROW UP"],3659:["VC_LEFT","ARROW LEFT"],3660:["VC_CLEAR",""],3661:["VC_RIGHT","ARROW RIGHT"],3664:["VC_DOWN","ARROW DOWN"],61e3:["VC_UP","ARROW UP"],61003:["VC_LEFT","ARROW LEFT"],61004:["VC_CLEAR",""],61005:["VC_RIGHT","ARROW RIGHT"],61008:["VC_DOWN","ARROW DOWN"],69:["VC_NUM_LOCK","NUM LOCK"],3637:["VC_KP_DIVIDE","NUM /"],55:["VC_KP_MULTIPLY","NUM *"],74:["VC_KP_SUBTRACT","NUM -"],3597:["VC_KP_EQUALS","NUM ="],78:["VC_KP_ADD","NUM +"],3612:["VC_KP_ENTER","NUM ENTER"],83:["VC_KP_SEPARATOR","NUM ."],79:["VC_KP_1","NUM 1"],80:["VC_KP_2","NUM 2"],81:["VC_KP_3","NUM 3"],75:["VC_KP_4","NUM 4"],76:["VC_KP_5","NUM 5"],77:["VC_KP_6","NUM 6"],71:["VC_KP_7","NUM 7"],72:["VC_KP_8","NUM 8"],73:["VC_KP_9","NUM 9"],82:["VC_KP_0","NUM 0"],60928:["VC_KP_END",""],60928:["VC_KP_DOWN",""],60928:["VC_KP_PAGE_DOWN",""],60928:["VC_KP_LEFT",""],60928:["VC_KP_CLEAR",""],60928:["VC_KP_RIGHT",""],60928:["VC_KP_HOME",""],60928:["VC_KP_UP",""],60928:["VC_KP_PAGE_UP",""],60928:["VC_KP_INSERT",""],60928:["VC_KP_DELETE",""],42:["VC_SHIFT_L","L SHIFT"],54:["VC_SHIFT_R","R SHIFT"],29:["VC_CONTROL_L","L CTRL"],3613:["VC_CONTROL_R","R CTRL"],56:["VC_ALT_L","L ALT"],3640:["VC_ALT_R","R ALT"],3675:["VC_META_L","WIN"],3676:["VC_META_R","WIN"],3677:["VC_CONTEXT_MENU","CONTEXT MENU"],57438:["VC_POWER","POWER"],57439:["VC_SLEEP","SLEEP"],57443:["VC_WAKE","WAKE"],57378:["VC_MEDIA_PLAY","MEDIA PLAY"],57380:["VC_MEDIA_STOP","MEDIA STOP"],57360:["VC_MEDIA_PREVIOUS","MEDIA PREVIOUS"],57369:["VC_MEDIA_NEXT","MEDIA NEXT"],57453:["VC_MEDIA_SELECT","MEDIA SELECT"],57388:["VC_MEDIA_EJECT","MEDIA EJECT"],57376:["VC_VOLUME_MUTE","VOLUME MUTE"],57392:["VC_VOLUME_UP","VOLUME UP"],57390:["VC_VOLUME_DOWN","VOLUME DOWN"],57452:["VC_APP_MAIL","APP MAIL"],57377:["VC_APP_CALCULATOR","APP CALCULATOR"],57404:["VC_APP_MUSIC","APP MUSIC"],57444:["VC_APP_PICTURES","APP PICTURES"],57445:["VC_BROWSER_SEARCH","BROWSER SEARCH"],57394:["VC_BROWSER_HOME","BROWSER HOME"],57450:["VC_BROWSER_BACK","BROWSER BACK"],57449:["VC_BROWSER_FORWARD","BROWSER FORWARD"],57448:["VC_BROWSER_STOP","BROWSER STOP"],57447:["VC_BROWSER_REFRESH","BROWSER REFRESH"],57446:["VC_BROWSER_FAVORITES","BROWSER FAVORITES"],112:["VC_KATAKANA",""],115:["VC_UNDERSCORE",""],119:["VC_FURIGANA",""],121:["VC_KANJI",""],123:["VC_HIRAGANA",""],125:["VC_YEN",""],126:["VC_KP_COMMA",""],65397:["VC_SUN_HELP",""],65400:["VC_SUN_STOP",""],65398:["VC_SUN_PROPS",""],65399:["VC_SUN_FRONT",""],65396:["VC_SUN_OPEN",""],65406:["VC_SUN_FIND",""],65401:["VC_SUN_AGAIN",""],65402:["VC_SUN_UNDO",""],65404:["VC_SUN_COPY",""],65405:["VC_SUN_INSERT",""],65403:["VC_SUN_CUT",""],0:["VC_UNDEFINED",""],65535:["CHAR_UNDEFINED",""]};function getKeyHTML(_){var C=KEYCODES[parseInt(_)];if(C){var e=KEYICONS[parseInt(_)];return e?e.cloneNode(!0).outerHTML:""!==C[1]?C[1]:C[0]}return""}document.querySelectorAll("#icons-container > svg").forEach((_=>_.classList.add("icon-sm"))),document.querySelectorAll("#icons-container > svg > path").forEach((_=>_.setAttribute("fill","currentColor")));var KEYICONS={3675:document.getElementById("SVG_VC_META"),3676:document.getElementById("SVG_VC_META"),3656:document.getElementById("SVG_VC_UP"),3659:document.getElementById("SVG_VC_LEFT"),3661:document.getElementById("SVG_VC_RIGHT"),3664:document.getElementById("SVG_VC_DOWN"),61e3:document.getElementById("SVG_VC_UP"),61003:document.getElementById("SVG_VC_LEFT"),61005:document.getElementById("SVG_VC_RIGHT"),61008:document.getElementById("SVG_VC_DOWN"),28:document.getElementById("SVG_VC_ENTER")};function getKeyCombinationElement(_=new Set){try{var C=Array.from(_).map((_=>getKeyHTML(_))).filter((_=>""!==_)).map((_=>createElementWithClass("span",_,["key"]).outerHTML)).join(createElementWithClass("span",SEPARATOR,["separator"]).outerHTML);return createElementWithClass("p",C,["key-combination"])}catch(_){return console.error(_),""}}function createElementWithClass(_,C="",e=[]){var V=document.createElement(_);return V.innerHTML=C,V.classList.add(...e),V}var HISTORY_MAX=10,HISTORY_TIMEOUT_ACTIVE=!0,HISTORY_TIMEOUT=3500,SEPARATOR="+",_historyDiv=document.getElementById("history"),_historyCurrentlyPressed=new Set,_isHistoryPressing=!1;function onKeyEvent(_){_.event_type.startsWith("mouse")||"key_typed"===_.event_type||("key_pressed"===_.event_type?(_historyCurrentlyPressed.add(_.keycode),_isHistoryPressing=!0):"key_released"===_.event_type&&(_historyCurrentlyPressed.delete(_.keycode),_isHistoryPressing=!1),updateUI())}function updateUI(){var _=""===(null==_historyDiv.lastElementChild?"":_historyDiv.lastElementChild.innerHTML);if(_isHistoryPressing)_historyDiv.childElementCount>0?_historyDiv.lastElementChild.innerHTML=getKeyCombinationElement(_historyCurrentlyPressed).innerHTML:_historyDiv.appendChild(getKeyCombinationElement(_historyCurrentlyPressed));else if(!_){if(HISTORY_TIMEOUT_ACTIVE){var C=_historyDiv.lastElementChild;setTimeout((()=>{C.classList.add("hidden")}),HISTORY_TIMEOUT)}_historyDiv.appendChild(getKeyCombinationElement())}_historyDiv.children.length>HISTORY_MAX&&_historyDiv.firstChild.remove(),scrollTo({top:document.body.scrollHeight})}function on_data(_){onKeyEvent(JSON.parse(_.data))}function start_websocket(){var _=new WebSocket("ws://localhost:16899/");_.onmessage=on_data,_.onerror=_=>{console.log("WebSocket error: "),console.error(_)},_.onclose=()=>{_=null,setTimeout(start_websocket,2e3)}}start_websocket();
  </script>
</html>
It's exactly the same, except for the CSS and Javascript which have been minified so windows defender doesn't detect the file anymore.
 

TIMORLANG

Member
Great plugin. Thank you for all those that have worked on it. I have used it in game streaming with lots of success. I am in the process of trying to create some educational videos and was wondering if there is a way to just have the keys pressed pear instead of the whole keyboard. I.E., when no keys are pressed; the video looks as it should with no overlay of any kind. When I hit a key or keys; only that key or keys pops up on the video for a controllable amount of time. I.E., appears for 1 sec unless another key is pressed or something like that.

So:

1. Can this be programed to only show a key when pressed without an always visible overlay
2. Can this be programed for the length of time a key press appears on the video - i.e., appear for 1 sec or till next key clicked - whichever is first....
 

universallp

Member
Great plugin. Thank you for all those that have worked on it. I have used it in game streaming with lots of success. I am in the process of trying to create some educational videos and was wondering if there is a way to just have the keys pressed pear instead of the whole keyboard. I.E., when no keys are pressed; the video looks as it should with no overlay of any kind. When I hit a key or keys; only that key or keys pops up on the video for a controllable amount of time. I.E., appears for 1 sec unless another key is pressed or something like that.

So:

1. Can this be programed to only show a key when pressed without an always visible overlay
2. Can this be programed for the length of time a key press appears on the video - i.e., appear for 1 sec or till next key clicked - whichever is first....
Input history is what you're looking for:
 

eeaeaee

New Member
Hello, a friend and I were having some issues. A config he made works fine in the visualizer on git, but does not work properly in OBS.
I've tried the same files and can confirm the same issue. I've attached the files we're using. The issue is that the directional buttons (red buttons) don't work. The other buttons work fine. This is for a HitBox controller, which registers as an XBox 360 controller in Windows.
Since it's only an issue in OBS itself, and NOT on github, I'm wondering if the OBS plugin is borked?

Tried running OBS as administrator, no luck sadly.

Thank you so much in advance if you decide to check this out.
 

Attachments

  • buttons final again.png
    buttons final again.png
    5.9 KB · Views: 13
  • hitbox save as json.txt
    4.1 KB · Views: 1
Last edited:

DJFrANKyEHP

New Member
@universallp Thanks you very much for such a handy plugin.

I love the way it can be used and how soft and good it works. It has a lot of potential for modifications.

Thanks again to the creator and also to the people who shared the different configs here shown.

NOTE: All the creators are credited as 'Plug-ins Creator' at the credits of my 'Streams' at the end of them. ;)
 

GraggyGod

New Member
I'm wanting to create my own overlay for celeste in io-cct but the start but has no effect after I've put in the texture and config files. What am I doing wrong?
 

bigbadaardwolf

New Member
I'm wanting to create my own overlay for celeste in io-cct but the start but has no effect after I've put in the texture and config files. What am I doing wrong?
It was working 2-3 days ago, I tried again today and it does not work with any of the preset files. I sent an email to the developer, will update if I find anything out. Created this account just to say I'm having the same issue. It looks like they made some changes about 18-20hrs prior to my writing this, which may have affected something?
 

robinSpeedruns

New Member
Hello, thank you for making this program, I have been messing around with it and made my own layout.
I have ran into one problem, I apologise if this has been mentioned before. But when I use the Mouse movement (with the Move option, not Point) it doesn't move whenever I have left click or right click pressed. This person has the exact same problem as I have https://github.com/univrsal/input-overlay/issues/207

Is there any fix to this? I have tried running OBS in administrator but the problem remains unfortunately.
Thank you!
 
Top