Skip to content

Commit

Permalink
Refactor app.js as module pattern
Browse files Browse the repository at this point in the history
  • Loading branch information
Tzu-Lin Huang committed Jun 16, 2015
1 parent 1ead321 commit 6395b29
Show file tree
Hide file tree
Showing 5 changed files with 189 additions and 167 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
bower_components/
node_modules/
node_modules/
.DS_Store
4 changes: 4 additions & 0 deletions css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,7 @@ body {
#connect, #status {
float: right;
}

.hidden {
display: none;
}
42 changes: 25 additions & 17 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Privileged app</title>
<title>Rolling Spider</title>
<meta name="description" content="A privileged app stub">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" href="css/app.css">
Expand All @@ -16,21 +16,29 @@
<script type="text/javascript" defer src="js/libs/l10n.js"></script>
</head>
<body>
<div id="joystickArea"></div>
<div id="info">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="toolbar">
<button id="connect">Connect</button>
<button id="takeoff">Take-Off</button>
<button id="landing">Landing</button>
<!--<button id="readyToGo">ReadyToGo</button>-->
<span id="status">
<span id="flyingStatus"></span>
<span id="battery"></span>
<span id="connection"></span>
</span>
</div>
<section id="joystick-view">
<div id="joystickArea"></div>
<div id="info">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="toolbar">
<button id="connect">Connect</button>
<button id="to-scripting-view">To Scripting View</button>
<button id="takeoff">Take-Off</button>
<button id="landing">Landing</button>
<!--<button id="readyToGo">ReadyToGo</button>-->
<span id="status">
<span id="flyingStatus"></span>
<span id="battery"></span>
<span id="connection"></span>
</span>
</div>
</section>
<section id="scripting-view" class="hidden">
<div>
<button id="to-joystick-view">Back to Joystick View</button>
</div>
</section>
</body>
</html>
303 changes: 155 additions & 148 deletions js/app.js
View file
Original file line number Diff line number Diff line change
@@ -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 +
' <br>forward:' + forward + '<br>' +
(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 +
' <br>up:' + up + '<br>' +
(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);
}
});
Loading

0 comments on commit 6395b29

Please sign in to comment.