ABSTRACT

Aiming at the in-depth study of programming languages by elementary and middle school students, and to cultivate programming thinking from an early age, it is necessary to use graphical block programming to train. Now designing a kind of block type graphical programming software, the design content includes the design of graphical programming interface, the customization of the block, the writing of the Robobasic code corresponding to the interpretation block, and the connection between the software and the Robobasic software, further realizing the online programming of the hardware, debugging, and at the same time can communicate with the lower-level robot control board designed and developed by itself, to complete the various programming control implementation of AI. The graphics program written in the graphic building block type can be converted into Basic code, open and compile or edit in the Robobasic software. You can learn both graphic and code at the same time.

Keywords:Graphic Programming, Robot, Robobasic

一种图形化积木式编程软件的设计

郭欢，王清珍

郑州科技学院信息工程学院，河南 郑州

收稿日期：2020年1月10日；录用日期：2020年1月24日；发布日期：2020年1月31日

摘 要

针对中小学生对编程语言学习的深入度不够，又要从小培养编程思维，就需要利用图形化积木式编程方式进行训练。现设计一种积木式图形化编程软件，设计内容包括图形化编程界面的设计、积木块的定制、解释块所对应Robobasic代码的编写及该软件与Robobasic软件的连接，进一步实现了硬件的在线编程、调试，同时可以与自行设计开发的下位机器人控制板进行通信，以完成AI的各种编程控制实现。图形化积木式编写的图形程序可以转化成Basic代码在Robobasic软件中打开编译或者编辑，可同时结合图形化和代码两种方式进行学习。

关键词 :图形化编程，机器人，Robobasic

Copyright © 2020 by author(s) and Hans Publishers Inc.

This work is licensed under the Creative Commons Attribution International License (CC BY).

http://creativecommons.org/licenses/by/4.0/

1. 引言

我国最近几年下发的政府文件中多次提到重视创客教育和信息技术课程规划，学生通过学习编程，充分发挥自己的逻辑思维能力，从而最大程度地实现自己的创意，并在运行、调试程序过程中，培养自己问题解决的批判性思维能力 [1] ，另外在编程课中引入了计算思维 [2] ，主要是让学生掌握算法，学会使用合理、有效的算法形成解决问题的方案，并学会知识点的迁移，从而掌握问题解决的方案，要在中小学阶段设置相关AI课程，逐步推进编程教育 [3] ，在寓教于乐的教学中学会编程。目前国内外大部分教育用编程软件产品针对不同基础和年龄进行设计开发，提供了非常丰富的课程和学习方案，但是并没有将适用零基础的图形化编程无缝扩展至简单语言编程。在国外，在图形化编程领域研究较多的是由麻省理工学院所设计研发完成的Scratch，Scratch是面向儿童的图形化编程软件工具 [4] ，通过搭建积木块的方式实现C语言代码的编写，基于Arduino控制板来控制硬件，使学生学习变得轻松，而且培养了解决复杂问题的编程素养。在国内Mixly (米思齐)是由北师大创客教育实验室傅骞教授团队开发的一种图形化编程软件，它是基于Google Blockly核心，支持大部分Arduino硬件 [5] ，这种图形化界面对于中小学生来说比较友好，比较容易理解并且这种搭建积木的方式就可以对机器人进行编程，更容易激发中小学生的学习兴趣，以至于现如今已逐渐流行起来。但是Scratch和Mixly都共同针对于Arduino板进行开发的，尚有一定的不足之处，对处理视频和音频等信息量比较大的数据就有一定的局限性；另外智能机器人属于多关节、多自由度控制才能实现，而Arduino板的输入输出PWM口有限，满足不了多自由度的智能机器人的需求；针对多自由度的智能机器人，每个自由度的驱动实现是由舵机完成的，舵机是数字装置，从而所需数字输出PWM口就比较多，所以针对这种不足，该软件在基于图形化编程的基础上针对于智能机器人运动控制板和数据处理控制板进行开发，能满足智能机器人自由度的需求和音视频、物联网及位置等数据的处理需求。

本编程软件实现的教育机器人编程设计方案，将图形化、解释型两种类别编程语言融为一体，让学生在进行人工智能和智能机器人编程时，能够将两类编程方法对比分析，更好的掌握机器人编程。3~5年级的小学生可以进行图形化编程，接触编程，理解编程思维，认识简单硬件的控制原理，到了5~6年用基本编程语言Basic进行编程，可简化控制的表达，通过编程语言编程，循序渐进，不断深入学习研究，为更复杂的机器人控制编程打下基础。

2. 编程软件总体设计

2.1. 编程软件操作界面

