代码之家 › 专栏 › 技术社区 › ridermansb

将自定义语言生成器块化

blockly json javascript

6

ridermansb · 技术社区 · 7 年前

我知道我可以用

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

我试过。。

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

当我试图恢复时,它失败了

Blockly.Json.workspaceToCode(this.workspace)

workspaceToCode 不是函数。

我需要在Blockly中添加一种新语言

我不会显示这种新语言(JSON),它只是用来向机器人发送指令。

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

但是错误发生在

Blockly.Json.workspaceToCode(this.workspace)

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

2 回复 | 直到 6 年前

1

8

Alex Dawson 7 年前

为Blockly创建一个新的语言生成器是一项相当大的任务,考虑到这一点,文档似乎在创建一个方面没有提供太多帮助。

根据我的经验,构建生成器的最佳方法是查看 generators/ ,我使用了 JavaScript 生成器作为我的一个项目的模板,我想在其中生成C++代码。

值得注意的是 Block Factory code 因此,没有为其定义实际的生成器。

我认为你犯的错误是因为阻塞。Json没有init函数。这是在现有生成器文件中定义的内容,例如,来自JavaScript生成器的内容:

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

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

生成器文件还包含其他函数,但是查看现有代码并根据需要对其进行调整应该会对您有所帮助。

2

0

customcommander 3 年前

下面是我提出的一个最简单可行的例子:

我定义了一个小自定义块 print

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

然后我需要定义块将生成什么。

:-) 变成 ð 我定义了一种新的语言,以及 打印 块应执行以下操作:

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

最后,我听取了编辑器中的更改,以将块翻译为表情符号:

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

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>