探索 Blockly：自定义积木实例

news2024/9/20 18:53:48

3.实例

3.1.基础块

无输入 , 无输出

3.1.1.json

在这里插入图片描述

var textOneJson = {
    "type": "sql_test_text_one",
    "message0": " one ",
    "colour": 30,
    "tooltip":' 无输入 , 无输出'
};

javascriptGenerator.forBlock['sql_test_text_one'] = function(block) {
    return  ' one ';
};

Blockly.Blocks['sql_test_text_one'] = {
    init: function() {
        this.jsonInit(textOneJson);
    }
};

3.1.2.js

.appendField(new Blockly.FieldLabelSerializable("显示内容"), "TEXT_NAME");

在这里插入图片描述

Blockly.Blocks['js_base_one'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(new Blockly.FieldLabelSerializable("无入, 无出"), "TEXT_NAME");
        this.setColour(145);
        this.setTooltip("无入, 无出");
    }
}
javascriptGenerator.forBlock['js_base_one'] = function(block) {
    return  ' one ' ;
};

3.2.输出类型 output

3.2.1.json

“output”: 指定类型 如: String | Number | …

注意生成代码函数的设置

在这里插入图片描述

var textBaseOneJson = {
    "type": "sql_test_base_one",
    "message0": " one ",
    "output": "String",
    "colour": 30,
    "tooltip":' 返回 字符串 '
};

javascriptGenerator.forBlock['sql_test_base_one'] = function(block) {
    return    [ ' base one ' ,  javascriptGenerator.ORDER_ATOMIC];
};

Blockly.Blocks['sql_test_base_one'] = {
    init: function() {
        this.jsonInit(textBaseOneJson);
    }
};

3.2.2.js

this.setOutput(true, "String");

在这里插入图片描述

Blockly.Blocks['js_base_two'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(new Blockly.FieldLabelSerializable("无入, 有出"), "TEXT_NAME");
        this.setColour(145);
        this.setTooltip("无入, 有出");
        this.setOutput(true, "String");
    }
}
javascriptGenerator.forBlock['js_base_two'] = function(block) {
    return  [ ' base two ' ,  javascriptGenerator.ORDER_ATOMIC];
};

3.3.上下连接

3.3.1.json

previousStatement / nextStatement

在这里插入图片描述

var textFiveJson = {
    "type": "sql_test_text_five",
    "message0": " five ",
    "colour": 30,
    "previousStatement": null,
    "nextStatement": null,
};

javascriptGenerator.forBlock['sql_test_text_five'] = function(block) {
    return  ' five ' ;
};

Blockly.Blocks['sql_test_text_five'] = {
    init: function() {
        this.jsonInit(textFiveJson);
        let thisBlock = this;
    }
};

3.3.2.js

在这里插入图片描述

Blockly.Blocks['js_base_three'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(new Blockly.FieldLabelSerializable("上下连接"));
        this.setColour(145);
        this.setTooltip("上下连接");
        // this.setOutput(true, "String");
        // 下连
        this.setNextStatement(true);
        // this.setNextStatement(true, 'Action');

        // 上连
        this.setPreviousStatement(true);
        // this.setPreviousStatement(true, 'Action');
    }
}
javascriptGenerator.forBlock['js_base_three'] = function(block) {
    return   ' base three ' ;
};

3.4.输入 input

在 args# 数组内定义

  • name (string): 输入的名称，用于识别输入。

  • type (string): 输入类型，如 'input_value'、'input_statement'。

  • check (string): 限制此输入可以接受的值或语句类型。

  • align (string): 输入的对齐方式，如 'LEFT' 或 'RIGHT'。

3.4.1.input_value

接受一个值输入的槽

3.4.1.1.json

在这里插入图片描述

var textTwoJson = {
    "type": "sql_test_text_two",
    "message0": " two %1 ",
    "args0": [
        {
            "type": "input_value",
            "name": "NAME",
            "check": "String",
        }
    ],
    "colour": 30,
    "tooltip":' 有输入 , 无输出'
};

