From 53de52a18ecab7ec94cddc3713abe107c90156cb Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 4 May 2018 19:11:38 +0200 Subject: [PATCH] Bubbles Appearing Well, not dissapearing. --- .vs/AAWeb/v15/.suo | Bin 71680 -> 72704 bytes Animation.js | 14 +- FloatingSpace/Bubble.js | 241 +++++++++++++++++++++++++-------- FloatingSpace/BubbleSets.js | 20 ++- FloatingSpace/FloatingLayer.js | 5 + 5 files changed, 211 insertions(+), 69 deletions(-) diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo index 1da655338a51defecac97d7adfee89bc288893fd..a16cd9529b0cd043963f7690273a22b50ee86cd6 100644 GIT binary patch delta 1955 zcmd6ne@t6d6vw%@@0C7Upp{ZVWt9EUx*z2=pvVSTW~~GfwttX0w^3j!IM{G4W*|^A zR>oE)zLUU+E`gW*Ff49^7sKWsrkyOAiUOKxvMdv#iP6L#iK5QM;kl*EryDWRf4s@3 z=bZcFyz}1o^!m?m{?Om|~cjIfhAXzzhE;jwsM zbcW4tfkt7o;Ki9pb;>2-SpqhT5lZwaWKP+x|LiYed?FzqgD;_-Ou=kI8H~k>WK!`Z z&QaBLJDWb8T5B~Oz!eV?MA+-xP#kL~h`g0bB}Gsuu2#Gy1F;zg zqpNHO8|(zL-KtX`5V@SnMO1!@lk2FwpF)*2NlB{uHkK8=9(U&bS#%k=?Baak%C+Z{ z6UaCuHt&);H^UFjn;@&@2_@9xBrxe0L2NV1tpxmjr{ZjLQV98-5ZdP)c{#*Mfd{dT z*TuwP@jG?RGJ8%b9e?2-?0U^;Ar>609!cb_9iBe{ZuI_L=> zlN+eqOJVp_rlRj(N64*37$AJQN?lf*p|GL0-s7#^*#Mq1D}=?OnHjgG7TZ4@iuBL-ZCc^Ym)U~lx#}F*<=Fwo$tcn-ZZ5y*gzl@K04nM>StQzG0HAr&;;^z z6%(w7G4S^3wFZlIsSK-x9-M@U*p-cuuB7dVZIUH-Mvpvr^ z95p#Lxw)R!|9^8mCy!Iu*j=t}u1xtSt$dk6_P`|zyM5=!y`h?@=Qp`U@HyGkuEiwX_LzMO5gzTrdfi?fucLvYjqGdP zvj7*-X}4mr!3OiJ+HmEbK#UpSGB%jn;1bSR+F+73m?OeJA=6GRuQP?fxGEPPx84?v zyjGrv!&>Z})_}e4o}jx^8OSNb^Uu4PFQ*%1k5+z22oyS^_0h6O#ZXBIPSv>rTOG`? zW!fO`7UV7=u%l2kEM#N89cMJysf&e$xo){s2yFDJAEOCJA?klLMZLGMP znhxosKr+^h+cdi;^gM>g#&gj>?qWB`6F}Y{t^R3>FROl+sOA&tbXP6^jiaPDzaDzU z8#pxf42I6cvb1nHKp%BeU_V0XHoW=88dlNswi4_6wxKkl#=KuN7#?-O>F64%+eFb! zcz2;^NB@`yPoRYUHS5{>*S}X{MJN|v98AUOV-CDHCZW{5on`bs46u|H)50!MukfCX zZW43(7S5cuU|qn=OX7p9=bJo`eFA=dWfRWySx_2~m^9D?!;L2Kf1Y&7wFJCzt<%mQ z+@kSI&dvMI($5r!%;*ldFg7%R;TFo$8V1ZCN@2IIUsVSD{zZ{kScr<$K9Yrzp9`?* zN2AI|Ta~i>(L-S8&+D#P!h6WsMRCgFIs7b}iH=S_se(r$bzjc+*3oF#JA@Fg=a`iBycTPSh$g}$3TQ*2W&j&XAJ;}6U zJ*WPyC;r*vX72f~G`KRkSZrukz~T?%@X2%Uvx%P$!+i+Sap8zOW0a@Fek};WLppGr zb-=WWdSbsG#Gpe9(ukA*UBbv`TG$LIHztlG8sP>k4V@6s(wGx0) 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;