Integration with new icons
This commit is contained in:
1 parent
975892ac4d
commit
8f89dc7892
3 files changed
+11
-242
No files matched your search
+2
-2
@@ -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);
|
||||
|
||||
@@ -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 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
+3
-235
@@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in new issue
Block a user