Wednesday, October 30, 2013

NodeBlockly


This week I have added two new features to GoogleBlockly, first is zooming the block workspace in and out with the mouse wheel, and second is nodes. I have not forked Blockly's source code to do this; instead these changes are dynamically applied at runtime from PythonJS by changing some of Blockly's internal functions and prototypes. "NodeBlockly" is still a work in progress, and likely will be a large effort to finish off, I am accepting donations to continue this work, so please GitTip me.

"Data-flow is often a simpler way to represent certain common tasks. However we chose not to use it for two reasons. The first is that data-flow languages usually fail badly when attempting to solve tasks outside their domain. The second is that the generated code looks nothing like the visual data-flow representation, which serves as a barrier for the user graduating from the visual programming language to a text-based code editor. We feel strongly that users should not be locked in." from http://code.google.com/p/blockly/wiki/FAQHighLevel

The developers of GoogleBlockly have dismissed node and flow-graph based editing because it produces code that may not closely match its visual form, and this would make Blockly less useful for children to learn programming when reading the generated output code. This is something to consider, but I do not think Blockly should be without nodes just for that reason alone. Having the option to connect blocks via nodes can be very helpful to visually organize a program. If everything is restricted to only using click-blocks, without any node connections, quickly a program can become hard to understand because the blocks have become so nested and convoluted.

Node based programming is also important for professional use. Blockly has great potential to be integrated with game engines and other kinds of applications that need to bridge the gap between low-level scripting (JavaScript) and high level application logic managed by artists and designers. Blockly's internal API is lacking a good event system to interact with external toolkits, this is also something I am working on fixing, so that Blockly can be integrated with complex applications.

Try Node Blockly

Once you have checked out the latest PythonJS source code and installed Tornado, you also need to pull the latest: Three.js, Tween.js, and GoogleBlockly. These should be saved in your home directory. From the terminal run server.py (in PythonJS/tests) and point your web browser to: http://localhost:8080/threejs_node_blockly.html

Blocks are connected together in the normal way using the left mouse button and dragging them to the female slot. To create a node connection you do the same thing with the middle mouse button, a new node input will be created, and the original block will be connected to it and snap back to its original position. (this is just a temporary hack, later you will be able to left click to create a new node and drag it into a slot.)

No comments:

Post a Comment