Controller and keyboard

ejg.input.on("nav", (e) => {
  // e.action: up down left right accept back x y lb rb lt rt menu view
  // e.source: "keyboard" | "gamepad"; e.repeat: while held down
  if (e.action === "back" && somethingOpen) { close(); e.preventDefault(); }
});

Keyboard: arrows, Enter/Space (accept), Esc/Backspace (back), E (x), F (y), Page Up/Page Down (lb/rb), Tab (rb). Ctrl+E (Explore) and Ctrl+J (Downloads) are handled by the host. If you do not mark a back as handled, the host uses it: it closes whatever it has open and, in Big Picture with nothing open, opens the quick menu. The controller’s Guide button always opens the host’s quick menu.

Control hints (controller or keyboard)

ejg.input.source says what was used last ("gamepad", "keyboard" or "mouse") and ejg.input.pad says which controller it is ("xbox", "playstation", "nintendo" or "generic"). The <html> element carries data-input and data-pad, and ejg.on("input", …) reports changes. The easiest way is the kit:

import { hints } from "/_sdk/kit/hints.js";
const bar = hints(document.querySelector("#hints"), [["accept", "Jugar"], ["back", "Atrás"], ["y", "Favorito"]]);
bar.set([["accept", "Instalar"]]);   // change the texts when you need to

With a PlayStation controller you see ✕ ○ △ □. With an Xbox one, A B X Y in their colors. With a keyboard, Enter, Esc, E and F. It updates itself. CSS trick: html[data-input="mouse"] .hints { display: none; }.

Manifest

SDK

Kit and practices

Controller and keyboard

Control hints (controller or keyboard)

​Control hints (controller or keyboard)

Control hints (controller or keyboard)