js/dialer.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 mainCanvas, bgCanvas, buttonCanvas;
  11 var mainCtx, bgCtx, buttonCtx;
  12 var drawn = false;
  13 var screenHeight;
  14 var screenWidth;
  15 var images = [];
  16 var objects = [];
  17 var ws = null;
  18 var mouseDrag = false, mouseDown = false;
  19 var prevXMouse, prevYMouse;
  20
  21 var mainPageTitleTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "center",
  22     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 32, "shadowColor" : "rgba(0, 0, 110, 1.0)"};
  23
  24 var mainPageButtonTemplate = {"font" : "bold 20pt Arial", "lineWidth" : 1.5, "strokeStyle" : "white", "textAlign" : "center", "textBaseline" : "middle",
  25     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 10, "shadowColor" : "black"};
  26
  27 var buttonTextTemplate = {"font" : "bold 30pt Arial", "fillStyle" : "white", "textAlign" : "center", "textBaseline" : "middle",
  28     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 12, "shadowColor" : "rgba(50, 50, 50, 1.0)"};
  29
  30 var mainPage = new MenuObject({"name" : "main", "xLoc" : 0, "yLoc" : 0, "visible" : true});
  31 var callPage = new MenuObject({"name" : "incomingCall", "xLoc" : 0, "yLoc" : 0, "visible" : true});
  32
  33 var currentPage = mainPage;
  34 var currentNumber = " ";
  35 var currentState = "idle";
  36
  37 function onMouseDown(event)
  38 {
  39
  40     var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY);
  41
  42     if (selectedObj && selectedObj.onClick)
  43         selectedObj.onClick(event);
  44
  45     prevXMouse = event.clientX;
  46     prevYMouse = event.clientY;
  47 }
  48
  49 function onMouseMove(event)
  50 {
  51     var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY);
  52     if (selectedObj && selectedObj.onMove)
  53         selectedObj.onMove(event);
  54
  55     prevXMouse = event.clientX;
  56     prevYMouse = event.clientY;
  57 }
  58
  59 function onMouseUp(event)
  60 {
  61
  62 }
  63
  64 function resizeCanvas()
  65 {
  66     screenWidth = $(window).width();
  67     screenHeight = $(window).height();
  68
  69     $(mainCanvas).attr('width', screenWidth);
  70     $(mainCanvas).attr('height', screenHeight);
  71     $(bgCanvas).attr('width', screenWidth);
  72     $(bgCanvas).attr('height', screenHeight);
  73     $(buttonCanvas).attr('width', screenWidth);
  74     $(buttonCanvas).attr('height', screenHeight);
  75     $(mouseClicksLayer).attr('width', screenWidth);
  76     $(mouseClicksLayer).attr('height', screenHeight);
  77
  78     if (currentPage)
  79         initPages();
  80 }
  81
  82 function loadImages(sources, callback)
  83 {
  84     var loadedImages = 0;
  85     var numImages = 0;
  86
  87     for (var src in sources)
  88     {
  89         numImages++;
  90     }
  91     for (var src in sources)
  92     {
  93         images[src] = new Image();
  94         images[src].onload = function(){
  95             if (++loadedImages >= numImages) {
  96                 callback(images);
  97             }
  98         };
  99         images[src].src = sources[src];
 100     }
 101 }
 102
 103 function handleMsg(incomingMsg)
 104 {
 105     if (incomingMsg.event)
 106     {
 107         switch (incomingMsg.event)
 108         {
 109             case "incoming_call":
 110                 currentState = "incomingCall";
 111                 initCallPage("incomingCall");
 112                 switchMenu("callPage");
 113                 break;
 114             default:
 115                 break;
 116         }
 117     }
 118 }
 119
 120 function connect()
 121 {
 122     var host = window.location.hostname;
 123     ws = new WebSocket("ws://localhost:9999/");
 124
 125     ws.onopen = function() {
 126         send({
 127                 "type": "connect",
 128                 });
 129         console.log("Attempting to connect");
 130     };
 131
 132     ws.onmessage = function (e) {
 133         jsonMsg = JSON.parse(e.data);
 134         handleMsg(jsonMsg);
 135         console.log(e.data);
 136     };
 137
 138     ws.onclose = function(e) {
 139         alert("Connecition closed");
 140         console.log(e);
 141     };
 142 }
 143
 144 function send(msg)
 145 {
 146     jsonMsg = JSON.stringify(msg);
 147     ws.send(jsonMsg);
 148     console.log("sent message: " + jsonMsg);
 149 }
 150
 151 function init()
 152 {
 153     connect();
 154     mainCanvas = document.getElementById("mainCanvas");
 155     bgCanvas = document.getElementById("bgCanvas");
 156     buttonCanvas = document.getElementById("buttonCanvas");
 157     mouseClicksLayer = document.getElementById("mouseClicks");
 158
 159     mainCtx = mainCanvas.getContext("2d");
 160     bgCtx = bgCanvas.getContext("2d");
 161     buttonCtx = buttonCanvas.getContext("2d");
 162
 163     var sources = {
 164            phoneIcon: "images/bluetooth-smartphone.png",
 165            callButton: "images/ivi_btn-call.png",
 166            callButtonPressed: "images/ivi_btn-call-active.png",
 167            closeButton: "images/ivi_btn-close.png",
 168            deleteButton: "images/ivi_btn-delete.png",
 169            deleteButtonActive: "images/ivi_btn-delete-active.png",
 170            endCallButton: "images/ivi_btn-endcall.png",
 171            endCallButtonActive: "images/ivi_btn-endcall-active.png",
 172            incomingAcceptButton: "images/ivi_btn-incomingcall-accept.png",
 173            incomingAcceptButtonActive: "images/ivi_btn-incomingcall-accept-active.png",
 174            incomingDeclineButton: "images/ivi_btn-incomingcall-decline.png",
 175            incomingDeclineButtonActive: "images/ivi_btn-incomingcall-decline-active.png",
 176            listItem: "images/ivi_btn-list.png",
 177            listItemActive: "images/ivi_btn-list-active.png",
 178            numberButton: "images/ivi_btn-numbers.png",
 179            numberButtonActive: "images/ivi_btn-numbers-active.png",
 180            buttonBG: "images/ivi_buttonarea.png",
 181            callIcon: "images/ivi_icon-call.png",
 182            deleteIcon: "images/ivi_icon-delete.png",
 183            endCallIcon: "images/ivi_icon-endcall.png",
 184            deleteListItemIcon: "images/ivi_icon-list-delete.png",
 185            deleteListItemIconActive: "images/ivi_icon-list-delete-active.png",
 186            clockIcon: "images/ivi_icon-time.png",
 187            textArea: "images/ivi_textarea.png",
 188            bgImage: "images/ivi-v1_ivi-background.jpg"
 189     };
 190
 191     loadImages(sources, resizeCanvas);
 192
 193     resizeCanvas();
 194     resizeCanvas();
 195
 196     $(window).bind('resize', resizeCanvas);
 197
 198     mouseClicksLayer.addEventListener('mousedown', onMouseDown);
 199     mouseClicksLayer.addEventListener('mousemove', onMouseMove);
 200     mouseClicksLayer.addEventListener('mouseup', onMouseUp);
 201 }
 202
 203 function switchMenu(nextMenu)
 204 {
 205     currentPage.visible = false;
 206     currentPage = nextMenu;
 207     currentPage.visible = true;
 208     currentPage.drawMenu();
 209 }
 210
 211 function initPages()
 212 {
 213     initMainPage();
 214     initCallPage(currentState);
 215
 216     bgCtx.drawImage(images.bgImage, 0, 0, screenWidth, screenHeight);
 217     currentPage.drawMenu();
 218 }
 219
 220
 221 $(document).ready(function () {
 222         init();
 223         });