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

Advanced Topics Development
, ,
4

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

5

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.

6

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

7

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

8

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.

9

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

Uses ready-made parser and renderer made by
Tim Radvan & CO

scratchblocks-plugin
scratchblocks-plugin1091×985 47.1 KB

10

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
11

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 :wink:

12

Awesome! Thank you so much! :+1:

13

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

14

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.

15

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.

16

Can you explain how to use this?

17

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.

18

Oh, thanks!

19

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.

20

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

21

blocks.js

BlockMorph.prototype.userMenu = function () {
...
  if (shiftClicked) {
        menu.addItem(
            'script pic SVG ...',
22

Shouldn't it be in Morph rather than BlockMorph?

23

User menu items
'script pic...'
'download script'
are defined in BlockMorph.prototype.userMenu, so, at least it's not a totally wrong place :wink: Maybe there is a better one ...