CN111475155A - 一种基于图块的用于机器人交互的图形化编程的方法 - Google Patents

Abstract

本发明是一种基于图块的用于机器人交互的图形化编程的方法。所述方法为在网页源码中添加Blockly依赖库，并进行页面布局和配置；根据机器人的移动操作类型进行任务需求分析，确定所需图块，所需图块包含任务型图块和语句型图块；根据任务确定所需图块的数据接口，并设计自定义图块对象并引用，设计图块的外形和连接特性；根据设计自定义图块对象，根据自定义图块功能设计代码生成函数；进行图形化程序的处理，包括程序的运行、存取、发送和验证,实现对真实机器人的控制。本发明包含图形仿真，有助于对用户程序进行验证，从而最小化了真实机器人的误差。

Description

一种基于图块的用于机器人交互的图形化编程的方法

技术领域

本发明涉及机器人交互的图形化编程技术领域，是一种基于图块的用于机器人交互的图形化编程的方法。

背景技术

近年来，随着机器人技术的快速发展，机器人为人类的生产和生活提供了前所未有的便利，其应用领域越来越广泛，已经从科研、工业领域逐渐延伸到了航天、救灾、医疗、教育和家居餐饮等多个行业。然而，大多数专用机器人的编程和操作都相对复杂，应用门槛较高，需要使用者有较强的专业能力，需要对使用者进行繁琐的培训，这非常不利于机器人的进一步普及。如果想将机器人的强大功能提供给更广泛的潜在用户(比如应用于中小企业的小批量或个性化生产，或者为特种环境机器人的操作者(如航天员)等降低操作控制的心理压力)，就必须降低机器人的使用门槛。

为降低机器人的使用难度、提高交互性，一方面，研究人员在努力提升机器人的自主能力，使智能机器人能够在无人操作或干预的情况下通过融合多传感器信息和智能算法自主执行任务、完成工作；另一方面，面对非结构化的作业环境或复杂任务，智能机器人的开发难度高、研制成本大，且效果往往不是特别理想，而人机交互协作的方式更直观、更稳定、更安全。然而，提供了一系列便捷交互部件的传统型人机交互界面功能相对封闭，示教编程主要针对一些常规任务，它们都不是理想的解决方案。因此研究易用的、开放型的机器人编程交互方法，成为了机器人交互领域的热点问题。

传统的机器人编程多用于前期开发和离线调试，一般采用机器人专用编程语言，不适合推广到广大非专业用户的交互应用上。对于机器人交互应用，用户所需的是一种可以在线控制的简易方式。所谓编程交互，是为了使用户的操作更加灵活开放，它是在机器人底层运动控制功能完整的基础上来实现。有研究表明，人类对图形的辨识、理解和记忆能力远高于自然语言和专用编程语言，因此，图形化编程的方式简单易读，会使机器人的编程交互任务更容易实现，非常有利于编程效率的提升。目前，很多少儿编程教育机器人都采用了Scratch这种图形化的编程方式，尽管任务单一、用途局限，但图形化编程的有效性进一步表明了其在编程教育之外也将拥有更大潜力。基于可拖动组合图块的图形化编程方式，使用者无需敲击代码或是背诵任何编程指令，只需要将类似于积木的功能图块拖拽并连接在一起，就可以很方便的进行编程，从而快速制作出动画、游戏或交互程序。

发明内容

本发明为降低机器人编程交互的难度，提高机器人的易用性，本发明提供了一种基于图块的用于机器人交互的图形化编程的方法，本发明提供了以下技术方案：

一种基于图块的用于机器人交互的图形化编程的方法，包括以下步骤：

步骤1：在网页源码中添加Blockly依赖库，并进行页面布局和配置；

步骤2：根据机器人的移动操作类型进行任务需求分析，确定所需图块，所需图块包含任务型图块和语句型图块；

步骤3：根据任务确定所需图块的数据接口，并设计自定义图块对象并引用，设计图块的外形和连接特性；

步骤4：根据设计自定义图块对象，根据自定义图块功能设计代码生成函数；

步骤5：进行图形化程序的处理，包括程序的运行、存取、发送和验证,实现对真实机器人的控制。

优选地，所述步骤1具体为：在网页源码中添加Blockly依赖库，通过html文件确定Web页面，通过XML扩展标记语言进行自定义数据标记和设置，采用html中的head中的title来确定页面的标题，采用html中的link链接层叠样式表，通过html中的css文件来辅助布局页面，采用script来引用页面的基本依赖脚本；采用html中的div或者表格标签进行页面布局和配置；

通过div设置的子区域，根据位置和大小以百分比的形式进行类似的设置，在div设置的整个左侧区域，以table元素进行标签页、工具栏和编程区域的初步设置，在table中通过tr和td元素表达标签页，通过id和class设置标签页的样式，在标签页同一行中的右侧，设置常用的按钮图标，按钮用元素button表示，按钮依赖的图片在一级目录的文件夹media中各个按钮图标的样式同样由id和class在css文件中定义；

