Display Keystroke

Free Display Keystroke v1.05

I made this tool cause I can't find one that can display keyboard and mouse input when playing games in fullscreen with only one monitor.

DisplayKeystroke
Display keyboard and mouse input onto browsers and OBS browser source.

Always remember that do not type passwords when broadcasting.

Screenshots


Instructions
  1. Run the application KeystrokeServer.exe and click the Start button.
  2. Open the index.html on the browser or the OBS browser source.
  3. If you have not set the client ip on the application, you will then receive a connection request from the browser to the application. Otherwise, the application will auto approve any request from the client ip you have provided.
Choose a layout from preset
  • Almost the same as above except on step 2, open one of the .html file from the layout folder on the browser or the OBS browser source.
Customize layout
If you are familiar with javascript, it is easy to create your own layout.
  • Open layout folder and make a copy of QWERTY+mouse folder and QWERTY+mouse.html then rename them to the new names you choose. To make it simply on this tutorial, we will name the folder to example_layout and the html file to example_layout.html.
  • Open example_layout.html with any text editor.
  • Find this line <meta http-equiv='refresh' content='0; url=../index.html?layout=QWERTY+mouse'>. Change QWERTY+mouse to example_layout, so the new line will become <meta http-equiv='refresh' content='0; url=../index.html?layout=example_layout'>
  • Open layout.js from example_layout folder with any text editor.
  • Remove unwanted key objects from the items array. A key object includes an image and a text object, it should look like { image: {...}, text: { key_code: '1b', ...} }.

  • Set the properties of a key object to change the appearance of a key.
Code:
{
    image:
    {
        x, // image position x
        y, // image position y
        w, // image width
        h, // image height
        url, // image path name when key released
        pressed_url, // image path name when key pressed
    },
    text:
    {
        key_code, // the virtual key code, add '1' prefix if it is an extended key
        key_code2, // some of the numpad keys have different key codes when switching num lock
        text, // text displayed on the key
        x, // text position x relatively to the image position
        y, // text position y relatively to the image position
        size, // font size
        bold, // set it to true or false to toggle bold font
        font, // font name
        color, // text color when key released
        pressed_color, // text color when key pressed
    }
}
If a key object property is not set, it will assume to use the default one.

Demonstration:



Source code: https://github.com/xxdocobxx/DisplayKeystroke



Buy me a coffee?
It is not required to do so but if you think that this app is useful to you and are likely to consider a tip as a small and unexpected bonus, here is the link: https://twitch.streamlabs.com/xxdocobxx
Author
xxdocobxx
Downloads
9,160
First release
Last update
Rating
4.67 star(s) 6 ratings

More resources from xxdocobxx

Latest updates

  1. Bug fix

    fixed a bug where client unable to connect to server if the websocket handshake data size is...
  2. KeystrokeServer.exe sends mouse coordinates to browser now.

    KeystrokeServer.exe sends mouse coordinates to browser now.
  3. Minor bug fixes

    KeystrokeServer.exe fixed the shift+numpad keys conflict. fixed a crash when sending messages...

Latest reviews

I made this account just to say thank you! It works great. As long as you're familiar with JSON, it's very customizable and I was able to make the keyboard look just the way I like it. Here is an example if anyone's curious: https://youtu.be/6RCXyh2aICY
Works nice
Its great to have but when i click in to a game it doesn't work, now im not good at programming so i have no clue what to do to get this to work, any help wld be great
Love it. Curious since I'm very weak with HTML. Is there a way to "illuminate" the background of the keyboard?
Hey man. Just signed up entirely to send you a thank you message. Was just about to whip up a C# app that did this exact thing and you saved me a load of time. Thanks a load! Works amazing.
very nice, thx
Top