{"id":17018211,"url":"https://github.com/zlatnaspirala/multi-touch-canvas-handler","last_synced_at":"2025-04-12T10:10:05.615Z","repository":{"id":8759667,"uuid":"10441766","full_name":"zlatnaspirala/multi-touch-canvas-handler","owner":"zlatnaspirala","description":"Easy catch mutli touchs with addEventListener. You can get at any time x or y position for 10 fingers in canvas 2d surface or any other DOM element. I implement button - detect when you finger get in rectangle for canvas presentation only.","archived":false,"fork":false,"pushed_at":"2024-12-14T18:15:22.000Z","size":28,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T10:09:55.172Z","etag":null,"topics":["10-finger-detect","ecma5","ecma6","finger-touch-detect","multi-touch-events","multitouch","multitouch-api","npm"],"latest_commit_sha":null,"homepage":"https://maximumroulette.com","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/zlatnaspirala.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":"2013-06-02T20:30:24.000Z","updated_at":"2024-12-14T18:21:58.000Z","dependencies_parsed_at":"2022-08-26T10:20:34.426Z","dependency_job_id":null,"html_url":"https://github.com/zlatnaspirala/multi-touch-canvas-handler","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/zlatnaspirala%2Fmulti-touch-canvas-handler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fmulti-touch-canvas-handler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fmulti-touch-canvas-handler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fmulti-touch-canvas-handler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zlatnaspirala","download_url":"https://codeload.github.com/zlatnaspirala/multi-touch-canvas-handler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248550634,"owners_count":21122933,"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":["10-finger-detect","ecma5","ecma6","finger-touch-detect","multi-touch-events","multitouch","multitouch-api","npm"],"created_at":"2024-10-14T06:44:55.503Z","updated_at":"2025-04-12T10:10:05.588Z","avatar_url":"https://github.com/zlatnaspirala.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multi-touch-canvas-handler `Version 2.0.2`\n\nHello visitors , this is small script but very interest.\n\n- Get touch coordinates , start/end event etc for 10 fingers.\n- If you move all finger's no problem, script will handle all.\n- You can get at any time x or y position for ten fingers in canvas 2d surface.\n- I implement HUB button - detect when you finger get in rectangle .\n\nNote:\n\n- If you wanna implement it with your own canvas then you no need for `visualPresentation`\n\nHere is example for simple div :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"myDiv\" style=\"background-color:cadetblue;width: 500px;height: 500px;\"\u003e\n      \u003cdiv id=\"results\" style=\"background-color: brown; width: 500px;height: 50px;\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n  \u003cscript type=\"module\" src=\"multi-touch.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"module\" src=\"demo-div.js\"\u003e\u003c/script\u003e\n\u003c/html\u003e\n```\n\n```js\nimport {MultiTouchHandler} from './multi-touch.js';\n/* Use on any DOM element example */\nwindow.onload = () =\u003e {\n  /* Create instance */\n  window.mTouchHandler = new MultiTouchHandler();\n  var myDiv = document.getElementById('myDiv');\n  var myResults = document.getElementById('results');\n  window.mTouchHandler.attachEvents(myDiv);\n\n  window.mTouchHandler.SHIT = true;\n\n  function showResults(e) {\n    console.log('Type:' + e.type);\n    myResults.innerText = `Type: ${e.type} X: ${e.detail.x} Y: ${e.detail.y}`;\n  }\n\n  function showResults2(e) {\n    console.log('Type:' + e.type);\n    myResults.innerText = `Last position : X: ${e.detail.lastPosition.x} Y: ${e.detail.lastPosition.y}`;\n  }\n\n  addEventListener('multi.touch.finger.1', function (e) {\n    showResults(e);\n  });\n\n  addEventListener('multi.touch.finger.2', function (e) {\n    showResults(e);\n  });\n\n  // ...\n  addEventListener('multi.touch.finger.10', function (e) {\n    showResults(e);\n  });\n\n  addEventListener('multi.touch.moving.finger.1', function (e) {\n    showResults(e);\n  });\n\n  addEventListener('multi.touch.moving.finger.2', function (e) {\n    showResults(e);\n  });\n\n  addEventListener('multi.touch.cancel', function (e) {\n    console.log('multi.touch.cancel', e.detail);\n    showResults2(e);\n  });\n\n  addEventListener('multi.touch.end', function (e) {\n    console.log('multi.touch.end', e.detail);\n    showResults2(e);\n  });\n};\n```\n\n## ECMA5 Solution:\n\n```js\nvar mTouchHandler = new MultiTouchHandler();\n\nmTouchHandler.APP.BODY.ADD_2DCANVAS('canvas_2', mTouchHandler.SCREEN.W, mTouchHandler.SCREEN.H);\nmTouchHandler.APP.BODY.SET_STYLE('margin: 0;padding:0;border:none;');\nmTouchHandler.attachEvents();\nvisualPresentation(mTouchHandler);\n```\n\n###\n\n## ECMA6 Solution:\n\n```js\nimport {MultiTouchHandler, visualPresentation} from './multi-touch';\n\nwindow.onload = () =\u003e {\n  /* Create instance */\n  var mTouchHandler = new MultiTouchHandler();\n  var canvas = mTouchHandler.APP.BODY.ADD_2DCANVAS('canvas_2', window.innerWidth, window.innerHeight);\n  mTouchHandler.APP.BODY.SET_STYLE('margin: 0;padding:0;border:none;');\n  mTouchHandler.attachEvents(canvas);\n\n  visualPresentation(mTouchHandler);\n};\n```\n\n### Fancy way to catch event listener :\n\n```javascript\n/**\n * @description Create instance in ECMA5 style\n */\n\nvar mTouchHandler = new MultiTouchHandler();\n\nmTouchHandler.APP.BODY.ADD_2DCANVAS('canvas_2', mTouchHandler.SCREEN.W, mTouchHandler.SCREEN.H);\nmTouchHandler.APP.BODY.SET_STYLE('margin: 0;padding:0;border:none;');\n\nmTouchHandler.attachEvents();\n\naddEventListener('multi.touch.finger.0', function (e) {\n  console.log('TOUCH FIRST FINGER');\n});\n\naddEventListener('multi.touch.finger.2', function (e) {\n  console.log('TOUCH FINGER INDEX 2');\n});\n\naddEventListener('multi.touch.moving.finger.0', function (e) {\n  console.log('TOUCH MOVE FIRST FINGER');\n});\n\naddEventListener('multi.touch.cancel', function (e) {\n  console.log('multi.touch.cancel');\n});\n\naddEventListener('multi.touch.end', function (e) {\n  console.log('multi.touch.end');\n});\nvisualPresentation(mTouchHandler);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzlatnaspirala%2Fmulti-touch-canvas-handler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzlatnaspirala%2Fmulti-touch-canvas-handler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzlatnaspirala%2Fmulti-touch-canvas-handler/lists"}