在blockly中，支持拖动的图块工具栏和编程区域作为一个工作空间，同样以div设置一个区域，div通过引入xml元素来改变图形化工作空间的细节；通过XML实现拖动图块的数据标记；

在html中的head中通过script code.js文件，作为对编程界面的基本配置文件，初始化一个Code.workspace字典对象，通过Blockly.inject向blockly工作区注入包含collapse、comments、disable、maxBlocks、trashcan、toolboxPosition、scrollbars、grid、rtl、toolbox和zoom键值对的选项，在页面通过/xml id＝"toolbox"style＝"display:none"></xml定义好图块工具栏结构；确定Code.init初始化函数，获得区域定位并计算调整显示区域大小，并通过window.add EventListener监听页面变化。

优选地，工作区对象中有addChangeListener和removeChangeListener用于监听事件流，外界面通过设置每个图块的onchange函数，使图块发生变动时被调用，通过addEventListener监听click事件来实现响应。

优选地，所述步骤2具体为：

根据机器人类型和基本任务类型，从任务型和语句型进行编程图块的需求分析；获取当前状态的传感器信息，根据视觉等反馈目标物体的位姿，判断是否可达；若不可达，则需要一个底盘移动图块；

进行语句型图块需求分析，语句型图块主要包含关节控制和末端笛卡尔控制，底盘不进行精细控制，因此只设置任务型图块。语句型编程图块需要包含机械臂的单关节控制块、笛卡尔直线轨迹控制块、笛卡尔圆弧轨迹控制块，手爪的抓取角度调整块等基本控制块以及延时语句块和施加力大小的辅助语句块；

针对机器人进行了运动学分析和运动规划，并对不同场景的任务进行控制模式预置，对机械臂进行逆解和基本运动规划，包括关节插值-三次多项式、五次多项式、样条函数等、笛卡尔路径规划-直线路径、圆弧路径和螺旋路径，将对机械臂进行逆解和基本运动规划写入task.js脚本中，task.js脚本和code.js放在项目的一级目录下的Js文件夹下，并以script引入到html文件的head中，减少用户图形化拖动编程时不必要的图块，增强用户程序的可读性。

优选地，当面对双臂机器人，有两个备选的抓取方案，即左手图块和右手图块，在抓取前，需要执行张开手爪的命令，向目标物体移动手臂；通过图块执行接近命令，使手爪处于抓取的位姿，通过抓握动作图块接触后提升物体。

优选地，所述步骤3具体为：包括以下步骤：

步骤3.1：根据确定的机器人所需的编程图块，每一个编程图块的功能确定编程图块所要保留的数据接口，数据接口类型包括String型、Number型、Boolean型、Array型和Color型；常用的接口有：方位名称、关节索引、关节角度、笛卡尔位姿值、规划类型名称和数学运算符；

步骤3.2：根据确定的数据接口，通过JSON或者JavaScript来设计图块的外形和连接特性，图块的类型名称通过Blockly.Blocks定义，通过init函数定义图块的基础外观和行为，采用this.appendDummyInput定义无嵌入式图块接口的图块形状；

采用this.appendValueInput定义含有内部嵌入式图块接口的图块形状；采用this.appendStatementInput定义含有半月包含式外部图块接口的图块形状；采用setCheck进行连接输入块的类型检查；采用setOutput设置图块输出并进行图块输出类型的设定；采用appendField添加输入或用作标签的任意数量的字段；采用newBlockly.FieldDropdown在appendField中用来添加下拉选项；采用newBlockly.FieldNumber用来添加数字字段，提供数字输入和验证；采用this.setPreviousStatement和this.setNextStatement分别设置图块的上下连接；采用setAlign设置图块文字的对齐方式；采用setColour设置图块的外观颜色，采用setTooltip设置图块的使用提示；采用setHelpUrl设置图块的帮助链接；

步骤3.3:通过category和block分别添加到图块工具箱的类别和块目录中，完成工具箱的引用。

优选地，所述步骤4具体为：

对图块添加代码生成函数，代码生成函数支持将编程图块解析成代码，采用JavaScript，放在项目一级目录下的generators文件夹中；通过block.getFieldValue获得块定义的下拉项值，通过Blockly.JavaScript.valueToCode获得块定义的数值输入；通过字符串和数据接口定义code，通过Blockly.JavaScript声明块类型名和图块定义对象相对应。

优选地，当在应用调用时，用户图块通过var code＝Blockly.JavaScript.workspaceToCode导出到文本代码，通过事件监听workspace.addChangeListener实现生成函数实时生成代码。

优选地，所述步骤5具体为：包括以下步骤：

步骤5.1:根据JavaScript提供eval，运行用户程序，进而使图形化程序执行；在code.js中定义快捷工具栏中运行按钮的事件监听函数，使按钮的点击事件触发一个Code.runBlocks从而执行用户图块程序：

