.png)
Creating Blocks​
​
Quanomous works in three layers:
1. Builder
2. QR Code
3. Robot Parser
​
If all three recognize the same command name and have the same fields, it works.
​
Flow Chart Model
​​
Blockly Block
↓
JSON { cmd: "...", data... }
↓
QR Code (gzip + base64)
↓
Quanomous Decoder
↓
Command Handler
↓
Robot Action
You always edit two places:
-
Builder (Blockly) – what the block looks like & what JSON it outputs
-
Robot (Parser) – how that JSON turns into robot code
​
Builder Side (Creating the Block)
Step 1: Define the Block (blocks_custom.js)
This controls:
-
Block text
-
Inputs
-
JSON output
Template
​
Blockly.Blocks['MY_BLOCK_NAME'] = {
init: function() {
this.appendDummyInput()
.appendField("WHAT YOUR BLOCK SAYS");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setColour("#YOUR_COLOR");
}
};
Blockly.JavaScript['MY_BLOCK_NAME'] = function(block) {
return JSON.stringify({
cmd: "YOUR_COMMAND_NAME"
});
};
​
Example: Spin Robot Block
​
Blockly.Blocks['spin_robot'] = {
init: function() {
this.appendDummyInput()
.appendField("Spin 360 degrees");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setColour("#9d4edd");
}
};
Blockly.JavaScript['spin_robot'] = function(block) {
return JSON.stringify({
cmd: "spin"
});
};
Step 2: Add the Block to the Toolbox (index.html)
​
<category name="Actions" colour="#5C68A6">
<block type="drive_to"></block>
<block type="intake_row"></block>
<block type="spin_robot"></block>
</category>
​
Refresh the page — the block now appears.
​
Adding Inputs
​
Number Input
​
.appendField(new Blockly.FieldNumber(360, 0, 720), "degrees")
Blockly.JavaScript['spin_robot'] = function(block) {
return JSON.stringify({
cmd: "spin",
degrees: Number(block.getFieldValue("degrees"))
});
};
​
Dropdown Input
​
.appendField(new Blockly.FieldDropdown([
["90°", "90"],
["180°", "180"],
["360°", "360"]
]), "degrees");
​
Builder Rules (Important)
-
Always use JSON.stringify
-
Always include "cmd"
-
Field names must match the robot parser​​
​
​