发作品签到
标准版

基于ESP8266TFT显示屏

工程标签

7.7k
0
0
2

简介

网上关于ESP8266驱动TFT屏的资料很少,这里我用一个ESP12F芯片+TFT屏做了一个显示器来介绍arduino的TFT_eSPI库驱动TFT屏的方法

简介:网上关于ESP8266驱动TFT屏的资料很少,这里我用一个ESP12F芯片+TFT屏做了一个显示器来介绍arduino的TFT_eSPI库驱动TFT屏的方法

开源协议

Public Domain

创建时间:2021-03-28 16:02:01更新时间:2022-03-16 08:16:56

描述

利用ESP12F驱动TFT屏显示,原理图中有两个usb转串口芯片,推荐选择CH340C。可以自动下载,如最求小尺寸,可用CH340E。显示屏我放了两块,一块是1.8寸的,还有一个是2.4寸的,可自行选择。封装自行修改。

TFT_eSPI库使用手册

一、TFT_eSPI配置

1、 下载tft_espi库

https://github.com/Bodmer/TFT_eSPI

强烈建议使用旧点的版本,2.0左右,新版会出现显示反相等问题。

2、解压后导入arduino根目录下的libraries中。

(也可以直接使用arduino编译器安装,路径在电脑的快速访问->文档->Arduino->libraries)

3、打开User_Setup.h这个文件(推荐用notepad++打开,功能比较强大,可以打开很多类型文件)。从文件名就可以看出这个文件是要用户自己来修改的。

zAfOlZPRQc2p3s0Obx4uY07sCZem7hR6Q4goJ7Tr.png

1、打开User_Setup.h这个文件,根据自己的屏幕信息修改参数。

08rLertlTXHsRv7nDG6QZRwYkLvdNix1WXZvUnXj.png

2、选择屏幕的驱动芯片,这里一ST7735为例,去掉前面的“//”即可

