route
Next
- To be continued
Historical review
Babylon.js section
- Vue realizes graphical building block programming (I) -- Construction of basic scenario of Babylon.js
- Vue realizes graphical building block programming (II) -- loading the model of Babylon.js into the scene
- Vue realizes graphical building block programming (III) -- Babylon.js click drag move model
- Vue realizes graphical building block programming (IV) -- Babylon.js realizes collision effect
- Vue realizes graphical building block programming (V) -- Babylon.js user defined startup interface
- Vue realizes graphical building block programming (VI) -- Babylon.js camera control and camera animation
- Vue realizes graphical building block programming (VII) -- implementation of babylonjs GUI button
- Vue realizes graphical building block programming (8) -- put the 3d interface into the drag window
Blockly section
preface
Some time ago, I wanted to do a case of web-based graphical building block programming (similar to children's programming). I surfed the Internet circle after circle, and finally the technology selection was good. Then I knocked the code and finally came out a prototype.
TIPS: the case design mainly refers to iRobot Coding, which is only used for learning purposes and can be infringed or deleted.
Final effect
This paper realizes the effect
- Blockly custom block
Complete code
- Blockly custom block
<template>
<div id="blockly">
<!-- work area -->
<div id="blocklyDiv" ref="blocklyDiv" style="height: 500px; width: 800px;"></div>
<button style="position: fixed;left: 50px;top: 10px;" @click="block2code">Generate code</button>
<!-- Code display area -->
<div style="background-color: lightgrey;width: 800px;text-align: left">
<pre v-html="code?code:'Please click the generate code button'"></pre>
</div>
<button style="position: fixed;left: 150px;top: 10px;" @click="runCode">Execute code</button>
</div>
</template>
<script>
import Blockly from 'blockly'
import BlocklyJS from 'blockly/javascript';
import './customBlock'
export default {
name: "blocklyClass1",
data() {
return {
code:'',
options: {
horizontalLayout: true,//Toolbox level
toolboxPosition: "end",//The toolbox is at the bottom
toolbox: {
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "while_program_start",
},
{
"kind": "block",
"type": "move",
},
{
"kind": "block",
"type": "turn",
},
{
"kind": "block",
"type": "arc"
},
{
"kind": "block",
"type": "draw"
},
{
"kind": "block",
"type": "pencilcolor"
},
{
"kind": "block",
"type": "controls_repeat_ext"
},
{
"kind": "block",
"type": "controls_whileUntil"
},
{
"kind": "block",
"type": "controls_for"
},
{
"kind": "block",
"type": "controls_if"
},
{
"kind": "block",
"type": "logic_compare"
},
{
"kind": "block",
"type": "logic_operation"
},
{
"kind": "block",
"type": "logic_negate"
},
{
"kind": "block",
"type": "logic_boolean"
},
{
"kind": "sep",
"gap": "32"
},
{
"kind": "block",
"blockxml": "<block type='math_number'><field name='NUM'>10</field></block>"
},
{
"kind": "block",
"type": "math_arithmetic"
},
{
"kind": "block",
"type": "math_single"
},
{
"kind": "block",
"type": "text"
},
{
"kind": "block",
"type": "text_length"
},
{
"kind": "block",
"type": "text_print"
},
{
"kind": "block",
"type": "variables_get"
},
{
"kind": "block",
"type": "variables_set"
},
]
}
}
}
},
mounted() {
Blockly.inject(this.$refs.blocklyDiv, this.options);
},
methods:{
/**
* block Code block to code
*/
block2code(){
this.code = BlocklyJS.workspaceToCode(this.$refs.blocklyDiv.workspace)
},
/**
* Execute generated code
*/
runCode(){
if(!this.code){alert('Please click generate code first');return}
eval(this.code)
},
},
}
</script>
<style scoped>
#blockly {
position: absolute;
left: 50px;
top: 50px;
bottom: 0;
width: calc(100vw - 50px);
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
}
</style>
- Encapsulated custom block method - customBlock.js
import * as Blockly from 'blockly/core'
import * as hans from 'blockly/msg/zh-hans'
Blockly.setLocale(hans);//Sinicization
/**
* Custom component registration
*/
Blockly.defineBlocksWithJsonArray(
[
//event
{
"type": "while_program_start",
"message0": "When the program is running %1 %2",
"args0": [
{
"type": "input_dummy"
},
{
"type": "input_statement",
"name": "while_content"
}
],
"previousStatement": null,
"nextStatement": null,
"colour": "#609FD6",
"strokeColour": "#4088C8",
"tooltip": "123",
"helpUrl": "1"
},
//instructions
{
"type": "move",
"message0": "move %1 CM",
"args0": [
{
"type": "field_input",
"name": "move_distance",
"text": "50"
}
],
"previousStatement": null,
"nextStatement": null,
"colour": "#F7D233",
"strokeColour": "#CCAD2B",
"tooltip": "",
"helpUrl": ""
},
{
"type": "turn",
"message0": "towards %1 %2",
"args0": [
{
"type": "field_dropdown",
"name": "dirction",
"options": [
[
"Turn left",
"0"
],
[
"Turn right",
"1"
]
]
},
{
"type": "field_angle",
"name": "degree",
"angle": 90
}
],
"previousStatement": null,
"nextStatement": null,
"colour": "#F7D233",
"strokeColour": "#CCAD2B",
"tooltip": "",
"helpUrl": ""
},
{
"type": "arc",
"message0": "Arc %1 %2 ，radius %3 CM",
"args0": [
{
"type": "field_dropdown",
"name": "dirction",
"options": [
[
"towards the left",
"0"
],
[
"towards the right",
"1"
]
]
},
{
"type": "field_angle",
"name": "degree",
"angle": 90
},
{
"type": "field_number",
"name": "radius",
"value": 50,
"min": 1,
"max": 100
}
],
"previousStatement": null,
"nextStatement": null,
"colour": "#F7D233",
"strokeColour": "#CCAD2B",
"tooltip": "",
"helpUrl": ""
},
{
"type": "draw",
"message0": "set up %1",
"args0": [
{
"type": "field_dropdown",
"name": "pencilState",
"options": [
[
{
"src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFIGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjEtMDgtMjNUMTE6Mzk6NTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTA4LTIzVDExOjUxOjAxKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA4LTIzVDExOjUxOjAxKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmVkZGRkMGNlLTU4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",
"width": 50,
"height": 50,
"alt": "pencil down"
},
"1"
],
[
{
"src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFIGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjEtMDgtMjNUMTE6NDA6MTErMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTA4LTIzVDExOjUyOjA2KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA4LTIzVDExOjUyOjA2KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU3Y2UzN2ViLTQ0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",
"width": 50,
"height": 50,
"alt": "pencil up"
},
"0"
]
]
}
],
"previousStatement": null,
"nextStatement": null,
"colour": "#81C679",
"tooltip": "",
"helpUrl": ""
},
{
"type": "pencilcolor",
"message0": "Set pen color: Red %1 green %2 blue %3",
"args0": [
{
"type": "field_number",
"name": "red",
"value": 100,
"min": 0,
"max": 255
},
{
"type": "field_number",
"name": "green",
"value": 100,
"min": 0,
"max": 255
},
{
"type": "field_number",
"name": "blue",
"value": 100,
"min": 0,
"max": 255
}
],
"previousStatement": null,
"nextStatement": null,
"colour": "#81C679",
"tooltip": "",
"helpUrl": ""
}
]
);
/**
* Custom component generation code
* @param block
* @returns {string}
*/
Blockly.JavaScript['while_program_start'] = function (block) {
block
var while_content = Blockly.JavaScript.statementToCode(block, 'while_content');
var code =
'robot.init();\n'
+ while_content +
'robot.stop();\n';
return code;
};
Blockly.JavaScript['move'] = function (block) {
var text_move_distance = block.getFieldValue('move_distance');
var code = 'robot.move(' + text_move_distance + ');\n';
return code;
};
Blockly.JavaScript['turn'] = function (block) {
var dropdown_dirction = block.getFieldValue('dirction');
var angle_degree = block.getFieldValue('degree');
var code = 'robot.turn(' + dropdown_dirction + ', ' + angle_degree + ');\n';
return code;
};
Blockly.JavaScript['arc'] = function (block) {
var dropdown_dirction = block.getFieldValue('dirction');
var angle_degree = block.getFieldValue('degree');
var radius = block.getFieldValue('radius');
var code = 'robot.arc(' + dropdown_dirction + ', ' + angle_degree + ',' + radius + ');\n';
return code;
};
Blockly.JavaScript['draw'] = function (block) {
var dropdown_pencilstate = block.getFieldValue('pencilState');
var code = 'robot.drawable(' + dropdown_pencilstate + ');\n';
return code;
};
Blockly.JavaScript['pencilcolor'] = function (block) {
var number_red = block.getFieldValue('red') / 255.0;
var number_green = block.getFieldValue('green') / 255.0;
var number_blue = block.getFieldValue('blue') / 255.0;
var code = 'await robot.pencilcolor(' + number_red + ',' + number_green + ',' + number_blue + ');\n';
return code;
};
Code decomposition
The user-defined block is mainly divided into three parts:
1. Define block behavior
2. Registration block
3. Define block generation code
4. Introduction block
0. Pre knowledge of code block
0.1 Sinicization
import * as hans from 'blockly/msg/zh-hans' Blockly.setLocale(hans);//Sinicization
0.2 preset block
-
Blockly already has a lot of preset code blocks
-
Logical block (logic_compare, logic_operation, logic_negate, logic_boolean)
-
Loop control block (controls_repeat_ext, controls_while until, controls_if)
-
Math module (math_number, math_arithmetic, math_single)
-
Text module (text, text_length, text_print)
-
Variable block (variables_get, variables_set)
0.3 meaning of different style blocks
0.3.1 connection mode
- Up and down connection
Take javascript as an example. In an event loop, code blocks will be executed sequentially (excluding asynchronous code blocks), and code blocks are connected up and down
let loop = 10//The upper connection is empty and the lower connection is print
print('hello world')//The upper connection is an assignment statement and the lower connection is a for loop code block
for(let i = 0; i < 10; i++){...}//The upper connection is print and the lower connection is a while loop code block
while(loop){...}//The upper connection is a for loop code block, and the lower connection is empty
- Left connection
The left connection can be understood as an output
The output of any value uses the left connection mode, such as (digital module outputs digital, text module outputs text, logic module outputs true or false)
0.3.2 input mode
Input method, that is, the parameters passed in by the function
The input connection mode is different, and there is no difference in daily use
Input the types that can be input now, such as the external type input of if and when modules, which limits the type to only logical modules
-
inline
-
External connection
0.3.2 input type
The types of input modules are divided into value input and block input
-
Value input (number, text, logic)
-
Block input (code block)
0.4 building blocks
- Many code blocks preset by Blockly are basically in line with various use scenarios of daily programming, and its better feature is that it can customize code blocks and generate code blocks through code blocks
Official custom code block link: Custom code block builder
For the eating method of tools, please refer to the article of the boss: blockly building custom blocks and their tools
-
In the case in this paper, the movement of the trolley is controlled, and the actions of the trolley are executed in turn. In fact, the most commonly used code block is the code block connected up and down, which contains one or more inline value inputs:
-
The corresponding structure is as follows:
-
There is also the function of trolley start, which uses the code block connected up and down, which contains the external block input:
-
The corresponding structure is as follows. Empty input is only to fill in text so that it can be displayed on a separate line (better looking):
1. Custom block
- Of course, it is best to be familiar with the generation rules of Block Definition, but the code block construction tool provided by the official provides visual preview, definition and configuration, and block generated code, which greatly facilitates our development.
- So the process of customizing blocks becomes very simple
1. Drag various tool blocks provided by the toolbox to the editing area to build custom blocks according to your own demand area.
2. Check whether the user-defined block achieves the expected effect in real time through the preview area
3. After the expected effect is achieved, the JSON configuration information in the configuration area will be defined, and the user-defined block will be registered in the project using the method of block.defineblockswithjsonarray
4. If you need to generate JavaScript code, select JavaScript in the generate code area, and then copy the code to the project
5. Finally, the code block is introduced into the toolbox toolbox
1.1 define block behavior
- Defining block behavior refers to editing block rules in the editing area mentioned above, or students familiar with Block Definition write JSON formatted text through the rules of Block Definition to form the shape of the block (its shape basically determines the behavior and function)
1.2 registration block
- Use the JSON configuration information in the definition configuration area to register custom blocks in the project using the method of block.defineblockswithjsonarray
/**
* Custom component registration
*/
Blockly.defineBlocksWithJsonArray(
[
//When a program runs a code block
{
"type": "while_program_start",
"message0": "When the program is running %1 %2",
"args0": [
{
"type": "input_dummy"
},
{
"type": "input_statement",
"name": "while_content"
}
],
"previousStatement": null,
"nextStatement": null,
"colour": "#609FD6",
"strokeColour": "#4088C8",
"tooltip": "123",
"helpUrl": "1"
},
//Radian move code block
{
"type": "arc",
"message0": "Arc %1 %2 ，radius %3 CM",
"args0": [
{
"type": "field_dropdown",
"name": "dirction",
"options": [
[
"towards the left",
"0"
],
[
"towards the right",
"1"
]
]
},
{
"type": "field_angle",
"name": "degree",
"angle": 90
},
{
"type": "field_number",
"name": "radius",
"value": 50,
"min": 1,
"max": 100
}
],
"previousStatement": null,
"nextStatement": null,
"colour": "#F7D233",
"strokeColour": "#CCAD2B",
"tooltip": "",
"helpUrl": ""
}
]);
1.2 definition block generation code
- Select JavaScript in the code generation area, and then copy the code to the project. The code has written the variable acquisition method, and the return value is the generated code. What we need to write is the content of the return value.
- For controlling car objects, the author uses robot objects uniformly, and then invokes various methods in the object, such as the code in the following code is robot.arc("direction", "arc angle", "arc radius").
/**
* Radian motion custom block
* @param block
* @returns {string}
*/
Blockly.JavaScript['arc'] = function(block) {
var dropdown_dirction = block.getFieldValue('dirction');
var angle_degree = block.getFieldValue('degree');
var radius = block.getFieldValue('radius');
// TODO: Assemble JavaScript into code variable.
var code = 'robot.arc(' + dropdown_dirction + ', ' + angle_degree + ',' + radius + ');\n';
return code;
};
- The following code controls the program life cycle. The spliced code is
robot.init(); ...(Code block for controlling trolley movement) robot.stop();
/**
*Program startup custom block
* @param block
* @returns {string}
*/
Blockly.JavaScript['while_program_start'] = function (block) {
block
var while_content = Blockly.JavaScript.statementToCode(block, 'while_content');
var code = 'robot.init();\n' +
while_content +
'robot.stop();\n';
return code;
};
1.3 lead in block
- Introducing custom blocks into the toolbox
data() {
options: {
toolbox: {
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "while_program_start",
},
{
"kind": "block",
"type": "arc"
},
...
]
}
}
},
mounted() {
//Injection options
Blockly.inject(this.$refs.blocklyDiv, this.options);
},
Follow up plan
Blockly
- blockly used by third-party components
- Packaging of trolley control method
- Access the JS interpreter and run the block block step
- ... (write what you think)
Open source project GitHub link
https://github.com/Wenbile/Child-Programming-Web