From 9e2b5996728d8f00f9802abe13eea0ea7b65a0dc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 3 Mar 2018 14:12:20 +0100 Subject: [PATCH] ViewPort positioned sucessfully --- .vs/AAWebPlatform/v15/.suo | Bin 83968 -> 89600 bytes SplashScreen.js | 25 ++++++++-- TimelineChart.js | 97 ++++++++++++++++++++++--------------- ViewPort.js | 19 -------- server.js | 2 +- 5 files changed, 79 insertions(+), 64 deletions(-) diff --git a/.vs/AAWebPlatform/v15/.suo b/.vs/AAWebPlatform/v15/.suo index d3d714a2b9d47f49a56124c50591668941dc5a1f..b594dc182544394f854ea746c2d77c37ed9e295f 100644 GIT binary patch delta 4294 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 99) { @@ -77,7 +75,7 @@ function newSplashScreen() { let labelPoint = { x: splashScreen.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO -30, - y: splashScreen.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + y: splashScreen.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 200 }; browserCanvasContext.beginPath(); @@ -95,6 +93,9 @@ function newSplashScreen() { let title; let titlePoint; + + /* Advanced Algos Title */ + fontSize = 100; title = "Advanced" @@ -129,6 +130,22 @@ function newSplashScreen() { browserCanvasContext.fillStyle = 'rgba(255, 0, 0, ' + opacity + ')'; browserCanvasContext.fillText(title, titlePoint.x, titlePoint.y); + /* Trading Bots Competitions Sub Title */ + + fontSize = 50; + + title = "Trading Bots Competitions" + + titlePoint = { + x: splashScreen.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO + 0, + y: splashScreen.container.frame.height / 2 - fontSize * 2 + 150 + }; + + browserCanvasContext.font = fontSize + 'px Verdana'; + browserCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')'; + browserCanvasContext.fillText(title, titlePoint.x, titlePoint.y); + + } diff --git a/TimelineChart.js b/TimelineChart.js index 131dfe2c4..bdf80acea 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -10,7 +10,7 @@ function newTimelineChart() { let timePeriod = INITIAL_TIME_PERIOD; let datetime = INITIAL_DATE; - var timelineChart = { + var thisObject = { setDatetime: setDatetime, container: undefined, draw: draw, @@ -20,7 +20,7 @@ function newTimelineChart() { var container = newContainer(); container.initialize(); - timelineChart.container = container; + thisObject.container = container; container.displacement.containerName = "Time Period Chart"; container.zoom.containerName = "Time Period Chart"; @@ -42,7 +42,7 @@ function newTimelineChart() { let productsPanel; let orderBookPanel; - return timelineChart; + return thisObject; function initialize(exchange, market, currentCandlePanelToUse, currentVolumePanelToUse, pProductsPanel, orderBookPanelToUse, callBackFunction) { @@ -71,6 +71,7 @@ function newTimelineChart() { function continueInitialization() { recalculateScale(); + moveViewPortToCurrentDatetime(); /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */ @@ -88,19 +89,6 @@ function newTimelineChart() { function initializePlotters() { - /* Here we need to move the viewPort to the default date. */ - - //-869208.2550614576 y = 40845.822907407215 - - - - let displaceVector = { - x: -869208.2550614576, - y: 40845.822907407215 - }; - - viewPort.displace(displaceVector); - /* Lets get all the cards that needs to be loaded. */ let loadingProductCards = productsPanel.getLoadingProductCards(); @@ -164,17 +152,17 @@ function newTimelineChart() { let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.repo, pProductCard.product.plotter.moduleName); - plotter.container.displacement.parentDisplacement = timelineChart.container.displacement; - plotter.container.zoom.parentZoom = timelineChart.container.zoom; - plotter.container.frame.parentFrame = timelineChart.container.frame; + plotter.container.displacement.parentDisplacement = thisObject.container.displacement; + plotter.container.zoom.parentZoom = thisObject.container.zoom; + plotter.container.frame.parentFrame = thisObject.container.frame; - plotter.container.parentContainer = timelineChart.container; + plotter.container.parentContainer = thisObject.container; - plotter.container.frame.width = timelineChart.container.frame.width * 1; - plotter.container.frame.height = timelineChart.container.frame.height * 1; + plotter.container.frame.width = thisObject.container.frame.width * 1; + plotter.container.frame.height = thisObject.container.frame.height * 1; - plotter.container.frame.position.x = timelineChart.container.frame.width / 2 - plotter.container.frame.width / 2; - plotter.container.frame.position.y = timelineChart.container.frame.height / 2 - plotter.container.frame.height / 2; + plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2; + plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2; plotter.initialize(storage, DEFAULT_EXCHANGE, DEFAULT_MARKET, datetime, timePeriod, onPlotterInizialized); @@ -268,7 +256,7 @@ function newTimelineChart() { recalculateCurrentDatetime(); - if (timelineChart.container.frame.isInViewPort() && tooSmall() === false) { + if (thisObject.container.frame.isInViewPort() && tooSmall() === false) { @@ -281,7 +269,7 @@ function newTimelineChart() { if (initializationReady === true) { - if (timelineChart.container.frame.isInViewPort() && tooSmall() === false) { + if (thisObject.container.frame.isInViewPort() && tooSmall() === false) { @@ -293,7 +281,7 @@ function newTimelineChart() { if (initializationReady === true) { - if (timelineChart.container.frame.isInViewPort()) { + if (thisObject.container.frame.isInViewPort()) { recalculateCurrentDatetime(); @@ -309,8 +297,8 @@ function newTimelineChart() { y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2 }; - center = unTransformThisPoint(center, timelineChart.container); - center = timeLineCoordinateSystem.unInverseTransform(center, timelineChart.container.frame.height); + center = unTransformThisPoint(center, thisObject.container); + center = timeLineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height); let newDate = new Date(0); newDate.setUTCSeconds(center.x / 1000); @@ -324,7 +312,7 @@ function newTimelineChart() { } - timelineChart.container.eventHandler.raiseEvent("Datetime Changed", datetime); + thisObject.container.eventHandler.raiseEvent("Datetime Changed", datetime); } @@ -351,7 +339,7 @@ function newTimelineChart() { datetime = pDatetime; - if (timelineChart.container.frame.isInViewPort()) { + if (thisObject.container.frame.isInViewPort()) { for (var i = 0; i < activePlotters.length; i++) { @@ -370,13 +358,13 @@ function newTimelineChart() { if (activePlotters === undefined) { return; } // We need to wait - if (timelineChart.container.frame.isInViewPort()) { + if (thisObject.container.frame.isInViewPort()) { this.container.frame.draw(); drawBackground(); - chartGrid.draw(timelineChart.container, timeLineCoordinateSystem); + chartGrid.draw(thisObject.container, timeLineCoordinateSystem); for (var i = 0; i < activePlotters.length; i++) { @@ -403,8 +391,8 @@ function newTimelineChart() { timeLineCoordinateSystem.initialize( minValue, maxValue, - timelineChart.container.frame.width, - timelineChart.container.frame.height + thisObject.container.frame.width, + thisObject.container.frame.height ); } @@ -451,11 +439,11 @@ function newTimelineChart() { let bottomPoint = { x: 0, - y: timelineChart.container.frame.height + y: thisObject.container.frame.height }; - topPoint = transformThisPoint(topPoint, timelineChart.container); - bottomPoint = transformThisPoint(bottomPoint, timelineChart.container); + topPoint = transformThisPoint(topPoint, thisObject.container); + bottomPoint = transformThisPoint(bottomPoint, thisObject.container); /* We want the label of the market to be always centered in the middle of the screen, unless the upper or lower border of the frame is visible on the screen */ @@ -475,10 +463,10 @@ function newTimelineChart() { point = { x: 0, - y: timelineChart.container.frame.height / 2 + y: thisObject.container.frame.height / 2 }; - point = transformThisPoint(point, timelineChart.container); + point = transformThisPoint(point, thisObject.container); point = { x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2 - label.length / 2 * currentFontSize * 0.60, @@ -501,5 +489,34 @@ function newTimelineChart() { browserCanvasContext.fillText(label, point.x, point.y); } + + function moveViewPortToCurrentDatetime() { + + let targetPoint = { + x: datetime.valueOf(), + y: 0 // we wont touch the y axis here. + }; + + /* Lets put this point in the coordinate system of the viewPort */ + + targetPoint = timeLineCoordinateSystem.transformThisPoint(targetPoint); + targetPoint = transformThisPoint(targetPoint, thisObject.container); + + /* Lets get the point on the viewPort coordinate system of the center of the visible screen */ + + let center = { + x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2, + y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2 + }; + + /* Lets calculate the displace vector, from the point we want at the center, to the current center. */ + + let displaceVector = { + x: center.x - targetPoint.x, + y: 0 + }; + + viewPort.displace(displaceVector); + } } diff --git a/ViewPort.js b/ViewPort.js index 3011318a2..a550cda47 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -22,7 +22,6 @@ function newViewPort() { fitIntoVisibleArea: fitIntoVisibleArea, displace: displace, displaceTarget: displaceTarget, - displaceToDatetime: displaceToDatetime, animate: animate, draw: draw, initialize: initialize @@ -141,24 +140,6 @@ function newViewPort() { //console.log("displaceTarget x = " + targetOffset.x + " y = " + targetOffset.y); } - - function displaceToDatetime(datetime, timeLineCoordinateSystem) { - - - targetOffset.x = targetOffset.x + displaceVector.x; - - offsetIncrement = { - x: (targetOffset.x - offset.x) / 10, - y: (targetOffset.y - offset.y) / 10 - }; - - if (CONSOLE_LOG === true) { - - console.log("viewPort -> displaceToDatetime x = " + targetOffset.x + " datetime = " + datetime); - - } - } - function applyZoom(amount) { diff --git a/server.js b/server.js index a780cdf8c..39b6fecda 100644 --- a/server.js +++ b/server.js @@ -6,7 +6,7 @@ if (CONSOLE_LOG === true) { } -let debugMode = true; // This forces the server to read Plotters from the local drive. +let debugMode = false; // This forces the server to read Plotters from the local drive. if (CONSOLE_LOG === true && debugMode === true) {