Top Space introduced with several child objects

CloudVM/CloudVM.js

@@ -29,9 +29,7 @@ function newCloudVM() {
             window.CURRENT_ENVIRONMENT = "Develop";
             window.CURRENT_EXECUTION_AT = "Browser";
             window.STORAGE_PERMISSIONS = ecosystem.getStoragePermissions();
-            window.EXCHANGE_KEYS = ecosystem.getExchangeKeys();
-            window.USER_LOGGED_IN = window.localStorage.getItem("userName");
-            window.DEV_TEAM = window.localStorage.getItem("devTeam");
+            window.EXCHANGE_KEYS = ecosystem.getExchangeKeys();            
 
             root.initialize(pUI_COMMANDS, onInitialized);
 

Dashboard.js

@@ -132,7 +132,7 @@ const CHART_ASPECT_RATIO = 1 / 10;
 let INITIAL_ZOOM_LEVEL = -26;       // This is the zoom level at the view port in which the APP starts.
 let INITIAL_TIME_PERIOD = recalculatePeriod(INITIAL_ZOOM_LEVEL);  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
 
-const TOP_SPACE_HEIGHT = 100;
+const TOP_SPACE_HEIGHT = 50;
 var viewPort = newViewPort();
 
 

Project.njsproj

@@ -82,6 +82,21 @@
     <Compile Include="Spaces\TopSpace.js">
       <SubType>Code</SubType>
     </Compile>
+    <Compile Include="TopSpace\CurrentBot.js">
+      <SubType>Code</SubType>
+    </Compile>
+    <Compile Include="TopSpace\CurrentProcess.js">
+      <SubType>Code</SubType>
+    </Compile>
+    <Compile Include="TopSpace\CurrentStartMode.js">
+      <SubType>Code</SubType>
+    </Compile>
+    <Compile Include="TopSpace\DevTeam.js">
+      <SubType>Code</SubType>
+    </Compile>
+    <Compile Include="TopSpace\EndUser.js">
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="WebDebugLog.js">
       <SubType>Code</SubType>
     </Compile>
@@ -173,6 +188,7 @@
     <Folder Include="Files\" />
     <Folder Include="FloatingSpace\" />
     <Folder Include="AABrowserAPI\" />
+    <Folder Include="TopSpace\" />
     <Folder Include="Scripts\" />
     <Folder Include="Server\" />
     <Folder Include="Spaces\" />

Scripts/AppLoader.js

@@ -21,6 +21,12 @@
 
             /* PlotterPanels */
 
+            "TopSpace/CurrentStartMode.js",
+            "TopSpace/CurrentProcess.js",
+            "TopSpace/CurrentBot.js",
+            "TopSpace/DevTeam.js",
+            "TopSpace/EndUser.js",
+
             "Panels/TimeControlPanel.js",
             "Panels/ProductsPanel.js",
 

Spaces/TopSpace.js

@@ -23,11 +23,31 @@ function newTopSpace() {
 
     container.isDraggeable = false;
 
+    let endUser;
+    let devTeam;
+    let currentBot;
+    let currentProcess;
+    let currentStartMode;
+
     return thisObject;
 
     function initialize() {
 
-       
+        endUser = newEndUser();
+        endUser.initialize();
+
+        devTeam = newDevTeam();
+        devTeam.initialize();
+
+        currentBot = newCurrentBot();
+        currentBot.initialize();
+
+        currentProcess = newCurrentProcess();
+        currentProcess.initialize();
+
+        currentStartMode = newCurrentStartMode();
+        currentStartMode.initialize();
+
     }
 
     function getContainer(point) {
@@ -57,6 +77,12 @@ function newTopSpace() {
         thisObject.container.frame.draw(false, false);
 
         drawBackground();
+        endUser.draw();
+        devTeam.draw();
+        currentBot.draw();
+        currentProcess.draw();
+        currentStartMode.draw();
+
     }
 
     function drawBackground() {

TopSpace/CurrentBot.js

@@ -0,0 +1,70 @@
+
+function newCurrentBot() {
+
+    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 = 200;
+    thisObject.container.frame.height = TOP_SPACE_HEIGHT;
+
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 3;
+    container.frame.position.y = 0;
+
+    container.isDraggeable = false;
+
+    return thisObject;
+
+    function initialize() {
+
+        window.CURRENT_BOT = window.localStorage.getItem("currentBot");
+    }
+
+    function getContainer(point) {
+
+        let container;
+
+        for (let i = 0; i < thisObject.panels.length; i++) {
+
+            container = thisObject.panels[i].getContainer(point);
+
+            if (container !== undefined) {
+
+                /* We found an inner container which has the point. We return it. */
+
+                return container;
+            }
+        }
+
+        /* The point does not belong to any inner container, so we return the current container. */
+
+        return thisObject.container;
+
+    }
+
+    function draw() {
+
+        thisObject.container.frame.draw(false, false);
+
+        let fontSize = 12;
+        let label = window.CURRENT_BOT;
+
+        let point = {
+            x: thisObject.container.frame.width * 1 / 3,
+            y: (thisObject.container.frame.height / 2) + 4
+        };
+
+        point = thisObject.container.frame.frameThisPoint(point);
+
+        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+        browserCanvasContext.fillText(label, point.x, point.y);
+    }
+}

TopSpace/CurrentProcess.js

@@ -0,0 +1,70 @@
+
+function newCurrentProcess() {
+
+    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 = 200;
+    thisObject.container.frame.height = TOP_SPACE_HEIGHT;
+
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 2;
+    container.frame.position.y = 0;
+
+    container.isDraggeable = false;
+
+    return thisObject;
+
+    function initialize() {
+
+        window.CURRENT_PROCESS = window.localStorage.getItem("currentProcess");
+    }
+
+    function getContainer(point) {
+
+        let container;
+
+        for (let i = 0; i < thisObject.panels.length; i++) {
+
+            container = thisObject.panels[i].getContainer(point);
+
+            if (container !== undefined) {
+
+                /* We found an inner container which has the point. We return it. */
+
+                return container;
+            }
+        }
+
+        /* The point does not belong to any inner container, so we return the current container. */
+
+        return thisObject.container;
+
+    }
+
+    function draw() {
+
+        thisObject.container.frame.draw(false, false);
+
+        let fontSize = 12;
+        let label = window.CURRENT_PROCESS;
+
+        let point = {
+            x: thisObject.container.frame.width * 1 / 3,
+            y: (thisObject.container.frame.height / 2) + 4
+        };
+
+        point = thisObject.container.frame.frameThisPoint(point);
+
+        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+        browserCanvasContext.fillText(label, point.x, point.y);
+    }
+}

TopSpace/CurrentStartMode.js

@@ -0,0 +1,70 @@
+
+function newCurrentStartMode() {
+
+    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 = 200;
+    thisObject.container.frame.height = TOP_SPACE_HEIGHT;
+
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 1;
+    container.frame.position.y = 0;
+
+    container.isDraggeable = false;
+
+    return thisObject;
+
+    function initialize() {
+
+        window.CURRENT_START_MODE = window.localStorage.getItem("currentStartMode");
+    }
+
+    function getContainer(point) {
+
+        let container;
+
+        for (let i = 0; i < thisObject.panels.length; i++) {
+
+            container = thisObject.panels[i].getContainer(point);
+
+            if (container !== undefined) {
+
+                /* We found an inner container which has the point. We return it. */
+
+                return container;
+            }
+        }
+
+        /* The point does not belong to any inner container, so we return the current container. */
+
+        return thisObject.container;
+
+    }
+
+    function draw() {
+
+        thisObject.container.frame.draw(false, false);
+
+        let fontSize = 12;
+        let label = window.CURRENT_START_MODE;
+
+        let point = {
+            x: thisObject.container.frame.width * 1 / 3,
+            y: (thisObject.container.frame.height / 2) + 4
+        };
+
+        point = thisObject.container.frame.frameThisPoint(point);
+
+        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+        browserCanvasContext.fillText(label, point.x, point.y);
+    }
+}

TopSpace/DevTeam.js

@@ -0,0 +1,70 @@
+
+function newDevTeam() {
+
+    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 = 200;
+    thisObject.container.frame.height = TOP_SPACE_HEIGHT;
+
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 4;
+    container.frame.position.y = 0;
+
+    container.isDraggeable = false;
+
+    return thisObject;
+
+    function initialize() {
+
+        window.DEV_TEAM = window.localStorage.getItem("devTeam");
+    }
+
+    function getContainer(point) {
+
+        let container;
+
+        for (let i = 0; i < thisObject.panels.length; i++) {
+
+            container = thisObject.panels[i].getContainer(point);
+
+            if (container !== undefined) {
+
+                /* We found an inner container which has the point. We return it. */
+
+                return container;
+            }
+        }
+
+        /* The point does not belong to any inner container, so we return the current container. */
+
+        return thisObject.container;
+
+    }
+
+    function draw() {
+
+        thisObject.container.frame.draw(false, false);
+
+        let fontSize = 12;
+        let label = window.DEV_TEAM;
+
+        let point = {
+            x: thisObject.container.frame.width * 1 / 3,
+            y: (thisObject.container.frame.height / 2) + 4
+        };
+
+        point = thisObject.container.frame.frameThisPoint(point);
+
+        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+        browserCanvasContext.fillText(label, point.x, point.y);
+    }
+}

TopSpace/EndUser.js

@@ -0,0 +1,70 @@
+
+function newEndUser() {
+
+    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 = 200;
+    thisObject.container.frame.height = TOP_SPACE_HEIGHT;
+
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 5;
+    container.frame.position.y = 0;
+
+    container.isDraggeable = false;
+
+    return thisObject;
+
+    function initialize() {
+
+        window.USER_LOGGED_IN = window.localStorage.getItem("userName");
+    }
+
+    function getContainer(point) {
+
+        let container;
+
+        for (let i = 0; i < thisObject.panels.length; i++) {
+
+            container = thisObject.panels[i].getContainer(point);
+
+            if (container !== undefined) {
+
+                /* We found an inner container which has the point. We return it. */
+
+                return container;
+            }
+        }
+
+        /* The point does not belong to any inner container, so we return the current container. */
+
+        return thisObject.container;
+
+    }
+
+    function draw() {
+
+        thisObject.container.frame.draw(false, false);
+
+        let fontSize = 12;
+        let label = window.USER_LOGGED_IN;
+
+        let point = {
+            x: thisObject.container.frame.width * 1 / 3,
+            y: (thisObject.container.frame.height / 2) + 4
+        };
+
+        point = thisObject.container.frame.frameThisPoint(point);
+
+        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+        browserCanvasContext.fillText(label, point.x, point.y);
+    }
+}

server.js

@@ -383,6 +383,15 @@ function onBrowserRequest(request, response) {
             }
             break; 
 
+
+        case "TopSpace": // This means the TopSpace folder.
+            {
+
+                respondWithFile('./TopSpace/' + requestParameters[2], response);
+
+            }
+            break; 
+
         case "AABrowserAPI": // This means the Scripts folder.
             {
                 const AABROSER_API_MODULE = require('./AABrowserAPI/' + 'API');