【Blockly图形化积木编程二次开发学习笔记】2.python代码实时生成

最新推荐文章于 2024-07-18 13:46:25 发布
最新推荐文章于 2024-07-18 13:46:25 发布
阅读量430 收藏 7
点赞数 5
分类专栏： Blockly积木编程 文章标签： Blockly javascript html css 图形化编程 scratch python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44457994/article/details/140426204
版权

文章目录

参考资料

blockly —— wwj718
  blockly开发之hello world(0)
  blockly开发之生成并运行js代码(1)
  blockly开发之使用python驱动浏览器中的turtle(2)

代码生成的实现

引入依赖

<script src="./blockly/python_compressed.js"></script>

这个js文件的功能是用于生成<script src="./blockly/blocks_compressed.js"></script>预定义的积木对应的js代码

此外通过引入其他语言模块，我们还可以将blocks_compressed.js预制的积木块生成Javascript、PHP、Lua、Dart等代码

python_compressed.js需要在blockly_compressed.js之后被引用

生成代码

<script>
	Blockly.Python.INFINITE_LOOP_TRAP = null;
	let code = Blockly.Python.workspaceToCode(workspace);   // 代码生成
</script>

效果

在这里插入图片描述

完整代码

<!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>

        <!--代码高亮-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css">
        <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.js"></script>
        <!--行号显示-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.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%; width: 50%; display: inline-block; float: left;"></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>

    <script>
        function show_code()
        {
            // Generate Python code and display it.
            Blockly.Python.INFINITE_LOOP_TRAP = null;
            let code = Blockly.Python.workspaceToCode(workspace);   // 代码生成
            // console.log(code);

            let display_code_obj = document.getElementById("display_code"); // 获取代码展示区对象
            display_code_obj.textContent = code;    // 更新代码展示区的内容

            // 开启代码高亮
            hljs.initHighlightingOnLoad();
            // 开启行号显示
            // hljs.initLineNumbersOnLoad ();
        }
    </script>

    <!--代码展示区-->
    <pre>
        <code class="python" id="display_code">
        </code>
    </pre>

    <script>
        // 开启代码高亮
        hljs.initHighlightingOnLoad();
        workspace.addChangeListener(show_code); // 绑定 show_code 函数到 Blockly 的 change 事件来实时生成和显示代码
    </script>

