一、文件结构

1、根目录下的xxx.xml文件定义了图形块的基本信息，比如类别、名称，ID等。
2、block/xxx.js文件定义了每个图形块的样式，比如颜色、文字、图标等。
3、generator/xxx.js文件是将图形块程序转化成C语言的关键部分。
4、language/xxx/en.js(zh-hans.js)等文件是语言文件，en.js是英文语言文件，zh-hans.js是简体中文语言文件，zh-hant.js是繁体中文语言文件。该类文件定义了图形块程序中每一个字段显示的文字内容。

二、Mixly第三方库基本结构

如图 2所示

三、基本开发步骤

1、命名
在开发之前首先将给自己的库起一个恰当的名字。比如，我的库名称为maker，含义为“创客”。范例中的库名称是xxx，那么就先要将所有文件夹、文件名中含有“xxx”的改成“maker”。其中，xxx.xml文件中有多个“xxx”，修改时不要遗漏。
2、使用
在正式开发之前首先要将自己开发的第三库导入到Mixly中，导入之后，就可以查看到编写代码实现的效果了。
打开Mixly软件，单击 导入库，在弹出的文件对话框中选择第三方库根目录中maker.xml文件。

四、编写图形块--初始定义

编写一个最简单的图形块，
比如实现对某管脚的LED开关功能的图形块。
该图形块需要有两个输入参数，
第一个是管脚编号，第二个是开/关指令。

在根目录maker.xml文件输入:

<!--
type="company" 
block="block/maker.js"
generator="generator/maker.js" 
media="media/maker" 
language="language/maker"
-->
<script type="text/javascript" src="../../blocks/company/maker.js"></script>
<script type="text/javascript" src="../../generators/arduino/company/maker.js"></script>
<!--引用所有写好的模块-->
<category id="cat_Maker" name="Maker">
</category>

的category下添加

<block type="maker_LED_switch">
    <value name="PIN"><!-- 管脚选择  zjstest -->
        <shadow type="pins_digital"></shadow>
    </value>
    <value name="STAT"><!-- 状态选择 -->
        <shadow type="inout_highlow"></shadow>
    </value>    
</block>

其中的第一个节点PIN中，其type类型为“pins_digital”表示该下拉框可以选择的管脚是数字型。Type可填参数及含义见表 1。
表 1PIN类型及含义

Type	含义	对应端口（以UNO为例）
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”。

还有那些类型？？？？？
math_number
NUM
point_states
text
display_Matrix_LedArray

五、编写图形块--图形块样式定义

图形块的样式定义是在block/maker.js文件中，该文件专门用于定义图形块的样式，包括颜色、文字、图标等内容。在block/maker.js的头部，有初始化信息，这是Mixly库开发的规范开头，只要按照格式即可。

'use strict';
goog.provide('Blockly.Blocks.maker');
goog.require('Blockly.Blocks');

从第5行开始是LED开关图形块的样式定义。图形块名称“maker_LED_switch”要与xml文件中block的type名称相同，这是两个文件之间联系的纽带。

//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_SWITCH="LED开关";
Blockly.MAKER_LED_SWITCH_TOOLTIP="用于控制LED开关。"
Blockly.MAKER_LED_OPEN="开";
Blockly.MAKER_LED_OFF="关";

七、编写图形块--定义下拉选择框

第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图形块样式定义函数

函数	意义	范例
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语言
图形代码转化C语言的脚本是写在generator/maker.js文件中。
在编写图形代码转化C语言的脚本前，我们肯定要知道这个图形块对应的C语言程序是怎么写的。LED开关的图形块如图 9所示，LED开关的C语言程序如图 10所示。

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-自定义库编写方法