From 8f89dc78923d7285104efcea736a28b410e177b5 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 19:15:04 +0200 Subject: [PATCH] Integration with new icons --- Strategies.js | 4 +- TradingSimulation.js | 11 +- TradingSimulationPanel.js | 238 +------------------------------------- 3 files changed, 11 insertions(+), 242 deletions(-) diff --git a/Strategies.js b/Strategies.js index 8e2e663f9..de5e91ce3 100644 --- a/Strategies.js +++ b/Strategies.js @@ -130,7 +130,7 @@ }) for (let i = 1; i < 15; i++) { - let strategyImage = loadEmoji("Symbols/Emoji Symbols-" + (112 + i) + ".png"); + let strategyImage = canvas.strategySpace.iconByPartType.get('Strategy'); strategyImages.push(strategyImage); } @@ -561,7 +561,7 @@ drawStick(recordPoint1, recordPoint3); drawStick(recordPoint2, recordPoint4); - if (imageToDraw.isLoaded === true) { + if (imageToDraw.canDrawIcon === true) { browserCanvasContext.drawImage(imageToDraw, recordPoint3.x - imageSize / 2, recordPoint3.y - imageSize / 2, imageSize, imageSize); if (record.status === 1) { browserCanvasContext.drawImage(imageToDraw, recordPoint4.x - imageSize / 2, recordPoint4.y - imageSize / 2, imageSize, imageSize); diff --git a/TradingSimulation.js b/TradingSimulation.js index 2b6a9aec2..60030a0dc 100644 --- a/TradingSimulation.js +++ b/TradingSimulation.js @@ -136,8 +136,8 @@ /* Loading a few icons */ - imageStopLossPhase = loadEmoji("stop.png"); - imageBuyOrderPhase = loadEmoji("Nature/Emoji Natur-67.png"); + imageStopLossPhase = canvas.strategySpace.iconByPartType.get('Stop'); + imageBuyOrderPhase = canvas.strategySpace.iconByPartType.get('Phase'); callBackFunction(); @@ -657,9 +657,9 @@ browserCanvasContext.stroke() - if (imageStopLossPhase.isLoaded === true && stopLossPhase > 0) { + if (imageStopLossPhase.canDrawIcon === true && stopLossPhase > 0) { browserCanvasContext.drawImage(imageStopLossPhase, recordPoint5.x - imageSize, recordPoint5.y - imageSize * 1.25, imageSize, imageSize); - printLabel(stopLossPhase, recordPoint5.x - imageSize / 2, recordPoint5.y - imageSize * 1.5, '0.9', 8); + printLabel(stopLossPhase, recordPoint5.x - imageSize / 2 - 3, recordPoint5.y - imageSize * 1.5, '0.9', 8); } /* Next we are drawing the Buy Order */ @@ -685,7 +685,7 @@ browserCanvasContext.lineWidth = 5 browserCanvasContext.stroke() - if (imageBuyOrderPhase.isLoaded === true && buyOrderPhase > 0) { + if (imageBuyOrderPhase.canDrawIcon === true && buyOrderPhase > 0) { browserCanvasContext.drawImage(imageBuyOrderPhase, recordPoint9.x - imageSize * 2 / 3, recordPoint9.y + imageSize / 4, imageSize, imageSize); printLabel(buyOrderPhase, recordPoint9.x - imageSize * 1 / 3, recordPoint9.y + imageSize * 1.9, '0.9', 8); } @@ -764,5 +764,6 @@ + diff --git a/TradingSimulationPanel.js b/TradingSimulationPanel.js index 0427a9c10..d40ab75e0 100644 --- a/TradingSimulationPanel.js +++ b/TradingSimulationPanel.js @@ -20,7 +20,7 @@ function newAAMastersPlottersTradingSimulationTradingSimulationTradingSimulation let currentRecord; let panelTabButton - let controlHandler + return thisObject; @@ -38,15 +38,10 @@ function newAAMastersPlottersTradingSimulationTradingSimulationTradingSimulation panelTabButton.fitFunction = thisObject.fitFunction panelTabButton.initialize() - controlHandler = canvas.bottomSpace.createNewControl('Over The Line', drawAssetBalanceUI, 'Global') - } function finalize() { - canvas.bottomSpace.destroyControl(controlHandler) - controlHandler = undefined - } function getContainer(point) { @@ -233,235 +228,7 @@ function newAAMastersPlottersTradingSimulationTradingSimulationTradingSimulation paramsArray.push(params) - let control = canvas.bottomSpace.getControl(controlHandler, 'Global') - control.paramsArray = paramsArray - - } - - function drawAssetBalanceUI(paramsArray) { - - drawAssetCircle(paramsArray[0]) - drawAssetCircle(paramsArray[1]) - - let fontSize - let label - let xOffset - let yOffset - - const OPACITY = 1; - - /* We put the params.VALUE in the middle */ - - fontSize = 15; - - browserCanvasContext.font = "bold " + fontSize + 'px ' + UI_FONT.PRIMARY - - label = 'ASSET BALANCES' - - - xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO; - yOffset = -40 - - labelPoint = { - x: 0 - xOffset + (paramsArray[1].LEFT_OFFSET - paramsArray[0].LEFT_OFFSET) / 2 + paramsArray[0].LEFT_OFFSET - 20, - y: BOTTOM_SPACE_POSITION - BOTTOM_SPACE_HEIGHT/ 2 - yOffset - }; - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - } - - function drawAssetCircle(params) { - - /* We draw the circle container */ - - const RED_LINE_HIGHT = 5; - const RADIOUS = 50; - const OPACITY = 1; - - let centerPoint = { - x: params.LEFT_OFFSET, - y: BOTTOM_SPACE_POSITION - BOTTOM_SPACE_HEIGHT / 2 - } - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.9 * Math.PI, 2.1 * Math.PI) - browserCanvasContext.closePath(); - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' - browserCanvasContext.fill() - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.closePath(); - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' - browserCanvasContext.fill() - - - /* We draw the circle bar */ - - const DEFAULT_THICKNESS = 2; - const VALUE_THICKNESS = 8; - const VALUE_BG_THICKNESS = 1; - const BAR_RADIOUS = RADIOUS * 0.85; - - let BAR_START_ANGLE = 0.9 * Math.PI; - let BAR_END_ANGLE = 2.1 * Math.PI; - let CURRENT_VALUE_ANGLE = params.VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / params.MAX_VALUE + BAR_START_ANGLE - let MIN_VALUE_ANGLE = params.MIN_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / params.MAX_VALUE + BAR_START_ANGLE - let INIT_VALUE_ANGLE = params.INIT_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / params.MAX_VALUE + BAR_START_ANGLE - let PROFIT_VALUE_ANGLE = CURRENT_VALUE_ANGLE - - if (CURRENT_VALUE_ANGLE > INIT_VALUE_ANGLE) { CURRENT_VALUE_ANGLE = INIT_VALUE_ANGLE } - - if (params.VALUE > 0) { - - browserCanvasContext.setLineDash([0, 0]) - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, BAR_START_ANGLE, MIN_VALUE_ANGLE) - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' - browserCanvasContext.lineWidth = VALUE_BG_THICKNESS - browserCanvasContext.stroke() - browserCanvasContext.closePath(); - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE) - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' - browserCanvasContext.lineWidth = VALUE_BG_THICKNESS - browserCanvasContext.stroke() - browserCanvasContext.closePath(); - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE) - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')' - browserCanvasContext.lineWidth = VALUE_BG_THICKNESS - browserCanvasContext.stroke() - browserCanvasContext.closePath(); - - if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) { - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE) - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')' - browserCanvasContext.lineWidth = VALUE_BG_THICKNESS - browserCanvasContext.stroke() - browserCanvasContext.closePath(); - } - - browserCanvasContext.setLineDash([2, 3]) - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, BAR_START_ANGLE, MIN_VALUE_ANGLE) - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' - browserCanvasContext.lineWidth = VALUE_THICKNESS - browserCanvasContext.stroke() - browserCanvasContext.closePath(); - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE) - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' - browserCanvasContext.lineWidth = VALUE_THICKNESS - browserCanvasContext.stroke() - browserCanvasContext.closePath(); - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE) - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')' - browserCanvasContext.lineWidth = VALUE_THICKNESS - browserCanvasContext.stroke() - browserCanvasContext.closePath(); - - if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) { - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE) - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')' - browserCanvasContext.lineWidth = VALUE_THICKNESS - browserCanvasContext.stroke() - browserCanvasContext.closePath(); - } - } - - /* Common Variables */ - - let fontSize - let label - let xOffset - let yOffset - - /* We put the params.VALUE in the middle */ - - fontSize = 22; - - browserCanvasContext.font = "bold " + fontSize + 'px ' + UI_FONT.PRIMARY - - label = params.VALUE; - if (isNaN(label) === false) { - label = Number(label); - if (label === 0) { label = label.toFixed(2) } else { label = label.toLocaleString() } - } - - label = label.substring(0, 5); - - - xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 7; - - labelPoint = { - x: centerPoint.x - xOffset, - y: centerPoint.y - }; - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - - /* We put the top label */ - - fontSize = 12; - - browserCanvasContext.font = "bold " + fontSize + 'px ' + UI_FONT.PRIMARY - - label = params.ASSET_LABEL; - - xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3; - yOffset = 22 - - labelPoint = { - x: centerPoint.x - xOffset, - y: centerPoint.y - yOffset - }; - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - - /* We put the bottom label */ - - fontSize = 12; - - browserCanvasContext.font = "bold " + fontSize + 'px ' + UI_FONT.PRIMARY - - label = params.ASSET_NAME; - - xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3; - yOffset = - 15 - - labelPoint = { - x: centerPoint.x - xOffset, - y: centerPoint.y - yOffset - }; - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - + canvas.cockpitSpace.assetBalances.setParamsArray(paramsArray) } } @@ -481,3 +248,4 @@ function newAAMastersPlottersTradingSimulationTradingSimulationTradingSimulation +