Rendering a block as static SVG for documentation purposes

[Adam Platti]

Hello,

I am creating some documentation for the blocks in our application, and I would like to be able to just render the SVG for the block into a static block of HTML that also contains information about how the block should be used.

I am able to get a BlockSVG object by calling Scratch.workspace.newBlock(type).    How can I then make the BlockSVG object create the SVG markup I need to insert the block into my documentation?   I can not tell if I need to create a separate workspace for the documentation block to render into.  

Any pointers would be appreciated!  Thanks you!

[Chris Johnson]

I do something like this to create a workspace that fits snugly around a single block:

var workspace = Blockly.inject(blocksEditor, {
  comments: false,
  toolbox: false,
  trashcan: false,
  readOnly: true,
  scrollbars: false,
  zoom: false
});

// Add your block.
// ...

// Fit the container exactly around the blocks.
var metrics = workspace.getMetrics();
blocksEditor.style.height = metrics.contentHeight + 'px';
blocksEditor.style.width = metrics.contentWidth + 'px';
Blockly.svgResize(workspace);

- Chris

[Rachel Fenichel]

Chris: That's a nice trick.  I like it.  Very clean.

Adam: Instructions for getting the SVG below, but consider using live images if your program is used in multiple languages.

To get the SVG element at the root of the block, render the block in a workspace and call myBlock.getSvgRoot().  You'll get an SVG Element, which should be a <g> (group).  You'll need to embed it in an <svg> tag to get it onto your web page.

Cheers,

Rachel

[Cristian Spiescu]

Hi!

After some searching I've landed here. I got a similar request. I'd like to embed a block into plain HTML. I read the short post about "live images", and also thoroughly browsed the source code of "blockly.games". However I didn't find pointers on how to generate the SVG for a specific block. Any hints would be greatly appreciated!

Thanks a lot in advance,

Cristian

[Mark Friedman]

Another approach is the one that App Inventor supports and that Evan Patton demonstrated at the last Blockly summit.  They generate images which can be put in documentation but the images can also be dragged into a Blockly workspace and the corresponding blocks will be created in the workspace!  After the summit Mark Gibson mentioned working on this (in this post), but I don't know if that got anywhere.

-Mark

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/cd23603f-7d43-4726-a25b-6b2364e27d47%40googlegroups.com.

[Rachel Fenichel]

We have screenshot downloading on the playground now (right-click on the workspace background to find it in the context menu).  I don't think it works on all browsers yet.  Here's the code.

The screenshot we download is a PNG.  Downloading the SVG is a bit tricky because it relies on all of the CSS on the page.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.