javascriptGenerator.forBlock['sql_test_text_two'] = function(block) {
    var value_name = javascriptGenerator.valueToCode(block, 'NAME', javascriptGenerator.ORDER_ATOMIC);
    return  ' two ' + value_name ;
};

Blockly.Blocks['sql_test_text_two'] = {
    init: function() {
        this.jsonInit(textTwoJson);
    }
};
3.4.1.2.inputsInline

"inputsInline": true, 输入块 为 内置块

在这里插入图片描述

var textInputFiveJson = {
    "type": "sql_test_input_five",
    "message0": " input five %1",
    "args0": [
        {
            "type": "input_value",
            "name": "NUMBER",
            "align": "RIGHT",
            "check": "Number"
        }
    ],
    "inputsInline": true,  // 输入应该与块主体保持在同一行，而不是下一行
    "colour": 230,
    "tooltip":' 内置 有输入'
};

javascriptGenerator.forBlock['sql_test_input_five'] = function(block) {
    // 获取输入值
    var numberInput = javascriptGenerator.valueToCode(block, 'NUMBER', javascriptGenerator.ORDER_ATOMIC);
    return  ' two ' + numberInput ;
};

Blockly.Blocks['sql_test_input_five'] = {
    init: function() {
        this.jsonInit(textInputFiveJson);
        let thisBlock = this;
    }
};
3.4.1.3.js

在这里插入图片描述

Blockly.Blocks['js_base_four'] = {
    init: function () {
        this.appendValueInput('VALUE')
            .setCheck('Number')  // 检测数据类型
            .appendField(new Blockly.FieldLabelSerializable("计算值为:"));
        this.setColour(145);
        this.setTooltip("有入, 无出");
		// this.setInputsInline(true);
    }
}
javascriptGenerator.forBlock['js_base_four'] = function(block) {
    var value_input = javascriptGenerator.valueToCode(block, 'VALUE', javascriptGenerator.ORDER_ATOMIC);
    return value_input;
};

3.4.2.input_statement

接受另一个块作为输入的槽。

3.4.2.1. 案例 1

var doCode = javascriptGenerator.statementToCode(block, 'DO');

在这里插入图片描述

  var textBaseFourJson = {
        "type": "sql_test_base_four",
        "message0": "( ) %1 ",
        "args0": [
          {
            "type": "input_statement",
            "name": "DO"
          }
        ],
        "colour": 120,
        "tooltip": "包裹 其它块 "
      };

      javascriptGenerator.forBlock['sql_test_base_four'] = function(block) {

        // 获取"DO"部分的代码
        var doCode = javascriptGenerator.statementToCode(block, 'DO');

        // 生成循环结构的代码
        var loopCode = ' ( ' +
            doCode.replace(/\n/g, '\n  ') + // 缩进内联代码
            '\n ) ';

        return loopCode;
      };

      Blockly.Blocks['sql_test_base_four'] = {
        init: function() {
          this.jsonInit(textBaseFourJson);
        }
      };
3.4.2.2. 案例 2

在这里插入图片描述

var textInputFourJson = {
    "type": "sql_test_input_four",
    "message0": "input four 重复 %1 次：\n%2",
    "args0": [
        {
            "type": "input_value",
            "name": "TIMES",
            "check": "Number"
        },
        {
            "type": "input_statement",
            "name": "DO"
        }
    ],
    "previousStatement": null,
    "nextStatement": null,
    "colour": 120,
    "tooltip": "重复执行指定次数的代码块。"
};

