终于把scratch3.0生成代码的部分搞定

最新推荐文章于 2024-06-06 23:44:08 发布

按键伤人啊

最新推荐文章于 2024-06-06 23:44:08 发布

阅读量8.3k

点赞数 13

分类专栏：前端 scratch 文章标签： scratch 生成代码前端 react redux

本文链接：https://blog.csdn.net/naisi2422553065/article/details/107905660

版权

前端同时被 2 个专栏收录

7 篇文章 2 订阅

订阅专栏

scratch

1 篇文章 1 订阅

订阅专栏

终于把scratch3.0生成代码的部分搞定

前言

在整个scratch3.0的二次开发中真的收获满满. 刚开始上手的时候进入了各大群或者拼命的去找资源就是为了完成 scratch3.0 与公司硬件的结合. 不过找了那么多资源似乎并没有能解决我的需求(要么是要钱,要么是随便零散讲下思路). 其实我挺感谢他们能讲讲思路的这样我综合起来通过研究源码终于搞定了这个项目. 项目并没有像其他公司植入后台管理(scratch-www)什么的. 我负责的很简单(其实很难) 就是对接公司内部的硬件. 但是别小看这些东西. 需要用到的知识点还是蛮多的. 对于一个对硬件一窍不通的也对硬件有了全新的认识. 项目分为两个部分: 一个是在线运行(体验最好) 一个是脱机运行(代码生成烧录). 接下来来分享下代码生成这一部分的经验.

思路

其实思路挺简单的, 现在很多博客或者资料都有说到. scratch3.0这个项目积木的模块是是基于 scratch-blocks这个子项目的,那么我们就要去研究scratch-blocks这个项目. 经过了解.它是基于google的blockly的其中一个分支来做二次开发的. 而blockly原生是支持生成代码这个功能的. 但是scratch-blocks却把这个功能去掉了(尴尬). 那怎么办? 其实很简单去掉了捡回来就可以了.

方法一: 进到 scratch-blocks的github仓库(https://github.com/LLK/scratch-blocks) 查看历史, 你会发现官方去掉了 generators(代码生成器的部分), 你把他加回来. 编译就可以了.方法一有个弊端就是. 你虽然加回来了. 但是怎么生成. 你会懵掉的

方法二(推荐): 通过研究 blockly (https://github.com/google/blockly) 源码来再改scratch-blocks. 这个方法虽然效率有点低,但是这样可以让你更好的理解这个过程. 把源码 down下来结合官方文档会很快的上手(https://developers.google.com/blockly/guides/configure/web/code-generators) 甚至你可以直接在源码的 test 文件里面看到如何生成代码简单演示. 然后其实scratch-blocks 并没有把生成代码的接口去掉只是去掉了生成具体代码的生成器, 也就是 blockly里面的 generators这个文件的东西然后就是改了积木块的名字所以我们要做的就是恢复他然后编译.

具体我们要做的:

假如我们要生成的 arduino&python 代码,接下来我以arduino为例

1. 我们需要下载scratch-blocks项目源码与 blockly项目源码

2. 根据 blockly的目录结构在scratch-blocks 新建回 gennerators目录并按照 blockly里的gennerators里的 python 为例新建arduino的代码生成器

例子: 新建 arduino.js

'use strict';
// 前面的按照 blockly的方式创建就行了
goog.provide('Blockly.Arduino');

goog.require('Blockly.Generator');

Blockly.Arduino = new Blockly.Generator('Arduino');

Blockly.Arduino.ORDER_ATOMIC = 0; // 0 "" ...
Blockly.Arduino.ORDER_MEMBER = 1; // . []
Blockly.Arduino.ORDER_FUNCTION_CALL = 2; // ()
Blockly.Arduino.ORDER_INCREMENT = 3; // ++
Blockly.Arduino.ORDER_DECREMENT = 3; // --
Blockly.Arduino.ORDER_BITWISE_NOT = 4.1; // ~
Blockly.Arduino.ORDER_UNARY_PLUS = 4.2; // +
Blockly.Arduino.ORDER_UNARY_NEGATION = 4.3; // -
Blockly.Arduino.ORDER_LOGICAL_NOT = 4.4; // !
Blockly.Arduino.ORDER_SIZEOF = 4.5; // sizeof
Blockly.Arduino.ORDER_NEW = 4.6; // new
Blockly.Arduino.ORDER_DELETE = 4.7; // delete
Blockly.Arduino.ORDER_DIVISION = 5.1; // /
Blockly.Arduino.ORDER_MULTIPLICATION = 5.2; // *
Blockly.Arduino.ORDER_MODULUS = 5.3; // %
Blockly.Arduino.ORDER_SUBTRACTION = 6.1; // -
Blockly.Arduino.ORDER_ADDITION = 6.2; // +
Blockly.Arduino.ORDER_BITWISE_SHIFT = 7; // << >> >>>
Blockly.Arduino.ORDER_RELATIONAL = 8; // < <= > >=
Blockly.Arduino.ORDER_EQUALITY = 9; // == != === !==
Blockly.Arduino.ORDER_BITWISE_AND = 10; // &
Blockly.Arduino.ORDER_BITWISE_XOR = 11; // ^
Blockly.Arduino.ORDER_BITWISE_OR = 12; // |
Blockly.Arduino.ORDER_LOGICAL_AND = 13; // &&
Blockly.Arduino.ORDER_LOGICAL_OR = 14; // ||
Blockly.Arduino.ORDER_CONDITIONAL = 15; // ?:
Blockly.Arduino.ORDER_ASSIGNMENT = 16; // = += -= *= /= %= <<= >>= ...
Blockly.Arduino.ORDER_COMMA = 17; // ,
Blockly.Arduino.ORDER_NONE = 99; // (...)

Blockly.Arduino.ORDER_OVERRIDES = [
  
  [Blockly.Arduino.ORDER_FUNCTION_CALL, Blockly.Arduino.ORDER_MEMBER],
  
  [Blockly.Arduino.ORDER_FUNCTION_CALL, Blockly.Arduino.ORDER_FUNCTION_CALL],
  
  [Blockly.Arduino.ORDER_MEMBER, Blockly.Arduino.ORDER_MEMBER],
  
  [Blockly.Arduino.ORDER_MEMBER, Blockly.Arduino.ORDER_FUNCTION_CALL],
  
  [Blockly.Arduino.ORDER_LOGICAL_NOT, Blockly.Arduino.ORDER_LOGICAL_NOT],
  
  [Blockly.Arduino.ORDER_MULTIPLICATION, Blockly.Arduino.ORDER_MULTIPLICATION],
  
  [Blockly.Arduino.ORDER_ADDITION, Blockly.Arduino.ORDER_ADDITION],
  
  [Blockly.Arduino.ORDER_LOGICAL_AND, Blockly.Arduino.ORDER_LOGICAL_AND],
  
  [Blockly.Arduino.ORDER_LOGICAL_OR, Blockly.Arduino.ORDER_LOGICAL_OR]
];

Blockly.Arduino.init = function(workspace) {
  Blockly.Arduino.definitions_ = Object.create(null);
  Blockly.Arduino.variables_ = Object.create(null);
  Blockly.Arduino.functions_ = Object.create(null);
  Blockly.Arduino.setups_ = Object.create(null);
};

Blockly.Arduino.finish = function(code) {
  var imports = [];
  var definitions = [];
  for (var name in Blockly.Arduino.definitions_) {
    var def = Blockly.Arduino.definitions_[name];
    if (def.match(/^#include/)) {
      imports.push(def);
    } else {
      definitions.push(def);
    }
  }

  var variables = [];
  for (var name in Blockly.Arduino.variables_) {
    variables.push(Blockly.Arduino.variables_[name]);
  }

  var functions = [];
  for (var name in Blockly.Arduino.functions_) {
    functions.push(Blockly.Arduino.functions_[name]);
  }

  var setups = [];
  for (var name in Blockly.Arduino.setups_) {
    setups.push(Blockly.Arduino.setups_[name]);
  }

  delete Blockly.Arduino.definitions_;
  delete Blockly.Arduino.variables_;
  delete Blockly.Arduino.functions_;
  delete Blockly.Arduino.setups_;

  var allCodes =
    imports.join('\n') +
    '\n\n' +
    definitions.join('\n') +
    '\n' +
    variables.join('\n') +
    '\n' +
    functions.join('\n') +
    '\n' +
    'void setup() {\n' +
    setups.join('\n') +
    '\n}\n\n' +
    'void loop() {\n' +
    code +
    '\n}\n\n';

  return allCodes.replace(/\n\n+/g, '\n\n').replace(/\n*$/, '\n\n\n');
};

Blockly.Arduino.scrubNakedValue = function(line) {
  return line + ';\n';
};

Blockly.Arduino.quote_ = function(string) {
  // Can't use goog.string.quote since % must also be escaped.
  string = string.replace(/\\/g, '\\\\').replace(/\n/g, '\\\n');

  // Follow the CPython behaviour of repr() for a non-byte string.
  var quote = "'";
  if (string.indexOf("'") !== -1) {
    if (string.indexOf('"') === -1) {
      quote = '"';
    } else {
      string = string.replace(/'/g, "\\'");
    }
  }
  return quote + string + quote;
};

Blockly.Arduino.scrub_ = function(block, code) {
  var commentCode = '';
  if (!block.outputConnection || !block.outputConnection.targetConnection) {
    var comment = block.getCommentText();
    comment = Blockly.utils.wrap(comment, Blockly.Arduino.COMMENT_WRAP - 3);
    if (comment) {
      if (block.getProcedureDef) {
        commentCode += '/**\n' + Blockly.Arduino.prefixLines(comment + '\n', ' * ') + ' */\n';
      } else {
        commentCode += Blockly.Arduino.prefixLines(comment + '\n', '// ');
      }
    }
    for (var i = 0; i < block.inputList.length; i++) {
      if (block.inputList[i].type == Blockly.INPUT_VALUE) {
        var childBlock = block.inputList[i].connection.targetBlock();
        if (childBlock) {
          var comment = Blockly.Arduino.allNestedComments(childBlock);
          if (comment) {
            commentCode += Blockly.Arduino.prefixLines(comment, '// ');
          }
        }
      }
    }
  }
  var nextBlock = block.nextConnection && block.nextConnection.targetBlock();
  var nextCode = Blockly.Arduino.blockToCode(nextBlock);
  return commentCode + code + nextCode;
};

Blockly.Arduino.base_setup = function () {
  var branch = Blockly.Arduino.statementToCode(this, 'DO');
  branch = branch.replace(/(^\s*)|(\s*$)/g, "");//去除两端空格
  if (branch) {
    Blockly.Arduino.setups_['setup_setup'] = branch;
  }
  return '';
};

// 如果 那么
Blockly.Arduino["control_if"] = function () {
  
  var n = 0;
  var argument = Blockly.Arduino.valueToCode(this, 'IF' + n,
    Blockly.Arduino.ORDER_NONE) || 'false';
  
  var branch = Blockly.Arduino.statementToCode(this, 'SUBSTACK');
  console.log("statementToCode", Blockly.Arduino.statementToCode);
  console.log(branch);

  var code = 'if (' + argument + ') {\n' + branch + '\n}';
  
  for (n = 1; n <= this.elseifCount_; n++) {
    argument = Blockly.Arduino.valueToCode(this, 'IF' + n,
      Blockly.Arduino.ORDER_NONE) || 'false';
    branch = Blockly.Arduino.statementToCode(this, 'DO' + n);
    code += ' else if (' + argument + ') {\n' + branch + '}';
  }
  if (this.elseCount_) {
    branch = Blockly.Arduino.statementToCode(this, 'ELSE');
    code += ' else {\n' + branch + '\n}';
  }
  return code + '\n';
};

// 重复循环
Blockly.Arduino["control_forever"] = function () {
 
  var logic = Blockly.Arduino.valueToCode(this, 'logic',
    Blockly.Arduino.ORDER_NONE) || 'false';

  var branch = Blockly.Arduino.statementToCode(this, 'SUBSTACK');
  var code = '';
  code += 'while(!(' + logic + ')) {\n';
  code += branch + '\n';
  code += '}\n';
  return code;
};

Blockly.Arduino.controls_switch_case = function () {
  var n = 0;
  var argument = Blockly.Arduino.valueToCode(this, 'IF' + n,
    Blockly.Arduino.ORDER_NONE) || 'NULL';
  var branch = '';
  var code = 'switch (' + argument + ') {\n';
  for (n = 1; n <= this.elseifCount_; n++) {
    argument = Blockly.Arduino.valueToCode(this, 'IF' + n,
      Blockly.Arduino.ORDER_NONE) || 'NULL';
    branch = Blockly.Arduino.statementToCode(this, 'DO' + n);
    code += ' case ' + argument + ': \n' + branch + '  break;\n';
  }
  if (this.elseCount_) {
    branch = Blockly.Arduino.statementToCode(this, 'ELSE');
    code += ' default:\n' + branch + '  break;\n';
  }
  code += '}';
  return code + '\n';
};

里面包含了初始化优先级以及条件块循环块的的定义. 可以自行研究可以结合 blockly里的生成 python的生成器来改成你想要生成的代码类型

3. 修改根目录的 build.py 文件

// 在这个方法
 def run(self):
    self.gen_core(True)
    self.gen_core(False)
    self.gen_blocks("horizontal")
    self.gen_blocks("vertical")
    self.gen_blocks("common")
     // 新增
     self.gen_generator("arduino")
     self.gen_generator("python")

然后我们就可以 npm run prepublish 就可以编译了.

听说在 win的机器上编译会出错. 我的是在mac上操作的没有遇到什么问题. 不过看了官方库好像解决了这个问题. 不行的话可以私信我或者找一些博客有写到的.

如果不想编译就想看到效果 , 那么参考 blockly项目下的 tests/playground.html 我们把里面的生成代码方法搬到 scratch-blocks项目下的 tests/vertical_playground.html 然后直接在浏览器上看效果. 然后里面涉及到几个方法待会在介绍.

如下

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  <title>Vertical Playground</title>

  <script src="../blockly_uncompressed_vertical.js"></script>
  <script src="../msg/messages.js"></script>
  <script src="../msg/scratch_msgs.js"></script>
  <script src="../blocks_vertical/vertical_extensions.js"></script>
  <script src="../blocks_common/math.js"></script>
  <script src="../blocks_common/matrix.js"></script>
  <script src="../blocks_common/note.js"></script>
  <script src="../blocks_common/text.js"></script>
  <script src="../blocks_common/colour.js"></script>
  <script src="../blocks_vertical/control.js"></script>
  <script src="../blocks_vertical/event.js"></script>
  <script src="../blocks_vertical/motion.js"></script>
  <script src="../blocks_vertical/looks.js"></script>
  <script src="../blocks_vertical/procedures.js"></script>
  <script src="../blocks_vertical/operators.js"></script>
  <script src="../blocks_vertical/sound.js"></script>
  <script src="../blocks_vertical/sensing.js"></script>
  <script src="../blocks_vertical/data.js"></script>
  <script src="../blocks_vertical/extensions.js"></script>
  <script src="../blocks_vertical/default_toolbox.js"></script>
  <script src="../blocks_vertical/more.js"></script>
  <script src="../blocks_vertical/more_toolbox.js"></script>
// 这两个是自定义了 自己的积木块 你没有定义可以去掉
  <script src="../blocks_vertical/uno.js"></script>
  <script src="../blocks_vertical/uno_toolbox.js"></script>

  // 这里引入的是 刚开始新建的 arduino.js文件和恢复的python.js文件
  <script src="../generators/python.js"></script>
  <script src="../generators/python/more.js"></script>
  <script src="../generators/arduino.js"></script>
  <script src="../generators/python/logic.js"></script>
  <script src="../generators/Aduino/control.js"></script>

  <script>
    'use strict';

    var workspace = null;

    function start() {
      var soundsEnabled = null;
      if (sessionStorage) {
        // Restore sounds state.
        soundsEnabled = sessionStorage.getItem('soundsEnabled');
        if (soundsEnabled === null) {
          soundsEnabled = true;
        } else {
          soundsEnabled = (soundsEnabled === 'true');
        }
      } else {
        soundsEnabled = true;
      }
      setSoundsEnabled(soundsEnabled);

      // Setup blocks
      // Parse the URL arguments.
      var match = location.search.match(/dir=([^&]+)/);
      var rtl = match && match[1] == 'rtl';
      document.forms.options.elements.dir.selectedIndex = Number(rtl);
      var toolbox = getToolboxElement();
      document.forms.options.elements.toolbox.selectedIndex =
        toolbox ? 1 : 0;

      match = location.search.match(/side=([^&]+)/);

      var side = match ? match[1] : 'start';

      document.forms.options.elements.side.value = side;

      match = location.search.match(/locale=([^&]+)/);
      var locale = match ? match[1] : 'zh-cn';
      Blockly.ScratchMsgs.setLocale(locale);
      document.forms.options.elements.locale.value = locale;

      // Create main workspace.
      workspace = Blockly.inject('blocklyDiv', {
        comments: true,
        disable: false,
        collapse: false,
        media: '../media/',
        readOnly: false,
        rtl: rtl,
        scrollbars: true,
        toolbox: toolbox,
        toolboxPosition: side == 'top' || side == 'start' ? 'start' : 'end',
        horizontalLayout: side == 'top' || side == 'bottom',
        sounds: soundsEnabled,
        zoom: {
          controls: true,
          wheel: true,
          startScale: 0.675,
          maxScale: 4,
          minScale: 0.25,
          scaleSpeed: 1.1
        },
        colours: {
          fieldShadow: 'rgba(255, 255, 255, 0.3)',
          dragShadowOpacity: 0.6
        }
      });

      if (sessionStorage) {
        // Restore previously displayed text.
        var text = sessionStorage.getItem('textarea');
        if (text) {
          document.getElementById('importExport').value = text;
        }
        taChange();
      }

      if (sessionStorage) {
        // Restore event logging state.
        var state = sessionStorage.getItem('logEvents');
        logEvents(Boolean(state));

        // Restore flyout event logging state.
        state = sessionStorage.getItem('logFlyoutEvents');
        logFlyoutEvents(Boolean(state));
      }
    }

    function getToolboxElement() {
      var match = location.search.match(/toolbox=([^&]+)/);
      return document.getElementById('toolbox-' + (match ? match[1] : 'categories'));
    }

    function toXml() {
      var output = document.getElementById('importExport');
      var xml = Blockly.Xml.workspaceToDom(workspace);
      output.value = Blockly.Xml.domToPrettyText(xml);
      output.focus();
      output.select();
      taChange();
    }

    function fromXml() {
      var input = document.getElementById('importExport');
      var xml = Blockly.Xml.textToDom(input.value);
      Blockly.Xml.domToWorkspace(xml, workspace);
      taChange();
    }
    // 生成代码的方法
    function toCode(lang) {
      var output = document.getElementById('importExport');
      output.value = Blockly[lang].workspaceToCode(workspace);
      // console.log(Blockly[lang].workspaceToCode(workspace))
      taChange();
    }

    // Disable the "Import from XML" button if the XML is invalid.
    // Preserve text between page reloads.
    function taChange() {
      var textarea = document.getElementById('importExport');
      if (sessionStorage) {
        sessionStorage.setItem('textarea', textarea.value)
      }
      var valid = true;
      try {
        Blockly.Xml.textToDom(textarea.value);
      } catch (e) {
        valid = false;
      }
      document.getElementById('import').disabled = !valid;
    }

    function logEvents(state) {
      var checkbox = document.getElementById('logCheck');
      checkbox.checked = state;
      if (sessionStorage) {
        sessionStorage.setItem('logEvents', state ? 'checked' : '');
      }
      if (state) {
        workspace.addChangeListener(logger);
      } else {
        workspace.removeChangeListener(logger);
      }
    }

    function logFlyoutEvents(state) {
      var checkbox = document.getElementById('logFlyoutCheck');
      checkbox.checked = state;
      var soundsEnabled = null;
      if (sessionStorage) {
        sessionStorage.setItem('logFlyoutEvents', state ? 'checked' : '');
      }
      var flyoutWorkspace = (workspace.flyout_) ? workspace.flyout_.workspace_ :
        workspace.toolbox_.flyout_.workspace_;
      if (state) {
        flyoutWorkspace.addChangeListener(logger);
      } else {
        flyoutWorkspace.removeChangeListener(logger);
      }
    }

    function logger(e) {
      console.log(e);
    }

    function glowBlock() {
      if (Blockly.selected) {
        workspace.glowBlock(Blockly.selected.id, true);
      }
    }

    function unglowBlock() {
      if (Blockly.selected) {
        workspace.glowBlock(Blockly.selected.id, false);
      }
    }

    function glowStack() {
      if (Blockly.selected) {
        workspace.glowStack(Blockly.selected.id, true);
      }
    }

    function unglowStack() {
      if (Blockly.selected) {
        workspace.glowStack(Blockly.selected.id, false);
      }
    }

    function sprinkles(n) {
      var prototypes = [];
      var toolbox = workspace.options.languageTree;
      if (!toolbox) {
        console.error('Toolbox not found; add a toolbox element to the DOM.');
        return;
      }
      var blocks = toolbox.getElementsByTagName('block');
      for (var i = 0; i < n; i++) {
        var blockXML = blocks[Math.floor(Math.random() * blocks.length)];
        var block = Blockly.Xml.domToBlock(blockXML, workspace);
        block.initSvg();
        block.moveBy(
          Math.round(Math.random() * 450 + 40),
          Math.round(Math.random() * 600 + 40)
        );
      }
    }

    var equalsXml = [
      '  <shadow type="operator_equals">',
      '    <value name="OPERAND1">',
      '     <shadow type="text">',
      '      <field name="TEXT">foo</field>',
      '     </shadow>',
      '    </value>',
      '    <value name="OPERAND2">',
      '      <shadow type="operator_equals"></shadow>',
      '    </value>',
      '  </shadow>'
    ].join('\n');

    var spaghettiXml = [
      '  <block type="control_if_else">',
      '    <value name="CONDITION">',
      '      <shadow type="operator_equals"></shadow>',
      '    </value>',
      '    <statement name="SUBSTACK"></statement>',
      '    <statement name="SUBSTACK2"></statement>',
      '    <next></next>',
      '  </block>'
    ].join('\n');

    function spaghetti(n) {
      console.log("Starting spaghetti.  This may take some time...");
      var xml = spaghettiXml;
      // Nest if/else statements deeply.
      for (var i = 0; i < 2 * n; i++) {
        xml = xml.replace(/(<statement name="SUBSTACK2?"?>)<\//g,
          '$1' + spaghettiXml + '</');
      }
      // Stack a bit.
      for (var i = 0; i < n; i++) {
        xml = xml.replace(/(<next>)<\//g,
          '$1' + spaghettiXml + '</');
      }

      // Nest boolean comparisons.
      var equalsBlock = equalsXml;
      for (var i = 0; i < n; i++) {
        equalsBlock = equalsBlock.replace(
          /(<shadow( type="operator_equals")?>)<\/shadow>/g, equalsXml);
      }

      // Put the nested boolean comparisons into if/else statements.
      xml = xml.replace(/(<shadow( type="operator_equals")?>)<\/shadow>/g,
        equalsBlock);

      xml = '<xml xmlns="http://www.w3.org/1999/xhtml">' + xml + '</xml>';
      var dom = Blockly.Xml.textToDom(xml);
      console.time('Spaghetti domToWorkspace');
      Blockly.Xml.domToWorkspace(dom, workspace);
      console.timeEnd('Spaghetti domToWorkspace');
    }

    function setSoundsEnabled(state) {
      var checkbox = document.getElementById('soundsEnabled');
      checkbox.checked = (state) ? 'checked' : '';
      if (sessionStorage) {
        sessionStorage.setItem('soundsEnabled', state);
      }
    }

    function reportDemo() {
      if (Blockly.selected) {
        workspace.reportValue(
          Blockly.selected.id,
          document.getElementById('reportValue').value
        );
      }
    }

    function setLocale(locale) {
      workspace.getFlyout().setRecyclingEnabled(false);
      var xml = Blockly.Xml.workspaceToDom(workspace);
      Blockly.ScratchMsgs.setLocale(locale);
      Blockly.Xml.clearWorkspaceAndLoadFromXml(xml, workspace);
      workspace.getFlyout().setRecyclingEnabled(true);
    }

    function toggleToolbox(id) {
      id = id || 'more';
      var toolbox = Blockly.Blocks[id + 'Toolbox'];
      workspace.updateToolbox(toolbox);
    }
  </script>

  <style>
    html,
    body {
      height: 100%;
    }

    body {
      background-color: #fff;
      font-family: sans-serif;
      overflow: hidden;
    }

    h1 {
      font-weight: normal;
      font-size: 140%;
    }

    #blocklyDiv {
      float: left;
      height: 95%;
      width: 70%;
    }

    #collaborators {
      float: right;
      width: 30px;
      margin-left: 10px;
    }

    #collaborators>img {
      margin-right: 5px;
      height: 30px;
      padding-bottom: 5px;
      width: 30px;
      border-radius: 3px;
    }

    #importExport {
      font-family: monospace;
    }
  </style>
