一、软硬件准备
Arduino、OLED显示屏、Mixly及四根公对母杜邦线。
二、文件路径介绍
新建目录和文件如下所示(XXX统一为项目名,最好英文字母组成):
XXX
│ XXX.xml
│
├─block
│ XXX.js
│
├─generator
│ XXX.js
│
└─XXX(该文件夹放库文件)
我的路径如下:
u8g2
│ u8g2.xml
│
├─block
│ u8g2.js
│
├─generator
│ u8g2.js
│
└─u8g2
三、实验步骤
打开该网页https://github.com/olikraus/u8g2,点击Code——Download Zip来下载u8g2库文件,将下载下来的压缩包解压,复制到放库文件的u8g2文件夹里:
如图所示:
以下代码里涉及文件名的注意改为自己文件的名字
u8ge.xml内容如下:
<!--
type="company"
block="block/u8g2.js"
generator="generator/u8g2.js"
-->
<script type="text/javascript" src="../../blocks/company/u8g2.js"></script>
<script type="text/javascript" src="../../generators/arduino/company/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>
block文件夹下的u8g2.js:
'use strict';
goog.provide('Blockly.Blocks.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);
}
};
generator文件夹下的u8g2.js:
'use strict';
goog.provide('Blockly.Arduino.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);';
};
打开Mixly,点击导入库
点击本地导入,选择根目录下的u8g2.xml文件后,在Mixly模块下方位置能找到自己导入的库,可选择的模块如下:
将Arduino和OLED显示屏连线
Arduino——OLED屏
5V——VCC
GND——GND
A4——SDA
A5——SCL
将以下模块编译上传到Arduino,如图所示:
上传后,如图所示:
完成。