00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016 var Viewer2d = Viewer2d || {};
00017
00018
00020
00021
00022
00023
00024 Viewer2d.launch = function() {
00025
00026 Debug.log("Viewer2d.launch");
00027
00028 Viewer2d.omni = document.getElementById("omni");
00029 Viewer2d.omni.innerHTML = "";
00030
00031
00032 var w = Viewer2d.w = window.innerWidth;
00033 var h = Viewer2d.h = window.innerHeight;
00034
00035 Viewer2d.omni.style.position = "absolute";
00036 Viewer2d.omni.style.left = 0 + "px";
00037 Viewer2d.omni.style.top = 0 + "px";
00038 Viewer2d.omni.style.width = w + "px";
00039 Viewer2d.omni.style.height = h + "px";
00040 Viewer2d.omni.style.backgroundColor = "rgb(30,30,30)";
00041
00042 Viewer2d.omni.innerHTML = "<center><div style='margin-top:" + (h/2-8) + "px'>Loading 2-D...</div></center>";
00043
00044
00045
00046
00047
00048
00049
00050
00051
00052
00053 Viewer2d.initCanvas();
00054 }
00055
00056
00058
00059
00060 Viewer2d.CANVAS_COLOR = "rgb(102,0,51)";
00061 Viewer2d.CANVAS_MIN_SIZE = 300;
00062 Viewer2d.HUD_WIDTH = 200;
00063 Viewer2d.HUD_MARGIN_RIGHT = 10;
00064 Viewer2d.HUD_DROP_DOWN_SPEED = 10;
00065 Viewer2d.TICK_REFRESH_PERIOD = 30;
00066
00067 Viewer2d.omni;
00068 Viewer2d.hud;
00069 Viewer2d.canvas;
00070 Viewer2d.context;
00071 Viewer2d.w;
00072 Viewer2d.h;
00073 Viewer2d.tickTimer;
00074
00075 Viewer2d.drawGridFlag = true;
00076 Viewer2d.globalAccumulate = true;
00077
00078
00079
00080
00081
00082
00083
00084
00085
00086 Viewer2d.stations = [];
00087
00088
00089
00090
00091
00092
00093
00094
00095
00096
00097
00098 Viewer2d.initCanvas = function() {
00099
00100 Viewer2d.canvas = document.createElement('canvas');
00101 Viewer2d.canvas.style.position = "absolute";
00102 Viewer2d.canvas.style.left = 0 + "px";
00103 Viewer2d.canvas.style.top = 0 + "px";
00104 Viewer2d.canvas.style.zIndex = -1;
00105 Viewer2d.canvas.style.backgroundColor = Viewer2d.CANVAS_COLOR;
00106 Viewer2d.context = Viewer2d.canvas.getContext('2d');
00107
00108 Viewer2d.omni.appendChild(Viewer2d.canvas);
00109
00110 Viewer2d.hud = new Viewer2d.createHud();
00111
00112 window.onresize = Viewer2d.handleWindowResize;
00113 Viewer2d.handleWindowResize();
00114
00115 Viewer2d.getConfiguration();
00116
00117
00118
00119 }
00120
00121
00122
00123 Viewer2d.tick = function() {
00124 Viewer2d.redraw();
00125 }
00126
00127 Viewer2d.handleWindowResize = function() {
00128
00129 var w = window.innerWidth < Viewer2d.CANVAS_MIN_SIZE? Viewer2d.CANVAS_MIN_SIZE:window.innerWidth;
00130 var h = window.innerHeight < Viewer2d.CANVAS_MIN_SIZE? Viewer2d.CANVAS_MIN_SIZE:window.innerHeight;
00131
00132 Debug.log("Viewer2d.handleWindowResize " + w + "-" + h);
00133
00134 Viewer2d.omni.style.width = w + "px";
00135 Viewer2d.omni.style.height = h + "px";
00136 Viewer2d.canvas.style.width = w + "px";
00137 Viewer2d.canvas.style.height = h + "px";
00138 Viewer2d.canvas.width = w;
00139 Viewer2d.canvas.height = h;
00140
00141
00142 Viewer2d.hud.handleWindowResize();
00143
00144
00145 Viewer2d.redraw();
00146 }
00147
00148 Viewer2d.createHud = function() {
00149
00150 var hudMouseOverDiv;
00151 var animationTargetTop, isDropDownAnimating, isDropDownDown;
00152 var controlMouseIsDown = false;
00153 var controlMouseTimeout = 0;
00154 var getEventsTimeout = 0;
00155
00156 this.isInMotion = function() { return isDropDownAnimating; }
00157
00158 this.handleWindowResize = function() {
00159 Debug.log("Viewer2d Hud handleWindowResize");
00160 this.hudMouseOverDiv.style.left = window.innerWidth - this.hudMouseOverDiv.offsetWidth - Viewer2d.HUD_MARGIN_RIGHT + "px";
00161
00162 this.hudNavSpeedDiv.style.left = 5 + "px";
00163 this.hudNavSpeedDiv.style.top = window.innerHeight - 95 + "px";
00164 }
00165
00166 this.checkboxUpdate = function(i) {
00167 var chk = document.getElementById("hudCheckbox" + i);
00168 Debug.log("Viewer2d Hud checkboxUpdate " + i + "=" + chk.checked);
00169
00170 if(i==0) Viewer2d.drawGridFlag = chk.checked;
00171 else if(i==1) Viewer2d.globalAccumulate = chk.checked;
00172
00173 Viewer2d.redraw();
00174 }
00175
00176
00177 var animateDropDown = function() {
00178 var dir = (animationTargetTop - hudMouseOverDiv.offsetTop > 0)? 1: -1;
00179
00180 var tmpTop = hudMouseOverDiv.offsetTop + dir*Viewer2d.HUD_DROP_DOWN_SPEED;
00181 if(Math.abs(tmpTop - animationTargetTop) <= Viewer2d.HUD_DROP_DOWN_SPEED)
00182 {
00183 hudMouseOverDiv.style.top = animationTargetTop + "px";
00184 isDropDownAnimating = false;
00185 return;
00186 }
00187
00188 hudMouseOverDiv.style.top = tmpTop + "px";
00189 window.setTimeout(animateDropDown,30);
00190 }
00191
00192
00193 var mouseOverDropDown = this.mouseOverDropDown = function() {
00194 if(isDropDownAnimating) return;
00195
00196 if(!isDropDownDown)
00197 {
00198 isDropDownDown = true;
00199 isDropDownAnimating = true;
00200 animationTargetTop = -15;
00201 window.setTimeout(animateDropDown,30);
00202 }
00203 }
00204
00205
00206 var mouseOutDropDown = this.mouseOutDropDown = function(event) {
00207 if(isDropDownAnimating) return;
00208
00209 if(event)
00210 {
00211 var e = event.toElement || event.relatedTarget;
00212 while(e)
00213 {
00214 if(e == this) return;
00215 e = e.parentNode;
00216 }
00217 }
00218
00219 if(isDropDownDown)
00220 {
00221 isDropDownDown = false;
00222 isDropDownAnimating = true;
00223 animationTargetTop = 15 - hudMouseOverDiv.offsetHeight;
00224 window.setTimeout(animateDropDown,30);
00225 }
00226 }
00227
00228
00229 this.handleControlDown = function(i,evt) {
00230
00231
00232 var to = 500;
00233 if(controlMouseIsDown)
00234 {
00235 to = 10;
00236 doControlAction(i);
00237 }
00238 else if(evt)
00239 controlMouseIsDown = true;
00240
00241 if(controlMouseIsDown)
00242 {
00243 if(controlMouseTimeout) window.clearTimeout(controlMouseTimeout);
00244 controlMouseTimeout = window.setTimeout(function() {Viewer2d.hud.handleControlDown(i)},to);
00245 }
00246 }
00247
00248
00249 this.handleControlUp = function(i) {
00250 if(!controlMouseIsDown) return;
00251
00252
00253
00254 if(controlMouseTimeout) window.clearTimeout(controlMouseTimeout);
00255 controlMouseIsDown = false;
00256 doControlAction(i);
00257 }
00258
00259
00260 var doControlAction = function(i) {
00261 switch(i)
00262 {
00263 case 0:
00264 case 1:
00265 case 2:
00266 case 3:
00267 if(i!=1 && i!=2)
00268 Viewer2d.eventToDisplay += (i==0?-1:1)*parseInt(Viewer2d.events.length/5+1);
00269 else
00270 Viewer2d.eventToDisplay += (i==1?-1:1);
00271
00272 if(Viewer2d.eventToDisplay < 0)
00273 Viewer2d.eventToDisplay = 0;
00274 if(Viewer2d.eventToDisplay >= Viewer2d.events.length)
00275 Viewer2d.eventToDisplay = Viewer2d.events.length - 1;
00276 break;
00277 case 4:
00278 case 5:
00279 Viewer2d.hud.hudRunNumberInput.value = parseInt(Viewer2d.hud.hudRunNumberInput.value) + (i*2-9);
00280 if(Viewer2d.hud.hudRunNumberInput.value < 0) Viewer2d.hud.hudRunNumberInput.value = 0;
00281 if(getEventsTimeout) window.clearTimeout(getEventsTimeout);
00282 getEventsTimeout = window.setTimeout(Viewer2d.getEvents,1000);
00283 break;
00284 default:
00285 Debug.log("hud doControlAction unknown action" + i);
00286 return;
00287 }
00288
00289 Viewer2d.hud.update();
00290 }
00291
00292
00293 this.handleRunChange = function() {
00294
00295 var s = this.hudRunNumberInput.value;
00296 for(var i=0;i<s.length;++i)
00297 {
00298 if(!(parseInt(s[i])+1))
00299 {
00300 s = s.substr(0,i) + s.substr(i+1);
00301 --i;
00302 }
00303 }
00304 s = parseInt(s);
00305 if(s+"" != this.hudRunNumberInput.value)
00306 {
00307 this.hudRunNumberInput.value = s;
00308 Debug.log("hud handleRunChange " + s);
00309 }
00310 }
00311
00312
00313 this.hudNavSpeedDiv = document.createElement('div');
00314 this.hudNavSpeedDiv.setAttribute("id", "Viewer2d-hudNavSpeedOverlay");
00315 this.hudNavSpeedDiv.style.position = "absolute";
00316 this.hudNavSpeedDiv.style.zIndex = 100;
00317 Viewer2d.omni.appendChild(this.hudNavSpeedDiv);
00318
00319
00320 hudMouseOverDiv = this.hudMouseOverDiv = document.createElement('div');
00321 hudMouseOverDiv.setAttribute("id", "Viewer2d-hudMouseOver");
00322 hudMouseOverDiv.style.position = "absolute";
00323 hudMouseOverDiv.style.zIndex = 100;
00324
00325 this.hudDiv = document.createElement('div');
00326 this.hudDiv.setAttribute("id", "Viewer2d-hud");
00327 var chkLabels = ["Show Axes","Show Grid","Show Tracks", "Mouse Nav","Fly-By","Accumulated"];
00328 var chkDefaults = ["checked","checked","checked","checked",Viewer2d.enableFlyBy?"checked":"",Viewer2d.accumulateEvents?"checked":""];
00329 var str = "";
00330 for(var i=0;i<chkLabels.length;++i)
00331 str += "<input type='checkbox' id='hudCheckbox" + i + "' onchange='Viewer2d.hud.checkboxUpdate(" + i +
00332 ");' " + chkDefaults[i] + "><label for='hudCheckbox" + i + "'>" + chkLabels[i] + "</label><br>";
00333
00334
00335 str += "<center><div id='Viewer2d-hudEventNumberControls'><div id='Viewer2d-hudEventNumber'></div>";
00336 var evtNumBtns = ["<<","<",">",">>"];
00337 for(var i=0;i<evtNumBtns.length;++i)
00338 str += "<input type='button' onmousedown='Viewer2d.hud.handleControlDown(" + i + ",event);' " +
00339 "onmouseup='Viewer2d.hud.handleControlUp(" + i + ");' " +
00340 "onmouseout='Viewer2d.hud.handleControlUp(" + i + ");' " +
00341 "value='" + evtNumBtns[i] + "' />";
00342 str += "</div></center>";
00343
00344
00345 if(DesktopContent._needToLoginMailbox)
00346 {
00347 str += "<div id='Viewer2d-hudRunNumberControls'>Run #: " +
00348 "<input id='Viewer2d-hudRunNumberControls-textInput' oninput='Viewer2d.hud.handleRunChange();' type='text' value='40' > ";
00349 evtNumBtns = ["<",">"];
00350 for(var i=0;i<evtNumBtns.length;++i)
00351 str += "<input type='button' onmousedown='Viewer2d.hud.handleControlDown(" + (i+4) + ",event);' " +
00352 "onmouseup='Viewer2d.hud.handleControlUp(" + (i+4) + ");' " +
00353 "onmouseout='Viewer2d.hud.handleControlUp(" + (i+4) + ");' " +
00354 "value='" + evtNumBtns[i] + "' />";
00355 str += "</div>";
00356 }
00357 else
00358 {
00359 str += "<input id='Viewer2d-hudRunNumberControls-textInput' type='hidden' value='40' >";
00360
00361 this.hudUrlOverlay = document.createElement('div');
00362 this.hudUrlOverlay.setAttribute("id", "Viewer2d-hudUrlOverlay");
00363 this.hudUrlOverlay.style.position = "absolute";
00364 this.hudUrlOverlay.style.zIndex = 100;
00365 this.hudUrlOverlay.style.left = 5 + "px";
00366 this.hudUrlOverlay.style.top = 5 + "px";
00367 this.hudUrlOverlay.innerHTML = "Try on your own mobile device!<br>http://tinyurl.com/q6lhdrm";
00368 Viewer2d.omni.appendChild(this.hudUrlOverlay);
00369 }
00370
00371 this.hudDiv.innerHTML = str;
00372
00373
00374
00375
00376
00377
00378 hudMouseOverDiv.appendChild(this.hudDiv);
00379
00380 hudMouseOverDiv.style.top = hudMouseOverDiv.offsetHeight - 15 + "px";
00381 hudMouseOverDiv.style.width = Viewer2d.HUD_WIDTH + "px";
00382 hudMouseOverDiv.onmouseover = mouseOverDropDown;
00383 hudMouseOverDiv.onmouseout = mouseOutDropDown;
00384 Viewer2d.omni.appendChild(hudMouseOverDiv);
00385
00386 this.hudEventNumber = document.getElementById('Viewer2d-hudEventNumber');
00387 this.hudEventNumberControls = document.getElementById('Viewer2d-hudEventNumberControls');
00388 this.hudRunNumberInput = document.getElementById('Viewer2d-hudRunNumberControls-textInput');
00389
00390
00391 isDropDownDown = false;
00392 isDropDownAnimating = true;
00393 animationTargetTop = 15 - hudMouseOverDiv.offsetHeight;
00394 window.setTimeout(animateDropDown,30);
00395 this.handleWindowResize();
00396 }
00397
00398
00399 Viewer2d.getConfiguration = function() {
00400 Debug.log("Viewer2d getConfiguration ");
00401
00402 Viewer2d.getConfigurationHandler();
00403 }
00404
00405
00406 Viewer2d.getConfigurationHandler = function (req) {
00407 Debug.log("Viewer2d getConfigurationHandler " );
00408
00409
00410 Viewer2d.stations= [];
00411
00412 var cnt = 0;
00413 Viewer2d.stations[cnt++] = [[1024, 1, 60, 90000]];
00414 Viewer2d.stations[cnt++] = [[1024, 1, 60, 90000],[512, 1, 60, 90000]];
00415
00416
00417
00418
00419
00420
00421
00422
00423
00424
00425
00426
00427
00428
00429
00430
00431
00432
00433
00434
00435
00436
00437
00438
00439
00440
00441
00442
00443
00444 Viewer2d.canvas.style.zIndex = 0;
00445
00446
00447
00448 Viewer2d.redraw();
00449 }
00450
00451
00452
00453 Viewer2d.redraw = function () {
00454 Debug.log("Viewer2d redraw " );
00455
00456
00457 Viewer2d.context.save();
00458
00459 Viewer2d.context.clearRect(0, 0, Viewer2d.canvas.width, Viewer2d.canvas.height);
00460
00461
00462
00463
00464 Viewer2d.context.fillStyle="RGBA(255,0,0,.2)";
00465 Viewer2d.context.strokeStyle = 'RGBA(255,0,0,.1)';
00466 Viewer2d.context.lineWidth = 100;
00467
00468 Viewer2d.context.translate(300,300);
00469 Viewer2d.context.rotate(45*Math.PI/180);
00470
00471 Viewer2d.context.beginPath();
00472 Viewer2d.context.moveTo(-200,0);
00473 Viewer2d.context.lineTo(200,0);
00474 Viewer2d.context.stroke();
00475
00476
00477
00478
00479 Viewer2d.context.restore();
00480
00481
00482 Viewer2d.context.save();
00483
00484 Viewer2d.context.fillStyle="RGBA(255,0,0,.2)";
00485 Viewer2d.context.strokeStyle = 'RGBA(255,0,0,.1)';
00486 Viewer2d.context.lineWidth = 100;
00487
00488 Viewer2d.context.translate(300,300);
00489 Viewer2d.context.rotate(-45*Math.PI/180);
00490
00491 Viewer2d.context.beginPath();
00492 Viewer2d.context.moveTo(-200,0);
00493 Viewer2d.context.lineTo(200,0);
00494 Viewer2d.context.stroke();
00495
00496
00497 Viewer2d.context.restore();
00498
00499
00500
00501
00502
00503
00504
00505
00506
00507
00508
00509
00510
00511 }
00512
00513 Viewer2d.initForDraw = function() {
00514
00515 }
00516
00517 Viewer2d.drawGrid = function() {
00518
00519 }
00520
00521
00522
00523