One-Liner which makes Joy-Con of Nintendo Switch a presentation remote control
Tags: javascript, presentation
Published: 2018-10-22 15:15:28

---
title: One-Liner which makes Joy-Con of Nintendo Switch a presentation remote control
published: true
description: If you are displaying a presentation on the browser, you can make Joy-Con a presentation remote control with One-Liner!
tags: javascript,presentation
---

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

![](https://thepracticaldev.s3.amazonaws.com/i/arjv8zikbai5am9dferz.gif)

# Environment
* macOS Catalina
* Chrome 84
* Joy-Con (L)

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

![](https://thepracticaldev.s3.amazonaws.com/i/c3nxsuvifh247ryudr4j.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/lhz9p96nbiw2souz4o08.png)

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

```javascript
((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.

![](https://thepracticaldev.s3.amazonaws.com/i/xyhe84uk6qz0o7lpyydj.png)

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](https://www.google.com/intl/ja_jp/slides/about/) (in presentation mode)
* [SlideShare](https://www.slideshare.net/)
* [Speaker Deck](https://speakerdeck.com/)
* [Figma](https://www.figma.com/) (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](https://github.com/mascii/presentation-joy-con/pull/1))
- 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](https://github.com/mascii/presentation-joy-con/pull/3))

(Added Feb. 7, 2021)

- Using the `vibrationActuator` of the Gamepad API, which is supported by some browsers such as Chrome ([Pull Request](https://github.com/mascii/presentation-joy-con/pull/6)):
  - 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.