当前位置: 首页 > news >正文

探索 Blockly:自定义积木实例

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

相关文章:

探索 Blockly:自定义积木实例

3.实例 3.1.基础块 无输入 , 无输出 3.1.1.json var textOneJson {"type": "sql_test_text_one","message0": " one ","colour": 30,"tooltip": 无输入 , 无输出 };javascriptGenerator.forBlock[sql_test_te…...

MongoDB教程(二十三):关于MongoDB自增机制

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、MongoD…...

展馆导览系统架构解析,从需求分析到上线运维

在物质生活日益丰富的当下&#xff0c;人们对精神世界的追求愈发强烈&#xff0c;博物馆、展馆、纪念馆等场所成为人们丰富知识、滋养心灵的热门选择。与此同时&#xff0c;人们对展馆的导航体验也提出了更高要求&#xff0c;展馆导览系统作为一种基于室内外地图相结合的位置引…...

Servlet详解(超详细)

Servlet详解 文章目录 Servlet详解一、基本概念二、Servlet的使用1、创建Servlet类2、配置Servleta. 使用web.xml配置b. 使用注解配置 3、部署Web应用4、处理HTTP请求和生成响应5、处理表单数据HTML表单Servlet 6、管理会话 三、servlet生命周期1、加载和实例化2、初始化3、 请…...

Meta AI引入Imagine Me功能,上传图片输入提示词即可实现个性化照片

AITOP100平台获悉&#xff0c;Meta 公司在 AI 领域再次迈出了重要的步伐&#xff0c;其发布的 Llama 3.1 开源 AI 模型以及对 Meta AI 功能的更新扩充引发了广泛关注。 其中&#xff0c;新引入的“Imagine Me”功能尤为引人注目。在这一功能下&#xff0c;美国地区的用户只需上…...

常用自启设置

一、开机自启动 1、编辑 vi /lib/systemd/system/nginx.service 文件&#xff0c;没有创建一个 touch nginx.service 然后将如下内容根据具体情况进行修改后&#xff0c;添加到nginx.service文件中&#xff1a; [Unit] Descriptionnginx Afternetwork.target remote-fs.targ…...

模块与组件、模块化与组件化的理解

在React或其他现代JavaScript框架中&#xff0c;模块与组件、模块化与组件化是核心概念&#xff0c;它们对于提高代码的可维护性、复用性和开发效率具有重要意义。以下是对这些概念的理解&#xff1a; 模块与组件 模块&#xff08;Module&#xff09; 定义&#xff1a;模块是…...

Rust:cargo的常用命令

1.查看版本 $ cargo --version cargo 1.79.0 (ffa9cf99a 2024-06-03) 2.创建新的项目 $ cargo new hello 创建后的目录结构为 $ tree hello/ hello/ ├── Cargo.toml └── src └── main.rs 3.运行项目 $ cd hello $ cargo run Compiling hello v0.1.0 (/home/c…...

LeetCode 3106.满足距离约束且字典序最小的字符串:模拟(贪心)

【LetMeFly】3106.满足距离约束且字典序最小的字符串&#xff1a;模拟&#xff08;贪心&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/lexicographically-smallest-string-after-operations-with-constraint/ 给你一个字符串 s 和一个整数 k 。 定义函…...

Elasticsearch 与 MySQL 在查询和插入性能上的深度剖析

在当今的数据处理领域&#xff0c;选择合适的数据库对于应用的性能和效率至关重要。Elasticsearch 和 MySQL 作为两款常用的数据库&#xff0c;它们在查询和插入操作上的性能表现各有千秋。本文将对这两款数据库在这两个关键操作上进行详细的对比分析。 一、引言 随着数据量的…...

day4 vue2以及ElementUI

创建vue2项目 可能用到的命令行们 vue create 项目名称 // 创建项目 cd 项目名称 // 只有进入项目下&#xff0c;才能运行 npm run serve // 运行项目 D: //切换盘符 cd .. // 返回到上一级目录 clear // 清空终端 更改 Vue项目的端口配置 基础语法 项目创建完成之后&#…...

把redis用在Java项目

1. Java连接redis Java连接redis的方式是通过jedis&#xff0c;连接redis需要遵循jedis协议。 1.1 引入依赖 <!--引入java连接redis的驱动--><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version&…...

GORM:优雅的Go语言ORM库

文章目录 引言GORM原理基础使用安装GORM定义模型连接数据库CRUD操作 高级使用关联事务回调 优点结论 引言 在Go语言开发中&#xff0c;数据库操作是不可或缺的一部分。虽然直接使用SQL语句可以灵活地与数据库交互&#xff0c;但随着项目规模的扩大&#xff0c;SQL语句的编写、…...

Golang | Leetcode Golang题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; // 判断是否为完全平方数 func isPerfectSquare(x int) bool {y : int(math.Sqrt(float64(x)))return y*y x }// 判断是否能表示为 4^k*(8m7) func checkAnswer4(x int) bool {for x%4 0 {x / 4}return x%8 7 }func numSquares(n int) i…...

Oracle系统表空间的加解密

实验环境 数据库选择的是orclpdb1&#xff0c;当前系统表空间未加密&#xff1a; SQL> show con_nameCON_NAME ------------------------------ ORCLPDB1SQL> select TABLESPACE_NAME, STATUS, ENCRYPTED from dba_tablespaces;TABLESPACE_NAME STATUS …...

pytorch backbone

1 简介 在PyTorch深度学习中&#xff0c;预训练backbone&#xff08;骨干网络&#xff09;是一个常见的做法&#xff0c;特别是在处理图像识别、目标检测、图像分割等任务时。预训练backbone通常是指在大型数据集&#xff08;如ImageNet&#xff09;上预先训练好的卷积神经网络…...

uniapp 开发app使用renderjs操作dom

需求&#xff1a;把页面中的对话内容另存为一张图片保存到手机相册。 解决方案&#xff1a;这时我们需要使用到document对象创建一个dom对象计算对话内容的宽高、位置等&#xff0c;再利用canvas能力将内容绘制绘制成一张图保存。 现状&#xff1a;总所周知&#xff0c;非H5端&…...

【面试题】MySQL `EXPLAIN`的`Extra`字段:深入解析查询优化的隐藏信息

MySQL EXPLAIN的Extra字段&#xff1a;深入解析查询优化的隐藏信息 引言 在MySQL的EXPLAIN输出中&#xff0c;Extra字段提供了关于查询执行计划的额外信息。这些信息对于理解查询的内部工作机制和优化查询性能至关重要。本文将详细解析Extra字段中常见的几个关键指标&#xf…...

Jenkins持续部署

开发环境任务的代码只要有更新&#xff0c;Jenkins会自动获取新的代码并运行 1. pycharm和git本地集成 获取到下面的 Git可执行文件路径 2. pycharm和gitee远程仓库集成 先在pycharm中安装gitee插件 在设置中找到gitee&#xff0c;点击添加账户&#xff0c;并将自己的账户添…...

橙单前端项目下载编译遇到的问题与解决

今天下载orange-admin前端项目&#xff0c;不过下载下来运行也出现一些问题。 1、运行出现下面一堆错误&#xff0c;如下&#xff1a; 2、对于下面这个错误 error Expected linebreaks to be LF but found CRLF linebreak-style 这就是eslint的报错了&#xff0c;可能是原作者…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...