esp8266+DHT11+ILI9341绘制图形温湿度计

wei27311

之前用的是0.96寸的oled单色屏
U8g2库驱动刷新率很满意但屏幕太小了
这2.2寸彩色lcd拿到手后折腾了一个晚上都无法用
后来发现是Arduino UNO R3引脚电平与这个lcd不匹配
改用esp8266后一次驱动成功
由于是彩色屏所以改用Ucglib库
屏幕大了分辨率高的效果真的很好
遗憾的是刷新率不理想

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

1. #include "Ucglib.h"
   
2. #include <dht11.h>
   
3. #define DHT11PIN D6 //DHT11 data接D6引脚
   
4. #include <SPI.h>
   
5. dht11 DHT11;
   
6. 
   
7. Ucglib_ILI9341_18x240x320_HWSPI ucg(/*cd=*/ D1, /*cs=*/ D8, /*reset=*/ D2);
   
8. 
   
9. //左边仪表
   
10. void draw(int value) {
    
11.   int cx = 76;  //圆心x
    
12.   int cy = 120;  //圆心y
    
13.   int cr = 75;  //圆半径r
    
14.   float angle;  //数值转换指针偏转角度
    
15.   float rad;  //指针偏转角度转换弧度
    
16.   
    
17.   //仪表指针及轨迹
    
18.   for(float i=0;i<=value;i+=0.25)
    
19.   {
    
20.     angle = 150+i*2.4;  
    
21.     rad = angle/180*PI;     
    
22.     if(i<value)
    
23.     {
    
24.       ucg.setColor(0,255,255);
    
25.       ucg.drawLine(cx+(cr-5)*cos(rad),cy+(cr-5)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
    
26.     }
    
27.     else
    
28.     {
    
29.       ucg.setColor(0,255,255);
    
30.       ucg.drawLine(cx+(cr-70)*cos(rad),cy+(cr-70)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
    
31.     }
    
32.   }
    
33. 
    
34.   //仪表中心小圆
    
35.   ucg.setColor(0,255,255);
    
36.   ucg.drawDisc(cx,cy,(cr-70),UCG_DRAW_ALL);
    
37. 
    
38.   //仪表刻度
    
39.   for(int i=0;i<=100;i+=2.5){
    
40.     angle = 150+i*2.4;  
    
41.     rad = angle/180*PI;     
    
42.     if(i==0 ||i==20 ||i==40 ||i==60 ||i==80 ||i==100)
    
43.     {
    
44.       //刻度线
    
45.       ucg.setColor(255,255,255);  
    
46.       ucg.drawLine(cx+(cr-15)*cos(rad),cy+(cr-15)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
    
47.       //刻度数值
    
48.       ucg.setColor(255,255,255);  
    
49.       ucg.setFont(ucg_font_ncenR14_tr);
    
50.       ucg.setPrintPos((cx-8)+(cr-30)*cos(rad),(cy+5)+(cr-30)*sin(rad));
    
51.       ucg.print(i);
    
52.     }
    
53.     else if(i==10 ||i==30 ||i==50 ||i==70 ||i==90)
    
54.     {
    
55.       //刻度线
    
56.       ucg.setColor(255,255,255);  
    
57.       ucg.drawLine(cx+(cr-15)*cos(rad),cy+(cr-15)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
    
58.     }
    
59.     else
    
60.     {
    
61.       //刻度线
    
62.       ucg.setColor(255,255,255);  
    
63.       ucg.drawLine(cx+(cr-10)*cos(rad),cy+(cr-10)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
    
64.     }
    
65.   }
    
66.   
    
67.   //仪表外圆
    
68.   ucg.setColor(255,255,255);  
    
69.   ucg.drawCircle(cx,cy,cr,UCG_DRAW_ALL);
    
70. }
    
71. 
    
72. //右边仪表
    
73. void draw2(int value) {
    
74.   int cx = 244;  //圆心x
    
75.   int cy = 120;  //圆心y
    
76.   int cr = 75;  //圆半径r
    
77.   float angle;  //数值转换指针偏转角度
    
78.   float rad;  //指针偏转角度转换弧度
    
79.   
    
80.   //仪表指针及轨迹
    
81.   for(float i=0;i<=value;i+=0.25)
    
82.   {
    
83.     angle = 150+i*4.8;  
    
84.     rad = angle/180*PI;     
    
85.     if(i<value)
    
86.     {
    
87.       ucg.setColor(255,0,0);
    
88.       ucg.drawLine(cx+(cr-5)*cos(rad),cy+(cr-5)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
    
89.     }
    
90.     else
    
91.     {
    
92.       ucg.setColor(255,0,0);
    
93.       ucg.drawLine(cx+(cr-70)*cos(rad),cy+(cr-70)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
    
94.     }
    
95.   }
    
96. 
    
97.   //仪表中心小圆
    
98.   ucg.setColor(255,0,0);
    
99.   ucg.drawDisc(cx,cy,(cr-70),UCG_DRAW_ALL);
    
100.   
     
101.   //仪表刻度
     
102.   for(int i=0;i<=50;i+=1){
     
103.     angle = i*4.8+150;
     
104.     rad = angle/180*PI;
     
105.     if(i==0 ||i==10 ||i==20 ||i==30 ||i==40 ||i==50)
     
106.     {
     
107.       //刻度线
     
108.       ucg.setColor(255,255,255);  
     
109.       ucg.drawLine(cx+(cr-15)*cos(rad),cy+(cr-15)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
     
110.       //刻度数值
     
111.       ucg.setColor(255,255,255);  
     
112.       ucg.setFont(ucg_font_ncenR14_tr);
     
113.       ucg.setPrintPos((cx-8)+(cr-30)*cos(rad),(cy+5)+(cr-30)*sin(rad));
     
114.       ucg.print(i);
     
115.     }
     
116.     else if(i==5 ||i==15 ||i==25 ||i==35 ||i==45)
     
117.     {
     
118.       //刻度线
     
119.       ucg.setColor(255,255,255);  
     
120.       ucg.drawLine(cx+(cr-10)*cos(rad),cy+(cr-10)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
     
121.     }
     
122.     else
     
123.     {
     
124.       //刻度线
     
125.       ucg.setColor(255,255,255);  
     
126.       ucg.drawLine(cx+(cr-5)*cos(rad),cy+(cr-5)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
     
127.     }
     
128.   }
     
129.   
     
130.   //仪表外圆
     
131.   ucg.setColor(255,255,255);  
     
132.   ucg.drawCircle(cx,cy,cr,UCG_DRAW_ALL);
     
133. }
     
134. 
     
135. void setup(void) {
     
136.   pinMode(DHT11PIN,OUTPUT);  
     
137.   delay(1000);
     
138.   ucg.begin(UCG_FONT_MODE_TRANSPARENT); //字体透明模式
     
139.   ucg.setRotate90();  //屏幕旋转90度
     
140. }
     
141. 
     
142. void loop(void) {
     
143.   int chk = DHT11.read(DHT11PIN);                 //将读取到的值赋给chk
     
144.   int tem=(float)DHT11.temperature;               //将温度值赋值给tem
     
145.   int hum=(float)DHT11.humidity;                  //将湿度值赋值给hum
     
146.   ucg.clearScreen();  //清屏
     
147.   draw(hum);  
     
148.   draw2(tem);
     
149.   delay(10000); //10秒刷新一次
     
150. }

复制代码

触景情伤

游客请登录后查看回复内容

wei27311

游客请登录后查看回复内容

wei27311

游客请登录后查看回复内容

mayuanfu

游客请登录后查看回复内容

zxy882266

游客请登录后查看回复内容

wei27311

游客请登录后查看回复内容

wei27311

游客请登录后查看回复内容

触景情伤

游客请登录后查看回复内容

wei27311

游客请登录后查看回复内容

兔族族长

游客请登录后查看回复内容

ynymwtb

游客请登录后查看回复内容

wei27311

游客请登录后查看回复内容

南天音乐

游客请登录后查看回复内容

wei27311

游客请登录后查看回复内容

gxgllzh123

游客请登录后查看回复内容

longjunling

游客请登录后查看回复内容

pxhxkij

游客请登录后查看回复内容