{"id":23705550,"url":"https://github.com/datkat21/controlleroverlays","last_synced_at":"2025-10-28T05:32:03.148Z","repository":{"id":212086054,"uuid":"730675986","full_name":"datkat21/ControllerOverlays","owner":"datkat21","description":"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.","archived":false,"fork":false,"pushed_at":"2024-01-19T02:49:27.000Z","size":1703,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T13:11:15.235Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ctrl.nxw.pw","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datkat21.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-12-12T12:42:45.000Z","updated_at":"2023-12-16T07:19:45.000Z","dependencies_parsed_at":"2023-12-14T07:26:15.287Z","dependency_job_id":"f44bca32-a2c0-4d82-83af-4ca3a2da1d41","html_url":"https://github.com/datkat21/ControllerOverlays","commit_stats":null,"previous_names":["datkat21/controlleroverlays"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/datkat21/ControllerOverlays","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datkat21%2FControllerOverlays","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datkat21%2FControllerOverlays/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datkat21%2FControllerOverlays/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datkat21%2FControllerOverlays/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datkat21","download_url":"https://codeload.github.com/datkat21/ControllerOverlays/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datkat21%2FControllerOverlays/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273430354,"owners_count":25104479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-30T14:46:59.246Z","updated_at":"2025-10-28T05:31:58.109Z","avatar_url":"https://github.com/datkat21.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Controller Overlays\r\n\r\nThis 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.\r\n\r\n## Setup\r\n\r\nOpen 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.\r\n\r\n## Improving\r\n\r\nThere'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.\r\n\r\n## Library\r\n\r\nThis 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.\r\n\r\n## Examples \u0026 Lookup\r\n\r\nThere are a couple built-in types and styles to configure, here are some examples:\r\n\r\n`?type=xbox\u0026style=nsp` - Uses Xbox controller as input source, and shows a nintendo switch pro controller.   \r\n`?type=gameCube\u0026style=gcn` - Uses GameCube controller as input source (only Mayflash adapter GameCube inputs are set up at the moment), and shows a GameCube controller.\r\n\r\n### Type list (host controller types)\r\n\r\n- `gameCube`: GameCube controllers using Mayflash GC Controller Adapter set to \"PC\" mode\r\n- `xbox`: Generic XInput controller support\r\n- `wcc`: Wii Classic Controller USB adaptor support (specifically the JC-W01U)\r\n- `ps4`: PlayStation 4 controller\r\n\r\n### Style list (controller styles)\r\n\r\nStyles should follow a three-character identifier for consistency.\r\n\r\n- `n64`: Nintendo 64 (Works best with `xbox` controller type)\r\n- `gcn`: GameCube (made for `gameCube` controller type)\r\n- `wcc`: Wii Classic Controller (made for `wcc` controller type)\r\n- `nsp`: Nintendo Switch Pro Controller (Works best with most controller types)\r\n- `ps4`: PS4 Controller (made for `ps4` controller type)\r\n\r\nMost controller styles should be interchangeable, albeit with a few minor differences between each different type.\r\n\r\n### Skin list (style dependent)\r\n\r\nThis 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.\r\n\r\n- `gcn`:\r\n  - `black`   \r\n  - `indigo`   \r\n  - `silver`   \r\n  - `orange`   \r\n  - `aqua`   \r\n- `n64`:\r\n  - `gray`   \r\n  - `black`   \r\n- `nsp`:\r\n  - `gray`   \r\n  - `dark`\r\n- `ps4`\r\n  - `gray`\r\n- `wcc`:\r\n  - `white`   \r\n  - `gray`   \r\n  - `black`   \r\n- `xbox`\r\n  - `xbox_one_black`\r\n\r\nYou can find skin preview images in [the changelog](CHANGELOG.md#new-skins-in-v102).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatkat21%2Fcontrolleroverlays","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatkat21%2Fcontrolleroverlays","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatkat21%2Fcontrolleroverlays/lists"}