如何为Mixly开发第三方库来增加新功能？

前言

Mixly自从2015年问世以来，就深受国内创客、中小学教师喜爱，如今已经成为国内最好用的Arduino图形化软件。Mixly最大的优点就是其开放性，Mixly建立了一个生态圈，这个生态圈欢迎所有人的加入，不限制厂家，不限制硬件。因此，任何一个掌握规则的人都可以为Mixly开发第三方库，来丰富Mixly的功能。
Mixly基本原理

Mixly可以看作是介于普通用户与Arduino IDE之间桥梁，通过这个桥梁，即使用户不懂C语言的语法，也可以利用图形化程序编写Arduino程序。Mixly的基本原理是将图形化程序转化成C语言，再利用Arduino IDE上传到硬件中。在我们动手编写第三方库之前，先来了解Mixly是如何将图形化程序转化成C语言的。
根目录下的xxx.xml文件定义了图形块的基本信息，比如类别、名称，ID等。block/xxx.js文件定义了每个图形块的样式，比如颜色、文字、图标等。generator/xxx.js文件是将图形块程序转化成C语言的关键部分。language/xxx/en.js(zh-hans.js)等文件是语言文件，en.js是英文语言文件，zh-hans.js是简体中文语言文件，zh-hant.js是繁体中文语言文件。该类文件定义了图形块程序中每一个字段显示的文字内容。
各文件作用的流程如图 1所示。






各文件作用流程

Mixly第三方库基本结构如图 2所示。






第三方库基本结构
开发准备

在理解了第三方库的基本原理之后，就可以进行开发了，在开发之前首先将给自己的库起一个恰当的名字。比如，我的库名称为maker，含义为“创客”。范例中的库名称是xxx，那么就先要将所有文件夹、文件名中含有“xxx”的改成“maker”。其中，xxx.xml文件中有多个“xxx”，修改时不要遗漏。
导入第三方库

在正式开发之前首先要将自己开发的第三库导入到Mixly0.996中，导入之后，就可以查看到编写代码实现的效果了。
打开Mixly软件，单击 导入库，在弹出的文件对话框中选择第三方库根目录中maker.xml文件。





第三方库导入对话框

Maker库导入之后，在Mixly软件左侧就可以看到新增的Maker类。打开该类，可以看到该类中已有一个延时图形块。





Mixly中导入的库

编写图形块

在了解第三方库的基本结构后，就可以尝试编写第一个图形块了。先编写一个最简单的图形块，比如实现对某管脚的LED开关功能的图形块。
根据分析，可知该图形块需要有两个输入参数，第一个是管脚编号，第二个是开/关指令。
初始定义

编写一个新的图形块一般是从xml文件开始，在初始状态下，xml文件中的内容如下所示，在该文件中定义了该库的基本信息，引入了该库需要使用到的文件和目录。
在maker.xml文件中的category节点下新增一个block节点。该节点用于定义一个新的图形块，该block的type中写明该图形块的名称。block内部包含两个value节点，分别用于容纳管脚选择框和状态选择框，程序如下所示。
                                            其中的第一个节点PIN中，其type类型为“pins_digital”表示该下拉框可以选择的管脚是数字型。Type可填参数及含义见表 1。
表 1PIN类型及含义
[tr]Type含义对应端口（以UNO为例）[/tr]

pins_digital	数字管脚	0 ~ 13,A0 ~ A7
pins_analog	模拟输入管脚	A0 ~ A7
pins_pwm	模拟输出管脚	3,6,9,10,11,13
pins_interrupt	中断管脚	0,1,2,3,7

第二个节点STAT是专门用于下拉选择的节点，其类型为“inout_highlow”，对于该类型，Mixly官方定义的选项是“HIGH”或者“LOW”。
图形块样式定义

图形块的样式定义是在block/maker.js文件中，该文件专门用于定义图形块的样式，包括颜色、文字、图标等内容。在block/maker.js的头部，有初始化信息，这是Mixly库开发的规范开头，只要按照格式即可。
从第5行开始是LED开关图形块的样式定义。图形块名称“maker_LED_switch”要与xml文件中block的type名称相同，这是两个文件之间联系的纽带。
'use strict';goog.provide('Blockly.Blocks.maker');goog.require('Blockly.Blocks');//LED开关模块Blockly.Blocks.maker_LED_switch = {  init: function() {   this.appendDummyInput("")   .appendField(Blockly.MAKER_LED_SWITCH)   .appendField(Blockly.MIXLY_PIN)   .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")   .appendField(Blockly.MIXLY_STAT)   .appendField(new Blockly.FieldDropdown([[Blockly.MAKER_LED_OPEN, "HIGH"], [Blockly.MAKER_LED_OFF, "LOW"]]), "STAT");   this.setColour(20);   this.setPreviousStatement(true);   this.setNextStatement(true);   this.setInputsInline(false);   this.setTooltip(Blockly.MAKER_LED_SWITCH_TOOLTIP); }}; 块样式定义中的第6、7行为固定格式，不可修改，从第8行开始才可以自己定义。appendField的功能是增加一个域，如第8行，是增加一个文本内容。为了支持多语言切换，该本文内容并没有直接写出，而是用一个语言变量来表示。Blockly.MAKER_LED_SWITCH的定义是在语言文件之中，如要定义该变量的简体中文含义，可在language/maker/zh-hans.js文件中定义；如要定义该变量的英文含义，可在language/maker/en.js文件中定义。
官方语言变量

