Unique tool for creating personalized coding languages within Blockly

Question

Unique tool for creating personalized coding languages within Blockly

One way I am aware of is to utilize the following code snippet in Blockly for JavaScript:

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

However, I want to include support for another language like JSON. So, I attempted to do so with this code:

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

Unfortunately, when I tried to retrieve the code using:

Blockly.Json.workspaceToCode(this.workspace)

I encountered an error as workspaceToCode is not recognized as a function.

My objective is to integrate a new programming language into Blockly.

This newly added language (JSON) will not be visible on the interface but will be utilized to issue commands to robots.

In my attempt to configure JSON in Blockly, I used the following code:

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

However, I encountered an error while trying to execute:

Blockly.Json.workspaceToCode(this.workspace)

The error message stated:

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

javascript json blockly

Answer 1

Answer №1

Developing a new language generator for Blockly is quite an extensive project, and the available documentation may not provide much assistance in this regard.

Based on my own experience, one effective approach to creating a generator is to examine the existing ones in generators/. For instance, I utilized the JavaScript generator as a reference when working on a project that required generating C++ code.

It's important to mention that the Block Factory generates JSON for usage in other Blockly applications. However, upon inspecting the code, it appears that there is no specific generator defined for it.

The error message you're encountering could be due to the fact that Blockly.Json lacks an init function. This is a feature typically found in existing generator files, such as in 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 should resemble:

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

The generator file contains additional functions, and referring to the existing code while customizing it to suit your requirements can facilitate your progress.

Answer 2

Developing a new language generator for Blockly is quite an extensive project, and the available documentation may not provide much assistance in this regard.

Based on my own experience, one effective approach to creating a generator is to examine the existing ones in generators/. For instance, I utilized the JavaScript generator as a reference when working on a project that required generating C++ code.

It's important to mention that the Block Factory generates JSON for usage in other Blockly applications. However, upon inspecting the code, it appears that there is no specific generator defined for it.

The error message you're encountering could be due to the fact that Blockly.Json lacks an init function. This is a feature typically found in existing generator files, such as in 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 should resemble:

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

The generator file contains additional functions, and referring to the existing code while customizing it to suit your requirements can facilitate your progress.

Answer 3

Answer №2

Below is the simplified example that I have created:

I made a custom block called print:

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

Next, I set up the Blockly editor with this new block:

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

After that, I defined the functionality of the block.

In this scenario, we are converting strings to emojis like :-) becoming 🙂. I establish a new language and specify what the print block should accomplish:

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)';
};

Lastly, I monitor changes in the editor to convert blocks into emojis:

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

Complete Example in Action

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>

Answer 4

Below is the simplified example that I have created:

I made a custom block called print:

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

Next, I set up the Blockly editor with this new block:

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

After that, I defined the functionality of the block.

In this scenario, we are converting strings to emojis like :-) becoming 🙂. I establish a new language and specify what the print block should accomplish:

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)';
};

Lastly, I monitor changes in the editor to convert blocks into emojis:

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

Complete Example in Action

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>

Unique tool for creating personalized coding languages within Blockly

Answer №1

Answer №2

Complete Example in Action

Similar questions

Displaying and hiding the Angular <object> element

Is it possible to switch states in Angular UI Router without altering the URL?

Creating a Dynamic Form in Angular 4 with Multiple Components to Easily Submit Data

How can I pass command line variables into an npm script?

Output the name of the file while executing the ant process

Encountering an issue with an Uncaught SyntaxError: Unexpected identifier

There seems to be a problem with the bundle.js file caused by Uglify

Is a single script tag sufficient for each AngularJS Controller?

Getting files from CDN using NuxtJS content module - a beginner's guide

Is there a way for a component to render independently of App.vue?

Troubleshooting problem with Angular Materials' md-datepicker not displaying correctly in wide browser windows

The revalidation feature in Next.js' getStaticProps function does not seem to be

Adjust the JSON array dimensions using JQ for a neat and organized outcome

Using AND and OR operators, regular expressions, and the length of a value

Struggling with the Nivo slider not loading properly?

Chromium based browsers are displaying varying values when using canvas.getimagedata()

difficulty encountered while sending data to the API

What is the best method for extracting data from JSON and converting it into the SUPER data type

The feature to disable open gesture hiding in Navigation Drawer on React Native seems to be malfunctioning

Deleting a JSON element with NODEJS