完善资料让更多小伙伴认识你,还能领取20积分哦, 立即完善>
扫一扫,分享给好友
|
|
相关推荐
1个回答
|
|
前言
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文件中的内容如下所示,在该文件中定义了该库的基本信息,引入了该库需要使用到的文件和目录。 表 1PIN类型及含义 [tr]Type含义对应端口(以UNO为例)[/tr]
图形块样式定义 图形块的样式定义是在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]
图形代码转化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月刊 |
||
|
||
只有小组成员才能发言,加入小组>>
2438 浏览 0 评论
9107 浏览 4 评论
36786 浏览 19 评论
5029 浏览 0 评论
24757 浏览 34 评论
1532浏览 2评论
1751浏览 1评论
2198浏览 1评论
1557浏览 0评论
528浏览 0评论
小黑屋| 手机版| Archiver| 电子发烧友 ( 湘ICP备2023018690号 )
GMT+8, 2024-12-23 17:28 , Processed in 1.416853 second(s), Total 76, Slave 60 queries .
Powered by 电子发烧友网
© 2015 bbs.elecfans.com
关注我们的微信
下载发烧友APP
电子发烧友观察
版权所有 © 湖南华秋数字科技有限公司
电子发烧友 (电路图) 湘公网安备 43011202000918 号 电信与信息服务业务经营许可证:合字B2-20210191 工商网监 湘ICP备2023018690号