master
Jake 2025-10-21 09:44:06 +08:00
commit 9b80609172
3 changed files with 234 additions and 0 deletions

141
behaviourEditor.js Normal file
View File

@ -0,0 +1,141 @@
// behaviourEditor.js
// Define custom blocks
Blockly.defineBlocksWithJsonArray([
{
"type": "onStartup",
"message0": "On Startup %1",
"args0": [
{
"type": "input_statement",
"name": "DO"
}
],
"colour": 230,
"tooltip": "Triggers when the application starts.",
"helpUrl": ""
},
{
"type": "onFaceDetect",
"message0": "On Face Detect %1",
"args0": [
{
"type": "input_statement",
"name": "DO"
}
],
"colour": 230,
"tooltip": "Triggers when a face is detected.",
"helpUrl": ""
},
{
"type": "playAnimation",
"message0": "Play %1 with arg0 %2 and arg1 %3",
"args0": [
{
"type": "field_dropdown",
"name": "ANIMATION",
"options": [
["asdf.anim", "ANIMATION_1"],
["idle.anim", "ANIMATION_2"],
["walk.anim", "ANIMATION_3"]
]
},
{
"type": "input_value",
"name": "arg0", // Input for speed
"check": "Number" // Optional: Check for number type
},
{
"type": "input_value",
"name": "arg1", // Input for duration
"check": "Number" // Optional: Check for number type
}
],
"previousStatement": null, // Allow connection to previous blocks
"nextStatement": null, // Allow connection to next blocks
"colour": 160,
"tooltip": "Plays the selected animation with specified speed and duration.",
"helpUrl": ""
},
{
"type": "print",
"message0": "Print %1",
"args0": [
{
"type": "field_input",
"name": "TEXT",
"text": "Hello, World!" // Default text
}
],
"colour": 210,
"tooltip": "Prints the specified text.",
"helpUrl": ""
},
{
"type": "constant_variable",
"message0": "Builtin Output %1",
"args0": [
{
"type": "field_dropdown",
"name": "CONSTANT",
"options": [
["faceDetectX", "faceDetectX"],
["faceDetectY", "faceDetectY"],
["analogRead()", "analogRead()"],
["sine", "sine"]
]
}
],
"output": null, // This block will output a value
"colour": 230,
"tooltip": "Select one of the predefined constants.",
"helpUrl": ""
}
]);
// Generate JavaScript code for custom blocks
Blockly.JavaScript['onStartup'] = function (block) {
const code = Blockly.JavaScript.statementToCode(block, 'DO');
return `function onStartup() {\n${code}}\nonStartup();\n`;
};
Blockly.JavaScript['onFaceDetect'] = function (block) {
const code = Blockly.JavaScript.statementToCode(block, 'DO');
return `function onFaceDetect() {\n${code}}\nonFaceDetect();\n`;
};
Blockly.JavaScript['playAnimation'] = function(block) {
const animation = block.getFieldValue('ANIMATION');
const speed = Blockly.JavaScript.valueToCode(block, 'SPEED', Blockly.JavaScript.ORDER_ATOMIC) || '1'; // Default speed
const duration = Blockly.JavaScript.valueToCode(block, 'DURATION', Blockly.JavaScript.ORDER_ATOMIC) || '1000'; // Default duration
return `playAnimation("${animation}", ${speed}, ${duration});\n`;
};
// Generate code for the print block
Blockly.JavaScript['print'] = function (block) {
const text = block.getFieldValue('TEXT');
return `console.log("${text}");\n`; // Prints the text to the console
};
// Generate JavaScript code for the constant variable block
Blockly.JavaScript['constant_variable'] = function(block) {
const constant = block.getFieldValue('CONSTANT');
return constant; // Returns the selected constant
};
// Define the function that plays the animation
function playAnimation(animation) {
console.log(`Playing: ${animation}`);
}
// Example of how to log all variables (if needed)
function logAllVariables(workspace) {
const variableMap = workspace.getVariableMap();
const variables = variableMap.getAllVariables();
variables.forEach(variable => {
console.log(`Variable: ${variable.name}`);
});
}

83
index.html Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Behaviour Editor</title>
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="behaviourEditor.js" defer></script>
</head>
<body>
<h1>Behaviour Editor: Blockly</h1>
<div id="blocklyDiv" style="height: 920px; width: 1280px;"></div>
<xml id="toolbox" style="display: none">
<category name="Animation" colour="#66BB6A">
<block type="playAnimation"></block>
<block type="constant_variable"></block>
</category>
<category name="Functions" colour="#5C81A6">
<block type="onStartup"></block>
<block type="onFaceDetect"></block>
</category>
<category name="Logic" colour="#DDAA00">
<block type="controls_if"></block>
<block type="controls_if_else"></block>
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_negate"></block>
<block type="logic_boolean"></block>
</category>
<category name="Control" colour="120">
<block type="controls_for"></block>
<block type="controls_whileUntil"></block>
</category>
<category name="Math" colour="230">
<block type="math_random_int"></block>
<block type="math_random_float"></block>
<block type="math_number">
<field name="NUM">0</field>
</block>
<block type="math_arithmetic">
<value name="A">
<shadow type="math_number">
<field name="NUM">5</field>
</shadow>
</value>
<value name="B">
<shadow type="math_number">
<field name="NUM">3</field>
</shadow>
</value>
</block>
</category>
<category name="Variables" colour="330" custom="VARIABLE" />
</xml>
<button onclick="saveWorkspace()">Save Workspace</button>
<button onclick="loadWorkspace()">Load Workspace</button>
<script>
const workspace = Blockly.inject('blocklyDiv', {
toolbox: document.getElementById('toolbox')
});
function saveWorkspace() {
const state = Blockly.serialization.workspaces.save(workspace);
const jsonString = JSON.stringify(state);
localStorage.setItem('blocklyWorkspace', jsonString);
}
function loadWorkspace() {
const jsonString = localStorage.getItem('blocklyWorkspace');
if (jsonString) {
const state = JSON.parse(jsonString);
Blockly.serialization.workspaces.load(state, workspace);
} else {
console.error('No workspace found in local storage.');
}
}
</script>
</body>
</html>

10
style.css Normal file
View File

@ -0,0 +1,10 @@
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#blocklyDiv {
height: 480px;
width: 100%;
}