Quickly build a Esp8266 development environment

本文最后更新于:November 28, 2021 am

摘要:本文主要介绍了如何搭建以Visual Studio Code 和 PlatformIO为基础的单片机开发环境,并以esp8266开发板为例,通过在OLED显示屏上显示文字的一个例子介绍如何开发一个单片机程序。

本文主要使用的环境:

单片机开发板:Esp8266(CH340G)

Visual Studio Code:1.45.1

PlatformIO:Core 4.3.4 Home 3.2.2

U8g2:2.28.6

一、硬件部分

首先就是去某宝买一个esp8266开发板和显示屏,这里我买的是这个(不贴链接,不然有打广告嫌疑,自己去搜哈,有些卖家不送杜邦线的,可以提前问问)

image-20200609001347090

按照卖家的说明将显示屏和开发板连接好

image-20200609001656314

二、软件部分

1. 安装Visual Studio Code 和 PlatformIO

vscode: https://code.visualstudio.com/

安装完成vscode启动,扩展页面下搜索platformio即可找到,选择第一个Platformio IDE,安装即可(这里需要耐心等待一会)

image-20200609004134896

安装完成,等待vscode重新加载后,左下角会多一个小房子图标,点击后即可显示Platformio IDE主界面

image-20200608225407247

2.安装显示库

如图点击主界面右侧侧边栏Libraies选项卡,然后直接搜索U8G2然后点击进去,里面有个安装按钮,点一下即可:

image-20200608230257339

3. 开始我们的第一个程序

选择新建工程:

image-20200608225916996

选择板子类型和框架然后点完成,这里我的设置如下图:

image-20200608225858345

然后即可在main.cpp编辑你的代码:

image-20200608230108817

这里我们输入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#include <Arduino.h>
#include <U8g2lib.h>
#define bmp_x 64
#define bmp_y 64
#define SSD1306_SDA 5
#define SSD1306_SLK 4
U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, SSD1306_SLK, SSD1306_SDA);
void setup() {
u8g2.begin();
u8g2.enableUTF8Print(); // 打开utf-8支持
}

void loop() {
u8g2.setFont(u8g2_font_wqy12_t_gb2312); // 设置字体

u8g2.setFontDirection(0);
u8g2.firstPage();
do {
u8g2.setCursor(0, 15);
u8g2.print("中国");
u8g2.drawUTF8(0,40,"我爱你");

} while ( u8g2.nextPage() );
delay(1000);
}

代码解释:

(1).void setup() 函数里的内容启动时会执行一次以后不再执行,一般用于初始化。void loop()函数里的内容将会在机器通电时循环执行,一般用于干正事。

(2).u8g2.begin():U8g2的构造函数。可以理解为初始化。

(3).5、6、7行与你的显示屏有关

具体参见:

https://blog.csdn.net/weixin_30510153/article/details/96227475
https://github.com/olikraus/u8g2/wiki/gallery

(4).u8g2.setFontDirection(),用于设置方向 可选参数:0123

(5).u8g2.firstPage()/nextPage():循环刷新显示,保持这样就好,把你要输出的内容放在这里面就行。

(6).u8g2.setCursor(x, y) 设置打印功能的光标位置,也就是设置你在上绘制图形或文字的起始位置。

(7).delay(1000)会使单片机延迟1000个时钟周期也就是暂停一段时间啥也不干留给显示屏处理数据,设置太短会来不及写到屏幕上。

4.连接板子到电脑,然后编译并刷写到板子上

如下图,可以先点编译再点旁边的上传,也可以直接点上传

image-20200609000955186

当你看到下图时,说明刷写成功了,没成功的仔细检查一下设备连线,还有就是看看你的代码,显示屏设置对不对。

image-20200609001057699

三、成果展示

刷写成功后,OLED显示屏应该可以成功显示出我们设置的内容了

image-20200609002205245

附其他U8G2库常用函数

1.指令