采用blockly库文件storage.js实现页面中用户程序的记录，防止用户以外关闭应用后重新编写；利用createObjectURL函数创建一个Blob URL来实现将网页图形化程序对应的xml代码下载并存储为.xml格式的文件，并设置button放在工具栏中；

步骤5.2：创建Blob的FileReader变量，利用readAsText读取本地xml文件通过input type＝”file”作为读取本地文件的触发按钮，并将input>隐藏起来，在相同位置添加button图标；

步骤5.3:图形化通过Web页面的WebGL建立不依赖于服务器的机器人虚拟模型，基于WebSocket将验证后的图形化程序的数据指令以数据包的形式发送到机器人本体的下位机中，进行解析并处理，实现对真实机器人的控制。

本发明具有以下有益效果：

本发明依托开源库Blockly针对移动操作机器人进行了编程式交互图块设计，对常见的移动机器人和机械臂普遍适用，所设计的用户图形程序属于开放式交互系统客户端。本发明支持对图块进行拖拽组合操作，能够进行参数设置，简单易懂，适合非专业用户。该方法包含任务型图块，可以为常见的移动和操作任务节省拖动编程的时间，提高操作效率；本发明包含语句型图块，位于本机机器人编程语言之上，以便使编程更加直观和可访问，能够组合生成多样化任务指令，灵活便捷，任务适应性强，并且支持用户程序的记录与存储，从而为复杂机器人任务的交互提供了一种新方式。本发明包含图形仿真，有助于对用户程序进行验证，从而最小化了真实机器人的误差。

附图说明

图1为一种基于图块的用于机器人交互的图形化编程的方法流程图；

图2-(a)为图形化程序构造与布局示意图，图2-(b)为图形化程序文件依赖树示意图；

图3-(a)为机器人图块需求分析图，图3-(b)为机器人任务分解图；

图4为图块设计步骤图；

图5-(a)为任务图块实例图，图5-(b)为语句图块实例图，图5-(c)为分类的图块工具栏实例图；

图6为快捷工具栏图标实例图。

具体实施方式

以下结合具体实施例，对本发明进行了详细说明。

具体实施例一：

根据图1所示，本发明提供一种基于图块的用于机器人交互的图形化编程的方法，

一种基于图块的用于机器人交互的图形化编程的方法，包括以下步骤：

步骤1：在网页源码中添加Blockly依赖库，并进行页面布局和配置；

所述步骤1具体为：在网页源码中添加Blockly依赖库，通过html文件确定Web页面，通过XML扩展标记语言进行自定义数据标记和设置，采用html中的head中的title来确定页面的标题，采用html中的link链接层叠样式表，通过html中的css文件来辅助布局页面，采用script来引用页面的基本依赖脚本；采用html中的div或者表格标签进行页面布局和配置；

通过div设置的子区域，根据位置和大小以百分比的形式进行类似的设置，在div设置的整个左侧区域，以table元素进行标签页、工具栏和编程区域的初步设置，在table中通过tr和td元素表达标签页，通过id和class设置标签页的样式，在标签页同一行中的右侧，设置常用的按钮图标，按钮用元素button表示，按钮依赖的图片在一级目录的文件夹media中各个按钮图标的样式同样由id和class在css文件中定义；

在blockly中，支持拖动的图块工具栏和编程区域作为一个工作空间，同样以div设置一个区域，div通过引入xml元素来改变图形化工作空间的细节；通过XML实现拖动图块的数据标记；

在html中的head中通过script code.js文件，作为对编程界面的基本配置文件，初始化一个Code.workspace字典对象，通过Blockly.inject向blockly工作区注入包含collapse、comments、disable、maxBlocks、trashcan、toolboxPosition、scrollbars、grid、rtl、toolbox和zoom键值对的选项，在页面通过/xml id＝"toolbox"style＝"display:none"></xml定义好图块工具栏结构；确定Code.init初始化函数，获得区域定位并计算调整显示区域大小，并通过window.add EventListener监听页面变化。

工作区对象中有addChangeListener和removeChangeListener用于监听事件流，外界面通过设置每个图块的onchange函数，使图块发生变动时被调用，通过addEventListener监听click事件来实现响应。

步骤2：根据机器人的移动操作类型确定所需图块，进行任务型图块的需求分析，确定所需图块，所需图块包含任务型图块和语句型图块；

所述步骤2具体为：

根据机器人类型和基本任务类型，从任务型和语句型进行编程图块的需求分析；获取当前状态的传感器信息，根据视觉等反馈目标物体的位姿，判断是否可达；若不可达，则需要一个底盘移动图块。任务型图块通过标志位数据使机器人转向更高的自主性，编程人员只需针对拖动具体的小任务模块，进行必要的参数配置，即可控制机器人；而对于非预知型或者相对复杂的任务，则需编程人员通过语句性编程图块进行逻辑组合，以合成一组完整的任务动作。

