From 55db40435b1ba82266013cab2e8f052024884470 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 29 Dec 2018 07:08:04 +0100 Subject: [PATCH 1/2] Unused files --- ImageButton.js | 127 -------------------------------------------- TextButton.js | 140 ------------------------------------------------- 2 files changed, 267 deletions(-) delete mode 100644 ImageButton.js delete mode 100644 TextButton.js diff --git a/ImageButton.js b/ImageButton.js deleted file mode 100644 index 9a682942f..000000000 --- a/ImageButton.js +++ /dev/null @@ -1,127 +0,0 @@ -function newImageButton() { - - var thisObject = { - container: undefined, - draw: draw, - status: 'neutral', - type: undefined, - getContainer: getContainer, - initialize: initialize - }; - - var container = newContainer(); - container.initialize(); - container.isDraggeable = false; - container.isClickeable = true; - thisObject.container = container; - - let idNeutralImage; - let idOnImage; - let idOffImage; - let idDisabledImage; - - return thisObject; - - function initialize(pX, pY, pWidth, pHeight, pIdNeutralImage, pIdOnImage, pIdOffImage, pIdDisabledImage) { - - idNeutralImage = pIdNeutralImage; - idOnImage = pIdOnImage; - idOffImage = pIdOffImage; - idDisabledImage = pIdDisabledImage; - - /* Lets set the basic dimensions of this thisObject. */ - - var position = { - x: pX, - y: pY - }; - - thisObject.container.frame.position = position; - thisObject.container.frame.width = pWidth; - thisObject.container.frame.height = pHeight; - - /* Now we start listening to the onClick event from the mouse, so that we can allow users operate this thisObject. */ - - thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed, undefined); - - } - - function getContainer(point) { - - var container; - - /* First we check if this point is inside this space. */ - - if (this.container.frame.isThisPointHere(point, true) === true) { - - return this.container; - - } else { - - /* This point does not belong to this space. */ - - return undefined; - } - - } - - function buttonPressed(event, extraData) { - - switch (thisObject.status) { - - case 'neutral': - browserCanvasContext.fillStyle = onFillStyle; - return; - - case 'on': - thisObject.status = 'off'; - break; - - case 'off': - thisObject.status = 'on'; - break; - - case 'disabled': - return; - } - } - - function draw() { - - drawImage(); - - } - - function drawImage() { - - let image; - - let imagePoint = { - x: 0, - y: 0 - }; - - imagePoint = thisObject.container.frame.frameThisPoint(imagePoint); - - switch (thisObject.status) { - - case 'neutral': - image = document.getElementById(idNeutralImage); - break; - - case 'on': - image = document.getElementById(idOnImage); - break; - - case 'off': - image = document.getElementById(idOffImage); - break; - - case 'disabled': - image = document.getElementById(idDisabledImage); - break; - - } - browserCanvasContext.drawImage(image, imagePoint.x, imagePoint.y, thisObject.container.frame.width, thisObject.container.frame.height); - } -} \ No newline at end of file diff --git a/TextButton.js b/TextButton.js deleted file mode 100644 index 718172214..000000000 --- a/TextButton.js +++ /dev/null @@ -1,140 +0,0 @@ -function newTextButton() { - - var textButton = { - container: undefined, - draw: draw, - status: 'off', - type: undefined, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - initialize: initialize - }; - - var container = newContainer(); - container.initialize(); - container.isDraggeable = false; - container.isClickeable = true; - textButton.container = container; - - return textButton; - - function initialize() { - - /* Lets set the basic dimensions of this textButton. */ - - var position = { - x: 0, - y: 0 - }; - - this.container.frame.position = position; - this.container.frame.width = 180; - this.container.frame.height = 14; - - /* Now we start listening to the onClick event from the mouse, so that we can allow users operate this textButton. */ - - - } - - function getContainer(point) { - - var container; - - /* First we check if this point is inside this space. */ - - if (this.container.frame.isThisPointHere(point, true) === true) { - - return this.container; - - } else { - - /* This point does not belong to this space. */ - - return undefined; - } - - } - - - - function draw() { - - drawIcon(); - - } - - - function drawIcon() { - - centerPoint = { - x: 7, - y: 7 - }; - - /* Now the transformations. */ - - centerPoint = textButton.container.frame.frameThisPoint(centerPoint); - - /* Lets start the drawing. */ - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(centerPoint.x, centerPoint.y, 3, 0, 2 * Math.PI); - browserCanvasContext.closePath(); - - let offFillStyle = 'rgba(232, 28, 28, 1)'; - let onFillStyle = 'rgba(45, 232, 28, 1)'; - let invisibleFillStyle = 'rgba(247, 244, 27, 1)'; - - switch (textButton.status) { - - case 'on': - browserCanvasContext.fillStyle = onFillStyle; - break; - - case 'invisible': - browserCanvasContext.fillStyle = invisibleFillStyle; - break; - - case 'off': - browserCanvasContext.fillStyle = offFillStyle; - break; - - } - - - browserCanvasContext.fill(); - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - browserCanvasContext.closePath(); - - - /* print the text */ - - let labelPoint; - let fontSize = 10; - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY; - - let label = textButton.type; - - let xOffset = 0; - let yOffset = 0; - - labelPoint = { - x: 20, - y: textButton.container.frame.height - 5 - }; - - labelPoint = textButton.container.frame.frameThisPoint(labelPoint); - - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - - - } - - - -} \ No newline at end of file From 72c1017b205115624c5afbb92b8a495e1f267eb4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 13 Feb 2019 20:51:44 +0100 Subject: [PATCH 2/2] Remove not used icons from Profile Ball --- FloatingSpace/ProfileBall.js | 459 ++++++++++++++++------------------- 1 file changed, 208 insertions(+), 251 deletions(-) diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index c8c4493ee..a8fd8dd6f 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -1,28 +1,27 @@ - -function newProfileBall() { - let thisObject = { +function newProfileBall () { + let thisObject = { - physicsLoop: physicsLoop, - onMouseOver: onMouseOver, - onMouseClick: onMouseClick, - onMouseNotOver: onMouseNotOver, - drawBackground: drawBackground, - drawForeground: drawForeground, - initialize: initialize + physicsLoop: physicsLoop, + onMouseOver: onMouseOver, + onMouseClick: onMouseClick, + onMouseNotOver: onMouseNotOver, + drawBackground: drawBackground, + drawForeground: drawForeground, + initialize: initialize - }; + } - let ballStringMenu = [ - { - visible: false, - imagePathOn: "Images/menu.icon.on.1.gif", - imagePathOff: "Images/menu.icon.off.1.gif", - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 60 - }, + let ballStringMenu = [ + { + visible: false, + imagePathOn: 'Images/menu.icon.on.1.gif', + imagePathOff: 'Images/menu.icon.off.1.gif', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }/*, { visible: false, imagePathOn: "Images/menu.icon.on.2.gif", @@ -49,308 +48,266 @@ function newProfileBall() { targetRadius: 0, currentRadius: 0, angle: -60 - } - ]; + } */ + ] - return thisObject; + return thisObject - function initialize(callBackFunction) { + function initialize (callBackFunction) { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] - for (let i = 0; i < ballStringMenu.length; i++) { + menuItem.iconOn = new Image() - let menuItem = ballStringMenu[i]; + menuItem.iconOn.onload = onImageLoad - menuItem.iconOn = new Image(); + function onImageLoad () { + menuItem.iconOff = new Image() - menuItem.iconOn.onload = onImageLoad; - - function onImageLoad() { - - menuItem.iconOff = new Image(); - - menuItem.iconOff.onload = onImageLoad; - - function onImageLoad() { - menuItem.canDrawIcon = true; - } - - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff; - - } - - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn; - - menuItem.icon = menuItem.iconOn; // The default value is ON. + menuItem.iconOff.onload = onImageLoad + function onImageLoad () { + menuItem.canDrawIcon = true } - callBackFunction(); + menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff + } + menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn + + menuItem.icon = menuItem.iconOn // The default value is ON. } - function physicsLoop() { + callBackFunction() + } + function physicsLoop () { // The menuItems also have a target. - for (let i = 0; i < ballStringMenu.length; i++) { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] - let menuItem = ballStringMenu[i]; - - if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) { - - if (menuItem.currentRadius < menuItem.targetRadius) { - menuItem.currentRadius = menuItem.currentRadius + 0.5; - } else { - menuItem.currentRadius = menuItem.currentRadius - 0.5; - } - } + if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) { + if (menuItem.currentRadius < menuItem.targetRadius) { + menuItem.currentRadius = menuItem.currentRadius + 0.5 + } else { + menuItem.currentRadius = menuItem.currentRadius - 0.5 } + } } + } - function onMouseOver() { + function onMouseOver () { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] - for (let i = 0; i < ballStringMenu.length; i++) { - - let menuItem = ballStringMenu[i]; - - menuItem.targetRadius = menuItem.rawRadius * 1.5; - } - } - - function onMouseNotOver() { - - for (let i = 0; i < ballStringMenu.length; i++) { - - let menuItem = ballStringMenu[i]; - - menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5; - } + menuItem.targetRadius = menuItem.rawRadius * 1.5 } + } - function onMouseClick(pPoint, pFloatingObject) { + function onMouseNotOver () { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5 + } + } + + function onMouseClick (pPoint, pFloatingObject) { /* What we need to do here is to check which menu item was clicked, if any. */ - let menuItemIndex; + let menuItemIndex - for (let i = 0; i < ballStringMenu.length; i++) { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] - let menuItem = ballStringMenu[i]; - - if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - - let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) - }; - - browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2); - - let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2)); - - if (distance < menuItem.currentRadius) { - menuItemIndex = i; - } - } + if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { + let position = { + x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) } - if (menuItemIndex !== undefined) { + browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) - switch (menuItemIndex) { - - case 0: { // This menu item is to turn ON / OFF the plotting of this bot. - - if (pFloatingObject.payload.profile.plot === true) { - - pFloatingObject.payload.profile.plot = false; - - let menuItem = ballStringMenu[0]; - menuItem.icon = menuItem.iconOff; - - } else { - - pFloatingObject.payload.profile.plot = true; - - let menuItem = ballStringMenu[0]; - menuItem.icon = menuItem.iconOn; - - } - - break; - } - - case 1: { // This menu item is to turn ON the Debug Log pannel for the bot. - - break; - } - } + let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2)) + if (distance < menuItem.currentRadius) { + menuItemIndex = i } + } } - function drawBackground(pFloatingObject) { + if (menuItemIndex !== undefined) { + switch (menuItemIndex) { - let point = { - x: pFloatingObject.payload.profile.position.x, - y: pFloatingObject.payload.profile.position.y - }; + case 0: { + // This menu item is to turn ON / OFF the plotting of this bot. - point = viewPort.fitIntoVisibleArea(point); + if (pFloatingObject.payload.profile.plot === true) { + pFloatingObject.payload.profile.plot = false - if (pFloatingObject.currentRadius > 1) { + let menuItem = ballStringMenu[0] + menuItem.icon = menuItem.iconOff + } else { + pFloatingObject.payload.profile.plot = true + let menuItem = ballStringMenu[0] + menuItem.icon = menuItem.iconOn + } + + break + } + + case 1: { + // This menu item is to turn ON the Debug Log pannel for the bot. + + break + } + } + } + } + + function drawBackground (pFloatingObject) { + let point = { + x: pFloatingObject.payload.profile.position.x, + y: pFloatingObject.payload.profile.position.y + } + + point = viewPort.fitIntoVisibleArea(point) + + if (pFloatingObject.currentRadius > 1) { /* Target Line */ - browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y); - browserCanvasContext.lineTo(point.x, point.y); - browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'; - browserCanvasContext.setLineDash([4, 2]); - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - browserCanvasContext.setLineDash([0, 0]); - - } - - if (pFloatingObject.currentRadius > 0.5) { - - /* Target Spot */ - - var radius = 1; - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); - browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)'; - browserCanvasContext.fill(); - - } + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) + browserCanvasContext.lineTo(point.x, point.y) + browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' + browserCanvasContext.setLineDash([4, 2]) + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + browserCanvasContext.setLineDash([0, 0]) } - function drawForeground(pFloatingObject) { + if (pFloatingObject.currentRadius > 0.5) { + /* Target Spot */ - if (pFloatingObject.currentRadius > 5) { + var radius = 1 + browserCanvasContext.beginPath() + browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)' + browserCanvasContext.fill() + } + } + + function drawForeground (pFloatingObject) { + if (pFloatingObject.currentRadius > 5) { /* Contourn */ - browserCanvasContext.beginPath(); - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); - browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - } - - if (pFloatingObject.currentRadius > 0.5) { + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + } + if (pFloatingObject.currentRadius > 0.5) { /* Main FloatingObject */ - var alphaA; + var alphaA - if (pFloatingObject.currentRadius < 3) { - alphaA = 1; - } else { - alphaA = 0.75; - } + if (pFloatingObject.currentRadius < 3) { + alphaA = 1 + } else { + alphaA = 0.75 + } - alphaA = 0.75; + alphaA = 0.75 - browserCanvasContext.beginPath(); - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.closePath() - browserCanvasContext.fillStyle = pFloatingObject.fillStyle; + browserCanvasContext.fillStyle = pFloatingObject.fillStyle - browserCanvasContext.fill(); - - } + browserCanvasContext.fill() + } /* Image */ - if (pFloatingObject.payload.profile.imageId !== undefined) { - - let image = pFloatingObject.payload.profile.botAvatar; - - if (image !== null && image !== undefined) { - - browserCanvasContext.save(); - browserCanvasContext.beginPath(); - browserCanvasContext.arc(pFloatingObject.currentPosition.x , pFloatingObject.currentPosition.y , pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); - browserCanvasContext.clip(); - browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize); - browserCanvasContext.beginPath(); - browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true); - browserCanvasContext.clip(); - browserCanvasContext.closePath(); - browserCanvasContext.restore(); - } - } + if (pFloatingObject.payload.profile.imageId !== undefined) { + let image = pFloatingObject.payload.profile.botAvatar + if (image !== null && image !== undefined) { + browserCanvasContext.save() + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.clip() + browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.clip() + browserCanvasContext.closePath() + browserCanvasContext.restore() + } + } /* StringBall Menu */ - for (let i = 0; i < ballStringMenu.length; i++) { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] - let menuItem = ballStringMenu[i]; - - if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - - let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) - }; - - browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2); - } + if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { + let position = { + x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) } + browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) + } + } + /* Label Text */ - if (pFloatingObject.currentRadius > 6) { + if (pFloatingObject.currentRadius > 6) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle; + let labelPoint + let fontSize = pFloatingObject.currentFontSize - let labelPoint; - let fontSize = pFloatingObject.currentFontSize; + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY; + let label - let label; + label = pFloatingObject.payload.profile.upLabel - label = pFloatingObject.payload.profile.upLabel; - - if (label !== undefined) { - - labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 - }; - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY; - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - - } - - label = pFloatingObject.payload.profile.downLabel; - - if (label !== undefined) { - - labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 - }; - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY; - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - - } + if (label !== undefined) { + labelPoint = { + x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + + label = pFloatingObject.payload.profile.downLabel + + if (label !== undefined) { + labelPoint = { + x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } } + } } - -