DEV Community

loading...

One-Liner which makes Joy-Con of Nintendo Switch a presentation remote control

mascii
Updated on ・2 min read

If you are displaying a presentation on the browser, you can make Joy-Con a presentation remote control with One-Liner!

Environment

  • macOS Catalina
  • Chrome 84
  • Joy-Con (L)

Preparation

Connect Joy-Con (L) with the standard function of macOS.

Push and hold the button in the arrow part to enter the pairing mode.

One-Liner which makes Joy-Con of Nintendo Switch a presentation remote

Paste the following script into Console of Developer Tools (command + option + I on Mac) and execute with Enter.

((a,b,c)=>{const d=b=>{const c=a.activeElement,d="IFRAME"===c.tagName?c.contentDocument:a;["keydown","keyup"].forEach(a=>{d.body.dispatchEvent(new KeyboardEvent(a,{keyCode:b,bubbles:!0}))})},e=({vibrationActuator:a},b,c)=>a?a.playEffect(a.type,{startDelay:b,duration:c,strongMagnitude:.8}):Promise.resolve();let f,g;if(c("gamepadconnected",({gamepad:a})=>{if(null!=f||!a.id.includes("57e")||!a.id.includes("2006"))return;f=a.index;let c=!1;g=setInterval(()=>{c=(a=>{const b=a.buttons;return b[0].pressed?(c||d(37),!0):b[3].pressed?(c||d(39),!0):!!b[16].pressed&&(c||e(a,0,10),!0)})(b.getGamepads()[f])},1e3/60);const h=()=>e(a,300,5);h().then(h).then(h)}),c("gamepaddisconnected",a=>{f===a.gamepad.index&&(clearInterval(g),f=g=null)}),b.wakeLock){const c=d=>{"visible"!==a.visibilityState||b.wakeLock.request("screen").then(()=>{d&&(a.addEventListener("visibilitychange",c),a.addEventListener("fullscreenchange",c))}).catch(()=>{})};c(!0)}})(document,navigator,addEventListener);
Enter fullscreen mode Exit fullscreen mode

You can change the slide with the button shown in the image.

The controller vibrates a little when the screenshot capture button is pressed (for testing communication confirmation, only on supported browsers such as Chrome).

Supported sites

I confirmed that it can be used on the corresponding site below

Code

Here is the code before compression:
https://github.com/mascii/presentation-joy-con
To run git clone, npm ci, npm run minify, you can make the One-Liner. If there are improvement points, please send me Pull Request!

(Added Jul. 24, 2020)

  • Screen Wake Lock API is now available in Chrome 84, so we've made a request to not turn off the display in supported browsers. (Pull Request)
  • Fixed an issue where an error occurred when trying to move a slide on Speaker Deck when an element other than the slide is active. (Pull Request)

(Added Feb. 7, 2021)

  • Using the vibrationActuator of the Gamepad API, which is supported by some browsers such as Chrome (Pull Request):
    • When the controller is connected (when the gamepadconnected event fires), the controller vibrates three times in small increments.
    • The controller vibrates a little when the screenshot capture button is pressed.

Discussion (0)