设为首页收藏本站网络运维任务中心道具中心获得家元原创收益搜优惠券VIP会员
切换到宽版

数码之家

 找回密码
 立即注册

QQ登录

只需一步，快速开始

微信登录

微信扫一扫，快速登录

搜索
数码之家»社区 › 电子技术区 › 我爱单片机 › esp8266+DHT11+ILI9341绘制图形温湿度计
返回列表 发新帖
查看: 6177|回复: 17

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

[复制链接]
wei27311
发表于 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;

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

  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.   }

  34.   //仪表中心小圆
  35.   ucg.setColor(0,255,255);
  36.   ucg.drawDisc(cx,cy,(cr-70),UCG_DRAW_ALL);

  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. }

  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.   }

  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. }

  135. void setup(void) {
  136.   pinMode(DHT11PIN,OUTPUT);  
  137.   delay(1000);
  138.   ucg.begin(UCG_FONT_MODE_TRANSPARENT); //字体透明模式
  139.   ucg.setRotate90();  //屏幕旋转90度
  140. }

  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. }
复制代码






ili9341, 温湿度计, esp8266, lcd, 图形, esp8266, esp8266, esp8266, esp8266, esp8266, esp8266, esp8266, esp8266, esp8266, esp8266, esp8266, esp8266

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册 微信登录

x

打赏

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

查看全部打赏

相关帖子

欢迎点赞/打赏/收藏，助力作者文章获得热度奖励，帖子“火”了来领赏（奖励1000~3000家元）
回复

使用道具 举报

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

使用道具 举报

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

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

使用道具 举报

wei27311
 楼主| 发表于 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;

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

  9. //外仪表
  10. void draw(int value) {
  11.   int cx = 160;  //圆心x
  12.   int cy = 120;  //圆心y
  13.   int cr = 119;  //圆半径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-49)*cos(rad),cy+(cr-49)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));   
  31.     }
  32.   }
  33.   
  34.   //仪表刻度
  35.   for(int i=0;i<=100;i+=1)
  36.   {
  37.     angle = 150+i*2.4;
  38.     rad = angle/180*PI;
  39.     if(i==0 ||i==10 ||i==20 ||i==30 ||i==40 ||i==50 ||i==60 ||i==70 ||i==80 ||i==90 ||i==100)
  40.     {
  41.       //刻度线
  42.       ucg.setColor(255,255,255);
  43.       ucg.drawLine(cx+(cr-15)*cos(rad),cy+(cr-15)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  44.       //刻度数值
  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==5 ||i==15 ||i==25 ||i==35 ||i==45 ||i==55 ||i==65 ||i==75 ||i==85 ||i==95)
  50.     {
  51.       //刻度线
  52.       ucg.setColor(255,255,255);
  53.       ucg.drawLine(cx+(cr-10)*cos(rad),cy+(cr-10)*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-5)*cos(rad),cy+(cr-5)*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. }

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

  91.   //仪表内圆
  92.   ucg.setColor(255,0,0);  
  93.   ucg.drawDisc(cx,cy,(cr-65),UCG_DRAW_ALL);
  94.   
  95.   //仪表位刻度
  96.   for(int i=0;i<=50;i+=1)
  97.   {
  98.     float v = 150+i*4.8;
  99.     float rad = v/180*PI;
  100.     if(i==0 ||i==10 ||i==20 ||i==30 ||i==40 ||i==50)
  101.     {
  102.       //刻度线
  103.       ucg.setColor(255,255,255);
  104.       ucg.drawLine(cx+(cr-15)*cos(rad),cy+(cr-15)*sin(rad),cx+cr*cos(rad),cy+cr*sin(rad));
  105.       //刻度数值
  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.   ucg.setColor(255,0,0);  
  125.   ucg.drawCircle(cx,cy,cr,UCG_DRAW_ALL);
  126. }

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

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册 微信登录

x
回复 支持 反对

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

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

使用道具 举报

wei27311
 楼主| 发表于 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语言的语法看这个…感觉很怪异啊…
回复 支持 反对

使用道具 举报

wei27311
 楼主| 发表于 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 来自手机浏览器 | 显示全部楼层
都是大佬，围观一下
回复 支持 反对

使用道具 举报

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

使用道具 举报

wei27311
 楼主| 发表于 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:
回复 支持 反对

使用道具 举报

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

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies @朋友
您需要登录后才可以回帖 登录 | 立即注册 微信登录

本版积分规则

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

闽公网安备35020502000485号

闽ICP备2021002735号-2

GMT+8, 2025-6-15 04:37 , Processed in 0.093600 second(s), 10 queries , Redis On.

Powered by Discuz!

© 2006-2025 MyDigit.Net

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