javascriptGenerator.forBlock['sql_test_input_four'] = function(block) {
    // 获取重复次数
    var times = javascriptGenerator.valueToCode(block, 'TIMES', javascriptGenerator.ORDER_ATOMIC);
    // 获取"DO"部分的代码
    var doCode = javascriptGenerator.statementToCode(block, 'DO');

    // 生成循环结构的代码
    var loopCode = 'for (var i = 0; i < ' + times + '; i++) {\n' +
        doCode.replace(/\n/g, '\n  ') + // 缩进内联代码
        '\n}';

    return loopCode;
};

Blockly.Blocks['sql_test_input_four'] = {
    init: function() {
        this.jsonInit(textInputFourJson);
    }
};
3.4.2.3.js

在这里插入图片描述

Blockly.Blocks['js_base_six'] = {
    init: function () {
        this.appendStatementInput('DO')
            .appendField(new Blockly.FieldLabelSerializable("包括:"));
        this.setColour(145);
    }
}
javascriptGenerator.forBlock['js_base_six'] = function(block) {
    var value_input = javascriptGenerator.statementToCode(block, 'DO' );
    return value_input;
};
3.4.2.4.三句

在这里插入图片描述

Blockly.Blocks['js_base_seven'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(new Blockly.FieldLabelSerializable(" ( "));

        this.appendStatementInput('DO')
            .appendField(new Blockly.FieldLabelSerializable(""));


        this.appendDummyInput()
            .appendField(new Blockly.FieldLabelSerializable(" ) "));

        this.setColour(145);
    }
}
javascriptGenerator.forBlock['js_base_seven'] = function(block) {
    var value_input = javascriptGenerator.statementToCode(block, 'DO' );
    return "(" +  value_input  + ")";
};

3.5.属性 Field

在 args# 数组内定义的特定类型对象

  • type (string): 字段类型，如 'field_input', 'field_dropdown', 'field_label_serializable'。
  • name (string): 字段的变量名，在生成代码时使用。
  • text (string): 显示的默认文本（对于某些字段类型）。
  • options / params (Array): 选项列表（对于下拉菜单等字段类型）。

3.5.1.field_input

可编辑的文本输入字段。

3.5.1.1.json

在这里插入图片描述

 var textInputOneJson = {
     "type": "sql_test_input_one",
     "message0": " input one %1",
     "args0": [
         {
             "type": "field_input",
             "name": "TEXT",
             "text": "默认文本"
         }
     ],
     "colour": 60,
 };

javascriptGenerator.forBlock['sql_test_input_one'] = function(block) {
    var text = block.getFieldValue('TEXT');
    // 返回生成的代码字符串，这里假设输出就是用户输入的文本
    return 'input one : "' + text.replace(/"/g, '\\"') + '"';
};

Blockly.Blocks['sql_test_input_one'] = {
    init: function() {
        this.jsonInit(textInputOneJson);
        let thisBlock = this;
    }
};
3.5.1.2.js

new Blockly.FieldTextInput("name")

在这里插入图片描述

      Blockly.Blocks['js_field_one'] = {
        init: function () {
          this.appendDummyInput()
              .appendField(new Blockly.FieldLabelSerializable("名称"), "TEXT_NAME")
              .appendField(new Blockly.FieldTextInput("name"), "TEXT_INPUT");

          this.setColour(85);
        }
      }
      javascriptGenerator.forBlock['js_field_one'] = function(block) {
        var text = block.getFieldValue('TEXT_INPUT');
        return "名称 : " +  text  ;
      };

3.5.2.field_Number

3.5.2.1.json

“value”: 1, “min”: 0, “max”: 100, “precision”: 1

初始值、最小值、最大值和精度

在这里插入图片描述

 var textInputThreeJson = {
        "type": "sql_test_input_three",
        "message0": " input three %1",
        "args0": [
          {
            "type": "field_Number",
            "name": "NUMBER",
            "value": 1,
            "min": 0,
            "max": 100,
            "precision": 1
          }
        ],
        "colour": 60,
      };

      javascriptGenerator.forBlock['sql_test_input_three'] = function(block) {
        var number = block.getFieldValue('NUMBER');
        // 生成计算平方的JavaScript代码
        var code = 'Math.pow(' + number + ', 2)';
        // 返回生成的代码
        return code;
      };

      Blockly.Blocks['sql_test_input_three'] = {
        init: function() {
          this.jsonInit(textInputThreeJson);
          let thisBlock = this;
        }
      };
3.5.2.2.js

在这里插入图片描述

Blockly.Blocks['js_field_two'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(new Blockly.FieldNumber(0), "NUM_INPUT");
        this.setOutput(true, "Number");
        this.setColour(85);
    }
}
javascriptGenerator.forBlock['js_field_two'] = function(block) {
    var text = block.getFieldValue('NUM_INPUT');
    return  [ text ,  javascriptGenerator.ORDER_ATOMIC ];
};

