# Help With Developing a Discourse Plugin for modified scratchblocks 'snap-blocks'

Hi,
I started to work on modding scratchblocks and create 'snap-blocks'. But I need block SVGs for that. Could someone provide me or point me somewhere where I can find them? Thank you.

I'd assume they'd be somewhere in https://github.com/jmoenig/Snap, but I can't find them.

I have searched there. There are not any .SVG files.

Hmm. I think @bh will know. Maybe they are generated by morphic.js? @jens might also.

Just to be clear about this, it's Jens who wrote both morphic.js and Snap!. I hang out with you guys while Jens does the work. :~)

And yes, they are generated in Morphic; I don't think there are SVGs involved.

I see. This would need a major redesign, I think.

Not really. I can probably find a js canvas to svg generator.

I do not know if I need that. I am thinking of another way, using Morphic. But you are welcome to help me and to try making a plugin yourself.

Maybe You find it useful - there is a proof of concept of such module.
You can install this as a component or just copy "head_tag.html" content as a custom header.
https://dardoro.github.io/discourse-scratchblocks.zip
Component source code

Here's some problems

• No green flag
• We want it to be snapblocks not scratch 2 scratchblocks
• I don't think custom c-shape reporters work

when @greenFlag clicked
turn left [10] degrees
custom c-shape {
...
} :: control

ScratchBlocks syntax

there is a proof of concept ...
Maybe You find it useful ...

or not

Awesome! Thank you so much!

You found the exact same thing I found a few days ago when reading the scratchblocks README! See https://github.com/scratchblocks/scratchblocks#html.

I think BH referrenced this code as desired implementation in some of the "feature requests" threads. The only problem was to find right "plumbing" to attach it to Discourse. Right now "scratchblocks" supports Snap! elements such as rings.
As for Discourse, it will be nice to have drop down editing support.
There is also question about syntax. Snap! can export blocks as XML but there is no real clippboard support for blocks, isn't it? Maybe some codification support will help.

https://space-elephant.github.io/Snap/snap.html now has snap with svg export functions built in. Given a morph x, run saveMorph(x) to get an svg of the morph. Run saveMorphOutline(x) instead if you only want the outline. saveString is a function I made because I kept forgetting the saveAs syntax. The example exports a receiveGo block to receiveGo.svg.

Can you explain how to use this?

You open the developer console (with C-K) and then you type things. Example: (very similar to example())

var block = new CommandBlockMorph();
block.setSelector('doFor');
saveString(saveMorph(block), 'reportSum.svg');

var block = new ReporterBlockMorph();
block.setSelector('doSetVar');
block.setSpec('variable name');
saveString(saveMorph(block), 'variable.svg');


You can also turn on dev mode and then find a way to run code on a morph and use that instead of block.

Oh, thanks!

This is a brilliant Snap! mod! I can imagine I'll use it for illustrations for the manual or the help screens. Could you improve the UI by adding "svg..." to the dev mode context menu for morphs? And "outline svg..." too I guess.

I don't know how to edit the dev mode menu, but that is a good idea that I will add when I can.