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 {
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();
};
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');
+}
*
*/
-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;
$(buttonCanvas).attr('height', screenHeight);
$(mouseClicksLayer).attr('width', screenWidth);
$(mouseClicksLayer).attr('height', screenHeight);
+ $(callCanvas).attr('width', screenWidth);
+ $(callCanvas).attr('height', screenHeight);
if (currentPage)
initPages();
function init()
{
+ document.documentElement.style.overflow = 'hidden';
var activeAccount = null;
var listener = {
"onAccountUpdated": function(account) {},
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",
initCallPage(currentState);
updateNumber(call.callData.LineIdentification);
updateCallStateText("Incoming Call...");
- switchMenu(callPage);
+ animateIncoming();
+ //switchMenu(callPage);
},
onDialing: function(call) {
activeCall = 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);
function switchMenu(nextMenu)
{
- currentPage.visible = false;
+ //currentPage.visible = false;
currentPage = nextMenu;
currentPage.visible = true;
currentPage.drawMenu();
initCallPage("dialing");
updateNumber(dialNumber);
updateCallStateText("Dialing...");
- switchMenu(callPage);
+ //switchMenu(callPage);
+ animateDialing();
currentState = "dialing";
};
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";
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 *************************************/