Generate a browser source (to use via OBS or any other tool) displaying an overlay of your HOTAS controller in real time.
Download the latest version and open index.html. This should display a webpage like the one shown in the screenshot.
In OBS add a New source > Browser and enter the provided OBS URL in the bottom of the page (to show the page with a transparente background and without the info window at the bottom). This should be something like file:///your-folder/controller-overlay/index.html?config=megadrive&display=1
First version is just a PoC (Proof of Concept) where the shown controls are what I find interesting to show for Elite Dangerous, and the bindings are the ones I use with my X-56, so every value is harcoded.
Later on, I added some other configs as shown in the top of this document
The html will show the Elite one by default, but adding ?config=megadrive should show any other available one (and now it can be chosen with a select input if display=1 is not added).
This project plans to support combinations of inputs and displays:
| Digital button | 1-axis | 2-axis | |
|---|---|---|---|
| CSS digital button | ✔ | ✔ | ✖ |
| CSS analog button | △ | △ | ✖ |
| CSS X-axis | ✔ | ✔ | ✖ |
| CSS Y-axis | ✔ | ✔ | ✖ |
| CSS XY-axis | ✔ | ✖ | ✔ |
| Image digital button | ✔ | ✔ | ✔ |
| Image analog button | ✖ | △ | ✖ |
| Image X-axis | ✔ | ✔ | ✖ |
| Image Y-axis | ✔ | ✔ | ✖ |
| Image XY-axis | ✔ | ✖ | ✔ |
✔ = done | △ = planned | ✖ = not gonna happen
First, clone the repository and install the dependencies:
npm install
Then, just build it:
npm build
Building will generate the required files in the app folder, the index.html file is the one to use.
- Added support for input keys as buttons
- Added a configuration for the Arcade 4+2 stick design using the keyboard .
- Added support for rendering axes using images
- Added a configuration for the Neo Geo mini controller with the Arcade 4+2 stick design.
- Added a configuration for the Xbox 360 controller pad.
- Added support for logic configuration (
AND,OR,NOT) - i.e: to show an image when 2 buttons are pressed at the same time (diagonals), etc. - Added a configuration for the Buffalo controller with the Arcade 4+4 stick design.
- Added styles. Can import extra css files by the
stylequery param or field in the configuration.
- Added a configuration for the Mega Drive mini 6B controller using the 3B design.
- Added a configuration for the Buffalo controller with the Japanese Super Nintendo overlay.
- Added a configuration for the Buffalo controller with the American Super Nintendo overlay.
- Added a configuration for the Mega Drive mini 6B controller using the NES.
- Added a configuration for the Mega Drive mini 6B controller using the Famicon.
- Added a configuration for the Mega Drive mini 6B controller using the Master System.
- Added a variation in red for the configuration of the Mega Drive mini 6B controller using the Master System.
- Added a dropdown list to select the configuration without having to edit the URL param
- Allow to fully customize the layout from a config file. Config file is still hardcoded tho, but it's a big step.
- Added a configuration for the Mega Drive mini 6B controller.
- Added support for:
- Digital buttons with images
- 1-axis shown as a digital button with CSS
- 1-axis shown as a digital button with images
First version. PoC to test the creation of a browser source in OBS.
It supports:
- Digital buttons with CSS
- 1-axis with CSS
- 2-axis with CSS
- Digital buttons shown as 1-axis with CSS
- Digital buttons shown as 2-axis with CSS