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

2022-04-122.1万
精华项目
AI 快速预览详细 收起
本教程介绍了如何使用Arduino和ATFC043彩屏将LM35温度传感器的数值图形化显示。首先制作图形素材,然后使用ATFUI_TOOL工具制作资源文件,最后编写程序代码。通过进度条控件直观展示温度变化,适合初学者和STEM教育项目。
温度监测在我们生活和生产中具有非常重要的作用,而使用Arduino控制器采集温度数值也是很多创客小伙伴在学习过程中必不可少的环节。
【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图4
【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图1
今天我们使用LM35这款模拟电压输出型温度传感器来制作一个不同于以往的“温度计”:我们将温度数值图形化,在彩屏上直接用进度条的长度来表示温度的变化(如下图),非常的直观。
【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图3

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

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

第一步:制作图形素材
我们选择一个温度计图片,将液柱变化的部位裁剪下来:把不变的做成进度条的背景图,随温度变化的做成进度条实体图。如上图。
【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图6
第二部:制作资源文件
我们使用ATFUI_TOOL工具,使用进度条控件来制作温度计资源文件。
【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图7
我们选择进度条的方向(纵向),选择进度条重绘属性(位图绘制),然后把我们制作好的进度条背景和实体图片导入,最后设计进度条数值范围为:0-100.
【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图8
【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图9
这样进度条控件就做好了。

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

【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图12
【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图11
这样我们的资源文件就做好了。

【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图10
【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图13
我们使用USB线,将制作好的资源文件下载到彩屏中。

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

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

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

【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图16
【教程】使用Arduino和ATFC043彩屏将LM35温度数值图形化显示图2
上电,启动程序,屏幕就可以实时显示当前的温度了。


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




创作许可协议

本项目采用 None(不开放任何权利,保留所有权利) 进行许可。

评论(11)
威威子爱捣鼓
威威子爱捣鼓
评论内容
三春牛-创客
三春牛-创客
感谢分享!
三春牛-创客
三春牛-创客
非常好!!!!
三春牛-创客
三春牛-创客
好好好好
三春牛-创客
三春牛-创客
哈哈哈哈
三春牛-创客
三春牛-创客
赞赞赞赞
三春牛-创客
三春牛-创客
呵呵呵呵呵呵
三春牛-创客
三春牛-创客
厉害厉害
三春牛-创客
三春牛-创客
666666666666
诩
问一下:你用的红色Arduino和那种绿色的是一样的吗?
诩
回复京小亿
哦哦,好的,我知道了
京小亿
京小亿
作者
回复

我用的这款4.3寸彩屏,背光300的情况下,最大电流350mA。Arduino UNO还可以驱动。
共5条回复,已加载2条,点击查看更多共5条回复,已加载全部
hnyzcj
hnyzcj
漂亮了
京小亿
京小亿
作者
回复hnyzcj
谢谢版主翻牌。
- 没有更多了 -