https://github.com/datkat21/controlleroverlays

A basic JavaScript app to display a controller overlay SVG image and control it with your controller. Intended to be used with OBS and other software.
https://github.com/datkat21/controlleroverlays

Last synced: 7 days ago
JSON representation

A basic JavaScript app to display a controller overlay SVG image and control it with your controller. Intended to be used with OBS and other software.

• Host: GitHub
• URL: https://github.com/datkat21/controlleroverlays
• Owner: datkat21
• License: gpl-3.0
• Created: 2023-12-12T12:42:45.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-01-19T02:49:27.000Z (12 months ago)
• Last Synced: 2024-04-28T06:06:50.888Z (8 months ago)
• Language: JavaScript
• Homepage: https://ctrl.nxw.pw
• Size: 1.62 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Controller Overlays

This is a basic HTML app to display a controller overlay SVG image and control it with your controller. Intended to be used with OBS and other software.

## Setup

Open the [website](https://ctrl.nxw.pw/) in your browser to perform the initial setup. Once complete, you can test the controller there and paste the link into an OBS browser source for example.

## Improving

There's probably a much better way of importing SVGs than placing them inside of divs like that, but I was trying to take the easy route to make this quickly. It's pretty modular so you can add your own buttons and overlays if you know some web development skills.

## Library

This now uses [gamepad.js](https://github.com/Tom32i/gamepad.js) instead of [Controller.js](https://github.com/samiare/Controller.js) and [gamecontrol.js](https://github.com/alvaromontoro/gamecontroller.js) as I needed exact gamepad inputs which I couldn't figure out with the other libraries.

## Examples & Lookup

There are a couple built-in types and styles to configure, here are some examples:

`?type=xbox&style=nsp` - Uses Xbox controller as input source, and shows a nintendo switch pro controller.   

`?type=gameCube&style=gcn` - Uses GameCube controller as input source (only Mayflash adapter GameCube inputs are set up at the moment), and shows a GameCube controller.

### Type list (host controller types)

- `gameCube`: GameCube controllers using Mayflash GC Controller Adapter set to "PC" mode

- `xbox`: Generic XInput controller support

- `wcc`: Wii Classic Controller USB adaptor support (specifically the JC-W01U)

- `ps4`: PlayStation 4 controller

### Style list (controller styles)

Styles should follow a three-character identifier for consistency.

- `n64`: Nintendo 64 (Works best with `xbox` controller type)

- `gcn`: GameCube (made for `gameCube` controller type)

- `wcc`: Wii Classic Controller (made for `wcc` controller type)

- `nsp`: Nintendo Switch Pro Controller (Works best with most controller types)

- `ps4`: PS4 Controller (made for `ps4` controller type)

Most controller styles should be interchangeable, albeit with a few minor differences between each different type.

### Skin list (style dependent)

This allows extra configuration (e.g. color), and is dependent on the style that is used. This uses query parameter `skin`. This can also be done with the new configuration menu.

- `gcn`:

  - `black`   

  - `indigo`   

  - `silver`   

  - `orange`   

  - `aqua`   

- `n64`:

  - `gray`   

  - `black`   

- `nsp`:

  - `gray`   

  - `dark`

- `ps4`

  - `gray`

- `wcc`:

  - `white`   

  - `gray`   

  - `black`   

- `xbox`

  - `xbox_one_black`

You can find skin preview images in [the changelog](CHANGELOG.md#new-skins-in-v102).