3.5.3.field_dropdown

3.5.3.1.json

在这里插入图片描述

 var textInputTwoJson = {
     "type": "sql_test_input_two",
     "message0": " input Two %1",
     "args0": [
         {
             "type": "field_dropdown",
             "name": "TEXT",
             "options":[
                 ["狗", "Dog"],
                 ["猫", "Cat"],
                 ["大象", "Elephant"]
             ]
         }
     ],
     "colour": 60,
 };

javascriptGenerator.forBlock['sql_test_input_two'] = function(block) {
    var value_name =     block.getFieldValue('TEXT');
    // 返回生成的代码字符串
    return  ' input Two ' + value_name  ;
};

Blockly.Blocks['sql_test_input_two'] = {
    init: function() {
        this.jsonInit(textInputTwoJson);
    }
};
3.5.3.2.js

在这里插入图片描述

  Blockly.Blocks['js_field_three'] = {
        init: function () {
          var options = [
            ['选项1', 'option1'],
            ['选项2', 'option2'],
            ['选项3', 'option3']
          ];

          this.appendDummyInput()
              .appendField(new Blockly.FieldDropdown(options), 'SELECTED_OPTION');
          this.setOutput(true, 'String'); // 输出类型为字符串

          this.setColour(85);
        }
      }
      javascriptGenerator.forBlock['js_field_three'] = function(block) {
        var selectedOption = block.getFieldValue('SELECTED_OPTION');
        // 生成的代码基于用户选择的选项
        var code = `'${selectedOption}'`;
        return [code, javascriptGenerator.ORDER_ATOMIC];
      };

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1953899.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JavaScript——常用库

JavaScript——常用库

文章目录 绪论jQuery选择器事件修改 css查找ajax setTimeout与setIntervalsetTimeoutsetInterval requestAnimationFrameMap与SetlocalStorageJSONDateWebSocketwindowcanvas结语 绪论 『时间是伟大的作家&#xff0c;总会写下完美的结局。』—— 「秋之回忆」 jQuery 这个是优…
阅读更多...
特斯拉财报看点：FSD拳打华为，Robotaxi 脚踢百度

特斯拉财报看点：FSD拳打华为，Robotaxi 脚踢百度

大数据产业创新服务媒体 ——聚焦数据 改变商业 特斯拉发最新财报了&#xff0c;这不仅是一份财务报告&#xff0c;更是一张未来发展的蓝图。在这份蓝图中&#xff0c;两个关键词格外耀眼——FSD&#xff08;全自动驾驶系统&#xff09;和Robotaxi&#xff08;无人驾驶出租车&…
阅读更多...
【通俗理解】大脑网络结构理论解析——从小世界到无标度性的深度刻画

【通俗理解】大脑网络结构理论解析——从小世界到无标度性的深度刻画

大脑网络结构理论解析——从小世界到无标度性的深度刻画 大脑网络结构的核心特性 大脑网络结构理论旨在揭示大脑神经元之间连接的复杂模式。其中&#xff0c;小世界特性和无标度性是大脑网络的两个重要特征。小世界特性意味着网络中大部分节点之间都通过较短的路径相连&#…
阅读更多...
pycharm+pytorch+gpu开发环境搭建

