From f917e599897def3ca4912f8b420b63d75ccd4beb Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 27 Mar 2019 22:43:12 +0100 Subject: [PATCH 1/9] cleaning code --- Spaces/TopSpace.js | 3 --- 1 file changed, 3 deletions(-) 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 } From c898f8ab312b4221d1073ef09b14b7260ab9a98b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 31 Mar 2019 09:29:31 +0200 Subject: [PATCH 2/9] Error handling improved --- ProductCard.js | 168 ++++++++++++++++++++++++++----------------------- 1 file changed, 90 insertions(+), 78 deletions(-) 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) } } } From 8b878bbb7458e32a0a9f84088e4e6ceb66504819 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 1 Apr 2019 08:27:35 +0200 Subject: [PATCH 3/9] First steps towards improving scales --- Scales/topScale.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 Scales/topScale.js 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 () { + + } +} From b459856f1f046f648e92537eb4768e901917e7cb Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 2 Apr 2019 14:32:26 +0200 Subject: [PATCH 4/9] Multi Exchange, Multi Market adaptations part 1 --- Globals.js | 2 +- PlottersManager.js | 12 ++++++++---- TimeMachine.js | 4 ++-- TimelineChart.js | 8 ++++++-- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/Globals.js b/Globals.js index cb98311a1..7ee83a508 100644 --- a/Globals.js +++ b/Globals.js @@ -94,7 +94,7 @@ 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 SUPPORTED_EXCHANGES = ["Poloniex", "Coss"]; const DEFAULT_EXCHANGE = "Poloniex"; const DEFAULT_MARKET = { assetA: "USDT", diff --git a/PlottersManager.js b/PlottersManager.js index 215529a45..b24381dc9 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 { @@ -461,7 +465,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 +509,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 { diff --git a/TimeMachine.js b/TimeMachine.js index ffd545090..619e28635 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -78,7 +78,7 @@ function newTimeMachine () { 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.initialize(productsPanel, onDefaultMarketInitialized) + timelineChart.initialize(productsPanel, DEFAULT_EXCHANGE, DEFAULT_MARKET, onDefaultMarketInitialized) iteration++ @@ -110,7 +110,7 @@ function newTimeMachine () { function initializeTimelineChart (item, key, mapObj) { if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRestOfTheMarkets -> initializeTimelineChart -> Entering function.') } - if (key === INITIAL_DEFAULT_MARKET) { + if (key === DEFAULT_MARKET.assetA + '.' + DEFAULT_MARKET.assetB) { // We skip this market since it has already been initialized. return diff --git a/TimelineChart.js b/TimelineChart.js index 7d6d1179d..e36a9ee6f 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -45,6 +45,8 @@ let canDrawLogoAA = false let plotterManager + let exchange + let market return thisObject @@ -58,11 +60,13 @@ } } - function initialize (pProductsPanel, callBackFunction) { + function initialize (pProductsPanel, 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 logoA = new Image() logoB = new Image() @@ -135,7 +139,7 @@ plotterManager.container.frame.position.x = thisObject.container.frame.position.x plotterManager.container.frame.position.y = thisObject.container.frame.position.y - plotterManager.initialize(pProductsPanel, onPlotterManagerReady) + plotterManager.initialize(pProductsPanel, pExchange, pMarket, onPlotterManagerReady) function onPlotterManagerReady (err) { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onPlotterManagerReady -> Entering function.') } From 254d93801a1ac940f29da7a96a34e0be8616a537 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 2 Apr 2019 19:42:17 +0200 Subject: [PATCH 5/9] Product Pannel at the TimelineChart level --- Globals.js | 6 ++++ Panels/ProductsPanel.js | 14 ++++++--- Spaces/PanelsSpace.js | 1 - TimeMachine.js | 65 ++++++++++++++++++++++++----------------- TimelineChart.js | 14 +++++---- 5 files changed, 63 insertions(+), 37 deletions(-) diff --git a/Globals.js b/Globals.js index 7ee83a508..934f36753 100644 --- a/Globals.js +++ b/Globals.js @@ -95,6 +95,12 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; const SUPPORTED_EXCHANGES = ["Poloniex", "Coss"]; +const SUPPORTED_MARKETS = [ + { + assetA: "USDT", + assetB: "BTC", + } +]; const DEFAULT_EXCHANGE = "Poloniex"; const DEFAULT_MARKET = { assetA: "USDT", 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/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 4869b8366..4c7e8d663 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -47,7 +47,6 @@ function newPanelsSpace () { case 'Products Panel': { panel = newProductsPanel() - panel.initialize() break } case 'Plotter Panel': diff --git a/TimeMachine.js b/TimeMachine.js index 619e28635..9b0bb8ddf 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -33,7 +33,7 @@ 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. return thisObject @@ -58,13 +58,10 @@ function newTimeMachine () { 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 - /* 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 +73,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 * 1.5 * position - timelineChart.initialize(productsPanel, DEFAULT_EXCHANGE, DEFAULT_MARKET, 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 @@ -98,23 +95,32 @@ function newTimeMachine () { 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 === DEFAULT_MARKET.assetA + '.' + DEFAULT_MARKET.assetB) { - // 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,19 +133,26 @@ 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 * 1.5 * 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++ + console.log('alreadyInitialized ' + alreadyInitialized) + console.log('leftToInitialize ' + leftToInitialize) + if (alreadyInitialized === leftToInitialize) { + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + } } } } diff --git a/TimelineChart.js b/TimelineChart.js index e36a9ee6f..fe72fde39 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -48,6 +48,8 @@ let exchange let market + let productsPanelHandle + return thisObject function finalize () { @@ -60,7 +62,7 @@ } } - function initialize (pProductsPanel, pExchange, pMarket, callBackFunction) { + function initialize (pExchange, pMarket, callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } @@ -68,6 +70,10 @@ exchange = pExchange market = pMarket + productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel') + let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle) + productsPanel.initialize(exchange, market) + logoA = new Image() logoB = new Image() logoExchange = new Image() @@ -102,10 +108,6 @@ logoExchange.src = window.canvasApp.urlPrefix + 'Images/poloniex-logo-background.png' logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' - /* Remember the Products Panel */ - - productsPanel = pProductsPanel - chartGrid = newChartGrid() chartGrid.initialize() @@ -139,7 +141,7 @@ plotterManager.container.frame.position.x = thisObject.container.frame.position.x plotterManager.container.frame.position.y = thisObject.container.frame.position.y - plotterManager.initialize(pProductsPanel, pExchange, pMarket, onPlotterManagerReady) + plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady) function onPlotterManagerReady (err) { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onPlotterManagerReady -> Entering function.') } From e5fdd5a028edb03ba0fb5e02544ab58246973474 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 2 Apr 2019 20:03:25 +0200 Subject: [PATCH 6/9] Coss Logo added --- PlottersManager.js | 5 +++++ TimeMachine.js | 3 +-- TimelineChart.js | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/PlottersManager.js b/PlottersManager.js index b24381dc9..6519321f4 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -365,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. */ diff --git a/TimeMachine.js b/TimeMachine.js index 9b0bb8ddf..3827fcd02 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -94,8 +94,7 @@ function newTimeMachine () { controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined) timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime) - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) - // initializeTheRest() + initializeTheRest() } function initializeTheRest () { diff --git a/TimelineChart.js b/TimelineChart.js index fe72fde39..c45f1f44b 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -105,7 +105,7 @@ 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' chartGrid = newChartGrid() From e755819ab66bfcee14b95522cccb6e1e02d82dd9 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 2 Apr 2019 21:22:37 +0200 Subject: [PATCH 7/9] Bug fixed !!! Plotters not plotting at the right place --- Globals.js | 2 +- TimeMachine.js | 7 +++---- TimelineChart.js | 4 ++-- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/Globals.js b/Globals.js index 934f36753..127b81a9d 100644 --- a/Globals.js +++ b/Globals.js @@ -101,7 +101,7 @@ const SUPPORTED_MARKETS = [ assetB: "BTC", } ]; -const DEFAULT_EXCHANGE = "Poloniex"; +const DEFAULT_EXCHANGE = "Coss"; const DEFAULT_MARKET = { assetA: "USDT", assetB: "BTC", diff --git a/TimeMachine.js b/TimeMachine.js index 3827fcd02..50ffd9a0c 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -73,7 +73,7 @@ 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 * position + timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.1 * position position++ @@ -132,7 +132,7 @@ 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 * position + timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.1 * position position++ @@ -147,8 +147,7 @@ function newTimeMachine () { timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime) alreadyInitialized++ - console.log('alreadyInitialized ' + alreadyInitialized) - console.log('leftToInitialize ' + leftToInitialize) + if (alreadyInitialized === leftToInitialize) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } diff --git a/TimelineChart.js b/TimelineChart.js index c45f1f44b..52cca550d 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -138,8 +138,8 @@ 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(productsPanel, pExchange, pMarket, onPlotterManagerReady) From 3ac7a55c3aa29911842d6287054501b49c1e4e1e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 2 Apr 2019 22:58:11 +0200 Subject: [PATCH 8/9] Only one set of panels is show now, depending on the owner --- Animation.js | 4 ++++ PlottersManager.js | 5 +++-- Spaces/PanelsSpace.js | 41 +++++++++++++++++++++++++++++++---------- TimeMachine.js | 10 ++++++---- TimelineChart.js | 13 +++++++++---- 5 files changed, 53 insertions(+), 20 deletions(-) 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/PlottersManager.js b/PlottersManager.js index 6519321f4..80f07e8ef 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -553,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/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 4c7e8d663..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) { @@ -57,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) @@ -75,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 + } } } } @@ -90,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/TimeMachine.js b/TimeMachine.js index 50ffd9a0c..a13ccc5ac 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -34,6 +34,7 @@ function newTimeMachine () { let controlPanelHandle // We need this to destroy the Panel when this object is itself destroyed or no longer needs 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,8 +56,9 @@ function newTimeMachine () { /* Each Time Machine has a Control Panel. */ - controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel') - let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle) + 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. */ @@ -73,7 +75,7 @@ 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.1 * position + timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position position++ @@ -132,7 +134,7 @@ 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.1 * position + timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position position++ diff --git a/TimelineChart.js b/TimelineChart.js index 52cca550d..e9e028cd9 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -70,8 +70,9 @@ exchange = pExchange market = pMarket - productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel') - let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle) + 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() @@ -304,9 +305,13 @@ if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') } if (thisObject.container.frame.isInViewPort()) { - this.container.frame.draw() + if (window.CHART_ON_FOCUS === '') { + window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA - drawBackground() + this.container.frame.draw() + + drawBackground() + } chartGrid.draw(thisObject.container, timeLineCoordinateSystem) From e89769f0d9d2e0f05708428c9f59f37f86f0d67e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 2 Apr 2019 23:31:08 +0200 Subject: [PATCH 9/9] drawBackground Imlemented --- Canvas.js | 1 + Spaces/ChartSpace.js | 10 ++++-- SplashScreen.js | 2 +- TimeMachine.js | 10 ++++-- TimelineChart.js | 73 +++++++++++++++++++++++++------------------- 5 files changed, 60 insertions(+), 36 deletions(-) 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/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/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 a13ccc5ac..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. @@ -158,11 +159,16 @@ function newTimeMachine () { } } + 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 e9e028cd9..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, @@ -301,8 +302,8 @@ } } - function draw () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') } + function drawBackground () { + if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') } if (thisObject.container.frame.isInViewPort()) { if (window.CHART_ON_FOCUS === '') { @@ -310,8 +311,16 @@ this.container.frame.draw() - drawBackground() + drawChartsBackgroundImages() } + } + } + + function draw () { + if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') } + + if (thisObject.container.frame.isInViewPort()) { + drawChartsBackground() chartGrid.draw(thisObject.container, timeLineCoordinateSystem) @@ -321,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 } @@ -431,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 () {