First 2 Panels working well at the Panel Space

Canvas.js

@@ -21,7 +21,7 @@ Canvas
   ---> flaotingSpace
   |
   |
-  ---> PanelsSpace
+  ---> panelsSpace
 
 */
 
@@ -55,6 +55,7 @@ function newCanvas() {
         eventHandler: undefined,
         chartSpace: undefined,
         floatingSpace: undefined,
+        panelsSpace: undefined,
         animation: undefined,
         initialize: initialize
     };
@@ -71,17 +72,24 @@ function newCanvas() {
 
         addCanvasEvents();
 
-        /* The canvas has one ChartSpace child. Here is where we get it. */ 
+        /* Instantiate all the children of Canvas object */ 
+
+        let panelsSpace = newPanelsSpace();
+        panelsSpace.initialize();
+
+        this.panelsSpace = panelsSpace;
+
+        let floatingSpace = newFloatingSpace();
+        floatingSpace.initialize();
+
+        this.floatingSpace = floatingSpace;
 
         let chartSpace = newChartSpace();
         chartSpace.initialize();
 
         this.chartSpace = chartSpace;
 
-        let floatingSpace = newFloatingSpace();
-        floatingSpace.initialize();
-
-        this.floatingSpace = floatingSpace;
+        /* Splash Screen */
 
         splashScreen = newSplashScreen();
         splashScreen.initialize();
@@ -93,8 +101,9 @@ function newCanvas() {
 
         /* Here we add all the functions that will be called during the animation cycle. */
 
-        animation.addCallBackFunction("Chart Space", this.chartSpace.draw);
-        animation.addCallBackFunction("Floating Space", this.floatingSpace.physicsLoop);
+        animation.addCallBackFunction("Chart Space", thisObject.chartSpace.draw);
+        animation.addCallBackFunction("Floating Space", thisObject.floatingSpace.physicsLoop);
+        animation.addCallBackFunction("Panels Space", thisObject.panelsSpace.draw);
         animation.addCallBackFunction("Splash Screen", splashScreen.draw);
         animation.start();
 
@@ -144,73 +153,102 @@ function newCanvas() {
 
     function onMouseDown(event) {
 
+        /*
+
+        There are four types of elements that can be dragged.
+
+        1. Panels.
+        2. Floating Elements (Currently only Balls).
+        3. Charts.
+        4. The Viewport.
+
+        We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport.
+
+        */
+
         dragVector.downX = event.pageX;
         dragVector.downY = event.pageY;
 
+        let point = {
+            x: event.pageX,
+            y: event.pageY
+        };
+
+        let container;
+
+        /* We check first if the mouse is over a panel/ */
+
+        container = thisObject.panelsSpace.getContainer(point);
+
+        if (container !== undefined && container.isDraggeable === true) {
+
+            containerBeingDragged = container;
+            containerDragStarted = true;
+            return;
+        }
+
         /* We check first if the mouse is over a ball/ */
 
         ballBeingDragged = thisObject.floatingSpace.isInside(event.pageX, event.pageY);
 
         if (ballBeingDragged >= 0) {
             ballDragStarted = true;
+            return;
+        } 
 
-        } else {
+        /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
 
-            /* If it is not, then we check if it is over any of the existing containers. */
+        container = thisObject.chartSpace.getContainer(point);
 
-            let point = {
-                x: event.pageX,
-                y: event.pageY
-            };
+        if (container !== undefined && container.isDraggeable === true) {
 
-            let container = thisObject.chartSpace.getContainer(point);
-
-            if (container !== undefined && container.isDraggeable === true) {
-
-                containerBeingDragged = container;
-                containerDragStarted = true;
-            } else {
-                viewPortBeingDragged = true;
-            }
-
-        }
+            containerBeingDragged = container;
+            containerDragStarted = true;
+            return;
+        } 
 
+        viewPortBeingDragged = true;
     }
 
     function onMouseClick(event) {
 
-        dragVector.downX = event.pageX;
-        dragVector.downY = event.pageY;
+        let point = {
+            x: event.pageX,
+            y: event.pageY
+        };
 
-        /* We check first if the mouse is over a ball/ */ 
+        let container;
+
+        /* We check first if the mouse is over a panel/ */
+
+        container = thisObject.panelsSpace.getContainer(point);
+
+        if (container !== undefined && container.isClickeable === true) {
+
+            container.eventHandler.raiseEvent('onMouseClick', event);
+            return;
+        }
+
+        /* We check first if the mouse is over a ball/ */
 
         let ballBeingClicked = thisObject.floatingSpace.isInside(event.pageX, event.pageY);
 
         if (ballBeingClicked >= 0) {
 
             /* Right now we do nothing with this. */
+            return;
 
-        } else {
+        } 
 
-            /* If it is not, then we check if it is over any of the existing containers. */
+        /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
 
-            let point = {
-                x: event.pageX,
-                y: event.pageY
-            };
+        container = thisObject.chartSpace.getContainer(point);
 
-            let container = thisObject.chartSpace.getContainer(point);
-
-            if (container !== undefined && container.isClickeable === true) {
-
-                /* We deliver the event to the container that is waiting for it. */
-
-                container.eventHandler.raiseEvent('onMouseClick', event);
-
-            }
-
-        }
+        if (container !== undefined && container.isClickeable === true) {
 
+            container.eventHandler.raiseEvent('onMouseClick', event);
+            return;
+        } 
     }
 
     function onMouseUp(event) {

Panels/TimeControlPanel.js

@@ -1,11 +1,11 @@
 
 
 
-function newControlPanel() {
+function newTimeControlPanel() {
 
     let PLAY_STEP = 0; 
 
-    var controlPanel = {
+    var thisObject = {
         container: undefined,
         buttons: undefined,
         setDatetime: setDatetime, 
@@ -19,12 +19,12 @@ function newControlPanel() {
     var container = newContainer();
     container.initialize();
     container.isDraggeable = true;
-    controlPanel.container = container;
-    controlPanel.container.frame.containerName = "Time Control Panel";
+    thisObject.container = container;
+    thisObject.container.frame.containerName = "Time Control Panel";
 
     var playingLoop;                    // Controls the generation of events that allows to play continuosly the market. 
 
-    return controlPanel;     
+    return thisObject;     
 
 
 
@@ -62,8 +62,8 @@ function newControlPanel() {
             button.initialize();
 
             buttonPosition = {  // The first button 
-                x: controlPanel.container.frame.width / 2 - (buttonNames.length * button.container.frame.width) / 2,
-                y: controlPanel.container.frame.height * 7 / 10
+                x: thisObject.container.frame.width / 2 - (buttonNames.length * button.container.frame.width) / 2,
+                y: thisObject.container.frame.height * 7 / 10
             };
             button.container.frame.position.x = buttonPosition.x + lastX;
             button.container.frame.position.y = buttonPosition.y;
@@ -84,7 +84,7 @@ function newControlPanel() {
 
 
 
-        controlPanel.buttons = buttons;
+        thisObject.buttons = buttons;
 
 
         var datetime = INITIAL_DATE;
@@ -95,8 +95,8 @@ function newControlPanel() {
             draw: drawTimeDisplay
         };
 
-        controlPanel.buttons = buttons;
-        controlPanel.datetimeDisplay = datetimeDisplay;
+        thisObject.buttons = buttons;
+        thisObject.datetimeDisplay = datetimeDisplay;
 
 
         viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged);
@@ -151,7 +151,7 @@ function newControlPanel() {
 
     function setDatetime(newDatetime) {
 
-        controlPanel.datetimeDisplay.currentDatetime = newDatetime;
+        thisObject.datetimeDisplay.currentDatetime = newDatetime;
 
     }
 
@@ -159,10 +159,10 @@ function newControlPanel() {
 
     function addTime(seconds) {
 
-        var newDate = controlPanel.datetimeDisplay.currentDatetime;
+        var newDate = thisObject.datetimeDisplay.currentDatetime;
 
         newDate.setSeconds(newDate.getSeconds() + seconds);
-        controlPanel.datetimeDisplay.currentDatetime = newDate;
+        thisObject.datetimeDisplay.currentDatetime = newDate;
 
     }
 
@@ -172,11 +172,11 @@ function newControlPanel() {
 
         /* When any of the buttons are pressed, the control panel must turn off the resto of the buttons. */
 
-        for (var i = 0; i < controlPanel.buttons.length; i++) {
+        for (var i = 0; i < thisObject.buttons.length; i++) {
 
             if (i !== buttonPressedIndex) {
 
-                var button = controlPanel.buttons[i];
+                var button = thisObject.buttons[i];
 
                 button.status = 'off';
 
@@ -186,7 +186,7 @@ function newControlPanel() {
 
         /* Now we actualy do something depending on which button was pressed. */
 
-        switch (controlPanel.buttons[buttonPressedIndex].type) {
+        switch (thisObject.buttons[buttonPressedIndex].type) {
 
             case "Fast Backwards":
 
@@ -246,11 +246,11 @@ function newControlPanel() {
 
     function pressStepBackwards() {
 
-        controlPanel.datetimeDisplay.addTime(-1 * PLAY_STEP / 1000);
+        thisObject.datetimeDisplay.addTime(-1 * PLAY_STEP / 1000);
 
-        var newDatetime = controlPanel.datetimeDisplay.currentDatetime;
+        var newDatetime = thisObject.datetimeDisplay.currentDatetime;
 
-        controlPanel.container.eventHandler.raiseEvent('Datetime Changed', newDatetime);
+        thisObject.container.eventHandler.raiseEvent('Datetime Changed', newDatetime);
 
     }
 
@@ -260,11 +260,11 @@ function newControlPanel() {
 
     function pressStepForward() {
 
-        controlPanel.datetimeDisplay.addTime(PLAY_STEP / 1000);
+        thisObject.datetimeDisplay.addTime(PLAY_STEP / 1000);
 
-        var newDatetime = controlPanel.datetimeDisplay.currentDatetime;
+        var newDatetime = thisObject.datetimeDisplay.currentDatetime;
 
-        controlPanel.container.eventHandler.raiseEvent('Datetime Changed', newDatetime);
+        thisObject.container.eventHandler.raiseEvent('Datetime Changed', newDatetime);
 
     }
 
@@ -285,10 +285,10 @@ function newControlPanel() {
 
     function draw() {
 
-        controlPanel.container.frame.draw(false, false, true);
+        thisObject.container.frame.draw(false, false, true);
 
-        for (var i = 0; i < controlPanel.buttons.length; i++) {
-            controlPanel.buttons[i].draw();
+        for (var i = 0; i < thisObject.buttons.length; i++) {
+            thisObject.buttons[i].draw();
         }
 
         this.datetimeDisplay.draw();
@@ -302,7 +302,7 @@ function newControlPanel() {
 
         let fontSize = 10;
 
-        let label = controlPanel.datetimeDisplay.currentDatetime.toUTCString();
+        let label = thisObject.datetimeDisplay.currentDatetime.toUTCString();
         let labelArray = label.split(" ");
 
         label = labelArray[0] + " " + labelArray[1] + " " + labelArray[2] + " " + labelArray[3];
@@ -310,11 +310,11 @@ function newControlPanel() {
         /* Now we transform x on the actual coordinate on the canvas. */
 
         let labelPoint = {
-            x: controlPanel.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-            y: controlPanel.container.frame.height * 3.4 / 10
+            x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+            y: thisObject.container.frame.height * 3.4 / 10
         };
 
-        labelPoint = controlPanel.container.frame.frameThisPoint(labelPoint);
+        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
 
         browserCanvasContext.font = fontSize + 'px Courier New';
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
@@ -327,11 +327,11 @@ function newControlPanel() {
         /* Now we transform x on the actual coordinate on the canvas. */
 
         labelPoint = {
-            x: controlPanel.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-            y: controlPanel.container.frame.height * 5.0 / 10
+            x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+            y: thisObject.container.frame.height * 5.0 / 10
         };
 
-        labelPoint = controlPanel.container.frame.frameThisPoint(labelPoint);
+        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
 
         browserCanvasContext.font = fontSize + 'px Courier New';
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
@@ -342,11 +342,11 @@ function newControlPanel() {
         /* Now we transform x on the actual coordinate on the canvas. */
 
         labelPoint = {
-            x: controlPanel.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-            y: controlPanel.container.frame.height * 6.5 / 10
+            x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+            y: thisObject.container.frame.height * 6.5 / 10
         };
 
-        labelPoint = controlPanel.container.frame.frameThisPoint(labelPoint);
+        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
 
         browserCanvasContext.font = fontSize + 'px Courier New';
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';

Project.njsproj

@@ -41,6 +41,9 @@
     <Compile Include="ImageButton.js">
       <SubType>Code</SubType>
     </Compile>
+    <Compile Include="Spaces\PanelsSpace.js">
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="PlotterPanel.js">
       <SubType>Code</SubType>
     </Compile>
@@ -91,7 +94,7 @@
     <Compile Include="OrderBookFilesCursor.js" />
     <Compile Include="OrderBookSnapShot.js" />
     <Compile Include="Panels\ProductsPanel.js" />
-    <Compile Include="Panels\ControlPanel.js" />
+    <Compile Include="Panels\TimeControlPanel.js" />
     <Compile Include="Panels\OrderBookPanel.js" />
     <Compile Include="TimeLineCoordinateSystem.js" />
     <Compile Include="PriceChart.js" />
@@ -120,6 +123,7 @@
   </ItemGroup>
   <ItemGroup>
     <Folder Include="Azure\" />
+    <Folder Include="Spaces\" />
     <Folder Include="Panels\" />
   </ItemGroup>
   <!-- Do not delete the following Import Project.  While this appears to do nothing it is a marker for setting TypeScript properties before our import that depends on them. -->

Spaces/PanelsSpace.js

@@ -0,0 +1,131 @@
+/*
+
+The Panel Space y the place wehre all panels live, no matter who create them. 
+
+*/
+
+function newPanelsSpace() {
+
+    var thisObject = {
+        container: undefined,
+        createNewPanel: createNewPanel,
+        destroyPanel: destroyPanel,
+        getPanel: getPanel,
+        draw: draw,
+        panels: [],
+        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.isDraggeable = false;
+
+    container.displacement.containerName = "Panels Space";
+    container.frame.containerName = "Panels Space";
+
+    return thisObject;
+
+    function initialize() {
+
+        /* The space does not create any Panels for itself, it just sits and waits others need panels. */
+
+    }
+
+    function createNewPanel(pType) {
+
+        let panel;
+
+        switch (pType) {
+
+            case "Time Control Panel":
+                {
+                    panel = newTimeControlPanel();
+                    panel.initialize();
+                    break;
+                }
+
+            case "Products Panel":
+                {
+                    panel = newProductsPanel();
+                    panel.initialize();
+                    break;
+                }
+        }
+
+        thisObject.panels.push(panel);
+
+        panel.handle = Math.floor((Math.random() * 10000000) + 1);
+
+        return panel.handle;
+    }
+
+    function destroyPanel(pPanelHandle) {
+
+        for (let i = 0; i < thisObject.panels.length; i++) {
+
+            let panel = thisObject.panels[i];
+
+            if (panel.handle === pPanelHandle) {
+                thisObject.panels.splice(i, 1);  // Delete item from array.
+                return;
+            }
+        }
+    }
+
+    function getPanel(pPanelHandle) {
+
+        for (let i = 0; i < thisObject.panels.length; i++) {
+
+            let panel = thisObject.panels[i];
+
+            if (panel.handle === pPanelHandle) {
+                return panel;
+            }
+        }
+    }
+
+    function draw() {
+
+        thisObject.container.frame.draw(false, false);
+
+        /* When we draw a time machine, that means also to draw all the charts in it. */
+
+        for (var i = 0; i < thisObject.panels.length; i++) {
+
+            let panel = thisObject.panels[i];
+            panel.draw();
+
+        }
+    }
+
+    function getContainer(point) {
+
+        let container;
+
+        /*
+
+        We search for the container of panels in the oposite direction than we do it for drawing them,
+        so panels overlapping others are picked firt although they are drawn last.
+
+        */
+
+        for (var i = thisObject.panels.length - 1; i >= 0; 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;
+
+    }
+}

TimeMachine.js

@@ -11,37 +11,36 @@ each one with it own charts, and each one positioned at an especific point in ti
 
 function newTimeMachine() {
 
-    var timeMachine = {
+    let thisObject = {
         container: undefined,
-        controlPanel: undefined,
         draw: draw,
         charts: [],
         getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
         initialize: initialize
     };
 
-    var container = newContainer();
+    let container = newContainer();
     container.initialize();
-    timeMachine.container = container;
-    timeMachine.container.isDraggeable = false;
+    thisObject.container = container;
+    thisObject.container.isDraggeable = false;
 
     container.displacement.containerName = "Time Machine";
     container.frame.containerName = "Time Machine";
 
-    let botsPanel;
+    let controlPanelHandle;             // We need this to destroy the Panel when this object is itself destroyed or no longer needs it...
+    let productsPanelHandle;            // ... also to request a reference to the object for the cases we need it. 
 
-    return timeMachine;
+    return thisObject;
 
     function initialize() {
 
         /* Each Time Machine has a Control Panel. */
 
-        var controlPanel = newControlPanel();
-        controlPanel.initialize();
-        this.controlPanel = controlPanel;
+        controlPanelHandle = canvas.panelsSpace.createNewPanel("Time Control Panel");
+        let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle);
 
-        botsPanel = newProductsPanel();
-        botsPanel.initialize();
+        productsPanelHandle = canvas.panelsSpace.createNewPanel("Products Panel");
+        let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle);
 
         let iteration = 0;
 
@@ -49,24 +48,24 @@ function newTimeMachine() {
 
         let timelineChart = newTimelineChart();
 
-        timelineChart.container.displacement.parentDisplacement = timeMachine.container.displacement;
-        timelineChart.container.frame.parentFrame = timeMachine.container.frame;
+        timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement;
+        timelineChart.container.frame.parentFrame = thisObject.container.frame;
 
-        timelineChart.container.parentContainer = timeMachine.container;
+        timelineChart.container.parentContainer = thisObject.container;
 
-        timelineChart.container.frame.width = timeMachine.container.frame.width * 1;
-        timelineChart.container.frame.height = timeMachine.container.frame.height * 1 * CHART_ASPECT_RATIO;
+        timelineChart.container.frame.width = thisObject.container.frame.width * 1;
+        timelineChart.container.frame.height = thisObject.container.frame.height * 1 * CHART_ASPECT_RATIO;
 
-        timelineChart.container.frame.position.x = timeMachine.container.frame.width / 2 - timelineChart.container.frame.width / 2;
+        timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2;
         timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.5 * iteration;
 
-        timelineChart.initialize(1, INITIAL_DEFAULT_MARKET, botsPanel, onDefaultMarketInitialized);
+        timelineChart.initialize(1, INITIAL_DEFAULT_MARKET, productsPanel, onDefaultMarketInitialized);
 
         iteration++;
 
         function onDefaultMarketInitialized() {
 
-            timeMachine.charts.push(timelineChart);
+            thisObject.charts.push(timelineChart);
 
             controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined);
             timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime);
@@ -75,7 +74,6 @@ function newTimeMachine() {
 
         }
 
-
         function initializeTheRestOfTheMarkets() {
 
             markets.forEach(initializeTimelineChart);
@@ -89,36 +87,31 @@ function newTimeMachine() {
 
                 let timelineChart = newTimelineChart();
 
-                timelineChart.container.displacement.parentDisplacement = timeMachine.container.displacement;
-                timelineChart.container.frame.parentFrame = timeMachine.container.frame;
+                timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement;
+                timelineChart.container.frame.parentFrame = thisObject.container.frame;
 
-                timelineChart.container.parentContainer = timeMachine.container;
+                timelineChart.container.parentContainer = thisObject.container;
 
-                timelineChart.container.frame.width = timeMachine.container.frame.width * 1;
-                timelineChart.container.frame.height = timeMachine.container.frame.height * 1 * CHART_ASPECT_RATIO;
+                timelineChart.container.frame.width = thisObject.container.frame.width * 1;
+                timelineChart.container.frame.height = thisObject.container.frame.height * 1 * CHART_ASPECT_RATIO;
 
-                timelineChart.container.frame.position.x = timeMachine.container.frame.width / 2 - timelineChart.container.frame.width / 2;
+                timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2;
                 timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.5 * iteration;
 
-                timelineChart.initialize(1, key, botsPanel, finalSteps);
+                timelineChart.initialize(1, key, productsPanel, finalSteps);
 
                 iteration++;
 
                 function finalSteps() {
 
-                    timeMachine.charts.push(timelineChart);
+                    thisObject.charts.push(timelineChart);
 
                     controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined);
                     timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime);
 
                 }
-
             }
-
         }
-
-        
-
     }
 
     function draw() {
@@ -127,22 +120,17 @@ function newTimeMachine() {
 
         /* When we draw a time machine, that means also to draw all the charts in it. */
 
-        for (var i = 0; i < this.charts.length; i++) {
+        for (let i = 0; i < this.charts.length; i++) {
 
             let chart = this.charts[i];
             chart.draw();
 
         }
-
-        this.controlPanel.draw();
-
-        botsPanel.draw();
-
     }
 
     function getContainer(point) {
 
-        var container;
+        let container;
 
         /* First we check if this point is inside this space. */
 
@@ -150,25 +138,7 @@ function newTimeMachine() {
 
             /* Now we see which is the inner most container that has it */
 
-            container = this.controlPanel.getContainer(point);
-
-            if (container !== undefined) {
-
-                /* We found an inner container which has the point. We return it. */
-
-                return container;
-            }
-
-            container = botsPanel.getContainer(point);
-
-            if (container !== undefined) {
-
-                /* We found an inner container which has the point. We return it. */
-
-                return container;
-            }
-
-            for (var i = 0; i < this.charts.length; i++) {
+            for (let i = 0; i < this.charts.length; i++) {
 
                 container = this.charts[i].getContainer(point);
 
@@ -190,7 +160,5 @@ function newTimeMachine() {
 
             return undefined;
         }
-
     }
-
 }

index.html

@@ -6,8 +6,6 @@
 
 
     <!--Plotters-->
-
-
     <!--PlotterPanels-->
 
 
@@ -67,10 +65,12 @@
 
     <script type="text/javascript" src="Azure/azure-storage.blob.js"></script>
 
-    <script type="text/javascript" src="Panels/ControlPanel.js"></script>
+    <script type="text/javascript" src="Panels/TimeControlPanel.js"></script>
     <script type="text/javascript" src="Panels/ProductsPanel.js"></script>
     <script type="text/javascript" src="Panels/OrderBookPanel.js"></script>
 
+    <script type="text/javascript" src="Spaces/PanelsSpace.js"></script>
+
     <style type="text/css">
         browserCanvas {
             border: 1px solid black;

server.js

@@ -6,7 +6,7 @@ if (CONSOLE_LOG === true) {
 
 }
 
-const DEBUG_MODE = false;           // This forces the server to read Plotters from the local drive.
+const DEBUG_MODE = true;           // This forces the server to read Plotters from the local drive.
 
 if (CONSOLE_LOG === true && DEBUG_MODE === true) {
 
@@ -839,6 +839,12 @@ function onBrowserRequest(request, response) {
             }
             break;
 
+        case "Spaces":
+            {
+                respondWithFile('./' + requestParameters[1] + '/' + requestParameters[2], response);
+            }
+            break;
+
 
         default: