Resource icon

Non-OBS Script Keyboard and Mouse Visualization 0.0.1

javaScripts to visualize mouse position and key presses.

The examples in this repository feature the javaScript libraries P5.js and Cables.gl. Both are free and open source tools for making interactive content.

How it works​

  1. OBS hotkeys capture keyboard and mouse input that happens anywhere on your computer.
  2. Keyboard and Mouse events trigger an Advanced Scene Switcher macro that displays the event data in a Text Source.
  3. A Browser Source with javaScript listens for changes and renders the visualization
image

Required Software​

OBS and the following plug-ins are required.

Note
macOS Installing plug-in note:
  1. After Downloading a plug-in, expand the .zip file and in the expanded folder click to open the installer for your Mac.
  2. A warning will appear that Apple could not verify the plug-in. Click the "Done" button
  3. Go to System Settings,
    1. choose Privacy & Security settings.
    2. scroll to the bottom of the settings page.
    3. click "Open Anyway"

Getting started​

Download this repository​

  1. After installing OBS and the requisite plug-ins, download this repository.
  2. Extract the .zip download

Turn on the OBS WebSocket Server​

OBS includes a webSocket server. The webSocket server will allow the Browser Source to receive the Keyboard and Mouse event messages.

  1. Turn on the WebSocKet Server, from the file menu select "Tools --> WebSocket Server Settings"
  2. check the "Enable WebSocket server" setting
Click the "Show Connect Info Button" to get the WebSocket Server Password.
  1. Navigate to the folder where extracted the "keyboard and mouse visuals" are saved.
  2. Open the file /browser_Sources/obs_webSocket_details/websocketDetails.js
  3. Enter the WebSocket Server Password.
    • enter the password after "PW":"
  4. Save the change to "websocketDetails.js"

Import Scene Collection​

Use the file "Key_and_Mouse_Visuals_Collection.json" to configure OBS .

  • In OBS, on the file menu click "Scene Collection --> Import"
  • navigate to the file "Key_and_Mouse_Visuals_Collection.json", in the downloaded folder.
  • Change to the imported Scene Collection. "Scene Collection --> Key_and_Mouse_Visuals_Collection"
  • OBS will ask where the local webpages are located.
  • click the "Search Directory..." button
  • navigate to where this repo is saved on your computer.

User Interface.​

The Source Dock Plug-in is used to display the Keyboard and Mouse values. Mouse Follow and Zoom controls allow switching the scene view.

1c68fcd3-7aaf-4a3e-81c0-17e333f6941a


[!NOTE] Rearrange the docks however you'd like.

Create your own Visualization​

The repo includes a starter template to
- replace mouse input with eventListeners
- add OBS WebSocket connection.

Examples​

Attribution for the examples used in this repo

Key overlay​

541bf569-4818-4227-9743-d4bbe5fbd87f


Mouse overlay​

Example of mouse visualizations created with javaScript libraries.

1ed4ad3d-c07d-454f-b3f3-2f477dc60df7

Procedural 2d fish

Follow and Zoom to Mouse​

The Follow and Zoom to Mouse Visualizations are created using javaScript to control the OBS Plug-ins Advanced Mask and Move Transition.

Follow Mouse
1f6805b9-6f37-4967-b558-1a907b3e7683


Zoom and Follow Mouse
caf748be-94d6-4e4d-b176-da76e26661d6

Learn javaScript​

Recommendations for learning javascript with a creative coding approach

Author
uuoocl
Downloads
112
Views
429
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from uuoocl

Top