esp8266 + ILI9341 +DHT11 显示图片教程

wei27311

接线:
VCC -> 3.3V
GND -> GND
CS -> D8
RESET -> D2
DC/RS -> D1
SDI/MOSI -> D7
SCK -> D5
LED -> 3.3V或PWM控制亮度


我用的是SPI接口的ILI9341彩色LCD
这个屏幕需要在上电的时候复位一次才能显示否则直接白屏
很多的Arduino驱动库是不包含这一步的例如现在用的Adafruit_GFX库
所以一定要注意这一点
具体的做法就是在reset引脚先给低电平
然后再给高电平
屏幕运行期间reset引脚需要一直给高电平
否则就白屏了


Adafruit_GFX库可以理解为是一个接口它提供了通用的方法
需要搭配具体的屏幕驱动库一起使用
在这里需要搭配Adafruit_ILI9341
关于Adafruit_GFX这个库的详细介绍可以登陆下面连接查看
https://electropeak.com/learn/absolute-beginners-guide-to-tft-lcd-displays-by-arduino/

显示图片的原理其实就是把一张图片通过软件
把每一个像素点变成十六位的RGB数值
然后存入一个数组里面传输到LCD显示
我们常用的图片是RGB888 24位的颜色 一个像素点要3个字节
但是一般这种LCD用的是RGB565 是16位的颜色 一个像素点只需要2个字节
所以要用转换软件
这里推荐用picture2hex


第一步：
用AI设计好仪表盘的背景图


第二部：
导出成RGB565的BMP文件


第三部:
用picture2hex软件转换成数组
注意要选好分辨率生成好的数组在picture2hex软件根目录的work文件夹里面


