Scratch

Processor name: scratch

Danger

Scratch blocks require an understanding of the Scratch programming language and how Verto is integrated with other systems. The use of this processor requires co-ordination between authors and developers to achieve the desired functionality.

Note

The following examples assume usage of the fenced code extension, by having markdown.extensions.fenced_code in the list of extensions given to Verto.

You can include an image of Scratch blocks using Scratch Block Plugin notation using the following notation:

```scratch
when flag clicked
clear
forever
pen down
if <<mouse down?> and <touching [mouse-pointer v]?>> then
switch costume to [button v]
else
add (x position) to [list v]
end
move (foo) steps
turn ccw (9) degrees
```

to produce the following image:

../_images/scratch_blocks_example.png

The syntax is the same for default Markdown code blocks. The only difference is that Verto handles the content differently due to the scratch language set at the start.

Note

This processor also works with syntax introduced by the fenced_blocks and/or codehilite extensions.

You can test the output of your Scratch block text at scratchblocks.github.io. You can also generate Scratch block text from a published Scratch project at scratchblocks.github.io/generator/.

Warning

Verto doesn’t create the Scratch images, but saves data for another system (for example: Django) to create the images. See Accessing Scratch image data section below.

The default HTML for scratch blocks is:

<div class="scratch-inline-images">
{% for hash in images -%}
<object type="image/svg+xml" data="{% autoescape false -%}{{ "{% static '" }}scratch-blocks-{{ hash }}.svg{{ "' %}" }}{%- endautoescape %}">
</object>
{% endfor -%}
</div>

Using the following example tag:

```scratch
when flag clicked
clear
forever
pen down
if <<mouse down?> and <touching [mouse-pointer v]?>> then
switch costume to [button v]
else
add (x position) to [list v]
end
move (foo) steps
turn ccw (9) degrees
```

The resulting HTML would be:

<div class="scratch-inline-images">
<object data="{% static 'scratch-blocks-a0f8fcad796864abfacac8bda6e0719813833fd1fca348700abbd040557c1576.svg' %}" type="image/svg+xml">
</object>
</div>

Options

Options that change the output behaviour can be specified by appending them after the language separated by :. The options avaliable are:

  • split - This option turns separate Scratch blocks (which are dictated by an empty line) into separate images.
  • random - This parameter randomises the order of separate Scratch blocks (which are dictated by an empty line).

For example options can be used like:

Scratch is great for kids you can great simple code like:

```scratch:split
when flag clicked
say [Hi]

when flag clicked
say [Hi]
move (foo) steps
turn ccw (9) degrees

when flag clicked
clear
forever
pen down
if <<mouse down?> and <touching [mouse-pointer v]?>> then
switch costume to [button v]
else
add (x position) to [list v]
end
move (foo) steps
turn ccw (9) degrees
```

Or for more than one option:

Scratch is great for kids you can great simple code like:

```scratch:split:random
when flag clicked
say [Hi]

when flag clicked
say [Hi]
move (foo) steps
turn ccw (9) degrees

when flag clicked
clear
forever
pen down
if <<mouse down?> and <touching [mouse-pointer v]?>> then
switch costume to [button v]
else
add (x position) to [list v]
end
move (foo) steps
turn ccw (9) degrees
```

Accessing Scratch image data

When Verto encounters a code block with the Scratch language (see example above), it doesn’t not generate the image but saves the enclosed text and hash of the text in the required_files attribute under the key scratch_images.

The following is an example of the result of required files after the parsing two Scratch blocks, where the scratch_images key points to a set of namedtuple objects containing a hash (string) and text (string):

required_files = {
    "scratch_images": [
        ScratchImageMetaData(
          hash="a3b77ed3c3fa57e43c830e338dc39d292c7def676e0e8f7545972b7da20275da",
          text="when flag clicked\nsay [Hi]\n"
        ),
        ScratchImageMetaData(
          hash="a0f8fcad796864abfacac8bda6e0719813833fd1fca348700abbd040557c1576",
          text="when flag clicked\nclear\nforever\npen down\nif <<mouse down?> and <touching [mouse-pointer v]?>> then\nswitch costume to [button v]\nelse\nadd (x position) to [list v]\nend\nmove (foo) steps\nturn ccw (9) degrees\n"
        )
    ]
}

The processor replaces the text with an image linked to the expected location of the image.

After Verto has completed a conversion, you will need to retrieve this data from required_files and render it to an image in the expected location. The scratchblocks renderer on GitHub allows of rendering to an SVG or PNG.

Overriding HTML for Scratch

When overriding the HTML for Scratch code, the following Jinja2 placeholders are available:

  • {{ images }} - A list of hashes of the Scratch code-blocks used in the expected filename(s).

Example

For example, providing the following HTML:

<div class="scratch-inline-images">
{% for hash in images -%}
<img class="scratch-blocks" src="scratch-blocks-{{ hash }}.svg" onerror="this.src='scratch-blocks-{{ hash }}.png'"/>
{% endfor -%}
</div>

with the following tag:

```scratch
when flag clicked
say [Hi]
```

would result in:

<div class="scratch-inline-images">
<img class="scratch-blocks" onerror="this.src='scratch-blocks-a3b77ed3c3fa57e43c830e338dc39d292c7def676e0e8f7545972b7da20275da.png'" src="scratch-blocks-a3b77ed3c3fa57e43c830e338dc39d292c7def676e0e8f7545972b7da20275da.svg">
</div>