Mixly第三方库开发的两种方法——U8g2库二次开发

前言

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

Mixly基本原理：Mixly的基本原理是将图形化程序转化成C语言，即设计好对应的图形模块样式，再将模块与C代码进行对应。
Mixly作用：让使用者通过拖拉拽的积木方式实现C程序的编写，使一些不懂C语言语法但是想进行Arduino等MCU开发的初学者也能玩转单片机，比如应用于少儿编程。

本博客使用Arduino UNO开发板+OLED显示模块+U8g2库实现一个可显示中文的自定义Mixly第三方库。我使用的Mixly版本为1.2.2。Mixly官网

方法一：自定义库

1、创建库文件夹

1）理论
Mixly第三方库的基本文件结构如下：

│— XXX  // 项目名称，以下文件或文件夹的XXX都需修改为项目名称
    │— block
      │— XXX.js
    │— companypin
      │— XXX
        │— pin.js
    │— generator
      │— XXX.js
    │— language
      │— XXX
        │— zh-hans.js  //简体中文
        │— zh-hant.js  //繁体中文
        │— en.js       //英语
        │— spa.js      //西班牙语
    │— media
      │— XXX
    │— XXX   //文件夹，放置一些库文件（.h和.cpp）
    │— XXX.xml

①XXX.xml文件：处于根目录下。此文件定义了图形块的基本信息，比如类别、名称，ID等。
②block/XXX.js文件：此文件定义了每个图形块的外观样式，比如颜色、文字、图标等。
③generator/XXX.js文件：此文件是将图形块程序转化成C语言的关键部分，定义了每一个图形化模块对应的 Arduino C语言代码。
④其他文件：language/xxx/en.js(zh-hans.js)等文件是语言文件（en.js是英文语言文件，zh-hans.js是简体中文语言文件，zh-hant.js是繁体中文语言文件），该类文件定义了图形块程序中每一个字段显示的文字内容；companypin文件夹中的文件一般不需要，除非硬件引脚不同；media文件夹中主要放置程序块包含的音效、图片等；XXX文件夹放置库文件。
注：①②③点的文件是必须的；其他文件是非必须的。

2）实现
构建库文件结构如下图所示：

2、开始编程

共分为3个部分，也是必须要编写的3个必要的脚本，分别为XXX.xml文件、block/XXX.js文件、generator/XXX.js文件。

注意：方法和变量的名称在以下三个脚本中必须严格保持一致，且大小写敏感。

2.1、定义图形块的基本信息

1）理论
此文件定义了图形块的基本信息，比如类别、名称，ID等（此脚本为全局路径配置，注意方法和变量的名称）。打开根文件夹下的XXX.xml 脚本，模板如下：

<!--
type="company" 
block="block/XXX.js"
generator="generator/XXX.js" 
media="media/XXX/" 
language="language/XXX/"
companypin="companypin/XXX/pin.js"
-->
//标出各个文件/文件夹的所在位置。XXX为项目名称，需修改。

<script type="text/javascript" src="../../blocks/company/XXX.js"></script>
<script type="text/javascript" src="../../generators/arduino/company/XXX.js"></script>
<category id="ID？" name="名字？" colour="#1296DB">
	<block type = "xxxxx"> //与block/XXX.js文件沟通的桥梁
		<value name="名称？">
			<shadow type="类型？"></shadow>
<!--type = 类型，具体含义如下：
             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
-->
		</value>
	</block>
</category>

• block 节点：用于定义一个新的图形块，type的值为图形块的名称。
• value节点：用于容纳选择框。
• shadow节点：表示下拉框，是专门用于下拉选择的节点。type类型表示该下拉框可以选择的类型。

2）实现
可使用代码编辑工具编写，也可以使用记事本打开再编写。具体代码如下：

<!--
type="company" 
block="block/Mixly_u8g2.js"
generator="generator/Mixly_u8g2.js" 
-->

<