projects / samples / web / SensorBall.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 602ebae)
[SensorBall]update SensorBall
authorgs86.lee <gs86.lee@samsung.com>
Fri, 12 Apr 2013 06:30:15 +0000 (15:30 +0900)
committergs86.lee <gs86.lee@samsung.com>
Fri, 12 Apr 2013 06:30:15 +0000 (15:30 +0900)
Change-Id: If57027329a56fe5434c814074191627626fa453e

config.xml patch | blob | history
index.html patch | blob | history
js/main.js patch | blob | history

diff --git a/config.xml b/config.xml
index 76b274a..170458f 100644 (file)
--- a/config.xml
+++ b/config.xml
@@ -1,6 +1,6 @@
 <?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>
diff --git a/index.html b/index.html
index 5d00253..bbf1ea5 100644 (file)
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
  <body>
   <div data-role="page" id="mainPage" data-add-back-btn="true">
    <div data-role="header" data-position="fixed">
-    <h1>SensorBall</h1>
+    <h1>SENSOR BALL</h1>
    </div>
    <div data-role="content" class="background background1" data-scroll="none">
     <div id="main">
@@ -29,9 +29,9 @@
    <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>
      </ul>
     </div>
    </div>
diff --git a/js/main.js b/js/main.js
index 7c46e59..77b213b 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -49,6 +49,11 @@ var app = {
        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,
@@ -77,6 +82,11 @@ var app = {
                $('.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,
@@ -102,17 +112,23 @@ var app = {
                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;
        },
 
-       earthEvents: function earthEvents(data) {
+       /**
+        * Draw the next animation frame for the 'earth' tab
+        */
+       earthEvents: function earthEvents() {
                "use strict";
 
                var event, borderTolerance,
@@ -165,10 +181,18 @@ var app = {
                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');
@@ -185,14 +209,14 @@ var app = {
                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 = {
@@ -214,7 +238,10 @@ var app = {
                return ret;
        },
 
-       ballEvents: function ballEvents(data) {
+       /**
+        * Draw the next animation frame for the 'ball' tab
+        */
+       ballEvents: function ballEvents() {
                "use strict";
                var event,
                        x,
@@ -306,22 +333,25 @@ var app = {
 
        },
 
-       fun: function fun(data) {
+       /**
+        * Draw the next animation frame
+        */
+       fun: function fun() {
                "use strict";
                if (this.event) {
                        switch (this.current) {
                        case 'ball':
-                               this.ballEvents(data);
+                               this.ballEvents();
                                break;
                        case 'earth':
-                               this.earthEvents(data);
+                               this.earthEvents();
                                break;
                        case 'baloon':
-                               this.ballEvents(data);
+                               this.ballEvents();
                                break;
                        default:
                                console.warn("Incorrect current mode");
-                               this.ballEvents(data);
+                               this.ballEvents();
                        }
                }
 
@@ -329,6 +359,9 @@ var app = {
                setTimeout(this.fun.bind(this), this.animationInterval);
        },
 
+       /**
+        * Switch to the 'ball' tab
+        */
        startBall: function startBall() {
                "use strict";
 
@@ -344,10 +377,8 @@ var app = {
 
                this.current = 'ball';
 
-               $('#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');
 
@@ -357,6 +388,9 @@ var app = {
                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');
@@ -371,10 +405,8 @@ var app = {
 
                this.current = 'baloon';
 
-               $('#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');
 
@@ -384,6 +416,9 @@ var app = {
                this.ballHeight = parseInt($('.ball').css('height'), 10);
        },
 
+       /**
+        * Switch to the 'space' tab
+        */
        startSpace: function startSpace() {
                "use strict";
                var backgroundPosition, arrayPos;
@@ -399,16 +434,11 @@ var app = {
 
                this.current = 'earth';
 
-               $('#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>');
 
-               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');
 
@@ -416,8 +446,8 @@ var app = {
 
                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');
 
@@ -443,7 +473,8 @@ $(document).ready(function () {
        app.ballHeight = parseInt($('.ball').css('height'), 10);
 
        window.addEventListener('devicemotion', app.saveSensorData.bind(app), false);
-       setTimeout(app.fun.bind(app), app.animationInterval);
+
+       app.fun();
 
        $('.ui-btn-back').bind('touchstart', function (event) {
                tizen.application.getCurrentApplication().exit();
@@ -461,13 +492,11 @@ $(document).ready(function () {
                app.startSpace();
        });
 
-       $('#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');
-       img.attr('src', 'images/background2.png');
-       img.attr('src', 'images/background3.png');
 });
\ No newline at end of file
Domain: Applications / Web Sample;