Adding smoother transitions between events

diff --git a/index.html b/index.html
index c102256..7f91587 100644 (file)
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@
    <canvas id="bgCanvas" style="z-index: 0; position:absolute; left:0px; top:0px;" width="800" height="1280"></canvas>
    <canvas id="mainCanvas" style="z-index: 1; position:absolute; left:0px; top:0px;" width="800" height="1280"></canvas>
    <canvas id="buttonCanvas" style="z-index: 2; position:absolute; left:0px; top:0px;" width="800" height="1280"></canvas>  
+   <canvas id="callCanvas" style="z-index: 3; position:absolute; left:0px; top:0px;" width="800" height="1280"></canvas>
    <canvas id="mouseClicks" style="z-index: 100; position:absolute; left:0px; top:0px;" width="800" height="1280"></canvas>
       
   </body>

diff --git a/js/callPage.js b/js/callPage.js
index da37003..5c15dd3 100644 (file)
--- a/js/callPage.js
+++ b/js/callPage.js
@@ -115,18 +115,18 @@ function initButtons(initState)
 
     if (initState == "dialing" || initState == "activeCall")
     {
-       endCallButton = callPage.addObject(buttonCtx, "button", {"name" : "endCallButton", "image": images.incomingDeclineButton, "icon": images.endCallIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : screenWidth * 0.2, 
-               "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "width" : buttonWidth, "height" : buttonHeight} );
+       endCallButton = callPage.addObject(callCtx, "button", {"name" : "endCallButton", "image": images.incomingDeclineButton, "icon": images.endCallIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : screenWidth * 0.2, 
+               "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "zLoc" : 3, "width" : buttonWidth, "height" : buttonHeight} );
 
        callPage.getObj("acceptCallButton").visible = false;                                                                                            
     }
     else
     {
-       acceptCallButton = callPage.addObject(buttonCtx, "button", {"name" : "acceptCallButton", "image": images.incomingAcceptButton, "icon": images.callIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : screenWidth * 0.1, 
-               "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "width" : buttonWidth, "height" : buttonHeight, "visible" : true} );        
+       acceptCallButton = callPage.addObject(callCtx, "button", {"name" : "acceptCallButton", "image": images.incomingAcceptButton, "icon": images.callIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : screenWidth * 0.1, 
+               "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50,  "zLoc" : 3, "width" : buttonWidth, "height" : buttonHeight, "visible" : true} );   
 
-       endCallButton = callPage.addObject(buttonCtx, "button", {"name" : "endCallButton", "image": images.incomingDeclineButton, "icon": images.endCallIcon, "iconWidth" : 100, "iconHeight" : 100, 
-               "xLoc" : acceptCallButton.xLoc + acceptCallButton.width + 20, "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "width" : buttonWidth, "height" : buttonHeight} );                                                                                                    
+       endCallButton = callPage.addObject(callCtx, "button", {"name" : "endCallButton", "image": images.incomingDeclineButton, "icon": images.endCallIcon, "iconWidth" : 100, "iconHeight" : 100, 
+               "xLoc" : acceptCallButton.xLoc + acceptCallButton.width + 20, "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50,  "zLoc" : 3, "width" : buttonWidth, "height" : buttonHeight} );                                                                                                       
 
        acceptCallButton.onClick = function(){
            try {
@@ -147,11 +147,11 @@ function initButtons(initState)
     endCallButton.onClick = function(){                            
        try {
            activeCall.end();
+           animateFinished();
        } catch (err) {
            console.log("Attempting to hangup a non-active call");
        }
-       currentState = "idle";
-       switchMenu(mainPage);                   
+       currentState = "idle";  
        stopTimer();
     };
 
@@ -160,24 +160,63 @@ function initButtons(initState)
 function initCallPage(initState)
 {         
 
-    var incomingBar = callPage.addObject(mainCtx, "shape", {"name" : "incomingBar", "xLoc" : -20, "yLoc" : screenHeight * 0.2, "width" : screenWidth + 40, 
+    var incomingBar = callPage.addObject(callCtx, "shape", {"name" : "incomingBar", "xLoc" : -20, "yLoc" : screenHeight * 0.2, "width" : screenWidth + 40, 
            "height" : screenHeight * 0.6, "fillStyle" : "#51504F", "strokeStyle" : "#B3BF3C", "lineWidth" : 5}); 
 
-    var displayedNumber = callPage.addObject(mainCtx, "text", {"name" : "displayedNumber", "xLoc" : screenWidth / 2, "yLoc" : incomingBar.yLoc + incomingBar.height * 0.4, "width" : screenWidth * 0.75, 
+    var displayedNumber = callPage.addObject(callCtx, "text", {"name" : "displayedNumber", "xLoc" : screenWidth / 2, "yLoc" : incomingBar.yLoc + incomingBar.height * 0.4, "width" : screenWidth * 0.75, 
            "height" : screenHeight * 0.4, "text" : currentNumber, "template" : incomingTextTemplate});
 
-    var clockIcon = callPage.addObject(mainCtx, "image", {"name" : "clock", "image": images.clockIcon, "xLoc" : screenWidth * 0.7, 
+    var clockIcon = callPage.addObject(callCtx, "image", {"name" : "clock", "image": images.clockIcon, "xLoc" : screenWidth * 0.7, 
            "yLoc" : incomingBar.yLoc + 30, "width" : 50, "height" : 50} );
 
-    var callStateText = callPage.addObject(mainCtx, "text", {"name" : "callStateText", "xLoc" : 15, "yLoc" : clockIcon.yLoc, "width" : screenWidth * 0.2, 
+    var callStateText = callPage.addObject(callCtx, "text", {"name" : "callStateText", "xLoc" : 15, "yLoc" : clockIcon.yLoc, "width" : screenWidth * 0.2, 
            "height" : 100, "text" : stateText, "template" : callTimeTextTemplate});
 
-    var callTime = callPage.addObject(mainCtx, "text", {"name" : "callTime", "xLoc" : clockIcon.xLoc + clockIcon.width + 10, "yLoc" : clockIcon.yLoc, "width" : screenWidth * 0.2, 
+    var callTime = callPage.addObject(callCtx, "text", {"name" : "callTime", "xLoc" : clockIcon.xLoc + clockIcon.width + 10, "yLoc" : clockIcon.yLoc, "width" : screenWidth * 0.2, 
            "height" : 100, "text" : "00:00:00", "template" : callTimeTextTemplate});
 
     initButtons(initState);   
 }
 
+function animateIncoming()
+{
+    currentPage = callPage;
+    $(callCanvas).css('left', screenWidth + "px");
+    $(callCanvas).css('top', "0px");
+    $(callCanvas).css('opacity', 1.0);
+    //switchMenu(callPage);
+    callPage.drawMenu();
+    mainPage.drawMenu();       
+    //$(callCanvas).animate({left: "0px" }, 800, 'swing');
+    $(mainCanvas).animate({opacity: 0.0 }, {duration: 600});  
+    $(buttonCanvas).animate({opacity: 0.0 }, {duration: 600});  
+    $(callCanvas).animate({left: "0px" }, {duration: 800, easing : 'swing'});  
+}
 
+function animateDialing()
+{      
+    currentPage = callPage;
+    $(callCanvas).css('left', "-" + screenWidth + "px");
+    $(callCanvas).css('top', "0px");
+    $(callCanvas).css('opacity', 1.0); 
+    callPage.drawMenu();
+    mainPage.drawMenu();               
+    $(mainCanvas).animate({opacity: 0.0 }, {duration: 600});  
+    $(buttonCanvas).animate({opacity: 0.0 }, {duration: 600});  
+    $(callCanvas).animate({left: "0px" }, {duration: 800, easing : 'swing'});          
+}
 
-
+function animateFinished()
+{
+    currentPage = mainPage;
+    //$(callCanvas).css('left', screenWidth + "px"); , "opacity": 0.25
+    //$(callCanvas).css('top', "0px"); 
+    //$(callCanvas).animate({top: "200px", opacity: 0.0}, 1000, 'swing', function(){switchMenu(mainPage);});
+    //switchMenu(mainPage);
+    $(mainCanvas).animate({opacity: 1.0 }, {duration: 1000});  
+    mainPage.drawMenu();
+    $(buttonCanvas).animate({opacity: 1.0 }, {duration: 1000});  
+    $(callCanvas).animate({top: "500px", opacity: 0.0}, {duration : 1000, easing : 'swing', complete : function(){$(callCanvas).css('top', "0px");}});  
+
+    //$(callCanvas).animate({"top": "2000px"}, 800, 'swing'); 
+}

diff --git a/js/canvasObject.js b/js/canvasObject.js
index 8223de5..f0bec15 100644 (file)
--- a/js/canvasObject.js
+++ b/js/canvasObject.js
@@ -16,7 +16,7 @@ function objectsAtLocation(pageObj, xLoc, yLoc)
 
     for (i = 0; i < pageObj.canvasObjs.length; i++)
     {
-       if (pageObj.canvasObjs[i] != undefined && pageObj.canvasObjs[i].visible != false)
+       if (pageObj.canvasObjs[i] !== undefined && pageObj.canvasObjs[i].visible !== false)
        {
            currItem = pageObj.canvasObjs[i];
 
@@ -26,7 +26,7 @@ function objectsAtLocation(pageObj, xLoc, yLoc)
                {
                    if (yLoc > currItem.yLoc && yLoc < (currItem.yLoc + currItem.height))
                    {               
-                       if (prevItem == undefined || (Number(currItem.ctx.canvas.style.zIndex) > Number(prevItem.ctx.canvas.style.zIndex)) || 
+                       if (prevItem === undefined || (Number(currItem.ctx.canvas.style.zIndex) > Number(prevItem.ctx.canvas.style.zIndex)) || 
                                ((Number(currItem.ctx.canvas.style.zIndex) === Number(prevItem.ctx.canvas.style.zIndex)) && (currItem.zLoc > prevItem.zLoc)))
                            prevItem = currItem;
                    }

diff --git a/js/dialer.js b/js/dialer.js
index e36ab23..d9bf702 100644 (file)
--- a/js/dialer.js
+++ b/js/dialer.js
@@ -7,8 +7,8 @@
  *
  */
 
-var mainCanvas, bgCanvas, buttonCanvas;
-var mainCtx, bgCtx, buttonCtx, mouseCtx;
+var mainCanvas, bgCanvas, buttonCanvas,callCanvas;
+var mainCtx, bgCtx, buttonCtx, mouseCtx, callCtx;
 var drawn = false;
 var screenHeight;
 var screenWidth;
@@ -72,6 +72,8 @@ function resizeCanvas()
     $(buttonCanvas).attr('height', screenHeight);
     $(mouseClicksLayer).attr('width', screenWidth);
     $(mouseClicksLayer).attr('height', screenHeight);
+    $(callCanvas).attr('width', screenWidth);
+    $(callCanvas).attr('height', screenHeight);
 
     if (currentPage)
        initPages();   
@@ -100,6 +102,7 @@ function loadImages(sources, callback)
 
 function init() 
 {   
+    document.documentElement.style.overflow = 'hidden';
     var activeAccount = null;
     var listener = {
        "onAccountUpdated": function(account) {}, 
@@ -136,11 +139,13 @@ function init()
     bgCanvas = document.getElementById("bgCanvas");
     buttonCanvas = document.getElementById("buttonCanvas");
     mouseClicksLayer = document.getElementById("mouseClicks");
+    callCanvas = document.getElementById("callCanvas");
 
     mainCtx = mainCanvas.getContext("2d");
     bgCtx = bgCanvas.getContext("2d");
     buttonCtx = buttonCanvas.getContext("2d");
     mouseCtx = mouseClicksLayer.getContext("2d");
+    callCtx = callCanvas.getContext("2d");
 
     var sources = {
 phoneIcon: "images/bluetooth-smartphone.png",
@@ -198,7 +203,8 @@ onIncoming: function(call) {
                initCallPage(currentState);    
                updateNumber(call.callData.LineIdentification);
                updateCallStateText("Incoming Call...");
-               switchMenu(callPage);
+               animateIncoming();
+               //switchMenu(callPage);
            },
 onDialing: function(call) {
               activeCall = call;
@@ -207,22 +213,37 @@ onAlerting: function(call) {
                activeCall = call;
            },
 onDisconnected: function(call, disconnectReason) {
-                   activeCall = null;
-                   stopTimer();
-                   switchMenu(mainPage);
+                   if (currentState !== "idle")
+                   {
+                       currentState = "idle";
+                       activeCall = null;
+                       stopTimer();
+                       animateFinished();
+                   }
+                   //switchMenu(mainPage);
                },
 onDisconnecting: function(call) {
-                    stopTimer();
-                    switchMenu(mainPage);
+                    if (currentState !== "idle")
+                    {
+                        currentState = "idle";
+                        stopTimer();
+                        animateFinished();
+                    }
+                    //switchMenu(mainPage);
                 },
 onAccepted: function(call) {
                startTimer();
+               initButtons("activeCall");            
                updateCallStateText("Active");
+               callPage.drawMenu();
                activeCall = call;
            },
 onActivated: function(call) {
-                updateCallStateText("Active");
                 startTimer();
+                initButtons("activeCall");            
+                updateCallStateText("Active");
+                callPage.drawMenu();
+                activeCall = call;
             },
 onError: function(call){
             console.log("onError: "); console.log(call);
@@ -233,7 +254,7 @@ onError: function(call){
 
 function switchMenu(nextMenu)
 {   
-    currentPage.visible = false;               
+    //currentPage.visible = false;             
     currentPage = nextMenu; 
     currentPage.visible = true;
     currentPage.drawMenu();    

diff --git a/js/mainPage.js b/js/mainPage.js
index 4cfcc35..490d55b 100644 (file)
--- a/js/mainPage.js
+++ b/js/mainPage.js
@@ -123,7 +123,8 @@ function addButtonGrid (gridX, gridY, gridWidth, gridHeight)
        initCallPage("dialing");
        updateNumber(dialNumber);
        updateCallStateText("Dialing...");
-       switchMenu(callPage);           
+       //switchMenu(callPage);         
+       animateDialing();
        currentState = "dialing";       
     };
 
@@ -135,8 +136,9 @@ function addButtonGrid (gridX, gridY, gridWidth, gridHeight)
 
 function initMainPage()
 {
+    var spacer = 20;
     var textAreaHeight = screenHeight / 4;
-    var buttonPadWidth = screenWidth * 0.75;
+    var buttonPadWidth = screenWidth - (spacer * 2);// * 0.75;
     var buttonPadHeight = screenHeight - textAreaHeight - 60;
     errorTextTemplate.font = "bold " + ((screenHeight * 0.6) / 6) + "px Arial";
 
@@ -145,11 +147,11 @@ function initMainPage()
 
     mainPage.addObject(mainCtx, "image", {"name" : "buttonBG","image": images.buttonBG, "xLoc" : 20, "yLoc" : textAreaHeight + 40, "width" : buttonPadWidth, "height" : buttonPadHeight} );    
 
-    var myobj = mainPage.addObject(mainCtx, "shape", {"name" : "optionsBG", "xLoc" : 40 + buttonPadWidth, "yLoc" : 0, "width" : (screenWidth * 0.25) - 60, "height" : screenHeight, 
-           "fillStyle" : "#51504F", "strokeStyle" : "#373736", "lineWidth" : 5});    
+    //    var myobj = mainPage.addObject(mainCtx, "shape", {"name" : "optionsBG", "xLoc" : 40 + buttonPadWidth, "yLoc" : 0, "width" : (screenWidth * 0.25) - 60, "height" : screenHeight, 
+    //     "fillStyle" : "#51504F", "strokeStyle" : "#373736", "lineWidth" : 5});    
 
-    var myobj = mainPage.addObject(mainCtx, "shape", {"name" : "optionsBG", "xLoc" : 40 + buttonPadWidth, "yLoc" : 0, "width" : (screenWidth * 0.25) - 60, "height" : screenHeight, 
-           "fillStyle" : "#51504F", "strokeStyle" : "#373736", "lineWidth" : 5});
+    // var myobj = mainPage.addObject(mainCtx, "shape", {"name" : "optionsBG", "xLoc" : 40 + buttonPadWidth, "yLoc" : 0, "width" : (screenWidth * 0.25) - 60, "height" : screenHeight, 
+    //     "fillStyle" : "#51504F", "strokeStyle" : "#373736", "lineWidth" : 5});
 
     /************************************** Lock Screen Objects *************************************/
 

diff --git a/packaging/webdialer.changes b/packaging/webdialer.changes
index 1a4baf5..3383fcf 100644 (file)
--- a/packaging/webdialer.changes
+++ b/packaging/webdialer.changes
@@ -1 +1,16 @@
+* Wed Sep 12 2012 bjones <None> submit/trunk/20120912.200040@3f1fa1e
+- Correcting execution call and adding dependencies to spec
+- Initial commit to tizen.org
+- Adding icon
+- Merge "Initial commit to tizen.org"
+- adding Tizen packaging
+- Buttons will now flash when clicked, indicator now specifies the call state on the call page, pressing and holding the del key will clear the entire number, and a few other graphical tweaks.
+- Adding indicator for call state on the current call page.
+- Added a popup for when a modem is not available. While the popup is visible it disables the dialer. Call page now disappears once the call is ended. Minor fixes to timer.
+- Fixing bug in the callback for an incoming call
+- Dialer now shows incoming calls
+- Adding closing bracket back in
+- Formatting text
+- Initial commit of the webapp used for hands free dialing
+