第四部：
在arduino 项目文件夹里新建一个 h文件
把picture2hex生成的数组放入
const uint16_t bg[] PROGMEM = { //code };


第五步:
编译并上传到esp8266.


由于esp8266图形处理能力不高
在这个温湿度计中只有指针和温度值是实时画出来的
其他都是一张图片
底图只加载一次
每次刷新画出指针以及打印出温度值
延时一定时间后用背景色清除掉
另外这个屏幕只有65k色彩
色域很窄过渡不够自然
底图不适合用渐变效果
色差与电脑屏幕相差非常大

1. #include "bg.h"
   
2. #include <dht11.h>
   
3. #define DHT11PIN D6
   
4. dht11 DHT11;
   
5. #include <Adafruit_ILI9341.h>
   
6. #define lcdreset D2
   
7. #define TFT_DC D1
   
8. #define TFT_CS D8
   
9. Adafruit_ILI9341 ucg = Adafruit_ILI9341(TFT_CS, TFT_DC);
   
10. #define bgcolor ucg.color565(102,102,102)
    
11. #define WHITE ucg.color565(255,255,255)
    
12. 
    
13. int chk;
    
14. int tem;
    
15. int hum;   
    
16. int tem2 = 0;
    
17. int hum2 = 0;
    
18. 
    
19. void Clear1(int value)
    
20. {
    
21.   int cx = 160;  //圆心x
    
22.   int cy = 120;  //圆心y
    
23.   int cr = 118;  //外圆半径r  
    
24. 
    
25.   //清除湿度指针
    
26.   for(int i=0;i<=15;i++)
    
27.   {
    
28.     int v = 300 + value * 9;  
    
29.     int v2 = (300 + value * 9) - i;
    
30.     int v3 = (300 + value * 9) + i;
    
31.     int line1_x0 = floor(cx + (cr - 135) * cos(2 * PI / 1200 * v2));
    
32.     int line1_y0 = floor(cy + (cr - 135) * sin(2 * PI / 1200 * v2));  
    
33.     int line1_x1 = floor(cx + (cr - 40) * cos(2 * PI / 1200 * v));
    
34.     int line1_y1 = floor(cy + (cr - 40) * sin(2 * PI / 1200 * v));  
    
35.     int line2_x0 = floor(cx + (cr - 135) * cos(2 * PI / 1200 * v3));
    
36.     int line2_y0 = floor(cy + (cr - 135) * sin(2 * PI / 1200 * v3));  
    
37.     int line2_x1 = floor(cx + (cr - 40) * cos(2 * PI / 1200 * v));
    
38.     int line2_y1 = floor(cy + (cr - 40) * sin(2 * PI / 1200 * v));
    
39.     ucg.drawLine(line1_x0,line1_y0,line1_x1,line1_y1,bgcolor);
    
40.     ucg.drawLine(line2_x0,line2_y0,line2_x1,line2_y1,bgcolor);
    
41.   }  
    
42. }
    
43. 
    
44. void draw1(int value)
    
45. {
    
46.   int cx = 160;  //圆心x
    
47.   int cy = 120;  //圆心y
    
48.   int cr = 118;  //外圆半径r
    
49. 
    
50.   //湿度中心圆
    
51.   ucg.drawCircle(cx,cy,10,CYAN);
    
52.   
    
53.   //湿度指针
    
54.   for(int i=0;i<=15;i++)
    
55.   {
    
56.     int v = 300 + value * 9;  
    
57.     int v2 = (300 + value * 9) - i;
    
58.     int v3 = (300 + value * 9) + i;
    
59.     int line1_x0 = floor(cx + (cr - 135) * cos(2 * PI / 1200 * v2));
    
60.     int line1_y0 = floor(cy + (cr - 135) * sin(2 * PI / 1200 * v2));  
    
61.     int line1_x1 = floor(cx + (cr - 40) * cos(2 * PI / 1200 * v));
    
62.     int line1_y1 = floor(cy + (cr - 40) * sin(2 * PI / 1200 * v));  
    
63.     int line2_x0 = floor(cx + (cr - 135) * cos(2 * PI / 1200 * v3));
    
64.     int line2_y0 = floor(cy + (cr - 135) * sin(2 * PI / 1200 * v3));  
    
65.     int line2_x1 = floor(cx + (cr - 40) * cos(2 * PI / 1200 * v));
    
66.     int line2_y1 = floor(cy + (cr - 40) * sin(2 * PI / 1200 * v));
    
67.     ucg.drawLine(line1_x0,line1_y0,line1_x1,line1_y1,WHITE);
    
68.     ucg.drawLine(line2_x0,line2_y0,line2_x1,line2_y1,WHITE);
    
69.   }  
    
70. }
    
71. 
    
72. void Clear2()
    
73. {
    
74.   int cx = 160;  //圆心x
    
75.   int cy = 120;  //圆心y
    
76. 
    
77.   //清除内圆数值
    
78.   ucg.fillRect((cx + 18),(cy + 45),35,30,bgcolor);  
    
79. }
    
80. 
    
81. void draw2(int value2)
    
82. {
    
83.   int cx = 160;  //圆心x
    
84.   int cy = 120;  //圆心y
    
85.   
    
86.   //内圆显示数值
    
87.   ucg.setTextSize(3);
    
88.   ucg.setTextColor(WHITE);
    
89.   ucg.setCursor((cx + 18),(cy + 37));
    
90.   ucg.print(value2);   
    
91. }
    
92. 
    
93. void setup()
    
94. {
    
95.   pinMode(DHT11PIN,OUTPUT);
    
96.   pinMode(lcdreset,OUTPUT);
    
97.   digitalWrite(lcdreset,LOW);
    
98.   delay(10);
    
99.   digitalWrite(lcdreset,HIGH);   
    
100.   ucg.begin();
     
101.   ucg.setRotation(1); //屏幕旋转90度
     
102.   ucg.drawRGBBitmap(0,0,bg,320,240);
     
103.   delay(100);
     
104.   draw1(hum2);
     
105.   draw2(tem2);
     
106. }
     
107. 
     
108. void loop()
     
109. {
     
110.   chk = DHT11.read(DHT11PIN); //将读取到的值赋给chk
     
111.   tem=(float)DHT11.temperature; //将温度值赋值给tem
     
112.   hum=(float)DHT11.humidity;   //将湿度值赋值给hum
     
113. 
     
114.   if(hum2 != hum)
     
115.   {
     
116.     Clear1(hum2);
     
117.     hum2 = hum;
     
118.     draw1(hum2);
     
119.   }
     
120.   else
     
121.   {
     
122.    
     
123.   }
     
124. 
     
125.   if(tem2 != tem)
     
126.   {
     
127.     Clear2(tem2);
     
128.     tem2 = tem;
     
129.     draw2(tem2);
     
130.   }
     
131.   else
     
132.   {
     
133.    
     
134.   }
     
135. }

复制代码

wei27311

这个压缩包包含了AI源文件以及Arduino源代码
电脑上设计的时候感觉还行
LCD显示效果大打折扣手机拍出来的效果更差

jmx1124

这个不错，感谢分享！

wei27311

jmx1124 发表于 2019-9-20 15:21
这个不错，感谢分享！

感谢支持

风中有你

非常漂亮

junyee

确实很漂亮.

不过非IPS的TFT屏幕效果确实不够好,

我没细玩ES8226,
不过我 的 STM32F401@72MHz刷 320*240 (8位总线16位色)已经有 20+ 帧了,
ESP8226 主频不是有200M 吗, 刷新率应该可以吧...
还是SPI速率被限制了?

eagler8

很好看，学习了

wei27311

junyee 发表于 2019-9-21 07:11
确实很漂亮.

不过非IPS的TFT屏幕效果确实不够好,

全图刷新20帧吗？
我现在只刷新指针和数值
刷新的时候能明显看到闪烁
所以改为1秒刷新一次

junyee

wei27311 发表于 2019-9-21 11:51
全图刷新20帧吗？
我现在只刷新指针和数值
刷新的时候能明显看到闪烁

当然是 全屏刷新..


论坛不能传视频..
链接: https://pan.baidu.com/s/1aHA2_K3W4RBHL4iwT7ce8g 提取码: mtcr

cat_li

还可以这样生成图片，学习了

wei27311

junyee 发表于 2019-9-21 13:27
当然是 全屏刷新..

你那个很流畅
我这个如果每次都全图刷新会死机
延时1秒刷新都不行
esp8266估计性能还是比不过stm32吧
不过与驱动库也有关系
我之前用ucglib 那库刷新更慢

junyee

wei27311 发表于 2019-9-21 13:37
你那个很流畅
我这个如果每次都全图刷新会死机
延时1秒刷新都不行

esp8266   比 stm32 M3/M4 可能要强吧,
你这个刷新慢有可能是底层的拖累...

触景情伤

既然有8226了还要dht11干嘛？

wei27311

触景情伤 发表于 2019-9-22 09:41
既然有8226了还要dht11干嘛？

这是一个温湿度计啊
当然需要温湿度传感器
图片只是一张背景图
关键在于根据传感器的数值画出指针啊

触景情伤

wei27311 发表于 2019-9-22 13:39
这是一个温湿度计啊
当然需要温湿度传感器
图片只是一张背景图

8226不是可以从网上爬出来这些数据吗？

wei27311

触景情伤 发表于 2019-9-22 15:09
8226不是可以从网上爬出来这些数据吗？

网上的数据跟传感器的数据没可比性
传感器能很灵敏的显示当前环境的数值
就像同样是30度
之前湿度达到80以上就会觉得很闷热
这几天湿度只有不到40
吹风扇都觉得有点凉了
其实在一个季节当中温度相当固定
湿度在不同时刻不同情况下会有大幅度的改变
这就是为什么我把湿度做成指针仪表
而温度直接显示出来的原因

触景情伤

wei27311 发表于 2019-9-22 16:06
网上的数据跟传感器的数据没可比性
传感器能很灵敏的显示当前环境的数值
就像同样是30度

dht11有负温度显示吗？

wei27311

触景情伤 发表于 2019-9-22 16:22
dht11有负温度显示吗？

没有
DHT11温度量程是0-50
测负温度要用DHT12
那个量程是-20 - 60

eagler8

wei27311 发表于 2019-9-22 16:53
没有
DHT11温度量程是0-50
测负温度要用DHT12

这块屏没有见过，真不错

虎纠咸鱼

高分辨率彩屏不适合SPI，也不适合这样效率低的方式驱动。