【Blockly图形化积木编程二次开发学习笔记】1.工具箱的实现

文章目录

Blockly 版本选择
上手

Blockly 版本选择

在【兰州大学】Blockly创意趣味编程【全36讲】主讲教师：崔向平周庆国中提到，在18年6月份之前的版本中，可以通过安装依赖库的方式，打开开发者工具的离线版本，但是新版本的Blockly移除了部分离线的依赖文件。

在这里插入图片描述

在Github仓库上，对于18年6月份之前的版本，我只找到了2017.10.23的版本是相对较新的blockly-update-20171023，可配套Closure Library v20180405使用开发者工具

但是这个版本的Blocks是有问题的：
在这里插入图片描述

这里搜集存档了一份整合修改过的版本：Blockly积木编程离线整合包
在这里插入图片描述

上手

参考 Blockly 中文文档及 ./blockly/demos/code/index.html 文件，建立自己的工程文件demo.html
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><script src="./blockly/blockly_compressed.js"></script><script src="./blockly/blocks_compressed.js"></script><script src="./blockly/python_compressed.js"></script><script src="./blockly/msg/js/zh-hans.js"></script><script src="./blockly/demos/code/msg/zh-hans.js"></script><script>// category 栏翻译for (var messageKey in MSG){if (messageKey.indexOf('cat') == 0){Blockly.Msg[messageKey.toUpperCase()] = MSG[messageKey];}}</script><style>html, body{height: 100%;}.content{visibility: hidden;margin: 0;padding: 1ex;position: absolute;direction: ltr;}</style></head><body><div id="blocklyDiv" style="height: 100%;"></div><xml id="toolbox" style="display: none"><category name="%{BKY_CATLOGIC}" colour="%{BKY_LOGIC_HUE}"><block type="controls_if"></block><block type="logic_compare"></block><block type="logic_operation"></block><block type="logic_negate"></block><block type="logic_boolean"></block><block type="logic_null"></block><block type="logic_ternary"></block></category><category name="%{BKY_CATLOOPS}" colour="%{BKY_LOOPS_HUE}"><block type="controls_repeat_ext"><value name="TIMES"><shadow type="math_number"><field name="NUM">10</field></shadow></value></block><block type="controls_whileUntil"></block><block type="controls_for"><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><value name="BY"><shadow type="math_number"><field name="NUM">1</field></shadow></value></block><block type="controls_forEach"></block><block type="controls_flow_statements"></block></category><category name="%{BKY_CATMATH}" colour="%{BKY_MATH_HUE}"><block type="math_number"></block><block type="math_arithmetic"><value name="A"><shadow type="math_number"><field name="NUM">1</field></shadow></value><value name="B"><shadow type="math_number"><field name="NUM">1</field></shadow></value></block><block type="math_single"><value name="NUM"><shadow type="math_number"><field name="NUM">9</field></shadow></value></block><block type="math_trig"><value name="NUM"><shadow type="math_number"><field name="NUM">45</field></shadow></value></block><block type="math_constant"></block><block type="math_number_property"><value name="NUMBER_TO_CHECK"><shadow type="math_number"><field name="NUM">0</field></shadow></value></block><block type="math_round"><value name="NUM"><shadow type="math_number"><field name="NUM">3.1</field></shadow></value></block><block type="math_on_list"></block><block type="math_modulo"><value name="DIVIDEND"><shadow type="math_number"><field name="NUM">64</field></shadow></value><value name="DIVISOR"><shadow type="math_number"><field name="NUM">10</field></shadow></value></block><block type="math_constrain"><value name="VALUE"><shadow type="math_number"><field name="NUM">50</field></shadow></value><value name="LOW"><shadow type="math_number"><field name="NUM">1</field></shadow></value><value name="HIGH"><shadow type="math_number"><field name="NUM">100</field></shadow></value></block><block type="math_random_int"><value name="FROM"><shadow type="math_number"><field name="NUM">1</field></shadow></value><value name="TO"><shadow type="math_number"><field name="NUM">100</field></shadow></value></block><block type="math_random_float"></block></category><category name="%{BKY_CATTEXT}" colour="%{BKY_TEXTS_HUE}"><block type="text"></block><block type="text_join"></block><block type="text_append"><value name="TEXT"><shadow type="text"></shadow></value></block><block type="text_length"><value name="VALUE"><shadow type="text"><field name="TEXT">abc</field></shadow></value></block><block type="text_isEmpty"><value name="VALUE"><shadow type="text"><field name="TEXT"></field></shadow></value></block><block type="text_indexOf"><value name="VALUE"><block type="variables_get"><field name="VAR">{textVariable}</field></block></value><value name="FIND"><shadow type="text"><field name="TEXT">abc</field></shadow></value></block><block type="text_charAt"><value name="VALUE"><block type="variables_get"><field name="VAR">{textVariable}</field></block></value></block><block type="text_getSubstring"><value name="STRING"><block type="variables_get"><field name="VAR">{textVariable}</field></block></value></block><block type="text_changeCase"><value name="TEXT"><shadow type="text"><field name="TEXT">abc</field></shadow></value></block><block type="text_trim"><value name="TEXT"><shadow type="text"><field name="TEXT">abc</field></shadow></value></block><block type="text_print"><value name="TEXT"><shadow type="text"><field name="TEXT">abc</field></shadow></value></block><block type="text_prompt_ext"><value name="TEXT"><shadow type="text"><field name="TEXT">abc</field></shadow></value></block></category><category name="%{BKY_CATLISTS}" colour="%{BKY_LISTS_HUE}"><block type="lists_create_with"><mutation items="0"></mutation></block><block type="lists_create_with"></block><block type="lists_repeat"><value name="NUM"><shadow type="math_number"><field name="NUM">5</field></shadow></value></block><block type="lists_length"></block><block type="lists_isEmpty"></block><block type="lists_indexOf"><value name="VALUE"><block type="variables_get"><field name="VAR">{listVariable}</field></block></value></block><block type="lists_getIndex"><value name="VALUE"><block type="variables_get"><field name="VAR">{listVariable}</field></block></value></block><block type="lists_setIndex"><value name="LIST"><block type="variables_get"><field name="VAR">{listVariable}</field></block></value></block><block type="lists_getSublist"><value name="LIST"><block type="variables_get"><field name="VAR">{listVariable}</field></block></value></block><block type="lists_split"><value name="DELIM"><shadow type="text"><field name="TEXT">,</field></shadow></value></block><block type="lists_sort"></block></category><category name="%{BKY_CATCOLOUR}" colour="%{BKY_COLOUR_HUE}"><block type="colour_picker"></block><block type="colour_random"></block><block type="colour_rgb"><value name="RED"><shadow type="math_number"><field name="NUM">100</field></shadow></value><value name="GREEN"><shadow type="math_number"><field name="NUM">50</field></shadow></value><value name="BLUE"><shadow type="math_number"><field name="NUM">0</field></shadow></value></block><block type="colour_blend"><value name="COLOUR1"><shadow type="colour_picker"><field name="COLOUR">#ff0000</field></shadow></value><value name="COLOUR2"><shadow type="colour_picker"><field name="COLOUR">#3333ff</field></shadow></value><value name="RATIO"><shadow type="math_number"><field name="NUM">0.5</field></shadow></value></block></category><sep></sep><category name="%{BKY_CATVARIABLES}" colour="%{BKY_VARIABLES_HUE}" custom="VARIABLE"></category><category name="%{BKY_CATFUNCTIONS}" colour="%{BKY_PROCEDURES_HUE}" custom="PROCEDURE"></category></xml></body><script>// Construct the toolbox XML, replacing translated variable names.// 构建 toolbox XML，替换翻译后的变量名。var toolboxText = document.getElementById('toolbox').outerHTML;toolboxText = toolboxText.replace(/(^|[^%]){(\w+)}/g,function(m, p1, p2) {return p1 + MSG[p2];});var toolboxXml = Blockly.Xml.textToDom(toolboxText);var workspace = Blockly.inject('blocklyDiv',{toolbox: toolboxXml,grid:   // 栅格{spacing: 20,length: 3,colour: '#ccc',snap: true},move:   // 移动{scrollbars:{horizontal: true,vertical: true},drag: true,wheel: false},zoom:   // 缩放{controls: true,wheel: true,startScale: 1.0,maxScale: 3,minScale: 0.3,scaleSpeed: 1.2},media: './blockly/media/',  // 图标及音效trashcan: true});</script></html>