{"id":20426502,"url":"https://github.com/danikaze/controller-overlay","last_synced_at":"2025-04-12T19:08:03.775Z","repository":{"id":42029798,"uuid":"281051945","full_name":"danikaze/controller-overlay","owner":"danikaze","description":"Display an overlay to show your controller(s) input","archived":false,"fork":false,"pushed_at":"2023-03-14T15:48:42.000Z","size":531,"stargazers_count":21,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T19:08:00.658Z","etag":null,"topics":["gamepad","games","hacktoberfest","obs-studio","overlay","streaming","streamlabs","twitch","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danikaze.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-07-20T07:55:23.000Z","updated_at":"2025-01-01T14:07:22.000Z","dependencies_parsed_at":"2025-04-12T19:08:02.872Z","dependency_job_id":null,"html_url":"https://github.com/danikaze/controller-overlay","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danikaze%2Fcontroller-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danikaze%2Fcontroller-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danikaze%2Fcontroller-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danikaze%2Fcontroller-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danikaze","download_url":"https://codeload.github.com/danikaze/controller-overlay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618277,"owners_count":21134200,"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","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":["gamepad","games","hacktoberfest","obs-studio","overlay","streaming","streamlabs","twitch","typescript"],"created_at":"2024-11-15T07:16:43.143Z","updated_at":"2025-04-12T19:08:03.741Z","avatar_url":"https://github.com/danikaze.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# controller-overlay\n\nGenerate a browser source (to use via [OBS](https://obsproject.com/) or any other tool) displaying an overlay of your HOTAS controller in real time.\n\n[`config=elite`](src/configs/elite.ts)\n\n![Preview screenshot][elite-screenshot]\n\n[`config=megadrive6`](src/configs/megadrive6.ts)\n\n![Preview screenshot][megadrive6-screenshot]\n\n[`config=megadrive3`](src/configs/megadrive3.ts)\n\n![Preview screenshot][megadrive3-screenshot]\n\n[`config=sufami`](src/configs/sufami.ts)\n\n![Preview screenshot][sufami-screenshot]\n\n[`config=snes`](src/configs/snes.ts)\n\n![Preview screenshot][snes-screenshot]\n\n[`config=nes`](src/configs/nes.ts)\n\n![Preview screenshot][nes-screenshot]\n\n[`config=famicon`](src/configs/famicon.ts)\n\n![Preview screenshot][famicon-screenshot]\n\n[`config=mastersystem`](src/configs/mastersystem.ts)\n\n![Preview screenshot][mastersystem-screenshot]\n\n[`config=mastersystemred`](src/configs/mastersystem-red.ts)\n\n![Preview screenshot][mastersystemred-screenshot]\n\n[`config=arcade8snes`](src/configs/arcade8-snes.ts)\n\n![Preview screenshot][arcade8-screenshot]\n\n[`config=arcade6neogeo`](src/configs/arcade6-neogeo.ts)\n\n![Preview screenshot][arcade6-screenshot]\n\n[`config=xbox360`](src/configs/xbox360.ts)\n\n![Preview screenshot][xbox360-screenshot]\n\n[`config=gba`](src/configs/gba.ts)\n\n![Preview screenshot][gba-screenshot]\n\n## How to use it\n\nDownload the [latest version](https://github.com/danikaze/controller-overlay/releases/latest) and open `index.html`. This should display a webpage like the one shown in the screenshot.\n\nIn `OBS` add a `New source \u003e 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\u0026display=1`\n\n## How to customize it\n\nFirst 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.\n\nLater on, I added some other configs as shown in the top of this document\n\nThe 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).\n\n## Support\n\nThis project plans to support combinations of inputs and displays:\n\n|                      | Digital button | 1-axis | 2-axis |\n| -------------------- | -------------- | ------ | ------ |\n| CSS digital button   | ✔              | ✔      | ✖      |\n| CSS analog button    | △              | △      | ✖      |\n| CSS X-axis           | ✔              | ✔      | ✖      |\n| CSS Y-axis           | ✔              | ✔      | ✖      |\n| CSS XY-axis          | ✔              | ✖      | ✔      |\n| Image digital button | ✔              | ✔      | ✔      |\n| Image analog button  | ✖              | △      | ✖      |\n| Image X-axis         | ✔              | ✔      | ✖      |\n| Image Y-axis         | ✔              | ✔      | ✖      |\n| Image XY-axis        | ✔              | ✖      | ✔      |\n\n✔ = done | △ = planned | ✖ = not gonna happen\n\n## Rebuilding\n\nFirst, clone the repository and install the dependencies:\n\n```\nnpm install\n```\n\nThen, just build it:\n\n```\nnpm build\n```\n\nBuilding will generate the required files in the `app` folder, the `index.html` file is the one to use.\n\n## Changelog\n\n### 0.7.0\n\n- Added support for input keys as buttons\n- Added a [configuration](src/configs/gba.ts) for the [Arcade 4+2 stick design](./img/gba-0.7.0.gif) using the keyboard .\n\n### 0.6.0\n\n- Added support for rendering axes using images\n- Added a [configuration](src/configs/arcade6-neogeo.ts) for the Neo Geo mini controller with the [Arcade 4+2 stick design](./img/arcade6-0.6.0.gif).\n- Added a [configuration](src/configs/xbox360.ts) for the [Xbox 360 controller pad](img/xbox360-0.6.0.gif).\n\n### 0.5.0\n\n- 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.\n- Added a [configuration](src/configs/arcade8-snes.ts) for the Buffalo controller with the [Arcade 4+4 stick design](img/arcade8-0.5.0.gif).\n\n### 0.4.0\n\n- Added styles. Can import extra css files by the `style` query param or field in the configuration.\n\n### 0.3.0\n\n- Added a [configuration](src/configs/megadrive3.ts) for the Mega Drive mini 6B controller using the [3B design](img/megadrive3-0.3.0.gif).\n- Added a [configuration](src/configs/sufami.ts) for the Buffalo controller with the [Japanese Super Nintendo overlay](img/sufami-0.3.0.gif).\n- Added a [configuration](src/configs/snes.ts) for the Buffalo controller with the [American Super Nintendo overlay](img/snes-0.3.0.gif).\n- Added a [configuration](src/configs/nes.ts) for the Mega Drive mini 6B controller using the [NES](img/nes-0.3.0.gif).\n- Added a [configuration](src/configs/famicon.ts) for the Mega Drive mini 6B controller using the [Famicon](img/famicon-0.3.0.gif).\n- Added a [configuration](src/configs/mastersystem.ts) for the Mega Drive mini 6B controller using the [Master System](img/mastersystem-0.3.0.gif).\n- Added a variation in red for the [configuration](src/configs/mastersystem-red.ts) of the Mega Drive mini 6B controller using the [Master System](img/mastersystemred-0.3.0.gif).\n- Added a dropdown list to select the configuration without having to edit the URL param\n\n### 0.2.0\n\n- Allow to fully customize the layout from a [config file](src/configs/elite.ts).\n  Config file is still hardcoded tho, but it's a big step.\n- Added a [configuration](src/configs/megadrive6.ts) for the Mega Drive mini 6B controller.\n- Added support for:\n  - Digital buttons with images\n  - 1-axis shown as a digital button with CSS\n  - 1-axis shown as a digital button with images\n\n### 0.1.0\n\nFirst version. PoC to test the creation of a browser source in OBS.\n\nIt supports:\n\n- Digital buttons with CSS\n- 1-axis with CSS\n- 2-axis with CSS\n- Digital buttons shown as 1-axis with CSS\n- Digital buttons shown as 2-axis with CSS\n\n[elite-screenshot]: ./img/elite-0.2.0.gif 'HOTAS overlay preview'\n[megadrive6-screenshot]: ./img/megadrive6-0.2.0.gif 'Mega Drive 6B overlay preview'\n[megadrive3-screenshot]: ./img/megadrive3-0.3.0.gif 'Mega Drive 3B overlay preview'\n[sufami-screenshot]: ./img/sufami-0.3.0.gif 'Sufami overlay preview'\n[snes-screenshot]: ./img/snes-0.3.0.gif 'Sufami overlay preview'\n[nes-screenshot]: ./img/nes-0.3.0.gif 'NES overlay preview'\n[famicon-screenshot]: ./img/famicon-0.3.0.gif 'Famicon overlay preview'\n[mastersystem-screenshot]: ./img/mastersystem-0.3.0.gif 'Master System overlay preview'\n[mastersystemred-screenshot]: ./img/mastersystemred-0.3.0.gif 'Master System overlay preview (red variation)'\n[arcade8-screenshot]: ./img/arcade8-0.5.0.gif '4-4 buttons Arcade Stick overlay preview'\n[arcade6-screenshot]: ./img/arcade6-0.6.0.gif '4-2 buttons Arcade Stick overlay preview'\n[xbox360-screenshot]: ./img/xbox360-0.6.0.gif 'Xbox360 overlay preview'\n[gba-screenshot]: ./img/gba-0.7.0.gif 'Game Boy Advance overlay preview'\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanikaze%2Fcontroller-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanikaze%2Fcontroller-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanikaze%2Fcontroller-overlay/lists"}