Generating images of Blockly programs (and hello from CodeBug!)

[Thomas Preston]

Hello!

I'm working with a small team on a project called CodeBug which is intended on getting young people interested in physical computing, wearables, IoT etc. We've built a small bug-shaped electronic device and a companion website which relies heavily on Blockly. Users drag and drop Blockly blocks to assemble simple programs which they can then download onto their bugs. You can have a go here if you like!

We want to make our 'explore' view a bit more interesting and we thought we could visually represent different projects by displaying thumbnail images of the blocks for that project.

Is it possible to generate an image of the blocks on a workspace and save them to a file somehow? It looks like Blockly draws blocks with SVG, so is it possible to spit out this SVG file instead of drawing it to the canvas? I'm thinking something like:

Blockly.getWorkspaceSVG() // spits out SVG of workspace

Alternatively, for each project, we could have a new read-only zoomed-out instance of Blockly and render a sort of mini project (eek!).

Also, any advice/ideas on using Blockly with CodeBug would be great.

[Blake]

It looks like Shruti figured out how to get the SVG of the workspace (maybe a bit of jquery magic) and was working on rendering it to an image. Maybe just getting the SVG would be good enough for your application.

https://groups.google.com/forum/#!topic/blockly/SWdQ7zvVO00

Blake

--
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.

[Austin Bart]

I'm not entirely clear, but will Shruti's solution include the relevant CSS? I remember my hack needed to have the CSS injected (which I hardcoded at the time, I was in a terrible rush): https://groups.google.com/forum/#!searchin/blockly/image/blockly/yOW5cQCZSf0/pBwKF25H8doJ

[Rachel Fenichel]

Would this work for you?

https://developers.google.com/blockly/custom-blocks/language#3_live_block_images

"Documentation for blocks should include images of the blocks it is referring to. Taking screenshots is easy. But if there are 50 such images, and the application is translated into 50 languages, suddenly one is maintaining 2,500 static images. Then the colour scheme changes, and 2,500 images need updating -- again.

To extract ourselves from this maintenance nightmare, Blockly Games replaced all screenshots with instances of Blockly running in readonly mode. The result looks identical to a picture, but is guaranteed to be up to date. Readonly mode has made internationalization possible.

Recommendation: If you support more than one language, use readonly mode."

[Erik Pasternak]

If you're trying to display lots of thumbnails on a screen that probably won't scale for you. The SVG is available in the webpage (if you use Chrome to inspect the page you can find the tags for it). As others have said you need to pull out the CSS separately, but you could just have a copy somewhere since it's the same CSS you're using in your app.

Another note, I found a small bug in your emulator. If you wait for a button press then do something if button b is pressed and reach the end of the program the next time you run it B is pressed will still evaluate to true, even if you press A instead. Screenshot of the test code attached.

[Neil Fraser]

On 4 December 2015 at 06:43, Thomas Preston <thomas.ma...@gmail.com> wrote:

Is it possible to generate an image of the blocks on a workspace and save them to a file somehow?

The other comments are doing a great job of addressing this.  I don't think I've got anything to add.

 

Also, any advice/ideas on using Blockly with CodeBug would be great.

Really impressive, well done.  Some comments:
* Suggest using A and B (rather than a and b) for input names in dropdowns since that's what's printed on the bug.
* The mutator on the start block should probably have four checkboxes, rather than four stacked sub-blocks.  The stack implies that order and duplicates are both being meaningful.  I'll fix the mutator to hide the toolbox if it is empty.
* Check out the new shadow blocks.  I think they'd really help: https://developers.google.com/blockly/installation/toolbox#block_groups

Also, what's the relationship (if any) to the BBC micro bug?  Looks like their original prototype.  Maybe I'm mixed up.

--

Neil Fraser
https://neil.fraser.name

[Neil Fraser]

On 4 December 2015 at 19:50, Neil Fraser <ro...@neil.fraser.name> wrote:

* The mutator on the start block should probably have four checkboxes, rather than four stacked sub-blocks.  The stack implies that order and duplicates are both being meaningful.  I'll fix the mutator to hide the toolbox if it is empty.

Mutators without flyouts are now possible.  I checked it into the '2016' branch (not 'master'), so if you want it you can cherry-pick this change, or wait till 2016 when it lands in 'master', or live dangerously on the '2016' branch.  Your call.  :)

[Neil Fraser]

My colleague Sudhir just brought me a CodeBug from the UK, so I've been playing with it.  Very nice!

One issue is that a delay for a negative number of milliseconds appears to crash the CodeBug.  The simulator does not have this issue.

Also, the ability to have mutators without flyouts is now on the master branch.  So that mutator on the start block can be simplified to a single block with five checkboxen.

[Thomas Preston]

Hello!

Sorry for the enormous delay in getting back to you about this - we’ve been extremely busy over the Christmas period delivering CodeBug, preparing for Bett (where we met Sudhir) and putting CodeBugs on hats for the Raspberry Pi 3 launch!

Thanks to all for your feedback, it’s really useful and we are in the process of rolling out some changes in the next release.

> Suggest using A and B (rather than a and b) for input names in dropdowns since that's what's printed on the bug.

This makes sense, we’ve fixed this in the latest version of the website.

> One issue is that a delay for a negative number of milliseconds appears to crash the CodeBug.  The simulator does not have this issue.

I don’t think the CodeBug actually crashes -- I think the timeout interval actually rolls over and so it becomes a massive delay. This still is potentially confusing so we’ve dealt with it by making the simulator/bug consistent and not delay at all for negatives. 

> The mutator on the start block should probably have four checkboxes, rather than four stacked sub-blocks.  The stack implies that order and duplicates are both being meaningful.  I'll fix the mutator to hide the toolbox if it is empty.

> Also, the ability to have mutators without flyouts is now on the master branch.  So that mutator on the start block can be simplified to a single block with five checkboxen.

We were waiting until the 2016 changes were in Blockly’s main branch. We’re in the process of merging these into our custom branch as we speak. With this, we’ll fix the mutators so that they are checkboxes instead of flyouts.

> Check out the new shadow blocks.  I think they'd really help: https://developers.google.com/blockly/installation/toolbox#block_groups

We’ve considered shadow blocks but a small number of teachers have found them confusing because they don’t realise the significance of the shadow blocks. We think they’re a great feature for developers using blockly but we’re not sure children will “get” why some blocks are transparent. Have you had feedback from students about whether the shadow blocks help or not? 

We’ve got some ideas on how we can get the concept across to new users to realise they’re “templating” sample code.

> Also, what's the relationship (if any) to the BBC micro bug?  Looks like their original prototype.  Maybe I'm mixed up.

We’d shown CodeBug to the BBC and run some workshops at some of their events. Initially, we weren’t aware they were demonstrating it to their potential partners as the BBC micro bug! They then manufactured their blue bug (which we felt looked pretty similar!) and used our software for some of the pilots, before the micro:bit came out last March; so you’d be forgiven for spotting similarities.

[visual coder]

Noticed the codebug project and very much interested in the simulator portion.We also trying to integrate blockly with raspberry pi simulator using tkinter.We dont know tkinter is the best option for doing the simulation part.Better suggestions are appreciated and expecting your advice..