</head>

<body onload="start()">
  <div id="collaborators"></div>
  <div id="blocklyDiv"></div>
  <!-- Simple toolbox -->
  <xml id="toolbox-simple" style="display: none">
    <block type="operator_random">
      <value name="FROM">
        <shadow type="math_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
      <value name="TO">
        <shadow type="math_number">
          <field name="NUM">10</field>
        </shadow>
      </value>
    </block>
    <block type="operator_lt">
      <value name="OPERAND1">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
      <value name="OPERAND2">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_equals">
      <value name="OPERAND1">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
      <value name="OPERAND2">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_gt">
      <value name="OPERAND1">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
      <value name="OPERAND2">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_and"></block>
    <block type="operator_or"></block>
    <block type="operator_not"></block>
    <block type="operator_join">
      <value name="STRING1">
        <shadow type="text">
          <field name="TEXT">hello</field>
        </shadow>
      </value>
      <value name="STRING2">
        <shadow type="text">
          <field name="TEXT">world</field>
        </shadow>
      </value>
    </block>
    <block type="operator_letter_of">
      <value name="LETTER">
        <shadow type="math_whole_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
      <value name="STRING">
        <shadow type="text">
          <field name="TEXT">world</field>
        </shadow>
      </value>
    </block>
    <block type="operator_length">
      <value name="STRING">
        <shadow type="text">
          <field name="TEXT">world</field>
        </shadow>
      </value>
    </block>
    <block type="operator_mod">
      <value name="NUM1">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="NUM2">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_round">
      <value name="NUM">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_mathop">
      <value name="OPERATOR">
        <shadow type="operator_mathop_menu"></shadow>
      </value>
      <value name="NUM">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
  </xml>

  <!-- Sidebar -->
  <h1>Vertical Blocks</h1>
  <p>
    <a href="javascript:void(workspace.setVisible(true))">Show</a>
    - <a href="javascript:void(workspace.setVisible(false))">Hide</a>
  </p>

  <form id="options">
    <!-- 整个blocks 左 右 布局 -->
    <select name="dir" onchange="document.forms.options.submit()">
      <!-- 左 -->
      <option value="ltr">LTR</option>
      <!-- 右 -->
      <option value="rtl">RTL</option>
    </select>
    <!-- 切换分类 -->
    <select name="toolbox" onchange="document.forms.options.submit()">
      <!-- 类别 -->
      <option value="categories">Categories</option>
      <!-- 简单的 -->
      <option value="simple">Simple</option>
    </select>
    <!-- 布局方式 -->
    <select name="side" onchange="document.forms.options.submit()">
      <!-- 默认 -->
      <option value="start">Start</option>
      <!-- 左右相反 -->
      <option value="end">End</option>
      <!-- 上 -->
      <option value="top">Top</option>
      <!-- 下 -->
      <option value="bottom">Bottom</option>
    </select>
    <!-- 语言 -->
    <select name="locale" onchange="setLocale(this.value)">
      <option value="zh-cn">Chinese (China)</option>
      <option value="en">English</option>
      <option value="ca">Catalan</option>
      <option value="cs">Czech</option>
      <option value="da">Danish</option>
      <option value="nl">Dutch</option>
      <option value="fi">Finnish</option>
      <option value="fr">French</option>
      <option value="de">German</option>
      <option value="el">Greek</option>
      <option value="he">Hebrew</option>
      <option value="hu">Hungarian</option>
      <option value="id">Indonesian</option>
      <option value="ga">Irish Gaelic</option>
      <option value="it">Italian</option>
      <option value="ja">Japanese</option>
      <option value="ja-Hira">Japanese(Hira)</option>
      <option value="mi">Maori</option>
      <option value="nb">Norwegian (Bokmal)</option>
      <option value="pt">Portuguese</option>
      <option value="pt-br">Portuguese (Brazil)</option>
      <option value="gd">Scottish Gaelic</option>
      <option value="sr">Serbian</option>
      <option value="sl">Slovenian</option>
      <option value="es">Spanish</option>
      <option value="es-419">Spanish (Latin America)</option>
      <option value="sv">Swedish</option>
      <option value="tr">Turkish</option>
      <option value="uk">Ukranian</option>
      <option value="vi">Vietnamese</option>
      <option value="cy">Welsh</option>
      <option value="zh-tw">Chinese (TW)</option>
    </select>
  </form>

  <!-- 更新代码 -->
  <p>
    <input type="button" value="Export to XML" onclick="toXml()">
    &nbsp;
    <input type="button" value="Import from XML" onclick="fromXml()" id="import">
    <br>
    <input type="button" value="To Arduino" onclick="toCode('Arduino')">
    &nbsp;
    <input type="button" value="To Python" onclick="toCode('Python')">
    <br>
    <textarea id="importExport" style="width: 26%; height: 12em" onchange="taChange();" onkeyup="taChange()"></textarea>
  </p>

  <hr>

  <!-- 日子报告 -->
  <p>
    Log events: &nbsp;
    <input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
  </p>

  <!-- 批量积木块测试 -->
  <p>
    Stress test: &nbsp;
    <input type="button" value="Sprinkles!" onclick="sprinkles(100)">
    <input type="button" value="Spaghetti!" onclick="spaghetti(3)">
  </p>

  <!-- 积木块发光测试 -->
  <p>
    Glows: &nbsp;
    <input type="button" value="Glow last clicked block" onclick="glowBlock()" />
    <input type="button" value="Unglow last clicked block" onclick="unglowBlock()" />
    <input type="button" value="Stack glow last clicked block" onclick="glowStack()" />
    <input type="button" value="Stack unglow last clicked block" onclick="unglowStack()" />
  </p>

  <!-- 布局 日志 打印 -->
  <p>
    Log flyout events: &nbsp;
    <input type="checkbox" onclick="logFlyoutEvents(this.checked)" id="logFlyoutCheck">
  </p>

  <!-- 调整声音 -->
  <p>
    Enable sounds (after refresh): &nbsp;
    <input type="checkbox" onclick="setSoundsEnabled(this.checked)" id="soundsEnabled">
  </p>

  <!-- 撤销 还原 类似 ctrl z -->
  <p>
    <input type="button" value="Undo" onclick="workspace.undo()" />
    <input type="button" value="Redo" onclick="workspace.undo(true)" />
  </p>

  <!-- 报告 积木提示报告 -->
  <p>
    Report:
    <input id="reportValue" type="text" value="123" />
    <input type="button" value="Report last clicked block" onclick="reportDemo()" />
  </p>

  <!-- 切换积木 -->
  <p>
    <input type="button" value="default" onclick="toggleToolbox('default')" />
    <input type="button" value="peripheral" onclick="toggleToolbox()" />
    // 这里是切换成自己定义的积木块 你没有定义可以去掉
    <input type="button" value="uno" onclick="toggleToolbox('uno')" />
  </p>
