京小亿 发表于 2022-4-12 16:55:05

【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示

温度监测在我们生活和生产中具有非常重要的作用,而使用Arduino控制器采集温度数值也是很多创客小伙伴在学习过程中必不可少的环节。


今天我们使用LM35这款模拟电压输出型温度传感器来制作一个不同于以往的“温度计”:我们将温度数值图形化,在彩屏上直接用进度条的长度来表示温度的变化(如下图),非常的直观。


而实现方法也非常的简单,下面我们就逐步来介绍一下。

要实现串口数据在彩屏端的图形化显示,我们需要完成三个步骤:
1、制作图形素材;2、使用工具软件制作资源文件;3、编写程序代码。


第一步:制作图形素材
我们选择一个温度计图片,将液柱变化的部位裁剪下来:把不变的做成进度条的背景图,随温度变化的做成进度条实体图。如上图。

第二部:制作资源文件
我们使用ATFUI_TOOL工具,使用进度条控件来制作温度计资源文件。

我们选择进度条的方向(纵向),选择进度条重绘属性(位图绘制),然后把我们制作好的进度条背景和实体图片导入,最后设计进度条数值范围为:0-100.


这样进度条控件就做好了。

为了更直观的显示温度值,我们在温度计上面再加一个数值控件,用来实时显示Arduino串口发来的数据。



这样我们的资源文件就做好了。



我们使用USB线,将制作好的资源文件下载到彩屏中。

第三步,编写程序:可以使用Arduino IDE,也可以使用米思齐。程序如下:




上传程序到Arduino控制器。然后将Arduino控制器连接彩屏。



上电,启动程序,屏幕就可以实时显示当前的温度了。


本教程中用到的图片、代码和资源文件等素材,都可以在在这里下载:
资源下载:链接:https://pan.baidu.com/s/1A0IJMNr_n5F-gFk4NBaPjw?pwd=ATFC

https://www.ixigua.com/7085601049561530920


hnyzcj 发表于 2022-4-13 06:49:42

漂亮了

发表于 2022-4-13 11:02:41

问一下:你用的红色Arduino和那种绿色的是一样的吗?

京小亿 发表于 2022-4-13 21:07:07

hnyzcj 发表于 2022-4-13 06:49
漂亮了

谢谢版主翻牌。

京小亿 发表于 2022-4-13 21:08:25

诩 发表于 2022-4-13 11:02
问一下:你用的红色Arduino和那种绿色的是一样的吗?

红色的IO Shield 扩展板,和其他扩展板功能差不多,主要是电流输出大一些,5V能输出3A。这样接一些大电流的外设简单一些,如舵机,大尺寸彩屏等。

发表于 2022-4-14 08:19:51

京小亿 发表于 2022-4-13 21:08
红色的IO Shield 扩展板,和其他扩展板功能差不多,主要是电流输出大一些,5V能输出3A。这样接一些大电流 ...

哦哦,好的谢谢

发表于 2022-4-14 11:25:15

诩 发表于 2022-4-14 08:19
哦哦,好的谢谢

那如果我用Arduino UNO是不是会带不动?

京小亿 发表于 2022-4-14 18:18:49

诩 发表于 2022-4-14 11:25
那如果我用Arduino UNO是不是会带不动?
我用的这款4.3寸彩屏,背光300的情况下,最大电流350mA。Arduino UNO还可以驱动。

发表于 2022-4-15 07:50:12

京小亿 发表于 2022-4-14 18:18
我用的这款4.3寸彩屏,背光300的情况下,最大电流350mA。Arduino UNO还可以驱动。
...

哦哦,好的,我知道了

赤星三春牛! 发表于 2022-4-15 22:20:54

666666666666

赤星三春牛! 发表于 2022-4-15 22:22:25

厉害厉害

赤星三春牛! 发表于 2022-4-15 22:24:02

呵呵呵呵呵呵

赤星三春牛! 发表于 2022-4-16 17:06:57

赞赞赞赞

赤星三春牛! 发表于 2022-4-16 17:08:21

哈哈哈哈

赤星三春牛! 发表于 2022-4-16 17:10:21

好好好好

赤星三春牛! 发表于 2022-4-16 17:11:50

非常好!!!!

赤星三春牛! 发表于 2022-4-16 17:13:05

感谢分享!

威威子爱捣鼓 发表于 2022-4-17 22:23:17

{:6_209:}{:6_215:}{:6_215:}{:6_215:}
页: [1]
查看完整版本: 【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示