Skip to content

Commit

Permalink
More updates on the interface.
Browse files Browse the repository at this point in the history
  • Loading branch information
@fronchetti
fronchetti committed Jul 20, 2023
1 parent ed88abe commit 5b6b357
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 133 deletions.
21 changes: 8 additions & 13 deletions js/blockly_setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Blockly.defineBlocksWithJsonArray([
"inputsInline": false,
"previousStatement": null,
"nextStatement": null,
"colour": 8,
"colour": 0,
"tooltip": "",
"helpUrl": "",
"extensions": ["move_block_created"]
Expand All @@ -94,7 +94,7 @@ Blockly.defineBlocksWithJsonArray([
"inputsInline": false,
"previousStatement": null,
"nextStatement": null,
"colour": 90,
"colour": 120,
"tooltip": "",
"helpUrl": "",
"extensions": []
Expand Down Expand Up @@ -146,7 +146,7 @@ const blocklyDiv = document.getElementById('blockly-workspace');
const blocklyWorkspace = Blockly.inject(blocklyDiv, {
toolbox: toolbox, zoom:
{controls: true,
startScale: 1.5,
startScale: 1.25,
maxScale: 3,
minScale: 0.3,
scaleSpeed: 1.2,
Expand All @@ -164,8 +164,8 @@ const blocklyWorkspace = Blockly.inject(blocklyDiv, {
blocklyWorkspace.addChangeListener(onBlockChange);

/* Define block colors */
Blockly.HSV_SATURATION = 0.55;
Blockly.HSV_VALUE = 0.55;
Blockly.HSV_SATURATION = 0.90;
Blockly.HSV_VALUE = 0.75;

/* Define starting block (root) */
var startingBlocks = document.getElementById("blocks");
Expand Down Expand Up @@ -240,14 +240,9 @@ function onBlockChange(event) {
var currentScene = game.scene.getScene(phaserSceneName);

if (currentScene) {
if (currentScene.showCircles) {
currentScene.drawCircles();
currentScene.drawLabels();
}

if (currentScene.showArrows) {
currentScene.drawArrows();
}
currentScene.drawCircles();
currentScene.drawLabels();
currentScene.drawArrows();
}
}
}
12 changes: 3 additions & 9 deletions js/bootstrap_setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,9 @@ function deletePosition(event) {
removeBlocksWithPosition(positionKey);

var currentScene = game.scene.getScene(phaserSceneName);

if (currentScene.showCircles) {
currentScene.drawCircles();
currentScene.drawLabels();
}

if (currentScene.showArrows) {
currentScene.drawArrows();
}
currentScene.drawCircles();
currentScene.drawLabels();
currentScene.drawArrows();

loadPositionsForRemoval();
}
Expand Down
16 changes: 8 additions & 8 deletions js/initial_setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ const phaserSceneName = "Sandbox"
In the example below, "Home" is the variable name, and "HOME_POSITION"
the language-neutral key that identifies this variable in Blockly. */
const savedVariables = new Map();
savedVariables.set("Home", "HOME");
savedVariables.set("Test", "TEST");
savedVariables.set("Test2", "TEST2");
savedVariables.set("Test3", "TEST3");
savedVariables.set("Home", "Home");
savedVariables.set("Test", "Test");
savedVariables.set("Test2", "Test2");
savedVariables.set("Test3", "Test3");

/* savedCoordinates saves the positions coordinates from the Phaser environment.
In the example below, "HOME_POSITION" is the language-neutral key from Blockly,
and [0, 0] the coordinates in Phaser. */
const savedCoordinates = new Map();
savedCoordinates.set("HOME", [1024, 1024])
savedCoordinates.set("TEST", [424, 424])
savedCoordinates.set("TEST2", [124, 124])
savedCoordinates.set("TEST3", [124, 924])
savedCoordinates.set("Home", [1024, 1024])
savedCoordinates.set("Test", [424, 424])
savedCoordinates.set("Test2", [124, 124])
savedCoordinates.set("Test3", [124, 924])

function createNewPosition(name, key, coordinates) {
if (name === undefined || key == undefined || coordinates === undefined) {
Expand Down
215 changes: 112 additions & 103 deletions js/phaser_setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ class RobotScene extends Phaser.Scene {
this.isPositioning = false;
this.showCircles = false;
this.showArrows = false;
this.circleRadius = 40;
this.circleRadius = 64;
this.positionLabels = [];
this.positionCircles = [];
}
Expand Down Expand Up @@ -139,138 +139,147 @@ class RobotScene extends Phaser.Scene {
this.executeAnimation();
}
} else {
this.drawCircles();
this.drawLabels();
this.drawArrows();
console.log('Phaser: Executed all block animations.');
}
}

drawCircles() {
/* Get ordered positions of movement blocks
attached to starting block */
this.positionValues = getBlocklyPositions();

/* Clear previous drawings */
this.positionCircles.forEach(circle => circle.destroy());

for (let i = 0; i < this.positionValues.length; i++) {
const positionCoordinates = this.positionValues[i][1];

const positionX = positionCoordinates[0];
const positionY = positionCoordinates[1];

const positionCircle = this.add.circle(positionX, positionY, this.circleRadius, 0x000000);
positionCircle.setInteractive();
this.input.setDraggable(positionCircle);
this.positionCircles.push(positionCircle)

positionCircle.on('drag', function (p, x, y) {
this.isPositioning = true;

/* Updating elements position and values */
positionCircle.x = x;
positionCircle.y = y;
this.positionLabels[i].x = x;
this.positionLabels[i].y = y - (this.circleRadius * 1.75);
this.gripper.x = positionCircle.x;
this.gripper.y = positionCircle.y;
this.positionValues[i][1][0] = x;
this.positionValues[i][1][1] = y;

this.children.bringToTop(positionCircle);
positionCircle.setFillStyle(0xff9c2b);

if (this.showArrows) {
if (this.showCircles) {
/* Get ordered positions of movement blocks
attached to starting block */
this.positionValues = getBlocklyPositions();

/* Clear previous drawings */
this.positionCircles.forEach(circle => circle.destroy());

for (let i = 0; i < this.positionValues.length; i++) {
const positionCoordinates = this.positionValues[i][1];

const positionX = positionCoordinates[0];
const positionY = positionCoordinates[1];

const positionCircle = this.add.circle(positionX, positionY, this.circleRadius, 0x000);
positionCircle.setInteractive();
this.input.setDraggable(positionCircle);
this.positionCircles.push(positionCircle)

positionCircle.on('drag', function (p, x, y) {
this.isPositioning = true;

/* Updating elements position and values */
positionCircle.x = x;
positionCircle.y = y;
this.positionLabels[i].x = x;
this.positionLabels[i].y = y - (this.circleRadius * 1.45);
this.gripper.x = positionCircle.x;
this.gripper.y = positionCircle.y;
this.positionValues[i][1][0] = x;
this.positionValues[i][1][1] = y;

this.children.bringToTop(positionCircle);
positionCircle.setFillStyle(0xff3e1c);
this.drawArrows();
}

this.drawLabels();
}, this);

positionCircle.on('dragend', function() {
this.isPositioning = false;
this.drawLabels();
}, this);

if (this.showArrows) {
positionCircle.on('dragend', function() {
this.isPositioning = false;
this.drawCircles();
this.drawArrows();
}

this.drawLabels();
this.drawCircles();
}, this);
this.drawLabels();
}, this);
}
}
}

hideCircles() {
this.positionCircles.forEach(circle => circle.destroy());
if (!this.showCircles) {
this.positionCircles.forEach(circle => circle.destroy());
}
}

drawLabels() {
/* Get ordered positions of movement blocks
attached to starting block */
this.positionValues = getBlocklyPositions();

/* Clear previous drawings */
this.positionLabels.forEach(label => label.destroy());

for (let i = 0; i < this.positionValues.length; i++) {
var positionName = this.positionValues[i][0];
const positionCoordinates = this.positionValues[i][1];

const positionX = positionCoordinates[0];
const positionY = positionCoordinates[1];

const positionLabel = this.add.text(positionX, positionY - (this.circleRadius * 1.75), String(positionName),
{ fontFamily: 'Arial', color: '#000', fontSize: '48px', fontWeight: 'bold'}).setOrigin(0.5);
this.children.bringToTop(positionLabel);
this.positionLabels.push(positionLabel);
if (this.showCircles) {
/* Get ordered positions of movement blocks
attached to starting block */
this.positionValues = getBlocklyPositions();

/* Clear previous drawings */
this.positionLabels.forEach(label => label.destroy());

for (let i = 0; i < this.positionValues.length; i++) {
var positionName = this.positionValues[i][0];
const positionCoordinates = this.positionValues[i][1];

const positionX = positionCoordinates[0];
const positionY = positionCoordinates[1];

const positionLabel = this.add.text(positionX, positionY - (this.circleRadius * 1.45), String(positionName),
{ font: 'bold 48px Arial', color: '#fff'}).setOrigin(0.5);
positionLabel.setStroke('#000', 10);
this.children.bringToTop(positionLabel);
this.positionLabels.push(positionLabel);
}
}
}

hideLabels() {
this.positionLabels.forEach(label => label.destroy());
if (!this.showCircles) {
this.positionLabels.forEach(label => label.destroy());
}
}

drawArrows() {
/* Get ordered positions of movement blocks
attached to starting block */
this.positionValues = getBlocklyPositions();
if (this.showArrows) {
/* Get ordered positions of movement blocks
attached to starting block */
this.positionValues = getBlocklyPositions();

/* Clear previous drawings */
this.directionGraphics.clear();

for (let i = 0; i < this.positionValues.length - 1; i++) {
const currentPosition = this.positionValues[i][1];
const nextPosition = this.positionValues[i + 1][1];
/* Clear previous drawings */
this.directionGraphics.clear();
for (let i = 0; i < this.positionValues.length - 1; i++) {
const currentPosition = this.positionValues[i][1];
const nextPosition = this.positionValues[i + 1][1];

var angle = Phaser.Math.Angle.Between(currentPosition[0], currentPosition[1], nextPosition[0], nextPosition[1]);
var angle = Phaser.Math.Angle.Between(currentPosition[0], currentPosition[1], nextPosition[0], nextPosition[1]);

var startPointX = currentPosition[0] + (this.circleRadius + 10) * Math.cos(angle);
var startPointY = currentPosition[1] + (this.circleRadius + 10) * Math.sin(angle);
var endPointX = nextPosition[0] - (this.circleRadius + 10) * Math.cos(angle);
var endPointY = nextPosition[1] - (this.circleRadius + 10) * Math.sin(angle);
var startPointX = currentPosition[0] + (this.circleRadius + 10) * Math.cos(angle);
var startPointY = currentPosition[1] + (this.circleRadius + 10) * Math.sin(angle);
var endPointX = nextPosition[0] - (this.circleRadius + 10) * Math.cos(angle);
var endPointY = nextPosition[1] - (this.circleRadius + 10) * Math.sin(angle);

var lineThickness = 5;

/* Line */
this.directionGraphics.lineStyle(lineThickness, 0x121212, 0.25);
this.directionGraphics.beginPath()
this.directionGraphics.moveTo(startPointX, startPointY);
this.directionGraphics.lineTo(endPointX, endPointY);
this.directionGraphics.strokePath();

/* Arrow */
var arrowSize = 50;
var endPointX = nextPosition[0] - (this.circleRadius + 5) * Math.cos(angle);
var endPointY = nextPosition[1] - (this.circleRadius + 5) * Math.sin(angle);
var pointA = new Phaser.Geom.Point(endPointX, endPointY);
var pointB = new Phaser.Geom.Point(endPointX + arrowSize * Math.cos(angle + Phaser.Math.DegToRad(150)), endPointY + arrowSize * Math.sin(angle + Phaser.Math.DegToRad(150)));
var pointC = new Phaser.Geom.Point(endPointX + arrowSize * Math.cos(angle + Phaser.Math.DegToRad(210)), endPointY + arrowSize * Math.sin(angle + Phaser.Math.DegToRad(210)));
this.directionGraphics.fillStyle(0x121212, 1);
this.directionGraphics.fillTriangle(pointA.x, pointA.y, pointB.x, pointB.y, pointC.x, pointC.y);
this.directionGraphics.closePath();
var lineThickness = 5;

/* Line */
this.directionGraphics.lineStyle(lineThickness, 0x121212, 0.25);
this.directionGraphics.beginPath()
this.directionGraphics.moveTo(startPointX, startPointY);
this.directionGraphics.lineTo(endPointX, endPointY);
this.directionGraphics.strokePath();

/* Arrow */
var arrowSize = 50;
var endPointX = nextPosition[0] - (this.circleRadius + 5) * Math.cos(angle);
var endPointY = nextPosition[1] - (this.circleRadius + 5) * Math.sin(angle);
var pointA = new Phaser.Geom.Point(endPointX, endPointY);
var pointB = new Phaser.Geom.Point(endPointX + arrowSize * Math.cos(angle + Phaser.Math.DegToRad(150)), endPointY + arrowSize * Math.sin(angle + Phaser.Math.DegToRad(150)));
var pointC = new Phaser.Geom.Point(endPointX + arrowSize * Math.cos(angle + Phaser.Math.DegToRad(210)), endPointY + arrowSize * Math.sin(angle + Phaser.Math.DegToRad(210)));
this.directionGraphics.fillStyle(0x121212, 1);
this.directionGraphics.fillTriangle(pointA.x, pointA.y, pointB.x, pointB.y, pointC.x, pointC.y);
this.directionGraphics.closePath();
}
this.children.bringToTop(this.directionGraphics);
}
}

hideArrows() {
this.directionGraphics.clear();
if (!this.showArrows) {
this.directionGraphics.clear();
}
}
}

Expand Down

0 comments on commit 5b6b357

Please sign in to comment.