CODEWITHSUNDEEP
javascriptjsonblockly
ridermansb
ridermansb

Reputation: 11069

Custom language generator to Blockly

I know that I can use 

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

But how can I add another language support like JSON? I tried ..

Blockly.Json['my_code'] = function() {  ... }

It fails when I try to recover 

Blockly.Json.workspaceToCode(this.workspace)

workspaceToCode is not a function.

I need to add a new language to Blockly

I will not display this new language (JSON), it will just be used to send instructions to the robots.

I try to 

Blockly.Json = new Blockly.Generator('Json');
Blockly.Json['my_code'] = function() {  ... }

But an error occurs in 

Blockly.Json.workspaceToCode(this.workspace)

Error ..

Uncaught TypeError: this.init is not a function
    at js.ou3v.module.exports.Blockly.Generator.workspaceToCode

Upvotes: 6

Views: 4488

Answers (2)

customcommander
customcommander

Reputation: 18961

Here's the minimal viable example I came up with:

I have defined a little custom block print:

Blockly.defineBlocksWithJsonArray([
  {
    type: 'print',
    message0: 'print %1',
    args0: [
      { type: 'field_input', name: 'EMOJI_CODE' }
    ]
  }
]);

Then I initialise the Blockly editor with this new block:

const ws = Blockly.inject('ide', {
  toolbox: {
    kind: 'flyoutToolbox',
    contents: [
      { kind: 'block', type: 'print' }
    ]
  }
});

Then I need to define what the block will generate.

In this example we convert strings to emojis e.g. :-) becomes 🙂. I define a new language and what the print block should do:

const emojiLang = new Blockly.Generator('EmojiLang');

emojiLang['print'] = function (block) {
  const code = block.getFieldValue('EMOJI_CODE');
  if (!code) return 'waiting…';
  if (code == ':-)') return '🙂';
  if (code == ':-(') return '🙁';
  if (code == ':-/') return '😕';
  return '(unknown)';
};

Finally I listen for changes in the editor to translate blocks into emoji:

ws.addChangeListener(function () {
  document.getElementById('out').innerHTML =
    emojiLang.workspaceToCode(ws);
});

Full Working Example

const emojiLang = new Blockly.Generator('EmojiLang');

emojiLang['print'] = function (block) {
  const code = block.getFieldValue('EMOJI_CODE');
  if (!code) return 'waiting…';
  if (code == ':-)') return '🙂';
  if (code == ':-(') return '🙁';
  if (code == ':-/') return '😕';
  return '(unknown)';
};

Blockly.defineBlocksWithJsonArray([
  {
    type: 'print',
    message0: 'print %1',
    args0: [
      { type: 'field_input', name: 'EMOJI_CODE' }
    ]
  }
]);

const ws = Blockly.inject('ide', {
  toolbox: {
    kind: 'flyoutToolbox',
    contents: [
      { kind: 'block', type: 'print' }
    ]
  }
});

ws.addChangeListener(function () {
  document.getElementById('out').innerHTML =
    emojiLang.workspaceToCode(ws);
});
<script src="https://unpkg.com/blockly/blockly.min.js"></script>

Emoji: <span id="out"></span>
<div id="ide" style="height:200px;width:400px;"></div>

Upvotes: 0

Alex Dawson
Alex Dawson

Reputation: 96

Creating a new language generator for Blockly is a fairly large undertaking, and with that in mind the documentation doesn't seem to offer much in terms of help with creating one.

From my experience the best way to build a generator is to take a look at the existing ones in generators/, I have used the JavaScript generator as a template for a project of mine where I wanted to generate C++ code.

It's also worth noting that the Block Factory generates JSON for use in other Blockly applications, however when I took a look at the code for that there isn't an actual generator defined for it.

I think the error you're getting is caused because Blockly.Json doesn't have an init function. This is something defined in the existing generator files, for example, from the JavaScript generator:

/**
* Initialise the database of variable names.
* @param {!Blockly.Workspace} workspace Workspace to generate code from.
*/
Blockly.JavaScript.init = function(workspace) {
  ....
};

With this in mind, your function would look like:

/**
* Initialise the database of variable names.
* @param {!Blockly.Workspace} workspace Workspace to generate code from.
*/
Blockly.Json.init = function(workspace) {
 .....
};

There are other functions that the generator file contains, but taking a look at the existing code and adapting it for your needs should help you along the way.

Upvotes: 8

Related Questions