Selkies
Developer ReferenceDashboardComponents

components/GamepadVisualizer

SVG picture of one gamepad's live state for the sidebar's gamepads section.

Functions

GamepadVisualizer()

function GamepadVisualizer(props): Element;

Defined in: components/GamepadVisualizer.jsx:33

Draws a standard-layout pad (Xbox naming) with pressed buttons, trigger pressure and stick deflection taken from the core's gamepad state. Button indices: 0 to 3 face (A, B, X, Y), 4 and 5 bumpers, 6 and 7 triggers, 8 Back, 9 Start, 10 and 11 stick clicks, 12 to 15 D-pad; axes 0 and 1 are the left stick, 2 and 3 the right.

Parameters

ParameterTypeDescription
props{ gamepadState: { buttons?: { }; axes?: { }; }; gamepadIndex: number; }-
props.gamepadState{ buttons?: { }; axes?: { }; }Standard-layout button values and axis positions; null until the pad has reported.
props.gamepadState.buttons?{ }-
props.gamepadState.axes?{ }-
props.gamepadIndexnumberPad slot, used in the title and element ids.

Returns

Element


getButtonClass()

function getButtonClass(index): 
  | ""
  | "gp-vis-dpad-pressed"
  | "gp-vis-bumper-pressed"
  | "gp-vis-button-pressed";

Defined in: components/GamepadVisualizer.jsx:42

Pressed-state class for a button: D-pad (12 to 15), bumpers (4, 5), or any other.

Parameters

ParameterType
indexany

Returns

| "" | "gp-vis-dpad-pressed" | "gp-vis-bumper-pressed" | "gp-vis-button-pressed"


getTriggerStyle()

function getTriggerStyle(index): 
  | {
  opacity?: undefined;
}
  | {
  opacity: number;
};

Defined in: components/GamepadVisualizer.jsx:53

Opacity of a trigger (6, 7) rising with its pressure.

Parameters

ParameterType
indexany

Returns

| { opacity?: undefined; } | { opacity: number; }


getStickTransform()

function getStickTransform(xAxisIndex, yAxisIndex): string;

Defined in: components/GamepadVisualizer.jsx:60

CSS transform moving a stick top by its two axes.

Parameters

ParameterType
xAxisIndexany
yAxisIndexany

Returns

string

References

default

Renames and re-exports GamepadVisualizer

On this page

Edit on GitHub