Working from the PlayStop Button

Canvas.js

@@ -89,6 +89,9 @@ function newCanvas() {
 
         /* Instantiate all the children of Canvas object */ 
 
+        thisObject.topSpace = newTopSpace();
+        thisObject.topSpace.initialize();
+
         thisObject.panelsSpace = newPanelsSpace();
         thisObject.panelsSpace.initialize();
 
@@ -102,9 +105,6 @@ function newCanvas() {
             viewPort.raiseEvents(); // These events will impacts on objects just initialized.
         }
 
-        thisObject.topSpace = newTopSpace();
-        thisObject.topSpace.initialize();
-
         /* Splash Screen */
 
         splashScreen = newSplashScreen();

Panels/TimeControlPanel.js

@@ -101,8 +101,19 @@ function newTimeControlPanel() {
         viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged);
         PLAY_STEP = INITIAL_TIME_PERIOD;
 
+        /* Here we will listen to the event when time was changed due to a Bot Execution. */
+
+        canvas.topSpace.playStopButton.container.eventHandler.listenToEvent("Bot Execution Changed Datetime", onBotChangedTime);
+        canvas.topSpace.playStopButton.setDatetime(datetime);
     }
 
+    function onBotChangedTime(pNewDatetime) {
+
+        let newDatetime = new Date(pNewDatetime);
+
+        thisObject.container.eventHandler.raiseEvent("Datetime Changed", newDatetime);
+
+    }
 
     function getContainer(point) {
 
@@ -148,10 +159,10 @@ function newTimeControlPanel() {
     }
 
 
-    function setDatetime(newDatetime) {
-
-        thisObject.datetimeDisplay.currentDatetime = newDatetime;
+    function setDatetime(pDatetime) {
 
+        thisObject.datetimeDisplay.currentDatetime = new Date(pDatetime);
+        canvas.topSpace.playStopButton.setDatetime(pDatetime);
     }
 
 

Project.njsproj

@@ -100,6 +100,9 @@
     <Compile Include="TopSpace\EndUser.js">
       <SubType>Code</SubType>
     </Compile>
+    <Compile Include="TopSpace\PlayStopButton.js">
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="WebDebugLog.js">
       <SubType>Code</SubType>
     </Compile>

Scripts/AppLoader.js

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

Spaces/TopSpace.js

@@ -5,6 +5,13 @@ function newTopSpace() {
         container: undefined,
         draw: draw,
         getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+        companyLogo: undefined,
+        endUser: undefined,
+        devTeam: undefined,
+        currentBot: undefined,
+        currentProcess: undefined,
+        currentStartMode: undefined,
+        playStopButton: undefined,
         initialize: initialize
     };
 
@@ -23,34 +30,30 @@ function newTopSpace() {
 
     container.isDraggeable = false;
 
-    let companyLogo;
-    let endUser;
-    let devTeam;
-    let currentBot;
-    let currentProcess;
-    let currentStartMode;
-
     return thisObject;
 
     function initialize() {
 
-        companyLogo = newCompanyLogo();
-        companyLogo.initialize();
+        thisObject.companyLogo = newCompanyLogo();
+        thisObject.companyLogo.initialize();
 
-        endUser = newEndUser();
-        endUser.initialize();
+        thisObject.endUser = newEndUser();
+        thisObject.endUser.initialize();
 
-        devTeam = newDevTeam();
-        devTeam.initialize();
+        thisObject.devTeam = newDevTeam();
+        thisObject.devTeam.initialize();
 
-        currentBot = newCurrentBot();
-        currentBot.initialize();
+        thisObject.currentBot = newCurrentBot();
+        thisObject.currentBot.initialize();
 
-        currentProcess = newCurrentProcess();
-        currentProcess.initialize();
+        thisObject.currentProcess = newCurrentProcess();
+        thisObject.currentProcess.initialize();
 
-        currentStartMode = newCurrentStartMode();
-        currentStartMode.initialize();
+        thisObject.currentStartMode = newCurrentStartMode();
+        thisObject.currentStartMode.initialize();
+
+        thisObject.playStopButton = newPlayStopButton();
+        thisObject.playStopButton.initialize();
 
     }
 
@@ -58,22 +61,25 @@ function newTopSpace() {
 
         let container;
 
-        container = companyLogo.getContainer(point);
+        container = thisObject.companyLogo.getContainer(point);
         if (container !== undefined) { return container; }
 
-        container = endUser.getContainer(point);
+        container = thisObject.endUser.getContainer(point);
         if (container !== undefined) { return container; }
 
-        container = devTeam.getContainer(point);
+        container = thisObject.devTeam.getContainer(point);
         if (container !== undefined) { return container; }
 
-        container = currentBot.getContainer(point);
+        container = thisObject.currentBot.getContainer(point);
         if (container !== undefined) { return container; }
 
-        container = currentProcess.getContainer(point);
+        container = thisObject.currentProcess.getContainer(point);
         if (container !== undefined) { return container; }
 
-        container = currentStartMode.getContainer(point);
+        container = thisObject.currentStartMode.getContainer(point);
+        if (container !== undefined) { return container; }
+
+        container = thisObject.playStopButton.getContainer(point);
         if (container !== undefined) { return container; }
 
         /* The point does not belong to any inner container, so we return the current container. */
@@ -87,12 +93,13 @@ function newTopSpace() {
         thisObject.container.frame.draw(false, false);
 
         drawBackground();
-        companyLogo.draw();
-        endUser.draw();
-        devTeam.draw();
-        currentBot.draw();
-        currentProcess.draw();
-        currentStartMode.draw();
+        thisObject.companyLogo.draw();
+        thisObject.endUser.draw();
+        thisObject.devTeam.draw();
+        thisObject.currentBot.draw();
+        thisObject.currentProcess.draw();
+        thisObject.currentStartMode.draw();
+        thisObject.playStopButton.draw();
 
     }
 

TopSpace/CompanyLogo.js

@@ -36,7 +36,7 @@ function newCompanyLogo() {
             }
 
         logo.src = "Images/aa-logo-dark-8.png";
-        document.body.append(logo);
+
     }
 
     function getContainer(point) {

TopSpace/CurrentStartMode.js

@@ -77,10 +77,10 @@ function newCurrentStartMode() {
         thisObject.container.frame.draw(false, false);
 
         let fontSize = 12;
-        let label = window.CURRENT_START_MODE;
+        let label = window.CURRENT_START_MODE + " Mode";
 
         let point = {
-            x: thisObject.container.frame.width * 1 / 3,
+            x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize / 3,
             y: (thisObject.container.frame.height / 2) + 4
         };
 

TopSpace/PlayStopButton.js

@@ -0,0 +1,139 @@
+
+function newPlayStopButton() {
+
+    var thisObject = {
+        container: undefined,
+        setDatetime: setDatetime, 
+        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 = 50;
+    thisObject.container.frame.height = TOP_SPACE_HEIGHT;
+
+    container.frame.position.x = viewPort.visibleArea.topRight.x;
+    container.frame.position.y = 0;
+
+    container.isDraggeable = false;
+    container.isClickeable = true;
+
+    let play;
+    let stop;
+    let canDraw = false;
+    let showing = "Play";
+    let image;
+
+    let datetime;
+    let timePeriod;
+
+    return thisObject;
+
+    function initialize() {
+
+        play = new Image();
+
+        play.onload = onImageLoad;
+
+        function onImageLoad() {
+            image = play;
+            canDraw = true;
+        }
+
+        play.src = "Images/Play.png";
+
+        stop = new Image();
+
+        stop.src = "Images/Stop.png";
+
+        thisObject.container.eventHandler.listenToEvent("onMouseClick", onClick);
+
+        viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged);
+        timePeriod = INITIAL_TIME_PERIOD;
+
+    }
+
+    function onClick() {
+
+        switch (showing) {
+
+            case "Play": {
+                image = stop;
+                showing = "Stop";
+
+                let UI_COMMANDS = {
+                    beginDatetime: datetime,
+                    endDatetime: undefined,
+                    timePeriod: timePeriod,
+                    startMode: window.CURRENT_START_MODE,
+                    eventHandler: thisObject.container.eventHandler
+                };
+
+                cloudVM.onBotPlayPressed(UI_COMMANDS);
+
+                break;
+            }
+            case "Stop": {
+                image = play;
+                showing = "Play";
+
+                cloudVM.onBotStopPressed();
+
+                break;
+            }
+        }
+    }
+
+    function onZoomChanged(event) {
+
+        timePeriod = recalculatePeriod(event.newLevel);
+
+    }
+
+    function setDatetime(pDatetime) {
+
+        datetime = new Date(pDatetime);
+    }
+
+    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 (canDraw === false) { return; }
+
+        let imageHeight = 272 / 6;
+        let imageWidth = 229 / 6;
+
+        let imagePoint = {
+            x: thisObject.container.frame.width / 2 - imageWidth / 2,
+            y: thisObject.container.frame.height / 2 - imageHeight / 2
+        };
+
+        imagePoint = thisObject.container.frame.frameThisPoint(imagePoint);
+
+        browserCanvasContext.drawImage(image, imagePoint.x, imagePoint.y, imageWidth, imageHeight);
+    }
+}