Buttons will now flash when clicked, indicator now specifies the call state on the...

and holding the del key will clear the entire number, and a few other graphical tweaks.

diff --git a/js/callPage.js b/js/callPage.js
index 6d977c5..da37003 100644 (file)
--- a/js/callPage.js
+++ b/js/callPage.js
@@ -46,17 +46,17 @@ function updateCallStateText(newState)
     {
        case "Dialing..." :
            callStateTextObj.fillStyle = "white";
-           callStateTextObj.strokeStyle = "grey";
-           callStateTextObj.shadowColor = "rgba(0,0,0,1.0)";
+           callStateTextObj.strokeStyle = "#00ADFF";
+           callStateTextObj.shadowColor = "#00ADFF"; 
            break;
        case "Incoming Call..." :
-           callStateTextObj.fillStyle = "red";
-           callStateTextObj.strokeStyle = "#B30000";
+           callStateTextObj.fillStyle = "white";
+           callStateTextObj.strokeStyle = "#FF8C00";
            callStateTextObj.lineWidth = 1;
-           callStateTextObj.shadowColor = "rgba(200,0,0,0.7)";
+           callStateTextObj.shadowColor = "#FF8C00";
            break;
        case "Active" :
-           callStateTextObj.fillStyle = "#3CBF48";
+           callStateTextObj.fillStyle = "white";
            callStateTextObj.strokeStyle = "green";
            callStateTextObj.lineWidth = 1;
            callStateTextObj.shadowColor = "rgba(0,200,0,0.7)";

diff --git a/js/dialer.js b/js/dialer.js
index b13b82a..e36ab23 100644 (file)
--- a/js/dialer.js
+++ b/js/dialer.js
@@ -37,12 +37,13 @@ var currentState = "idle";
 var activeCall = null;
 var activeService = null;
 var noModems = false;
+var selectedObj;
 
 function onMouseDown(event) 
 {      
     if (!clicksDisabled)
     {
-       var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY);         
+       selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY);             
 
        if (selectedObj && selectedObj.onClick)
            selectedObj.onClick(event);
@@ -52,19 +53,10 @@ function onMouseDown(event)
     }
 }
 
-function onMouseMove(event) 
-{
-    var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY);            
-    if (selectedObj && selectedObj.onMove)
-       selectedObj.onMove(event);
-
-    prevXMouse = event.clientX;
-    prevYMouse = event.clientY;        
-}
-
 function onMouseUp(event) 
 {      
-
+    if (selectedObj && selectedObj.onRelease)
+       selectedObj.onRelease(event);
 }
 
 function resizeCanvas() 
@@ -153,7 +145,7 @@ function init()
     var sources = {
 phoneIcon: "images/bluetooth-smartphone.png",
           callButton: "images/ivi_btn-call.png",
-          callButtonPressed: "images/ivi_btn-call-active.png",
+          callButtonActive: "images/ivi_btn-call-active.png",
           closeButton: "images/ivi_btn-close.png",
           deleteButton: "images/ivi_btn-delete.png",
           deleteButtonActive: "images/ivi_btn-delete-active.png",
@@ -185,8 +177,7 @@ phoneIcon: "images/bluetooth-smartphone.png",
 
     $(window).bind('resize', resizeCanvas);
 
-    mouseClicksLayer.addEventListener('mousedown', onMouseDown);
-    mouseClicksLayer.addEventListener('mousemove', onMouseMove);
+    mouseClicksLayer.addEventListener('mousedown', onMouseDown);   
     mouseClicksLayer.addEventListener('mouseup', onMouseUp);
 
     tizen.account.addAccountListener(listener);

diff --git a/js/mainPage.js b/js/mainPage.js
index 7ddcf53..4cfcc35 100644 (file)
--- a/js/mainPage.js
+++ b/js/mainPage.js
@@ -16,6 +16,20 @@ var sideTextTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "fillStyl
 var errorTextTemplate = {"font" : "bold 50px Arial", "lineWidth" : 2.5, "fillStyle" : "red", "strokeStyle" : "rgba(150, 0, 0, 1.0)", "textAlign" : "center",  "textBaseline" : "middle",
     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 52, "shadowColor" : "rgba(0, 0, 0, 1.0)", "wordWrap" : true};     
 
+var dialNumber = "";
+
+function addDashes()
+{   
+    if (dialNumber.length === 10)
+    {
+       var number = mainPage.getObj("textArea").textObj.text
+           number = number.slice(0,3) + '-' + number.slice(3,6) + '-' + number.slice(6,10);
+       mainPage.getObj("textArea").textObj.text = number;
+    }   
+    else
+       mainPage.getObj("textArea").textObj.text = dialNumber;          
+}
+
 function addButtonGrid (gridX, gridY, gridWidth, gridHeight)
 {              
     var spacer = 5;
@@ -52,10 +66,18 @@ function addButtonGrid (gridX, gridY, gridWidth, gridHeight)
                "yLoc" : iconYPosition, "width" : iconWidth, "height" : iconHeight} );          
 
        button.onClick = function(){                        
-           mainPage.getObj("textArea").textObj.text += this.name;
+           this.img = images.numberButtonActive;
+           dialNumber += this.name;
+           mainPage.getObj("textArea").textObj.text += this.name;          
+           addDashes();          
            mainPage.drawMenu();                                
        };
 