3、选择屏幕像素(我用的是128*160的屏幕,同样去掉“//”即可)

ktYNN5jIUDxPOBTmUBm12nXPWNbEC1bCjSeTGRtU.png

4、根据自己的原理图选择引脚

5NCKO5mGA95vMtf5WHUF7OfyPt7e7yMtR4Ls3dhA.png

ajE1YQ9Nzueu9qbm6RuozHInuCqKwakieQbNociV.png

屏幕复位RST引进和ESP8266接在一起的话,

去掉//#define TFT_RST -1前的“//”即可,同时要屏蔽上一条语句。

下图是ESP8266引脚对应图

lrAwfW0FTg5gDhqsATgbikfI8wc8qYCLZouIgHQL.png

5、调节SPI速度

tUQmSKARVhzoVNU2lLtgeak0K84atioEXamoMlp3.png

默认是270000000,这里我设置成立40000000。

到此可以使用TFT_eSPI自带的例程测试屏幕

a6PFzMJBOj5xxuLpqhAAvv1zU832dNXBwmE9ejpz.png

例程在这个地方

到此TFT_eSPI库就配置完成了。

二、TFT_eSPI库教程

1、颜色调节

McrKZBUqyEPhbTUb9akAJqtEEQfWEevWIGQ1p8wg.png

  1. 库中已经定义好常见的颜色了,需要的时候可以直接调用
  2. 自定义颜色,使用语句tft.color565();(参数为颜色对应的RGB值)

UbU7A9xBR6bMnN4KyB34zMs2y31saQcWYXI7pvzt.png

  1. 设置半透明,在使用颜色的地方填入该tft.alphaBlend();

例如:tft.alphaBlend(20,TFT_RED,TFT_WHILE);

2、设置字体

编号范围是 1、2、4、6、7、8,不同的编号代表不同的字体, 不同的字体由于分辨率不同, 基本大小不同。

想学习自定义字体库可参Arduino\libraries\TFT_eSPI\examples\320 x 240\TFT_Custom_Fonts

3、相关API

1、tft.init(); //初始化初始化屏幕, 如果是ST7735,可以往里面传一个参数, 具体用到时再看

2、tft.fillScreen(TFT_BLACK); //填充全屏幕

3、屏幕旋转

// 设置屏幕显示的旋转角度,参数为:0, 1, 2, 3分别代表 0°、90°、180°、270°

void setRotation(uint8_t r);

4、屏幕反色

//反转显示颜色i = 1反转,i = 0正常

tft.invertDisplay(bool i);

4、显示文字

1、tft.setCursor(20, 10, 4); //设置打字起始坐标位置和字号

2、tft.setTextColor(TFT_BLACK); //设置字体颜色

3、tft.setTextSize(2); //设置字体大小(范围1~7)

4、tft.print("Hello World!"); // 显示字体

5、绘制字符

1、绘制字符串(居左)

lw4MRX4Z9d37M8p0CRfWimC86f1lJwxuAG9VXuXF.png

2、绘制字符串(居中)

V0ZsW5viGpHkRdN7WHDXavDueQbLiSTahVaUk0Ha.png

3、绘制字符串(居右)

nUxww7AunpJHMCCD6dFW5hluGtcdzr4JgtfjN824.png

4、绘制字符

xnCbD13FMCJO9eftNtFAKCsrLlSqozoLpuu86dBo.png

5、绘制浮点数

rBLFw6IxMQBBjToaEQiT1IHuG4BTdogoufKteWGk.png

6、绘制数字

XMucUjblqiPoWvt8QU2h8FgJJsVYAlmRwTeCTvl8.png

6、绘制几何图形

1、画点

q7redKQK3rfhL0u7VAsMAF9I3SAWKkvteSTfRNv6.png

2、画线

xFDs6VpnUfhuv2AyVXU49wsfXurrVqNiLY8LPqKa.png

3、画横线(快速)

ICcmMMRKBpsPFUTdmARxp61roHP7EIqD9vjQXB6x.png

4、画竖线(快速)

dk8ndsGBuuL6eNBjwBzxmfAVsO2pAsAy1PmOuzys.png

5、画空心圆

9lwJDOw350xHG20KVuUVin9MHkZJmtV8BIylmbxe.png

6、画实心圆

Awea5VxtMETb84xsEU9h9MFrATUhPeLLKbQlbJAt.png

7、画空心椭圆

xu2AmTRGdoe2derzIq5nsekyLXHBGtEKIYZlj5gb.png

8、画实心椭圆

umXIfgO3Hx8QDqQECVt1szbL2Gr3EZoFplkAASDZ.png

9、画空心矩形

PKpGRlZC1EnrfcGINEIapdrnzTk0jxPD8R6fZGGO.png

10、画实心矩形

BFviOp7ydHlkDGSinMEovG4ozZm9XKo8W8YHSEbr.png

11、画空心圆角矩形

vinvXg6bs98IVT88OuNRA5PjjxH2hbq9eOSN5HVm.png

12、画实心圆角矩形

tThBwt7NQrtJN8eCOibsC38DEtqW0qWcbnF8zibJ.png

13、画空心三角形

FGQ1q71nW4LyZMZxQMJOLSQRSurG7EG1Za3NWwGy.png

14、画实心三角形

iUVHIZTxAl0GKH9jCXuELcRUaeh0QO146TsV8o3k.png

7、显示图片

显示图片需要用到取模软件lcd-image-converter

VioXipyNhsf2M5tJEosuwBK2NX0L2OLbby4audjy.png

将图片像素大小根据调整到不超过屏幕大小->点击File->Open->选择图片->Options->Conversion…->按下图界面设置->Shoe Preview->复制数组

QLxqgGnYyatpHMTEiTZ0WR2rEg90QQm1tqskSDHo.png

到此取模完成。

新建一个jpg.h文件,将刚取模复制的数组放在const unsigned short bmp[] PROGMEM={};语句的大括号内保存。

例程:

#include

#include

TFT_eSPI tft = TFT_eSPI();

void setup() {

tft.init();

tft.pushImage(0,0,128,160,bmp);

}

void loop() {

}

这样就能显示图片。

设计图

原理图
PCB

BOM

IDNameDesignatorFootprintQuantity
1100uFC1C06031
2100nFC2,C5,C6,C9,C11C06035
322uFC3,C4C06032
410uC7C06031
51uC8C06031

附件

序号文件名称下载次数
1
TFT1-8S.STL
15
2
tft1-8x.STL
11
克隆工程
添加到专辑
0
0
分享
侵权投诉

评论

全部评论(1)
按时间排序|按热度排序
粉丝0|获赞0
相关工程
暂无相关工程

底部导航