From 8f20589147234da7ae02700acc59f40daa0acf2c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 22 Apr 2018 10:36:53 +0200 Subject: [PATCH] Profile Picture being Shown at Trading Data --- .vs/AAWeb/v15/.suo | Bin 40448 -> 42496 bytes Ball.js | 143 +++++++++++++++++++++------------------------ Balls.js | 1 - FloatingSpace.js | 49 +++++++++++++--- ProductCard.js | 2 +- TimelineChart.js | 13 +++++ 6 files changed, 121 insertions(+), 87 deletions(-) diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo index 909c0bde589b29c9f923a1df84918cce45cfe491..2d3bb72d07476cb86a83ec7b631854b515b355b7 100644 GIT binary patch delta 3093 zcmcguZ%h;+-NQA|Bidh*#hcEC}JBoH?in!qK2mIf^DG z(yIGf{ZMJ+e$-Yi`>iqQAN|mzHfn5IV_KtrX=Bqy8%%AZrSC0!h{R|xsgwNfy?Jlm zyqVvdnZ4k7K6r^g=iyl-B=Lzx$I!kXtv9Z*bWjf+DLaq-FIl_x1ej(4!7AOnkn*4K4q4hN46U3)*(o{AYna!T(p5talj^SuJ z3J|k0g`I<*r~!5s9z+kYGte{lnm~j}#c$|_+`YKf7XjVjSb zQF5#R4^uq`qMUY4HVAYK%dzjX!|DgIZ?cefh^eAEnZX6#2?0x)QR9M+ofa}?Ne3}& z30&kI5XdSQ=-g3W7|XhBWOOp~^`S=U3?Ml5@%$p*K=*DIBD9*`_-`k2EF4x6c*VoR zpAL&^>HM83c3uhaN*q7>mc$H1KOLyaxW$_(PTSDpRMnPplPL~C$>HT*w~?djMm!m< z_Sz0IrH+^5i)ob@?jV&N?|y6Cyfq~%ak$2T!vwmo~1VJ~0Av~rExFibJAth7aHbjCd<595xk^$@h6 zOt1;`;Aux>7?lyYYTXPMt>*Tt)4z7*6g5&876B^xIjympU#4MCmE>NRtY8c$EN`!`?0%2Q6 zM?0_s%as-$-jQ73Dh@_gBG2@G2;94HvZ4Xjc~`(c-enNn6qHW{Bl6#l(4s!BUOEvz zsoXzU2;WtiU%Pmjvl#uj%9mq+G)^FkhXxqZ=;kq@g9UrMS)DxE< zI5d7ZGKHIWscE}%cOKk#SmCQ9$&ggxQZjgXSX9NXTTHeFUr<13s&FDxjfTqBcHhp{ zT|RiU-vMpjBXhA3jEX_6)ip`$Y=M)GF)7E9<9OMsLg&U8R_*^F2Cf#@Jhe}AbZFOZ ze^XZg3+#lX>ZF)wS|fBT{C3b2dv}5t?U&bCl8$Ld@8`;b8IvjysTBPxmUj=LYE0qu zFp6-q%0_oeyDz(|M`A8a+1EFy7pRFfE*4AQ2Wln+y%bst!>|5)aKNls`ZEw}&AOuP zXN{ryGJQwzDY&{tjGNADe}A7dQ*y46Yg2N4lO>pP$6CAVerh{yT%Y&wb1DDk4~2jI zvftNSH+>qdXj97*b6Z~oiARW4(>A(4oGxKKc>QiTRWE{2-^{APxo;yxH{659!7RvX zj)P%)CVbgohBLJ$Fl@I&pj86Lpa4ZJ@!%+(#VWP!Ku9oAbq$KKI*fw7A>8r&kmz~rLUx@qy0yCJ*{h`4Sqdg)d>7! uUKK$5e4Us3@>5_%%l`x3--Vz6 delta 2804 zcmai0Z%k8H6o2>8mKI7W1sMW^QV~%Rif#xUGD;tyh!I5o=sHJ{3T3XcwqVq3kd1BG ztP1Y{TQp%>-IA$O!rPZEMwjT!wwUO$Wy}6#VV{;PnIj8k+lR@{dG8fb*>;;>?m6e4 zciz3fbIyGoyulA%;wS5Qrhyzj+iSSw1c{8FO zu?5e$thxoIRzx;p2Vy7UDMTHDo`{Zi)IEp}#BM|^e9Qb4Xi=&PaCbvVjzo42ZiJUyE}R!i+E?qSU9NOec#{pMY{aVhMt%UxAsD;$sRS1@ zFoupq1|+S`XYW9tX@H%9JLUm)8u}8y)XXoPmzU1L9dtO0ONT|lCfU+*7+lpALulz% z1FOL>E;SU)E-e7-_I7CN6F_Lb1nu%%E~bpKur!u>m`T>mTwYK763_H{2xZ+=qGgAt zHVRBnbxMg*7T0Vw$m~!mWy|cELdjlJROzQl4dzU3{d5hnIF$Lgk*p_;q+%Y7h-~ z42n9Q(YZYSeoqh@kF91$(2xs*U4xN2K4Rk|CI%PYFiOiiwy;d<_ZWmcoSYNyA}`)CZqi}LSO#o6 zWs7aQNwvbk$Z!Uvk7tQT^C2*rX8xh)oMA)7pC1X%AHS~o>ER%}8tLRk$3~5gHt|4HK;XDTa*R5d94mc17eZsX66={`Yz`(ztZ)M?@cEcg z-B>;}jAX$lb?GoMuETu^5aUe;w>KBeVxH_S4R}4B;2E-;O^WR5 z_5?!nJ6y!3Q=hpzwAq$K%`1=TD>*3BXG;JkIPCa4w640QI8w!f)7PYF2>5nG`%rOW z0!iNJTMB87LH z2&K4{yHHDCK;=$L-WPN`ovq#u_rJ7#ZEF4k0;*7^51*PT*FJy9(MrkrO_3rfqyPI|gyk0+rOG;d5!H9O^(Y%=P{%3E8Yf|aN%9y@F z{~u@wK=0AYX#v)6wEns>Oza+nqo-2igIpok!v%4dOW})&+6TI=>K|Mg Bf=&Pc diff --git a/Ball.js b/Ball.js index 84691adb8..7610368e7 100644 --- a/Ball.js +++ b/Ball.js @@ -1,12 +1,16 @@  function newBall() { - var ball = { + var thisObject = { + + input: undefined, // This object contains information needed to draw the ball, but also referenced from outside, so as to have control of the basics of the ball. + physicsEnabled: false, - initializeTargetPosition: initializeTargetPosition, initializeMass: initializeMass, initializeRadius: initializeRadius, + imageId: undefined, + currentPosition: 0, // Current x,y position of the ball at the ball's layer, where there is no displacement or zoom. This position is always changing towards the target position. currentSpeed: 0, // This is the current speed of the ball. currentRadius: 0, // This is the current radius of the ball, including its zoom applied. @@ -14,11 +18,9 @@ function newBall() { friction: 0, // This is a factor that will ultimatelly desacelerate the ball. - rawPosition: 0, // This is the position on the canvas layer, withous displacement or zoom. rawMass: 0, // This is the mass value without zoom. rawRadius: 0, // This is the radius of this ball without zoom. - targetPosition: 0, // This is the position of the ball at the canvas plane. This position has the displacement and zoom applied. targetRadius: 0, // This is the target radius of the ball with zoom applied. It should be animated until reaching this value. fillStyle: '', @@ -35,7 +37,6 @@ function newBall() { updateMass: updateMass, // Function to update the mass when the zoom level changed. updateRadius: updateRadius, // Function to update the radius when the zoom level changed. - updatePosition: updatePosition, // Function to update the target position when either the displacement changed or the zoom level changed. linkedObject: undefined, // This is a reference to the object that this ball is representing. linkedObjectType: "", // Since there might be balls for different types of objects, here we store the type of object we are linking to. @@ -43,25 +44,8 @@ function newBall() { container: undefined // This is a pointer to the object where the ball belongs to. }; - return ball; + return thisObject; - function initializeTargetPosition() { - - /* The initialization is based on the rawPosition that must be set before calling this function. */ - - var targetPosition = { - x: this.rawPosition.x, - y: this.rawPosition.y - }; - - targetPosition = this.container.frame.frameThisPoint(targetPosition); - targetPosition = this.container.displacement.displaceThisPoint(targetPosition); - - this.targetPosition = targetPosition; - - // We dont need this now> smallBalls.push ([targetPosition.x, targetPosition.y, 3, 'rgba(30, 130, 30, 0.85)']); - - } function initializeMass(suggestedValue) { @@ -70,8 +54,8 @@ function newBall() { mass = 0.1; } - this.rawMass = mass; - this.currentMass = mass; + thisObject.rawMass = mass; + thisObject.currentMass = mass; } @@ -82,9 +66,9 @@ function newBall() { radius = 2; } - this.rawRadius = radius; - this.targetRadius = radius; - this.currentRadius = radius / 3; + thisObject.rawRadius = radius; + thisObject.targetRadius = radius; + thisObject.currentRadius = radius / 3; } @@ -95,7 +79,7 @@ function newBall() { y: Math.floor((Math.random() * (200) - 100)) + arroundPoint.y }; - this.currentPosition = position; + thisObject.currentPosition = position; } function radomizeCurrentSpeed() { @@ -121,50 +105,41 @@ function newBall() { y: initialYDirection * Math.floor((Math.random() * 300) + 1) / 100 }; - this.currentSpeed = velocity; + thisObject.currentSpeed = velocity; } function updateMass() { - //this.currentMass = this.rawMass + this.rawMass * this.container.zoom.incrementM * this.container.zoom.levelM; + //thisObject.currentMass = thisObject.rawMass + thisObject.rawMass * thisObject.container.zoom.incrementM * thisObject.container.zoom.levelM; } function updateRadius() { - //this.targetRadius = this.rawRadius + this.rawRadius * this.container.zoom.incrementR * this.container.zoom.levelR; - - } - - function updatePosition() { - - var point = { - x: this.rawPosition.x, - y: this.rawPosition.y - }; - - /* Frame the point */ - - point = this.container.frame.frameThisPoint(point); - - /* Second we apply the displacement. */ - - point = this.container.displacement.displaceThisPoint(point); - - this.targetPosition.x = point.x; - this.targetPosition.y = point.y; + //thisObject.targetRadius = thisObject.rawRadius + thisObject.rawRadius * thisObject.container.zoom.incrementR * thisObject.container.zoom.levelR; } function drawBallBackgrond() { - if (this.currentRadius > 1) { + if (thisObject.input.visible === false) { return; } + if (thisObject.input.visible === true && thisObject.physicsEnabled === false) { + + /* The first time that the ball becomes visible, we need to do thisObject. */ + + radomizeCurrentPosition(thisObject.input.position); + radomizeCurrentSpeed(); + + thisObject.physicsEnabled = true; + } + + if (thisObject.currentRadius > 1) { /* Target Line */ browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(this.currentPosition.x, this.currentPosition.y); - browserCanvasContext.lineTo(this.targetPosition.x, this.targetPosition.y); + browserCanvasContext.moveTo(thisObject.currentPosition.x, thisObject.currentPosition.y); + browserCanvasContext.lineTo(thisObject.input.position.x, thisObject.input.position.y); browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'; browserCanvasContext.setLineDash([4, 2]); browserCanvasContext.lineWidth = 1; @@ -173,14 +148,14 @@ function newBall() { } - if (this.currentRadius > 0.5) { + if (thisObject.currentRadius > 0.5) { /* Target Spot */ var radius = 1; browserCanvasContext.beginPath(); - browserCanvasContext.arc(this.targetPosition.x, this.targetPosition.y, radius, 0, Math.PI * 2, true); + browserCanvasContext.arc(thisObject.input.position.x, thisObject.input.position.y, radius, 0, Math.PI * 2, true); browserCanvasContext.closePath(); browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)'; browserCanvasContext.fill(); @@ -190,12 +165,14 @@ function newBall() { function drawBallForeground() { - if (this.currentRadius > 5) { + if (thisObject.input.visible === false) { return; } + + if (thisObject.currentRadius > 5) { /* Contourn */ browserCanvasContext.beginPath(); - browserCanvasContext.arc(this.currentPosition.x, this.currentPosition.y, this.currentRadius, 0, Math.PI * 2, true); + browserCanvasContext.arc(thisObject.currentPosition.x, thisObject.currentPosition.y, thisObject.currentRadius, 0, Math.PI * 2, true); browserCanvasContext.closePath(); browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'; browserCanvasContext.lineWidth = 1; @@ -203,13 +180,13 @@ function newBall() { } - if (this.currentRadius > 0.5) { + if (thisObject.currentRadius > 0.5) { /* Main Ball */ var alphaA; - if (this.currentRadius < 3) { + if (thisObject.currentRadius < 3) { alphaA = 1; } else { alphaA = 0.75; @@ -218,55 +195,69 @@ function newBall() { alphaA = 0.75; browserCanvasContext.beginPath(); - browserCanvasContext.arc(this.currentPosition.x, this.currentPosition.y, this.currentRadius, 0, Math.PI * 2, true); + browserCanvasContext.arc(thisObject.currentPosition.x, thisObject.currentPosition.y, thisObject.currentRadius, 0, Math.PI * 2, true); browserCanvasContext.closePath(); - browserCanvasContext.fillStyle = this.fillStyle; + browserCanvasContext.fillStyle = thisObject.fillStyle; browserCanvasContext.fill(); } + /* Image */ + + if (thisObject.input.imageId !== undefined) { + + let image = document.getElementById(thisObject.input.imageId); + let imageSize = 50; + + if (image !== null) { + + browserCanvasContext.drawImage(image, thisObject.currentPosition.x - imageSize / 2, thisObject.currentPosition.y - imageSize / 2, imageSize, imageSize); + + } + } + /* Label First Text */ - if (this.currentRadius > 6) { + if (thisObject.currentRadius > 6) { - browserCanvasContext.strokeStyle = this.labelStrokeStyle; + browserCanvasContext.strokeStyle = thisObject.labelStrokeStyle; var xOffset = 0; - if (this.labelFirstText >= 10) { - xOffset = this.currentRadius / 10; + if (thisObject.labelFirstText >= 10) { + xOffset = thisObject.currentRadius / 10; } - browserCanvasContext.font = (this.currentRadius / 4).toFixed(0) + 'px verdana'; + browserCanvasContext.font = (thisObject.currentRadius / 4).toFixed(0) + 'px verdana'; try { - browserCanvasContext.fillText(this.labelFirstText.toFixed(0), this.currentPosition.x - 2 - xOffset, this.currentPosition.y + 2); + browserCanvasContext.fillText(thisObject.labelFirstText.toFixed(0), thisObject.currentPosition.x - 2 - xOffset, thisObject.currentPosition.y + 2); } catch (err) { - browserCanvasContext.fillText(this.labelFirstText, this.currentPosition.x - 2 - xOffset, this.currentPosition.y + 2); + browserCanvasContext.fillText(thisObject.labelFirstText, thisObject.currentPosition.x - 2 - xOffset, thisObject.currentPosition.y + 2); } } /* Label Second Text */ - if (this.currentRadius > 10) { + if (thisObject.currentRadius > 10) { - browserCanvasContext.strokeStyle = this.labelStrokeStyle; + browserCanvasContext.strokeStyle = thisObject.labelStrokeStyle; var xOffset = 0; - xOffset = this.currentRadius / 2; + xOffset = thisObject.currentRadius / 2; - browserCanvasContext.font = (this.currentRadius / 6).toFixed(0) + 'px verdana'; + browserCanvasContext.font = (thisObject.currentRadius / 6).toFixed(0) + 'px verdana'; try { - browserCanvasContext.fillText(this.labelSecondText.toFixed(8), this.currentPosition.x - xOffset, this.currentPosition.y + xOffset); + browserCanvasContext.fillText(thisObject.labelSecondText.toFixed(8), thisObject.currentPosition.x - xOffset, thisObject.currentPosition.y + xOffset); } catch (err) { - browserCanvasContext.fillText(this.labelSecondText, this.currentPosition.x - xOffset, this.currentPosition.y + xOffset); + browserCanvasContext.fillText(thisObject.labelSecondText, thisObject.currentPosition.x - xOffset, thisObject.currentPosition.y + xOffset); } } } diff --git a/Balls.js b/Balls.js index aed5f21b1..9f0c2c9eb 100644 --- a/Balls.js +++ b/Balls.js @@ -7,7 +7,6 @@ function updateBallsTargets() { balls[i].updateMass(); balls[i].updateRadius(); - balls[i].updatePosition(); } } \ No newline at end of file diff --git a/FloatingSpace.js b/FloatingSpace.js index 359ef6c0b..bb9cd245d 100644 --- a/FloatingSpace.js +++ b/FloatingSpace.js @@ -3,18 +3,18 @@ The Floating Space is the place where floating elements like balls, live and are This space has its own physics which helps with the animation of these objects and also preventing them to overlap. */ -let balls; // This is the array of balls being displayed - function newFloatingSpace() { let thisObject = { + createNewBall: createNewBall, physicsLoop: physicsLoop, isInside: isInside, isInsideBall: isInsideBall, - balls: [], // <-- TODO: Check if this is really needed here. initialize: initialize }; + let balls; // This is the array of balls being displayed + return thisObject; function initialize() { @@ -31,6 +31,8 @@ function newFloatingSpace() { let ball = balls[i]; + if (ball.physicsEnabled === false) { continue;} + /* Change position based on speed */ ball.currentPosition.x = ball.currentPosition.x + ball.currentSpeed.x; @@ -43,13 +45,13 @@ function newFloatingSpace() { // Gives a minimun speed towards their taget. - if (ball.currentPosition.x < ball.targetPosition.x) { + if (ball.currentPosition.x < ball.input.position.x) { ball.currentSpeed.x = ball.currentSpeed.x + .005; } else { ball.currentSpeed.x = ball.currentSpeed.x - .005; } - if (ball.currentPosition.y < ball.targetPosition.y) { + if (ball.currentPosition.y < ball.input.position.y) { ball.currentSpeed.y = ball.currentSpeed.y + .005; } else { ball.currentSpeed.y = ball.currentSpeed.y - .005; @@ -69,6 +71,8 @@ function newFloatingSpace() { if (colliding(balls[i], balls[k])) { + if (balls[k].physicsEnabled === false) { continue; } + resolveCollision(balls[k], balls[i]); } @@ -91,11 +95,38 @@ function newFloatingSpace() { for (let i = 0; i < balls.length; i++) { let ball = balls[balls.length - i - 1]; - //let ball = balls[i]; ball.drawForeground(); } } + function createNewBall(pInput, pContainer) { + + /* This function is used to create new balls, representing labels of each point on the chart. */ + + var ball = newBall(); + + ball.input = pInput; + + ball.container = pContainer; + + ball.friction = .995; + + ball.initializeMass(15); + ball.initializeRadius(3); + + ball.fillStyle = 'rgba(255, 155, 155, 0.5)'; + ball.labelStrokeStyle = 'rgba(255, 0, 255, 1)'; + + ball.labelFirstText = pInput.name; + ball.labelSecondText = "Soy una bola :-)"; + + balls.push(ball); + + ball.index = balls.length; + + return ball; + } + /******************************************/ /* */ /* Physics Engine Follows */ @@ -109,7 +140,7 @@ function newFloatingSpace() { const coulomb = .00001; const minForce = 0.01; - var d = Math.sqrt(Math.pow(ball.targetPosition.x - ball.currentPosition.x, 2) + Math.pow(ball.targetPosition.y - ball.currentPosition.y, 2)); // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(ball.input.position.x - ball.currentPosition.x, 2) + Math.pow(ball.input.position.y - ball.currentPosition.y, 2)); // ... we calculate the distance ... var force = coulomb * d * d / ball.currentMass; // In this case the mass of the ball affects the gravity force that it receives, that gives priority to target position to bigger balls. @@ -123,8 +154,8 @@ function newFloatingSpace() { }; var pos2 = { - x: ball.targetPosition.x, - y: ball.targetPosition.y + x: ball.input.position.x, + y: ball.input.position.y }; var posDiff = { // Next we need the vector resulting from the 2 positions. diff --git a/ProductCard.js b/ProductCard.js index 328e3a63a..f7f789233 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -70,7 +70,7 @@ container.isClickeable = true; thisObject.container = container; - /* Get missing Plotter information. */ + /* Add information that will later be needed.*/ let team = ecosystem.getTeam(thisObject.product.plotter.devTeam); let plotter = ecosystem.getPlotter(team, thisObject.product.plotter.codeName); diff --git a/TimelineChart.js b/TimelineChart.js index 265b0e8c8..34ad10e3f 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -248,6 +248,19 @@ function newTimelineChart() { productPlotter.panels.push(plotterPanel); } + /* Create The Profie Picture Ball */ + + if (productPlotter.plotter.profile !== undefined) { + + let imageId = pProductCard.bot.devTeam + "." + pProductCard.bot.profilePicture; + + productPlotter.plotter.profile.text = pProductCard.bot.displayName; + productPlotter.plotter.profile.imageId = imageId; + + canvas.floatingSpace.createNewBall(productPlotter.plotter.profile, thisObject.container) + + } + /* Add the new Active Protter to the Array */ productPlotters.push(productPlotter);