+       button.onRelease = function() {
+           this.img = images.numberButton;
+           mainPage.drawMenu();
+       };
+
        iconXPosition += (iconWidth + spacer);
 
        if ((i + 1) % 3 === 0)
@@ -71,17 +93,27 @@ function addButtonGrid (gridX, gridY, gridWidth, gridHeight)
     button = mainPage.addObject(buttonCtx, "button", {"name" : "del", "image": images.deleteButton, "icon": images.deleteIcon, "iconWidth" : iconHeight * 0.9, "iconHeight" : iconHeight * 0.9, 
            "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth, "height" : iconHeight} );
     iconXPosition += (iconWidth + spacer);
-    button.onClick = function(){                           
+    button.onClick = function(){       
+       this.img = images.deleteButtonActive;
+       this.holdTimeOut = setTimeout(function() {dialNumber = ""; mainPage.getObj("textArea").textObj.text = ""; mainPage.drawMenu();}, 600);
+       dialNumber = dialNumber.slice(0,-1);  
        mainPage.getObj("textArea").textObj.text = mainPage.getObj("textArea").textObj.text.slice(0,-1);
+       addDashes();                            
+       mainPage.drawMenu();
+    };
+
+    button.onRelease = function() {
+       clearTimeout(this.holdTimeOut);
+       this.img = images.deleteButton;
        mainPage.drawMenu();
-    };                         
+    };
+
     buttonNum = 14;            
     button = mainPage.addObject(buttonCtx, "button", {"name" : "call", "image": images.callButton, "icon": images.callIcon, "iconWidth" : iconHeight * 0.9, "iconHeight" : iconHeight * 0.9, 
            "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth * 2 + spacer, "height" : iconHeight} );
 
     button.onClick = function(){                           
-       var dialNumber = mainPage.getObj("textArea").textObj.text;
-
+       this.img = images.callButtonActive;
        try {
            activeService.makeCall(dialNumber);
        } catch (err) {
@@ -90,8 +122,14 @@ function addButtonGrid (gridX, gridY, gridWidth, gridHeight)
        }
        initCallPage("dialing");
        updateNumber(dialNumber);
+       updateCallStateText("Dialing...");
        switchMenu(callPage);           
        currentState = "dialing";       
+    };
+
+    button.onRelease = function() {
+       this.img = images.callButton;
+       mainPage.drawMenu();
     };         
 }
 
@@ -110,6 +148,9 @@ function initMainPage()
     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 *************************************/
 
     var fog = mainPage.addObject(mouseCtx, "shape", {"name" : "fog", "xLoc" : 0, "yLoc" : 0, "zLoc" : 3, "width" : screenWidth,