From 5b6b3577482c950ecdf148567e7c57de54cec618 Mon Sep 17 00:00:00 2001 From: Felipe Fronchetti Date: Thu, 20 Jul 2023 11:32:30 -0400 Subject: [PATCH] More updates on the interface. --- js/blockly_setup.js | 21 ++--- js/bootstrap_setup.js | 12 +-- js/initial_setup.js | 16 ++-- js/phaser_setup.js | 215 ++++++++++++++++++++++-------------------- 4 files changed, 131 insertions(+), 133 deletions(-) diff --git a/js/blockly_setup.js b/js/blockly_setup.js index b237ca2..bdea4d1 100644 --- a/js/blockly_setup.js +++ b/js/blockly_setup.js @@ -70,7 +70,7 @@ Blockly.defineBlocksWithJsonArray([ "inputsInline": false, "previousStatement": null, "nextStatement": null, - "colour": 8, + "colour": 0, "tooltip": "", "helpUrl": "", "extensions": ["move_block_created"] @@ -94,7 +94,7 @@ Blockly.defineBlocksWithJsonArray([ "inputsInline": false, "previousStatement": null, "nextStatement": null, - "colour": 90, + "colour": 120, "tooltip": "", "helpUrl": "", "extensions": [] @@ -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, @@ -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"); @@ -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(); } } } \ No newline at end of file diff --git a/js/bootstrap_setup.js b/js/bootstrap_setup.js index 8bef67a..6f32134 100644 --- a/js/bootstrap_setup.js +++ b/js/bootstrap_setup.js @@ -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(); } diff --git a/js/initial_setup.js b/js/initial_setup.js index cb35957..6e588d1 100644 --- a/js/initial_setup.js +++ b/js/initial_setup.js @@ -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) { diff --git a/js/phaser_setup.js b/js/phaser_setup.js index e507440..ae1c0b9 100644 --- a/js/phaser_setup.js +++ b/js/phaser_setup.js @@ -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 = []; } @@ -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(); + } } }