1
2
3
4
5
u8g2.clearDisplay();    // 清除显示数据及屏幕
u8g2.clearBuffer(); // 清Buffer缓冲区的数据
u8g2.sendBuffer(); // 将Buffer帧缓冲区的内容发送到显示器,发送刷新消息
u8g2.sendF("c", 0x0a7); // 向显示控制器发送特殊命令
u8g2.setPowerSave(0) // 开关省电模式

2.设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
u8g2.enableUTF8Print();    //设置启用UTF-8支持
u8g2.disableUTF8Print(); //设置停用UTF-8支持
u8g2.setContrast(); //设置显示屏亮度/对比度(0-255)
u8g2.setBusClock(); //设置连接速度(IIC:200000-400000/SPI:1000000-8000000),在begin()之前调用

//设置字体
u8g2.setFontMode(0); //定义字体背景模式,仅u8g2_xxx_tX字体支持,默认0,禁用透明
u8g2.setFontDirection(0); //旋转当前显示 参数:0123
u8g2.setFont(u8g2_font_unifont_t_chinese1); //设置字体
u8g2.setFontPosCenter(); //设置字体基线Center/Baseline/Bottom/Top

//设置颜色
u8g2.setDrawColor(1); //设置颜色,0透显,1实显,2XOR (drawCircle,drawDisc,drawEllipse和drawFilledEllipse不支持XOR模式)

//设置光标位置
u8g2.home(); //设置光标回初始位置
u8g2.setCursor(x, y); //设置打印功能的光标位置
u8g2.setBitmapMode(0); //设置是否开启位图函数背景色

3.简单绘制

1
2
3
4
u8g2.drawStr(x, y, "文本"); // 绘制文本字符,不能绘制编码大于或等于256,绘制文本前需定义字体.y轴向上绘制
u8g2.drawUTF8(x, y,"字符"); // 绘制一个编码为UTF-8的字符串.注意1.编译器支持2.代码编辑器支持
u8g2.drawGlyph(x, y, HEX); // 绘制特殊文本图标(需联合特殊字体)
u8g2.print(); // 打印文本字符(需要联合光标位置setCursor,setFont)支持变量和F()

4.高级绘制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
u8g2.drawPixel(x, y); // 在xy位置绘制一个像素.
u8g2.drawHLine(x, y, w); // 绘制水平线 w长度
u8g2.drawVLine(x, y, h); // 绘制垂直线 h高度
u8g2.drawLine(x1, y1, x2, y2); // 画自由线 x1y1点1 x2y2点2
u8g2.drawBox(x, y, w, h); // 绘制矩形,画填充矩形w,h,宽度,高度 2 u8g2.drawFrame(x, y, w, h); // 画空心矩形w,h,宽度,高度
u8g2.drawRFrame(x,y,w,h,r); //绘制圆角矩形,要求w >= 2*(r+1);h >= 2*(r+1);否则未定义2*(r+1)

// 正或椭圆
u8g2.drawCircle(圆心x, 圆心y, 半径rad, 部分位置U8G2_DRAW_ALL); // 画空心圆 rad半径 直径为 2rad+1
u8g2.drawEllipse(圆心x, 圆心y, 椭圆长度x, 椭圆宽度y, 部分位置U8G2_DRAW_ALL) //画空心椭圆 长度和宽度均为整个圆的1/2
U8G2_DRAW_ALL /*替换参数:
U8G2_DRAW_ALL 全部
U8G2_DRAW_UPPER_RIGHT 上右
U8G2_DRAW_UPPER_LEFT 上左
U8G2_DRAW_LOWER_RIGHT 下右
U8G2_DRAW_LOWER_LEFT 下左*/

u8g2.drawTriangle(x1,y1,x2,y2,x3,y3); //绘制多边形,三个点的坐标,实心
u8g2.drawXBM( x, y, w, h, bits); //绘制位图,bits是位图资源表,setBitmapMode(1)切换为旧模式