实验七

本教程详细介绍了如何在Mixly中导入并使用u8g2库,配合Arduino和OLED显示屏进行中文显示。首先,下载并配置u8g2库文件,然后在Mixly中导入库,通过编写特定的代码块实现 OLED显示屏的初始化、配置和中文内容的显示。最后,连接Arduino和OLED显示屏,上传代码后,显示屏将成功显示中文信息。
摘要由CSDN通过智能技术生成

一、软硬件准备
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,如图所示:
在这里插入图片描述
上传后,如图所示:
在这里插入图片描述
完成。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值