{"id":18251639,"url":"https://github.com/32teeth/cordova-plugin-canvas-gamepad","last_synced_at":"2025-04-04T16:32:30.853Z","repository":{"id":57207955,"uuid":"47855211","full_name":"32teeth/cordova-plugin-canvas-gamepad","owner":"32teeth","description":null,"archived":false,"fork":false,"pushed_at":"2017-05-02T20:22:03.000Z","size":722,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-11T10:05:17.768Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/32teeth.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":"2015-12-11T22:58:43.000Z","updated_at":"2017-04-26T00:40:56.000Z","dependencies_parsed_at":"2022-09-17T12:01:49.458Z","dependency_job_id":null,"html_url":"https://github.com/32teeth/cordova-plugin-canvas-gamepad","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/32teeth%2Fcordova-plugin-canvas-gamepad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/32teeth%2Fcordova-plugin-canvas-gamepad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/32teeth%2Fcordova-plugin-canvas-gamepad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/32teeth%2Fcordova-plugin-canvas-gamepad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/32teeth","download_url":"https://codeload.github.com/32teeth/cordova-plugin-canvas-gamepad/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223150788,"owners_count":17095956,"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","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-05T09:48:07.098Z","updated_at":"2024-11-05T09:48:15.771Z","avatar_url":"https://github.com/32teeth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/dw/cordova-plugin-canvas-gamepad.svg?style=flat-square)]()\n[![npm](https://img.shields.io/npm/dm/cordova-plugin-canvas-gamepad.svg?style=flat-square)]()\n[![npm](https://img.shields.io/npm/dy/cordova-plugin-canvas-gamepad.svg?style=flat-square)]()\n[![npm](https://img.shields.io/npm/dt/cordova-plugin-canvas-gamepad.svg?style=flat-square)]()\n\n# CDVGamepad\n\nSo you want to add a gamepad to a html5/canvas based app in [cordova](http://cordova.apache.org/)\n\n***npm i cordova-plugin-canvas-gamepad***\n\n## Cordova\n### The Basics\n---\n\ninstall cordova\n\n```\n[sudo] npm install -g cordova\n```\n\nnavigate to the directory where you want to create your app\n\n```\ncd [directory]\n```\n\ncreate an app\n\n```\ncordova create [app-directory] [reverse domain-style identifier] [application display name] \u0026\u0026 cd [app-directory]\n```\n\nadd CDVGamepad plugin\n\n```\ncordova plugin add cordova-plugin-canvas-gamepad\n```\n\niOS9 long press fix (optional)\n\n*this prevents the copy/select bubble from coming up in games where the user needs to press and hold)*\n\n```\ncordova plugin add cordova-plugin-ios-longpress-fix\n```\n\nAdd some platforms\n\n```\ncordova platform add ios\ncordova platform add android\ncordova platform add amazon-fireos\ncordova platform add blackberry10\ncordova platform add firefoxos\n```\n\nPrepare your platforms\n\n```\nprepare platform add ios\nprepare platform add android\nprepare platform add amazon-fireos\nprepare platform add blackberry10\nprepare platform add firefoxos\n```\n\n### CDVGamepad setup and configurations\n---\nin you cordova index.js add *CDVGamepad.setup()*\n\n```\n/*\n** this is a basic joystick and 1 button setup with start and select buttons\n*/\nonDeviceReady: function() {\n\tCDVGamepad.setup();\n}\n```\n## Configuration options\n\n*CDVGamepad is fully customizable, from button names, colors, layout and more.*\n\n| property | type | value(s) | description | example |\n|---:|:---|:---|:---|:---|\n|debug|boolean|true\\|false|show or hide event debug info\u003cbr\u003e*default is false*|```debug:false```|\n|trace|boolean|true\\|false|show or hide gamepad trace info\u003cbr\u003e*default is false*|```trace:false```|\n|canvas|string|id of target canvas|*if left out, creates a new canvas object*|```canvas:\"game\"```|\n|buttons|array|[]|collection of button objects|```[{name:\"x\",color:\"rgba(255,255,0,0.5)\"}]```|\n|button|object|{name:string,color:hex\\|rgb\\|rgba}|properties for custom buttons|```[{name:\"x\",color:\"rgba(255,255,0,0.5)\"},{name:\"y\",color:\"rgba(255,0,255,0.5)\"}]```|\n|layout|string|TOP_LEFT \\| TOP_RIGHT \\| BOTTOM_LEFT \\| BOTTOM_RIGHT|cardinal position of buttons\u003cbr\u003e*default is **BOTTOM_RIGHT***|```layout:\"BOTTOM_RIGHT\"```|\n|start|boolean|true\\|false|display start button\u003cbr\u003e*default is true*|```start:false```|\n|select|boolean|true\\|false|display select button\u003cbr\u003e*default is false*||```select:false```|\n|joystick|boolean|true\\|false|display joystick/dpad\u003cbr\u003e*default is false*|```debug:false```|\n|hidden|boolean|true\\|false|show or hide the gamepad\u003cbr\u003e*default is false*|\u003cbr\u003ethis can be used to *hide* the gamepad if you are doing something else on screen|```hidden:false```|\n\n### Config examples\n###### *default options*\n\n![default options](https://raw.githubusercontent.com/32teeth/cordova-plugin-gamepad/master/images/CDVGamepad-1.png)\n\n```\nCDVGamepad.setup();\n```\n\n###### *one button, custom name, no start button*\n\n![default options](https://raw.githubusercontent.com/32teeth/cordova-plugin-gamepad/master/images/CDVGamepad-2.png)\n\n```\nCDVGamepad.setup({\n\tstart:false,\n\tbuttons:[\n\t\t{name:\"jump\"}\n\t]\n});\n```\n\n###### *two buttons, custom names, custom colors, with select button*\n\n![default options](https://raw.githubusercontent.com/32teeth/cordova-plugin-gamepad/master/images/CDVGamepad-3.png)\n\n```\nCDVGamepad.setup({\n\tselect:true,\n\tbuttons:[\n\t\t{name:\"x\",color:\"rgba(255,255,0,0.5)\"},\n\t\t{name:\"y\",color:\"rgba(0,255,255,0.75)\"}\n\t]\n});\n```\n\n###### *target canvas*\n\n![default options](https://raw.githubusercontent.com/32teeth/cordova-plugin-gamepad/master/images/CDVGamepad-4.png)\n\n```\nCDVGamepad.setup({\n\tcanvas:\"game\"\n});\n```\n\n###### *change layout canvas*\n\n![default options](https://raw.githubusercontent.com/32teeth/cordova-plugin-gamepad/master/images/CDVGamepad-5.png)\n\n```\nCDVGamepad.setup({\n\tlayout:\"BOTTOM_LEFT\"\n});\n```\n\n###### *show trace \u0026 debug info*\n\n\n![default options](https://raw.githubusercontent.com/32teeth/cordova-plugin-gamepad/master/images/CDVGamepad-6.png)\n\n```\nCDVGamepad.setup({\n\ttrace:true,\n\tdebug:true\n});\n```\n\n###### *all out everything*\n\n\n![default options](https://raw.githubusercontent.com/32teeth/cordova-plugin-gamepad/master/images/CDVGamepad-7.png)\n\n```\nCDVGamepad.setup({\n\tselect:true,\n\ttrace:true,\n\tdebug:true,\n\tcanvas:\"game\",\n\tbuttons:[\n\t\t{name:\"z\", color:\"#17861c\"},\n\t\t{name:\"y\", color:\"rgb(134, 83, 23)\"},\n\t\t{name:\"x\", color:\"rgba(204, 0, 51, 0.5)\"},\t\t\n\t]\n});\n```\n\n###### *hidden gamepad*\n\n![default options](https://raw.githubusercontent.com/32teeth/cordova-plugin-gamepad/master/images/CDVGamepad-8.png)\n\n```\nCDVGamepad.setup({\n\thidden:true\n});\n```\n\n###### *real world example*\n\n![default options](https://raw.githubusercontent.com/32teeth/cordova-plugin-gamepad/master/images/CDVGamepad-9.png)\n\n```\nonDeviceReady: function() {\n\t\t/*\n\t\t** @description start the game\n\t\t*/\n    game.init();\n\t\t/*\n\t\t** @description setup gamepad, no stick, no start, one button\n\t\t*/    \n    CDVGamepad.setup({\n    \tcanvas:\"controller\",\n    \tjoystick:false,\n    \tstart:false, \n    \tbuttons:[\n    \t\t{name:\"jump\", color:\"rgba(0,0,0,0.25)\"}\n    \t]\n    });    \n}\n```\n\n### CDVGamepad observable method\n---\nCDVGamepad has an observable method that returns the current state map of the gamepad\n\n**observe();**\n\n```\nCDVGamepad.setup()\n/*\n** @description the below example simply logs out the observe method return\n*/\nsetInterval(\n\tfunction()\n\t{\n\t\tvar map = CDVGamepad.observe();\n\t\tconsole.log(new Date() + \":\" + JSON.stringify(map))\n\t}\n\t,1000\n);\n```\n\n\n```\n/*\n** @description additionally, you can throw it into your main loop in canvas\n*/\nfunction draw()\n{\n\tif(CDVGamepad)\n\t{\n\t\tgamepad(CDVGamepad.observe())\n\t}\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F32teeth%2Fcordova-plugin-canvas-gamepad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F32teeth%2Fcordova-plugin-canvas-gamepad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F32teeth%2Fcordova-plugin-canvas-gamepad/lists"}