Blockly "degenerate" code to blocks

[Eric Miller]

I have been working on a set of contributions to Blockly that will allow it to "degenerate" code back into blocks. This should open up many new possibilities where people can  alter the generated code, then see the change in real-time in the familiar Blockly interface. This project is still very much a work in progress, but I thought I would post an update to get feedback. Of course, the problem of converting full-fledged JavaScript into Blockly is inherently unsolvable, but I think it is still extremely useful to be able to degenerate practically anything that can be generated by Blockly, especially with a catch-all uneditable block to preserve anything that can't be degenerated.

Current limitations:

• At this point, the current version only supports expressions, not statements. That means nothing with a semicolon or newline. There is nothing fundamentally harder about translating statements, I just attempted expressions first. Example inputs that work: ["1 + 7", "0 + Math.sqrt(Math.PI * Math.random())", ...]
• Order of operations works correctly, as derived from the Blockly generators automatically.
• Mutators require custom degeneration code, but should be possible to implement within the framework.
• Math operators currently require spaces anywhere Blockly would normally generate spaces ("1+7" won't work, "1 + 7" will). I haven't put in the time to fix this. Extra spaces are usually OK.
• I've only explicitly added most of the Math and Logic palettes, as well as string constants. Adding more is trivial.
• I haven't added support for Blockly statements that generate functions (ex. Math "is prime", Math "random integer"). This one will be interesting to figure out, but is certainly solvable.
• No variable support is present, yet. Adding it will have to comply with Blockly scoping restrictions, but shouldn't be too hard.
• Comments are not supported.
• The "degenerator.js" file contains a few explicit references to JavaScript. These should be moved to variables in the constructor.
• The current version operates by completely clearing the workspace and regenerating it. Eventually, it would be better to use some sort of diff-like process to preserve some kinds of formatting present in Blockly but not in the generated code. Fortunately, someone who has a lot of experience with diff-merge-patch algorithms might be able to help ;)

Check out the current version at:

http://legoaces.org/blockly/tests/playground2.html

The only changed files of importance are the three in:

http://legoaces.org/blockly/degenerators/

Let me know what you think. This approach should be very extensible to other languages because it uses the native Blockly language generators as the source of the templates for understanding the language.

[phil cleaver]

Hi Eric,

That sounds like it could be really,really useful.  It opens up all sorts of possibilities.

I've tried to test http://legoaces.org/blockly/tests/playground2.html with some of your examples, but have yet to get it to work.

If I enter 1 + 7 or "1 + 7" into the textarea and hit From Javascript, all I get is a single black block, whose XML is 

<xml xmlns="http://www.w3.org/1999/xhtml">

  <block type="undefined" id="104" x="0" y="0"></block>

</xml>  

Did I do something wrong?

Phil

[Blake]

Phil,

Make sure you don't inadvertently add a semicolon.

1 + 7 

works for me

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Eric Miller]

In some rare cases, you may need to refresh the page. Some funny artifacts are currently occurring with load order.

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/cyBuNvOcNlw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.

[phil cleaver]

Hi Eric,

That worked for me after a refreh, 

If it helps then it appears that I have to refresh the page every time to get it to work, but then it's fine.

I'd love to add a "console" to my app to easily add expressions. Is this easy to do? I think that would save a lot of clicking.  

I'm working on generating blocks from voice and I think they could work very well together.

Nice work

Phil

[Eric Miller]

The problem is in the degenerators/JavaScript.is file. The "initialize" function is intended to run after Blockly is initialized, but I got lazy and just put it on a 300ms delay. When I get around to it, I will move it into the onload function.

I'm pretty sure both comparison and logical operators should be working. String manipulation can also be added without any effort at all.

Everything you need is contained within the three JavaScript files in degenerator/   . Right now, you'll need to put in a little work to adapt it to anything but JavaScript. The source of the html page should be a pretty good example, but know that m.toBlock() returns the top generated block so you can link it to whatever blocks are already on place.