first
commit
9b80609172
|
|
@ -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}`);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue