Change-Id: If57027329a56fe5434c814074191627626fa453e
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://sample-web-application.tizen.org/SensorBall" version="2.1.0" viewmodes="fullscreen">
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://sample-web-application.tizen.org/SensorBall" version="2.1.0" viewmodes="fullscreen">
- <tizen:application id="RiIuG1b0CV.SensorBall" package="RiIuG1b0CV" required_version="1.0"/>
+ <tizen:application id="RiIuG1b0CV.SensorBall" package="RiIuG1b0CV" required_version="2.1"/>
<content src="index.html"/>
<icon src="icon.png"/>
<name>SensorBall</name>
<content src="index.html"/>
<icon src="icon.png"/>
<name>SensorBall</name>
<body>
<div data-role="page" id="mainPage" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<body>
<div data-role="page" id="mainPage" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
</div>
<div data-role="content" class="background background1" data-scroll="none">
<div id="main">
</div>
<div data-role="content" class="background background1" data-scroll="none">
<div id="main">
<div data-role="footer" data-position="fixed">
<div data-role="tabbar" data-style="toolbar">
<ul>
<div data-role="footer" data-position="fixed">
<div data-role="tabbar" data-style="toolbar">
<ul>
- <li><a href="#" id="btnBall" class="ui-btn-active">Ball</a></li>
- <li><a href="#" id="btnSky">Sky</a></li>
- <li><a href="#" id="btnSpace">Space</a></li>
+ <li><a href="#" id="btnBall" class="ui-btn-active">BALL</a></li>
+ <li><a href="#" id="btnSky">SKY</a></li>
+ <li><a href="#" id="btnSpace">SPACE</a></li>
event: null,
animationInterval: 40,
event: null,
animationInterval: 40,
+ /**
+ * Draw earth background position
+ * @param {int} x current x earth position
+ * @param {int} y current y earth position
+ */
earthUpdateBackgroundPosition: function earthUpdateBackgroundPosition(x, y) {
"use strict";
var rX, rY,
earthUpdateBackgroundPosition: function earthUpdateBackgroundPosition(x, y) {
"use strict";
var rX, rY,
$('.background').css('background-position', (this.backgroundLeft - 330) + 'px ' + (this.backgroundTop - 330) + 'px');
},
$('.background').css('background-position', (this.backgroundLeft - 330) + 'px ' + (this.backgroundTop - 330) + 'px');
},
+ /**
+ * Draw sun position
+ * @param {int} x current x earth position
+ * @param {int} y current y earth position
+ */
earthUpdateSunPosition: function earthUpdateSunPosition(x, y) {
"use strict";
var rX, rY,
earthUpdateSunPosition: function earthUpdateSunPosition(x, y) {
"use strict";
var rX, rY,
this.sunX += bdX * br;
this.sunY += bdY * br;
this.sunX += bdX * br;
this.sunY += bdY * br;
- $('.sun').css('left', this.sunX + 'px');
- $('.sun').css('top', this.sunY + 'px');
+ $('#sun').css('left', this.sunX + 'px');
+ $('#sun').css('top', this.sunY + 'px');
+ /**
+ * Deceleration - used when the earth leaves the Sun's gravitation
+ */
deceleration: function deceleration() {
"use strict";
this.dX *= 0.6;
this.dY *= 0.6;
},
deceleration: function deceleration() {
"use strict";
this.dX *= 0.6;
this.dY *= 0.6;
},
- earthEvents: function earthEvents(data) {
+ /**
+ * Draw the next animation frame for the 'earth' tab
+ */
+ earthEvents: function earthEvents() {
"use strict";
var event, borderTolerance,
"use strict";
var event, borderTolerance,
this.ballY += this.dY;
// What do it when the earth leaves gravitation of the Sun?;
this.ballY += this.dY;
// What do it when the earth leaves gravitation of the Sun?;
- if (this.ballX > (this.gameWidth + borderTolerance)) { this.ballX = -borderTolerance; this.deceleration(); }
- if (this.ballY > (this.gameHeight + borderTolerance)) { this.ballY = -borderTolerance; this.deceleration(); }
- if (this.ballX < -borderTolerance) { this.ballX = this.gameWidth + borderTolerance; this.deceleration(); }
- if (this.ballY < -borderTolerance) { this.ballY = this.gameHeight + borderTolerance; this.deceleration(); }
+ if (this.ballX > (this.gameWidth + borderTolerance)) {
+ this.ballX = -borderTolerance; this.deceleration();
+ }
+ if (this.ballY > (this.gameHeight + borderTolerance)) {
+ this.ballY = -borderTolerance; this.deceleration();
+ }
+ if (this.ballX < -borderTolerance) {
+ this.ballX = this.gameWidth + borderTolerance; this.deceleration();
+ }
+ if (this.ballY < -borderTolerance) {
+ this.ballY = this.gameHeight + borderTolerance; this.deceleration();
+ }
// update Earth position
$('.ball').css('left', this.ballX + 'px');
// update Earth position
$('.ball').css('left', this.ballX + 'px');
this.earthUpdateSunPosition(x, y);
},
this.earthUpdateSunPosition(x, y);
},
-/**
- * Checks if the ball already was on the edge in the previous step
- *
- * If so, this is not a 'real' bounce - the ball is just laying on the edge
- * Uses globals: ballX, ballY, ballWidth, ballHeight, gameWidth, gameHeight
- *
- * @return {Object}
- */
+ /**
+ * Checks if the ball already was on the edge in the previous step
+ *
+ * If so, this is not a 'real' bounce - the ball is just laying on the edge
+ * Uses globals: ballX, ballY, ballWidth, ballHeight, gameWidth, gameHeight
+ *
+ * @return {Object}
+ */
shouldVibrateIfHitsEdge: function shouldVibrateIfHitsEdge() {
"use strict";
var ret = {
shouldVibrateIfHitsEdge: function shouldVibrateIfHitsEdge() {
"use strict";
var ret = {
- ballEvents: function ballEvents(data) {
+ /**
+ * Draw the next animation frame for the 'ball' tab
+ */
+ ballEvents: function ballEvents() {
"use strict";
var event,
x,
"use strict";
var event,
x,
- fun: function fun(data) {
+ /**
+ * Draw the next animation frame
+ */
+ fun: function fun() {
"use strict";
if (this.event) {
switch (this.current) {
case 'ball':
"use strict";
if (this.event) {
switch (this.current) {
case 'ball':
- this.earthEvents(data);
break;
default:
console.warn("Incorrect current mode");
break;
default:
console.warn("Incorrect current mode");
setTimeout(this.fun.bind(this), this.animationInterval);
},
setTimeout(this.fun.bind(this), this.animationInterval);
},
+ /**
+ * Switch to the 'ball' tab
+ */
startBall: function startBall() {
"use strict";
startBall: function startBall() {
"use strict";
- $('#main').empty();
- $('#main').append('<img class="ball" src="./images/ball1.png"></img>');
- $('.ball').css('left', this.ballX + 'px');
- $('.ball').css('top', this.ballY + 'px');
+ $('#sun').remove();
+ $('.ball').attr('src', './images/ball1.png');
$('.ball').css('width', '86px');
$('.ball').css('height', '86px');
$('.ball').css('width', '86px');
$('.ball').css('height', '86px');
this.ballHeight = parseInt($('.ball').css('height'), 10);
},
this.ballHeight = parseInt($('.ball').css('height'), 10);
},
+ /**
+ * Switch to the 'sky' tab
+ */
startSky: function startSky() {
"use strict";
$('.ui-content').removeClass('background1 background2 background3').addClass('background2');
startSky: function startSky() {
"use strict";
$('.ui-content').removeClass('background1 background2 background3').addClass('background2');
- $('#main').empty();
- $('#main').append('<img class="ball" src="./images/balloon.png"></img>');
- $('.ball').css('left', this.ballX + 'px');
- $('.ball').css('top', this.ballY + 'px');
+ $('#sun').remove();
+ $('.ball').attr('src', './images/balloon.png');
$('.ball').css('width', '100px');
$('.ball').css('height', '100px');
$('.ball').css('width', '100px');
$('.ball').css('height', '100px');
this.ballHeight = parseInt($('.ball').css('height'), 10);
},
this.ballHeight = parseInt($('.ball').css('height'), 10);
},
+ /**
+ * Switch to the 'space' tab
+ */
startSpace: function startSpace() {
"use strict";
var backgroundPosition, arrayPos;
startSpace: function startSpace() {
"use strict";
var backgroundPosition, arrayPos;
- $('#main').empty();
- $('#main').append('<img class="ball" src="./images/earth.png"></img>');
+ $('.ball').attr('src', './images/earth.png');
$('#main').append('<img id="sun" class="sun" src="./images/sun.png"></img>');
$('#main').append('<img id="sun" class="sun" src="./images/sun.png"></img>');
- this.sunX = (this.gameWidth - parseInt($('.sun').css('width'), 10)) / 2;
- this.sunY = (this.gameHeight - parseInt($('.sun').css('height'), 10)) / 2;
- $('#sun').css('left', this.sunX + 'px');
- $('#sun').css('top', this.sunY + 'px');
- $('.ball').css('left', this.ballX + 'px');
- $('.ball').css('top', this.ballY + 'px');
+ this.sunX = (this.gameWidth - parseInt($('#sun').css('width'), 10)) / 2;
+ this.sunY = (this.gameHeight - parseInt($('#sun').css('height'), 10)) / 2;
$('.ball').css('width', '50px');
$('.ball').css('height', '50px');
$('.ball').css('width', '50px');
$('.ball').css('height', '50px');
this.ballWidth = parseInt($('.ball').css('width'), 10);
this.ballHeight = parseInt($('.ball').css('height'), 10);
this.ballWidth = parseInt($('.ball').css('width'), 10);
this.ballHeight = parseInt($('.ball').css('height'), 10);
- this.sunWidth = parseInt($('.sun').css('width'), 10);
- this.sunHeight = parseInt($('.sun').css('height'), 10);
+ this.sunWidth = parseInt($('#sun').css('width'), 10);
+ this.sunHeight = parseInt($('#sun').css('height'), 10);
backgroundPosition = $('.background').css('background-position');
backgroundPosition = $('.background').css('background-position');
app.ballHeight = parseInt($('.ball').css('height'), 10);
window.addEventListener('devicemotion', app.saveSensorData.bind(app), false);
app.ballHeight = parseInt($('.ball').css('height'), 10);
window.addEventListener('devicemotion', app.saveSensorData.bind(app), false);
- setTimeout(app.fun.bind(app), app.animationInterval);
$('.ui-btn-back').bind('touchstart', function (event) {
tizen.application.getCurrentApplication().exit();
$('.ui-btn-back').bind('touchstart', function (event) {
tizen.application.getCurrentApplication().exit();
- $('#mainPage').live('pageshow', function () {
- setTimeout(app.startBall.bind(app), 100);
+ $('#mainPage').on('pageshow', function () {
+ app.startBall();
});
// Preload backgrounds;
img = $('<img>').hide();
img.attr('src', 'images/background1.png');
});
// Preload backgrounds;
img = $('<img>').hide();
img.attr('src', 'images/background1.png');
- img.attr('src', 'images/background2.png');
- img.attr('src', 'images/background3.png');
});
\ No newline at end of file
});
\ No newline at end of file