进行语句型图块需求分析，语句型图块主要包含关节控制和末端笛卡尔控制，底盘不进行精细控制，因此只设置任务型图块。语句型编程图块需要包含机械臂的单关节控制块、笛卡尔直线轨迹控制块、笛卡尔圆弧轨迹控制块，手爪的抓取角度调整块等基本控制块以及延时语句块、施加力大小的辅助语句块；

针对机器人进行了运动学分析和运动规划，并对不同场景的任务进行控制模式预置，对机械臂进行逆解和基本运动规划，包括关节插值-三次多项式、五次多项式、样条函数等、笛卡尔路径规划-直线路径、圆弧路径和螺旋路径，将对机械臂进行逆解和基本运动规划写入task.js脚本中，task.js脚本和code.js放在项目的一级目录下的Js文件夹下，并以script引入到html文件的head中，减少用户图形化拖动编程时不必要的图块，增强用户程序的可读性。

当面对双臂机器人，有两个备选的抓取方案，即左手图块和右手图块，在抓取前，需要执行张开手爪的命令，向目标物体移动手臂；通过图块执行接近命令，使手爪处于抓取的位姿，通过抓握动作图块接触后提升物体。

步骤3：根据任务确定所需图块的数据接口，并设计自定义图块对象并引用，设计图块的外形和连接特性；

所述步骤3具体为：包括以下步骤：

步骤3.1：根据确定的机器人所需的编程图块，每一个编程图块的功能确定编程图块所要保留的数据接口，数据接口类型包括String型、Number型、Boolean型、Array型和Color型；常用的接口有：方位名称、关节索引、关节角度、笛卡尔位姿值、规划类型名称和数学运算符；

步骤3.2：根据确定的数据接口，通过JSON或者JavaScript来设计图块的外形和连接特性，图块的类型名称通过Blockly.Blocks定义，通过init函数定义图块的基础外观和行为，采用this.appendDummyInput定义无嵌入式图块接口的图块形状；

采用this.appendValueInput定义含有内部嵌入式图块接口的图块形状；采用this.appendStatementInput定义含有半月包含式外部图块接口的图块形状；采用setCheck进行连接输入块的类型检查；采用setOutput设置图块输出并进行图块输出类型的设定；采用appendField添加输入或用作标签的任意数量的字段；采用newBlockly.FieldDropdown在appendField中用来添加下拉选项；采用newBlockly.FieldNumber用来添加数字字段，提供数字输入和验证；采用this.setPreviousStatement和this.setNextStatement分别设置图块的上下连接；采用setAlign设置图块文字的对齐方式；采用setColour设置图块的外观颜色，采用setTooltip设置图块的使用提示；采用setHelpUrl设置图块的帮助链接；

步骤3.3:通过category和block分别添加到图块工具箱的类别和块目录中，完成工具箱的引用。

步骤4：根据设计自定义图块对象，根据自定义图块功能设计代码生成函数；

所述步骤4具体为：

对图块添加代码生成函数，代码生成函数支持将编程图块解析成代码，采用JavaScript，放在项目一级目录下的generators文件夹中；通过block.getFieldValue获得块定义的下拉项值，通过Blockly.JavaScript.valueToCode获得块定义的数值输入；通过字符串和数据接口定义code，通过Blockly.JavaScript声明块类型名和图块定义对象相对应。当在应用调用时，用户图块通过var code＝Blockly.JavaScript.workspaceToCode导出到文本代码，通过事件监听workspace.addChangeListener实现生成函数实时生成代码。

步骤5：进行图形化程序的处理，包括程序的运行、存取、发送和验证,实现对真实机器人的控制。

所述步骤5具体为：包括以下步骤：

步骤5.1:根据JavaScript提供eval，运行用户程序，进而使图形化程序执行；在code.js中定义快捷工具栏中运行按钮的事件监听函数，使按钮的点击事件触发一个Code.runBlocks从而执行用户图块程序：

采用blockly库文件storage.js实现页面中用户程序的记录，防止用户以外关闭应用后重新编写；利用createObjectURL函数创建一个Blob URL来实现将网页图形化程序对应的xml代码下载并存储为.xml格式的文件，并设置button放在工具栏中；

步骤5.2：创建Blob的FileReader变量，利用readAsText读取本地xml文件通过input type＝”file”作为读取本地文件的触发按钮，并将input>隐藏起来，在相同位置添加button图标；

步骤5.3:图形化通过Web页面的WebGL建立不依赖于服务器的机器人虚拟模型，基于WebSocket将验证后的图形化程序的数据指令以数据包的形式发送到机器人本体的下位机中，进行解析并处理，实现对真实机器人的控制。

具体实施例二：

本实施方法所述的是一种基于图块的图形化编程方法，包括如下步骤：

