From: Brian Jones Date: Wed, 12 Sep 2012 21:27:40 +0000 (-0700) Subject: Adding smoother transitions between events X-Git-Tag: accepted/trunk/20120912.222248^0 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;p=profile%2Fivi%2Fwebdialer.git Adding smoother transitions between events --- diff --git a/index.html b/index.html index c102256..7f91587 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,7 @@ + diff --git a/js/callPage.js b/js/callPage.js index da37003..5c15dd3 100644 --- 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 --- 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 --- 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 --- 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 --- a/packaging/webdialer.changes +++ b/packaging/webdialer.changes @@ -1 +1,16 @@ +* Wed Sep 12 2012 bjones 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 +