Ecosystem.json read from the server and injected into Plottters.js and Index.html

BotCard.js

@@ -0,0 +1,189 @@
+function newBotCard() {
+
+    var thisObject = {
+        container: undefined,
+        draw: draw,
+        status: 'off',
+        devTeam: undefined,
+        bot: undefined,
+        product: undefined,
+        code: undefined,
+        layer: 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.isZoomeable = false;
+    container.isClickeable = true;
+    thisObject.container = container;
+
+    return thisObject;
+
+    function initialize() {
+
+        /* Lets set the basic dimensions of this thisObject. */
+
+        var position = {
+            x: 0,
+            y: 0
+        };
+
+        this.container.frame.position = position;
+        this.container.frame.width = 280;
+        this.container.frame.height = 28;
+
+        /* Now we start listening to the onClick event from the mouse, so that we can allow users operate this thisObject. */
+
+
+    }
+
+    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 = thisObject.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)';
+
+        switch (thisObject.status) {
+
+            case 'on':
+                browserCanvasContext.fillStyle = onFillStyle;
+                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 Courier New';
+
+        let label;
+
+        let xOffset;
+        let yOffset;
+
+        /* devTeam */
+
+        label = thisObject.devTeam;
+
+        xOffset = 0;
+        yOffset = 0;
+
+        labelPoint = {
+            x: 20,
+            y: thisObject.container.frame.height - 5
+        };
+
+        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
+
+        browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
+
+        /* bot */
+
+        label = thisObject.bot;
+
+        labelPoint = {
+            x: 40,
+            y: thisObject.container.frame.height - 5
+        };
+
+        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
+
+        browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
+
+        /* product */
+
+        label = thisObject.product;
+
+        labelPoint = {
+            x: 60,
+            y: thisObject.container.frame.height - 5
+        };
+
+        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
+
+        browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
+
+        /* layer */
+
+        label = thisObject.layer;
+
+        labelPoint = {
+            x: 80,
+            y: thisObject.container.frame.height - 5
+        };
+
+        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
+
+        browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
+
+
+    }
+
+
+
+}