步骤1、在网页源码中添加Blockly依赖库并进行页面布局和配置；

基于动态语言JavaScript设计，可拖动的图块依赖Blockly设计。Blockly是一种基于JavaScript开发的开源网页拖动图块编辑器，每个块作为程序的基本单元，能够以拖拽的形式组合联锁，它支持Web、安卓、IOS系统以及其他软件环境，主要利用其能够为代码生成提供支持，默认支持JavaScript、Python、PHP等编程语言的生成。在此基础上，本方法进行面向机器人的专业编程图块设计。如图2所示，本方法基于Web设计实现。

如图2(a)所示，首先布局页面的基本显示。Web页面由html文件确定，html称为超文本标记语言，是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，且能够通过XML扩展标记语言进行自定义数据标记和设置。html标签主要包含<head>，<body>，<title>，<link>，<script>和<div>等，其中在<head>中可以用<title>来定义页面的标题，用<link>链接层叠样式表.css文件来辅助布局页面，用<script>来引用页面的基本依赖脚本；在<body>中，用<div>或者表格标签等方法来进行具体布局。

基于div+CSS方法进行布局。div+CSS是将不同功能页面融合到同一窗体的技术，div划分窗口区域，CSS设置样式风格，窗口本身即是一个文档，不存在窗体间的信息交换。.css文件放在一级目录的文件夹css中，在.css文件中，定义元素body的margin、border和padding为零，html和body的宽高以百分比形式设置，以使编程应用的页面占据浏览器全屏的一定比例。<div>元素用来划分元素body下的子区域，通过对<div>设置不同的id或者class来进行区分以便对不同的div区域进行不同的样式设置。在css中，对整体<div>区域进行设置如下：

其余通过<div>设置的子区域，根据位置和大小以百分比的形式进行类似的设置。另外，为实现窗口大小变动的自适应效果，在界面的js文件中添加窗口变动触发程序，使用getElementById命令根据页面相应区域的id获取该区域的长宽情况。

在<div>设置的整个左侧区域，以<table>元素进行标签页、工具栏和编程区域的初步设置。在<table>中通过<tr>(行)和<td>(列)元素表达标签页，同样通过id和class设置标签页的样式：td.tabon定义选中并展开的标签页，td.taboff定义未展开的标签页。在标签页同一行中的右侧，设置几个常用的按钮图标，按钮用元素<button>表示，按钮依赖的图片在一级目录的文件夹media中。各个按钮图标的样式同样由id和class在css文件中定义。

在blockly中，支持拖动的图块工具栏和编程区域被定义为一个工作空间，同样以<div>设置一个区域(<div id＝"content_blocks"class＝"content"></div>)，<div>通过引入<xml>元素来定义图形化工作空间的细节。拖动图块的数据标记本质上就是通过XML实现的。

如图2(b)所示，图块依赖blockly实现，需要在html源码中为它引入依赖的脚本。首先需要在<head>元素中通过<script>引入blockly脚本、“块”核心脚本以及js代码生成器脚本：

<script src＝"blockly_compressed.js"></script>

<script src＝"blocks_compressed.js"></script>

<script src＝"javascript_compressed.js"></script>

另外，编程界面提供简体中文和英文两种语言，由blockly包中的zh-hans.js和en.js实现(zh-hans.js和en.js文件放在一级目录的文件夹msg中，通过<script src＝"msg/en.js"></script>加入依赖)，并通过<select id＝"languageMenu"></select>提供语言选择接口，同时在js文件中声明：

在<head>中通过<script>引入图2(b)中的code.js文件，作为对编程界面的基本配置文件。初始化一个Code.workspace字典对象，通过Blockly.inject向blockly工作区注入包含collapse、comments、disable、maxBlocks、trashcan、toolboxPosition、scrollbars、grid、rtl、toolbox和zoom等键值对的选项，其中最重要的是toolbox，它是一个XML节点树，用于指定工具箱中有哪些可用的“块”、图块的分布、以及属于什么类别等。在页面通过</xml id＝"toolbox"style＝"display:none"></xml>定义好“图块工具栏”结构。另外定义一个Code.init初始化函数，获得区域定位并计算调整显示区域大小，并通过window.addEventListener('resize',onresize,false)监听页面变化。

工作区对象(Code.workspace)中有addChangeListener和removeChangeListener两个方法，可用于监听事件流。另外界面通过设置每个图块的onchange函数，使图块发生变动时被调用。快捷按钮通过addEventListener监听click事件来实现响应。

步骤二、根据机器人的移动操作类型确定所需图块，主要包含任务型图块和语句型图块；

根据机器人类型和基本任务类型，从任务型和语句型两方面进行编程图块的需求分析。如图3(a)所示，以具有普遍适用性的移动操作机器人为例，兼顾移动功能和臂手操作功能。首先进行任务型图块的需求分析，移动操作机器人主要包含移动任务和操作任务两大类型，二者分别控制，可以降低控制难度，提高控制的稳定性。下面以抓取任务为例，说明任务型图块的需求分析方法。

