o_hidstatusmap_module

a small handy javascript object which represents the current state of some human interface devices (hid's), for now it's the mouse and keyboard

usage / demo

import o_hidstatusmap from "./o_hidstatusmap_module.js"

var o_object = document.createElement("div")
o_object.style.position = "absolute"
o_object.style.zIndex = 10;
o_object.style.width = "20px";
o_object.style.height = "20px";
o_object.style.background = "rgba(11,23,5, 0.8)";
o_object.style.border = "2px solid red";
o_object.style.borderRadius = "30%"

document.body.appendChild(o_object)

o_object.n_x_normalized = 0.5
o_object.n_y_normalized = 0.5
console.log("wasd to move, mouse left / right, to control speed")
var f_render = function(){
    var n_speed = o_hidstatusmap.o_mouse.n_x_normalized  * 0.02


    if(o_hidstatusmap.o_keyboard["w"]){
        o_object.n_y_normalized -=n_speed
    }
    if(o_hidstatusmap.o_keyboard["s"]){
        o_object.n_y_normalized +=n_speed
    }
    if(o_hidstatusmap.o_keyboard["a"]){
        o_object.n_x_normalized -=n_speed
    }
    if(o_hidstatusmap.o_keyboard["d"]){
        o_object.n_x_normalized +=n_speed
    }
    console.log(o_object.mouse)
    
    o_object.style.left = ((o_object.n_x_normalized * window.innerWidth) % window.innerWidth) + "px"
    o_object.style.top = ((o_object.n_y_normalized * window.innerHeight) % window.innerHeight) + "px"
    // console.log(o_hidstatusmap.o_mouse.n_x)
    requestAnimationFrame(f_render)
}
f_render()

future

the library can be extended to contain the state of all sort of human input devices (hid's) such as DualSense, PS4 controller, midi keyboards, etc...

list of keys

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

table of keys

| Key Name | event.which | event.key | event.code | Notes | | --- | --- | --- | --- | --- | | backspace | 8 | Backspace | Backspace | | | tab | 9 | Tab | Tab | | | enter | 13 | Enter | Enter | | | shift(left) | 16 | Shift | ShiftLeft | event.shiftKey is true | | shift(right) | 16 | Shift | ShiftRight | event.shiftKey is true | | ctrl(left) | 17 | Control | ControlLeft | event.ctrlKey is true | | ctrl(right) | 17 | Control | ControlRight | event.ctrlKey is true | | alt(left) | 18 | Alt | AltLeft | event.altKey is true | | alt(right) | 18 | Alt | AltRight | event.altKey is true | | pause/break | 19 | Pause | Pause | | | caps lock | 20 | CapsLock | CapsLock | | | escape | 27 | Escape | Escape | | | space | 32 | | Space | The event.key value is a single space. | | page up | 33 | PageUp | PageUp | | | page down | 34 | PageDown | PageDown | | | end | 35 | End | End | | | home | 36 | Home | Home | | | left arrow | 37 | ArrowLeft | ArrowLeft | | | up arrow | 38 | ArrowUp | ArrowUp | | | right arrow | 39 | ArrowRight | ArrowRight | | | down arrow | 40 | ArrowDown | ArrowDown | | | print screen | 44 | PrintScreen | PrintScreen | | | insert | 45 | Insert | Insert | | | delete | 46 | Delete | Delete | | | 0 | 48 | 0 | Digit0 | | | 1 | 49 | 1 | Digit1 | | | 2 | 50 | 2 | Digit2 | | | 3 | 51 | 3 | Digit3 | | | 4 | 52 | 4 | Digit4 | | | 5 | 53 | 5 | Digit5 | | | 6 | 54 | 6 | Digit6 | | | 7 | 55 | 7 | Digit7 | | | 8 | 56 | 8 | Digit8 | | | 9 | 57 | 9 | Digit9 | | | a | 65 | a | KeyA | | | b | 66 | b | KeyB | | | c | 67 | c | KeyC | | | d | 68 | d | KeyD | | | e | 69 | e | KeyE | | | f | 70 | f | KeyF | | | g | 71 | g | KeyG | | | h | 72 | h | KeyH | | | i | 73 | i | KeyI | | | j | 74 | j | KeyJ | | | k | 75 | k | KeyK | | | l | 76 | l | KeyL | | | m | 77 | m | KeyM | | | n | 78 | n | KeyN | | | o | 79 | o | KeyO | | | p | 80 | p | KeyP | | | q | 81 | q | KeyQ | | | r | 82 | r | KeyR | | | s | 83 | s | KeyS | | | t | 84 | t | KeyT | | | u | 85 | u | KeyU | | | v | 86 | v | KeyV | | | w | 87 | w | KeyW | | | x | 88 | x | KeyX | | | y | 89 | y | KeyY | | | z | 90 | z | KeyZ | | | left window key | 91 | Meta | MetaLeft | event.metaKey is true | | right window key | 92 | Meta | MetaRight | event.metaKey is true | | select key (Context Menu) | 93 | ContextMenu | ContextMenu | | | numpad 0 | 96 | 0 | Numpad0 | | | numpad 1 | 97 | 1 | Numpad1 | | | numpad 2 | 98 | 2 | Numpad2 | | | numpad 3 | 99 | 3 | Numpad3 | | | numpad 4 | 100 | 4 | Numpad4 | | | numpad 5 | 101 | 5 | Numpad5 | | | numpad 6 | 102 | 6 | Numpad6 | | | numpad 7 | 103 | 7 | Numpad7 | | | numpad 8 | 104 | 8 | Numpad8 | | | numpad 9 | 105 | 9 | Numpad9 | | | multiply | 106 | * | NumpadMultiply | | | add | 107 | + | NumpadAdd | | | subtract | 109 | - | NumpadSubtract | | | decimal point | 110 | . | NumpadDecimal | | | divide | 111 | / | NumpadDivide | | | f1 | 112 | F1 | F1 | | | f2 | 113 | F2 | F2 | | | f3 | 114 | F3 | F3 | | | f4 | 115 | F4 | F4 | | | f5 | 116 | F5 | F5 | | | f6 | 117 | F6 | F6 | | | f7 | 118 | F7 | F7 | | | f8 | 119 | F8 | F8 | | | f9 | 120 | F9 | F9 | | | f10 | 121 | F10 | F10 | | | f11 | 122 | F11 | F11 | | | f12 | 123 | F12 | F12 | | | num lock | 144 | NumLock | NumLock | | | scroll lock | 145 | ScrollLock | ScrollLock | | | audio volume mute | 173 | AudioVolumeMute | | ⚠️ The event.which value is 181 in Firefox. Also FF provides the code value as, VolumeMute | | audio volume down | 174 | AudioVolumeDown | | ⚠️ The event.which value is 182 in Firefox. Also FF provides the code value as, VolumeDown | | audio volume up | 175 | AudioVolumeUp | | ⚠️ The event.which value is 183 in Firefox. Also FF provides the code value as, VolumeUp | | media player | 181 | LaunchMediaPlayer | | ⚠️ The ️event.which value is 0(no value) in Firefox. Also FF provides the code value as, MediaSelect | | launch application 1 | 182 | LaunchApplication1 | | ⚠️ The ️event.which value is 0(no value) in Firefox. Also FF provides the code value as, LaunchApp1 | | launch application 2 | 183 | LaunchApplication2 | | ⚠️ The ️event.which value is 0(no value) in Firefox. Also FF provides the code value as, LaunchApp2 | | semi-colon | 186 | ; | Semicolon | ⚠️ The event.which value is 59 in Firefox | | equal sign | 187 | = | Equal | ⚠️ The event.which value is 61 in Firefox | | comma | 188 | , | Comma | | | dash | 189 | - | Minus | ⚠️ The event.which value is 173 in Firefox | | period | 190 | . | Period | | | forward slash | 191 | / | Slash | | | Backquote/Grave accent | 192 | ` | Backquote | | | open bracket | 219 | [ | BracketLeft | | | back slash | 220 | \ | Backslash | | | close bracket | 221 | ] | BracketRight | | | single quote | 222 | ' | Quote | |