{"id":20824309,"url":"https://github.com/asmr-hex/hands-js","last_synced_at":"2025-12-11T20:41:30.513Z","repository":{"id":43145831,"uuid":"64041417","full_name":"asmr-hex/hands-js","owner":"asmr-hex","description":"simple gamepad API for browser","archived":false,"fork":false,"pushed_at":"2016-10-01T03:11:47.000Z","size":86,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-21T20:24:47.720Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asmr-hex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-24T00:18:55.000Z","updated_at":"2016-07-24T01:13:29.000Z","dependencies_parsed_at":"2022-08-25T02:40:15.550Z","dependency_job_id":null,"html_url":"https://github.com/asmr-hex/hands-js","commit_stats":null,"previous_names":["connorwalsh/hands-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/asmr-hex/hands-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asmr-hex%2Fhands-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asmr-hex%2Fhands-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asmr-hex%2Fhands-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asmr-hex%2Fhands-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asmr-hex","download_url":"https://codeload.github.com/asmr-hex/hands-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asmr-hex%2Fhands-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27669632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-11T02:00:11.302Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T22:21:48.474Z","updated_at":"2025-12-11T20:41:30.492Z","avatar_url":"https://github.com/asmr-hex.png","language":"JavaScript","readme":"# Hands\n[![Build Status](https://travis-ci.org/connorwalsh/hands-js.svg?branch=master)](https://travis-ci.org/connorwalsh/hands-js)\n\n\nsimple gamepad API for browser.\n\n## Install\n```shell\n$ npm install --save hands\n```\n## Usage\n\n**importing and instantiation:**\n```javascript\n\t// -- ES6 --\n\timport {Hands} from 'hands'\n\n\tlet hands = new Hands()\n\n\n\t// -- ES5 -- \n\tvar Hands = require(\"hands\");\n\n\t// get all connected controllers\n\tvar hands = new Hands();\n```\n\n**basic:**\n```javascript\n\t// For basic usage, first welcome and register all\n\t// connected controllers. Then simply update each\n\t// controller and read values of buttons and axes.\n\n\t// welcome and register initially connected controllers\n\thands.welcome()\n\n\t// main animation loop\n\tfunction update() {\n\t\n\t\t// update hands\n\t\thands.update()\n\n\t\t// read values\n\t\tfor (let hand of hands) {\n\t\t\tconsole.log(hand.value(\"input-name\")\n\t\t}\n\t\t\n\t\twindow.requestAnimationFrame(update);\n\t}\n\t\t\n\twindow.requestAnimationFrame(update);\n```\n\n**setting reaction handlers on value updates**\n```javascript\n\n\t// initialize array of values we would like to control\n\tvar X = []\n\n\t// register reaction handlers for each connected controller\n\thands.forEach(function(hand, i) {\n\t\t// add entry for each connected controller\n\t\tX.push(0.0)\n\t\t\n\t\t// set reaction handler for an input\n\t\thand.setReaction(\"input-name\", function(value) {\n\t\t\t// change value of array entry to value of input\n\t\t\tX[i] = value;\n\t\t});\n\t});\n\n\t// main animation loop\n\tfunction update() {\n\t\t// update all connected controllers and call\n\t\t// all attached reaction handlers\n\t\thands.update();\n\t\t// \n\t\n\t\t// continue updating\n\t\twindow.requestAnimationFrame(update);\n\t}\n\n\t// begin updating\n\twindow.requestAnimationFrame(update);\n```\n\n**attaching an onConnection/onDisconnection callback to a new controller connection:**\n```javascript\n\n\t// initialize an empty map of objects\n\tvar A = {}\n\n\t// set onConnection callback\n\thands.onConnection(function(hand) {\n\t\t// populate a new entry to the map on connection\n\t\tA[hand.id] = {somde: \"data\"}\n\t}).onDisconnection(function(hand) {\n\t\t// remove entry from map on disconnection\n\t\tA.delete(hand.id)\n\t});\n```\n\n## Documentation\n#####Hands Class:\nThe `Hands` class is a collection of connected/registered controllers and\nprovides high level methods for operating over all controllers.\n```javascript\n\tclass Hands {\n\t\t// discover and register connected controllers\n\t\twelcome() {...}\n\n\t\t// query registered controllers and update state.\n\t\tupdate() {...}\n\t\t\n\t\t// register a custom handler for connections.\n\t\t//\n\t\t// the provided handler takes the newly connected Hand\n\t\t// instance as its only argument.\n\t\tonConnect((hand) =\u003e {...}) {...}\n\n\t\t// register a custom handler for disconnections.\n\t\t//\n\t\t// this provided handler takes the newly disconnected\n\t\t// Hand instance as its only argument.\n\t\tonDisconnect((hand) =\u003e {...}) {...}\n\t}\n```\n\nAdditionally, it is possible to iterate over an instance of the class to\naccess individual controllers.\n```javascript\n\tlet hands = new Hands()\n\t\n\tfor (let hand of hands) {\n\t\t// hand is an instance of class 'Hand'\n\t}\n```\n\n#####Hand Class:\nThe `Hand` class is a high level representation of a controller which\nencompasses percept state and provides methods for which to respond to\nthese percepts.\n```javascript\n\tclass Hand {\n\t\t// given a gamepad, update internal percept state\n\t\tupdate(gamepad) {...}\n\t\t\n\t\t// set a reaction handler for a particular percept.\n\t\t//\n\t\t// this method takes the input name, a handler function\n\t\t// which takes the value of the input, and optionally\n\t\t// a condition evaluator function which takes this hand\n\t\t// instance and returns a boolean. \n\t\tsetReaction(\"input-name\", v =\u003e {...}, [this =\u003e {...}])\n\t\t\n\t\t// clear all reactions from a particular percept.\n\t\tclearReactions(\"input-name\")\n\t\t\n\t\t// rename an input.\n\t\t//\n\t\t// this method renames an input which can be used\n\t\t// programmatically. Input values can be accessed\n\t\t// by their names directly from the hand instance.\n\t\t// For example, given a percept named \"talk\",\n\t\t// developers can access the values of \"talk\" from\n\t\t// a hand instance with hand.talk.\n\t\trenamePercept(\"oldInputName\", \"newInputName\")\n\t}\n```\n\n### Notes\nSince this library relies on the experimental [GamePad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API),\nit is only supported by a subset of modern browsers (Chrome \u003e35.0, Firefox \u003e29.0, Opera \u003e22.0). Please check the\n[Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Browser_compatibility) for more details. \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasmr-hex%2Fhands-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasmr-hex%2Fhands-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasmr-hex%2Fhands-js/lists"}