Blockly Lua: Custom Block Not Generating Code – Error with Lua Generator
Pascal A.
Hello everyone,
I am working on a project using Blockly to generate Lua code, and I want to create a minimal custom block. My goal is to define a block (named example_minimal) that, when used in the Blockly workspace, generates simple Lua code (in this case, a call to print('Exemple')).
I installed Blockly via npm using the following command:
npm install blockly --save
I created a minimal HTML file where I inject Blockly and define my custom block along with its Lua code generator. Here are the essential parts of my code:
Blockly.Blocks['example_minimal'] = {
init: function() {
this.appendDummyInput()
.appendField("Exemple minimal");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(160);
this.setTooltip("Un bloc minimal d'exemple.");
this.setHelpUrl("");
}
};
// Générateur Lua pour le bloc "example_minimal"
Blockly.Lua['example_minimal'] = function(block) {
var code = "print('Exemple')\n";
return code;
};
However, when I try to generate Lua code from the workspace (using Blockly.Lua.workspaceToCode(workspace)), I get the following error:
Uncaught Error: Lua generator does not know how to generate code for block type "example_minimal".
Does anyone have an idea on how to solve this error?
Any help or suggestions would be greatly appreciated :)
Pascal
PS: I am sharing my complete index.html file:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Démo Blockly Minimal</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#blocklyDiv {
width: 100%;
height: 70vh;
}
</style>
</head>
<body>
<h1>Démo Blockly Minimal</h1>
<!-- Espace de travail Blockly -->
<div id="blocklyDiv"></div>
<!-- Toolbox contenant uniquement notre bloc minimal -->
<xml id="toolbox" style="display: none">
<block type="example_minimal"></block>
</xml>
<!-- Bouton pour générer le code Lua -->
<button id="generateCodeBtn">Générer le code Lua</button>
<!-- Zone d'affichage du code généré -->
<pre id="codeOutput" style="border: 1px solid #ccc; padding: 10px;"></pre>
<!-- Chargement de Blockly depuis node_modules -->
<script src="node_modules/blockly/blockly_compressed.js"></script>
<script src="node_modules/blockly/blocks_compressed.js"></script>
<script src="node_modules/blockly/lua_compressed.js"></script>
<script src="node_modules/blockly/msg/fr.js"></script>
<!-- Définition minimale du bloc personnalisé et de son générateur -->
<script>
// Définition du bloc minimal "example_minimal"
Blockly.Blocks['example_minimal'] = {
init: function() {
this.appendDummyInput()
.appendField("Exemple minimal");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(160);
this.setTooltip("Un bloc minimal d'exemple.");
this.setHelpUrl("");
}
};
// Générateur Lua pour le bloc "example_minimal"
Blockly.Lua['example_minimal'] = function(block) {
var code = "print('Exemple')\n";
return code;
};
</script>
<!-- Initialisation de Blockly et génération du code -->
<script>
// Injection de l'espace de travail avec la toolbox définie
var workspace = Blockly.inject('blocklyDiv', {
toolbox: document.getElementById('toolbox')
});
// Génération du code Lua lors du clic sur le bouton
document.getElementById('generateCodeBtn').addEventListener('click', function() {
var code = Blockly.Lua.workspaceToCode(workspace);
document.getElementById('codeOutput').textContent = code;
});
</script>
</body>
</html>
epas...@google.com
Pascal A.
Thank you, thank you, thank you