/Woot-verlay

Pressure sensitive display for the analog values of your Wooting keyboard! Visit the page to mess around, or add it as a fully functional overlay to your streams.

Primary LanguageJavaScript

logo

Pressure-sensitive display for the analogue values of your Wooting keyboard! Visit the page to mess around, or add it as a fully functional overlay to your streams. Check out a demonstration here

Features

Customisation and Presets

Woot-verlay is made to be extremely customisable. Right-click on keys to rename, change the fill direction or delete them. Drag the keys to shift them around. Grab the green or orange dotted edges of a key to resize. Shift click to multi-select.

Presets are available to save and import. They can be found here in the project wiki!




Settings

When your mouse is on the page, a popup appears at the top middle of the screen. Click + to add extra keys. Use the cog to change global settings, the bookmark icon to copy and paste new profiles, the WiFi/LAN icon to connect to your keyboard from an external device, and the eye to see extra stats below the keyboard.




OBS and LAN connections

The OBS plugin allows streaming to Twitch and other platforms with this as an overlay on top! View the running instructions in the section below. Using LAN, you can host the overlay on another PC that could be recording, or even on a mobile device as a mini external display!



Running Woot-verlay

This application uses a local TCP server that must be kept running while using the website to display your values. Download and run the exe file in the releases section. It should pop up in your system tray! You may have to accept the warnings to run the program, as I can not afford a digital signature, but if you are worried, feel free to download the source code and build the program yourself! To accept the SmartScreen warning, click 'more info' at the top left, then 'run anyway'.

You may have to update to the .NET 6.0 framework if you aren't on Windows 11. However, this is a short one-time process with instructions upon launching the app. You will also need to have Wootility (from Wooting) installed.
After running the system tray app, choose one of the following viewing methods:

Option A: Website view

  • Open this link!
  • If the link above does not work, you may have to download the html and css file and open it manually,
  • Right-click on the icon and click quit once you are done.

Option B: OBS overlay

This uses a browser source.

  • Add a new Browser Source to your scene and label it.
  • Set the URL to https://djcrqss.github.io/Woot-verlay/index.html
  • I recommend setting the width to 800 and height to 600 and leaving the next two options unticked.
  • Configure your setup by right-clicking on the overlay/source and clicking 'Interact'.

If it doesn't work after some time, open this menu back up and click 'Refresh cache of current page'. Note: customisations do not transfer across browsers or from browsers to OBS as they use their own local storage. You can go into presets and copy to clipboard, then paste it into your OBS in the same place.

Using the LAN connector

To access the visuals across devices Launch the Woot-verlay client and press 'Yes' on the first popup. Go into your system tray (bottom right) and right-click on Wootverlay, it should now show your local IP. On another device, open the site and in the toolbar at the top, click on the WiFi icon and enter the IP then press connect.