reveal-gamepad-controller-plugin
A Reveal.js plugin allowing to control slides with gamepad. Allowing custom mappings
How to
Install
npm install reveal-gamepad-controller-plugin --saveInclude in your reveal slides
You can use this module directly using this code, but these are my own mapping needs. See belw to create your own mappings, or you can contribute and add it directly to the module
<script type="module">
import RevealGamepadController from "./node_modules/reveal-gamepad-controller-plugin/dist/index.js";
Reveal.initialize({
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealGamepadController(Reveal)],
});
</script>This is available inside an ESModule, so you probably should use an <script type="module"> tag.
Configuration
You can customize the duration between 2 loops of gamepad action detection, using loopTime option, and the mapping to use using mapping option.
<script type="module">
import RevealGamepadController from "./node_modules/reveal-gamepad-controller-plugin/dist/index.js";
const gamepadPlugin = RevealGamepadController(Reveal);
Reveal.initialize({
hash: true,
gamepadController: {
loopTime: 1000, // For 1s
mapping: gamepadPlugin.MAPPINGS['SN30_8bitDo'] // using specific Mapping
}
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, gamepadPlugin],
});
</script>Deactivate plugin on speaker notes
If you use speaker notes, command will probably be given multiple times at once. To avoid that, I suggest deactivating the plugin on speaker page:
const urlParams = new URLSearchParams(window.location.search);
const receiver = urlParams.get('receiver');
const pluginOnlyOnMain = receiver !== null ? [] : [RevealGamepadController(Reveal)];
Reveal.initialize({
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, ...pluginOnlyOnMain ],
});Custom Mapping
Giving custom mapping in options
You can define your own mapping by just giving an object as mapping:
<script type="module">
import RevealGamepadController from "./node_modules/reveal-gamepad-controller-plugin/dist/index.js";
const gamepadPlugin = RevealGamepadController(Reveal);
Reveal.initialize({
hash: true,
gamepadController: {
loopTime: 1000, // For 1s
mapping: {
buttons: [
{name: 'A', idx: 0, action: REVEAL_ACTIONS.NEXT},
{name: 'B', idx: 1, action: REVEAL_ACTIONS.DOWN},
{name: 'X', idx: 3, action: REVEAL_ACTIONS.UP},
{name: 'Y', idx: 4, action: REVEAL_ACTIONS.PREV},
{name: 'L1', idx: 6, action: REVEAL_ACTIONS.PREV},
{name: 'L2', idx: 7, action: REVEAL_ACTIONS.NEXT},
{name: 'R1', idx: 8, action: REVEAL_ACTIONS.PREV},
{name: 'R2', idx: 9, action: REVEAL_ACTIONS.NEXT},
{name: 'Select', idx: 10, action: REVEAL_ACTIONS.OVERVIEW},
{name: 'Start', idx: 11, action: REVEAL_ACTIONS.PAUSE},
{name: 'Special', idx: 12, action: REVEAL_ACTIONS.NONE},
{name: 'L3', idx: 13, action: REVEAL_ACTIONS.NONE},
{name: 'R3', idx: 14, action: REVEAL_ACTIONS.NONE},
],
cross: [
{
name: 'Cross', idx: 9, actions: [
{name: 'nothing', value: 3.3, action: REVEAL_ACTIONS.NONE},
{name: 'down', value: 0.1428, action: REVEAL_ACTIONS.DOWN},
{name: 'up', value: -1, action: REVEAL_ACTIONS.UP},
{name: 'left', value: 0.71, action: REVEAL_ACTIONS.PREV},
{name: 'right', value: -0.428, action: REVEAL_ACTIONS.NEXT}
]
}
],
analog: [
{
name: 'Left Analog',
xIdx: 1,
yIdx: 0,
deadZone: 0.01,
action: REVEAL_ACTIONS.MOVE_SPOTLIGHT({multiplier: 30})
},
{
name: 'Right Analog',
xIdx: 5,
yIdx: 2,
deadZone: 0.01,
action: REVEAL_ACTIONS.MOVE_SPOTLIGHT({multiplier: 30})
}
]
}
}
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, gamepadPlugin],
});
</script>Define your own mapping
You can define the complete mapping by loading this plugin and trying to press buttons. Check the console and you'll be able to identify which button is what idx etc.
- For
Button:- names are here for logging purposes
- idx is the index of the button to scan in the
gamepad.buttons - action is the action that will be triggered on "keydown". It's a
() => void.
- For
Cross:- names are here for logging purposes
- idx is the index of the axis to scan in the
gamepad.axes - actions is an array of trigger options: at each loop, the cross emit the action which value is the closest to the axis value. They are
() => void. - Don't forget to have an action doing nothing in rest position of your pad.
- For
Analog:- names are here for logging purposes
- xIdx and yIdx are the indexes of the axis to scan in the
gamepad.axes - deadZone allows not to trigger if values are below a certain amount
- action is a
(x: number, y: number) => void.
Once done, please send me your mapping and precise pad model so that i can add it to the library for future users !
Actions
I defined several actions in plugin.REVEAL_ACTIONS.
Their names are normally self-explanatory, but feel free to take a look at the code if needed.
These are just a simple () => void function or (x: number, y: number) => void function (for analog ones).
You can easily define your own.