2 * Copyright (c) 2012, Intel Corporation.
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
10 var mainCanvas, bgCanvas, buttonCanvas;
11 var mainCtx, bgCtx, buttonCtx;
18 var mouseDrag = false, mouseDown = false;
19 var prevXMouse, prevYMouse;
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)"};
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"};
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)"};
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});
33 var currentPage = mainPage;
34 var currentNumber = " ";
35 var currentState = "idle";
37 function onMouseDown(event)
40 var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY);
42 if (selectedObj && selectedObj.onClick)
43 selectedObj.onClick(event);
45 prevXMouse = event.clientX;
46 prevYMouse = event.clientY;
49 function onMouseMove(event)
51 var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY);
52 if (selectedObj && selectedObj.onMove)
53 selectedObj.onMove(event);
55 prevXMouse = event.clientX;
56 prevYMouse = event.clientY;
59 function onMouseUp(event)
64 function resizeCanvas()
66 screenWidth = $(window).width();
67 screenHeight = $(window).height();
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);
82 function loadImages(sources, callback)
87 for (var src in sources)
91 for (var src in sources)
93 images[src] = new Image();
94 images[src].onload = function(){
95 if (++loadedImages >= numImages) {
99 images[src].src = sources[src];
103 function handleMsg(incomingMsg)
105 if (incomingMsg.event)
107 switch (incomingMsg.event)
109 case "incoming_call":
110 currentState = "incomingCall";
111 initCallPage("incomingCall");
112 switchMenu("callPage");
122 var host = window.location.hostname;
123 ws = new WebSocket("ws://localhost:9999/");
125 ws.onopen = function() {
129 console.log("Attempting to connect");
132 ws.onmessage = function (e) {
133 jsonMsg = JSON.parse(e.data);
138 ws.onclose = function(e) {
139 alert("Connecition closed");
146 jsonMsg = JSON.stringify(msg);
148 console.log("sent message: " + jsonMsg);
154 mainCanvas = document.getElementById("mainCanvas");
155 bgCanvas = document.getElementById("bgCanvas");
156 buttonCanvas = document.getElementById("buttonCanvas");
157 mouseClicksLayer = document.getElementById("mouseClicks");
159 mainCtx = mainCanvas.getContext("2d");
160 bgCtx = bgCanvas.getContext("2d");
161 buttonCtx = buttonCanvas.getContext("2d");
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"
191 loadImages(sources, resizeCanvas);
196 $(window).bind('resize', resizeCanvas);
198 mouseClicksLayer.addEventListener('mousedown', onMouseDown);
199 mouseClicksLayer.addEventListener('mousemove', onMouseMove);
200 mouseClicksLayer.addEventListener('mouseup', onMouseUp);
203 function switchMenu(nextMenu)
205 currentPage.visible = false;
206 currentPage = nextMenu;
207 currentPage.visible = true;
208 currentPage.drawMenu();
214 initCallPage(currentState);
216 bgCtx.drawImage(images.bgImage, 0, 0, screenWidth, screenHeight);
217 currentPage.drawMenu();
221 $(document).ready(function () {