From 496ac71220f4e47b6da39dd3e00ba4fa8e3ac682 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 30 May 2018 16:00:43 +0200 Subject: [PATCH] TOP SPACE added --- Animation.js | 14 +- Canvas.js | 38 +++-- ChartGrid.js | 4 +- Dashboard.js | 1 + Panels/ProductsPanel.js | 2 +- Panels/TimeControlPanel.js | 2 +- Project.njsproj | 6 +- Scripts/AppLoader.js | 1 + Spaces/TopSpace.js | 76 +++++++++ SplashScreen.js | 30 ++-- TempExosystem.js | 322 ------------------------------------- ViewPort.js | 2 +- 12 files changed, 129 insertions(+), 369 deletions(-) create mode 100644 Spaces/TopSpace.js delete mode 100644 TempExosystem.js diff --git a/Animation.js b/Animation.js index 91917f959..6b5622302 100644 --- a/Animation.js +++ b/Animation.js @@ -107,7 +107,7 @@ function newAnimation() { function animationLoop(callBackFunction) { - //try { + try { if (INFO_LOG === true) { logger.write("[INFO] animationLoop -> Entering function."); } @@ -127,14 +127,14 @@ function newAnimation() { animationLoopHandle = window.requestAnimationFrame(animationLoop); - // } catch (err) { + } catch (err) { - // if (ERROR_LOG === true) { logger.write("[ERROR] animationLoop -> err = " + err); } + if (ERROR_LOG === true) { logger.write("[ERROR] animationLoop -> err = " + err); } - // if (callBackFunction !== undefined) { // When the loop is called by the browser there will be no callBackFunction. - // callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE); - // } - // } + if (callBackFunction !== undefined) { // When the loop is called by the browser there will be no callBackFunction. + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE); + } + } } function clearBrowserCanvas() { diff --git a/Canvas.js b/Canvas.js index 76dcbe853..00ef2dabe 100644 --- a/Canvas.js +++ b/Canvas.js @@ -1,19 +1,24 @@  /* -Whithin this sub-system, the canvas object represents a layer on top of the browser canvas object. +The canvas object represents a layer on top of the browser canvas object. -Graphically, this sub-system has 3 spaces: +Graphically, thiscanvas object has 4 spaces: -1) The "Chart Space": It is where the charts are plotted. +1) The "Top Space": It is where Team and User information is displayed. -2) The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow. +2) The "Chart Space": It is where the charts are plotted. -3) The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space. +3) The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow. + +4) The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space. All these spaces are child objects of the Canvas object. Canvas + | + | + ---> topSpace | | ---> chartSpace @@ -60,6 +65,7 @@ function newCanvas() { let thisObject = { eventHandler: undefined, + topSpace: undefined, chartSpace: undefined, floatingSpace: undefined, panelsSpace: undefined, @@ -83,25 +89,22 @@ function newCanvas() { /* Instantiate all the children of Canvas object */ - let panelsSpace = newPanelsSpace(); - panelsSpace.initialize(); + thisObject.panelsSpace = newPanelsSpace(); + thisObject.panelsSpace.initialize(); - thisObject.panelsSpace = panelsSpace; + thisObject.floatingSpace = newFloatingSpace(); + thisObject.floatingSpace.initialize(); - let floatingSpace = newFloatingSpace(); - floatingSpace.initialize(); - - thisObject.floatingSpace = floatingSpace; - - let chartSpace = newChartSpace(); - chartSpace.initialize(onCharSpaceInitialized); - - thisObject.chartSpace = chartSpace; + thisObject.chartSpace = newChartSpace(); + thisObject.chartSpace.initialize(onCharSpaceInitialized); function onCharSpaceInitialized(err) { viewPort.raiseEvents(); // These events will impacts on objects just initialized. } + thisObject.topSpace = newTopSpace(); + thisObject.topSpace.initialize(); + /* Splash Screen */ splashScreen = newSplashScreen(); @@ -116,6 +119,7 @@ function newCanvas() { /* Here we add all the functions that will be called during the animation cycle. */ + animation.addCallBackFunction("Top Space", thisObject.topSpace.draw, onFunctionAdded); animation.addCallBackFunction("Chart Space", thisObject.chartSpace.draw, onFunctionAdded); animation.addCallBackFunction("Floating Space", thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded); animation.addCallBackFunction("Panels Space", thisObject.panelsSpace.draw, onFunctionAdded); diff --git a/ChartGrid.js b/ChartGrid.js index 11332b6c9..1500b8082 100644 --- a/ChartGrid.js +++ b/ChartGrid.js @@ -669,8 +669,8 @@ browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)'; browserCanvasContext.beginPath(); - browserCanvasContext.rect(0, 0, viewPort.visibleArea.topLeft.x, viewPort.visibleArea.topLeft.y); - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, 0, 500, viewPort.visibleArea.topLeft.y); + browserCanvasContext.rect(0, TOP_SPACE_HEIGHT, viewPort.visibleArea.topLeft.x, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT); + browserCanvasContext.rect(viewPort.visibleArea.topRight.x, TOP_SPACE_HEIGHT, 500, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT); browserCanvasContext.closePath(); browserCanvasContext.fill(); } diff --git a/Dashboard.js b/Dashboard.js index e9a1b2f68..ae81ab75d 100644 --- a/Dashboard.js +++ b/Dashboard.js @@ -132,6 +132,7 @@ const CHART_ASPECT_RATIO = 1 / 10; let INITIAL_ZOOM_LEVEL = -26; // This is the zoom level at the view port in which the APP starts. let INITIAL_TIME_PERIOD = recalculatePeriod(INITIAL_ZOOM_LEVEL); // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. +const TOP_SPACE_HEIGHT = 100; var viewPort = newViewPort(); diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 736e1c254..5074da5c9 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -36,7 +36,7 @@ var position = { x: viewPort.visibleArea.topLeft.x, - y: 0 + y: viewPort.visibleArea.topLeft.y }; thisObject.container.frame.position = position; diff --git a/Panels/TimeControlPanel.js b/Panels/TimeControlPanel.js index ed780ab2b..0f4fa5344 100644 --- a/Panels/TimeControlPanel.js +++ b/Panels/TimeControlPanel.js @@ -36,7 +36,7 @@ function newTimeControlPanel() { let position = { x: (viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x) / 2 - thisObject.container.frame.width / 2, - y: 0 + y: viewPort.visibleArea.topLeft.y }; thisObject.container.frame.position = position; diff --git a/Project.njsproj b/Project.njsproj index 8ab56164d..5a3221d8b 100644 --- a/Project.njsproj +++ b/Project.njsproj @@ -79,6 +79,9 @@ Code + + Code + Code @@ -154,9 +157,6 @@ Code - - Code - diff --git a/Scripts/AppLoader.js b/Scripts/AppLoader.js index c640b2472..bc852fec3 100644 --- a/Scripts/AppLoader.js +++ b/Scripts/AppLoader.js @@ -24,6 +24,7 @@ "Panels/TimeControlPanel.js", "Panels/ProductsPanel.js", + "Spaces/TopSpace.js", "Spaces/PanelsSpace.js", "Spaces/ChartSpace.js", "Spaces/FloatingSpace.js", diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js new file mode 100644 index 000000000..4a39eaca1 --- /dev/null +++ b/Spaces/TopSpace.js @@ -0,0 +1,76 @@ + +function newTopSpace() { + + var thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + initialize: initialize + }; + + var container = newContainer(); + container.initialize(); + thisObject.container = container; + + thisObject.container.frame.width = browserCanvas.width; + thisObject.container.frame.height = TOP_SPACE_HEIGHT; + + container.displacement.containerName = "Top Space"; + container.frame.containerName = "Top Space"; + + container.frame.position.x = 0; + container.frame.position.y = 0; + + container.isDraggeable = false; + + return thisObject; + + function initialize() { + + + } + + function getContainer(point) { + + let container; + + for (let i = 0; i < thisObject.panels.length; i++) { + + container = thisObject.panels[i].getContainer(point); + + if (container !== undefined) { + + /* We found an inner container which has the point. We return it. */ + + return container; + } + } + + /* The point does not belong to any inner container, so we return the current container. */ + + return thisObject.container; + + } + + function draw() { + + thisObject.container.frame.draw(false, false); + + drawBackground(); + } + + function drawBackground() { + + let opacity = 1; + + browserCanvasContext.beginPath(); + + browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height); + browserCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')'; + + browserCanvasContext.closePath(); + + browserCanvasContext.fill(); + + } +} \ No newline at end of file diff --git a/SplashScreen.js b/SplashScreen.js index b8fb64aaa..1c8c0c642 100644 --- a/SplashScreen.js +++ b/SplashScreen.js @@ -6,7 +6,7 @@ The Splash Screen is to show some 'loading...' controls while the app is being l function newSplashScreen() { - var splashScreen = { + var thisObject = { container: undefined, draw: draw, timeMachines: [], @@ -17,10 +17,10 @@ function newSplashScreen() { var container = newContainer(); container.initialize(); - splashScreen.container = container; + thisObject.container = container; - splashScreen.container.frame.width = browserCanvas.width; - splashScreen.container.frame.height = browserCanvas.height; + thisObject.container.frame.width = browserCanvas.width; + thisObject.container.frame.height = browserCanvas.height; container.displacement.containerName = "Splash Screen"; container.frame.containerName = "Splash Screen"; @@ -34,7 +34,7 @@ function newSplashScreen() { let fadeOutCounter = 0; let opacity = 1; - return splashScreen; + return thisObject; function initialize() { @@ -58,7 +58,7 @@ function newSplashScreen() { } - splashScreen.container.frame.draw(false, false); + thisObject.container.frame.draw(false, false); let label = '' + Math.trunc(stepsInitializationCounter) + ' %'; stepsInitializationCounter = stepsInitializationCounter + 1; @@ -72,13 +72,13 @@ function newSplashScreen() { let fontSize = 50; 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 + 200 + x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO -30, + y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 200 }; browserCanvasContext.beginPath(); - browserCanvasContext.rect(0, 0, splashScreen.container.frame.width, splashScreen.container.frame.height); + browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height); browserCanvasContext.fillStyle = 'rgba(255, 255, 255, ' + opacity + ')'; browserCanvasContext.closePath(); @@ -99,8 +99,8 @@ function newSplashScreen() { title = "Advanced" titlePoint = { - x: splashScreen.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 230, - y: splashScreen.container.frame.height / 2 - fontSize * 2 + 50 + x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 230, + y: thisObject.container.frame.height / 2 - fontSize * 2 + 50 }; browserCanvasContext.font = fontSize + 'px Verdana'; @@ -115,8 +115,8 @@ function newSplashScreen() { title = "Algos" titlePoint = { - x: splashScreen.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO + 230, - y: splashScreen.container.frame.height / 2 - fontSize * 2 + 50 + x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO + 230, + y: thisObject.container.frame.height / 2 - fontSize * 2 + 50 }; browserCanvasContext.font = fontSize + 'px Verdana'; @@ -135,8 +135,8 @@ function newSplashScreen() { title = "Algobots 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 + x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO + 0, + y: thisObject.container.frame.height / 2 - fontSize * 2 + 150 }; browserCanvasContext.font = fontSize + 'px Verdana'; diff --git a/TempExosystem.js b/TempExosystem.js deleted file mode 100644 index 53d0ba6a0..000000000 --- a/TempExosystem.js +++ /dev/null @@ -1,322 +0,0 @@ -{ - codeName: "AACharly", - displayName: "Charly", - type: "Extract", - version: { - number: "1.0.0", - status: "Mantained", // Discontinued - }, - products: [{ - - product: { - codeName: "Trades", - displayName: "Trades", - description: "Each file contains trades records of one market at one exchange in a period of time of one minute.", - storageAccount: "aacharly", - filePath: "@Exchange/Output/Trades/@Year/@Month/@Date/@Hour/@Minute", - fileName: "@AssetA_@AssetB.json", - exchangeList: [{ - exchange: { - name: "Poloniex", - datetimeRange: { - minDatetime: "2017-02-19 19:15:00.000 GMT+0000", - maxDatetime: "2018-02-13 10:10:00.000 GMT+0000" - } - } - }] - , - layers: [{ - layer: { - codeName: "Trades", - displayName: "Trades", - exchangeList: ["Poloniex"], - validPeriods: ["01-min"], - plotter: { - devTeam: "AAMasters", - repo: "AACharly-Plotter", - moduleName: "TradeList", - target: "Timeline" - } - } - }] - } - }] - , - processes: - [{ - process: { - name: "Poloniex-Live-Trades", - description: "Retrieves the trades done at the current minute and the previous minute and saves them at the storage account." - } - }, { - process: { - name: "Poloniex-Historic-Trades", - description: "Retrieves and saves the historical trades in batches going backwards from the current time until reaching the begining of the market." - } - }, { - process: { - name: "Poloniex-Hole-Fixing", - description: "Scans the trades saved by the Live Trades and Historic Trades processes searching for missing records. Once a hole is found on the data set, it patches it by retrieving the missing records from the exchange." - } - }] - , - directDependencies: { }, - directDependents: [{ - bot: { - devTeam: "AAMasters", - codeName: "AABruce" - } - }, { - bot: { - devTeam: "AAMasters", - codeName: "AAOlivia" - } - }] - , - collaboratorsList: [], - github: { - org: "AAMasters", - repos: [{ - repo: { - name: "AACharly-Bot", - description: "Produces a data-set of all trades of every market in multiple exchanges.", - openIssues: 0, - openPullRequests: 0, - contributors: 1 - } - }, { - repo: { - name: "AACharly-Plotter", - description: "Plotters plug-ins to browse trades at the AA Web Platform.", - openIssues: 0, - openPullRequests: 0, - contributors: 1 - } - }] - }, - storage: { - sas: '?sv=2017-04-17&ss=f&srt=sco&sp=rc&se=2018-12-31T02:33:36Z&st=2018-02-01T18:33:36Z&spr=https&sig=xFTcopdKq0f60wl2iuukbtIpcLwxZVKzlw5BzpJfo5g%3D', - fileUri: 'https://' + 'aacharly' + '.file.core.windows.net' - } -}, -{ - codeName: "AACarol", - displayName: "Carol", - type: "Extract", - version: { - number: "1.0.0", - status: "Mantained", // Discontinued - }, - products: [ - { - product: { - codeName: "Order Book", - displayName: "Order Book", - description: "Each file contains the bids and asks positions at each market at a certain moment in time.", - storageAccount: "aacarol", - filePath: "@Exchange/Output/Order-Books/@Year/@Month/@Date/@Hour/@Minute", - fileName: "@AssetA_@AssetB.json", - exchangeList: [{ - exchange: { - name: "Poloniex", - datetimeRange: { - minDatetime: "2017-02-19 19:15:00.000 GMT+0000", - maxDatetime: "2018-02-13 10:10:00.000 GMT+0000" - } - } - }], - layers: { - layer: { - codeName: "Order Book", - displayName: "Order Book", - exchangeList: ["Poloniex"], - validPeriods: ["06-hs", "03-hs", "01-hs", "30-min", "10-min", "05-min", "01-min"], - plotter: { - devTeam: "AAMasters", - repo: "AACarol-Plotter", - moduleName: "OrderBook", - target: "Panel" - } - } - } - } - }, - { - product: { - codeName: "Order Books", - displayName: "Order Books", - description: "Each file contains the sumarized bids and asks positions at each market at a certain moment in time. Agreggation makes the dataset optimal for different time periods.", - storageAccount: "aacarol", - filePath: "@Exchange/Output/Aggregated-Order-Books/@Period/@Year/@Month/@Date/@Hour/@Minute", - fileName: "@AssetA_@AssetB.json", - exchangeList: [{ - exchange: { - name: "Poloniex", - datetimeRange: { - minDatetime: "2017-02-19 19:15:00.000 GMT+0000", - maxDatetime: "2018-02-13 10:10:00.000 GMT+0000" - } - } - }], - layers: { - layer: { - codeName: "Order Books", - displayName: "Order Books", - exchangeList: ["Poloniex"], - validPeriods: ["06-hs", "03-hs", "01-hs", "30-min", "10-min", "05-min", "01-min"], - plotter: { - devTeam: "AAMasters", - repo: "AACarol-Plotter", - moduleName: "OrderBooks", - target: "Timeline" - } - } - } - } - } - ], - processes: [{ - process: { - name: "Poloniex-Order-Books", - description: "Retrieves the order books at the current minute and saves them at the storage account." - } - }, { - process: { - name: "Aggregated-Order-Books", - description: "Aggregates the order books information to be viewed at different time periods." - } - } - ], - directDependencies: [], - directDependents: [], - collaboratorsList: [], - github: { - org: "AAMasters", - repos: [{ - repo: { - name: "AACarol", - description: "Produces a data-set with a snapshot of all markets order books every minute.", - openIssues: 0, - openPullRequests: 0, - contributors: 1 - } - } - ] - }, - storage: { - sas: '?sv=2017-04-17&ss=f&srt=sco&sp=r&se=2018-12-01T00:09:44Z&st=2017-12-01T13:09:44Z&spr=https,http&sig=J60UlQuUqh9Hd1Pm0PqIF6yari3D3TkGEz1fSNQJWks%3D', - fileUri: 'https://' + 'aadata' + '.file.core.windows.net' - } -} -{ - codeName: "AABruce", - displayName: "Bruce", - type: "Indicator", - version: { - number: "1.0.0", - status: "Mantained", // Discontinued - }, - products: { - product: [{ - codeName: "Candles", - displayName: "One Minute Candles in Daily Files", - description: "Each file contains the candles of one whole day on a one minute time period.", - storageAccount: "aabruce", - filePath: "@Exchange/Output/Candles/One-Min/@Year/@Month/@Date", - fileName: "@AssetA_@AssetB.json", - exchangeList: [{ - exchange: { - name: "Poloniex", - datetimeRange: { - minDatetime: "2017-02-19 19:15:00.000 GMT+0000", - maxDatetime: "2018-02-13 10:10:00.000 GMT+0000" - } - } - }], - layers: { - layer: { - codeName: "Candles", - displayName: "Candlesticks", - exchangeList: ["Poloniex"], - validPeriods: ["30-min", "10-min", "05-min", "01-min"], - plotter: { - devTeam: "AAMasters", - repo: "AABruce-Plotter", - moduleName: "Candlesticks", - target: "Timeline", - dependencies: { - dependency: { - devTeam: "AAMasters", - repo: "Plotters-Utilities", - moduleName: "Candlesticks" - } - } - } - } - } - }, { - codeName: "Volumes", - displayName: "One Minute Volumes in Daily Files", - description: "Each file contains the volumes of one whole day on a one minute time period.", - storageAccount: "aabruce", - filePath: "@Exchange/Output/Volumes/One-Min/@Year/@Month/@Date", - fileName: "@AssetA_@AssetB.json", - exchangeList: [{ - exchange: { - name: "Poloniex", - datetimeRange: { - minDatetime: "2017-02-19 19:15:00.000 GMT+0000", - maxDatetime: "2018-02-13 10:10:00.000 GMT+0000" - } - } - }], - layers: { - layer: { - codeName: "Volumes", - displayName: "Sell and Buy Volumes", - exchangeList: ["Poloniex"], - validPeriods: ["06-hs", "03-hs", "01-hs", "30-min", "10-min", "05-min", "01-min"], - plotter: { - devTeam: "AAMasters", - repo: "AABruce-Plotter", - moduleName: "Volumes", - target: "Timeline", - dependencies: { - dependency: { - devTeam: "AAMasters", - repo: "Plotters-Utilities", - moduleName: "Volumes" - } - } - } - } - } - } - ] - , - processes: - { - process: [{ - name: "One-Min-Daily-Candles-Volumes", - description: "Read trades files and generates one minute candles and volumes files for each day." - }] - }, - directDependencies: [], - directDependents: [], - collaboratorsList: [], - github: { - org: "AAMasters", - repos: { - repo: [{ - name: "AABruce", - description: "Produces two data-sets with candles and volumes for all markets at all exchanges.", - openIssues: 0, - openPullRequests: 0, - contributors: 1 - }] - } - }, - storage: { - sas: '?sv=2017-04-17&ss=f&srt=sco&sp=r&se=2018-12-31T02:32:04Z&st=2018-02-01T18:32:04Z&spr=https&sig=SbZI6bvAE1MBxna2NOvfgMroPFZNjAyaHUsAPvh11hg%3D', - fileUri: 'https://' + 'aabruce' + '.file.core.windows.net' - } \ No newline at end of file diff --git a/ViewPort.js b/ViewPort.js index f30d0aae3..8532ce54d 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -4,7 +4,7 @@ function newViewPort() { const CONSOLE_LOG = true; let ANIMATION_INCREMENT = 0.25; - const TOP_MARGIN = 15; + const TOP_MARGIN = 15 + TOP_SPACE_HEIGHT; const BOTTOM_MARGIN = 0; const LEFT_MARGIN = 50; const RIGHT_MARGIN = 50;