软件界面由HTML、CSS和JavaScript编写，分为功能选择区、模块区、程序构建区和程序代码显示区四部分。功能选择区包括模块、代码、Robobasic、撤销、恢复、导入、导出和语言栏。软件设计界面如图1所示。与中小学现有信息课程相接，仍然采用类Scratch或Mixly类似界面，不同的是嵌入了RoboBasic应用软件，可在线编程、调试各种机器人(人形或其它形状的关节型机器人)，另外语言也由结构复杂的C语言转换为简单的Basic语言，尤其是控制板可扩展为Atmega128，与实验室各种关节型机器人实现联调，人形的可采用图左部分人形界面调试，关节较多或较少时采用图右部分电机组直接调试。

图1. 教育机器人编程软件设计界面

操作界面包含模块区、功能选择区、程序构建区和程序代码显示区四部分。模块区显示输入输出、控制、数学、文本、逻辑、通信、存储和变量等模块组，每个模块组由完成模块组操作的所有小模块。功能选择区由代码按钮、RoboBasic MF 2.80软件打开按钮、撤消按钮、重复按钮、导入按钮、导出按钮和语言选择提示文本框组成，代码按钮可以实现全屏与工作区切换显示图形块程序，RoboBasic MF 2.80软件打开按钮用于打开Basic语言编辑器，导入按钮用于导入XML文件即在代码区中显示图形化程序，导出按钮可以导出.XML文件和.bas文件到指导路径下存储。最右边的折叠按钮可展开显示Basic语言源程序代码。

2.2. 编程软件主要功能设计

实现了图形化编程，以搭建块的形式来实现机器人的编程，适合于小学生学习编程。实现图形转RoboBasic代码对机器人动作设计，适用于中学生对编程语言的学习，可借助机器人图形界面对机器人动作调试，支持与机器人控制板的连接可在线调试运行，教育机器人接口示意如图2所示。

图 2. 教育机器人接口示意图

其中在进行图形块程序设计时，可以打开RoboBasic MF 2.80软件，配置串口和机器人控制板，与机器人连接进行在线读取机器人各个关节的舵机角度作为图形块程序的参数，另外对设计的图形块程序每放置一个块就会对应转换成Basic代码，然后把Basic代码下载到器人控制板上进行机器人控制。

3. 软件开发

该软件基于谷歌图形化开源引擎Blockly进行开发 [6] ，对工具箱中的块进行定制和赋予其内涵和外观，利用其工作区存放块并解释块成所需的Robobasic代码。Blockly本身就是以Web的方式进行设计，加上Web应用本身方便易用，无需安装，节省计算机内存空间等特点，所以该软件也是以Web的形式开发，将Blockly引擎嵌入到脚本中，将其toolbox和workspace显示在网页的区域中实现块的拖放和解释，Blockly起到该软件图形化编程的核心部分。最后将做好的网页打包成web应用，即为.exe可执行的应用程序，不需要安装直接点开运行。

3.1. 积木块的定制

积木块分为：输入/输出、控制、数学、文本、变量、逻辑、通信、存储、执行器、显示器、声音等模块，为满足编程需要定制的积木块名称、外观、功能如表1所示。

表1. 所定制积木块表

由于图形画编程仍要符合编程语言语法和逻辑结构的要求，每个块之间的联系都有其相应的约束条件，因此每个块都要设定其固定的属性。根据块所属功能不同，属性也不相同，需要设定块的外观，块的下拉菜单设计，块与块之间的连接方式，块中文本数据类型的判断，块返回值参数的数据类型和块接收其它块传递输入参数的数据类型判断。块的总体设计以细化的方式进行，块功能的细化使块的灵活度很高，自由组合的方式更多，实现更简单。其积木块构成如图3所示。

图3. 积木块构成图

块外观设计：块的形状取决于块之间的连接方式，连接方式分别为上连接、下连接、左连接、右连接和嵌入，块会对应有连接凹凸口。块的颜色通过color参数设定，不同的颜色值对应不同颜色。

下拉菜单设计：下拉菜单则通过将控制板功能引脚或逻辑值给录入到数组中存放，方便用户对引脚选择使用。

块属性设计：第一个参数可以为true或false，设定是否允许连接；第二个参数为数据类型(number、string、null)，默认为空。

this.setPreviousStatement(true, null)；允许块上连接

this.setNextStatement(true)；允许块下连接

this.setInputsInline(true, null)；允许块嵌入

this.setOutput(true, null)；允许块左连接

this.setIntput(true, null)；允许块右连接

this.setTooltip(文本提示内容)；当鼠标放在块上时，则会显示文本提示内容

如初始化块需要接收其它功能块的嵌入连接，但该模块根据basic语言规定需要放在程序首部，因此不需要与上一模块连接，可以与下一模块连接。If语句则需要在上下连接的同时还需要右连接和嵌入，右连接为输入if语句判断条件，嵌入为输入满足条件时执行的内容。

