diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo index 1da655338..a16cd9529 100644 Binary files a/.vs/AAWeb/v15/.suo and b/.vs/AAWeb/v15/.suo differ diff --git a/Animation.js b/Animation.js index 03b35df4a..5362a6d2f 100644 --- a/Animation.js +++ b/Animation.js @@ -107,7 +107,7 @@ function newAnimation() { function animationLoop(callBackFunction) { - try { + //try { if (INFO_LOG === true) { logger.write("[INFO] animationLoop -> Entering function."); } @@ -127,14 +127,14 @@ function newAnimation() { animationLoopHandle = window.requestAnimationFrame(animationLoop); - } catch (err) { + // } catch (err) { - if (ERROR_LOG === true) { logger.write("[ERROR] animationLoop -> err = " + err); } + // if (ERROR_LOG === true) { logger.write("[ERROR] animationLoop -> err = " + err); } - if (callBackFunction !== undefined) { // When the loop is called by the browser there will be no callBackFunction. - callBackFunction(GLOBAL.CUSTOM_FAIL_RESPONSE); - } - } + // if (callBackFunction !== undefined) { // When the loop is called by the browser there will be no callBackFunction. + // callBackFunction(GLOBAL.CUSTOM_FAIL_RESPONSE); + // } + // } } function clearBrowserCanvas() { diff --git a/FloatingSpace/Bubble.js b/FloatingSpace/Bubble.js index e5864592c..8306eaed8 100644 --- a/FloatingSpace/Bubble.js +++ b/FloatingSpace/Bubble.js @@ -51,97 +51,224 @@ function newBubble() { function drawForeground(pFloatingObject) { + const BUBBLE_CORNERS_RADIOUS = 10; + const TITLE_BAR_HEIGHT = 14; + + const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS * 4 + pFloatingObject.currentRadius; + const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS * 2 + pFloatingObject.currentRadius; + + let borderPoint1; + let borderPoint2; + let borderPoint3; + let borderPoint4; + if (pFloatingObject.currentRadius > 5) { - /* Contourn */ + /* Rounded Background */ - 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; - - if (pFloatingObject.currentRadius < 3) { - alphaA = 1; - } else { - alphaA = 0.75; + let intialDisplace = { + x: pFloatingObject.currentPosition.x - BUBBLE_WIDTH / 2, + y: pFloatingObject.currentPosition.y - BUBBLE_HEIGHT / 2 } - alphaA = 0.75; + borderPoint1 = { + x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS, + y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS + }; + borderPoint2 = { + x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIOUS, + y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS + }; + + borderPoint3 = { + x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIOUS, + y: intialDisplace.y + BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIOUS + }; + + borderPoint4 = { + x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS, + y: intialDisplace.y + + BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIOUS + }; + + titleBarPoint1 = { + x: intialDisplace.x + 0, + y: intialDisplace.y + TITLE_BAR_HEIGHT + }; + + titleBarPoint2 = { + x: intialDisplace.x + BUBBLE_WIDTH, + y: intialDisplace.y + TITLE_BAR_HEIGHT + }; + + /* We paint the panel background first */ + + browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 0.75)'; browserCanvasContext.beginPath(); - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); - browserCanvasContext.fillStyle = pFloatingObject.fillStyle; + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI); + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIOUS); + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI); + browserCanvasContext.lineTo(borderPoint3.x + BUBBLE_CORNERS_RADIOUS, borderPoint3.y); + browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, BUBBLE_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI); + browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + BUBBLE_CORNERS_RADIOUS); + browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, BUBBLE_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI); + browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIOUS, borderPoint1.y); + + browserCanvasContext.closePath(); browserCanvasContext.fill(); - } + browserCanvasContext.lineWidth = 0.1; + browserCanvasContext.strokeStyle = 'rgba(54, 54, 54, 0.75)'; + browserCanvasContext.stroke(); - /* Image */ + /* We paint the title bar now */ - if (pFloatingObject.payload.profile.imageId !== undefined) { + browserCanvasContext.fillStyle = 'rgba(255, 151, 48, 0.75)'; + browserCanvasContext.beginPath(); - let image = document.getElementById(pFloatingObject.payload.profile.imageId); + browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y); + browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIOUS, borderPoint1.y); + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI); + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIOUS); + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI); + browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y); - if (image !== null) { + browserCanvasContext.closePath(); + browserCanvasContext.fill(); - browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize); + browserCanvasContext.lineWidth = 0.1; + browserCanvasContext.strokeStyle = 'rgba(12, 64, 148, 0.75)'; + browserCanvasContext.stroke(); - } - } - - /* Label Text */ - - if (pFloatingObject.currentRadius > 6) { - - browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle; + /* print the title */ let labelPoint; let fontSize = 10; browserCanvasContext.font = fontSize + 'px Courier New'; - let label; + let label = pFloatingObject.payload.bubbles[pFloatingObject.payloadBubbleIndex].title; - label = pFloatingObject.payload.bubbles[pFloatingObject.payloadBubbleIndex].title; + let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO; + let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2; - if (label !== undefined) { + labelPoint = { + x: intialDisplace.x + BUBBLE_WIDTH / 2 - xOffset, + y: intialDisplace.y + TITLE_BAR_HEIGHT - yOffset + }; - labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * 0.60, - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * 0.60 - 5 - }; + //labelPoint = frame.frameThisPoint(labelPoint); - browserCanvasContext.font = fontSize + 'px Courier New'; - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); + browserCanvasContext.fillStyle = 'rgba(240, 240, 240, 1)'; + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); + } + + if (pFloatingObject.currentRadius > 0.5) { + + /* Image */ + + let imagePosition = { + x: borderPoint1.x, + y: borderPoint1.y + TITLE_BAR_HEIGHT + }; + + if (pFloatingObject.payload.profile.imageId !== undefined) { + + let image = document.getElementById(pFloatingObject.payload.profile.imageId); + + if (image !== null) { + + browserCanvasContext.drawImage(image, imagePosition.x - pFloatingObject.currentImageSize / 2, imagePosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize); + + } } - label = pFloatingObject.payload.bubbles[pFloatingObject.payloadBubbleIndex].body; + /* Image Contourn */ - if (label !== undefined) { + browserCanvasContext.beginPath(); + browserCanvasContext.arc(imagePosition.x, imagePosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true); + browserCanvasContext.closePath(); + browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.25)'; + browserCanvasContext.lineWidth = 1; + browserCanvasContext.stroke(); - labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * 0.60, - y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * 0.60 + 10 - }; + /* Label Text */ - browserCanvasContext.font = fontSize + 'px Courier New'; - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); + if (pFloatingObject.currentRadius > 6) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle; + + let labelPoint; + let fontSize = 10; + + let label; + + label = pFloatingObject.payload.bubbles[pFloatingObject.payloadBubbleIndex].body; + + if (label !== undefined) { + + const WORDS_PER_ROW = 4; + const TOTAL_ROWS = 5; + const ALPHA = Math.trunc(pFloatingObject.currentRadius / pFloatingObject.targetRadius * 100) / 100 / 2; + + if (ALPHA > 0.3) { + + let startingPosition = { + x: pFloatingObject.currentPosition.x, + y: pFloatingObject.currentPosition.y - TOTAL_ROWS / 2 * (fontSize * 0.60 + 10) + }; + + let rawLabelArray = label.split(" "); + let labelArray = []; + + /* Lets check when words are to long we add an empty space to the same line so as to roll all other words forward. */ + + for (let i = 0; i < rawLabelArray.length; i++) { + + let word = rawLabelArray[i]; + + labelArray.push(word); + + if (word.length > 10) { + labelArray.push(""); + } + + if (word.length > 12) { + labelArray.push(""); + } + } + + /* Now we plot each row. */ + + for (let i = 0; i < TOTAL_ROWS; i++) { + + let labelRow = ""; + + for (let j = 0; j < WORDS_PER_ROW; j++) { + + let newWord = labelArray[j + i * WORDS_PER_ROW]; + + if (newWord !== undefined && newWord !== "") { + + labelRow = labelRow + " " + newWord; + } + } + + labelPoint = { + x: startingPosition.x - labelRow.length / 2 * fontSize * 0.60, + y: startingPosition.y + (i + 1) * (fontSize * 0.60 + 10) + }; + + browserCanvasContext.font = fontSize + 'px Courier New'; + browserCanvasContext.fillStyle = 'rgba(60, 60, 60, ' + ALPHA + ')' + browserCanvasContext.fillText(labelRow, labelPoint.x, labelPoint.y); + + } + } + } } } } diff --git a/FloatingSpace/BubbleSets.js b/FloatingSpace/BubbleSets.js index 91f8d64f3..63090796c 100644 --- a/FloatingSpace/BubbleSets.js +++ b/FloatingSpace/BubbleSets.js @@ -50,7 +50,7 @@ function newBubbleSets() { callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, bubbleSet.handle); - function onBubblesChanged(pEvent, pBubbleSetIndex) { + function onBubblesChanged(pNewBubbles, pBubbleSetIndex) { let bubbleSet = bubbleSets[pBubbleSetIndex]; let found = false; @@ -84,16 +84,26 @@ function newBubbleSets() { floatingObject.initialize("Bubble", onInitialized); function onInitialized(err) { - + floatingObject.payload = bubbleSet.payload; floatingObject.payloadBubbleIndex = i; floatingObject.payload.profile.imageId = bubbleSet.imageId; floatingObject.friction = .995; - floatingObject.initializeMass(100); - floatingObject.initializeRadius(30); - floatingObject.initializeImageSize(50); + floatingObject.initializeMass(200); + + let bodyText = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].body; + let radius; + + if (bodyText.length < 100) { + radius = 100; + } else { + radius = bodyText.length; + } + + floatingObject.initializeRadius(radius); + floatingObject.initializeImageSize(15); floatingObject.fillStyle = 'rgba(255, 255, 255, 0.5)'; floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)'; diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 9bda0b44a..78df83d4f 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -94,6 +94,11 @@ function newFloatingLayer() { } case "Bubble": { + // if (floatingObject.payloadBubbleIndex >= floatingObject.payload.bubbles.length) { + + // continue; // The bubbles array changed at the plotter but the + //} + payload.position = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].position; payload.visible = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].visible; break;