From 574897b6a15e1374c0da82db0bac52bdfb666152 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 09:50:37 +0200 Subject: [PATCH 01/10] Image by part type implemented --- FloatingSpace/StrategyPart.js | 22 +++------- FloatingSpace/StrategyPartConstructor.js | 10 ----- Globals.js | 4 +- Spaces/StrategySpace.js | 52 +++++++++++++++++++++--- 4 files changed, 55 insertions(+), 33 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 3bd8d5f24..b662e24dc 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -34,8 +34,7 @@ function newStrategyPart () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - let image - let imagePath + let icon let selfFocusEventSubscriptionId let selfNotFocuskEventSubscriptionId @@ -63,8 +62,7 @@ function newStrategyPart () { thisObject.codeEditor = undefined } - image = undefined - imagePath = undefined + icon = undefined } function initialize (payload, menuItemsInitialValues) { @@ -85,15 +83,7 @@ function newStrategyPart () { /* Load Part Image */ - if (thisObject.imagePath !== undefined) { - image = new Image() - image.onload = onImageLoad - - function onImageLoad () { - image.canDrawIcon = true - } - image.src = window.canvasApp.urlPrefix + thisObject.imagePath - } + icon = canvas.strategySpace.iconByPartType.get(payload.node.type) selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) @@ -360,10 +350,10 @@ function newStrategyPart () { /* Image */ - if (image !== undefined) { - if (image.canDrawIcon === true) { + if (icon !== undefined) { + if (icon.canDrawIcon === true) { browserCanvasContext.drawImage( - image, position.x - thisObject.payload.floatingObject.currentImageSize / 2, + icon, position.x - thisObject.payload.floatingObject.currentImageSize / 2, position.y - thisObject.payload.floatingObject.currentImageSize / 2, thisObject.payload.floatingObject.currentImageSize, thisObject.payload.floatingObject.currentImageSize) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index b3335ee6c..eb8fc1ce7 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -57,7 +57,6 @@ function newStrategyPartConstructor () { case 'Trading System': { floatingObject.isPinned = true floatingObject.positionLocked = true - strategyPart.imagePath = 'Images/Icons/style-01/analysis.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -126,7 +125,6 @@ function newStrategyPartConstructor () { break } case 'Strategy': { - strategyPart.imagePath = 'Images/Icons/style-01/quality.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -168,7 +166,6 @@ function newStrategyPartConstructor () { break } case 'Strategy Entry Event': { - strategyPart.imagePath = 'Images/Icons/style-01/startup.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -198,7 +195,6 @@ function newStrategyPartConstructor () { break } case 'Strategy Exit Event': { - strategyPart.imagePath = 'Images/Icons/style-01/support.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -228,7 +224,6 @@ function newStrategyPartConstructor () { break } case 'Trade Entry Event': { - strategyPart.imagePath = 'Images/Icons/style-01/compass.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -258,7 +253,6 @@ function newStrategyPartConstructor () { break } case 'Stop': { - strategyPart.imagePath = 'Images/Icons/style-01/pixel.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -288,7 +282,6 @@ function newStrategyPartConstructor () { break } case 'Take Profit': { - strategyPart.imagePath = 'Images/Icons/style-01/competition.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -318,7 +311,6 @@ function newStrategyPartConstructor () { break } case 'Phase': { - strategyPart.imagePath = 'Images/Icons/style-01/placeholder.png' strategyPart.codeEditor = newCodeEditor() strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction strategyPart.codeEditor.initialize() @@ -377,7 +369,6 @@ function newStrategyPartConstructor () { break } case 'Situation': { - strategyPart.imagePath = 'Images/Icons/style-01/attractive.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -419,7 +410,6 @@ function newStrategyPartConstructor () { break } case 'Condition': { - strategyPart.imagePath = 'Images/Icons/style-01/testing.png' strategyPart.codeEditor = newCodeEditor() strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction strategyPart.codeEditor.initialize() diff --git a/Globals.js b/Globals.js index 77d9ed28c..039d5dbcd 100644 --- a/Globals.js +++ b/Globals.js @@ -121,8 +121,8 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; -const LOGGED_IN_USER_LOCAL_STORAGE = "user" -const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "access_token" +const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" +const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "xaccess_token" const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 8b666a730..e4bfcca0c 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -5,6 +5,8 @@ function newStrategySpace () { sidePanel: undefined, workplace: undefined, container: undefined, + iconCollection: undefined, + iconByPartType: undefined, draw: draw, getContainer: getContainer, makeVisible: makeVisible, @@ -18,18 +20,40 @@ function newStrategySpace () { container.isDraggeable = false + thisObject.iconCollection = new Map() + thisObject.iconByPartType = new Map() + return thisObject async function initialize () { - // thisObject.sidePanel = newSidePanel() - // thisObject.sidePanel.initialize() - thisObject.workplace = newWorkspace() - // thisObject.workplace.container.connectToParent(thisObject.sidePanel.container, true, true) + thisObject.workplace.initialize() await thisObject.workplace.loadFromStrategyzer() - // thisObject.sidePanel.areas.push(thisObject.workplace) + loadIconCollection() + buildIconByPartTypeMap() + } + + function buildIconByPartTypeMap () { + const relationshipArray = [ + ['Trading System', 'analysis'], + ['Strategy', 'quality'], + ['Strategy Entry Event', 'startup'], + ['Strategy Exit Event', 'support'], + ['Trade Entry Event', 'compass'], + ['Stop', 'pixel'], + ['Take Profit', 'competition'], + ['Phase', 'placeholder'], + ['Situation', 'attractive'], + ['Condition', 'testing'] + ] + + for (let i = 0; i < relationshipArray.length; i++) { + let record = relationshipArray[i] + let icon = thisObject.iconCollection.get(record[1]) + thisObject.iconByPartType.set(record[0], icon) + } } function loadIconCollection () { @@ -86,6 +110,24 @@ function newStrategySpace () { 'vector', 'video-player' ] + + for (let i = 0; i < iconsNames.length; i++) { + let name = iconsNames[i] + loadImage(name) + } + + function loadImage (name) { + const PATH = 'Images/Icons/style-01/' + let image = new Image() + image.onload = onImageLoad + image.fileName = name + + function onImageLoad () { + image.canDrawIcon = true + } + image.src = window.canvasApp.urlPrefix + PATH + name + '.png' + thisObject.iconCollection.set(name, image) + } } function makeVisible () { From a01b7f645d8dd6eea5309b837b82caab4447ca54 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:04:56 +0200 Subject: [PATCH 02/10] Menu Item Icons not loadeed locally --- FloatingSpace/CircularMenuItem.js | 17 +--- FloatingSpace/StrategyPartConstructor.js | 112 +++++++++++------------ 2 files changed, 58 insertions(+), 71 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 53803a756..af26ef4d2 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -74,21 +74,8 @@ function newCircularMenuItem () { thisObject.payload = pPayload /* Load Menu Images */ - thisObject.iconOn = new Image() - thisObject.iconOn.onload = onOnImageLoad - - function onOnImageLoad () { - if (thisObject.imagePathOff !== undefined) { - thisObject.iconOff = new Image() - thisObject.iconOff.onload = onOffImageLoad - - function onOffImageLoad () { - thisObject.canDrawIcon = true - } - thisObject.iconOff.src = window.canvasApp.urlPrefix + thisObject.imagePathOff - } - } - thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn + thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.imagePathOn) + thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.imagePathOff) if (thisObject.currentStatus === true) { thisObject.icon = thisObject.iconOn diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index eb8fc1ce7..438b19085 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -64,8 +64,8 @@ function newStrategyPartConstructor () { currentStatus: true, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -76,8 +76,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Reload', visible: false, - imagePathOn: 'Images/Icons/style-01/vector.png', - imagePathOff: 'Images/Icons/style-01/vector.png', + imagePathOn: 'vector', + imagePathOff: 'vector', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -91,8 +91,8 @@ function newStrategyPartConstructor () { workDoneLabel: 'Saved', workFailedLabel: 'Not Saved', visible: false, - imagePathOn: 'Images/Icons/style-01/upload.png', - imagePathOff: 'Images/Icons/style-01/upload.png', + imagePathOn: 'upload', + imagePathOff: 'upload', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -103,8 +103,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'New Strategy', visible: false, - imagePathOn: 'Images/Icons/style-01/quality.png', - imagePathOff: 'Images/Icons/style-01/quality.png', + imagePathOn: 'quality', + imagePathOff: 'quality', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -115,8 +115,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/Icons/style-01/tools.png', - imagePathOff: 'Images/Icons/style-01/tools.png', + imagePathOn: 'tools', + imagePathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -132,8 +132,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -144,8 +144,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -156,8 +156,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/Icons/style-01/tools.png', - imagePathOff: 'Images/Icons/style-01/tools.png', + imagePathOn: 'tools', + imagePathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -173,8 +173,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -185,8 +185,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -202,8 +202,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -214,8 +214,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -231,8 +231,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -243,8 +243,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -260,8 +260,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -272,8 +272,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/placeholder.png', - imagePathOff: 'Images/Icons/style-01/placeholder.png', + imagePathOn: 'placeholder', + imagePathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -289,8 +289,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -301,8 +301,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/placeholder.png', - imagePathOff: 'Images/Icons/style-01/placeholder.png', + imagePathOn: 'placeholder', + imagePathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -323,8 +323,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -335,8 +335,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'Images/Icons/style-01/html.png', - imagePathOff: 'Images/Icons/style-01/html.png', + imagePathOn: 'html', + imagePathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -347,8 +347,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -359,8 +359,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -376,8 +376,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -388,8 +388,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Condition', visible: false, - imagePathOn: 'Images/Icons/style-01/testing.png', - imagePathOff: 'Images/Icons/style-01/testing.png', + imagePathOn: 'testing', + imagePathOff: 'testing', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -400,8 +400,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -422,8 +422,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -434,8 +434,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'Images/Icons/style-01/html.png', - imagePathOff: 'Images/Icons/style-01/html.png', + imagePathOn: 'html', + imagePathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -446,8 +446,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Condition', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, From 6db14dfa1fe7af3d725f48d879a2fc2f6f9b325f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:26:29 +0200 Subject: [PATCH 03/10] Refactoring for icon --- FloatingSpace/CircularMenu.js | 4 +- FloatingSpace/CircularMenuItem.js | 10 +- FloatingSpace/ProfileBall.js | 20 ++-- FloatingSpace/StrategyPartConstructor.js | 112 +++++++++++------------ 4 files changed, 73 insertions(+), 73 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index f2181a6b5..2a5e3baf2 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -57,8 +57,8 @@ function newCircularMenu () { menuItem.workDoneLabel = menuItemInitialValue.workDoneLabel menuItem.workFailedLabel = menuItemInitialValue.workFailedLabel menuItem.visible = menuItemInitialValue.visible - menuItem.imagePathOn = menuItemInitialValue.imagePathOn - menuItem.imagePathOff = menuItemInitialValue.imagePathOff + menuItem.iconPathOn = menuItemInitialValue.iconPathOn + menuItem.iconPathOff = menuItemInitialValue.iconPathOff menuItem.rawRadius = menuItemInitialValue.rawRadius menuItem.targetRadius = menuItemInitialValue.label menuItem.currentRadius = menuItemInitialValue.currentRadius diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index af26ef4d2..496a4d491 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -15,8 +15,8 @@ function newCircularMenuItem () { workDoneLabel: undefined, workFailedLabel: undefined, visible: false, - imagePathOn: undefined, - imagePathOff: undefined, + iconPathOn: undefined, + iconPathOff: undefined, rawRadius: undefined, targetRadius: undefined, currentRadius: undefined, @@ -74,8 +74,8 @@ function newCircularMenuItem () { thisObject.payload = pPayload /* Load Menu Images */ - thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.imagePathOn) - thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.imagePathOff) + thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.iconPathOn) + thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.iconPathOff) if (thisObject.currentStatus === true) { thisObject.icon = thisObject.iconOn @@ -217,7 +217,7 @@ function newCircularMenuItem () { iconSize = thisObject.currentRadius } - if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) { + if (thisObject.icon.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) { browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - iconSize, menuPosition.y - iconSize, iconSize * 2, iconSize * 2) /* Menu Label */ diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index c940bfbd1..18b853346 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -24,8 +24,8 @@ function newProfileBall () { let ballStringMenu = [ { visible: false, - imagePathOn: 'Images/menu.icon.on.1.gif', - imagePathOff: 'Images/menu.icon.off.1.gif', + iconPathOn: 'Images/menu.icon.on.1.gif', + iconPathOff: 'Images/menu.icon.off.1.gif', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -33,8 +33,8 @@ function newProfileBall () { }/*, { visible: false, - imagePathOn: "Images/menu.icon.on.2.gif", - imagePathOff: "Images/menu.icon.off.2.gif", + iconPathOn: "Images/menu.icon.on.2.gif", + iconPathOff: "Images/menu.icon.off.2.gif", rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -42,8 +42,8 @@ function newProfileBall () { }, { visible: false, - imagePathOn: "Images/menu.icon.on.3.gif", - imagePathOff: "Images/menu.icon.off.3.gif", + iconPathOn: "Images/menu.icon.on.3.gif", + iconPathOff: "Images/menu.icon.off.3.gif", rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -51,8 +51,8 @@ function newProfileBall () { }, { visible: false, - imagePathOn: "Images/menu.icon.on.4.gif", - imagePathOff: "Images/menu.icon.off.4.gif", + iconPathOn: "Images/menu.icon.on.4.gif", + iconPathOff: "Images/menu.icon.off.4.gif", rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -73,9 +73,9 @@ function newProfileBall () { function onImageLoad () { menuItem.canDrawIcon = true } - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff + menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.iconPathOff } - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn + menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.iconPathOn menuItem.icon = menuItem.iconOn // The default value is ON. } diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 438b19085..1fc87a391 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -64,8 +64,8 @@ function newStrategyPartConstructor () { currentStatus: true, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -76,8 +76,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Reload', visible: false, - imagePathOn: 'vector', - imagePathOff: 'vector', + iconPathOn: 'vector', + iconPathOff: 'vector', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -91,8 +91,8 @@ function newStrategyPartConstructor () { workDoneLabel: 'Saved', workFailedLabel: 'Not Saved', visible: false, - imagePathOn: 'upload', - imagePathOff: 'upload', + iconPathOn: 'upload', + iconPathOff: 'upload', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -103,8 +103,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'New Strategy', visible: false, - imagePathOn: 'quality', - imagePathOff: 'quality', + iconPathOn: 'quality', + iconPathOff: 'quality', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -115,8 +115,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'tools', - imagePathOff: 'tools', + iconPathOn: 'tools', + iconPathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -132,8 +132,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -144,8 +144,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -156,8 +156,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'tools', - imagePathOff: 'tools', + iconPathOn: 'tools', + iconPathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -173,8 +173,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -185,8 +185,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -202,8 +202,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -214,8 +214,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -231,8 +231,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -243,8 +243,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -260,8 +260,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -272,8 +272,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'placeholder', - imagePathOff: 'placeholder', + iconPathOn: 'placeholder', + iconPathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -289,8 +289,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -301,8 +301,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'placeholder', - imagePathOff: 'placeholder', + iconPathOn: 'placeholder', + iconPathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -323,8 +323,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -335,8 +335,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'html', - imagePathOff: 'html', + iconPathOn: 'html', + iconPathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -347,8 +347,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -359,8 +359,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Phase', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -376,8 +376,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -388,8 +388,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Condition', visible: false, - imagePathOn: 'testing', - imagePathOff: 'testing', + iconPathOn: 'testing', + iconPathOff: 'testing', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -400,8 +400,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Situation', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -422,8 +422,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -434,8 +434,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'html', - imagePathOff: 'html', + iconPathOn: 'html', + iconPathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -446,8 +446,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Condition', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, From 4f469bc28faff6462c17f2a5d1757a1fd7977a3c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:28:49 +0200 Subject: [PATCH 04/10] Fine tuning text position --- FloatingSpace/StrategyPart.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index b662e24dc..9da4db4c8 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -258,7 +258,7 @@ function newStrategyPart () { } labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 } @@ -361,3 +361,4 @@ function newStrategyPart () { } } } + From f045312dcb0b6f6434f04e4cfab3b4cf5c5e1eca Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:46:12 +0200 Subject: [PATCH 05/10] Menu Item Ready to get the icons dinamically --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 23 ++++++++++++++--------- FloatingSpace/StrategyPartConstructor.js | 8 ++++++++ 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 2a5e3baf2..d79c9c099 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -64,6 +64,7 @@ function newCircularMenu () { menuItem.currentRadius = menuItemInitialValue.currentRadius menuItem.angle = menuItemInitialValue.angle menuItem.currentStatus = menuItemInitialValue.currentStatus + menuItem.relatedStrategyPart = menuItemInitialValue.relatedStrategyPart if (menuItem.label === undefined) { menuItem.type = 'Icon Only' diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 496a4d491..30553ac7a 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -23,6 +23,7 @@ function newCircularMenuItem () { angle: undefined, container: undefined, payload: undefined, + relatedStrategyPart: undefined, physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, @@ -72,16 +73,8 @@ function newCircularMenuItem () { function initialize (pPayload) { thisObject.payload = pPayload - /* Load Menu Images */ - thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.iconPathOn) - thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.iconPathOff) - - if (thisObject.currentStatus === true) { - thisObject.icon = thisObject.iconOn - } else { - thisObject.icon = thisObject.iconOff - } + iconPhysics() selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) @@ -130,6 +123,18 @@ function newCircularMenuItem () { backgroundColorToUse = defaultBackgroudColor } + iconPhysics() + } + + function iconPhysics () { + if (thisObject.relatedStrategyPart !== undefined) { + thisObject.iconOn = canvas.strategySpace.iconByPartType.get(thisObject.relatedStrategyPart) + thisObject.iconOff = canvas.strategySpace.iconByPartType.get(thisObject.relatedStrategyPart) + } else { + thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.iconPathOn) + thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.iconPathOff) + } + /* Current Status sets the icon to be used */ if (thisObject.currentStatus === true) { diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 1fc87a391..a4715cd3b 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -105,6 +105,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'quality', iconPathOff: 'quality', + relatedStrategyPart: 'Strategy', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -187,6 +188,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -216,6 +218,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -245,6 +248,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -274,6 +278,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'placeholder', iconPathOff: 'placeholder', + relatedStrategyPart: 'Phase', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -303,6 +308,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'placeholder', iconPathOff: 'placeholder', + relatedStrategyPart: 'Phase', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -349,6 +355,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -390,6 +397,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'testing', iconPathOff: 'testing', + relatedStrategyPart: 'Condition', rawRadius: 8, targetRadius: 0, currentRadius: 0, From d92455804f7e5d4d2d6b7fc57c98829465828513 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:48:14 +0200 Subject: [PATCH 06/10] strategy part also with iconPhysics --- FloatingSpace/StrategyPart.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 9da4db4c8..3d07e5eda 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -83,7 +83,7 @@ function newStrategyPart () { /* Load Part Image */ - icon = canvas.strategySpace.iconByPartType.get(payload.node.type) + iconPhysics() selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) @@ -126,6 +126,12 @@ function newStrategyPart () { thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y } + + iconPhysics() + } + + function iconPhysics () { + icon = canvas.strategySpace.iconByPartType.get(payload.node.type) } function onFocus () { @@ -361,4 +367,3 @@ function newStrategyPart () { } } } - From 011c870ed67ef601aa488472f73abf50d66fd8bf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 16:14:25 +0200 Subject: [PATCH 07/10] Refactoring to Cockpit Space --- Canvas.js | 65 ++++++---------------- ChartsSpace/ViewPort.js | 4 +- {BottomSpace => CockpitSpace}/UIControl.js | 0 Globals.js | 4 +- Project.njsproj | 10 ++-- Scales/TimePeriodScale.js | 2 +- Spaces/ChartSpace.js | 11 ++-- Spaces/{BottomSpace.js => CockpitSpace.js} | 15 +++-- Spaces/FloatingSpace.js | 6 +- TopSpace/CurrentEvent.js | 2 +- TopSpace/EndUser.js | 2 +- TopSpace/Login.js | 2 +- 12 files changed, 44 insertions(+), 79 deletions(-) rename {BottomSpace => CockpitSpace}/UIControl.js (100%) rename Spaces/{BottomSpace.js => CockpitSpace.js} (96%) diff --git a/Canvas.js b/Canvas.js index 970b151fb..3bc45b757 100644 --- a/Canvas.js +++ b/Canvas.js @@ -36,6 +36,7 @@ function newCanvas () { chartSpace: undefined, floatingSpace: undefined, panelsSpace: undefined, + cockpitSpace: undefined, bottomSpace: undefined, strategySpace: undefined, animation: undefined, @@ -49,41 +50,6 @@ function newCanvas () { let lastContainerMouseOver return thisObject -/* - The canvas object represents a layer on top of the browser canvas object. - - Graphically, thiscanvas object has 5 spaces: - - 1. The "Top Space": It is where Team and User information is displayed. - 2. The "Chart Space": It is where the charts are plotted. - 3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow. - 4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space. - 5. The "Bottom Space": Includes UIControls that other panels can add there. - 6. The "Strategy Spece": Functionality to manage Strategies - - All these spaces are child objects of the Canvas object. - - Canvas - | - | - ---> topSpace - | - | - ---> chartSpace - | - | - ---> flaotingSpace - | - | - ---> panelsSpace - | - | - ---> bottomSpace - | - | - ---> strategySpace -*/ - function finalize () { try { if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } @@ -128,8 +94,8 @@ function newCanvas () { thisObject.strategySpace = newStrategySpace() await thisObject.strategySpace.initialize() - thisObject.bottomSpace = newBottomSpace() - thisObject.bottomSpace.initialize() + thisObject.cockpitSpace = newCockpitSpace() + thisObject.cockpitSpace.initialize() thisObject.panelsSpace = newPanelsSpace() thisObject.panelsSpace.initialize() @@ -140,6 +106,8 @@ function newCanvas () { thisObject.chartSpace = newChartSpace() thisObject.chartSpace.initialize(onCharSpaceInitialized) + thisObject.bottomSpace = thisObject.cockpitSpace + function onCharSpaceInitialized (err) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCharSpaceInitialized -> Entering function.') } @@ -174,8 +142,8 @@ function newCanvas () { animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) + animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw, onFunctionAdded) + animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics, onFunctionAdded) animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) @@ -334,9 +302,9 @@ function newCanvas () { return } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - container = thisObject.bottomSpace.getContainer(point) + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.isDraggeable === true) { containerBeingDragged = container @@ -425,9 +393,9 @@ function newCanvas () { return } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - container = thisObject.bottomSpace.getContainer(point) + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) @@ -583,10 +551,10 @@ function newCanvas () { } } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - if (thisObject.bottomSpace !== undefined) { - container = thisObject.bottomSpace.getContainer(point) + if (thisObject.cockpitSpace !== undefined) { + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -665,9 +633,9 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } - /* We try the Bottom Space. */ + /* We try the CockpitSpace. */ - container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) + container = canvas.cockpitSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { container.eventHandler.raiseEvent('onMouseWheel', event) @@ -760,4 +728,3 @@ function newCanvas () { } } } - diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js index e3d4ee247..264c5b07b 100644 --- a/ChartsSpace/ViewPort.js +++ b/ChartsSpace/ViewPort.js @@ -12,7 +12,7 @@ function newViewPort () { let ANIMATION_INCREMENT = 0.25 let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - let BOTTOM_MARGIN = 20 + BOTTOM_SPACE_HEIGHT + let BOTTOM_MARGIN = 20 + COCKPIT_SPACE_HEIGHT let LEFT_MARGIN = 50 let RIGHT_MARGIN = 50 let MARGINS = { @@ -84,7 +84,7 @@ function newViewPort () { function resize () { TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - BOTTOM_MARGIN = 20 + browserCanvas.height - BOTTOM_SPACE_POSITION + BOTTOM_MARGIN = 20 + browserCanvas.height - COCKPIT_SPACE_POSITION LEFT_MARGIN = 50 RIGHT_MARGIN = 50 MARGINS = { diff --git a/BottomSpace/UIControl.js b/CockpitSpace/UIControl.js similarity index 100% rename from BottomSpace/UIControl.js rename to CockpitSpace/UIControl.js diff --git a/Globals.js b/Globals.js index 039d5dbcd..3261d18fd 100644 --- a/Globals.js +++ b/Globals.js @@ -163,10 +163,10 @@ const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; const TOP_SPACE_HEIGHT = 5; -const BOTTOM_SPACE_HEIGHT = 40; +const COCKPIT_SPACE_HEIGHT = 40; const BREAKPOINT_HEIGHT = 15; const SIDE_PANEL_WIDTH = 450 -let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT +let COCKPIT_SPACE_POSITION = browserCanvas.height - COCKPIT_SPACE_HEIGHT const PRODUCT_CARD_STATUS = { ON: 'on', diff --git a/Project.njsproj b/Project.njsproj index 4634a91ad..7cc00eb05 100644 --- a/Project.njsproj +++ b/Project.njsproj @@ -32,13 +32,13 @@ - + Code Code - + Code @@ -85,7 +85,7 @@ Code - + Code @@ -112,7 +112,7 @@ Code - + Code @@ -177,7 +177,7 @@ - + diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index ab3712520..55ba9a6b8 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -187,7 +187,7 @@ to be visible at the top of the viewPort. */ /* Lets start the drawing. */ - let displacement = viewPort.margins.BOTTOM - BOTTOM_SPACE_HEIGHT + let displacement = viewPort.margins.BOTTOM - COCKPIT_SPACE_HEIGHT /* browserCanvasContext.beginPath() diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 39b9ac34b..2af37d1d0 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -117,8 +117,8 @@ function newChartSpace () { returnPoint.x = 0 } - if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) { + returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2 } if (point.y < 0) { @@ -137,7 +137,7 @@ function newChartSpace () { return false } - if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) { return false } @@ -149,7 +149,7 @@ function newChartSpace () { } function physics () { - thisObject.container.frame.height = BOTTOM_SPACE_POSITION + thisObject.container.frame.height = COCKPIT_SPACE_POSITION if (thisObject.container.frame.height <= 0 / 100) { thisObject.visible = false @@ -180,7 +180,7 @@ function newChartSpace () { let toPoint = { x: browserCanvas.width, - y: BOTTOM_SPACE_POSITION + y: COCKPIT_SPACE_POSITION } browserCanvasContext.beginPath() @@ -199,4 +199,3 @@ function newChartSpace () { } } } - diff --git a/Spaces/BottomSpace.js b/Spaces/CockpitSpace.js similarity index 96% rename from Spaces/BottomSpace.js rename to Spaces/CockpitSpace.js index 3bee0df9d..c84447c60 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/CockpitSpace.js @@ -1,6 +1,6 @@ - function newBottomSpace () { - const MODULE_NAME = 'Bottom Space' + function newCockpitSpace () { + const MODULE_NAME = 'CockpitSpace' const ERROR_LOG = true let thisObject = { @@ -49,10 +49,10 @@ function resize () { thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT thisObject.container.frame.width = browserCanvas.width - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT } function physics () { @@ -67,8 +67,8 @@ thisObject.container.isDraggeable = false } - if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) { - thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - COCKPIT_SPACE_HEIGHT) { + thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT thisObject.status = 'BOTTOM' canvas.strategySpace.makeInvisible() } else { @@ -83,7 +83,7 @@ canvas.panelsSpace.visible = true } - BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y + COCKPIT_SPACE_POSITION = thisObject.container.frame.position.y viewPort.resize() } @@ -305,4 +305,3 @@ browserCanvasContext.stroke() } } - diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 32752e594..1c9aeb5dd 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -79,8 +79,8 @@ function newFloatingSpace () { returnPoint.x = 0 } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) { + returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT } if (point.y > browserCanvas.height) { @@ -99,7 +99,7 @@ function newFloatingSpace () { return false } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { + if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) { return false } diff --git a/TopSpace/CurrentEvent.js b/TopSpace/CurrentEvent.js index 81a5c92d3..b2831e277 100644 --- a/TopSpace/CurrentEvent.js +++ b/TopSpace/CurrentEvent.js @@ -70,7 +70,7 @@ function newCurrentEvent () { thisObject.container = container thisObject.container.frame.width = 150 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT resize() diff --git a/TopSpace/EndUser.js b/TopSpace/EndUser.js index 6edaf5b44..b8699eb69 100644 --- a/TopSpace/EndUser.js +++ b/TopSpace/EndUser.js @@ -12,7 +12,7 @@ function newEndUser () { thisObject.container = container thisObject.container.frame.width = 200 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 5 container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT diff --git a/TopSpace/Login.js b/TopSpace/Login.js index 7d242191c..61aa996c1 100644 --- a/TopSpace/Login.js +++ b/TopSpace/Login.js @@ -19,7 +19,7 @@ function newLogin () { thisObject.container = container thisObject.container.frame.width = 200 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 1 container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT From cb60bf2e90220327ea627b61cb159a0517cede6b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 17:14:59 +0200 Subject: [PATCH 08/10] Controls showing up again, now as part of the cockpit --- CockpitSpace/AssetBalances.js | 122 ++++++++++++++++++ CockpitSpace/Speedometer.js | 236 ++++++++++++++++++++++++++++++++++ CockpitSpace/UIControl.js | 55 -------- Spaces/CockpitSpace.js | 98 ++------------ 4 files changed, 371 insertions(+), 140 deletions(-) create mode 100644 CockpitSpace/AssetBalances.js create mode 100644 CockpitSpace/Speedometer.js delete mode 100644 CockpitSpace/UIControl.js diff --git a/CockpitSpace/AssetBalances.js b/CockpitSpace/AssetBalances.js new file mode 100644 index 000000000..5b7db2c35 --- /dev/null +++ b/CockpitSpace/AssetBalances.js @@ -0,0 +1,122 @@ + +function newAssetBalances () { + const MODULE_NAME = 'Asset Balances' + + let thisObject = { + visible: true, + container: undefined, + paramsArray: undefined, + setParamsArray: setParamsArray, + physics: physics, + draw: draw, + speedometers: [], + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false + + return thisObject + + function finalize () { + for (let i = 0; i < thisObject.speedometers.length; i++) { + let speedometer = thisObject.speedometers[i] + speedometer.finalize() + } + thisObject.container.finalize() + thisObject.container = undefined + thisObject.paramsArray = undefined + } + + function initialize () { + for (let i = 0; i < 2; i++) { + let speedometer = newSpeedometer() + + speedometer.container.frame.position.x = thisObject.container.frame.width / 2 - speedometer.container.frame.width / 2 + speedometer.container.frame.position.y = thisObject.container.frame.height / 2 - speedometer.container.frame.height / 2 + + speedometer.initialize() + thisObject.speedometers.push(speedometer) + } + } + + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } + + let container + for (let i = 0; i < thisObject.speedometers.length; i++) { + container = thisObject.speedometers[i].getContainer(point, purpose) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return container + } + } + } + } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function setParamsArray (paramsArray) { + thisObject.paramsArray = paramsArray + for (let i = 0; i < thisObject.speedometers.length; i++) { + let speedometer = thisObject.speedometers[i] + speedometer.params = paramsArray[i] + } + } + + function physics () { + + } + + function draw () { + if (thisObject.visible !== true) { return } + + for (let i = 0; i < thisObject.speedometers.length; i++) { + let speedometer = thisObject.speedometers[i] + speedometer.draw() + } + + drawAssetBalances() + } + + function drawAssetBalances () { + if (thisObject.paramsArray === undefined) { return } + + 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 = -45 + + labelPoint = { + x: 0 - xOffset + (thisObject.paramsArray[1].LEFT_OFFSET - thisObject.paramsArray[0].LEFT_OFFSET) / 2 + thisObject.paramsArray[0].LEFT_OFFSET - 20, + y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 - yOffset + } + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } +} diff --git a/CockpitSpace/Speedometer.js b/CockpitSpace/Speedometer.js new file mode 100644 index 000000000..afa2b1204 --- /dev/null +++ b/CockpitSpace/Speedometer.js @@ -0,0 +1,236 @@ + +function newSpeedometer () { + const MODULE_NAME = 'Speedometer' + + let thisObject = { + visible: true, + container: undefined, + params: undefined, + physics: physics, + draw: draw, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false + + return thisObject + + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + thisObject.params = undefined + } + + function initialize () { + + } + + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function physics () { + + } + + function draw () { + if (thisObject.params === undefined) { return } + drawAssetCircle() + } + + function drawAssetCircle () { + const RED_LINE_HIGHT = 5 + const RADIOUS = 50 + const OPACITY = 1 + + let centerPoint = { + x: thisObject.params.LEFT_OFFSET, + y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 + } + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.85 * Math.PI, 2.15 * 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.85 * Math.PI + let BAR_END_ANGLE = 2.15 * Math.PI + let CURRENT_VALUE_ANGLE = thisObject.params.VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE + let MIN_VALUE_ANGLE = thisObject.params.MIN_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE + let INIT_VALUE_ANGLE = thisObject.params.INIT_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.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 (thisObject.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 thisObject.params.VALUE in the middle */ + + fontSize = 22 + + browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY + + label = thisObject.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 = thisObject.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 = thisObject.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) + } +} diff --git a/CockpitSpace/UIControl.js b/CockpitSpace/UIControl.js deleted file mode 100644 index 515640b31..000000000 --- a/CockpitSpace/UIControl.js +++ /dev/null @@ -1,55 +0,0 @@ -function newUIControl () { - let thisObject = { - drawFunction: undefined, - paramsArray: undefined, - container: undefined, - draw: draw, - parentContainer: undefined, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - initialize: initialize - } - - let isInitialized = false - /* Cointainer stuff */ - - let container = newContainer() - - container.name = 'UI Control' - container.initialize() - - container.isClickeable = true - - thisObject.container = container - thisObject.container.frame.containerName = 'Panel Tab Button' - - return thisObject - - function initialize () { - isInitialized = true - } - - function draw () { - if (isInitialized === false) { return } - - if (thisObject.drawFunction !== undefined && thisObject.paramsArray !== undefined) { - thisObject.drawFunction(thisObject.paramsArray) - } - } - - function getContainer (point) { - let container - - /* First we check if thisObject point is inside thisObject space. */ - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - /* Now we see which is the inner most container that has it */ - - return thisObject.container - } else { - /* This point does not belong to thisObject space. */ - - return undefined - } - } -} - diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index c84447c60..a6b7b8fae 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -1,17 +1,14 @@ function newCockpitSpace () { const MODULE_NAME = 'CockpitSpace' - const ERROR_LOG = true let thisObject = { container: undefined, status: 'BOTTOM', + assetBalances: undefined, draw: draw, physics: physics, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - createNewControl: createNewControl, - destroyControl: destroyControl, - getControl: getControl, + getContainer: getContainer, finalize: finalize, initialize: initialize } @@ -36,15 +33,19 @@ thisObject.container.finalize() thisObject.container = undefined + thisObject.assetBalances = undefined } function initialize () { canvasBrowserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + + thisObject.assetBalances = newAssetBalances() + thisObject.assetBalances.initialize() } function onMouseClick (event) { - // canvas.strategySpace.tradingSystemWorkspace.showUp() + } function resize () { @@ -87,71 +88,12 @@ viewPort.resize() } - function createNewControl (pType, pDrawFunction, pOwner) { - let control - - switch (pType) { - - case 'Over The Line': - { - control = newUIControl() - control.initialize() - control.drawFunction = pDrawFunction - break - } - } - - let controlArray = controlsMap.get(pOwner) - if (controlArray === undefined) { - controlArray = [] - controlsMap.set(pOwner, controlArray) - } - - controlArray.push(control) - - control.handle = Math.floor((Math.random() * 10000000) + 1) - - return control.handle - } - - function destroyControl (pControlHandle) { - thisObject.controls = controlsMap.get('Global') - if (thisObject.controls !== undefined) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] - if (control.handle === pControlHandle) { - thisObject.controls.splice(i, 1) // Delete item from array. - return - } - } - } - - thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS) - if (thisObject.controls !== undefined) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] - if (control.handle === pControlHandle) { - thisObject.controls.splice(i, 1) // Delete item from array. - return - } - } - } - } - - function getControl (pControlHandle, pOwner) { - thisObject.controls = controlsMap.get(pOwner) - if (thisObject.controls != undefined) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] - - if (control.handle === pControlHandle) { - return control - } - } - } - } - function getContainer (point) { + let container = thisObject.assetBalances.getContainer(point) + if (container !== undefined) { + return container + } + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { @@ -164,21 +106,7 @@ drawBackground() - thisObject.controls = controlsMap.get('Global') - if (thisObject.controls !== undefined) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] - control.draw() - } - } - - thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS) - if (thisObject.controls !== undefined) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] - control.draw() - } - } + thisObject.assetBalances.draw() } function drawBackground () { From 407d13d299688d05bf9cc6e7791bc93ef179b34d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 17:46:18 +0200 Subject: [PATCH 09/10] BUG strategy space not showing fixed --- FloatingSpace/StrategyPart.js | 2 +- Spaces/CockpitSpace.js | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 3d07e5eda..aab937faa 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -131,7 +131,7 @@ function newStrategyPart () { } function iconPhysics () { - icon = canvas.strategySpace.iconByPartType.get(payload.node.type) + icon = canvas.strategySpace.iconByPartType.get(thisObject.payload.node.type) } function onFocus () { diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index a6b7b8fae..eb1872cd6 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -89,11 +89,6 @@ } function getContainer (point) { - let container = thisObject.assetBalances.getContainer(point) - if (container !== undefined) { - return container - } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { From 4b812349af9c82f38fd4008843a6d319b2d0b193 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 19:08:08 +0200 Subject: [PATCH 10/10] New Turquise color --- CockpitSpace/Speedometer.js | 3 ++- Globals.js | 4 +++- Spaces/CockpitSpace.js | 3 ++- Utilities.js | 15 --------------- 4 files changed, 7 insertions(+), 18 deletions(-) diff --git a/CockpitSpace/Speedometer.js b/CockpitSpace/Speedometer.js index afa2b1204..e93c434ba 100644 --- a/CockpitSpace/Speedometer.js +++ b/CockpitSpace/Speedometer.js @@ -71,7 +71,7 @@ function newSpeedometer () { 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.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')' browserCanvasContext.fill() /* We draw the circle bar */ @@ -234,3 +234,4 @@ function newSpeedometer () { browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } + diff --git a/Globals.js b/Globals.js index 3261d18fd..7fb404879 100644 --- a/Globals.js +++ b/Globals.js @@ -28,7 +28,9 @@ UI_COLOR = { RED: "223, 70, 60", PATINATED_TURQUOISE: "27,153,139", TITANIUM_YELLOW: "244,228,9", - MANGANESE_PURPLE: "91,80,122" + MANGANESE_PURPLE: "91,80,122", + TURQUOISE: "74,207,217", + DARK_TURQUOISE: "2,149,170" }; /* User Interface Fonts */ diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index eb1872cd6..29096fa78 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -118,7 +118,7 @@ browserCanvasContext.beginPath() browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() @@ -228,3 +228,4 @@ browserCanvasContext.stroke() } } + diff --git a/Utilities.js b/Utilities.js index 8f38d99d8..a72310054 100644 --- a/Utilities.js +++ b/Utilities.js @@ -154,21 +154,6 @@ function removeTime (datetime) { return dateOnly } -function loadEmoji (pPath) { - let newImage - - newImage = new Image() - newImage.onload = onImageLoaded - - function onImageLoaded () { - newImage.isLoaded = true - } - - newImage.src = window.canvasApp.urlPrefix + 'Images/Emoji/' + pPath - - return newImage -} - function printLabel (labelToPrint, x, y, opacity, fontSize) { let labelPoint