</body>

</html>

3. 以上都可以了就开始要搭建scratch3.0 工程目录了在scratch-blocks 同级目录下 clone scratch-gui (https://github.com/LLK/scratch-gui) 与 scratch-vm (https://github.com/LLK/scratch-vm)项目并且让scratch-gui link 到 vm 和blocks上 ,具体参考官方文档.

4. 环境搭建好了我们怎么把积木生成的代码渲染到gui上呢, 参考第二部后面的修改vertical_playground.html 的代码无非就是这一步需要用react的方式来做了

4.1 首先需要写好展示代码组件(codeComponent) 并且通过按钮的方式让它展示到gui页面上的任何一个你喜欢的位置上这个可以自己写也可以用别人写好的例如 codemirror

4.2 定义一个code reducer 并把初始数据绑定到 codeComponent (这里涉及到组件的通信用的是 redux 如果你有更好的方案可以用其他的)

4.3 在containers/blocks组件里面定义好生成代码的方法, 也就是用react的方式完成vertical_playground.html 里面完成的哪一步

然后把获取到生成的代码更新到 code reducer里面让她自动更新到 codeComponent (这一步其实就是 redux的操作不会的建议先学一下 redux)

好了这个时候你应该是脑子: 会了. 手: 你会个屁. 哈哈哈~~~

其实你已经知道大体思路了就是上面的代码有一些方法你不知道怎么回事而已, 接下来就是介绍那些方法了

方法介绍

有兴趣追源码的你就会发现 scratch-blocks/core/generator.js 源码与 blockly/core/generator.js 其实差不多就是改了一些写法.

获取值参数的方式有三个

Blockly.Arduino.valueToCode 用来获取 input_value 大概是积木里

404

block.getFieldValue 用来获取 input_statement

Blockly.Arduino.statementToCode 用来获取 field_* 获取积木里面的积木

Blockly[lang].workspaceToCode(workspace); 而这个则是获取生成的代码具体字符串你可以 console.log 到控制台查看.

this.workspace.addChangeListener(toCode); 这个是实时更新代码的方法

哈哈说到这里你应该初步知道如何生成scratch-blocks原生自带的积木的代码了 . 那么接下来我要生成自己的积木块并且生成自己的代码那该如何操作呢

自定义积木

参考: scratch-blocks/blocks_vertical 目录下的原生的定义方式这里我截取 if条件积木块为例

// 将 control_if 添加到 ScratchBlocks.Blocks 对象中，这个对象包含了所有积木的定义
Blockly.Blocks['control_if'] = {
  /**
   * Block for if-then.
   * @this Blockly.Block
   */
  // 积木初始化时调用的方法
  init: function() {
    // 积木的 json 配置
    this.jsonInit({
      "type": "control_if",  // 积木标识符 名字
      "message0": Blockly.Msg.CONTROL_IF, 积木的文案
      "message1": "%1", // Statement ，1% 是参数占位符，和 args0 数组中参数对应
      // 积木的参数，必须是数组，可以为空数组
      "args0": [
        {

          // 需要在 xml 中指明 shadow block 的 type
          "type": "input_value", // 类型 有 input_value field_dropdown .... 
          "name": "CONDITION", // 名字
          "check": "Boolean" // 返回类型
        }
      ],
      "args1": [
        {
          "type": "input_statement",
          "name": "SUBSTACK"
        }
      ],
       // 积木所属的分类，对应 xml 中 category 标签的 id
      "category": Blockly.Categories.control, // 属于类别
      // 积木继承项，数组中的字符串是已经定义好的扩展，使用扩展属性可以减少重复的配置
      // 可以在 ScratchBlocks.Extensions 对象中查看所有定义的扩展，也可以自己定义扩展。
      // colours_control 表示 motion 积木的颜色
      // shape_statement 表示积木的形状
      "extensions": ["colours_control", "shape_statement"] // 颜色 与积木类型
    });
  }
};

你需要定义自己的积木的话直接参考原生的就行

但是积木的类型又分很多种我们需要定义成什么类型的就要根据文档走了

Fields:

field_dropdown: 下拉列表
field_checkbox: 勾选框
field_colour: 颜色
field_number: 数字输入
field_angle: 角度选择
field_variable: 变量
field_date: 日期
field_label: 标签文本，通常根据 message 直接生成
field_image: 图片文本

Inputs:

input_value：可被相同形状的积木覆盖的参数，根据 "check": "Boolean", "String", "Number" 的不同，形状不同
input_statement：可以连接命令类型积木

当然定义了还要使用的参考 scratch-blocks/blocks_vertical/default_toolbox.js 或者 scratch-gui/scr/lib/make-toolbox-xml.js

就是定义xml

<category name="%{BKY_CATEGORY_CONTROL}" id="control" colour="#FFAB19" secondaryColour="#CF8B17">
  <block type="control_if"/>
</category>

大体就是这么多了 . 有时间再分享一下在线运行的的经验...

总结:

果然东西还是太多了想要说明白还是比较困难而且说得也比较混乱. 以前看别人博客的时候经常都吐槽看不懂. 现在到自己写的,也是很混乱啊. 希望能对你有帮助吧有什么不明白的欢迎私信留言有时间我都会回答的.

按键伤人啊

关注

13
点赞
踩
40

收藏

觉得还不错? 一键收藏
22
评论
终于把scratch3.0生成代码的部分搞定

终于把scratch3.0生成代码的部分搞定前言在整个scratch3.0的二次开发中真的收获满满. 刚开始上手的时候进入了各大群或者拼命的去找资源就是为了完成 scratch3.0 与公司硬件的结合. 不过找了那么多资源似乎并没有能解决我的需求(要么是要钱,要么是随便零散讲下思路). 其实我挺感谢他们能讲讲思路的这样我综合起来通过研究源码终于搞定了这个项目. 项目并没有像其他公司植入后台管理(scratch-...
复制链接

扫一扫

专栏目录