Mixly已经定义了一部分常用的语言变量，比如Blockly.MIXLY_PIN的中文含义是“管脚”，英文含义是“PIN”。如需使用，可以直接调用。其他官方语言变量可以参考Mixly0.996_WINblocklymsgjszh-hans.js文件。
自定义语言变量

在开发过程中，常常会需要用到自定义的语言变量。“Blockly.MIXLY_”是官方的语言变量前缀，为了区分，自定义语言变量不能以此作为前缀。自定义变量可以采用“Blockly.”+自定义库名称+变量名的形式。如maker库中定义的LED开关语言变量为Blockly.MAKER_LED_SWITCH。language/maker/zh-hans.js文件中的语言变量定义方式如下所示。
Blockly.MAKER_LED_SWITC;Blockly.MAKER_LED_SWITCH_TOOLTIBlockly.MAKER_LED_OPE;Blockly.MAKER_LED_OF; 定义下拉选择框

第10行定义了图形块的管脚下拉选择框，在appendField中新建一个下拉选择框，该框中的选项是默认的数字管脚，名称为"PIN"，该名称需与xml文件中的管脚选择节点的name相同。
第12行定义了状态选择框，在appendField中新建一个下拉选择框，该框的选项有两个（开和关），Blockly.MAKER_LED_OPEN是“开”的语言变量，其名称为"HIGH"；Blockly.MAKER_LED_OFF是“关”的语言变量，其名称为"LOW"；整个下拉选项框的名称为"STAT"，该名称需与xml文件中的状态选择节点的name相同。
图形块样式设置

在完成图形块基本元素的定义之后，就可以对图形块的样式进行设置了。图 7中第13-17行都是对图形样式的设置，各函数的意义与范例见表 2。
表 2图形块样式定义函数
[tr]函数意义范例[/tr]

setColour()	设置图形块颜色，颜色值是HUE格式，范围为0~360，具体颜色值可通过网络查找。	0: 红色120: 绿色240: 蓝色300: 紫色
setPreviousStatement()	设置是否可以跟上一模块连接。	true: false:
setNextStatement()	设置是否可以跟下一模块连接	true: false:
setInputsInline()	设置模块为单行或多行，当模块输入参数较多时可以设为false。	true: false:
setTooltip()	设置模块说明文字，可以直接输入文本，或者通过语言变量定义。	Blockly.MAKER_LED_SWITCH_TOOLTIP在语言文件中定义该语言变量具体的内容。
setOutput(Boolean, type)	设置是否为输出模式。当参数Boolean为true时则该模块的左侧有个连接点，该模块可以放到其他模块的输入框中。为了控制该模块输出的数据类型，可以通过参数type来定义。	type可选值有Number（数值），String（字符串），Boolean（布尔型），Array（数组）， 'IPAddress'（IP地址）等。多类型可用[Number, Boolean]这样的形式表示。

图形代码转化C语言

图形代码转化C语言的脚本是写在generator/maker.js文件中。
在编写图形代码转化C语言的脚本前，我们肯定要知道这个图形块对应的C语言程序是怎么写的。LED开关的图形块如图 9所示，LED开关的C语言程序如图 10所示。






LED开关图形块程序
void setup(){  pinMode(13, OUTPUT);}void loop(){  digitalWrite(13,HIGH);} LED开关C语言程序
图形块转化C语言的原理其实很简单，首先要获取图形块中设置的各参数，然后利用字符串拼接等手段“拼凑”出C语言代码。
'use strict';goog.provide('Blockly.Arduino.maker');goog.require('Blockly.Arduino');Blockly.Arduino.maker_LED_switch = function() {  var dropdown_pin = this.getFieldValue('PIN');  var dropdown_stat = this.getFieldValue('STAT');  Blockly.Arduino.setups_['setup_output_' + dropdown_pin] = 'pinMode(' + dropdown_pin + ', OUTPUT);';  var code = 'digitalWrite(' + dropdown_pin + ',' + dropdown_stat + ');n'  return code;}; 前3行是文件的固定写法。第4行是maker_LED_switch函数的定义，转化过程就在该函数中。第5、6行利用getFieldValue方法获取图形块中设置的数值，其中的参数“PIN”与block/maker.js中下拉框的名称相同。
第7行用于编写C语言的setup部分，setup部分程序有固定格式，将setup内的程序赋值给Blockly.Arduino.setups_['setup_output_' + dropdown_pin]。setup程序内容可用字符串拼接的方式组成。
第8行用于编写C语言中的loop函数，采用字符串拼接的方式将管脚、状态等参数放入C语言代码中。最后用return code，将编写的代码传回Mixly。
如要对获取的数值进行字符串操作、逻辑运算、数学运算等操作可以直接使用js语法进行运算，运算完成后再输出成C语言。
检验代码转换是否正常可以单击编辑区上方的“代码”按钮，如图 12所示。查看代码输出是否正确。






图形转代码






代码视图
结语

Mixly凭借其优良的性能和开放的态度，深受中小学师生的喜爱，给我们提供了大量基础性模块。但是如果师生想要使用更个性化的硬件，则需要自己定义第三方库。第三方库开发是一劳永逸的事情，开发完成后，可以更进一步降低学生学习难度，借助于第三方库学生能更快地实现想要的功能，为学生的创意想法插上实现的翅膀。
本文发表于《无线电》2017年11月刊