Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomayac/joy-con-webhid
Use the Nintendo Switch Joy-Cons via the WebHID API
https://github.com/tomayac/joy-con-webhid
hid joy-con joy-cons joycon joycons webhid
Last synced: about 1 month ago
JSON representation
Use the Nintendo Switch Joy-Cons via the WebHID API
- Host: GitHub
- URL: https://github.com/tomayac/joy-con-webhid
- Owner: tomayac
- License: apache-2.0
- Created: 2020-11-06T09:33:42.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-23T08:25:41.000Z (about 1 year ago)
- Last Synced: 2024-07-06T17:44:18.754Z (2 months ago)
- Topics: hid, joy-con, joy-cons, joycon, joycons, webhid
- Language: JavaScript
- Homepage: https://tomayac.github.io/joy-con-webhid/demo/
- Size: 203 KB
- Stars: 123
- Watchers: 6
- Forks: 19
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-webhid - tomayac/joy-con-webhid - using Nintendo Joy-Cons. (Libraries / Candidates)
README
# Joy-Con WebHID
A [WebHID](https://web.dev/hid) driver for
[Nintendo Joy-Cons](https://en.wikipedia.org/wiki/Joy-Con) with support for all buttons, analog
sticks, and the device's gyroscope and accelerometer sensors.
## Demo
See the [live demo](https://tomayac.github.io/joy-con-webhid/demo/) of the driver.
Another demo is [Chrome Dino WebHID](https://github.com/tomayac/chrome-dino-webhid), where you
can play the Chrome dino game 🦖 over WebHID by jumping with a Joy-Con controller in your pocket.
[](https://www.youtube.com/watch?v=HuhQXXgDnCQ)
Yet another demo courtesy of [@light2peter](https://github.com/light2peter) is the [Web MIDI demo](https://tomayac.github.io/joy-con-webhid/demo/webmidi.html), where the Joy-Cons are being used to make music on Web MIDI receivers.
[](https://youtu.be/tMTnkjwSFNM?t=42)
## Installation
```bash
npm install --save joy-con-webhid
```
(For **Linux**, see this [comment on Issue #3](https://github.com/tomayac/joy-con-webhid/issues/3#issuecomment-944427792)
for required pre-steps.)
## Usage
Make sure you have a pairing button on your page.
```html
Connect Joy-Con
```
Import the script and hook up the pairing button.
Then create an interval that waits for Joy-Cons to appear,
which can happen after pairing, on page load when previously paired Joy-Cons are reconnected,
and when Joy-Cons wake up again after being idle.
```js
import * as JoyCon from './node_modules/dist/index.js';
// For the initial pairing of the Joy-Cons. They need to be paired one by one.
// Once paired, Joy-Cons will be reconnected to on future page loads.
document.querySelector('.connect').addEventListener('click', async () => {
// `JoyCon.connectJoyCon()` handles the initial HID pairing.
// It keeps track of connected Joy-Cons in the `JoyCon.connectedJoyCons` Map.
await JoyCon.connectJoyCon();
});
// Joy-Cons may sleep until touched and fall asleep again if idle, so attach
// the listener dynamically, but only once.
setInterval(async () => {
for (const joyCon of JoyCon.connectedJoyCons.values()) {
if (joyCon.eventListenerAttached) {
continue;
}
// Open the device and enable standard full mode and inertial measurement
// unit mode, so the Joy-Con activates the gyroscope and accelerometers.
await joyCon.open();
await joyCon.enableStandardFullMode();
await joyCon.enableIMUMode();
await joyCon.enableVibration();
// Get information about the connected Joy-Con.
console.log(await joyCon.getDeviceInfo());
// Rumble.
await joyCon.rumble(600, 600, 0.5);
// Listen for HID input reports.
joyCon.addEventListener('hidinput', ({ detail }) => {
// Careful, this fires at ~60fps.
console.log(`Input report from ${joyCon.device.productName}:`, detail);
});
joyCon.eventListenerAttached = true;
}
}, 2000);
```
## Why not use the Gamepad API?
The [Gamepad API](https://w3c.github.io/gamepad/)
supports Joy-Con controllers out-of-the-box,
but since the API (currently) does not have a concept of orientation,
the Joy-Cons' accelerometer and gyroscope data cannot be accessed.
The buttons and analog sticks are fully exposed, though.
If all you need is this, then by all means
[go for the Gamepad API](https://web.dev/gamepad/).
## Acknowledgements
This project takes heavy inspiration from [@wazho](https://github.com/wazho)'s
[ns-joycon](https://github.com/wazho/ns-joycon),
which in turn is based on [@dekuNukem](https://github.com/dekuNukem)'s
[Nintendo_Switch_Reverse_Engineering](https://github.com/dekuNukem/Nintendo_Switch_Reverse_Engineering).
The rumble code was contributed by
[@baku89](https://github.com/baku89).
The [HVC-Controller](https://twitter.com/taisukef/status/1572349705828569092) code was added by [@taisukef](https://github.com/taisukef).
The [Ring-Con](https://en.wikipedia.org/wiki/Ring_Fit_Adventure) code from [@mascii](https://github.com/mascii/demo-of-ring-con-with-web-hid).
## License
Apache 2.0.