diff --git a/FloatingSpace/CircularProgressBar.js b/FloatingSpace/CircularProgressBar.js index 614f0c559..2fa62cfbb 100644 --- a/FloatingSpace/CircularProgressBar.js +++ b/FloatingSpace/CircularProgressBar.js @@ -55,8 +55,15 @@ function newCircularProgressBar () { if (thisObject.payload === undefined) { return } if (thisObject.payload.uiObject === undefined) { return } opacityCounters[message.event.seconds] = 2000 - thisObject.payload.uiObject.setValue(message.event.processingDate, 2000) - thisObject.payload.uiObject.setPercentage(message.event.percentage, 2000) + if (message.event.processingDate !== undefined) { + thisObject.payload.uiObject.setValue(message.event.processingDate, 2000) + } + if (message.event.percentage !== undefined) { + thisObject.payload.uiObject.setPercentage(message.event.percentage, 2000) + } + if (message.event.status !== undefined) { + thisObject.payload.uiObject.setStatus(message.event.status, 200000) + } } function getContainer (point) { diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index dd939259f..70dc25f4c 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -339,11 +339,11 @@ function newFloatingObject () { function thisObjectPhysics () { // The radius also have a target. - if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 15) { + if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 10) { if (thisObject.container.frame.radius < thisObject.targetRadius) { - thisObject.container.frame.radius = thisObject.container.frame.radius + 15 + thisObject.container.frame.radius = thisObject.container.frame.radius + 10 } else { - thisObject.container.frame.radius = thisObject.container.frame.radius - 15 + thisObject.container.frame.radius = thisObject.container.frame.radius - 10 } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } @@ -479,7 +479,7 @@ function newFloatingObject () { thisObject.rawRadius = radius thisObject.targetRadius = radius - thisObject.container.frame.radius = radius / 3 + thisObject.container.frame.radius = radius / 5 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } diff --git a/FloatingSpace/UiObject.js b/FloatingSpace/UiObject.js index 257623268..af80bbdb0 100644 --- a/FloatingSpace/UiObject.js +++ b/FloatingSpace/UiObject.js @@ -33,6 +33,7 @@ function newUiObject () { setErrorMessage: setErrorMessage, setValue: setValue, setPercentage: setPercentage, + setStatus: setStatus, physics: physics, drawBackground: drawBackground, drawMiddleground: drawMiddleground, @@ -72,6 +73,9 @@ function newUiObject () { let hasPercentage let percentageCounter = 0 + let hasStatus + let statusCounter = 0 + let previousDistanceToChainParent let readyToChainAttachDisplayCounter = 5 let readyToChainAttachDisplayIncrement = 0.1 @@ -97,6 +101,7 @@ function newUiObject () { let errorMessage = '' let currentValue = 0 let currentPercentage = '' + let currentStatus = '' let rightDragging = false let eventSubscriptionIdHeartbeat @@ -284,6 +289,7 @@ function newUiObject () { errorMessagePhisycs() valuePhisycs() percentagePhisycs() + statusPhisycs() chainDetachingPhysics() chainAttachingPhysics() referenceDetachingPhysics() @@ -653,6 +659,14 @@ function newUiObject () { } } + function statusPhisycs () { + statusCounter-- + if (statusCounter < 0) { + statusCounter = 0 + hasStatus = false + } + } + function highlight () { isHighlighted = true highlightCounter = 30 @@ -691,6 +705,18 @@ function newUiObject () { } } + function setStatus (status, counter) { + if (status !== undefined) { + currentStatus = status + hasStatus = true + if (counter !== undefined) { + statusCounter = counter + } else { + statusCounter = 100 + } + } + } + function run (callBackFunction) { /* We setup the circular progress bar. */ if (thisObject.circularProgressBar !== undefined) { @@ -760,6 +786,9 @@ function newUiObject () { thisObject.circularProgressBar = undefined } thisObject.isRunning = false + hasValue = false + hasPercentage = false + hasStatus = false lastHeartBeat = undefined } } @@ -889,6 +918,7 @@ function newUiObject () { if (thisObject.isOnFocus === false) { drawValue() drawPercentage() + drawStatus() drawText() thisObject.uiObjectTitle.draw() } @@ -968,6 +998,7 @@ function newUiObject () { drawErrorMessage() drawValue() drawPercentage() + drawStatus() drawText() if (drawTitle === true) { @@ -1240,6 +1271,10 @@ function newUiObject () { label = label.substring(0, MAX_LABEL_LENGTH) + '...' } + if (label.length > 30) { + fontSize = fontSize / 2 + } + labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, y: position.y + radius * 7 / 5 + fontSize * FONT_ASPECT_RATIO + 15 @@ -1295,6 +1330,49 @@ function newUiObject () { } } + function drawStatus () { + if (hasStatus === false) { return } + if (canvas.floatingSpace.inMapMode === true) { return } + + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + if (canvas.floatingSpace.inMapMode === true) { + position = canvas.floatingSpace.transformPointToMap(position) + } + + let radius = thisObject.container.frame.radius * 1.4 + /* Label Text */ + let labelPoint + let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4 / 2 + let label + + if (radius > 6) { + const MAX_LABEL_LENGTH = 65 + + label = currentStatus + + if (label !== undefined) { + if (label.length > MAX_LABEL_LENGTH) { + label = label.substring(0, MAX_LABEL_LENGTH) + '...' + } + + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 15, + y: position.y - radius * 7 / 5 + fontSize * FONT_ASPECT_RATIO + 15 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } + function addIndexNumber (label) { switch (thisObject.payload.node.type) { case 'Phase': { @@ -1614,3 +1692,4 @@ function newUiObject () { } } } +