Visual Code Blocks - Guide
Create programs by connecting blocks on the canvas.
- Add Blocks: Use the "𧹠Add Block âŧ" dropdown in the toolbar. New blocks appear near the center of your view.
- Move Blocks: Click and drag a block's header.
- Connect Ports:
- Click an output port (right side of a block) then an input port (left side of another block).
- Ports must be compatible (exec to exec, data to data of compatible types).
- Execution ports are triangles (âļ), Data ports are circles (â).
- Data types: Number (blue), String (yellow-ish), Boolean (orange-ish), Any (gray).
- To cancel connecting, click the source output port again.
- Delete Blocks/Connections:
- Select a block by clicking it (not on a port or header). A selected block will have a blue outline.
- Press the Delete or Backspace key to delete the selected block and its connections.
- To delete a connection: (Currently, delete one of the connected blocks and remake connections. A dedicated connection delete feature is a TODO).
- Run Program: Click the "âļī¸ Run" button. Execution starts from the "START" block.
- Zoom & Pan: Use mouse wheel/buttons or touch gestures.
- Program Output: Some blocks (like "Set Box Text") will affect the "Program Output" area on the right.
- Execution Log: See a step-by-step log of the program's execution.
- Block Types:
- START: The program's entry point. Connect its `Exec Out` to the first action.
- Input (String, Number, Boolean): Provide constant values.
- Action (Set Box Text, Set Box Style): Perform actions on the "Program Output" box. Require `Exec In` and `Exec Out`.
- Operator (Add, Concat): Perform calculations/manipulations on data. These are evaluated when their output is needed.
- Logic (AND, OR, NOT, Comparison): Perform logical operations.
- Control (IF, WHILE): Control the flow of execution.
- IF: Takes a boolean `Condition`. Executes `True` or `False` path.
- WHILE: Takes a boolean `Condition`. Repeatedly executes `Body` as long as condition is true. Then continues via `Done`.
- OUTPUT_LOG: Prints a value to the execution log.
- Save/Load: Save your block layout and connections to a JSON file, and load them back.
