# input-history-windows-keyboard By: [@christiankyle-ching](https://github.com/christiankyle-ching) A simple input-history HTML file that can be used with browser source. **Currently only shows keyboard events.** ## How to Use? 1. [Download the HTML file](input-history-windows.html). 2. Add a **Browser Source**. 3. Check **Local File**, then **locate the downloaded HTML file**. 4. **Adjust width and height** relative to your scene's pixel size. 5. (Optional) Customize using **by editing the HTML directly (recommended)** or **Custom CSS**. **Make sure that forwarding events to websocket is enabled.** ![Websocket Forwarding](img/websocket-forwarding.png) ## Customization **You must know basic [HTML](https://developer.mozilla.org/en-US/docs/Web/CSS), [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) to easily customize the template.** ### Basic Styling In OBS, you can add styles in **Custom CSS** to override the styles in the HTML. **But I recommend you to edit the HTML file directly instead, so the styling persists even after removing the browser source.** ![Custom CSS](img/custom-css.png) In the example above: - The `body { ... }` CSS selector: means that all the styles indicated inside the braces are applied to **the whole HTML ``**. - `color: skyblue;` - Sets the font color to skyblue. - `text-align: center;` - Sets the text align (either left, center or right). - `font-size: 32px;` - Sets the font size in pixels. Adjust based on your screen pixel size. - `font-family: "Lucida Sans";` - Sets the font family. **Make sure the font is installed in your system, otherwise it won't work.** - `font-weight: bold;` - Sets text to bold. - `font-style: italic;` - Sets text to italic. - `background-color: rgba(0, 0, 0, 0);` - Represents red, green, blue, and alpha. Makes the browser's background transparent (which is what you mostly want in the scene). - The `span.key, span.repeat { ... }` CSS selector: means that all the styles indicated inside the braces are applied to **all elements that has `class="key" or class="repeat" in HTML` (the rounded rectangle container for keys and round repetition counter)**. - Note the `!important` after the value of `background-color`. This is sometimes required to override the styles applied within the HTML, and to use this value instead. ### Hide Specific Keys Just comment out the lines in `var KEYCODES = {...}` of keys you don't want to show. Just add `//` on beginning of the line to "comment" lines. ```js // In HTML

c	File Name	Size	files	T	Date
zip	img/	60593	2	---	2025-05-10 18:09:39
-	README.md	5511		md	2025-05-10 18:09:39
-	input-history-windows.html	36275		html	2025-05-10 18:09:39

🌲 / software Configuration OBS files data obs-plugins input-overlay presets input-history-windows

control-panel