Mixly第三方用户库实现

一.背景
Mixly是一款面向初学者、硬件编程爱好者的图形化编程工具。它完美地支持了Arduino、MicroPython，Python等语言的图形化编程。提供了图形化界面和代码界面对比显示的支持。Mixly还支持自定义第三方扩展库，可以拓展出丰富的功能。Mixly 图像化编程软件进行的二次开发,需要一定的编程基础,需要用到的概念和知识点有: 绑定与事件概念, JavaScript的基本语法, .xml脚本的标签定义。
二.软件准备
（1）Mixly 1.2.2:http://mixly.org/explore/software/mixly-arduino
（2）官方指南: Instructions -使用Mixly写自定义库
（3）第三方库范例: dfrobot、Otto
（4）文本编辑工具: notepad, sublime
三.开发内容
其中，block/xxx.js文件定义了你定制的图形化模块的样子。
generator/xxx.js文件定义了每一个图形化模块对应的 Arduino C语言代码。
block和generator 文件夹下各有一个与项目同名但内容不同的xxx.js文件，一个控制“外观”，另一个控制“内涵”。
xxx.xml文件必须的，所有模块的路径，相当于字典。

使用Mixly成功导入库：
使用U8g2库,做二次开发：
（1）
（2）

四.编写脚本
（1）新建文件夹

（3）新建图示的文件夹及kivinOLED.xml文件

其中，kivinOLED.xml 文件代码为：

<!--该注释为!!!路径!!!,此为刚需!
  type="company" 
  block="block/kivinOLED.js" 
  generator="generator/kivinOLED.js" 
-->
<script type="text/javascript" src="../../blocks/company/kivinOLED.js"></script>
<script type="text/javascript" src="../../generators/arduino/company/kivinOLED.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>

（4）在 block 和 generator 文件夹中新建文本文档,并重命名为 kivinOLED.js , 如下图所示:


其中，打开 block文件夹下 ，编写 kivinOLED.js 脚本代码：

//下列三行代码,为刚需,此提供了下列所有代码的入口
'use strict';
 
goog.provide('Blockly.Blocks.kivinOLED');//注意脚本类别及路径名称
 
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);
  }
};

打开 generator 文件夹中编写 kivinOLED.js 脚本代码：

//下列三行代码,为刚需,此提供了下列所有代码的入口
'use strict';
 
goog.provide('Blockly.Arduino.kivinOLED');//注意脚本类别及路径名称
 
goog.require('Blockly.Arduino');
 
 // ---OLED模块图形转代码---
 
 //include模块
  Blockly.Arduino.U8g2lib_include = function() {
    var INCLUDE = this.getFieldValue('INCLUDE');//使用INCLUDE 变量来存储,block文件夹中的kivinOLED.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);';
  };

（5）在kivinOLED 文件夹中放入U8g2库文件,如下图所示：

五.结果

标签：function,kivinOLED,Arduino,Blockly,第三方,Mixly,模块,true,用户库
来源： https://blog.csdn.net/weixin_45616349/article/details/117000856