diff --git a/Animation.js b/Animation.js index 56b4dd0c7..aec3a28ae 100644 --- a/Animation.js +++ b/Animation.js @@ -108,6 +108,10 @@ function newAnimation () { clearBrowserCanvas() + /* Let reset the current chart that is on focus */ + + window.CHART_ON_FOCUS = '' + /* We loop through the callback functions collections and execute them all. */ callBackFunctions.forEach(function (callBackFunction) { diff --git a/Canvas.js b/Canvas.js index 0e720bd4a..4e6330e49 100644 --- a/Canvas.js +++ b/Canvas.js @@ -159,6 +159,7 @@ function newCanvas () { /* Here we add all the functions that will be called during the animation cycle. */ + animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, 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/Globals.js b/Globals.js index cb98311a1..127b81a9d 100644 --- a/Globals.js +++ b/Globals.js @@ -94,8 +94,14 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; -const INITIAL_DEFAULT_MARKET = 2; // This is the market that will be shown when loading the site for the first time. -const DEFAULT_EXCHANGE = "Poloniex"; +const SUPPORTED_EXCHANGES = ["Poloniex", "Coss"]; +const SUPPORTED_MARKETS = [ + { + assetA: "USDT", + assetB: "BTC", + } +]; +const DEFAULT_EXCHANGE = "Coss"; const DEFAULT_MARKET = { assetA: "USDT", assetB: "BTC", diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 3cd7c8faf..3834e118a 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -11,14 +11,12 @@ var container = newContainer() - container.name = 'Indicators and Algobots Product Panel' container.initialize() container.isDraggeable = true container.isWheelable = true thisObject.container = container - thisObject.container.frame.containerName = "Indicators and Algobots's Products" let isInitialized = false let productCards = [] @@ -31,9 +29,17 @@ let lastY = 5 let panelTabButton + let exchange + let market + return thisObject - function initialize () { + function initialize (pExchange, pMarket) { + exchange = pExchange + market = pMarket + + thisObject.container.name = exchange + ' ' + market.assetB + '/' + market.assetA + ' ' + 'Indicators' + thisObject.container.frame.containerName = thisObject.container.name thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE thisObject.container.frame.height = viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; @@ -73,7 +79,7 @@ productCard.bot = bot productCard.product = product - productCard.code = devTeam.codeName + '-' + bot.codeName + '-' + product.codeName + productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName /* Initialize it */ diff --git a/PlottersManager.js b/PlottersManager.js index 215529a45..80f07e8ef 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -33,6 +33,8 @@ function newPlottersManager () { let initializationReady = false let productsPanel + let exchange + let market return thisObject @@ -97,13 +99,15 @@ function newPlottersManager () { } } - function initialize (pProductsPanel, callBackFunction) { + function initialize (pProductsPanel, pExchange, pMarket, callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } /* Remember the Products Panel */ productsPanel = pProductsPanel + exchange = pExchange + market = pMarket /* Listen to the event of change of status */ @@ -222,7 +226,7 @@ function newPlottersManager () { let host = ecosystem.getHost(COMPETITION_HOST) let competition = ecosystem.getCompetition(host, COMPETITION) - storage.initialize(host, competition, DEFAULT_EXCHANGE, DEFAULT_MARKET, onCompetitionStorageInitialized) + storage.initialize(host, competition, exchange, market, onCompetitionStorageInitialized) function onCompetitionStorageInitialized (err) { try { @@ -361,6 +365,11 @@ function newPlottersManager () { let okCounter = 0 let failCounter = 0 + if (loadingProductCards.length === 0) { + callBack(GLOBAL.DEFAULT_OK_RESPONSE) + return + } + for (let i = 0; i < loadingProductCards.length; i++) { /* For each one, we will initialize the associated plotter. */ @@ -461,7 +470,7 @@ function newPlottersManager () { } } - storage.initialize(pProductCard.devTeam, pProductCard.bot, pProductCard.product, DEFAULT_EXCHANGE, DEFAULT_MARKET, datetime, timePeriod, onProductStorageInitialized) + storage.initialize(pProductCard.devTeam, pProductCard.bot, pProductCard.product, exchange, market, datetime, timePeriod, onProductStorageInitialized) function onProductStorageInitialized (err) { try { @@ -505,7 +514,7 @@ function newPlottersManager () { 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) + plotter.initialize(storage, exchange, market, datetime, timePeriod, onPlotterInizialized) function onPlotterInizialized () { try { @@ -544,8 +553,9 @@ function newPlottersManager () { panelCodeName: panelConfig.codeName } - let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters) - let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle) + let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA + let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, panelOwner) + let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle, panelOwner) /* Connect Panel to the Plotter via an Event. */ diff --git a/ProductCard.js b/ProductCard.js index 05bfcb62f..83e38a692 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -1,6 +1,13 @@ function newProductCard () { const CONSOLE_LOG = false + const MODULE_NAME = 'Product Card' + const INFO_LOG = false + const ERROR_LOG = true + const INTENSIVE_LOG = false + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + var thisObject = { container: undefined, draw: draw, @@ -101,45 +108,47 @@ function initialize () { /* Create this objects continer */ + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - var container = newContainer() - container.name = 'Product Card ' + thisObject.code - container.initialize() - container.isDraggeable = false - container.isClickeable = true - thisObject.container = container + var container = newContainer() + container.name = 'Product Card ' + thisObject.code + container.initialize() + container.isDraggeable = false + container.isClickeable = true + thisObject.container = container /* Add information that will later be needed. */ - let team = ecosystem.getTeam(thisObject.product.plotter.devTeam) - let plotter = ecosystem.getPlotter(team, thisObject.product.plotter.codeName) - let plotterModule = ecosystem.getPlotterModule(plotter, thisObject.product.plotter.moduleName) + let team = ecosystem.getTeam(thisObject.product.plotter.devTeam) + let plotter = ecosystem.getPlotter(team, thisObject.product.plotter.codeName) + let plotterModule = ecosystem.getPlotterModule(plotter, thisObject.product.plotter.moduleName) - thisObject.product.plotter.profilePicture = plotterModule.profilePicture - thisObject.product.plotter.module = plotterModule + thisObject.product.plotter.profilePicture = plotterModule.profilePicture + thisObject.product.plotter.module = plotterModule /* Lets set the basic dimensions of this thisObject. */ - var position = { - x: 0, - y: 0 - } + var position = { + x: 0, + y: 0 + } - this.container.frame.position = position - this.container.frame.width = 330 - this.container.frame.height = 100 + this.container.frame.position = position + this.container.frame.width = 330 + this.container.frame.height = 100 /* We retrieve the locally stored status of the Product */ - let storedValue = window.localStorage.getItem(thisObject.code) + let storedValue = window.localStorage.getItem(thisObject.code) - if (storedValue !== null) { - thisObject.status = storedValue + if (storedValue !== null) { + thisObject.status = storedValue - if (thisObject.status === PRODUCT_CARD_STATUS.ON) { - changeStatusTo(PRODUCT_CARD_STATUS.LOADING) - } - } else { + if (thisObject.status === PRODUCT_CARD_STATUS.ON) { + changeStatusTo(PRODUCT_CARD_STATUS.LOADING) + } + } else { /* This happens the first time the app is run on a new browser. @@ -151,95 +160,98 @@ */ - const DEFAULT_ON_PRODUCT = 'AAMasters-AAOlivia-Candles' + const DEFAULT_ON_PRODUCT = 'AAMasters-AAOlivia-Candles' - if (thisObject.code === DEFAULT_ON_PRODUCT) { - changeStatusTo(PRODUCT_CARD_STATUS.LOADING) - } else { - changeStatusTo(PRODUCT_CARD_STATUS.OFF) + if (thisObject.code === DEFAULT_ON_PRODUCT) { + changeStatusTo(PRODUCT_CARD_STATUS.LOADING) + } else { + changeStatusTo(PRODUCT_CARD_STATUS.OFF) + } } - } /* Lets listen to our own events to react when we have a Mouse Click */ - thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed) + thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed) /* WARNING THIS IS TEMPORARY CODE */ - const LEGACY_TEAM = thisObject.devTeam.codeName - const REPO = thisObject.bot.repo - const PROFILE_PIC = thisObject.bot.profilePicture + const LEGACY_TEAM = thisObject.devTeam.codeName + const REPO = thisObject.bot.repo + const PROFILE_PIC = thisObject.bot.profilePicture /* The plotter banner, comes from the Legacy Location so far, no matter if the Team is at the Teams Modules or not. */ - const PLOTTER_TEAM = thisObject.product.plotter.devTeam - const PLOTTER_REPO = thisObject.product.plotter.codeName - const PLOTTER_PROFILE_PIC = thisObject.product.plotter.profilePicture + const PLOTTER_TEAM = thisObject.product.plotter.devTeam + const PLOTTER_REPO = thisObject.product.plotter.codeName + const PLOTTER_PROFILE_PIC = thisObject.product.plotter.profilePicture - legacyPlotterBanner = new Image() - legacyPlotterBanner.onload = onLegacyPlotterBanner + legacyPlotterBanner = new Image() + legacyPlotterBanner.onload = onLegacyPlotterBanner - function onLegacyPlotterBanner () { - legacyPlotterBannerLoaded = true - } + function onLegacyPlotterBanner () { + legacyPlotterBannerLoaded = true + } - legacyPlotterBanner.src = window.canvasApp.urlPrefix + 'Images/' + PLOTTER_TEAM + '/' + PLOTTER_REPO + '/' + PLOTTER_PROFILE_PIC + legacyPlotterBanner.src = window.canvasApp.urlPrefix + 'Images/' + PLOTTER_TEAM + '/' + PLOTTER_REPO + '/' + PLOTTER_PROFILE_PIC - const TEAM = thisObject.devTeam.codeName.toLowerCase() - const BOT = thisObject.bot.codeName.toLowerCase() + const TEAM = thisObject.devTeam.codeName.toLowerCase() + const BOT = thisObject.bot.codeName.toLowerCase() - if (window.canvasApp.context.teamProfileImages.get(TEAM) === undefined) { - // This means this Team is a Lecay Team, still not at any Module. + if (window.canvasApp.context.teamProfileImages.get(TEAM) === undefined) { + // This means this Team is a Lecay Team, still not at any Module. /* Here we will download the images still at the legacy storage. */ - legacyTeamAvatar = new Image() + legacyTeamAvatar = new Image() - legacyTeamAvatar.onload = onLegacyImageLoad + legacyTeamAvatar.onload = onLegacyImageLoad - function onLegacyImageLoad () { - legacyTeamAvatarLoaded = true - } + function onLegacyImageLoad () { + legacyTeamAvatarLoaded = true + } - legacyTeamAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + LEGACY_TEAM + '.png' + legacyTeamAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + LEGACY_TEAM + '.png' - legacyBotAvatar = new Image() - legacyBotAvatar.onload = onLegacyImageLoadBot + legacyBotAvatar = new Image() + legacyBotAvatar.onload = onLegacyImageLoadBot - function onLegacyImageLoadBot () { - legacyBotAvatarLoaded = true - thisObject.bot.avatar = legacyBotAvatar - } + function onLegacyImageLoadBot () { + legacyBotAvatarLoaded = true + thisObject.bot.avatar = legacyBotAvatar + } - legacyBotAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + REPO + '/' + PROFILE_PIC - } else { + legacyBotAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + REPO + '/' + PROFILE_PIC + } else { /* Here we will download the images of teams uploaded at the Teams Module. There might be Product Cards of bots beloging to teams not present currently at the Teams Module, in those cases nothing should happen. */ - teamAvatar = new Image() + teamAvatar = new Image() - teamAvatar.onload = onImageLoad + teamAvatar.onload = onImageLoad - function onImageLoad () { - teamAvatarLoaded = true + function onImageLoad () { + teamAvatarLoaded = true + } + + teamAvatar.src = window.canvasApp.context.teamProfileImages.get(TEAM) + + botAvatar = new Image() + botAvatar.onload = onImageLoadBot + + function onImageLoadBot () { + botAvatarLoaded = true + thisObject.bot.avatar = botAvatar + } + + botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT) } - - teamAvatar.src = window.canvasApp.context.teamProfileImages.get(TEAM) - - botAvatar = new Image() - botAvatar.onload = onImageLoadBot - - function onImageLoadBot () { - botAvatarLoaded = true - thisObject.bot.avatar = botAvatar - } - - botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT) + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } } } diff --git a/Scales/topScale.js b/Scales/topScale.js new file mode 100644 index 000000000..bfe552c39 --- /dev/null +++ b/Scales/topScale.js @@ -0,0 +1,56 @@ +function newRigthScale () { + let thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize + } + + const RIGHT_MARGIN = 50 + + let container = newContainer() + container.initialize() + thisObject.container = container + + thisObject.container.frame.width = RIGHT_MARGIN + thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y + + container.frame.position.x = viewPort.visibleArea.bottomRight.x + container.frame.position.y = TOP_SPACE_HEIGHT + + container.isDraggeable = false + container.isClickeable = false + container.isWheeleable = true + + return thisObject + + function initialize () { + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + } + + function onMouseWheel (pDelta) { + if (pDelta < 0) { + pDelta = -0.1 + } else { + pDelta = 0.1 + } + } + + function getContainer (point) { + let container + + /* First we check if this point is inside this object UI. */ + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return this.container + } else { + /* This point does not belong to this space. */ + + return undefined + } + } + + function draw () { + + } +} diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 06ecfe4e0..b047ad9ae 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -15,6 +15,7 @@ function newChartSpace () { var thisObject = { container: undefined, + drawBackground: drawBackground, draw: draw, timeMachines: [], getContainer: getContainer, // returns the inner most container that holds the point received by parameter. @@ -97,11 +98,16 @@ function newChartSpace () { } } + function drawBackground () { + for (var i = 0; i < thisObject.timeMachines.length; i++) { + var timeMachine = thisObject.timeMachines[i] + timeMachine.drawBackground() + } + } + function draw () { thisObject.container.frame.draw(false, false) - /* When we draw the chart space, that means we draw all the time machines in it. */ - for (var i = 0; i < thisObject.timeMachines.length; i++) { var timeMachine = thisObject.timeMachines[i] timeMachine.draw() diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 4869b8366..cd203c8ae 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -24,6 +24,7 @@ function newPanelsSpace () { container.displacement.containerName = 'Panels Space' container.frame.containerName = 'Panels Space' + panelsMap = new Map() return thisObject function initialize () { @@ -32,7 +33,7 @@ function newPanelsSpace () { } - function createNewPanel (pType, pParameters) { + function createNewPanel (pType, pParameters, pOwner) { let panel switch (pType) { @@ -47,7 +48,6 @@ function newPanelsSpace () { case 'Products Panel': { panel = newProductsPanel() - panel.initialize() break } case 'Plotter Panel': @@ -58,7 +58,13 @@ function newPanelsSpace () { } } - thisObject.panels.push(panel) + let panelArray = panelsMap.get(pOwner) + if (panelArray === undefined) { + panelArray = [] + panelsMap.set(pOwner, panelArray) + } + + panelArray.push(panel) panel.handle = Math.floor((Math.random() * 10000000) + 1) @@ -76,12 +82,15 @@ function newPanelsSpace () { } } - function getPanel (pPanelHandle) { - for (let i = 0; i < thisObject.panels.length; i++) { - let panel = thisObject.panels[i] + function getPanel (pPanelHandle, pOwner) { + thisObject.panels = panelsMap.get(pOwner) + if (thisObject.panels != undefined) { + for (let i = 0; i < thisObject.panels.length; i++) { + let panel = thisObject.panels[i] - if (panel.handle === pPanelHandle) { - return panel + if (panel.handle === pPanelHandle) { + return panel + } } } } @@ -91,9 +100,20 @@ function newPanelsSpace () { /* When we draw a time machine, that means also to draw all the charts in it. */ - for (var i = 0; i < thisObject.panels.length; i++) { - let panel = thisObject.panels[i] - panel.draw() + thisObject.panels = panelsMap.get('Global') + if (thisObject.panels != undefined) { + for (var i = 0; i < thisObject.panels.length; i++) { + let panel = thisObject.panels[i] + panel.draw() + } + } + + thisObject.panels = panelsMap.get(window.CHART_ON_FOCUS) + if (thisObject.panels !== undefined) { + for (var i = 0; i < thisObject.panels.length; i++) { + let panel = thisObject.panels[i] + panel.draw() + } } } diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js index 57fdc3dda..4c19710eb 100644 --- a/Spaces/TopSpace.js +++ b/Spaces/TopSpace.js @@ -48,9 +48,6 @@ function newTopSpace () { let container return - container = thisObject.endUser.getContainer(point) - if (container !== undefined) { return container } - container = thisObject.currentEvent.getContainer(point) if (container !== undefined) { return container } diff --git a/SplashScreen.js b/SplashScreen.js index 78ea7d85a..0697ad560 100644 --- a/SplashScreen.js +++ b/SplashScreen.js @@ -100,7 +100,7 @@ function newSplashScreen () { /* Second the % of Advance. */ let label = '' + Math.trunc(stepsInitializationCounter) + ' %' - stepsInitializationCounter = stepsInitializationCounter + 0.5 + stepsInitializationCounter = stepsInitializationCounter + 0.1 if (stepsInitializationCounter > 99) { splashScreenNeeded = false diff --git a/TimeMachine.js b/TimeMachine.js index ffd545090..29312f0b7 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -17,6 +17,7 @@ function newTimeMachine () { let thisObject = { container: undefined, + drawBackground: drawBackground, draw: draw, charts: [], getContainer: getContainer, // returns the inner most container that holds the point received by parameter. @@ -33,7 +34,8 @@ function newTimeMachine () { container.frame.containerName = 'Time Machine' let controlPanelHandle // We need this to destroy the Panel when this object is itself destroyed or no longer needs it... - let productsPanelHandle // ... also to request a reference to the object for the cases we need it. + // ... also to request a reference to the object for the cases we need it. + const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 return thisObject @@ -55,16 +57,14 @@ function newTimeMachine () { /* Each Time Machine has a Control Panel. */ - controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel') - let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle) - - productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel') - let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle) - - let iteration = 0 + let panelOwner = 'Global' + controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner) + let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner) /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ + let position = 0 // This defines the position of each chart respect to each other. + let timelineChart = newTimelineChart() timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement @@ -76,17 +76,17 @@ function newTimeMachine () { timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 - timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.5 * iteration + timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position - timelineChart.initialize(productsPanel, onDefaultMarketInitialized) + position++ - iteration++ + timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, onDefaultInitialized) - function onDefaultMarketInitialized (err) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultMarketInitialized -> Entering function.') } + function onDefaultInitialized (err) { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Entering function.') } if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultMarketInitialized -> Initialization of the only market failed.') } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Initialization of the only market failed.') } callBackFunction(err) return @@ -97,24 +97,32 @@ function newTimeMachine () { controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined) timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime) - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) - - // initializeTheRestOfTheMarkets(); + initializeTheRest() } - function initializeTheRestOfTheMarkets () { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRestOfTheMarkets -> Entering function.') } + function initializeTheRest () { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> Entering function.') } - markets.forEach(initializeTimelineChart) + let leftToInitialize = SUPPORTED_EXCHANGES.length * SUPPORTED_MARKETS.length - 1 // The default exchange and market was already initialized. + let alreadyInitialized = 0 - function initializeTimelineChart (item, key, mapObj) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRestOfTheMarkets -> initializeTimelineChart -> Entering function.') } + for (let i = 0; i < SUPPORTED_EXCHANGES.length; i++) { + for (let j = 0; j < SUPPORTED_MARKETS.length; j++) { + let exchange = SUPPORTED_EXCHANGES[i] + let market = SUPPORTED_MARKETS[j] - if (key === INITIAL_DEFAULT_MARKET) { - // We skip this market since it has already been initialized. + if ( + exchange === DEFAULT_EXCHANGE && + market.assetA === DEFAULT_MARKET.assetA && + market.assetB === DEFAULT_MARKET.assetB + ) { continue } - return + initializeTimelineChart(exchange, market) } + } + + function initializeTimelineChart (exchange, market) { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> initializeTimelineChart -> Entering function.') } let timelineChart = newTimelineChart() @@ -127,29 +135,40 @@ function newTimeMachine () { timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 - timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.5 * iteration + timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position - timelineChart.initialize(productsPanel, finalSteps) + position++ - iteration++ + timelineChart.initialize(exchange, market, finalSteps) function finalSteps () { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRestOfTheMarkets -> initializeTimelineChart -> finalSteps -> Entering function.') } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> initializeTimelineChart -> finalSteps -> Entering function.') } thisObject.charts.push(timelineChart) controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined) timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime) + + alreadyInitialized++ + + if (alreadyInitialized === leftToInitialize) { + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + } } } } } + function drawBackground () { + for (let i = 0; i < this.charts.length; i++) { + let chart = this.charts[i] + chart.drawBackground() + } + } + function draw () { this.container.frame.draw(false, false) - /* When we draw a time machine, that means also to draw all the charts in it. */ - for (let i = 0; i < this.charts.length; i++) { let chart = this.charts[i] chart.draw() diff --git a/TimelineChart.js b/TimelineChart.js index 7d6d1179d..3058a650d 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -14,6 +14,7 @@ let thisObject = { setDatetime: setDatetime, container: undefined, + drawBackground: drawBackground, draw: draw, getContainer: getContainer, initialize: initialize, @@ -45,6 +46,10 @@ let canDrawLogoAA = false let plotterManager + let exchange + let market + + let productsPanelHandle return thisObject @@ -58,11 +63,18 @@ } } - function initialize (pProductsPanel, callBackFunction) { + function initialize (pExchange, pMarket, callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } /* We load the logow we will need for the background. */ + exchange = pExchange + market = pMarket + + let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA + productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner) + let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner) + productsPanel.initialize(exchange, market) logoA = new Image() logoB = new Image() @@ -95,13 +107,9 @@ logoA.src = window.canvasApp.urlPrefix + 'Images/tether-logo-background.png' logoB.src = window.canvasApp.urlPrefix + 'Images/bitcoin-logo-background.png' - logoExchange.src = window.canvasApp.urlPrefix + 'Images/poloniex-logo-background.png' + logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png' logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' - /* Remember the Products Panel */ - - productsPanel = pProductsPanel - chartGrid = newChartGrid() chartGrid.initialize() @@ -132,10 +140,10 @@ plotterManager.container.frame.width = thisObject.container.frame.width plotterManager.container.frame.height = thisObject.container.frame.height - plotterManager.container.frame.position.x = thisObject.container.frame.position.x - plotterManager.container.frame.position.y = thisObject.container.frame.position.y + plotterManager.container.frame.position.x = 0 + plotterManager.container.frame.position.y = 0 - plotterManager.initialize(pProductsPanel, onPlotterManagerReady) + plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady) function onPlotterManagerReady (err) { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onPlotterManagerReady -> Entering function.') } @@ -294,13 +302,25 @@ } } + function drawBackground () { + if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') } + + if (thisObject.container.frame.isInViewPort()) { + if (window.CHART_ON_FOCUS === '') { + window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA + + this.container.frame.draw() + + drawChartsBackgroundImages() + } + } + } + function draw () { if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') } if (thisObject.container.frame.isInViewPort()) { - this.container.frame.draw() - - drawBackground() + drawChartsBackground() chartGrid.draw(thisObject.container, timeLineCoordinateSystem) @@ -310,8 +330,36 @@ } } - function drawBackground () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') } + function drawChartsBackground () { + /* We will paint some transparent background here. */ + + let opacity = '0.9' + + let fromPoint = { + x: 0, + y: 0 + } + + let toPoint = { + x: 0, + y: thisObject.container.frame.height + } + + fromPoint = transformThisPoint(fromPoint, thisObject.container) + toPoint = transformThisPoint(toPoint, thisObject.container) + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + + browserCanvasContext.closePath() + + browserCanvasContext.fill() + } + + function drawChartsBackgroundImages () { + if (INTENSIVE_LOG === true) { logger.write('[INFO] drawChartsBackground -> Entering function.') } if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return } @@ -420,32 +468,6 @@ browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight) } } - - /* We will paint some transparent background here. */ - - let opacity = '0.9' - - let fromPoint = { - x: 0, - y: 0 - } - - let toPoint = { - x: 0, - y: thisObject.container.frame.height - } - - fromPoint = transformThisPoint(fromPoint, thisObject.container) - toPoint = transformThisPoint(toPoint, thisObject.container) - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - - browserCanvasContext.closePath() - - browserCanvasContext.fill() } function moveViewPortToCurrentDatetime () {