pycharm+pytorch+gpu开发环境搭建

一、安装anacoda 1、下载Anaconda安装包 官网下载地址 https://www.anaconda.com/distribution/ 清华镜像 Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 下载python3.8对应的版本Anaconda3-2021.04-Windows-x86_64.exe 下载完成…
阅读更多...
.Net医院检验系统源码，lis源码，化验系统源码

.Net医院检验系统源码，lis源码，化验系统源码

系统概述&#xff1a; 医学实验室信息系统即LIS&#xff0c;系统把检验、检疫、放免、细菌微生物及科研使用的各类分析仪器&#xff0c;通过计算机联网&#xff0c;实现各类仪器数据结果的实时自动接收、自动控制及综合分析&#xff1b;与条码设备配套使用&#xff0c;自动生成…
阅读更多...
手把手教小白Vue3(保姆式服务)

手把手教小白Vue3(保姆式服务)

1.初识Vue3 2.Vue3组合式API 2.1认识create-vue create-vue是官方新的脚手架工具&#xff0c;vite下一代构建工具 node -v >16 npm init vuelatest npm run dev 2.2 setup <script setup>原始写法 <script> export default { //执行时机比beforeCre…
阅读更多...
Linux（linux命令）和Window（powershell）的查找命令

Linux（linux命令）和Window（powershell）的查找命令

目录 LinuxWindow基本操作（1）Get-ChildItem（2）Get-ChildItem模糊查找1. 使用星号（*）通配符（常用）1、第一个命令：使用 `-Filter` 参数（常用）2、第二个命令：使用管道和 `Where-Object`3、差异2. 使用问号（?）通配符（不常用）3. 结合使用星号和问号（不常用）4. 使…
阅读更多...
6. 开发板烧录

6. 开发板烧录

1. 概述 采用恒玄的底板+2小板的开发板 2. 开发板资料 详见：<<BES AUDIO DEV BOARD USER MANUUAL_9v5.pdf>> 3. 硬件接线 供电：可以采用电池供电，也可以采用Type-c供电 烧录：采用Type-C口，实际上就是串口。（下图带黑色标志的）
阅读更多...
VSCode+git的gitee仓库搭建

VSCode+git的gitee仓库搭建

​ 在此之前你已经在gitee创建好了账号&#xff0c;并新建了一个仓库。 1. 安装 Visual Studio Code Visual Studio Code 是编辑 Markdown 和站点配置文件的基础&#xff0c;以下将其简称为 VSCode&#xff0c;你可以在它的 官方网站 下载到它。 如若不理解各个版本之间的区别…
阅读更多...
编解码器架构

编解码器架构

一、定义 0、机器翻译是序列转换模型的一个核心问题&#xff0c; 其输入和输出都是长度可变的序列。 为了处理这种类型的输入和输出&#xff0c; 我们设计一个包含两个主要组件的架构&#xff1a; 第一个组件是一个编码器&#xff08;encoder&#xff09;&#xff1a; 它接受一…
阅读更多...
【Python实战因果推断】60_随机实验与统计知识2

【Python实战因果推断】60_随机实验与统计知识2

目录 An A/B Testing Example An A/B Testing Example 在许多公司中&#xff0c;一种常见的策略是提供廉价甚至免费的产品&#xff0c;这种产品本身可能并不盈利&#xff0c;但其目的是吸引新客户。一旦公司获得了这些客户&#xff0c;就可以向他们推销其他更盈利的产品&#x…
阅读更多...
k8s学习--k8s集群部署kubesphere的详细过程

k8s学习--k8s集群部署kubesphere的详细过程

