Simple Custom Generator

445 views
Skip to first unread message

Ikum Kandola

unread,
Dec 27, 2022, 7:58:14 PM12/27/22
to Blockly
Hi

I am trying to follow the codelab 'Build a custom generator' but instead of using the advanced playground, I would like to build a simple version without the advanced playground. 

Currently, I am having trouble with the line:

playground.addGenerator('Codelab', codelabGenerator)

as I do not have the playground object, and I do not understand where it is coming from when I look at the advanced_playground.html example.

I have followed the rest of the codelab, however, it doesn't work because the blocks are not connected to the generator code.

I also do not understand where I can find documentation around the "addGenerator" function.

I have only two files. The first one is detail.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Generating JSON</title>

  <script src="https://unpkg.com/blockly/blockly.min.js"></script>
  <script src="C:\Users\IkumWindows\Documents\Uni\QLDiss\DjangoProject\mysite\polls\static\custom_generator.js"></script>

  <!-- Include the Blockly blocks and generators -->
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
  </style>
</head>
<body>
  <p>This is a simple demo of generating code from blocks and running
  the code using eval.</p>


  <p>
    <button onclick="showCode()">Show JavaScript</button>
  </p>

  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

  <script>
    var toolbox = codelabToolbox;
   
    var demoWorkspace = Blockly.inject('blocklyDiv',
        {media: 'https://unpkg.com/blockly/media/',
         toolbox: toolbox});
         
   
    function showCode() {
      // Generate JavaScript code and display it.
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
      alert(code);
    }

  </script>

</body>
</html>

second file - custom_generator.js:

const codelabGenerator = new Blockly.Generator('JSON');

Blockly.common.defineBlocksWithJsonArray([{
    "type": "object",
    "message0": "{ %1 %2 }",
    "args0": [
        {
            "type": "input_dummy"
        },
        {
            "type": "input_statement",
            "name": "MEMBERS"
        }
    ],
    "output": null,
    "colour": 230,
},
{
    "type": "member",
    "message0": "%1 %2 %3",
    "args0": [
        {
            "type": "field_input",
            "name": "MEMBER_NAME",
            "text": ""
        },
        {
            "type": "field_label",
            "name": "COLON",
            "text": ":"
        },
        {
            "type": "input_value",
            "name": "MEMBER_VALUE"
        }
    ],
    "previousStatement": null,
    "nextStatement": null,
    "colour": 230,
    }]);

var codelabToolbox = {
    'kind': 'flyoutToolbox',
    'contents': [
        {
            'kind': 'block',
            'type': 'object'
        },
        {
            'kind': 'block',
            'type': 'member'
        },
        {
            'kind': 'block',
            'type': 'math_number'
        },
        {
            'kind': 'block',
            'type': 'text'
        },
        {
            'kind': 'block',
            'type': 'logic_boolean'
        },
        {
            'kind': 'block',
            'type': 'logic_null'
        },
        {
            'kind': 'block',
            'type': 'lists_create_with'
        },
    ]
}

codelabGenerator['object'] = function(block) {
    const statement_members = codelabGenerator.statementToCode(block, 'MEMBERS');
    const code = '{\n' + statement_members + '\n}';
    return [code, codelabGenerator.PRECEDENCE];
  };

    codelabGenerator['member'] = function(block) {
        const name = block.getFieldValue('MEMBER_NAME');
        const value = codelabGenerator.valueToCode(
            block, 'MEMBER_VALUE', codelabGenerator.PRECEDENCE);
        const code = '"' + name + '": ' + value;
        return code;
      };




Please could someone tell me how to connect my generator to my blocks and also where I can find more information about the addGenerator function and creating a custom generator.

Mark Friedman

unread,
Dec 29, 2022, 1:37:11 PM12/29/22
to blo...@googlegroups.com
Ikum,

  I am assuming that your code generation is working for the built-in blocks in your toolbox, but not your custom blocks.  The reason for that is that you have two code generators in your project.  There's the built-in JavaScript code generator in Blockly.JavaScript and the custom generator that you created in codelabGenerator. In your showCode function you are using the JavaScript code generator to generate your code (via Blockly.JavaScript.workspaceToCode), but that generator doesn't know about your custom blocks.  If you are planning to mix JavaScript with your JSON blocks, I would suggest adding your custom block generation code to the Blockly.JavaScript code generator by using:

Blockly.JavaScript['object'] = function(block) {
   ...
}

Blockly.JavaScript['member'] = function(block) {
   ...
}

There's a little more info on custom block generation in the Blockly developers guide here.  Just note that that doc is assuming that your importing the Blockly libraries via NPM, rather than via UNPKG, so it's explicitly importing the JavaScript into javascriptGenerator, rather than simply referring to Blockly.JavaScript, which is defined when you load the https://unpkg.com/blockly/blockly.min.js script.

Also, note that the addGenerator function is specific to the advanced playground, so you don't need to call it if you're not using that.

Hope this helps.

-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/1d36edf4-fc52-4682-b197-1810adf737c0n%40googlegroups.com.

Ikum Kandola

unread,
Dec 29, 2022, 3:49:07 PM12/29/22
to Blockly
Hi Mark

Thank you for your reply, your suggestions were most helpful.

I have now replaced the line:
var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);

with:
var code = codelabGenerator.workspaceToCode(demoWorkspace);

and it works!

Reply all
Reply to author
Forward
0 new messages