Some pics at the Product Panel

Animation.js

@@ -66,19 +66,16 @@ function newAnimation() {
 
         });
 
-        /* We also draw this array of circles, that is used for debugging purposes. */
-
-        drawSmallBall();
-
-        /* We request the next frame to be drawn, and stablishing a loop */
-
-        animationLoopHandle = window.requestAnimationFrame(animationLoop);
 
         /* We animate the zoom of the viewPort */
 
         viewPort.animate();
         viewPort.draw();
 
+        /* We request the next frame to be drawn, and stablishing a loop */
+
+        animationLoopHandle = window.requestAnimationFrame(animationLoop);
+
     }
 }
 

ProductCard.js

@@ -284,9 +284,46 @@
 
     function drawProductCard() {
 
+        /*
+
+        Put image on the card.
+
+        */
+
+        let teamImagePoint = {
+            x: 10,
+            y: 5
+        };
+
+        teamImagePoint = thisObject.container.frame.frameThisPoint(teamImagePoint);
+
+        let teamImage = document.getElementById("AAMasters");
+        browserCanvasContext.drawImage(teamImage, teamImagePoint.x, teamImagePoint.y, 45, 45);
+
         centerPoint = {
-            x: 7,
-            y: 7
+            x: thisObject.container.frame.width - 10,
+            y: thisObject.container.frame.height / 2
+        };
+
+        if (thisObject.bot.codeName === "AAOlivia") {
+
+            let botImagePoint = {
+                x: thisObject.container.frame.width - 10 - 50,
+                y: 5
+            };
+
+            botImagePoint = thisObject.container.frame.frameThisPoint(botImagePoint);
+
+            let botImage = document.getElementById("AAOlivia");
+            browserCanvasContext.drawImage(botImage, botImagePoint.x, botImagePoint.y, 45, 45);
+
+        }
+
+        /* Now the small circle */
+
+        centerPoint = {
+            x: thisObject.container.frame.width - 10,
+            y: thisObject.container.frame.height / 2
         };
 
         /* Now the transformations. */
@@ -336,18 +373,12 @@
 
         let label;
 
-        let xOffset;
-        let yOffset;
-
         /* devTeam */
 
         label = "Dev Team: " + thisObject.devTeam.displayName;
 
-        xOffset = 0;
-        yOffset = 0;
-
         labelPoint = {
-            x: 20,
+            x: 65,
             y: thisObject.container.frame.height - 45
         };
 
@@ -361,7 +392,7 @@
         label = "Bot: " + thisObject.bot.displayName;
 
         labelPoint = {
-            x: 20,
+            x: 65,
             y: thisObject.container.frame.height - 30
         };
 
@@ -375,7 +406,7 @@
         label = "Product: " + thisObject.product.displayName;
 
         labelPoint = {
-            x: 20,
+            x: 65,
             y: thisObject.container.frame.height - 15
         };
 

index.html

@@ -74,8 +74,9 @@
         }
     </style>
 </head>
-<body id="body" style="margin: 0px; padding: 0px; border: 0px; overflow:hidden;"  onload="dashboardStart();">
-    <canvas id="canvas" width="1400" height="600" border="0">
-></canvas>
+<body id="body" style="margin: 0px; padding: 0px; border: 0px; overflow:hidden;" onload="dashboardStart();">
+    <canvas id="canvas" width="1400" height="600" border="0"></canvas>
+    <img id="AAMasters" width="0" height="0" src="https://avatars2.githubusercontent.com/u/36243600?s=400&u=4df23798487a2853d211e764efa55233b1147ddb&v=4">
+    <img id="AAOlivia" width="0" height="0" src="https://raw.githubusercontent.com/AAMasters/AAOlivia-Indicator-Bot/master/ProfilePicture.png">
 </body>
 </html>