diff --git a/.gitignore b/.gitignore index 0cfc89f..bafdae7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ bower_components/ -node_modules/ \ No newline at end of file +node_modules/ +.DS_Store diff --git a/css/app.css b/css/app.css index bf59c39..18c1d1f 100644 --- a/css/app.css +++ b/css/app.css @@ -44,3 +44,7 @@ body { #connect, #status { float: right; } + +.hidden { + display: none; +} diff --git a/index.html b/index.html index 0a5a44c..377bf85 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - Privileged app + Rolling Spider @@ -16,21 +16,29 @@ -
-
-
-
-
-
- - - - - - - - - -
+
+
+
+
+
+
+
+ + + + + + + + + + +
+
+ diff --git a/js/app.js b/js/app.js index 5d40b70..014e67d 100644 --- a/js/app.js +++ b/js/app.js @@ -1,175 +1,182 @@ /* global console, VirtualJoystick, RollingSpiderHelper */ 'use strict'; -window.addEventListener('resize', function ResizeHandler() { - var width = document.body.clientWidth; - var height = document.body.clientHeight; - if (width >= height) { - window.removeEventListener('resize', ResizeHandler); - init(width, height); - } -}); +var App = { + isReady: false, -function init(clientWidth, clientHeight) { - console.log("touchscreen is " + - (VirtualJoystick.touchScreenAvailable() ? "available" : "not available")); - - var touchLeftJoy = false, touchRightJoy = false; - - var joystickLeft = new VirtualJoystick({ - container : document.getElementById('joystickArea'), - strokeStyle : 'cyan', - // at middle of left side. - baseX: (document.body.clientWidth/2)*0.5, - baseY: (document.body.clientHeight/2), - stationaryBase: true, - limitStickTravel: true, - stickRadius: 80, - mouseSupport : false - }); - joystickLeft.addEventListener('touchStart', function(){ - touchLeftJoy = true; - console.log('L down'); - }); - joystickLeft.addEventListener('touchEnd', function(){ - touchLeftJoy = false; - console.log('L up'); - }); - joystickLeft.addEventListener('touchStartValidation', function(event){ - var touch = event.changedTouches[0]; - if( touch.pageX >= window.innerWidth/2 ){ - return false; - } - return true; - }); - - var joystickRight = new VirtualJoystick({ - container : document.getElementById('joystickArea'), - strokeStyle : 'orange', - // at middle of right side. - baseX: (document.body.clientWidth/2)*1.5, - baseY: (document.body.clientHeight/2), - stationaryBase: true, - limitStickTravel: true, - stickRadius: 80, - mouseSupport : false - }); - joystickRight.addEventListener('touchStart', function(){ - touchRightJoy = true; - console.log('R down'); - }); - joystickRight.addEventListener('touchEnd', function(){ - touchRightJoy = false; - console.log('R up'); - }); - joystickRight.addEventListener('touchStartValidation', function(event){ - var touch = event.changedTouches[0]; - if( touch.pageX < window.innerWidth/2 ){ - return false; - } - return true; - }); + rsHelper: undefined, + joystickLeft: undefined, + joystickRight: undefined, - function showDebugInfo(tilt, forward, turn, up){ - var eLeft = document.querySelector('#info > .left'); - eLeft.innerHTML = 'tilt:' + tilt + + connectButton: document.getElementById('connect'), + takeOffButton: document.getElementById('takeoff'), + landingButton: document.getElementById('landing'), + flyingStatusSpan: document.getElementById('flyingStatus'), + joystickAreaDiv: document.getElementById('joystickArea'), + leftDebugInfoElem: document.querySelector('#info > .left'), + rightDebugInfoElem: document.querySelector('#info > .right'), + + showDebugInfo: function showDebugInfo(tilt, forward, turn, up) { + this.leftDebugInfoElem.innerHTML = 'tilt:' + tilt + '
forward:' + forward + '
' + - (joystickLeft.right() ? ' right':'') + - (joystickLeft.up() ? ' up' : '') + - (joystickLeft.left() ? ' left' : '') + - (joystickLeft.down() ? ' down' : ''); + (this.joystickLeft.right() ? ' right':'') + + (this.joystickLeft.up() ? ' up' : '') + + (this.joystickLeft.left() ? ' left' : '') + + (this.joystickLeft.down() ? ' down' : ''); var eRight = document.querySelector('#info > .right'); eRight.innerHTML = 'turn:' + turn + '
up:' + up + '
' + - (joystickRight.right() ? ' right' : '') + - (joystickRight.up() ? ' up' : '') + - (joystickRight.left() ? ' left' : '') + - (joystickRight.down() ? ' down' : ''); - } + (this.joystickRight.right() ? ' right' : '') + + (this.joystickRight.up() ? ' up' : '') + + (this.joystickRight.left() ? ' left' : '') + + (this.joystickRight.down() ? ' down' : ''); + }, - setInterval(function(){ - var tilt = touchLeftJoy ? Math.round(joystickLeft.deltaX()) : 0; - var forward = touchLeftJoy ? Math.round(joystickLeft.deltaY() * -1) : 0; - var turn = touchRightJoy ? Math.round(joystickRight.deltaX()) : 0; - var up = touchRightJoy ? Math.round(joystickRight.deltaY() * -1) : 0; + onJoystickTouch: function(joystick, evt) { + switch(evt.type) { + case 'touchstart': + joystick.onTouch = true; + console.log(joystick.location + ' down'); + break; + case 'touchend': + joystick.onTouch = false; + console.log(joystick.location + ' up'); + break; + } + }, - showDebugInfo(tilt, forward, turn, up); - rsHelper.motors(true, tilt, forward, turn, up, 0, 2); - }, 50); + createJoystick: function createJoystick(location) { + var that = this; + var joystick = new VirtualJoystick({ + container: this.joystickAreaDiv, + strokeStyle: location === 'left' ? 'cyan' : 'orange', + baseX: location === 'left' ? + (document.body.clientWidth/2)*0.5 : (document.body.clientWidth/2)*1.5, + baseY: (document.body.clientHeight/2), + stationaryBase: true, + limitStickTravel: true, + stickRadius: 80, + mouseSupport: false + }); + joystick.location = location; + + joystick.addEventListener('touchStart', + this.onJoystickTouch.bind(this, joystick)); + joystick.addEventListener('touchEnd', + this.onJoystickTouch.bind(this, joystick)); + joystick.addEventListener('touchStartValidation', function(event) { + var touch = event.changedTouches[0]; + var notValid = joystick.location === 'left' ? + touch.pageX >= window.innerWidth/2 : touch.pageX < window.innerWidth/2; - var rsHelper = new RollingSpiderHelper(); + if(notValid) { + return false; + } + return true; + }); + return joystick; + }, - var connectButton = document.getElementById('connect'); - var changeConnectButtonText = function(state) { + changeConnectButtonText: function changeConnectButtonText(state) { + var elem = this.connectButton; switch (state) { case 'connecting': - connectButton.textContent = 'Connecting'; - connectButton.disabled = true; + elem.textContent = 'Connecting'; + elem.disabled = true; break; case 'discovering-services': - connectButton.textContent = 'Discovering Services...'; - connectButton.disabled = true; + elem.textContent = 'Discovering Services...'; + elem.disabled = true; break; case 'connected': - connectButton.textContent = 'Disconnect'; - connectButton.disabled = false; + elem.textContent = 'Disconnect'; + elem.disabled = false; break; case 'disconnect': - connectButton.textContent = 'Connect'; - connectButton.disabled = false; + elem.textContent = 'Connect'; + elem.disabled = false; break; } - }; - // XXX - ['connecting', 'discovering-services', 'connected', 'disconnect'].forEach( - function(eventName) { - rsHelper.on(eventName, function() { - changeConnectButtonText(eventName); - }); - }); - connectButton.addEventListener('click', function() { - if (rsHelper.isAbleToConnect()) { - rsHelper.connect().then(function onResolve() { - changeConnectButtonText('connected'); - }, function onReject() { - changeConnectButtonText('disconnect'); + }, + + init: function init(clientWidth, clientHeight) { + var that = this; + console.log("touchscreen is " + + (VirtualJoystick.touchScreenAvailable() ? "available" : "not available")); + + if (!this.isReady) { + this.joystickLeft = this.createJoystick('left'); + this.joystickRight = this.createJoystick('right'); + this.rsHelper = new RollingSpiderHelper(); + + window.setInterval(function() { + var tilt = that.joystickLeft.onTouch ? + Math.round(that.joystickLeft.deltaX()) : 0; + var forward = that.joystickLeft.onTouch ? + Math.round(that.joystickLeft.deltaY() * -1) : 0; + var turn = that.joystickRight.onTouch ? + Math.round(that.joystickRight.deltaX()) : 0; + var up = that.joystickRight.onTouch ? + Math.round(that.joystickRight.deltaY() * -1) : 0; + + that.showDebugInfo(tilt, forward, turn, up); + that.rsHelper.motors(true, tilt, forward, turn, up, 0, 2); + }, 50); + + // XXX + ['connecting', 'discovering-services', 'connected', 'disconnect'].forEach( + function(eventName) { + that.rsHelper.on(eventName, function() { + that.changeConnectButtonText(eventName); + }); }); - } else { - rsHelper.disconnect().then(function onResolve() { - changeConnectButtonText('disconnect'); - }, function onReject() { - // XXX + this.connectButton.addEventListener('click', function() { + if (that.rsHelper.isAbleToConnect()) { + that.rsHelper.connect().then(function onResolve() { + that.changeConnectButtonText('connected'); + }, function onReject() { + that.changeConnectButtonText('disconnect'); + }); + } else { + that.rsHelper.disconnect().then(function onResolve() { + that.changeConnectButtonText('disconnect'); + }, function onReject() { + // XXX + }); + } }); + + this.takeOffButton.addEventListener('click', this.rsHelper.takeOff); + this.landingButton.addEventListener('click', this.rsHelper.landing); + + /** + * Flying statuses: + * + * 0: Landed + * 1: Taking off + * 2: Hovering + * 3: ?? + * 4: Landing + * 5: Emergency / Cut out + */ + ['fsLanded', 'fsTakingOff', 'fsHovering','fsUnknown', 'fsLanding', + 'fsCutOff'].forEach(function(eventName) { + that.rsHelper.on(eventName, function (eventName) { + that.flyingStatusSpan.textContent = eventName; + }); + }); + + this.isReady = true; } - }); - - var elTakeOff = document.getElementById('takeoff'); - elTakeOff.onclick = function (){ - rsHelper.takeOff(); - }; - - var elLanding = document.getElementById('landing'); - elLanding.onclick = function (){ - rsHelper.landing(); - }; - - var flyingStatusHandler = function (eventName){ - document.getElementById('flyingStatus').textContent = eventName; - }; - - /** - * Flying statuses: - * - * 0: Landed - * 1: Taking off - * 2: Hovering - * 3: ?? - * 4: Landing - * 5: Emergency / Cut out - */ - ['fsLanded', 'fsTakingOff', 'fsHovering','fsUnknown', 'fsLanding', - 'fsCutOff'].forEach(function(eventName){ - rsHelper.on(eventName, flyingStatusHandler.bind(this, eventName)); - }); -} + } +}; + +window.addEventListener('resize', function ResizeHandler() { + var width = document.body.clientWidth; + var height = document.body.clientHeight; + if (width >= height) { + window.removeEventListener('resize', ResizeHandler); + App.init(width, height); + } +}); diff --git a/js/rolling_spider_helper.js b/js/rolling_spider_helper.js index 651de42..156157d 100644 --- a/js/rolling_spider_helper.js +++ b/js/rolling_spider_helper.js @@ -227,8 +227,10 @@ RollingSpiderHelper.prototype = evt({ 0, 0, 0, 0, 0, 0, 0, 0 ]); + console.log('_sendMotorCmd: ' + on + ', ' + tilt + ', ' + turn + ', ' + up + + ', ' + scale); characteristic.writeValue(buffer).then(function onResolve(){ - console.log('sendMotorCmd success'); + // console.log('sendMotorCmd success'); }, function onReject(reason){ console.log('sendMotorCmd failed: ' + reason); });