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

最新推荐文章于 2024-03-04 21:06:19 发布

念芯

最新推荐文章于 2024-03-04 21:06:19 发布

阅读量3.1k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45616775/article/details/116751623

版权

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

前言
方法一：自定义库
方法二：使用make库进行自定义库

前言

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" 
-->

<script type="text/javascript" src="../../blocks/company/Mixly_u8g2.js"></script>
<script type="text/javascript" src="../../generators/arduino/company/Mixly_u8g2.js"></script>
 

<category id="kivin OLED demo" name="OLED中文显示" colour= 20>
 
<!-- OLED模块 -->
      <!--include模块-->
      <block type="U8g2lib_include">
                <value name="String">
                    <shadow type="text">  <!--可编辑文本-->
                        <field name="_text">U8g2lib.h</field>
                    </shadow>
                </value>
      </block>
 
      <!--配置构造函数模块-->
      <block type="config" name="U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2">
      </block>
 
      <!--开启 U8g2驱动模块-->
      <block type="initOled">
      </block>
 
      <!--中文输入模块-->
        <block type="displayCN">
          <value name="disCN">
              <shadow type="text">
                  <field name="_text">textOled</field>
              </shadow>
          </value>
        </block>
</category>

2.2、定义图形块的外观样式

1）理论
此文件定义了每个图形块的外观样式，比如颜色、文字、图标等。打开block文件夹下的xxx.js脚本，模板如下：

'use strict';
goog.provide('Blockly.Blocks.XXX');
goog.require('Blockly.Blocks');
//前三行是一些初始化信息，是Mixly库开发的规范开头，只需改动XXX（项目名称）即可。

//注意：这里的xxxxx要与根目录下的XXX.xml文件中的block节点的type是相同的，这是在两个文件中建立沟通的桥梁.
Blockly.Blocks.xxxxx = {
  init: function() {
   this.appendDummyInput("")
   ...
   
   this.setColour();
   this.setPreviousStatement();
   this.setNextStatement();
   this.setInputsInline();
   ...

 }
};

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

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

自定义语言变量
自定义变量采用【Blockly.自定义库名称_变量名】的形式。如在第三方库中定义一个语言变量，可在language/XXX/zh-hans.js文件中编写自定义的语言变量，如下所示：
Blockly.MAKER_LED_SWITCH="LED开关";
Blockly.MAKER_LED_SWITCH_TOOLTIP="用于控制LED开关。"
Blockly.MAKER_LED_OPEN="开";
Blockly.MAKER_LED_OFF="关";

2）实现
具体代码如下：

'use strict';
goog.provide('Blockly.Blocks.Mixly_u8g2');
goog.require('Blockly.Blocks');
 
// ---OLED模块图形配置---
//include模块
Blockly.Blocks.U8g2lib_include = {
  init: function() {
    this.setColour(120);//模块图形颜色
    this.appendDummyInput("")//此行代码刚需,为模块创建提供入口
        .appendField("#include <") //代码块上的文字内容
        .appendField(new Blockly.FieldTextInput('U8g2lib'), 'INCLUDE')//创建文本输入对象
        .appendField(".h>");
    this.setPreviousStatement(true);//是否可以与上一模块连接
    this.setNextStatement(true);//是否可以与下一模块连接
  }
};
 
//配置构造函数模块
Blockly.Blocks.config = {
  init: function() {
    this.setColour(120);
    this.appendDummyInput("")
    .appendField("配置构造函数")
    .appendField("U8g2 SSD1306 128X64")
 
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setInputsInline(false);//是否开启模块单行显示(true为单行,false为多行)
  }
};
 
//开启 U8g2驱动模块
Blockly.Blocks.initOled = {
  init: function() {
    this.setColour(120);
    this.appendDummyInput("")
    .appendField("开启U8g2驱动程序")
 
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
  }
};
 
//中文输入模块
Blockly.Blocks.displayCN = {
  init: function() {
    this.setColour(50);
    this.appendDummyInput("")
    .appendField("输入字符串...")
 
    this.appendValueInput("VALUE", String)
    .setCheck([String,Number])
    .setAlign(Blockly.ALIGN_RIGHT);//开启模块右侧可连接
 
    this.setPreviousStatement(true, null);
    this.setNextStatement(false, null);
  }
};

2.3、定义图形块与C语言的转化

1）理论
此文件是将图形块程序转化成C语言的关键部分，定义了每一个图形化模块对应的 Arduino C语言代码。打开generator文件夹下的XXX.js脚本，模板如下：

图形块转化C语言的原理为首先要获取图形块中设置的各参数，然后利用字符串拼接等手段“拼凑”出C语言代码。

'use strict';
goog.provide('Blockly.Arduino.XXX');
goog.require('Blockly.Arduino');
//前三行是一些初始化信息，是Mixly库开发的规范开头，只需改动XXX（项目名称）即可。

//函数的定义，转化过程就在该函数中
Blockly.Arduino.xxxxx = function() {

  //利用getFieldValue()方法获取图形块中设置的数值
  var A = this.getFieldValue('与block/XXX.js中设置的相关名称相同A');
  var B = this.getFieldValue('与block/XXX.js中设置的相关名称相同B');
  
  //用于编写C语言的setup部分，setup部分程序有固定格式，将setup内的程序赋值给Blockly.Arduino.setups_['setup_output_' + A]。setup程序内容可用字符串拼接的方式组成。
  如：pinMode(13, OUTPUT);
  Blockly.Arduino.setups_['setup_output_' + A] = 'pinMode(' + A + ', OUTPUT);';
  
  //用于编写C语言中的loop函数，采用字符串拼接的方式将管脚、状态等参数放入C语言代码中。
  如：digitalWrite(13,HIGH);
  var code = 'digitalWrite(' + A + ',' + B + ');\n'
  return code;
  //用return code;将编写的代码传回Mixly。
  //如要对获取的数值进行字符串操作、逻辑运算、数学运算等操作可以直接使用js语法进行运算，运算完成后再输出成C语言。
};

