diff --git a/FloatingSpace/CircularProgressBar.js b/FloatingSpace/CircularProgressBar.js index be412c47d..614f0c559 100644 --- a/FloatingSpace/CircularProgressBar.js +++ b/FloatingSpace/CircularProgressBar.js @@ -55,7 +55,8 @@ 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) + thisObject.payload.uiObject.setValue(message.event.processingDate, 2000) + thisObject.payload.uiObject.setPercentage(message.event.percentage, 2000) } function getContainer (point) { diff --git a/FloatingSpace/UiObject.js b/FloatingSpace/UiObject.js index 97d398271..a1544d5b8 100644 --- a/FloatingSpace/UiObject.js +++ b/FloatingSpace/UiObject.js @@ -32,6 +32,7 @@ function newUiObject () { highlight: highlight, setErrorMessage: setErrorMessage, setValue: setValue, + setPercentage: setPercentage, physics: physics, drawBackground: drawBackground, drawMiddleground: drawMiddleground, @@ -68,6 +69,9 @@ function newUiObject () { let hasValue let valueCounter = 0 + let hasPercentage + let percentageCounter = 0 + let previousDistanceToChainParent let readyToChainAttachDisplayCounter = 5 let readyToChainAttachDisplayIncrement = 0.1 @@ -92,6 +96,7 @@ function newUiObject () { let errorMessage = '' let currentValue = 0 + let currentPercentage = '' let rightDragging = false let eventSubscriptionIdHeartbeat @@ -278,6 +283,7 @@ function newUiObject () { highlightPhisycs() errorMessagePhisycs() valuePhisycs() + percentagePhisycs() chainDetachingPhysics() chainAttachingPhysics() referenceDetachingPhysics() @@ -639,6 +645,14 @@ function newUiObject () { } } + function percentagePhisycs () { + percentageCounter-- + if (percentageCounter < 0) { + percentageCounter = 0 + hasPercentage = false + } + } + function highlight () { isHighlighted = true highlightCounter = 30 @@ -653,11 +667,27 @@ function newUiObject () { } } - function setValue (value) { + function setValue (value, counter) { if (value !== undefined) { currentValue = value hasValue = true - valueCounter = 100 + if (counter !== undefined) { + valueCounter = counter + } else { + valueCounter = 100 + } + } + } + + function setPercentage (percentage, counter) { + if (percentage !== undefined) { + currentPercentage = percentage + hasPercentage = true + if (counter !== undefined) { + percentageCounter = counter + } else { + percentageCounter = 100 + } } } @@ -858,6 +888,7 @@ function newUiObject () { function drawMiddleground () { if (thisObject.isOnFocus === false) { drawValue() + drawPercentage() drawText() thisObject.uiObjectTitle.draw() } @@ -936,6 +967,7 @@ function newUiObject () { drawErrorMessage() drawValue() + drawPercentage() drawText() if (drawTitle === true) { @@ -1187,7 +1219,7 @@ function newUiObject () { position = canvas.floatingSpace.transformPointToMap(position) } - let radius = thisObject.container.frame.radius * 1.5 + let radius = thisObject.container.frame.radius * 1.35 /* Label Text */ let labelPoint let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4 @@ -1220,6 +1252,49 @@ function newUiObject () { } } + function drawPercentage () { + if (hasPercentage === 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.75 + /* Label Text */ + let labelPoint + let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4 + let label + + if (radius > 6) { + const MAX_LABEL_LENGTH = 65 + + label = currentPercentage + + 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 - 5, + y: position.y + radius * 7 / 5 + fontSize * FONT_ASPECT_RATIO + 15 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TURQUOISE + ', 1)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } + function addIndexNumber (label) { switch (thisObject.payload.node.type) { case 'Phase': {