Time Control Panel , removed buttons
This commit is contained in:
Luis Fernando Molina committed
1 parent
fee5f31bef
commit
d64d09064a
4 files changed
+32
-915
No files matched your search
@@ -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();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
+32
-236
@@ -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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -149,7 +149,6 @@
|
||||
<Compile Include="Files\DailyFiles.js">
|
||||
<SubType>Code</SubType>
|
||||
</Compile>
|
||||
<Compile Include="Button.js" />
|
||||
<Compile Include="Candle.js" />
|
||||
<Compile Include="Canvas.js" />
|
||||
<Compile Include="ChartGrid.js" />
|
||||
|
||||
@@ -68,7 +68,6 @@
|
||||
|
||||
"SplashScreen.js",
|
||||
"Canvas.js",
|
||||
"Button.js",
|
||||
"TextButton.js",
|
||||
"ImageButton.js",
|
||||
"EventHandler.js",
|
||||
|
||||
Reference in new issue
Block a user