2）实现
具体代码如下：

'use strict';
goog.provide('Blockly.Arduino.Mixly_u8g2');//注意脚本类别及路径名称
goog.require('Blockly.Arduino');
 
 // ---OLED模块图形转代码---
 //include模块
  Blockly.Arduino.U8g2lib_include = function() {
    var INCLUDE = this.getFieldValue('INCLUDE');//使用INCLUDE 变量来存储,block文件夹中的OLED.js脚本,文本输入对象的值
    Blockly.Arduino.definitions_['define_'+INCLUDE] = '#include <'+INCLUDE+'.h>';//严格函数,固定写法(转include调用内容)
    return '';
};
 
 //配置构造函数模块
  Blockly.Arduino.config = function() {
  	Blockly.Arduino.definitions_['define_'] = 'U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0,SCL,SDA);\n';
    return '';
};
 
//开启 U8g2驱动模块
  Blockly.Arduino.initOled = function() {
    Blockly.Arduino.setups_['setup_intOled'] = 'u8g2.begin();\n';//严格函数固定写法(转setup函数中代码)
    return '';
};
 
//中文输入模块
  Blockly.Arduino.displayCN=function(){
   var value = Blockly.Arduino.valueToCode(this, 'VALUE', Blockly.Arduino.ORDER_ATOMIC) || '\"\"';
   return 'u8g2.firstPage();' + '\n'  +  'do {'  + '\n' +    'u8g2.setFont(u8g2_font_unifont_t_chinese1);' + '\n'  +    'u8g2.drawUTF8(0,15,'   +value+  ');' + '\n' +  '} while ( u8g2.nextPage() );' + '\n' +  'delay(1000);';
  };

2.4、资源配置

资源配置就是除了上面三个必要的文件外，如有用到的库则放置在XXX文件夹里；语言文件则放置在language文件夹里（en.js是英文语言文件，zh-hans.js是简体中文语言文件，zh-hant.js是繁体中文语言文件）；硬件引脚的文件放置在companypin文件夹里；音效、图片等文件放置在media文件夹里。

这里我用到u8g2库，在Mixly_u8g2根文件夹下新建一个Mixly_u8g2文件夹，将下载的库文件解压至此，如下图所示：
在这里插入图片描述

3、使用自定义的Mixly第三方库编程

1）Mixly导入第三方库
打开Mixly软件，单击【导入库】，然后选择【本地导入】，最后在弹出的文件对话框中选择第三方库根目录中XXX.xml文件。这里我的为Mixly_u8g2.xml，如下图所示：
在这里插入图片描述
导入后可以在左下角看见已导入的第三方库，如下图所示：

2）硬件部分接线

Arduino UNO（IIC） ----- OLED显示模块
   3.3v      -----    VCC
   GND       -----    GND
   A4        -----    SDA
   A5        -----    SCL

3）实现
拖拉积木编写程序，然后烧录（Mixly上烧录成功后没有反应或烧录不成功的，可以把代码复制到Arduino IDE上烧录）。如下图所示：
在这里插入图片描述
效果如下图所示：

方法二：使用make库进行自定义库

1、下载和安装make库

参考
make库是一个制作Mixly图形化模块的第三方库，其源码已托管到gitee和github上。

2、导入make库

Make库下载完成后，进入Mixly，单击【导入库】。导入完成后，把滑动条拖到最下方，就可以看到刚刚导入的make库，这个库的结构和下图相似。
在这里插入图片描述

3、使用make库

make库结构介绍：
在这里插入图片描述

使用说明：
①显示界面：用于查看制作出的图像化模块的外观。
②输入：用于定义图形化模块的输入接口。
③类型：用于在三个输入接口左侧添加不同的数据输入类型。包含：文本块、文本输入块、长文本输入块、数字输入块、角度输入块、下拉框块、检查框块、颜色块、图片块。
④颜色：用于定义图形化模块的颜色，此分类下有三种颜色图形化模块（色表、度数选择器、字符串输入框）供我们选择。
⑤编辑生成代码：用于编辑图形化模块所要生成的代码。
⑥定义块外观/代码：用于制作块外观和查看块在三个文件(xxx.xml、block/xxx.js、generator/xxx.js)下的代码。
⑦转换工具(block→block+zh_hans)：用于让制作出的库可以支持多种语言。
⑧基础块：用于制作库中的各个分类。
⑨示例：是分类⑧(基础块)的一个例子。
⑩测试：是一个测试界面，对于一些不太确定代码是否正确的块可以先放入这个界面来调试。

念芯

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
1
评论
Mixly第三方库开发的两种方法——U8g2库二次开发

Mixly第三方库开发的两种方法——前言/Mixly基本原理方法一：1、Mixly第三方库的基本文件结构2、导入第三方库3、开始编程1）定义图形块的基本信息2）定义图形块的外观样式3）定义图形块与C语言的转化4）其他方法二：1、下载和安装make库2、导入make库3、使用1）2）3）4）5）前言/Mixly基本原理Mixly自从2015年问世以来，就深受国内创客、中小学教师喜爱，如今已经成为国内最好用的Arduino图形化软件。Mixly最大的优点就是其开放性，Mixly建立了一个生态圈，这个生态圈
复制链接

扫一扫