Now we have a LOGO!

Project.njsproj

@@ -82,6 +82,9 @@
     <Compile Include="Spaces\TopSpace.js">
       <SubType>Code</SubType>
     </Compile>
+    <Compile Include="TopSpace\CompanyLogo.js">
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="TopSpace\CurrentBot.js">
       <SubType>Code</SubType>
     </Compile>

Scripts/AppLoader.js

@@ -21,6 +21,7 @@
 
             /* PlotterPanels */
 
+            "TopSpace/CompanyLogo.js",
             "TopSpace/CurrentStartMode.js",
             "TopSpace/CurrentProcess.js",
             "TopSpace/CurrentBot.js",

Spaces/TopSpace.js

@@ -23,6 +23,7 @@ function newTopSpace() {
 
     container.isDraggeable = false;
 
+    let companyLogo;
     let endUser;
     let devTeam;
     let currentBot;
@@ -33,6 +34,9 @@ function newTopSpace() {
 
     function initialize() {
 
+        companyLogo = newCompanyLogo();
+        companyLogo.initialize();
+
         endUser = newEndUser();
         endUser.initialize();
 
@@ -54,6 +58,9 @@ function newTopSpace() {
 
         let container;
 
+        container = companyLogo.getContainer(point);
+        if (container !== undefined) { return container; }
+
         container = endUser.getContainer(point);
         if (container !== undefined) { return container; }
 
@@ -80,6 +87,7 @@ function newTopSpace() {
         thisObject.container.frame.draw(false, false);
 
         drawBackground();
+        companyLogo.draw();
         endUser.draw();
         devTeam.draw();
         currentBot.draw();

TopSpace/CompanyLogo.js

@@ -0,0 +1,79 @@
+
+function newCompanyLogo() {
+
+    var thisObject = {
+        container: undefined,
+        draw: draw,
+        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+        initialize: initialize
+    };
+
+    var container = newContainer();
+    container.initialize();
+    thisObject.container = container;
+
+    thisObject.container.frame.width = 150;
+    thisObject.container.frame.height = TOP_SPACE_HEIGHT;
+
+    container.frame.position.x = 0;
+    container.frame.position.y = 0;
+
+    container.isDraggeable = false;
+
+    let logo; 
+    let canDrawLogo = false;
+
+    return thisObject;
+
+    function initialize() {
+
+        logo = new Image();
+
+        logo.onload = onImageLoad;
+
+        function onImageLoad() {
+            canDrawLogo = true;
+            }
+
+        logo.src = "Images/aa-logo-dark-8.png";
+        document.body.append(logo);
+    }
+
+    function getContainer(point) {
+
+        let container;
+
+        /* First we check if this point is inside this object UI. */
+
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+
+            return this.container;
+
+        } else {
+
+            /* This point does not belong to this space. */
+
+            return undefined;
+        }
+
+    }
+
+    function draw() {
+
+        thisObject.container.frame.draw(false, false);
+
+        if (canDrawLogo === false) { return;}
+
+        let imageHeight = 24;
+        let imageWidth = 120;
+
+        let imagePoint = {
+            x: 10,
+            y: thisObject.container.frame.height / 2 - imageHeight / 2
+        };
+
+        imagePoint = thisObject.container.frame.frameThisPoint(imagePoint);
+
+        browserCanvasContext.drawImage(logo, imagePoint.x, imagePoint.y, imageWidth, imageHeight);
+    }
+}

index.html

@@ -13,9 +13,8 @@
         }
     </style>
 </head>
-    <body id="body" style="margin: 0px; padding: 0px; border: 0px; overflow:hidden;" onload="loadAdvancedAlgosPlatform();">
-        <img id="AAMasters" width="0" height="0" src="https://avatars2.githubusercontent.com/u/36243600?s=400&u=4df23798487a2853d211e764efa55233b1147ddb&v=4">
-
-        <!--Images-->
-    </body>
+<body id="body" style="margin: 0px; padding: 0px; border: 0px; overflow:hidden;" onload="loadAdvancedAlgosPlatform();">
+    <img id="AAMasters" width="0" height="0" src="https://avatars2.githubusercontent.com/u/36243600?s=400&u=4df23798487a2853d211e764efa55233b1147ddb&v=4">
+    <!--Images-->
+</body>
 </html>

server.js

@@ -383,6 +383,13 @@ function onBrowserRequest(request, response) {
             }
             break; 
 
+        case "Images": // This means the Scripts folder.
+            {
+
+                respondWithImage('./Images/' + requestParameters[2], response);
+
+            }
+            break; 
 
         case "TopSpace": // This means the TopSpace folder.
             {
@@ -886,7 +893,7 @@ function respondWithFile(fileName, response) {
                 response.setHeader("Expires", "0"); // Proxies.
                 response.setHeader("Access-Control-Allow-Origin", "*"); // Allows to access data from other domains.
 
-                response.writeHead(200, { 'Content-Type': 'text/html' });
+                //response.writeHead(200, { 'Content-Type': 'text/html' });
                 response.write(htmlResponse);
                 response.end("\n");
                 //console.log("File Sent: " + fileName);
@@ -894,7 +901,6 @@ function respondWithFile(fileName, response) {
             }
             catch (err) {
                 returnEmptyArray();
-                console.log("File Not Found: " + fileName);
                 console.log("[ERROR] server -> respondWithFile -> onFileRead -> File Not Found: " + fileName + " or Error = " + err);
             }
 
@@ -905,6 +911,42 @@ function respondWithFile(fileName, response) {
     }
 }
 
+function respondWithImage(fileName, response) {
+
+    if (CONSOLE_LOG === true) { console.log("[INFO] server -> respondWithImage -> Entering function."); }
+
+    let fs = require('fs');
+    try {
+
+        fs.readFile(fileName, onFileRead);
+
+        function onFileRead(err, file) {
+
+            if (CONSOLE_LOG === true) { console.log("[INFO] server -> respondWithImage -> onFileRead -> Entering function."); }
+
+            try {
+
+                response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
+                response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
+                response.setHeader("Expires", "0"); // Proxies.
+                response.setHeader("Access-Control-Allow-Origin", "*"); // Allows to access data from other domains.
+
+                response.writeHead(200, { 'Content-Type': 'image/png' });
+                response.end(file, 'binary');
+
+            }
+            catch (err) {
+
+                console.log("[ERROR] server -> respondWithImage -> onFileRead -> File Not Found: " + fileName + " or Error = " + err);
+            }
+
+        }
+    }
+    catch (err) {
+        console.log("[ERROR] server -> respondWithImage -> err = " + err);
+    }
+}
+
 function returnEmptyArray() {
 
     try {