如图3(b)所示，为完成一项抓取任务，机器人首先获取当前状态的传感器信息，根据视觉等反馈目标物体的位姿，判断是否可达；若不可达，则需要一个底盘移动图块；面对双臂机器人，可以有两个备选的抓取方案，即左手图块和右手图块，其基本方法相同；抓取前，需要执行张开手爪的命令，然后向目标物体移动手臂；下一步需要图块执行接近命令，逐步接近使手爪处于适合抓取的位姿，然后需要抓握动作图块，接触后需要提升物体。

其次进行语句型图块需求分析。语句型相当于将任务型图块模块进一步细化，每一个图块都类似于一个文本类型的编程语句，不专门针对某一个任务或者子任务进行表示。另外还需要一些设置型的图块，比如设置控制模式、设置阈值等。语句型图块的功能主要包含关节控制和末端笛卡尔控制，底盘不进行精细控制，因此只设置任务型图块。因此，语句型编程图块需要包含机械臂的单关节控制块、笛卡尔直线轨迹控制块、笛卡尔圆弧轨迹控制块，手爪的抓取角度调整块等基本控制块以及延时语句块、施加力大小等辅助语句块。任务型图块任务针对性强，图块一般不可在多种任务下复用，而语句型图块正好弥补了任务型图块的不足，可以组合编程得到更复杂、更多样化的任务。

编程图块功能的实现，其基础是针对该机器人进行了运动学分析和运动规划，并对不同场景的任务进行控制模式预置。因此需要对机械臂进行逆解和基本运动规划(关节插值-三次多项式、五次多项式、样条函数等、笛卡尔路径规划-直线路径、圆弧路径、螺旋路径等)，在此不赘述。所有的相关程序都写在task.js脚本中，该脚本和code.js一样放在项目的一级目录下的Js文件夹下，并以<script>引入到html文件的<head>中，这样就可以使用户的图块程序调用脚本程序中的函数方法，减少用户图形化拖动编程时不必要的图块，增强用户程序的可读性。

步骤三、根据常见任务确定所需图块的数据接口，设计自定义图块对象并引用；

在确定了机器人所需的编程图块后，可以根据每一个编程图块的功能去明确该图块所要保留的数据接口，以方便操作者进行必要的参数设置和修改。常用的数据接口类型有：String型、Number型、Boolean型、Array型和Color型等。常用的接口有：方位名称、关节索引、关节角度、笛卡尔位姿值、规划类型名称、数学运算符等。