</html>
乙酸氧铍
关注
专栏目录
python的积木式编程
flymist的博客
12-03 2万+
edu.codemao.cn https://wood.codemao.cn/ https://static.codemao.cn/wood_docs/web/code/Control.html 编程猫和scratch大同小异，和其他Python平台相比较： 优势： 支持硬件编程 丰富的Python库 积木/代码一键转换 搭积木 学编程 使用方便，在线版、离线版均有，有基础的教程...
python积木式编程_TurnipBit—MicroPython开发板：从积木式编程语言开始学作小小创客...
weixin_42521628的博客
02-04 1511
编程、建模、制做动画和游戏……这些当初咱们默认只有成年人玩得转的事情，如今早已经被无数小孩子给颠覆甚至玩出新境界了。热爱科技和动手的“创客”(Maker)如今在全世界都煊赫一时。今年以来，对青少年的创客教育在中国不管是庙堂仍是大众而言亦是热门话题。编程从TurnipBit开始完成编程启蒙appTurnipBit是一个编程学习的入门级产品。产品自己提供一个寓教于乐的可视化编程网站入口、一个例程及资料...
blockly 代码html,Blockly 代码生成
weixin_39635130的博客
06-22 376
Blockly 官方支持生成多种代码， javascript、python、lua等，这样子，初学者就可以通过拖拽积木实现编程功能参考因为是个样式小渣渣，直接引入了UI库layui、jquery还是老样子，引入编译好的blockly文件和必须的文件监听积木块的变化并生成对应的代码function myUpdateFunction(event) {var code = Blockly.JavaScr...
【Blockly图形化积木编程二次开发学习笔记】3.自定义模块
最新发布
乙酸氧铍的博客
07-18 527
使用进行配置：导出，得到在工程中加载
执行blockly的python代码
itfanr的博客
02-12 1711
class SequenceCodeExecutor: def __init__(self): self.blockly_dir = rospy.get_param(&quot;~sequence_code_to_execute_path&quot;) self.python_file = str(self.blockly_dir) + '/generated_code.py...
blockly开发之使用python驱动浏览器中的turtle
hnzwx888的专栏
01-16 1743
原文网址：https://blog.just4fun.site/blockly-dev-python-browser-turtle.html Date 日 25 二月 2018 By wuwenjie Category 少儿编程. Tags blockly   这篇文章我们将使用blockly来做一个完整的项目。 这篇教程涵盖以下内容： 从拼搭好的积木块中，生成(generate)pyt...
scratch3.0二次开发之用blocks生成python代码
jyht1226的博客
05-15 7453
在开始之前，先回顾下之前写的文章《scratch3.0二次开发之blocks生成代码思路》，在文章里大概地写了生成代码的几个步骤，读者看了可能还不太理解，这是根据我的开发经验写出来的。现在具体写写实现的方法。 一、引入一个生成代码的文件，比如要生成arduino代码，就要引入生成arduino代码的文件，要生成python代码，就要引入python文件。 这个生成代码的文件是从Blockly引入进来的，scratch-blocks是在blockly的基础上开发出来的。现在的scratch-blocks是没有
stc51单片机积木式图形化中文编程软件/c语言代码生成器/电路仿真
08-11
"积木式图形化中文编程软件"是为了降低单片机编程的门槛，尤其是针对初学者设计的，它提供了直观易懂的图形化编程界面，用户可以通过拖拽积木块的方式来构建程序逻辑，大大简化了编程过程。这种方式对于学习编程概念...
Vue实现图形化积木式编程Vue前端源码
08-31
在本项目中，“Vue实现图形化积木式编程Vue前端源码”是一个针对少儿编程教育的前端应用。这个开源项目采用了一系列先进的技术和框架，旨在创建一个互动性强、易上手的编程学习环境。以下是该项目涉及的主要知识点：...
基于arduino开发的blockly图形化编程软件.zip
05-14
Arduino是开源硬件平台，它允许用户通过编写简单代码来控制各种电子元件，而Blockly则是一个由Google开发的图形化编程工具，其采用积木式编程块，让用户无需掌握复杂的语法就能进行编程。 首先，我们来看看"基于...
一种图形化积木式编程软件的设计.pdf
11-20
一种图形化积木式编程软件的设计.pdf
基于Blockly的青少年可视化编程开发平台设计论文
02-09
Blockly是由Google开发的一种开源的可视化图形编程语言，它以积木块的形式展示编程语句，降低了编程的门槛，特别适合青少年学习。与传统的编程方式相比，Blockly使得编程过程更加直观和易于理解，有助于激发青少年对...
利用python分离blockly源码
Zhang_HZ2016的博客
03-15 2780
Blockly由超过一百个JavaScript文件组成。通过互联网加载这些对终端用户来说是一种缓慢的体验。为了使Blockly加载更快，它可以压缩到六个文件总共约150kb。 Blockly带有源代码和压缩文件，因此除非你是在，，或目录core中blocks，否则不需要构建Blockly。generatorsmsg 压缩Blockly非常简单。假设你安装了Python 2.x，只需build.py在Blockly的根目录下运行： python构建.py 此命令大约需要20秒，并使用Google的在线Clos
python积木编程软件_童心制物慧编程全新 Python 编辑器正式上线
weixin_39682511的博客
12-03 1075
原标题：童心制物慧编程全新 Python 编辑器正式上线 作为一款致力于 提供更专业、更多样的STEAM教育解决方案的编程软件，童心制物慧编程一直不断在优化慧编程的教学功能，只为了给所有编程教育者提供一个更好的教学平台。为了能够满足不同阶段的编程教学需求, 慧编程推出全新的 Python 编辑器, 支持 Python 教学场景, 并且更好地融合图形化积木编程, 更适用于 软硬件编程、 人工智能、 ...
blockly可视化编程
热门推荐
分享不一样的技术，与你一起共同成长!
11-23 13万+
Google Blockly可视化编程可以生成JavaScript  PHP  Pyhon代码。通过类似儿童的拼图游戏，就能实现编程。 自己可以制作组件按钮以及代码实现事件，通过自定义拖拽就能实现代码编程。  比较适合儿童玩吧，一个程序员去用这个写代码能把人累死。随着代码量的提升，整个图变得十分大，可读性 差。一旦出现代码运行错误，还是需要调试的。所以这个东西就拿过来玩玩吧，开发用这个东西完
blockly自定义块简单实现
tomato3351的博客
03-17 4108
blockly自定义块支持使用json和JS，本文使用JS。 自定义块需要两个部分，blocks和generators。要看效果可以新建自己的index.html。 一、自定义块的步骤 1.在blocks/文件夹下新建文件myblocks.js文件，写入 'use strict'; goog.require('Blockly.Blocks'); goog.require('Blo...
blockly中如何实现添加任意键值对生成字典?[Python]
Antrn
08-14 1606
如果想要用户使用block添加任意数量的键值对，生成一个python字典，使用官方提供的现有的工具是做不到的。我首先想到的是利用text input和numeric input两个block，将其数据进行绑定形成一个键值对，然后将此生成的键值对插入到新建的dict字典变量中去。这个字典变量是可以拓展的，也就是可以无限添加item，那么结合这两个block，就可以实现。 首先在Blockly Dev...
blockly 把工作区中的块输出成代码
wolf
01-14 2217
代码生成器 Blockly的大多数应用程序都要求将用户的程序翻译成JavaScript，Python，PHP，Lua，Dart或其他语言。此操作由Blockly在客户端执行。这个过程就需要代码生成器。 生成代码 第一步是包含所用语言的生成器。Blockly包含以下5种生成器，分别对应不同的语言： javascript_compressed.js python_compressed.js ...
blockly用法探究
Zhang_HZ2016的博客
03-15 8001
自定义块：最佳实践 多年来，Blockly和Blockly Games团队学到了许多适用于那些开发基于Blockly的应用程序的课程。以下是我们所犯错误的集合，或者他人通常犯的错误。 这些是我们使用Blockly的视觉风格学到的一般教训，可能不适用于所有用例或设计。可能存在其他解决方案。这也不是用户可能遇到的问题和如何避免它们的问题的详尽列表。每一种情况都有点不同，可能有自己的权衡
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乙酸氧铍

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值