文章目录 kubesphere简介k8s群集部署kubespere环境准备工作一、配置nfs二、配置storageclass三、kubesphere开启服务(devops) kubesphere简介 下面是官方文档描述 KubeSphere 是在 Kubernetes 之上构建的面向云原生应用的分布式操作系统&#xff0c;完全开源&#xff0c;支持多…
阅读更多...
《程序猿入职必会（7） · 前端请求工具封装》

《程序猿入职必会（7） · 前端请求工具封装》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…
阅读更多...
足浴行业押金原路退回怎么开通？

足浴行业押金原路退回怎么开通？

一手机版和电脑版差别 手机版押金管理的优点&#xff1a; 1. 便携性&#xff1a;管理人员可以随时随地通过手机查看和处理押金相关事务&#xff0c;不受地点限制。例如&#xff0c;当不在店内时&#xff0c;仍能及时了解押金的收支情况&#xff0c;对突发问题进行处理。 2. 实…
阅读更多...
深入解析食堂采购系统源码：打造高效食材供应链APP的核心

深入解析食堂采购系统源码：打造高效食材供应链APP的核心

本篇文章&#xff0c;笔者将从系统架构、关键模块、技术选型和优化策略等方面&#xff0c;深入解析食堂采购系统的源码&#xff0c;为您揭示打造高效食材供应链APP的核心要点。 一、系统架构 食堂采购系统通常采用分层架构&#xff0c;以保证系统的可维护性和扩展性。主要包括…
阅读更多...
糊涂工具包和commons包（Java）

糊涂工具包和commons包（Java）

工具包&#xff08;Commons-io&#xff09; 介绍&#xff1a; Commons是apache开源基金组织提供的工具包&#xff0c;里面有很多帮助我们提高开发效率的API 比如&#xff1a; StringUtils 字符串工具类 NumberUtils 数字工具类 ArrayUtils 数组工具类 RandomUtils…
阅读更多...
记录｜C#批量修改文件后缀

记录｜C#批量修改文件后缀

文章目录 前言一、.CHK 批量修改成 .mp3更新时间 前言 针对昨天博文&#xff1a;记录&#xff5c;cmd方式恢复U盘中的数据中的文件修复为.CHK格式后&#xff0c;如果将大量的.CHK后缀改为.mp3后缀的问题进行了编写。 主要是&#xff0c;现在网上的批量修改后缀的软件竟然要开会…
阅读更多...
基于微信小程序的校园二手交易平台/Java的二手交易网站/基于Javaweb校园二手商品交易系统（附源码）

基于微信小程序的校园二手交易平台/Java的二手交易网站/基于Javaweb校园二手商品交易系统（附源码）

摘 要 使用校园二手交易平台管理校园二手物品交易&#xff0c;不仅实现了智能化管理&#xff0c;还提高了管理员的管理效率&#xff0c;用户查询的功能也需要校园二手交易平台来提供。 设计校园二手交易平台是毕设的目标&#xff0c;校园二手交易平台是一个不断创新的系统&…
阅读更多...
大话成像公众号文章阅读学习（二）--- 下一代 AI-ISP会更好

大话成像公众号文章阅读学习（二）--- 下一代 AI-ISP会更好

系列文章目录 文章目录 系列文章目录前言一、AI-ISP1.1 定义与工作原理1.2 应用场景 二、展望总结 前言 这篇是 下一代 AI-ISP会更好 文章地址&#xff1a;https://mp.weixin.qq.com/s/N3YnkXF_stvP6k3jRTKCpQ 一、AI-ISP 1.1 定义与工作原理 定义&#xff1a;AI-ISP&#…
阅读更多...
【docker】x host+ 是干嘛用的

【docker】x host+ 是干嘛用的

先说结论&#xff1a; xhost 首先&#xff0c;xhost是允许外部应用程序连接到主机的X显示器&#xff1a; 其次&#xff0c;-v是挂载目录&#xff0c;用于在容器文件系统中挂载主机的X11显示器&#xff0c;以呈现输出视频。 那么x11显示器具体指的是什么&#xff1f; 在计算机…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023