• Stars
    star
    108
  • Rank 321,259 (Top 7 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created about 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Use the Nintendo Switch Joy-Cons via the WebHID API

Joy-Con WebHID

A WebHID driver for Nintendo Joy-Cons with support for all buttons, analog sticks, and the device's gyroscope and accelerometer sensors.

Demo

See the live demo of the driver.

Joy-Con WebHID demo showing two Joy-Cons slightly tilted with one of the analog sticks moved to the right on one Joy-Con and the 'A' button pressed on the other.

Another demo is Chrome Dino WebHID, where you can play the Chrome dino game 🦖 over WebHID by jumping with a Joy-Con controller in your pocket.

Joy-Con WebHID Chrome dino demo

Yet another demo courtesy of @light2peter is the Web MIDI demo, where the Joy-Cons are being used to make music on Web MIDI receivers.

Joy-Con WebHID Web MIDI

Installation

npm install --save joy-con-webhid

(For Linux, see this comment on Issue #3 for required pre-steps.)

Usage

Make sure you have a pairing button on your page.

<button class="connect" type="button">Connect Joy-Con</button>

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.

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 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.

Acknowledgements

This project takes heavy inspiration from @wazho's ns-joycon, which in turn is based on @dekuNukem's Nintendo_Switch_Reverse_Engineering. The rumble code was contributed by @baku89. The HVC-Controller code was added by @taisukef. The Ring-Con code from @mascii.

License

Apache 2.0.

More Repositories

1

SVGcode

Convert color bitmap images to color SVG vector images.
JavaScript
744
star
2

local-reverse-geocoder

Local reverse geocoder for Node.js based on GeoNames data
JavaScript
178
star
3

dark-mode-email

This repo shows how to create emails that support dark mode.
JavaScript
155
star
4

wikipedia-tools-for-google-spreadsheets

Wikipedia Tools for Google Spreadsheets — Install:
JavaScript
132
star
5

pwa-feature-detector

Progressive Web App 🕵️ Feature Detector
HTML
109
star
6

opfs-explorer

OPFS Explorer is a Chrome DevTools extension that allows you to explore the Origin Private File System (OPFS) of a web application.
JavaScript
88
star
7

fetch-in-chunks

A utility for fetching large files in chunks with support for parallel downloads and progress tracking.
JavaScript
87
star
8

esm-potrace-wasm

A modern ESM build of the Potrace library for use in the browser.
C
70
star
9

fugu-greetings

A sample app that features a lot of Project Fugu 🐡 APIs.
JavaScript
62
star
10

dark-mode-screenshot

This Puppeteer script takes a 📷 screenshot of a webpage in 🌞 Light and 🌒 Dark Mode.
JavaScript
56
star
11

wikipedia-irc

Try to spot new trends based on Wikipedia live edit spikes
JavaScript
50
star
12

Media-Fragments-URI

Media Fragments URI is a W3C specification with the objective to provide for media-format independent, standard means of addressing media fragments on the Web using Uniform Resource Identifiers (URIs).
JavaScript
43
star
13

js-input-masking

39
star
14

xywh.js

xywh.js is a JavaScript polyfill that lets you crop images and videos simply by using specific x, y, width, and height information from their URIs (see mark-up examples below).The library implements the spatial media fragments dimension of the W3C Media Fragments URI specification as a polyfill. Please refer to http://www.w3.org/TR/media-frags/#naming-space for the full details.
JavaScript
25
star
15

pageviews.js

A lightweight JavaScript client library for the Wikimedia Pageviews API for Wikipedia and various of its sister projects for Node.js and the browser.
JavaScript
24
star
16

wikipedia-live-monitor

JavaScript
19
star
17

ldf-client

Polymer Linked Data Fragments client
HTML
17
star
18

pwa-workshop

Exemplary Progressive Web App (PWA) that showcases PWA features like offline support, push notifications, and add to homescreen.
HTML
15
star
19

chrome-dino-webhid

Play chrome://dino 🦖 via WebHID using your Joy-Cons 🎮
JavaScript
13
star
20

hiit-time

HIIT time app
TypeScript
12
star
21

chrome-dino-gamepad

Play chrome://dino 🦖 with your gamepad 🎮
JavaScript
12
star
22

wasmoptim

Optimize your WebAssembly files
JavaScript
12
star
23

prompt-api-playground

This is a demo of Chrome's built-in Prompt API powered by Gemini Nano.
JavaScript
11
star
24

sqlite3-wasm-demo

JavaScript
11
star
25

babelnet_js

JavaScript wrapper for BabelNet™
JavaScript
11
star
26

link-to-media

JavaScript
11
star
27

wikipedia-around

📍 Wikipedia Around shows you Wikipedia articles that describe places, events, or points of interest that are near you.
JavaScript
10
star
28

html5-slides

HTML5 slide deck originally based on https://code.google.com/p/io-2012-slides
JavaScript
10
star
29

js-input-masking-polyfill

Polyfill for the Intl.InputMask proposal.
JavaScript
9
star
30

how-fugu-is-the-web

An extension to shine light on the Project Fugu 🐡 APIs web apps want to use.
JavaScript
9
star
31

io22-samples

HTML
8
star
32

fugu-paint

JavaScript
8
star
33

blogccasion

The new Blogccasion
HTML
7
star
34

affilicats-microsites

HTML
7
star
35

hyper-video

Polymer Hypervideo Web Component
HTML
7
star
36

isearch

I-SEARCH GUI
JavaScript
7
star
37

phd

Thomas Steiner's PhD Thesis
TeX
7
star
38

language-identifier

N-gram-based JavaScript language identification
JavaScript
7
star
39

amp-tube

A simple YouTube search engine and viewer app, implemented in AMP
7
star
40

postdoc

TeX
6
star
41

sqlite-wiki

JavaScript
6
star
42

delayedgram

Delayedgram
JavaScript
6
star
43

font-select

Custom element for picking local fonts
JavaScript
6
star
44

http-archive-progressive-web-apps

Different approaches to estimate the number of Progressive Web Apps in the HTTP Archive
5
star
45

adwords-scripts-reporting

AdWords Scripts Reporting
JavaScript
5
star
46

rest-describe-and-compile

REST Describe & Compile
Java
5
star
47

fugu-showcase

Fugu API Showcase
HTML
5
star
48

fugu-api-data

This repo contains raw data for Project Fugu 🐡 APIs.
JavaScript
4
star
49

own-window

A custom element to make sure demos run in their own window and not embedded as an iframe.
JavaScript
3
star
50

althttpd-wasm

A WebAssembly version of althttpd, a simple web server written in C.
C
3
star
51

confetti-popper

JavaScript
3
star
52

the-capable-web

TeX
3
star
53

dhbw-pwa-tutorial

DHBW PWA Tutorial
JavaScript
3
star
54

how-fugu-is-my-browser

A test app to determine what Project Fugu 🐡 APIs your browser supports.
JavaScript
3
star
55

media-server

JavaScript
3
star
56

wasm-bundling

3
star
57

apps-scripts-adwords-scripts-jshintrc-jscsrc

A JSHint configuration for use with Google Apps Script
JavaScript
3
star
58

web-directions-code

Web Directions Code conference badge
JavaScript
3
star
59

wikipedia-edits-server-sent-events

This project emits a Server-Sent Event (SSE) upon each Wikipedia edit
JavaScript
3
star
60

multimedia-algorithms

JavaScript
3
star
61

oculus-pwa-test

Oculus PWA Test
HTML
2
star
62

eswc2012

2
star
63

codetalks-pwa

code.talks Conference Demo Progressive Web App (PWA) — https://tomayac.github.io/codetalks-pwa/programm.html
HTML
2
star
64

_Private-Paper-MSM2011

Internal use only.
2
star
65

business-cards

Business Cards
JavaScript
2
star
66

whats-in-a-web-view

What is in a Web View? An Analysis of Progressive Web App Features When the Means of Web Access is not a Web Browser
TeX
2
star
67

I-SEARCH

JavaScript
2
star
68

swj-microposts

JavaScript
2
star
69

enphase-solar

JavaScript
2
star
70

api-screenshot

JavaScript
2
star
71

Breadcrumb-Navigator-Theming-Kit

Breadcrumb Navigator Theming Kit is intended for users of the Google Chrome Breadcrumb Navigator extension who want to create their own themes.
HTML
2
star
72

wakelock-thereami

JavaScript
2
star
73

fdfdsf

JavaScript
2
star
74

toward-making-opaque-web-content-more-accessible

TeX
2
star
75

wakelock-whereami

JavaScript
1
star
76

SDOW2011

1
star
77

news-pwa

News Progressive Web App
JavaScript
1
star
78

acmmm2012grandchallenge

ACMMM 2012 Grand Challenge
JavaScript
1
star
79

translation-language-detection-api-playground

HTML
1
star
80

Linked-Data-API

This project provides a very early alpha stage implementation of the W3C RDFa API
JavaScript
1
star
81

_Private-LD4WD-Chapter2-Code

Internal use only.
JavaScript
1
star
82

.well-known

1
star
83

fugu-hashtags

JavaScript
1
star
84

cross-platform-software-frameworks

1
star
85

window-placement-keyboard-lock

HTML
1
star
86

joy-con-webhid-paper

TeX
1
star
87

origin-trials

JavaScript
1
star
88

wikipedia-screensaver

Wikipedia Screensaver
JavaScript
1
star
89

adwords-reports-nodejs-lib

The project adwords-reports-nodejs-lib provides a simple AdWords reporting library for pulling ad hoc reports described in the AdWords Query Lanaguage (AWQL) directly from the AdWords API.
JavaScript
1
star
90

tomayac.github.io

HTML
1
star
91

iswc2012

PHP
1
star
92

primary-sources-tool-paper

Repository for the WWW 2016 Industry Track Paper "From Freebase to Wikidata: The Great Migration"
TeX
1
star
93

user-preference-media-features-headers

HTML
1
star