Hubble is an input viewer for Windows, MacOS, and Linux (probably).
Download Hubble from the releases page and open it. You will be prompted to select a folder, this folder should contain a layout.css and layout.json file. If you wish to work from an example, there are examples in the Example Layouts folder.
Layouts are stored in a layout.json file and layout.css file. The JSON has two properties, warnUnknown and keys.
// layout.json
{
"warnUnknown"?: boolean,
"controller"?: boolean,
"keys": {
"label": string,
"keys": string or string[],
"posX": number,
"posY": number,
"classes": string
}[]
}Defaults to true. When keys unknown to the program are encountered, show a popup.
Set this if you wish the input display to poll controllers. Supported Controllers:
- Switch Pro using HID & Bluetooth
- Switch Pro (and possibly other controllers, I don't own any to check) using SteamInput
The inner text of the given key.
The key or key that must be pressed to mark this key as pressed.
There are 4 types of key:
- Mouse Wheel events, prefixed by
mw - Mouse Button events, prefixed by
ms - Keyboard events, prefixed by
kb - Controller events, prefixed by
cb
Mouse Wheel Events
| Key Code | Explanation |
|---|---|
| mw_Up | |
| mw_Down | |
| mw_Left | Scrolling left (only supported by some mice) |
| mw_Right | Scrolling right (only supported by some mice) |
| mw_Unknown | Unknown wheel event |
Mouse Events
| Key Code | Explanation |
|---|---|
| ms_Left | |
| ms_Middle | |
| ms_Right | |
ms_Unknown(x) |
Unknown click event (x is a u8) |
Keyboard Events
| Key Code | Explanation |
|---|---|
| kb_Alt | Alt on Linux and Windows, Option on MacOS |
| kb_AltGr | |
| kb_Backspace | |
| kb_CapsLock | |
| kb_ControlLeft | |
| kb_ControlRight | |
| kb_Delete | |
| kb_DownArrow | |
| kb_End | |
| kb_Escape | |
| kb_F1 | |
| kb_F2 | |
| kb_F3 | |
| kb_F4 | |
| kb_F5 | |
| kb_F6 | |
| kb_F7 | |
| kb_F8 | |
| kb_F9 | |
| kb_F10 | |
| kb_F11 | |
| kb_F12 | |
| kb_Home | |
| kb_LeftArrow | |
| kb_MetaLeft | "Windows", "Super" or "Command" Left |
| kb_MetaRight | "Windows", "Super" or "Command" Right |
| kb_PageDown | |
| kb_PageUp | |
| kb_Return | |
| kb_RightArrow | |
| kb_ShiftLeft | |
| kb_ShiftRight | |
| kb_Space | |
| kb_Tab | |
| kb_UpArrow | |
| kb_PrintScreen | |
| kb_ScrollLock | |
| kb_Pause | |
| kb_NumLock | |
| kb_BackQuote | |
| kb_Num1 | |
| kb_Num2 | |
| kb_Num3 | |
| kb_Num4 | |
| kb_Num5 | |
| kb_Num6 | |
| kb_Num7 | |
| kb_Num8 | |
| kb_Num9 | |
| kb_Num0 | |
| kb_Minus | |
| kb_Equal | |
| kb_KeyQ | |
| kb_KeyW | |
| kb_KeyE | |
| kb_KeyR | |
| kb_KeyT | |
| kb_KeyY | |
| kb_KeyU | |
| kb_KeyI | |
| kb_KeyO | |
| kb_KeyP | |
| kb_LeftBracket | |
| kb_RightBracket | |
| kb_KeyA | |
| kb_KeyS | |
| kb_KeyD | |
| kb_KeyF | |
| kb_KeyG | |
| kb_KeyH | |
| kb_KeyJ | |
| kb_KeyK | |
| kb_KeyL | |
| kb_SemiColon | |
| kb_Quote | |
| kb_BackSlash | |
| kb_IntlBackslash | |
| kb_KeyZ | |
| kb_KeyX | |
| kb_KeyC | |
| kb_KeyV | |
| kb_KeyB | |
| kb_KeyN | |
| kb_KeyM | |
| kb_Comma | |
| kb_Dot | |
| kb_Slash | |
| kb_Insert | |
| kb_KpReturn | |
| kb_KpMinus | |
| kb_KpPlus | |
| kb_KpMultiply | |
| kb_KpDivide | |
| kb_Kp0 | |
| kb_Kp1 | |
| kb_Kp2 | |
| kb_Kp3 | |
| kb_Kp4 | |
| kb_Kp5 | |
| kb_Kp6 | |
| kb_Kp7 | |
| kb_Kp8 | |
| kb_Kp9 | |
| kb_KpDelete | |
| kb_Function | |
kb_Unknown(x) |
Unknown keyboard event (x is a u32) |
Controller Events
| Key Code | Explanation |
|---|---|
| cb_north | X on Switch, △ on Playstation, Y on Xbox |
| cb_south | B on Switch, X on Playstation, A on Xbox |
| cb_east | A on Switch, O on Playstation, B on Xbox |
| cb_west | A on Switch, ■ on Playstation, X on Xbox |
| cb_r_trigger | ZR on Switch, R2 on Playstation, RT on Xbox |
| cb_l_trigger | ZL on Switch, L2 on Playstation, LT on Xbox |
| cb_r_bumper | R on Switch, R1 on Playstation, RB on Xbox |
| cb_l_bumper | L on Switch, L1 on Playstation, LB on Xbox |
| cb_l_stick_click | |
| cb_r_stick_click | |
| cb_dpad_north | |
| cb_dpad_south | |
| cb_dpad_west | |
| cb_dpad_east | |
| cb_face_top_left | Minus on Switch, Share on Playstation, View on Xbox |
| cb_face_bottom_left | Screenshot on Switch, Screenshot on Playstation, Share on Xbox |
| cb_face_top_right | Plus on Switch, Touchpad Click on Playstation, Xbox Button on Xbox |
| cb_face_bottom_right | Home on Switch, Options on Playstation, Menu on Xbox |
| unknown(x) | Unknown controller event (x is a uint) |
The location of this key on the screen
A list of CSS classes applied to this key, seperated by a space. The CSS classes are defined in the layout.css file.
Additionally, each key is given a .pressed class when the key is pressed.
Currently, the only supported controller is the Nintendo Switch Pro Controller. Set the "controller" key to "switch_pro" in layout.json to enable controller polling.
Due to control sticks being analog, they are seperately handled. Any key can access the custom properties --l-stick-x, --l-stick-y, --r-stick-x, and --r-stick-y. These values are all floats ranging from -1 to 1 (the exact maximum and minimum magnitude is almost always lower, as it depends on the exact hardware and configuration. I've found values typically won't surpass 0.75 / -0.75, but your mileage may vary). -1, -1 is at the top left. On most control sticks sqrt(x * x + y * y) will not exceed sqrt(2).
The .global class can be used to style the div which wraps around all keys (for example, setting the background colour).
If you wish to use any external files in the styling, those files must either be uploaded to the internet, or converted to use the data URI scheme.
If you wish for an element that is not a key, for additional styling, you can pass an empty array to keys, or only pass classes that do not style .pressed.
The default styles for a key are as follows:
.key {
position: absolute;
display: flex;
margin: 0;
left: var(--pos-x, 0);
top: var(--pos-y, 0);
}There are no additional default styles for a pressed key.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent