Controls showing up again, now as part of the cockpit
This commit is contained in:
Luis Fernando Molina committed
1 parent
011c870ed6
commit
cb60bf2e90
4 files changed
+371
-140
No files matched your search
@@ -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)
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+13
-85
@@ -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 () {
|
||||
|
||||
Reference in new issue
Block a user