块的设计都是基于block对象进行配置，采用树结构对各属性进行存放，当拖动块时，会触发相应的事件(event)执行相应的功能。

3.2. 编程软件的文件结构

软件中模块和各对象使用DOM结构(文档对象模型)来存储，其文件框架及其之间的关系如图4所示。文件根目录下*.XML文件定义图形块基本信息，如类别、名称、ID等，ID则是用于每个块的唯一标识；blocks文件夹下*.js文件定义每个图形块样式，如颜色、文字、图标等；generator文件夹下*.js文件定义图形块转Robobasic代码；HTML文件设计界面，构建框架；event.js是对界面操作时触发所执行的事件；msg文件里脚本图形块的语言；core文件是核心库文件；media文件夹存放所需图片。

图4. 教育机器人编程设计软件文件结构图

图形块的定义实例如下：

//对块的内涵进行定义，存放在blocks/js文件中

Blockly.Blocks['inout_highlow'] = { init: function() { this.setColour(20); this.appendDummyInput() .appendField(new Blockly.FieldDropdown([[Blockly.MIXLY_HIGH, 1], [Blockly.MIXLY_LOW, 0]]), 'BOOL') this.setOutput(true, Boolean); this.setTooltip(Blockly.MIXLY_TOOLTIP_INOUT_HIGHLOW); } };

//定义图形块转出的Robobasic代码(输出为高即为‘1’)存放在generator/js文件中

Blockly.Arduino.inout_highlow = function () { //Boolean values HIGH and LOW. var code = (this.getFieldValue('BOOL') == '1') ? '1' : '0'; return [code, Blockly.Arduino.ORDER_ATOMIC]; };

3.3. 功能设计实现

机器人编程设计软件的主要功能为图形化和源代码程序 [7] 的编写、界面切换及缩放、程序编译和在线编译下载调试。其功能实现过程如图5所示。

图5. 教育机器人编程功能实现图

从模块组中取出模块搭建图形块程序，完成后保存的文件有两种类型，一种是图形块程序*.xml，一种是Basic语言程序*.bas。这样可以在编程界面中再次打开图形块程序进行编辑，也可以在RoboBasic MF 2.80中打开*. bas，利用此应用软件进行编译并下载到机器人控制器运行，从而驱动机器人完成各种动作。

1) 程序编写：用户既可以通过图形化代码编写，也可以直接通过文本编写(编写后图形化代码不会变)；

2) 界面缩放：用户可以随意控制界面缩放，也方便平板用户使用；

3) 图形块导入导出：用户可以把代码导出成模块，从而方便使用其它用户导入使用，也可作为自己的程序文件储存；

4) 程序编译：软件搭配了Robobasic编译软件，可直接调用打开，打开保存的代码进行编译，并且它对机器人的调控有着强大的功能；

5) 编程语言：图形块文本标注直观清晰，不需要认识英文单词，不会使用键盘就能操作。使用不同颜色的示意图代表不同类型的功能块，方便用户归类区分使用；复合功能块中提供默认选项，减少用户的拖动次数；由浅到深，循序渐进渗透程序设计知识点，给用户增加了趣味性和前后连贯性。

4. 结束语

通过教育机器人编程设计软件的开发实现，基本上实现了图形化编程及各功能的实现，能通过图形块对Robobasic代码的编程，并将其下载到机器人控制器中，对机器人实现图形化编程、动作和模块开发等。该软件能够满足小学生以体验为主，通过游戏化教学、项目式教学等形式，强调借助积木式编程工具，通过对对象、模块、控制、执行等概念及作用的直观操作体验，感受编程思想，初中阶段以高级程序设计语言为工具，通过尝试设计与实现基本程序结构，将实际问题解决与算法思想形成联结，高中阶段掌握一种程序设计语言的基本知识，利用程序设计语言实现简单算法，解决实际问题，通过人工智能典型案例的剖析，了解智能信息处理的巨大进步和应用潜力，认识人工智能在信息社会中的重要作用 [8] 。虽然该软件基本满足中小学生编程，但由于时间有限，还仍需要后期对中小学生进行实际调查和测试，进而发现一些尚还不足的地方和需要有优化的地方，尽量让中小学生操作简单方便流畅，让中小学生了解机器人编程，基于简单易学的basic语言编程，从小学、初中、高中，对学生建立机器人编程思维模式，三个阶段教育体系的构建，该软件有助于中小学生对basic语言的掌握，打下编程语言的基础。

基金项目

2020年度河南省高等学校重点科研项目20B120003，2019年度郑州科技学院大学生创新创业训练计划项目DCZ201914。

文章引用

郭 欢,王清珍. 一种图形化积木式编程软件的设计
The Design of a Kind of Graphic Building Block Programming Software[J]. 人工智能与机器人研究, 2020, 09(01): 24-31. https://doi.org/10.12677/AIRR.2020.91004

参考文献