Merge remote-tracking branch 'upstream/develop'
This commit is contained in:
Matias committed
commit
e1819adfe8
3 files changed
+208
-518
No files matched your search
+208
-251
@@ -1,28 +1,27 @@
|
||||
|
||||
function newProfileBall() {
|
||||
|
||||
let thisObject = {
|
||||
function newProfileBall () {
|
||||
let thisObject = {
|
||||
|
||||
physicsLoop: physicsLoop,
|
||||
onMouseOver: onMouseOver,
|
||||
onMouseClick: onMouseClick,
|
||||
onMouseNotOver: onMouseNotOver,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
initialize: initialize
|
||||
physicsLoop: physicsLoop,
|
||||
onMouseOver: onMouseOver,
|
||||
onMouseClick: onMouseClick,
|
||||
onMouseNotOver: onMouseNotOver,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
initialize: initialize
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
let ballStringMenu = [
|
||||
{
|
||||
visible: false,
|
||||
imagePathOn: "Images/menu.icon.on.1.gif",
|
||||
imagePathOff: "Images/menu.icon.off.1.gif",
|
||||
rawRadius: 8,
|
||||
targetRadius: 0,
|
||||
currentRadius: 0,
|
||||
angle: 60
|
||||
},
|
||||
let ballStringMenu = [
|
||||
{
|
||||
visible: false,
|
||||
imagePathOn: 'Images/menu.icon.on.1.gif',
|
||||
imagePathOff: 'Images/menu.icon.off.1.gif',
|
||||
rawRadius: 8,
|
||||
targetRadius: 0,
|
||||
currentRadius: 0,
|
||||
angle: 60
|
||||
}/*,
|
||||
{
|
||||
visible: false,
|
||||
imagePathOn: "Images/menu.icon.on.2.gif",
|
||||
@@ -49,308 +48,266 @@ function newProfileBall() {
|
||||
targetRadius: 0,
|
||||
currentRadius: 0,
|
||||
angle: -60
|
||||
}
|
||||
];
|
||||
} */
|
||||
]
|
||||
|
||||
return thisObject;
|
||||
return thisObject
|
||||
|
||||
function initialize(callBackFunction) {
|
||||
function initialize (callBackFunction) {
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
let menuItem = ballStringMenu[i]
|
||||
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
menuItem.iconOn = new Image()
|
||||
|
||||
let menuItem = ballStringMenu[i];
|
||||
menuItem.iconOn.onload = onImageLoad
|
||||
|
||||
menuItem.iconOn = new Image();
|
||||
function onImageLoad () {
|
||||
menuItem.iconOff = new Image()
|
||||
|
||||
menuItem.iconOn.onload = onImageLoad;
|
||||
|
||||
function onImageLoad() {
|
||||
|
||||
menuItem.iconOff = new Image();
|
||||
|
||||
menuItem.iconOff.onload = onImageLoad;
|
||||
|
||||
function onImageLoad() {
|
||||
menuItem.canDrawIcon = true;
|
||||
}
|
||||
|
||||
menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff;
|
||||
|
||||
}
|
||||
|
||||
menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn;
|
||||
|
||||
menuItem.icon = menuItem.iconOn; // The default value is ON.
|
||||
menuItem.iconOff.onload = onImageLoad
|
||||
|
||||
function onImageLoad () {
|
||||
menuItem.canDrawIcon = true
|
||||
}
|
||||
|
||||
callBackFunction();
|
||||
menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff
|
||||
}
|
||||
|
||||
menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn
|
||||
|
||||
menuItem.icon = menuItem.iconOn // The default value is ON.
|
||||
}
|
||||
|
||||
function physicsLoop() {
|
||||
callBackFunction()
|
||||
}
|
||||
|
||||
function physicsLoop () {
|
||||
// The menuItems also have a target.
|
||||
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
let menuItem = ballStringMenu[i]
|
||||
|
||||
let menuItem = ballStringMenu[i];
|
||||
|
||||
if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) {
|
||||
|
||||
if (menuItem.currentRadius < menuItem.targetRadius) {
|
||||
menuItem.currentRadius = menuItem.currentRadius + 0.5;
|
||||
} else {
|
||||
menuItem.currentRadius = menuItem.currentRadius - 0.5;
|
||||
}
|
||||
}
|
||||
if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) {
|
||||
if (menuItem.currentRadius < menuItem.targetRadius) {
|
||||
menuItem.currentRadius = menuItem.currentRadius + 0.5
|
||||
} else {
|
||||
menuItem.currentRadius = menuItem.currentRadius - 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseOver() {
|
||||
function onMouseOver () {
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
let menuItem = ballStringMenu[i]
|
||||
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
|
||||
let menuItem = ballStringMenu[i];
|
||||
|
||||
menuItem.targetRadius = menuItem.rawRadius * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseNotOver() {
|
||||
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
|
||||
let menuItem = ballStringMenu[i];
|
||||
|
||||
menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5;
|
||||
}
|
||||
menuItem.targetRadius = menuItem.rawRadius * 1.5
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseClick(pPoint, pFloatingObject) {
|
||||
function onMouseNotOver () {
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
let menuItem = ballStringMenu[i]
|
||||
|
||||
menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseClick (pPoint, pFloatingObject) {
|
||||
/* What we need to do here is to check which menu item was clicked, if any. */
|
||||
|
||||
let menuItemIndex;
|
||||
let menuItemIndex
|
||||
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
let menuItem = ballStringMenu[i]
|
||||
|
||||
let menuItem = ballStringMenu[i];
|
||||
|
||||
if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
|
||||
|
||||
let position = {
|
||||
x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
|
||||
y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
|
||||
};
|
||||
|
||||
browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2);
|
||||
|
||||
let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2));
|
||||
|
||||
if (distance < menuItem.currentRadius) {
|
||||
menuItemIndex = i;
|
||||
}
|
||||
}
|
||||
if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
|
||||
let position = {
|
||||
x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
|
||||
y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
|
||||
}
|
||||
|
||||
if (menuItemIndex !== undefined) {
|
||||
browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
|
||||
|
||||
switch (menuItemIndex) {
|
||||
|
||||
case 0: { // This menu item is to turn ON / OFF the plotting of this bot.
|
||||
|
||||
if (pFloatingObject.payload.profile.plot === true) {
|
||||
|
||||
pFloatingObject.payload.profile.plot = false;
|
||||
|
||||
let menuItem = ballStringMenu[0];
|
||||
menuItem.icon = menuItem.iconOff;
|
||||
|
||||
} else {
|
||||
|
||||
pFloatingObject.payload.profile.plot = true;
|
||||
|
||||
let menuItem = ballStringMenu[0];
|
||||
menuItem.icon = menuItem.iconOn;
|
||||
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 1: { // This menu item is to turn ON the Debug Log pannel for the bot.
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2))
|
||||
|
||||
if (distance < menuItem.currentRadius) {
|
||||
menuItemIndex = i
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawBackground(pFloatingObject) {
|
||||
if (menuItemIndex !== undefined) {
|
||||
switch (menuItemIndex) {
|
||||
|
||||
let point = {
|
||||
x: pFloatingObject.payload.profile.position.x,
|
||||
y: pFloatingObject.payload.profile.position.y
|
||||
};
|
||||
case 0: {
|
||||
// This menu item is to turn ON / OFF the plotting of this bot.
|
||||
|
||||
point = viewPort.fitIntoVisibleArea(point);
|
||||
if (pFloatingObject.payload.profile.plot === true) {
|
||||
pFloatingObject.payload.profile.plot = false
|
||||
|
||||
if (pFloatingObject.currentRadius > 1) {
|
||||
let menuItem = ballStringMenu[0]
|
||||
menuItem.icon = menuItem.iconOff
|
||||
} else {
|
||||
pFloatingObject.payload.profile.plot = true
|
||||
|
||||
let menuItem = ballStringMenu[0]
|
||||
menuItem.icon = menuItem.iconOn
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
|
||||
case 1: {
|
||||
// This menu item is to turn ON the Debug Log pannel for the bot.
|
||||
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawBackground (pFloatingObject) {
|
||||
let point = {
|
||||
x: pFloatingObject.payload.profile.position.x,
|
||||
y: pFloatingObject.payload.profile.position.y
|
||||
}
|
||||
|
||||
point = viewPort.fitIntoVisibleArea(point)
|
||||
|
||||
if (pFloatingObject.currentRadius > 1) {
|
||||
/* Target Line */
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y);
|
||||
browserCanvasContext.lineTo(point.x, point.y);
|
||||
browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)';
|
||||
browserCanvasContext.setLineDash([4, 2]);
|
||||
browserCanvasContext.lineWidth = 1;
|
||||
browserCanvasContext.stroke();
|
||||
browserCanvasContext.setLineDash([0, 0]);
|
||||
|
||||
}
|
||||
|
||||
if (pFloatingObject.currentRadius > 0.5) {
|
||||
|
||||
/* Target Spot */
|
||||
|
||||
var radius = 1;
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true);
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)';
|
||||
browserCanvasContext.fill();
|
||||
|
||||
}
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y)
|
||||
browserCanvasContext.lineTo(point.x, point.y)
|
||||
browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'
|
||||
browserCanvasContext.setLineDash([4, 2])
|
||||
browserCanvasContext.lineWidth = 1
|
||||
browserCanvasContext.stroke()
|
||||
browserCanvasContext.setLineDash([0, 0])
|
||||
}
|
||||
|
||||
function drawForeground(pFloatingObject) {
|
||||
if (pFloatingObject.currentRadius > 0.5) {
|
||||
/* Target Spot */
|
||||
|
||||
if (pFloatingObject.currentRadius > 5) {
|
||||
var radius = 1
|
||||
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true)
|
||||
browserCanvasContext.closePath()
|
||||
browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)'
|
||||
browserCanvasContext.fill()
|
||||
}
|
||||
}
|
||||
|
||||
function drawForeground (pFloatingObject) {
|
||||
if (pFloatingObject.currentRadius > 5) {
|
||||
/* Contourn */
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true);
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)';
|
||||
browserCanvasContext.lineWidth = 1;
|
||||
browserCanvasContext.stroke();
|
||||
|
||||
}
|
||||
|
||||
if (pFloatingObject.currentRadius > 0.5) {
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true)
|
||||
browserCanvasContext.closePath()
|
||||
browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'
|
||||
browserCanvasContext.lineWidth = 1
|
||||
browserCanvasContext.stroke()
|
||||
}
|
||||
|
||||
if (pFloatingObject.currentRadius > 0.5) {
|
||||
/* Main FloatingObject */
|
||||
|
||||
var alphaA;
|
||||
var alphaA
|
||||
|
||||
if (pFloatingObject.currentRadius < 3) {
|
||||
alphaA = 1;
|
||||
} else {
|
||||
alphaA = 0.75;
|
||||
}
|
||||
if (pFloatingObject.currentRadius < 3) {
|
||||
alphaA = 1
|
||||
} else {
|
||||
alphaA = 0.75
|
||||
}
|
||||
|
||||
alphaA = 0.75;
|
||||
alphaA = 0.75
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true);
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true)
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
browserCanvasContext.fillStyle = pFloatingObject.fillStyle;
|
||||
browserCanvasContext.fillStyle = pFloatingObject.fillStyle
|
||||
|
||||
browserCanvasContext.fill();
|
||||
|
||||
}
|
||||
browserCanvasContext.fill()
|
||||
}
|
||||
|
||||
/* Image */
|
||||
|
||||
if (pFloatingObject.payload.profile.imageId !== undefined) {
|
||||
|
||||
let image = pFloatingObject.payload.profile.botAvatar;
|
||||
|
||||
if (image !== null && image !== undefined) {
|
||||
|
||||
browserCanvasContext.save();
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.arc(pFloatingObject.currentPosition.x , pFloatingObject.currentPosition.y , pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true);
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.clip();
|
||||
browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize);
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true);
|
||||
browserCanvasContext.clip();
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.restore();
|
||||
}
|
||||
}
|
||||
if (pFloatingObject.payload.profile.imageId !== undefined) {
|
||||
let image = pFloatingObject.payload.profile.botAvatar
|
||||
|
||||
if (image !== null && image !== undefined) {
|
||||
browserCanvasContext.save()
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
|
||||
browserCanvasContext.closePath()
|
||||
browserCanvasContext.clip()
|
||||
browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize)
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
|
||||
browserCanvasContext.clip()
|
||||
browserCanvasContext.closePath()
|
||||
browserCanvasContext.restore()
|
||||
}
|
||||
}
|
||||
|
||||
/* StringBall Menu */
|
||||
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
for (let i = 0; i < ballStringMenu.length; i++) {
|
||||
let menuItem = ballStringMenu[i]
|
||||
|
||||
let menuItem = ballStringMenu[i];
|
||||
|
||||
if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
|
||||
|
||||
let position = {
|
||||
x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
|
||||
y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
|
||||
};
|
||||
|
||||
browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2);
|
||||
}
|
||||
if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
|
||||
let position = {
|
||||
x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
|
||||
y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
|
||||
}
|
||||
|
||||
browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
|
||||
}
|
||||
}
|
||||
|
||||
/* Label Text */
|
||||
|
||||
if (pFloatingObject.currentRadius > 6) {
|
||||
if (pFloatingObject.currentRadius > 6) {
|
||||
browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle
|
||||
|
||||
browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle;
|
||||
let labelPoint
|
||||
let fontSize = pFloatingObject.currentFontSize
|
||||
|
||||
let labelPoint;
|
||||
let fontSize = pFloatingObject.currentFontSize;
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
|
||||
let label
|
||||
|
||||
let label;
|
||||
label = pFloatingObject.payload.profile.upLabel
|
||||
|
||||
label = pFloatingObject.payload.profile.upLabel;
|
||||
|
||||
if (label !== undefined) {
|
||||
|
||||
labelPoint = {
|
||||
x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
|
||||
y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10
|
||||
};
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
|
||||
browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle;
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
|
||||
|
||||
}
|
||||
|
||||
label = pFloatingObject.payload.profile.downLabel;
|
||||
|
||||
if (label !== undefined) {
|
||||
|
||||
labelPoint = {
|
||||
x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
|
||||
y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15
|
||||
};
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
|
||||
browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle;
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
|
||||
|
||||
}
|
||||
if (label !== undefined) {
|
||||
labelPoint = {
|
||||
x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
|
||||
y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY
|
||||
browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
|
||||
label = pFloatingObject.payload.profile.downLabel
|
||||
|
||||
if (label !== undefined) {
|
||||
labelPoint = {
|
||||
x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
|
||||
y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY
|
||||
browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
-127
@@ -1,127 +0,0 @@
|
||||
function newImageButton() {
|
||||
|
||||
var thisObject = {
|
||||
container: undefined,
|
||||
draw: draw,
|
||||
status: 'neutral',
|
||||
type: undefined,
|
||||
getContainer: getContainer,
|
||||
initialize: initialize
|
||||
};
|
||||
|
||||
var container = newContainer();
|
||||
container.initialize();
|
||||
container.isDraggeable = false;
|
||||
container.isClickeable = true;
|
||||
thisObject.container = container;
|
||||
|
||||
let idNeutralImage;
|
||||
let idOnImage;
|
||||
let idOffImage;
|
||||
let idDisabledImage;
|
||||
|
||||
return thisObject;
|
||||
|
||||
function initialize(pX, pY, pWidth, pHeight, pIdNeutralImage, pIdOnImage, pIdOffImage, pIdDisabledImage) {
|
||||
|
||||
idNeutralImage = pIdNeutralImage;
|
||||
idOnImage = pIdOnImage;
|
||||
idOffImage = pIdOffImage;
|
||||
idDisabledImage = pIdDisabledImage;
|
||||
|
||||
/* Lets set the basic dimensions of this thisObject. */
|
||||
|
||||
var position = {
|
||||
x: pX,
|
||||
y: pY
|
||||
};
|
||||
|
||||
thisObject.container.frame.position = position;
|
||||
thisObject.container.frame.width = pWidth;
|
||||
thisObject.container.frame.height = pHeight;
|
||||
|
||||
/* Now we start listening to the onClick event from the mouse, so that we can allow users operate this thisObject. */
|
||||
|
||||
thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed, 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 buttonPressed(event, extraData) {
|
||||
|
||||
switch (thisObject.status) {
|
||||
|
||||
case 'neutral':
|
||||
browserCanvasContext.fillStyle = onFillStyle;
|
||||
return;
|
||||
|
||||
case 'on':
|
||||
thisObject.status = 'off';
|
||||
break;
|
||||
|
||||
case 'off':
|
||||
thisObject.status = 'on';
|
||||
break;
|
||||
|
||||
case 'disabled':
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
|
||||
drawImage();
|
||||
|
||||
}
|
||||
|
||||
function drawImage() {
|
||||
|
||||
let image;
|
||||
|
||||
let imagePoint = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
imagePoint = thisObject.container.frame.frameThisPoint(imagePoint);
|
||||
|
||||
switch (thisObject.status) {
|
||||
|
||||
case 'neutral':
|
||||
image = document.getElementById(idNeutralImage);
|
||||
break;
|
||||
|
||||
case 'on':
|
||||
image = document.getElementById(idOnImage);
|
||||
break;
|
||||
|
||||
case 'off':
|
||||
image = document.getElementById(idOffImage);
|
||||
break;
|
||||
|
||||
case 'disabled':
|
||||
image = document.getElementById(idDisabledImage);
|
||||
break;
|
||||
|
||||
}
|
||||
browserCanvasContext.drawImage(image, imagePoint.x, imagePoint.y, thisObject.container.frame.width, thisObject.container.frame.height);
|
||||
}
|
||||
}
|
||||
-140
@@ -1,140 +0,0 @@
|
||||
function newTextButton() {
|
||||
|
||||
var textButton = {
|
||||
container: undefined,
|
||||
draw: draw,
|
||||
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;
|
||||
textButton.container = container;
|
||||
|
||||
return textButton;
|
||||
|
||||
function initialize() {
|
||||
|
||||
/* Lets set the basic dimensions of this textButton. */
|
||||
|
||||
var position = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
this.container.frame.position = position;
|
||||
this.container.frame.width = 180;
|
||||
this.container.frame.height = 14;
|
||||
|
||||
/* Now we start listening to the onClick event from the mouse, so that we can allow users operate this textButton. */
|
||||
|
||||
|
||||
}
|
||||
|
||||
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 draw() {
|
||||
|
||||
drawIcon();
|
||||
|
||||
}
|
||||
|
||||
|
||||
function drawIcon() {
|
||||
|
||||
centerPoint = {
|
||||
x: 7,
|
||||
y: 7
|
||||
};
|
||||
|
||||
/* Now the transformations. */
|
||||
|
||||
centerPoint = textButton.container.frame.frameThisPoint(centerPoint);
|
||||
|
||||
/* Lets start the drawing. */
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.arc(centerPoint.x, centerPoint.y, 3, 0, 2 * Math.PI);
|
||||
browserCanvasContext.closePath();
|
||||
|
||||
let offFillStyle = 'rgba(232, 28, 28, 1)';
|
||||
let onFillStyle = 'rgba(45, 232, 28, 1)';
|
||||
let invisibleFillStyle = 'rgba(247, 244, 27, 1)';
|
||||
|
||||
switch (textButton.status) {
|
||||
|
||||
case 'on':
|
||||
browserCanvasContext.fillStyle = onFillStyle;
|
||||
break;
|
||||
|
||||
case 'invisible':
|
||||
browserCanvasContext.fillStyle = invisibleFillStyle;
|
||||
break;
|
||||
|
||||
case 'off':
|
||||
browserCanvasContext.fillStyle = offFillStyle;
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
|
||||
browserCanvasContext.fill();
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)';
|
||||
browserCanvasContext.lineWidth = 1;
|
||||
browserCanvasContext.stroke();
|
||||
|
||||
browserCanvasContext.closePath();
|
||||
|
||||
|
||||
/* print the text */
|
||||
|
||||
let labelPoint;
|
||||
let fontSize = 10;
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
|
||||
|
||||
let label = textButton.type;
|
||||
|
||||
let xOffset = 0;
|
||||
let yOffset = 0;
|
||||
|
||||
labelPoint = {
|
||||
x: 20,
|
||||
y: textButton.container.frame.height - 5
|
||||
};
|
||||
|
||||
labelPoint = textButton.container.frame.frameThisPoint(labelPoint);
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
Reference in new issue
Block a user