BlockCoding

A drag-and-drop block programming editor for robots. Built on Blockly, it compiles a block program into plain-text commands and hands them to whatever host is attached — so the editor itself stays completely independent of any robot protocol.

Originally built as the kids-programming screen of a quadruped remote-control app, extracted here as a standalone, vendor-neutral editor.

What's in it

• 71 custom blocks across 12 categories — posture, motion, tricks, speed, mode, sound, sensing, looks, operators, variables, custom blocks.
• MIT Scratch parity for the fundamentals: math and comparison operators, variables, repeat / repeat until / if-else / wait until, broadcasts, and My Blocks (define your own).
• 8 built-in guided missions with step-by-step tooltips, toolbox highlighting and automatic progress checking — the editor watches the workspace and advances when the learner drags the right block.
• Simulation mode with a small on-screen stage, so a program can be run and watched with no robot present.
• Pluggable host bridge — one method to implement to drive real hardware.

Run it

The page loads Blockly and the demo bridge as separate files, so serve it over HTTP rather than opening the file directly:

git clone https://github.com/wxy821018/blockcodig.git
cd blockcodig
python -m http.server 8765
# open http://127.0.0.1:8765/index.html

With no host attached the status bar reads bridge: demo: the built-in demo bridge interprets your program locally at 4x speed, logs every command and animates the simulation stage. Everything works offline.

How it fits together

   blocks  ──►  generated command text  ──►  host bridge  ──►  your robot
 (index.html)      (commands.json)         (bridge/*.js)      (UDP/ROS/HTTP/…)

The editor's entire output is a list of lines like:

stand_up
repeat 2
forward 2
turn_left 1.5
end_repeat
jump
lie_down

commands.json is the contract: every command, its arguments, how long a real machine needs to settle afterwards, and which commands require an "advanced mode" unlock first. Each entry has a binding field left as null — that is where you map a command onto your own protocol. No vendor opcodes are shipped in this repository; the editor never needs to know them.

Driving a real robot

Implement a single method and the editor will use it instead of the demo bridge:

window.BlockCodingHost = {
  postMessage: function (jsonString) {
    const msg = JSON.parse(jsonString);   // {action:"run", code, sim} | {action:"stop"}
    // ... interpret msg.code, talk to your robot ...
  }
};

Push progress back with window.BlockCoding.updateStatus({running, done, current_step, log, sim_log}). Full wire format, an executor checklist and a Flutter/WebView example: bridge/README.md.

Layout

Path	What
index.html	The whole editor — blocks, generators, toolbox, missions, UI
commands.json	Command contract between editor and host
bridge/demo-bridge.js	Built-in offline interpreter (browser fallback)
bridge/README.md	Host integration guide
vendor/blockly/	Blockly 10.4.3, unmodified

License

MIT for this project's own code — see LICENSE. Blockly is Apache-2.0, © Google LLC — see NOTICE.

中文说明