DaisywheelJS

Docs

Setup

Setup for Daisywheel is simple and easily extendabled. It uses the UMD, meaning it supports install and usage through CommonJS, AMD, and globals. There is an npm package and the script can be found in the dist directory of the Daisywheeljs repo.

CommonJS

var Daisywheel = require('daisywheel');

AMD

define(['daisywheel'], function(Daisywheel) {
    ...
});

Global

<script src="js/lib/daisywheel.min.js"></script>

Now all that's needed is to include the daisywheel.min.css file, and to add the daisywheel CSS class to whatever input or textarea tag the tool will provide input for.

<link rel="stylesheet" type="text/css" href="css/lib/daisywheel.min.css">

...

<input class="daisywheel">

That's it! Whenever the 'focus' event for that input is fired the Daisywheel UI will automatically appear, allowing the user to enter text with their gamepad without having to switch to their keyboard.

Options and Extensions

Manually loading and unloading

Daisywheel can be manually loaded and unloaded by calling load and unload respectively on the global Daisywheel object. The load function expects a single callback parameter which will return the currently selected symbol.

//When the Daisywheel should appear
Daisywheel.load(function(symbol) {
  console.log(symbol);
});


//When the Daisywheel should close
Daisywheel.unload();

Custom symbol sets

A custom set of symbols can be sent into Daisywheel to add support for multiple languages, emojis, etc. The symbols function expects an array of objects, each with a set, an override, and a title attribute.

//Adding Japanese Katakana alphabet
Daisywheel.symbols([{
  set: ["あ", "い", "う", "え", "お", "か", "き", "く", "け", ....],
  override: true,
  title: 'Japanese (Katakana)'
}]);


//Adding Emoji support
Daisywheel.symbols([{
  set: [
    {
      symbol: '🍄'
      font: 'EmojiSymbols'
    },
    {
      symbol: '🌞'
      font: 'EmojiSymbols'
    },
  ],
  override: true,
  title: 'Emoji Symbols'
}]);

The set property is the array of symbols (a string or an object) that will be displayed. Simple symbols that only require a single character can be concatenated into a string. If the symbol is not supported by utf-8 (i.e. emojis) then the font attribute within the symbol's object should be set to the font-family of the desired font (remember to include the font file if it is not supported by default).

The override property is a boolean that determines whether the symbol set will 'override' one of the default sets or not. Note: If more than 3 symbol sets have an override property of true the defaults will not be shown at all.

The title property is required if the override property is set. It's the string that's used to label the control for its corresponding symbol set.

Troubleshooting

The Github Wiki is helpful for troubleshooting controller connectivity.