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

mascii — Mon, 22 Oct 2018 15:15:28 +0000

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,c)=>{const d=a.activeElement,e="IFRAME"===d.tagName?d.contentDocument:a;["keydown","keyup"].forEach(a=>{e.body.dispatchEvent(new KeyboardEvent(a,{key:b,keyCode:c,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("ArrowLeft",37),!0):b[3].pressed?(c||d("ArrowRight",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);

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

Google Slides (in presentation mode)
SlideShare
Speaker Deck
Figma (in presentation mode)

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)