根据图4所示，结合所确定的数据接口，可以通过JSON或者JavaScript来定义块，即设计图块的外形和连接特性等，自定义的blocks程序放在项目一级目录下的blocks文件夹中。块的类型名称通过Blockly.Blocks[]定义，因blockly中所有图块都共享同一命名空间，所以图块类型名称应避免重复。init函数定义图块的基础外观和行为，其中，应用this.appendDummyInput()方法定义无嵌入式图块接口的图块形状，this.appendValueInput()方法定义含有内部嵌入式图块接口的图块形状，this.appendStatementInput()方法定义含有半月包含式外部图块接口的图块形状；setCheck()进行连接输入块的类型检查；setOutput(true,'Number')设置图块输出并进行图块输出类型的设定，如Number型数据；appendField()添加输入或用作标签的任意数量的字段；new Blockly.FieldDropdown([["1","OPTION1"],["2","OPTION2"]]),"JOINT")在appendField()中用来添加下拉选项；new Blockly.FieldNumber用来添加数字字段，提供数字输入和验证，阴影显示数字输入框的形式可以减少用户的拖动次数；this.setPreviousStatement(true,null)和this.setNextStatement(true,null方法分别设置图块的上下连接；setAlign设置图块文字的对齐方式；setColour()设置图块的外观颜色，setTooltip设置图块的使用提示；setHelpUrl("")设置图块的帮助链接。

完成图块的定义后，使用定义的类型名，将其通过<category>和<block>分别添加到图块工具箱的类别和块目录中，完成工具箱的引用。定义的图块实例如图5(a)、图5(b)和图5(c)所示。

步骤四、根据自定义图块功能设计代码生成函数；定义并引用了图块后，向图块添加代码生成函数，代码生成函数支持将编程图块解析成代码，本方法采用标准的代码生成器，故采用JavaScript，放在项目一级目录下的generators文件夹中。其中，通过block.getFieldValue()获得块定义的下拉项值，通过Blockly.JavaScript.valueToCode()，获得块定义的数值输入；通过字符串和数据接口定义code，通过Blockly.JavaScript[]声明块类型名，与块定义对象相对应。应用调用时，用户图块可以通过var code＝Blockly.JavaScript.workspaceToCode(workspace)随时导出到文本代码。通过事件监听workspace.addChangeListener()来实现生成函数实时生成代码。

步骤五、进行图形化程序的处理，包括程序的运行、存取、发送和验证；

根据图6所示，JavaScript提供eval()方法，可以运行用户程序，进而使图形化程序执行。本方法在code.js中定义快捷工具栏中运行按钮的事件监听函数，使按钮的点击事件触发一个Code.runBlocks()方法从而执行用户图块程序：

图形化编程方法采用blockly库文件storage.js实现页面中用户程序的记录，以防止用户以外关闭应用后重新编写。JS的Blob技术可以将网页内容存储到内存或磁盘上。本方法利用createObjectURL()函数创建一个Blob URL来实现将网页图形化程序对应的xml代码下载并存储为.xml格式的文件。对应的设置<button>放在工具栏中。进一步地，创建Blob的FileReader()变量，利用readAsText()读取本地xml文件。由于浏览器安全限制，只有通过<input type＝”file”>作为读取本地文件的触发按钮，但它不能添加img图片，与其他工具栏按钮并不协调。因此，提出按钮叠加法解决该问题，即将<input>隐藏起来，并于相同位置添加<button>图标。

用户的图形化程序可以通过Web页面的WebGL建立不依赖于服务器的机器人虚拟模型，从而仿真验证用户的图形化程序的正确性。进一步地，基于WebSocket将验证后的图形化程序的数据指令以数据包的形式发送到机器人本体的下位机中，进行解析并处理，实现对真实机器人的控制。

以上所述仅是一种基于图块的用于机器人交互的图形化编程的方法的优选实施方式，一种基于图块的用于机器人交互的图形化编程的方法的保护范围并不仅局限于上述实施例，凡属于该思路下的技术方案均属于本发明的保护范围。应当指出，对于本领域的技术人员来说，在不脱离本发明原理前提下的若干改进和变化，这些改进和变化也应视为本发明的保护范围。

Claims (9)

1.一种基于图块的用于机器人交互的图形化编程的方法，其特征是：包括以下步骤：

步骤1：在网页源码中添加Blockly依赖库，并进行页面布局和配置；

步骤2：根据机器人的移动操作类型，进行任务需求分析，确定所需图块，所需图块包含任务型图块和语句型图块；

步骤3：根据任务确定所需图块的数据接口，并设计自定义图块对象并引用，设计图块的外形和连接特性；

步骤4：根据设计自定义图块对象，根据自定义图块功能设计代码生成函数；

步骤5：进行图形化程序的处理，包括程序的运行、存取、发送和验证,实现对真实机器人的控制。

2.根据权利要求1所述的一种基于图块的用于机器人交互的图形化编程的方法，其特征是：所述步骤1具体为：在网页源码中添加Blockly依赖库，通过html文件确定Web页面，通过XML扩展标记语言进行自定义数据标记和设置，采用html中的head中的title来确定页面的标题，采用html中的link链接层叠样式表，通过html中的css文件来辅助布局页面，采用script来引用页面的基本依赖脚本；采用html中的div或者表格标签进行页面布局和配置；

通过div设置的子区域，根据位置和大小以百分比的形式进行类似的设置，在div设置的整个左侧区域，以table元素进行标签页、工具栏和编程区域的初步设置，在table中通过tr和td元素表达标签页，通过id和class设置标签页的样式，在标签页同一行中的右侧，设置常用的按钮图标，按钮用元素button表示，按钮依赖的图片在一级目录的文件夹media中各个按钮图标的样式同样由id和class在css文件中定义；

在blockly中，支持拖动的图块工具栏和编程区域作为一个工作空间，同样以div设置一个区域，div通过引入xml元素来改变图形化工作空间的细节；通过XML实现拖动图块的数据标记；

在html中的head中通过script code.js文件，作为对编程界面的基本配置文件，初始化一个Code.workspace字典对象，通过Blockly.inject向blockly工作区注入包含collapse、comments、disable、maxBlocks、trashcan、toolboxPosition、scrollbars、grid、rtl、toolbox和zoom键值对的选项，在页面通过/xml id＝"toolbox"style＝"display:none"></xml定义好图块工具栏结构；确定Code.init初始化函数，获得区域定位并计算调整显示区域大小，并通过window.add EventListener监听页面变化。

3.根据权利要求2所述的一种基于图块的用于机器人交互的图形化编程的方法，其特征是：工作区对象中有addChangeListener和removeChangeListener用于监听事件流，外界面通过设置每个图块的onchange函数，使图块发生变动时被调用，通过addEventListener监听click事件来实现响应。

4.根据权利要求1所述的一种基于图块的用于机器人交互的图形化编程的方法，其特征是：所述步骤2具体为：

根据机器人类型和基本任务类型，从任务型和语句型进行编程图块的需求分析；获取当前状态的传感器信息，根据视觉等反馈目标物体的位姿，判断是否可达；若不可达，则需要一个底盘移动图块；

进行语句型图块需求分析，语句型图块主要包含关节控制和末端笛卡尔控制，底盘不进行精细控制，因此只设置任务型图块，语句型编程图块需要包含机械臂的单关节控制块、笛卡尔直线轨迹控制块、笛卡尔圆弧轨迹控制块，手爪的抓取角度调整块等基本控制块以及延时语句块和施加力大小的辅助语句块；

针对机器人进行了运动学分析和运动规划，并对不同场景的任务进行控制模式预置，对机械臂进行逆解和基本运动规划，包括关节插值-三次多项式、五次多项式、样条函数等、笛卡尔路径规划-直线路径、圆弧路径和螺旋路径，将对机械臂进行逆解和基本运动规划写入task.js脚本中，task.js脚本和code.js放在项目的一级目录下的Js文件夹下，并以script引入到html文件的head中，减少用户图形化拖动编程时不必要的图块，增强用户程序的可读性。

5.根据权利要求4所述的一种基于图块的用于机器人交互的图形化编程的方法，其特征是：

当面对双臂机器人，有两个备选的抓取方案，即左手图块和右手图块，在抓取前，需要执行张开手爪的命令，向目标物体移动手臂；通过图块执行接近命令，使手爪处于抓取的位姿，通过抓握动作图块接触后提升物体。

6.根据权利要求1所述的一种基于图块的用于机器人交互的图形化编程的方法，其特征是：所述步骤3具体为：包括以下步骤：

步骤3.1：根据确定的机器人所需的编程图块，每一个编程图块的功能确定编程图块所要保留的数据接口，数据接口类型包括String型、Number型、Boolean型、Array型和Color型；常用的接口有：方位名称、关节索引、关节角度、笛卡尔位姿值、规划类型名称和数学运算符；

步骤3.2：根据确定的数据接口，通过JSON或者JavaScript来设计图块的外形和连接特性，图块的类型名称通过Blockly.Blocks定义，通过init函数定义图块的基础外观和行为，采用this.appendDummyInput定义无嵌入式图块接口的图块形状；

采用this.appendValueInput定义含有内部嵌入式图块接口的图块形状；采用this.appendStatementInput定义含有半月包含式外部图块接口的图块形状；采用setCheck进行连接输入块的类型检查；采用setOutput设置图块输出并进行图块输出类型的设定；采用appendField添加输入或用作标签的任意数量的字段；采用newBlockly.FieldDropdown在appendField中用来添加下拉选项；采用newBlockly.FieldNumber用来添加数字字段，提供数字输入和验证；采用this.setPreviousStatement和this.setNextStatement分别设置图块的上下连接；采用setAlign设置图块文字的对齐方式；采用setColour设置图块的外观颜色，采用setTooltip设置图块的使用提示；采用setHelpUrl设置图块的帮助链接；

步骤3.3:通过category和block分别添加到图块工具箱的类别和块目录中，完成工具箱的引用。

7.根据权利要求1所述的一种基于图块的用于机器人交互的图形化编程的方法，其特征是：所述步骤4具体为：

对图块添加代码生成函数，代码生成函数支持将编程图块解析成代码，采用JavaScript，放在项目一级目录下的generators文件夹中；通过block.getFieldValue获得块定义的下拉项值，通过Blockly.JavaScript.valueToCode获得块定义的数值输入；通过字符串和数据接口定义code，通过Blockly.JavaScript声明块类型名和图块定义对象相对应。

8.根据权利要求7述的一种基于图块的用于机器人交互的图形化编程的方法，其特征是：当在应用调用时，用户图块通过var code＝Blockly.JavaScript.workspaceToCode导出到文本代码，通过事件监听workspace.addChangeListener实现生成函数实时生成代码。

9.根据权利要求1所述的一种基于图块的用于机器人交互的图形化编程的方法，其特征是：所述步骤5具体为：包括以下步骤：

步骤5.1:根据JavaScript提供eval，运行用户程序，进而使图形化程序执行；在code.js中定义快捷工具栏中运行按钮的事件监听函数，使按钮的点击事件触发一个Code.runBlocks从而执行用户图块程序：

采用blockly库文件storage.js实现页面中用户程序的记录，防止用户以外关闭应用后重新编写；利用createObjectURL函数创建一个Blob URL来实现将网页图形化程序对应的xml代码下载并存储为.xml格式的文件，并设置button放在工具栏中；

步骤5.2：创建Blob的FileReader变量，利用readAsText读取本地xml文件通过inputtype＝”file”作为读取本地文件的触发按钮，并将input>隐藏起来，在相同位置添加button图标；

步骤5.3:图形化通过Web页面的WebGL建立不依赖于服务器的机器人虚拟模型，基于WebSocket将验证后的图形化程序的数据指令以数据包的形式发送到机器人本体的下位机中，进行解析并处理，实现对真实机器人的控制。

Images