js/mainPage.js

   1 /*
   2  * Copyright (c) 2012, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 var phoneNumberTextTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "center",  "textBaseline" : "middle",
  11     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 32, "shadowColor" : "rgba(0,100,150, 0.6)"};
  12
  13 var sideTextTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "fillStyle" : "grey", "strokeStyle" : "white", "textAlign" : "center",  "textBaseline" : "middle",
  14     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 52, "shadowColor" : "rgba(0, 0, 110, 1.0)", "wordWrap" : true};
  15
  16 var errorTextTemplate = {"font" : "bold 50px Arial", "lineWidth" : 2.5, "fillStyle" : "red", "strokeStyle" : "rgba(150, 0, 0, 1.0)", "textAlign" : "center",  "textBaseline" : "middle",
  17     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 52, "shadowColor" : "rgba(0, 0, 0, 1.0)", "wordWrap" : true};
  18
  19 var dialNumber = "";
  20
  21 function addDashes()
  22 {
  23     if (dialNumber.length === 10)
  24     {
  25         var number = mainPage.getObj("textArea").textObj.text
  26             number = number.slice(0,3) + '-' + number.slice(3,6) + '-' + number.slice(6,10);
  27         mainPage.getObj("textArea").textObj.text = number;
  28     }
  29     else
  30         mainPage.getObj("textArea").textObj.text = dialNumber;
  31 }
  32
  33 function addButtonGrid (gridX, gridY, gridWidth, gridHeight)
  34 {
  35     var spacer = 5;
  36     var iconWidth = ((gridWidth - (spacer * 4)) / 3);
  37     var iconHeight = ((gridHeight - (spacer * 6)) / 5);
  38
  39     var iconXPosition = gridX + spacer;
  40     var iconYPosition = gridY + spacer;
  41     var firstIconXPosition = iconXPosition;
  42     var buttonNum = 1;
  43     var buttonText = "";
  44
  45     for (var i = 0; i < 12; i++)
  46     {
  47         if (buttonNum > 9)
  48         {
  49             switch (buttonNum)
  50             {
  51                 case 10:
  52                     buttonText = "*";
  53                     break;
  54                 case 11:
  55                     buttonText = "0";
  56                     break;
  57                 case 12:
  58                     buttonText = "#";
  59                     break;
  60             }
  61         }
  62         else
  63             buttonText = buttonNum.toString();
  64
  65         var button = mainPage.addObject(buttonCtx, "button", {"name" : buttonText, "image": images.numberButton, "text" : buttonText, "textTemplate" : buttonTextTemplate, "xLoc" : iconXPosition,
  66                 "yLoc" : iconYPosition, "width" : iconWidth, "height" : iconHeight} );
  67
  68         button.onClick = function(){
  69             this.img = images.numberButtonActive;
  70             dialNumber += this.name;
  71             mainPage.getObj("textArea").textObj.text += this.name;
  72             addDashes();
  73             mainPage.drawMenu();
  74         };
  75
  76         button.onRelease = function() {
  77             this.img = images.numberButton;
  78             mainPage.drawMenu();
  79         };
  80
  81         iconXPosition += (iconWidth + spacer);
  82
  83         if ((i + 1) % 3 === 0)
  84         {
  85             iconYPosition += (iconHeight + spacer);
  86             iconXPosition = firstIconXPosition;
  87         }
  88
  89         buttonNum += 1;
  90     }
  91
  92     buttonNum = 13;
  93     button = mainPage.addObject(buttonCtx, "button", {"name" : "del", "image": images.deleteButton, "icon": images.deleteIcon, "iconWidth" : iconHeight * 0.9, "iconHeight" : iconHeight * 0.9,
  94             "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth, "height" : iconHeight} );
  95     iconXPosition += (iconWidth + spacer);
  96     button.onClick = function(){
  97         this.img = images.deleteButtonActive;
  98         this.holdTimeOut = setTimeout(function() {dialNumber = ""; mainPage.getObj("textArea").textObj.text = ""; mainPage.drawMenu();}, 600);
  99         dialNumber = dialNumber.slice(0,-1);
 100         mainPage.getObj("textArea").textObj.text = mainPage.getObj("textArea").textObj.text.slice(0,-1);
 101         addDashes();
 102         mainPage.drawMenu();
 103     };
 104
 105     button.onRelease = function() {
 106         clearTimeout(this.holdTimeOut);
 107         this.img = images.deleteButton;
 108         mainPage.drawMenu();
 109     };
 110
 111     buttonNum = 14;
 112     button = mainPage.addObject(buttonCtx, "button", {"name" : "call", "image": images.callButton, "icon": images.callIcon, "iconWidth" : iconHeight * 0.9, "iconHeight" : iconHeight * 0.9,
 113             "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth * 2 + spacer, "height" : iconHeight} );
 114
 115     button.onClick = function(){
 116         this.img = images.callButtonActive;
 117         try {
 118             activeService.makeCall(dialNumber);
 119         } catch (err) {
 120             console.log("Attempting to make call without an available modem");
 121             return;
 122         }
 123         initCallPage("dialing");
 124         updateNumber(dialNumber);
 125         updateCallStateText("Dialing...");
 126         //switchMenu(callPage);
 127         animateDialing();
 128         currentState = "dialing";
 129     };
 130
 131     button.onRelease = function() {
 132         this.img = images.callButton;
 133         mainPage.drawMenu();
 134     };
 135 }
 136
 137 function initMainPage()
 138 {
 139     var spacer = 20;
 140     var textAreaHeight = screenHeight / 4;
 141     var buttonPadWidth = screenWidth - (spacer * 2);// * 0.75;
 142     var buttonPadHeight = screenHeight - textAreaHeight - 60;
 143     errorTextTemplate.font = "bold " + ((screenHeight * 0.6) / 6) + "px Arial";
 144
 145     addButtonGrid(20, textAreaHeight + 40, buttonPadWidth, buttonPadHeight);
 146     mainPage.addObject(mainCtx, "image", {"name" : "textArea", "image": images.textArea, "text" : "", "textTemplate" : phoneNumberTextTemplate, "xLoc" : 20, "yLoc" : 20, "width" : buttonPadWidth, "height" : textAreaHeight} );
 147
 148     mainPage.addObject(mainCtx, "image", {"name" : "buttonBG","image": images.buttonBG, "xLoc" : 20, "yLoc" : textAreaHeight + 40, "width" : buttonPadWidth, "height" : buttonPadHeight} );
 149
 150     //    var myobj = mainPage.addObject(mainCtx, "shape", {"name" : "optionsBG", "xLoc" : 40 + buttonPadWidth, "yLoc" : 0, "width" : (screenWidth * 0.25) - 60, "height" : screenHeight,
 151     //      "fillStyle" : "#51504F", "strokeStyle" : "#373736", "lineWidth" : 5});
 152
 153     //  var myobj = mainPage.addObject(mainCtx, "shape", {"name" : "optionsBG", "xLoc" : 40 + buttonPadWidth, "yLoc" : 0, "width" : (screenWidth * 0.25) - 60, "height" : screenHeight,
 154     //      "fillStyle" : "#51504F", "strokeStyle" : "#373736", "lineWidth" : 5});
 155
 156     /************************************** Lock Screen Objects *************************************/
 157
 158     var fog = mainPage.addObject(mouseCtx, "shape", {"name" : "fog", "xLoc" : 0, "yLoc" : 0, "zLoc" : 3, "width" : screenWidth,
 159             "height" : screenHeight, "fillStyle" : "rgba(100,100,100,0.7)", "visible" : noModems});
 160
 161     var textBox = mainPage.addObject(mouseCtx, "shape", {"name" : "textBox", "rounded" : true, "xLoc" : screenWidth * 0.1, "yLoc" : screenHeight * 0.2, "zLoc" : 4, "width" : screenWidth * 0.8,
 162             "height" : screenHeight * 0.6, "fillStyle" : "white", "strokeStyle" : "#85322A", "lineWidth" : 35, "visible" : noModems, "text" : "No modems available!", "textTemplate" : errorTextTemplate});
 163
 164 }