diff --git a/Canvas.js b/Canvas.js
index 5ed30c33b..3c1b50996 100644
--- a/Canvas.js
+++ b/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();
diff --git a/Images/Stop.png b/Images/Stop.png
index 7a18479fd..69e524545 100644
Binary files a/Images/Stop.png and b/Images/Stop.png differ
diff --git a/Panels/TimeControlPanel.js b/Panels/TimeControlPanel.js
index ea7fcf630..09753f764 100644
--- a/Panels/TimeControlPanel.js
+++ b/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);
}
diff --git a/Project.njsproj b/Project.njsproj
index 25d499c05..a3c7d2a94 100644
--- a/Project.njsproj
+++ b/Project.njsproj
@@ -100,6 +100,9 @@
Code
+
+ Code
+
Code
diff --git a/Scripts/AppLoader.js b/Scripts/AppLoader.js
index 809b2d07b..84d5e483d 100644
--- a/Scripts/AppLoader.js
+++ b/Scripts/AppLoader.js
@@ -21,6 +21,7 @@
/* PlotterPanels */
+ "TopSpace/PlayStopButton.js",
"TopSpace/CompanyLogo.js",
"TopSpace/CurrentStartMode.js",
"TopSpace/CurrentProcess.js",
diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js
index 8e06cebd6..945b739fd 100644
--- a/Spaces/TopSpace.js
+++ b/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();
}
diff --git a/TopSpace/CompanyLogo.js b/TopSpace/CompanyLogo.js
index e71b6ba70..88a65bc7a 100644
--- a/TopSpace/CompanyLogo.js
+++ b/TopSpace/CompanyLogo.js
@@ -36,7 +36,7 @@ function newCompanyLogo() {
}
logo.src = "Images/aa-logo-dark-8.png";
- document.body.append(logo);
+
}
function getContainer(point) {
diff --git a/TopSpace/CurrentStartMode.js b/TopSpace/CurrentStartMode.js
index 4a376e0a8..70b57944f 100644
--- a/TopSpace/CurrentStartMode.js
+++ b/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
};
diff --git a/TopSpace/PlayStopButton.js b/TopSpace/PlayStopButton.js
new file mode 100644
index 000000000..3d3e18c1c
--- /dev/null
+++ b/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);
+ }
+}
\ No newline at end of file