diff --git a/Button.js b/Button.js deleted file mode 100644 index 4a94a1d5f..000000000 --- a/Button.js +++ /dev/null @@ -1,677 +0,0 @@ -function newButton() { - - var button = { - container: undefined, - press: press, - draw: draw, - offFillStyle: 'rgba(150, 150, 250, 1)', - onFillStyle: 'rgba(250, 150, 150, 1)', - status: 'off', - type: undefined, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - initialize: initialize - }; - - var container = newContainer(); - container.initialize(); - container.isDraggeable = false; - container.isClickeable = true; - button.container = container; - - const REDUCTION_FACTOR = 3; - - return button; - - function initialize() { - - /* Lets set the basic dimensions of this button. */ - - var position = { - x: 0, - y: 0 - }; - - this.container.frame.position = position; - this.container.frame.width = 50 / REDUCTION_FACTOR; - this.container.frame.height = 50 / REDUCTION_FACTOR; - - /* Now we start listening to the onClick event from the mouse, so that we can allow users operate this button. */ - - this.container.eventHandler.listenToEvent('onMouseClick', press, undefined); - - } - - function getContainer(point) { - - var container; - - /* First we check if this point is inside this space. */ - - if (this.container.frame.isThisPointHere(point, true) === true) { - - return this.container; - - } else { - - /* This point does not belong to this space. */ - - return undefined; - } - - } - - function press(event, extraData) { - - button.status = 'on'; - - } - - function draw() { - - switch (this.type) { - - case "Fast Backwards": - - drawFastBackwards(); - break; - - case "Play Backwards": - - drawPlayBackwards(); - break; - - case "Step Backwards": - - drawStepBackwards(); - break; - - case "Pause": - - drawPause(); - break; - - case "Step Forward": - - drawStepForward(); - break; - - case "Play Forward": - - drawPlayForward(); - break; - - case "Fast Forward": - - drawFastForward(); - break; - - default: - - - } - - } - - - function drawFastBackwards() { - - point1 = { - x: 40 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point2 = { - x: 25 / REDUCTION_FACTOR, - y: 25 / REDUCTION_FACTOR - }; - - point3 = { - x: 40 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - - - - - point5 = { - x: 25 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point6 = { - x: 10 / REDUCTION_FACTOR, - y: 25 / REDUCTION_FACTOR - }; - - point7 = { - x: 25 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - - - /* Now the transformations. */ - - point1 = button.container.frame.frameThisPoint(point1); - point2 = button.container.frame.frameThisPoint(point2); - point3 = button.container.frame.frameThisPoint(point3); - - point5 = button.container.frame.frameThisPoint(point5); - point6 = button.container.frame.frameThisPoint(point6); - point7 = button.container.frame.frameThisPoint(point7); - - point1 = button.container.displacement.displaceThisPoint(point1); - point2 = button.container.displacement.displaceThisPoint(point2); - point3 = button.container.displacement.displaceThisPoint(point3); - - point5 = button.container.displacement.displaceThisPoint(point5); - point6 = button.container.displacement.displaceThisPoint(point6); - point7 = button.container.displacement.displaceThisPoint(point7); - - /* Lets start the drawing. */ - - browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(point1.x, point1.y); - browserCanvasContext.lineTo(point2.x, point2.y); - browserCanvasContext.lineTo(point3.x, point3.y); - browserCanvasContext.lineTo(point1.x, point1.y); - - browserCanvasContext.moveTo(point5.x, point5.y); - browserCanvasContext.lineTo(point6.x, point6.y); - browserCanvasContext.lineTo(point7.x, point7.y); - browserCanvasContext.lineTo(point5.x, point5.y); - browserCanvasContext.closePath(); - - if (button.status === "on") { - browserCanvasContext.fillStyle = button.onFillStyle; - } else { - browserCanvasContext.fillStyle = button.offFillStyle; - } - browserCanvasContext.fill(); - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.5)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - browserCanvasContext.closePath(); - - } - - function drawPlayBackwards() { - - point1 = { - x: 40 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point2 = { - x: 10 / REDUCTION_FACTOR, - y: 25 / REDUCTION_FACTOR - }; - - point3 = { - x: 40 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - - /* Now the transformations. */ - - point1 = button.container.frame.frameThisPoint(point1); - point2 = button.container.frame.frameThisPoint(point2); - point3 = button.container.frame.frameThisPoint(point3); - - point1 = button.container.displacement.displaceThisPoint(point1); - point2 = button.container.displacement.displaceThisPoint(point2); - point3 = button.container.displacement.displaceThisPoint(point3); - - /* Lets start the drawing. */ - - browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(point1.x, point1.y); - browserCanvasContext.lineTo(point2.x, point2.y); - browserCanvasContext.lineTo(point3.x, point3.y); - browserCanvasContext.lineTo(point1.x, point1.y); - - browserCanvasContext.closePath(); - - if (button.status === "on") { - browserCanvasContext.fillStyle = button.onFillStyle; - } else { - browserCanvasContext.fillStyle = button.offFillStyle; - } - browserCanvasContext.fill(); - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.5)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - browserCanvasContext.closePath(); - - } - - function drawStepBackwards() { - - point1 = { - x: 40 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point2 = { - x: 20 / REDUCTION_FACTOR, - y: 25 / REDUCTION_FACTOR - }; - - point3 = { - x: 40 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - - - - - point5 = { - x: 10 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point6 = { - x: 20 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point7 = { - x: 20 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - point8 = { - x: 10 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - /* Now the transformations. */ - - point1 = button.container.frame.frameThisPoint(point1); - point2 = button.container.frame.frameThisPoint(point2); - point3 = button.container.frame.frameThisPoint(point3); - - point5 = button.container.frame.frameThisPoint(point5); - point6 = button.container.frame.frameThisPoint(point6); - point7 = button.container.frame.frameThisPoint(point7); - point8 = button.container.frame.frameThisPoint(point8); - - point1 = button.container.displacement.displaceThisPoint(point1); - point2 = button.container.displacement.displaceThisPoint(point2); - point3 = button.container.displacement.displaceThisPoint(point3); - - point5 = button.container.displacement.displaceThisPoint(point5); - point6 = button.container.displacement.displaceThisPoint(point6); - point7 = button.container.displacement.displaceThisPoint(point7); - point8 = button.container.displacement.displaceThisPoint(point8); - - /* Lets start the drawing. */ - - browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(point1.x, point1.y); - browserCanvasContext.lineTo(point2.x, point2.y); - browserCanvasContext.lineTo(point3.x, point3.y); - - browserCanvasContext.lineTo(point1.x, point1.y); - - browserCanvasContext.moveTo(point5.x, point5.y); - browserCanvasContext.lineTo(point6.x, point6.y); - browserCanvasContext.lineTo(point7.x, point7.y); - browserCanvasContext.lineTo(point8.x, point8.y); - browserCanvasContext.lineTo(point5.x, point5.y); - browserCanvasContext.closePath(); - - if (button.status === "on") { - browserCanvasContext.fillStyle = button.onFillStyle; - } else { - browserCanvasContext.fillStyle = button.offFillStyle; - } - browserCanvasContext.fill(); - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.5)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - browserCanvasContext.closePath(); - - } - - function drawPause() { - - point1 = { - x: 10 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point2 = { - x: 20 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point3 = { - x: 20 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - point4 = { - x: 10 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - point5 = { - x: 30 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point6 = { - x: 40 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point7 = { - x: 40 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - point8 = { - x: 30 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - /* Now the transformations. */ - - point1 = button.container.frame.frameThisPoint(point1); - point2 = button.container.frame.frameThisPoint(point2); - point3 = button.container.frame.frameThisPoint(point3); - point4 = button.container.frame.frameThisPoint(point4); - point5 = button.container.frame.frameThisPoint(point5); - point6 = button.container.frame.frameThisPoint(point6); - point7 = button.container.frame.frameThisPoint(point7); - point8 = button.container.frame.frameThisPoint(point8); - - point1 = button.container.displacement.displaceThisPoint(point1); - point2 = button.container.displacement.displaceThisPoint(point2); - point3 = button.container.displacement.displaceThisPoint(point3); - point4 = button.container.displacement.displaceThisPoint(point4); - point5 = button.container.displacement.displaceThisPoint(point5); - point6 = button.container.displacement.displaceThisPoint(point6); - point7 = button.container.displacement.displaceThisPoint(point7); - point8 = button.container.displacement.displaceThisPoint(point8); - - /* Lets start the drawing. */ - - browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(point1.x, point1.y); - browserCanvasContext.lineTo(point2.x, point2.y); - browserCanvasContext.lineTo(point3.x, point3.y); - browserCanvasContext.lineTo(point4.x, point4.y); - browserCanvasContext.lineTo(point1.x, point1.y); - - browserCanvasContext.moveTo(point5.x, point5.y); - browserCanvasContext.lineTo(point6.x, point6.y); - browserCanvasContext.lineTo(point7.x, point7.y); - browserCanvasContext.lineTo(point8.x, point8.y); - browserCanvasContext.lineTo(point5.x, point5.y); - browserCanvasContext.closePath(); - - if (button.status === "on") { - browserCanvasContext.fillStyle = button.onFillStyle; - } else { - browserCanvasContext.fillStyle = button.offFillStyle; - } - browserCanvasContext.fill(); - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.5)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - browserCanvasContext.closePath(); - - } - - function drawStepForward() { - - point1 = { - x: 10 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point2 = { - x: 30 / REDUCTION_FACTOR, - y: 25 / REDUCTION_FACTOR - }; - - point3 = { - x: 10 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - - - - - point5 = { - x: 30 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point6 = { - x: 40 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point7 = { - x: 40 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - point8 = { - x: 30 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - /* Now the transformations. */ - - point1 = button.container.frame.frameThisPoint(point1); - point2 = button.container.frame.frameThisPoint(point2); - point3 = button.container.frame.frameThisPoint(point3); - - point5 = button.container.frame.frameThisPoint(point5); - point6 = button.container.frame.frameThisPoint(point6); - point7 = button.container.frame.frameThisPoint(point7); - point8 = button.container.frame.frameThisPoint(point8); - - point1 = button.container.displacement.displaceThisPoint(point1); - point2 = button.container.displacement.displaceThisPoint(point2); - point3 = button.container.displacement.displaceThisPoint(point3); - - point5 = button.container.displacement.displaceThisPoint(point5); - point6 = button.container.displacement.displaceThisPoint(point6); - point7 = button.container.displacement.displaceThisPoint(point7); - point8 = button.container.displacement.displaceThisPoint(point8); - - /* Lets start the drawing. */ - - browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(point1.x, point1.y); - browserCanvasContext.lineTo(point2.x, point2.y); - browserCanvasContext.lineTo(point3.x, point3.y); - - browserCanvasContext.lineTo(point1.x, point1.y); - - browserCanvasContext.moveTo(point5.x, point5.y); - browserCanvasContext.lineTo(point6.x, point6.y); - browserCanvasContext.lineTo(point7.x, point7.y); - browserCanvasContext.lineTo(point8.x, point8.y); - browserCanvasContext.lineTo(point5.x, point5.y); - browserCanvasContext.closePath(); - - if (button.status === "on") { - browserCanvasContext.fillStyle = button.onFillStyle; - } else { - browserCanvasContext.fillStyle = button.offFillStyle; - } - browserCanvasContext.fill(); - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.5)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - browserCanvasContext.closePath(); - - } - - function drawPlayForward() { - - point1 = { - x: 10 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point2 = { - x: 40 / REDUCTION_FACTOR, - y: 25 / REDUCTION_FACTOR - }; - - point3 = { - x: 10 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - - /* Now the transformations. */ - - point1 = button.container.frame.frameThisPoint(point1); - point2 = button.container.frame.frameThisPoint(point2); - point3 = button.container.frame.frameThisPoint(point3); - - point1 = button.container.displacement.displaceThisPoint(point1); - point2 = button.container.displacement.displaceThisPoint(point2); - point3 = button.container.displacement.displaceThisPoint(point3); - - /* Lets start the drawing. */ - - browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(point1.x, point1.y); - browserCanvasContext.lineTo(point2.x, point2.y); - browserCanvasContext.lineTo(point3.x, point3.y); - browserCanvasContext.lineTo(point1.x, point1.y); - - browserCanvasContext.closePath(); - - if (button.status === "on") { - browserCanvasContext.fillStyle = button.onFillStyle; - } else { - browserCanvasContext.fillStyle = button.offFillStyle; - } - browserCanvasContext.fill(); - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.5)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - browserCanvasContext.closePath(); - - } - - - function drawFastForward() { - - point1 = { - x: 10 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point2 = { - x: 25 / REDUCTION_FACTOR, - y: 25 / REDUCTION_FACTOR - }; - - point3 = { - x: 10 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - - - - - point5 = { - x: 25 / REDUCTION_FACTOR, - y: 10 / REDUCTION_FACTOR - }; - - point6 = { - x: 40 / REDUCTION_FACTOR, - y: 25 / REDUCTION_FACTOR - }; - - point7 = { - x: 25 / REDUCTION_FACTOR, - y: 40 / REDUCTION_FACTOR - }; - - - - /* Now the transformations. */ - - point1 = button.container.frame.frameThisPoint(point1); - point2 = button.container.frame.frameThisPoint(point2); - point3 = button.container.frame.frameThisPoint(point3); - - point5 = button.container.frame.frameThisPoint(point5); - point6 = button.container.frame.frameThisPoint(point6); - point7 = button.container.frame.frameThisPoint(point7); - - point1 = button.container.displacement.displaceThisPoint(point1); - point2 = button.container.displacement.displaceThisPoint(point2); - point3 = button.container.displacement.displaceThisPoint(point3); - - point5 = button.container.displacement.displaceThisPoint(point5); - point6 = button.container.displacement.displaceThisPoint(point6); - point7 = button.container.displacement.displaceThisPoint(point7); - - /* Lets start the drawing. */ - - browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(point1.x, point1.y); - browserCanvasContext.lineTo(point2.x, point2.y); - browserCanvasContext.lineTo(point3.x, point3.y); - browserCanvasContext.lineTo(point1.x, point1.y); - - browserCanvasContext.moveTo(point5.x, point5.y); - browserCanvasContext.lineTo(point6.x, point6.y); - browserCanvasContext.lineTo(point7.x, point7.y); - browserCanvasContext.lineTo(point5.x, point5.y); - browserCanvasContext.closePath(); - - if (button.status === "on") { - browserCanvasContext.fillStyle = button.onFillStyle; - } else { - browserCanvasContext.fillStyle = button.offFillStyle; - } - - browserCanvasContext.fill(); - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.5)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - browserCanvasContext.closePath(); - - } - - - - - - - -} \ No newline at end of file diff --git a/Panels/TimeControlPanel.js b/Panels/TimeControlPanel.js index 09753f764..f3aa11a8e 100644 --- a/Panels/TimeControlPanel.js +++ b/Panels/TimeControlPanel.js @@ -1,13 +1,8 @@  - - function newTimeControlPanel() { - let PLAY_STEP = 0; - let thisObject = { container: undefined, - buttons: undefined, setDatetime: setDatetime, datetimeDisplay: undefined, stepDisplay: undefined, @@ -20,19 +15,16 @@ function newTimeControlPanel() { container.initialize(); container.isDraggeable = true; thisObject.container = container; - thisObject.container.frame.containerName = "Time Control Panel"; + thisObject.container.frame.containerName = "Current Datetime"; - let playingLoop; // Controls the generation of events that allows to play continuosly the market. + let timePeriod; return thisObject; - - - function initialize() { thisObject.container.frame.width = 200; - thisObject.container.frame.height = 85; + thisObject.container.frame.height = 65; let position = { x: (viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x) / 2 - thisObject.container.frame.width / 2, @@ -45,46 +37,6 @@ function newTimeControlPanel() { let buttonNames = ['Fast Backwards', 'Play Backwards', 'Step Backwards', 'Pause', 'Step Forward', 'Play Forward', 'Fast Forward']; let lastX = 0; - let buttons = []; - - for (let i = 0; i < buttonNames.length; i++) { - - /* Buttons are going to be one at the right of the other. */ - - let button = newButton(); - button.type = buttonNames[i]; - - button.container.displacement.parentDisplacement = thisObject.container.displacement; - button.container.frame.parentFrame = thisObject.container.frame; - - button.container.parentContainer = thisObject.container; - - button.initialize(); - - buttonPosition = { // The first button - 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; - - lastX = lastX + button.container.frame.width; - - /* We start listening to the buttons click event, so as to know when one was pressed. */ - - button.container.eventHandler.listenToEvent('onMouseClick', buttonPressed, i); - - if (buttonNames[i] === 'Pause') { - button.status = 'on'; // We turn on by default the PAUSE button. - } - - buttons.push(button); - - } - - - - thisObject.buttons = buttons; let datetime = INITIAL_DATE; @@ -94,17 +46,15 @@ function newTimeControlPanel() { draw: drawTimeDisplay }; - thisObject.buttons = buttons; thisObject.datetimeDisplay = datetimeDisplay; - - 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); + + viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged); + timePeriod = INITIAL_TIME_PERIOD; } function onBotChangedTime(pNewDatetime) { @@ -115,6 +65,12 @@ function newTimeControlPanel() { } + function onZoomChanged(event) { + + timePeriod = recalculatePeriod(event.newLevel); + + } + function getContainer(point) { let container; @@ -123,21 +79,6 @@ function newTimeControlPanel() { if (thisObject.container.frame.isThisPointHere(point, true) === true) { - /* Now we see which is the inner most container that has it */ - - - for (let i = 0; i < thisObject.buttons.length; i++) { - - container = thisObject.buttons[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; @@ -151,22 +92,12 @@ function newTimeControlPanel() { } - - function onZoomChanged(event) { - - PLAY_STEP = recalculatePeriod(event.newLevel); - - } - - function setDatetime(pDatetime) { thisObject.datetimeDisplay.currentDatetime = new Date(pDatetime); canvas.topSpace.playStopButton.setDatetime(pDatetime); } - - function addTime(seconds) { let newDate = thisObject.datetimeDisplay.currentDatetime; @@ -176,148 +107,14 @@ function newTimeControlPanel() { } - function buttonPressed(event, buttonPressedIndex) { - - clearInterval(playingLoop); - - /* When any of the buttons are pressed, the control panel must turn off the resto of the buttons. */ - - for (let i = 0; i < thisObject.buttons.length; i++) { - - if (i !== buttonPressedIndex) { - - let button = thisObject.buttons[i]; - - button.status = 'off'; - - } - - } - - /* Now we actualy do something depending on which button was pressed. */ - - switch (thisObject.buttons[buttonPressedIndex].type) { - - case "Fast Backwards": - - //pressFastBackwards(); - break; - - case "Play Backwards": - - //pressPlayBackwards(); - break; - - case "Step Backwards": - - //pressStepBackwards(); - break; - - case "Pause": - - //pressPause(); - cloudVM.onBotStopPressed(); - break; - - case "Step Forward": - - //pressStepForward(); - break; - - case "Play Forward": - - let UI_COMMANDS = { - beginDatetime: thisObject.datetimeDisplay.currentDatetime, - endDatetime: undefined, - timePeriod: PLAY_STEP, - startMode: window.CURRENT_START_MODE, - eventHandler: thisObject.container.eventHandler - }; - - cloudVM.onBotPlayPressed(UI_COMMANDS); - //pressPlayForward(); - break; - - case "Fast Forward": - - //pressFastForward(); - break; - - default: - - - } - - } - - function pressFastBackwards() { - - clearInterval(playingLoop); - playingLoop = setInterval(pressStepBackwards, 100); - - } - - function pressPlayBackwards() { - - clearInterval(playingLoop); - playingLoop = setInterval(pressStepBackwards, 1000); - - } - - function pressStepBackwards() { - - thisObject.datetimeDisplay.addTime(-1 * PLAY_STEP / 1000); - - let newDatetime = thisObject.datetimeDisplay.currentDatetime; - - thisObject.container.eventHandler.raiseEvent('Datetime Changed', newDatetime); - - } - - function pressPause() { - clearInterval(playingLoop); - } - - function pressStepForward() { - - thisObject.datetimeDisplay.addTime(PLAY_STEP / 1000); - - let newDatetime = thisObject.datetimeDisplay.currentDatetime; - - thisObject.container.eventHandler.raiseEvent('Datetime Changed', newDatetime); - - } - - function pressPlayForward() { - - clearInterval(playingLoop); - playingLoop = setInterval(pressStepForward, 1000); - - } - - function pressFastForward() { - - playingLoop = setInterval(pressStepForward, 100); - - } - - - function draw() { thisObject.container.frame.draw(false, false, true); - for (let i = 0; i < thisObject.buttons.length; i++) { - thisObject.buttons[i].draw(); - } - thisObject.datetimeDisplay.draw(); } - - - function drawTimeDisplay() { let fontSize = 10; @@ -331,7 +128,7 @@ function newTimeControlPanel() { let labelPoint = { x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: thisObject.container.frame.height * 3.4 / 10 + y: thisObject.container.frame.height * 4.4 / 10 }; labelPoint = thisObject.container.frame.frameThisPoint(labelPoint); @@ -346,21 +143,6 @@ function newTimeControlPanel() { /* Now we transform x on the actual coordinate on the canvas. */ - labelPoint = { - x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: thisObject.container.frame.height * 5.0 / 10 - }; - - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint); - - browserCanvasContext.font = fontSize + 'px Courier New'; - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - - label = PLAY_STEP / _1_MINUTE_IN_MILISECONDS + ' min'; - - /* Now we transform x on the actual coordinate on the canvas. */ - labelPoint = { x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, y: thisObject.container.frame.height * 6.5 / 10 @@ -372,10 +154,24 @@ function newTimeControlPanel() { browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'; browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); + if (timePeriod > _45_MINUTES_IN_MILISECONDS) { + label = timePeriod / _1_HOUR_IN_MILISECONDS + ' hs'; + } else { + label = timePeriod / _1_MINUTE_IN_MILISECONDS + ' min'; + } + + /* Now we transform x on the actual coordinate on the canvas. */ + + labelPoint = { + x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height * 8.5 / 10 + }; + + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint); + + browserCanvasContext.font = fontSize + 'px Courier New'; + browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'; + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); + } - - - - - } \ No newline at end of file diff --git a/Project.njsproj b/Project.njsproj index a3c7d2a94..f7b42d4aa 100644 --- a/Project.njsproj +++ b/Project.njsproj @@ -149,7 +149,6 @@ Code - diff --git a/Scripts/AppLoader.js b/Scripts/AppLoader.js index 84d5e483d..924334e4b 100644 --- a/Scripts/AppLoader.js +++ b/Scripts/AppLoader.js @@ -68,7 +68,6 @@ "SplashScreen.js", "Canvas.js", - "Button.js", "TextButton.js", "ImageButton.js", "EventHandler.js",