数码之家

 找回密码
 立即注册
搜索
查看: 6159|回复: 17

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

[复制链接]
发表于 2019-8-26 12:28:44 来自手机浏览器 | 显示全部楼层 |阅读模式
本帖最后由 wei27311 于 2019-8-30 11:39 编辑

之前用的是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. Ucglib_ILI9341_18x240x320_HWSPI ucg(/*cd=*/ D1, /*cs=*/ D8, /*reset=*/ D2);

  7. //左边仪表
  8. void draw(int value) {
  9.   int cx = 76;  //圆心x
  10.   int cy = 120;  //圆心y
  11.   int cr = 75;  //圆半径r
  12.   float angle;  //数值转换指针偏转角度
  13.   float rad;  //指针偏转角度转换弧度
  14.   
  15.   //仪表指针及轨迹
  16.   for(float i=0;i<=value;i+=0.25)
  17.   {
  18.     angle = 150+i*2.4;  
  19.     rad = angle/180*PI;     
  20.     if(i<value)
  21.     {
  22.       ucg.setColor(0,255,255);
  23.       ucg.drawLine(cx+(cr-5)*cos(rad),cy+(cr-5)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  24.     }
  25.     else
  26.     {
  27.       ucg.setColor(0,255,255);
  28.       ucg.drawLine(cx+(cr-70)*cos(rad),cy+(cr-70)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
  29.     }
  30.   }

  31.   //仪表中心小圆
  32.   ucg.setColor(0,255,255);
  33.   ucg.drawDisc(cx,cy,(cr-70),UCG_DRAW_ALL);

  34.   //仪表刻度
  35.   for(int i=0;i<=100;i+=2.5){
  36.     angle = 150+i*2.4;  
  37.     rad = angle/180*PI;     
  38.     if(i==0 ||i==20 ||i==40 ||i==60 ||i==80 ||i==100)
  39.     {
  40.       //刻度线
  41.       ucg.setColor(255,255,255);  
  42.       ucg.drawLine(cx+(cr-15)*cos(rad),cy+(cr-15)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  43.       //刻度数值
  44.       ucg.setColor(255,255,255);  
  45.       ucg.setFont(ucg_font_ncenR14_tr);
  46.       ucg.setPrintPos((cx-8)+(cr-30)*cos(rad),(cy+5)+(cr-30)*sin(rad));
  47.       ucg.print(i);
  48.     }
  49.     else if(i==10 ||i==30 ||i==50 ||i==70 ||i==90)
  50.     {
  51.       //刻度线
  52.       ucg.setColor(255,255,255);  
  53.       ucg.drawLine(cx+(cr-15)*cos(rad),cy+(cr-15)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  54.     }
  55.     else
  56.     {
  57.       //刻度线
  58.       ucg.setColor(255,255,255);  
  59.       ucg.drawLine(cx+(cr-10)*cos(rad),cy+(cr-10)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
  60.     }
  61.   }
  62.   
  63.   //仪表外圆
  64.   ucg.setColor(255,255,255);  
  65.   ucg.drawCircle(cx,cy,cr,UCG_DRAW_ALL);
  66. }

  67. //右边仪表
  68. void draw2(int value) {
  69.   int cx = 244;  //圆心x
  70.   int cy = 120;  //圆心y
  71.   int cr = 75;  //圆半径r
  72.   float angle;  //数值转换指针偏转角度
  73.   float rad;  //指针偏转角度转换弧度
  74.   
  75.   //仪表指针及轨迹
  76.   for(float i=0;i<=value;i+=0.25)
  77.   {
  78.     angle = 150+i*4.8;  
  79.     rad = angle/180*PI;     
  80.     if(i<value)
  81.     {
  82.       ucg.setColor(255,0,0);
  83.       ucg.drawLine(cx+(cr-5)*cos(rad),cy+(cr-5)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  84.     }
  85.     else
  86.     {
  87.       ucg.setColor(255,0,0);
  88.       ucg.drawLine(cx+(cr-70)*cos(rad),cy+(cr-70)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
  89.     }
  90.   }

  91.   //仪表中心小圆
  92.   ucg.setColor(255,0,0);
  93.   ucg.drawDisc(cx,cy,(cr-70),UCG_DRAW_ALL);
  94.   
  95.   //仪表刻度
  96.   for(int i=0;i<=50;i+=1){
  97.     angle = i*4.8+150;
  98.     rad = angle/180*PI;
  99.     if(i==0 ||i==10 ||i==20 ||i==30 ||i==40 ||i==50)
  100.     {
  101.       //刻度线
  102.       ucg.setColor(255,255,255);  
  103.       ucg.drawLine(cx+(cr-15)*cos(rad),cy+(cr-15)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  104.       //刻度数值
  105.       ucg.setColor(255,255,255);  
  106.       ucg.setFont(ucg_font_ncenR14_tr);
  107.       ucg.setPrintPos((cx-8)+(cr-30)*cos(rad),(cy+5)+(cr-30)*sin(rad));
  108.       ucg.print(i);
  109.     }
  110.     else if(i==5 ||i==15 ||i==25 ||i==35 ||i==45)
  111.     {
  112.       //刻度线
  113.       ucg.setColor(255,255,255);  
  114.       ucg.drawLine(cx+(cr-10)*cos(rad),cy+(cr-10)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  115.     }
  116.     else
  117.     {
  118.       //刻度线
  119.       ucg.setColor(255,255,255);  
  120.       ucg.drawLine(cx+(cr-5)*cos(rad),cy+(cr-5)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
  121.     }
  122.   }
  123.   
  124.   //仪表外圆
  125.   ucg.setColor(255,255,255);  
  126.   ucg.drawCircle(cx,cy,cr,UCG_DRAW_ALL);
  127. }

  128. void setup(void) {
  129.   pinMode(DHT11PIN,OUTPUT);  
  130.   delay(1000);
  131.   ucg.begin(UCG_FONT_MODE_TRANSPARENT); //字体透明模式
  132.   ucg.setRotate90();  //屏幕旋转90度
  133. }

  134. void loop(void) {
  135.   int chk = DHT11.read(DHT11PIN);                 //将读取到的值赋给chk
  136.   int tem=(float)DHT11.temperature;               //将温度值赋值给tem
  137.   int hum=(float)DHT11.humidity;                  //将湿度值赋值给hum
  138.   ucg.clearScreen();  //清屏
  139.   draw(hum);  
  140.   draw2(tem);
  141.   delay(10000); //10秒刷新一次
  142. }
复制代码






本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

打赏

参与人数 1家元 +40 收起 理由
家睦 + 40

查看全部打赏

发表于 2019-8-26 21:08:16 来自手机浏览器 | 显示全部楼层
不会玩阿丢一诺…看着很漂亮…
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-8-26 21:16:08 来自手机浏览器 | 显示全部楼层
触景情伤 发表于 2019-8-26 21:08
不会玩阿丢一诺…看着很漂亮…

很简单啊 只要接线上传程序就可以了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-8-26 22:23:52 | 显示全部楼层
本帖最后由 wei27311 于 2019-8-29 15:36 编辑
  1. #include "Ucglib.h"
  2. #include <dht11.h>
  3. #define DHT11PIN D6 //DHT11 data接D6引脚
  4. #include <SPI.h>
  5. dht11 DHT11;

  6. Ucglib_ILI9341_18x240x320_HWSPI ucg(/*cd=*/ D1, /*cs=*/ D8, /*reset=*/ D2);

  7. //外仪表
  8. void draw(int value) {
  9.   int cx = 160;  //圆心x
  10.   int cy = 120;  //圆心y
  11.   int cr = 119;  //圆半径r
  12.   float angle; //数值转换指针偏转角度
  13.   float rad; //指针偏转角度转换弧度
  14.   
  15.   //仪表指针及轨迹
  16.   for(float i=0;i<=value;i+=0.25)
  17.   {
  18.     angle = 150+i*2.4;  //数值转换指针偏转角度
  19.     rad = angle/180*PI;     //指针偏转角度转换弧度
  20.     if(i<value)
  21.     {
  22.       ucg.setColor(0,255,255);
  23.       ucg.drawLine(cx+(cr-5)*cos(rad),cy+(cr-5)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  24.     }
  25.     else
  26.     {
  27.       ucg.setColor(0,255,255);
  28.       ucg.drawLine(cx+(cr-49)*cos(rad),cy+(cr-49)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));   
  29.     }
  30.   }
  31.   
  32.   //仪表刻度
  33.   for(int i=0;i<=100;i+=1)
  34.   {
  35.     angle = 150+i*2.4;
  36.     rad = angle/180*PI;
  37.     if(i==0 ||i==10 ||i==20 ||i==30 ||i==40 ||i==50 ||i==60 ||i==70 ||i==80 ||i==90 ||i==100)
  38.     {
  39.       //刻度线
  40.       ucg.setColor(255,255,255);
  41.       ucg.drawLine(cx+(cr-15)*cos(rad),cy+(cr-15)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  42.       //刻度数值
  43.       ucg.setFont(ucg_font_ncenR14_tr);
  44.       ucg.setPrintPos((cx-8)+(cr-30)*cos(rad),(cy+5)+(cr-30)*sin(rad));
  45.       ucg.print(i);
  46.     }
  47.     else if(i==5 ||i==15 ||i==25 ||i==35 ||i==45 ||i==55 ||i==65 ||i==75 ||i==85 ||i==95)
  48.     {
  49.       //刻度线
  50.       ucg.setColor(255,255,255);
  51.       ucg.drawLine(cx+(cr-10)*cos(rad),cy+(cr-10)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
  52.     }
  53.     else
  54.     {
  55.       //刻度线
  56.       ucg.setColor(255,255,255);
  57.       ucg.drawLine(cx+(cr-5)*cos(rad),cy+(cr-5)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));            
  58.     }
  59.   }
  60.   
  61.   //仪表外圆
  62.   ucg.setColor(255,255,255);  
  63.   ucg.drawCircle(cx,cy,cr,UCG_DRAW_ALL);
  64. }

  65. //内仪表
  66. void draw2(int value) {
  67.   int cx = 160;  //圆心x
  68.   int cy = 120;  //圆心y
  69.   int cr = 70;  //圆半径r
  70.   
  71.   //仪表指针及轨迹
  72.   for(float i=0;i<=value;i+=0.25)
  73.   {
  74.     float angle = 150+i*4.8;  //数值转换指针偏转角度
  75.     float rad = angle/180*PI;     //指针偏转角度转换弧度
  76.     if(i<value)
  77.     {
  78.       ucg.setColor(255,0,0);
  79.       ucg.drawLine(cx+(cr-5)*cos(rad),cy+(cr-5)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  80.     }
  81.     else
  82.     {
  83.       ucg.setColor(255,0,0);
  84.       ucg.drawLine(cx+(cr-65)*cos(rad),cy+(cr-65)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
  85.     }
  86.   }

  87.   //仪表内圆
  88.   ucg.setColor(255,0,0);  
  89.   ucg.drawDisc(cx,cy,(cr-65),UCG_DRAW_ALL);
  90.   
  91.   //仪表位刻度
  92.   for(int i=0;i<=50;i+=1)
  93.   {
  94.     float v = 150+i*4.8;
  95.     float rad = v/180*PI;
  96.     if(i==0 ||i==10 ||i==20 ||i==30 ||i==40 ||i==50)
  97.     {
  98.       //刻度线
  99.       ucg.setColor(255,255,255);
  100.       ucg.drawLine(cx+(cr-15)*cos(rad),cy+(cr-15)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  101.       //刻度数值
  102.       ucg.setFont(ucg_font_ncenR14_tr);
  103.       ucg.setPrintPos((cx-8)+(cr-30)*cos(rad),(cy+5)+(cr-30)*sin(rad));
  104.       ucg.print(i);
  105.     }
  106.     else if(i==5 ||i==15 ||i==25 ||i==35 ||i==45)
  107.     {
  108.       //刻度线
  109.       ucg.setColor(255,255,255);
  110.       ucg.drawLine(cx+(cr-10)*cos(rad),cy+(cr-10)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  111.     }
  112.     else
  113.     {
  114.       //刻度线
  115.       ucg.setColor(255,255,255);
  116.       ucg.drawLine(cx+(cr-5)*cos(rad),cy+(cr-5)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));      
  117.     }
  118.   }
  119.   //仪表外圆
  120.   ucg.setColor(255,0,0);  
  121.   ucg.drawCircle(cx,cy,cr,UCG_DRAW_ALL);
  122. }

  123. void setup(void) {
  124.   pinMode(DHT11PIN,OUTPUT);  
  125.   delay(1000);
  126.   ucg.begin(UCG_FONT_MODE_TRANSPARENT); //字体透明模式
  127.   ucg.setRotate90();  //屏幕旋转90度
  128. }

  129. void loop(void) {
  130.   int chk = DHT11.read(DHT11PIN);                 //将读取到的值赋给chk
  131.   int tem=(float)DHT11.temperature;               //将温度值赋值给tem
  132.   int hum=(float)DHT11.humidity;                  //将湿度值赋值给hum
  133.   ucg.clearScreen();  //清屏
  134.   draw(hum);  
  135.   draw2(tem);
  136.   delay(10000); //10秒刷新一次
  137. }
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复 支持 反对

使用道具 举报

发表于 2019-8-26 23:33:03 | 显示全部楼层
很好,arduino的高手.可以试用STM32的板子跑,不知是否支持.还是SPI接口的传输不够快?我是初学者不是很了解.
回复 支持 反对

使用道具 举报

发表于 2019-8-27 10:14:01 | 显示全部楼层
新手看不懂,屏接线也搞不明白,详细介绍下,也去搞套玩玩
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-8-27 12:11:58 来自手机浏览器 | 显示全部楼层
mayuanfu 发表于 2019-8-26 23:33
很好,arduino的高手.可以试用STM32的板子跑,不知是否支持.还是SPI接口的传输不够快?我是初学者不是很了解. ...

具体也不太清楚
其实esp8266核心也是32位单片机
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-8-27 12:16:49 来自手机浏览器 | 显示全部楼层
zxy882266 发表于 2019-8-27 10:14
新手看不懂,屏接线也搞不明白,详细介绍下,也去搞套玩玩

1.安装Arduino IDE
2.安装DHT11库
3.安装Ucglib库
4.安装esp8266开发板
5.买一块nodemcu开发板
6.买DHT11温湿度传感器模块
7.买一个ILI9341的屏幕
8.根据引脚接线
9.复制粘贴代码上传就可以了
回复 支持 反对

使用道具 举报

发表于 2019-8-27 20:17:57 来自手机浏览器 | 显示全部楼层
用c语言的语法看这个…感觉很怪异啊…
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-8-28 09:54:18 来自手机浏览器 | 显示全部楼层
本帖最后由 wei27311 于 2019-8-28 09:56 编辑
触景情伤 发表于 2019-8-27 20:17
用c语言的语法看这个…感觉很怪异啊…


这是在ucglib示例hellowords中更改而来的
回复 支持 反对

使用道具 举报

发表于 2019-8-28 18:35:36 来自手机浏览器 | 显示全部楼层
都是大佬,围观一下
回复 支持 反对

使用道具 举报

发表于 2019-8-29 11:07:23 | 显示全部楼层
我的屏的接口是并口
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-8-29 15:11:55 来自手机浏览器 | 显示全部楼层
本帖最后由 wei27311 于 2019-8-29 15:13 编辑
ynymwtb 发表于 2019-8-29 11:07
我的屏的接口是并口


我有个ILI9341 2.4寸的并口屏
可以直插Arduino UNO R3
刷新率挺高的
不过驱动库没这个好用
而且屏幕可视范围和色域都比这个差
回复 支持 反对

使用道具 举报

发表于 2019-9-6 09:50:52 | 显示全部楼层
每次更新数值都是重绘整个表盘,刷新率当然高不了哪去:biggrin:
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-9-6 15:05:33 来自手机浏览器 | 显示全部楼层
南天音乐 发表于 2019-9-6 09:50
每次更新数值都是重绘整个表盘,刷新率当然高不了哪去

我也觉得是因为这样才刷新慢
曾经想把表盘做成位图每次刷新直接加载然后再画指针
不过ucglib这个库不支持这功能
其实有个更好的办法就系不画指针
用一个彩色圆弧画在外圆代替指针
这样每次刷新只要重画外圆就可以了
回复 支持 反对

使用道具 举报

发表于 2020-4-24 21:14:27 | 显示全部楼层
怎么没有见下载附件
回复 支持 反对

使用道具 举报

发表于 2021-1-7 10:21:54 | 显示全部楼层
再加个pm2.5的传感器上去就好了
回复 支持 反对

使用道具 举报

发表于 2021-1-7 10:58:02 | 显示全部楼层
看不懂代码:sweat:。好复杂。谢谢楼主分享哈。我就喜欢看看,就是不会单片机。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

APP|手机版|小黑屋|关于我们|联系我们|法律条款|技术知识分享平台

闽公网安备35020502000485号

闽ICP备2021002735号-2

GMT+8, 2025-6-11 21:42 , Processed in 0.249601 second(s), 12 queries , Redis On.

Powered by Discuz!

© 2006-2025 MyDigit.Net

快速回复 返回顶部 返回列表