simplest possible json block example

1,693 views
Skip to first unread message

Jim N

unread,
Apr 25, 2017, 10:16:34 PM4/25/17
to Blockly
this fails to produce a custom block.  hwo do i create a block with json (and I have hundreds of generated blocks in json to add )

the documentation available and help in email to date yeilds an patchwork of guessed outcomes but i haven't seen the simplest possible example program so that I may generate blocks from json and test them  

here's what i have so far.  this give me  an empty toolbox.

i originally attempted the react-blockly project but that json format is not the same as what works in the worskpace demos. 

any pointers to concie sample code would be greatly appreciated, thanks.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Blockly Demo: Resizable Blockly (Part 2)</title>
</head>
<body>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

<xml id="toolbox" style="display: none">
    <block type="abuffer"></block>
    <!--<block type="controls_whileUntil"></block>-->
</xml>


<script>

    var workspace = Blockly.inject('blocklyDiv',
        {toolbox: document.getElementById('toolbox')});
var ff= [
    {
        "colour": 15,
        "inputsInline": true,
        "tooltip": "Buffer audio frames, and make them accessible to the filterchain.",
        "helpUrl": "https:\/\/ffmpeg.org\/ffmpeg-filters.html#abuffer",
        "previousStatement": "SourceSink",
        "nextStatement": "Audio",
        "message0": "abuffer=channel_layout=%1",
        "type": "abuffer",
        "args0": [
            {
                "name": "channel_layout",
                "check": "String",
                "text": "",
                "type": "field_input"
            },
            {
                "type": "input_dummy"
            }
        ]
    }]  ;

    Blockly.defineBlocksWithJsonArray(ff);
workspace.updateToolbox()
</script>


</body>

Victor Ng

unread,
Apr 25, 2017, 10:42:34 PM4/25/17
to Blockly
Hi Jim,

You're almost there. There are just a few things wrong here:
1) The JavaScript includes files from a domain you don't own. This is a no-no. Instead, clone the Blockly repo and reference the Blockly files locally:
eg.
<script src="blockly_uncompressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="msg/js/en.js"></script>

2) The defined block is declared after the workspace is initialized. This doesn't work because the workspace is then looking for a block that hasn't been defined yet. Defining the block before creating the workspace will fix this.
3) The block definition specifies an extra argument in the "args0" array. Removing the "input_dummy" entry will fix this. (We recommend that you use Blockly Developer Tools to create custom blocks, to save you from writing block definitions by hand.)

Assuming you clone the repo and save this HTML file in the root directory of the repo, your code should look like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Blockly Demo: Resizable Blockly (Part 2)</title>
    <script src="blockly_uncompressed.js"></script>
    <script src="blocks_compressed.js"></script>
    <script src="msg/js/en.js"></script>
</head>
<body>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

<xml id="toolbox" style="display: none">
    <block type="abuffer"></block>
    <!--<block type="controls_whileUntil"></block>-->
</xml>

<script>

    var ff= [
    {
        "colour": 15,
        "inputsInline": true,
        "tooltip": "Buffer audio frames, and make them accessible to the filterchain.",
        "helpUrl": "https:\/\/ffmpeg.org\/ffmpeg-filters.html#abuffer",
        "previousStatement": "SourceSink",
        "nextStatement": "Audio",
        "message0": "abuffer=channel_layout=%1",
        "type": "abuffer",
        "args0": [
            {
                "name": "channel_layout",
                "check": "String",
                "text": "",
                "type": "field_input"
            }
        ]
    }]  ;

    Blockly.defineBlocksWithJsonArray(ff);

    var workspace = Blockly.inject('blocklyDiv',
        {toolbox: document.getElementById('toolbox')});
workspace.updateToolbox()
</script>

</body>
</html>

Jim N

unread,
Apr 25, 2017, 11:10:12 PM4/25/17
to Blockly
thank you.  blockly developer tools were used once to generate the templates which were filled in by the code generator.  args0 and message0 were sufficient to generate working ffmpeg syntax without a new language generator, dummy text was used to make some of them fit the width of a screen iirc.   

i dont yet understand the relationship between the DOM and the json.  

can the xml nodes be eliminated somehow since json is a sufficiently rich declaration of objects?

Jim N

unread,
Apr 26, 2017, 12:56:31 AM4/26/17
to Blockly
Victor:

regarding the code you posted without the appspot domain:

firefox throws up 

"Error: Closure not installed."

This is copied from the github repo into the local dir and run as file: link. 

Victor Ng

unread,
Apr 26, 2017, 3:58:51 AM4/26/17
to Blockly
JSON is simply to declare block types.

XML is needed to declare a "toolbox", which allows you to categorize blocks into groups (eg. Sound, Loops, etc.).


Hope this helps.

Jim N

unread,
Apr 26, 2017, 7:00:25 AM4/26/17
to Blockly
I have published, what is I hope the topic -- simplest possible json block example.

https://github.com/jnorthrup/ffblockly

image

i hope the api's stay a stationary target for a long time now, thanks for a great toolkit!

 
Reply all
Reply to author
Forward
0 new messages