From a5a3827fc70eeaa2e2305df05fd3adb13cc63cc4 Mon Sep 17 00:00:00 2001 From: finchiedev Date: Sat, 17 Nov 2018 16:52:56 +0800 Subject: [PATCH] Add mobile compatability --- App/Mobile/package-lock.json | 377 ++++++++++++++++++++++++ App/Mobile/package.json | 24 ++ App/Mobile/server.js | 4 +- App/Mobile/virtualjoystick.js | 419 +++++++++++++++++++++++++++ App/Mobile/ws.html | 521 +++++++++++++++++++++++++++++++++- App/Mobile/ws.js | 13 +- 6 files changed, 1343 insertions(+), 15 deletions(-) create mode 100644 App/Mobile/package-lock.json create mode 100644 App/Mobile/package.json mode change 100755 => 100644 App/Mobile/server.js create mode 100644 App/Mobile/virtualjoystick.js mode change 100755 => 100644 App/Mobile/ws.html mode change 100755 => 100644 App/Mobile/ws.js diff --git a/App/Mobile/package-lock.json b/App/Mobile/package-lock.json new file mode 100644 index 0000000..dfc8a53 --- /dev/null +++ b/App/Mobile/package-lock.json @@ -0,0 +1,377 @@ +{ + "name": "nodejs-websocket-example", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "accepts": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.4.tgz", + "integrity": "sha1-hiRnWMfdbSGmR0/whKR0DsBesh8=", + "requires": { + "mime-types": "2.1.17", + "negotiator": "0.6.1" + } + }, + "array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" + }, + "async-limiter": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz", + "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==" + }, + "body-parser": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", + "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", + "requires": { + "bytes": "3.0.0", + "content-type": "1.0.4", + "debug": "2.6.9", + "depd": "1.1.1", + "http-errors": "1.6.2", + "iconv-lite": "0.4.19", + "on-finished": "2.3.0", + "qs": "6.5.1", + "raw-body": "2.3.2", + "type-is": "1.6.15" + } + }, + "bytes": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", + "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" + }, + "content-disposition": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", + "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" + }, + "content-type": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" + }, + "cookie": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", + "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" + }, + "cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" + }, + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "depd": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", + "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" + }, + "destroy": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" + }, + "ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" + }, + "encodeurl": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.1.tgz", + "integrity": "sha1-eePVhlU0aQn+bw9Fpd5oEDspTSA=" + }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" + }, + "etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" + }, + "express": { + "version": "4.16.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.16.2.tgz", + "integrity": "sha1-41xt/i1kt9ygpc1PIXgb4ymeB2w=", + "requires": { + "accepts": "1.3.4", + "array-flatten": "1.1.1", + "body-parser": "1.18.2", + "content-disposition": "0.5.2", + "content-type": "1.0.4", + "cookie": "0.3.1", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "1.1.1", + "encodeurl": "1.0.1", + "escape-html": "1.0.3", + "etag": "1.8.1", + "finalhandler": "1.1.0", + "fresh": "0.5.2", + "merge-descriptors": "1.0.1", + "methods": "1.1.2", + "on-finished": "2.3.0", + "parseurl": "1.3.2", + "path-to-regexp": "0.1.7", + "proxy-addr": "2.0.2", + "qs": "6.5.1", + "range-parser": "1.2.0", + "safe-buffer": "5.1.1", + "send": "0.16.1", + "serve-static": "1.13.1", + "setprototypeof": "1.1.0", + "statuses": "1.3.1", + "type-is": "1.6.15", + "utils-merge": "1.0.1", + "vary": "1.1.2" + } + }, + "finalhandler": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz", + "integrity": "sha1-zgtoVbRYU+eRsvzGgARtiCU91/U=", + "requires": { + "debug": "2.6.9", + "encodeurl": "1.0.1", + "escape-html": "1.0.3", + "on-finished": "2.3.0", + "parseurl": "1.3.2", + "statuses": "1.3.1", + "unpipe": "1.0.0" + } + }, + "forwarded": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", + "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" + }, + "fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" + }, + "http-errors": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", + "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", + "requires": { + "depd": "1.1.1", + "inherits": "2.0.3", + "setprototypeof": "1.0.3", + "statuses": "1.3.1" + }, + "dependencies": { + "setprototypeof": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", + "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" + } + } + }, + "iconv-lite": { + "version": "0.4.19", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", + "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" + }, + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + }, + "ipaddr.js": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.5.2.tgz", + "integrity": "sha1-1LUFvemUaYfM8PxY2QEP+WB+P6A=" + }, + "media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" + }, + "merge-descriptors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", + "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" + }, + "methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" + }, + "mime": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", + "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" + }, + "mime-db": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.30.0.tgz", + "integrity": "sha1-dMZD2i3Z1qRTmZY0ZbJtXKfXHwE=" + }, + "mime-types": { + "version": "2.1.17", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.17.tgz", + "integrity": "sha1-Cdejk/A+mVp5+K+Fe3Cp4KsWVXo=", + "requires": { + "mime-db": "1.30.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "negotiator": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", + "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" + }, + "on-finished": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", + "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", + "requires": { + "ee-first": "1.1.1" + } + }, + "parseurl": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", + "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" + }, + "path-to-regexp": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", + "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" + }, + "proxy-addr": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.2.tgz", + "integrity": "sha1-ZXFQT0e7mI7IGAJT+F3X4UlSvew=", + "requires": { + "forwarded": "0.1.2", + "ipaddr.js": "1.5.2" + } + }, + "qs": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", + "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" + }, + "range-parser": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", + "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" + }, + "raw-body": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", + "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", + "requires": { + "bytes": "3.0.0", + "http-errors": "1.6.2", + "iconv-lite": "0.4.19", + "unpipe": "1.0.0" + } + }, + "safe-buffer": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" + }, + "send": { + "version": "0.16.1", + "resolved": "https://registry.npmjs.org/send/-/send-0.16.1.tgz", + "integrity": "sha512-ElCLJdJIKPk6ux/Hocwhk7NFHpI3pVm/IZOYWqUmoxcgeyM+MpxHHKhb8QmlJDX1pU6WrgaHBkVNm73Sv7uc2A==", + "requires": { + "debug": "2.6.9", + "depd": "1.1.1", + "destroy": "1.0.4", + "encodeurl": "1.0.1", + "escape-html": "1.0.3", + "etag": "1.8.1", + "fresh": "0.5.2", + "http-errors": "1.6.2", + "mime": "1.4.1", + "ms": "2.0.0", + "on-finished": "2.3.0", + "range-parser": "1.2.0", + "statuses": "1.3.1" + } + }, + "serve-static": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.1.tgz", + "integrity": "sha512-hSMUZrsPa/I09VYFJwa627JJkNs0NrfL1Uzuup+GqHfToR2KcsXFymXSV90hoyw3M+msjFuQly+YzIH/q0MGlQ==", + "requires": { + "encodeurl": "1.0.1", + "escape-html": "1.0.3", + "parseurl": "1.3.2", + "send": "0.16.1" + } + }, + "setprototypeof": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", + "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" + }, + "statuses": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz", + "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=" + }, + "type-is": { + "version": "1.6.15", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.15.tgz", + "integrity": "sha1-yrEPtJCeRByChC6v4a1kbIGARBA=", + "requires": { + "media-typer": "0.3.0", + "mime-types": "2.1.17" + } + }, + "ultron": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.0.tgz", + "integrity": "sha1-sHoualQagV/Go0zNRTO67DB8qGQ=" + }, + "unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" + }, + "utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" + }, + "vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" + }, + "ws": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-3.2.0.tgz", + "integrity": "sha512-hTS3mkXm/j85jTQOIcwVz3yK3up9xHgPtgEhDBOH3G18LDOZmSAG1omJeXejLKJakx+okv8vS1sopgs7rw0kVw==", + "requires": { + "async-limiter": "1.0.0", + "safe-buffer": "5.1.1", + "ultron": "1.1.0" + } + } + } +} diff --git a/App/Mobile/package.json b/App/Mobile/package.json new file mode 100644 index 0000000..92ae0eb --- /dev/null +++ b/App/Mobile/package.json @@ -0,0 +1,24 @@ +{ + "name": "nodejs-websocket-example", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node server.js " + }, + "repository": { + "type": "git", + "url": "git+https://github.com/wahengchang/nodejs-websocket-example.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/wahengchang/nodejs-websocket-example/issues" + }, + "homepage": "https://github.com/wahengchang/nodejs-websocket-example#readme", + "dependencies": { + "express": "^4.16.2", + "ws": "^3.2.0" + } +} diff --git a/App/Mobile/server.js b/App/Mobile/server.js old mode 100755 new mode 100644 index 28936d8..f8c991b --- a/App/Mobile/server.js +++ b/App/Mobile/server.js @@ -4,9 +4,9 @@ var ws = require('./ws') var app = express() app.get('/', function (req, res) { - res.sendFile(__dirname + '/ws.html'); + res.sendFile(__dirname + '/ws.html'); }) app.listen(3000, function () { - console.log('Compatibility layer listening on port 3000!'); + console.log('Compatability layer listening on port 3000!') }) diff --git a/App/Mobile/virtualjoystick.js b/App/Mobile/virtualjoystick.js new file mode 100644 index 0000000..804af04 --- /dev/null +++ b/App/Mobile/virtualjoystick.js @@ -0,0 +1,419 @@ +var VirtualJoystick = function(opts) +{ + opts = opts || {}; + this._container = opts.container || document.body; + this._strokeStyle = opts.strokeStyle || 'cyan'; + this._stickEl = opts.stickElement || this._buildJoystickStick(); + this._baseEl = opts.baseElement || this._buildJoystickBase(); + this._mouseSupport = opts.mouseSupport !== undefined ? opts.mouseSupport : false; + this._stationaryBase = opts.stationaryBase || false; + this._baseX = this._stickX = opts.baseX || 0 + this._baseY = this._stickY = opts.baseY || 0 + this._limitStickTravel = opts.limitStickTravel || false + this._stickRadius = opts.stickRadius !== undefined ? opts.stickRadius : 100 + this._useCssTransform = opts.useCssTransform !== undefined ? opts.useCssTransform : false + + this._container.style.position = "relative" + + this._container.appendChild(this._baseEl) + this._baseEl.style.position = "absolute" + this._baseEl.style.display = "none" + this._container.appendChild(this._stickEl) + this._stickEl.style.position = "absolute" + this._stickEl.style.display = "none" + + this._pressed = false; + this._touchIdx = null; + + if(this._stationaryBase === true){ + this._baseEl.style.display = ""; + this._baseEl.style.left = (this._baseX - this._baseEl.width /2)+"px"; + this._baseEl.style.top = (this._baseY - this._baseEl.height/2)+"px"; + } + + this._transform = this._useCssTransform ? this._getTransformProperty() : false; + this._has3d = this._check3D(); + + var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; + this._$onTouchStart = __bind(this._onTouchStart , this); + this._$onTouchEnd = __bind(this._onTouchEnd , this); + this._$onTouchMove = __bind(this._onTouchMove , this); + this._container.addEventListener( 'touchstart' , this._$onTouchStart , false ); + this._container.addEventListener( 'touchend' , this._$onTouchEnd , false ); + this._container.addEventListener( 'touchmove' , this._$onTouchMove , false ); + if( this._mouseSupport ){ + this._$onMouseDown = __bind(this._onMouseDown , this); + this._$onMouseUp = __bind(this._onMouseUp , this); + this._$onMouseMove = __bind(this._onMouseMove , this); + this._container.addEventListener( 'mousedown' , this._$onMouseDown , false ); + this._container.addEventListener( 'mouseup' , this._$onMouseUp , false ); + this._container.addEventListener( 'mousemove' , this._$onMouseMove , false ); + } +} + +VirtualJoystick.prototype.destroy = function() +{ + this._container.removeChild(this._baseEl); + this._container.removeChild(this._stickEl); + + this._container.removeEventListener( 'touchstart' , this._$onTouchStart , false ); + this._container.removeEventListener( 'touchend' , this._$onTouchEnd , false ); + this._container.removeEventListener( 'touchmove' , this._$onTouchMove , false ); + if( this._mouseSupport ){ + this._container.removeEventListener( 'mouseup' , this._$onMouseUp , false ); + this._container.removeEventListener( 'mousedown' , this._$onMouseDown , false ); + this._container.removeEventListener( 'mousemove' , this._$onMouseMove , false ); + } +} + +/** + * @returns {Boolean} true if touchscreen is currently available, false otherwise +*/ +VirtualJoystick.touchScreenAvailable = function() +{ + return 'createTouch' in document ? true : false; +} + +/** + * microevents.js - https://github.com/jeromeetienne/microevent.js +*/ +;(function(destObj){ + destObj.addEventListener = function(event, fct){ + if(this._events === undefined) this._events = {}; + this._events[event] = this._events[event] || []; + this._events[event].push(fct); + return fct; + }; + destObj.removeEventListener = function(event, fct){ + if(this._events === undefined) this._events = {}; + if( event in this._events === false ) return; + this._events[event].splice(this._events[event].indexOf(fct), 1); + }; + destObj.dispatchEvent = function(event /* , args... */){ + if(this._events === undefined) this._events = {}; + if( this._events[event] === undefined ) return; + var tmpArray = this._events[event].slice(); + for(var i = 0; i < tmpArray.length; i++){ + var result = tmpArray[i].apply(this, Array.prototype.slice.call(arguments, 1)) + if( result !== undefined ) return result; + } + return undefined + }; +})(VirtualJoystick.prototype); + +////////////////////////////////////////////////////////////////////////////////// +// // +////////////////////////////////////////////////////////////////////////////////// + +VirtualJoystick.prototype.deltaX = function(){ return this._stickX - this._baseX; } +VirtualJoystick.prototype.deltaY = function(){ return this._stickY - this._baseY; } + +VirtualJoystick.prototype.up = function(){ + if( this._pressed === false ) return false; + var deltaX = this.deltaX(); + var deltaY = this.deltaY(); + if( deltaY >= 0 ) return false; + if( Math.abs(deltaX) > 2*Math.abs(deltaY) ) return false; + return true; +} +VirtualJoystick.prototype.down = function(){ + if( this._pressed === false ) return false; + var deltaX = this.deltaX(); + var deltaY = this.deltaY(); + if( deltaY <= 0 ) return false; + if( Math.abs(deltaX) > 2*Math.abs(deltaY) ) return false; + return true; +} +VirtualJoystick.prototype.right = function(){ + if( this._pressed === false ) return false; + var deltaX = this.deltaX(); + var deltaY = this.deltaY(); + if( deltaX <= 0 ) return false; + if( Math.abs(deltaY) > 2*Math.abs(deltaX) ) return false; + return true; +} +VirtualJoystick.prototype.left = function(){ + if( this._pressed === false ) return false; + var deltaX = this.deltaX(); + var deltaY = this.deltaY(); + if( deltaX >= 0 ) return false; + if( Math.abs(deltaY) > 2*Math.abs(deltaX) ) return false; + return true; +} + +////////////////////////////////////////////////////////////////////////////////// +// // +////////////////////////////////////////////////////////////////////////////////// + +VirtualJoystick.prototype._onUp = function() +{ + this._pressed = false; + this._stickEl.style.display = "none"; + + if(this._stationaryBase == false){ + this._baseEl.style.display = "none"; + + this._baseX = this._baseY = 0; + this._stickX = this._stickY = 0; + } +} + +VirtualJoystick.prototype._onDown = function(x, y) +{ + this._pressed = true; + if(this._stationaryBase == false){ + this._baseX = x; + this._baseY = y; + this._baseEl.style.display = ""; + this._move(this._baseEl.style, (this._baseX - this._baseEl.width /2), (this._baseY - this._baseEl.height/2)); + } + + this._stickX = x; + this._stickY = y; + + if(this._limitStickTravel === true){ + var deltaX = this.deltaX(); + var deltaY = this.deltaY(); + var stickDistance = Math.sqrt( (deltaX * deltaX) + (deltaY * deltaY) ); + if(stickDistance > this._stickRadius){ + var stickNormalizedX = deltaX / stickDistance; + var stickNormalizedY = deltaY / stickDistance; + + this._stickX = stickNormalizedX * this._stickRadius + this._baseX; + this._stickY = stickNormalizedY * this._stickRadius + this._baseY; + } + } + + this._stickEl.style.display = ""; + this._move(this._stickEl.style, (this._stickX - this._stickEl.width /2), (this._stickY - this._stickEl.height/2)); +} + +VirtualJoystick.prototype._onMove = function(x, y) +{ + if( this._pressed === true ){ + this._stickX = x; + this._stickY = y; + + if(this._limitStickTravel === true){ + var deltaX = this.deltaX(); + var deltaY = this.deltaY(); + var stickDistance = Math.sqrt( (deltaX * deltaX) + (deltaY * deltaY) ); + if(stickDistance > this._stickRadius){ + var stickNormalizedX = deltaX / stickDistance; + var stickNormalizedY = deltaY / stickDistance; + + this._stickX = stickNormalizedX * this._stickRadius + this._baseX; + this._stickY = stickNormalizedY * this._stickRadius + this._baseY; + } + } + + this._move(this._stickEl.style, (this._stickX - this._stickEl.width /2), (this._stickY - this._stickEl.height/2)); + } +} + + +////////////////////////////////////////////////////////////////////////////////// +// bind touch events (and mouse events for debug) // +////////////////////////////////////////////////////////////////////////////////// + +VirtualJoystick.prototype._onMouseUp = function(event) +{ + return this._onUp(); +} + +VirtualJoystick.prototype._onMouseDown = function(event) +{ + event.preventDefault(); + var x = event.clientX; + var y = event.clientY; + return this._onDown(x, y); +} + +VirtualJoystick.prototype._onMouseMove = function(event) +{ + var x = event.clientX; + var y = event.clientY; + return this._onMove(x, y); +} + +////////////////////////////////////////////////////////////////////////////////// +// comment // +////////////////////////////////////////////////////////////////////////////////// + +VirtualJoystick.prototype._onTouchStart = function(event) +{ + // if there is already a touch inprogress do nothing + if( this._touchIdx !== null ) return; + + // notify event for validation + var isValid = this.dispatchEvent('touchStartValidation', event); + if( isValid === false ) return; + + // dispatch touchStart + this.dispatchEvent('touchStart', event); + + event.preventDefault(); + // get the first who changed + var touch = event.changedTouches[0]; + // set the touchIdx of this joystick + this._touchIdx = touch.identifier; + + // forward the action + var x = touch.pageX; + var y = touch.pageY; + return this._onDown(x, y) +} + +VirtualJoystick.prototype._onTouchEnd = function(event) +{ + // if there is no touch in progress, do nothing + if( this._touchIdx === null ) return; + + // dispatch touchEnd + this.dispatchEvent('touchEnd', event); + + // try to find our touch event + var touchList = event.changedTouches; + for(var i = 0; i < touchList.length && touchList[i].identifier !== this._touchIdx; i++); + // if touch event isnt found, + if( i === touchList.length) return; + + // reset touchIdx - mark it as no-touch-in-progress + this._touchIdx = null; + +//?????? +// no preventDefault to get click event on ios +event.preventDefault(); + + return this._onUp() +} + +VirtualJoystick.prototype._onTouchMove = function(event) +{ + // if there is no touch in progress, do nothing + if( this._touchIdx === null ) return; + + // try to find our touch event + var touchList = event.changedTouches; + for(var i = 0; i < touchList.length && touchList[i].identifier !== this._touchIdx; i++ ); + // if touch event with the proper identifier isnt found, do nothing + if( i === touchList.length) return; + var touch = touchList[i]; + + event.preventDefault(); + + var x = touch.pageX; + var y = touch.pageY; + return this._onMove(x, y) +} + + +////////////////////////////////////////////////////////////////////////////////// +// build default stickEl and baseEl // +////////////////////////////////////////////////////////////////////////////////// + +/** + * build the canvas for joystick base + */ +VirtualJoystick.prototype._buildJoystickBase = function() +{ + var canvas = document.createElement( 'canvas' ); + canvas.width = 126; + canvas.height = 126; + + var ctx = canvas.getContext('2d'); + ctx.beginPath(); + ctx.strokeStyle = this._strokeStyle; + ctx.lineWidth = 6; + ctx.arc( canvas.width/2, canvas.width/2, 40, 0, Math.PI*2, true); + ctx.stroke(); + + ctx.beginPath(); + ctx.strokeStyle = this._strokeStyle; + ctx.lineWidth = 2; + ctx.arc( canvas.width/2, canvas.width/2, 60, 0, Math.PI*2, true); + ctx.stroke(); + + return canvas; +} + +/** + * build the canvas for joystick stick + */ +VirtualJoystick.prototype._buildJoystickStick = function() +{ + var canvas = document.createElement( 'canvas' ); + canvas.width = 86; + canvas.height = 86; + var ctx = canvas.getContext('2d'); + ctx.beginPath(); + ctx.strokeStyle = this._strokeStyle; + ctx.lineWidth = 6; + ctx.arc( canvas.width/2, canvas.width/2, 40, 0, Math.PI*2, true); + ctx.stroke(); + return canvas; +} + +////////////////////////////////////////////////////////////////////////////////// +// move using translate3d method with fallback to translate > 'top' and 'left' +// modified from https://github.com/component/translate and dependents +////////////////////////////////////////////////////////////////////////////////// + +VirtualJoystick.prototype._move = function(style, x, y) +{ + if (this._transform) { + if (this._has3d) { + style[this._transform] = 'translate3d(' + x + 'px,' + y + 'px, 0)'; + } else { + style[this._transform] = 'translate(' + x + 'px,' + y + 'px)'; + } + } else { + style.left = x + 'px'; + style.top = y + 'px'; + } +} + +VirtualJoystick.prototype._getTransformProperty = function() +{ + var styles = [ + 'webkitTransform', + 'MozTransform', + 'msTransform', + 'OTransform', + 'transform' + ]; + + var el = document.createElement('p'); + var style; + + for (var i = 0; i < styles.length; i++) { + style = styles[i]; + if (null != el.style[style]) { + return style; + } + } +} + +VirtualJoystick.prototype._check3D = function() +{ + var prop = this._getTransformProperty(); + // IE8<= doesn't have `getComputedStyle` + if (!prop || !window.getComputedStyle) return module.exports = false; + + var map = { + webkitTransform: '-webkit-transform', + OTransform: '-o-transform', + msTransform: '-ms-transform', + MozTransform: '-moz-transform', + transform: 'transform' + }; + + // from: https://gist.github.com/lorenzopolidori/3794226 + var el = document.createElement('div'); + el.style[prop] = 'translate3d(1px,1px,1px)'; + document.body.insertBefore(el, null); + var val = getComputedStyle(el).getPropertyValue(map[prop]); + document.body.removeChild(el); + var exports = null != val && val.length && 'none' != val; + return exports; +} diff --git a/App/Mobile/ws.html b/App/Mobile/ws.html old mode 100755 new mode 100644 index 994b2dd..6482ea6 --- a/App/Mobile/ws.html +++ b/App/Mobile/ws.html @@ -1,17 +1,526 @@ +

- Mobile GUI! + Web Socket Example

-Connection is feeding to server, touch the screen to move the robot! + open console to see connection.

+ + +
+ + diff --git a/App/Mobile/ws.js b/App/Mobile/ws.js old mode 100755 new mode 100644 index 775cab6..5980109 --- a/App/Mobile/ws.js +++ b/App/Mobile/ws.js @@ -1,14 +1,13 @@ var WebSocketServer = require('ws').Server, wss = new WebSocketServer({port: 40510}) -var net = require('net'); -var client = new net.Socket(); -var usercount = 0 +var net = require('net') +var client = new net.Socket() -client.connect(9999, '127.0.0.1', function() { +client.connect(9999, '192.168.100.1', function() { wss.on('connection', function (ws) { ws.on('message', function (message) { - client.write(message); - }); - }); + client.write(message) + }) + }) })