1. 项目概述与核心思路最近在工作室捣鼓一个环境监测的小玩意儿核心需求很简单实时读取室内的温度和湿度并且能在一个屏幕上直观地显示出来。这听起来像是物联网入门项目但麻雀虽小五脏俱全它串联了传感器数据采集、微控制器处理和图形化显示这几个嵌入式开发的核心环节。对于刚接触Arduino或者想了解如何将传感器数据“画”到屏幕上的朋友来说这是个绝佳的练手项目。我选择的硬件组合是经典的“DHT11 GC9A01 Arduino UNO”。DHT11作为一款低成本、单总线数字温湿度传感器虽然精度不算顶尖温度±2°C湿度±5%RH但对于室内环境监测完全够用而且其简单的单线通信协议非常适合初学者理解。GC9A01则是一块性价比极高的圆形SPI TFT显示屏分辨率240x240色彩鲜艳驱动库成熟用它来显示信息视觉效果很棒。整个系统的思路就是Arduino UNO作为大脑通过数字引脚读取DHT11的数据然后通过SPI总线将处理好的温度和湿度数值连同一些UI元素一起发送到GC9A01屏幕上进行渲染。为了让开发过程更直观、门槛更低这个项目没有采用传统的Arduino IDE写代码的方式而是使用了Visuino这款可视化编程工具。你可以把它理解为电子界的“Scratch”通过拖拽组件、连接引脚的方式来构建程序逻辑这对于快速原型验证、教学演示或者不熟悉C/C语法的开发者来说非常友好。下面我就带你从硬件连接到软件配置完整地走一遍这个气象站的制作流程并分享一些我实操中积累的细节和避坑经验。2. 硬件选型、电路连接与原理剖析2.1 核心硬件组件深度解析在动手连接线之前我们先花点时间搞清楚手里这几个“主角”的特性这能帮你更好地理解后续的配置甚至在出问题时快速定位。1. Arduino UNO R3这是项目的控制核心。我们主要用到它的数字I/O引脚用于连接DHT11的数据线以及控制显示屏的DC、CS、RST引脚。SPI硬件接口这是驱动GC9A01显示屏的高速通道。UNO的SPI引脚是固定的MOSI (11), MISO (12), SCK (13), SS (10)。其中SSSlave Select引脚我们可以灵活指定为其他数字引脚本例中用的是D10但MOSI和SCK必须使用D11和D13。电源输出提供5V和3.3V。这里有个关键点GC9A01显示屏的逻辑电平和工作电压通常是3.3V而DHT11的工作电压是5V。所以必须分别供电不可混淆。2. DHT11温湿度传感器这是一个复合传感器通过单总线协议与MCU通信。它有三或四个引脚常见三引脚版本已内置上拉电阻VCC (5V)接5V电源。GND接地。DATA数据引脚接Arduino的数字引脚如D2。该引脚需要一个上拉电阻通常4.7KΩ-10KΩ拉到VCC以确保信号稳定。很多模块板已经集成了这个电阻。通信原理MCU先发送一个开始信号拉低总线至少18ms后拉高然后等待DHT11的响应。之后DHT11会连续输出40位数据16位湿度整数16位湿度小数16位温度整数16位温度小数8位校验和。每次读取间隔建议大于2秒。3. GC9A01 SPI TFT显示屏这是一款采用SPI接口的彩色显示屏。引脚定义较多理解每个引脚的作用对正确连接至关重要VCC电源正极接3.3V接5V大概率烧毁。GND电源地。SCL (SCK)SPI时钟信号线接Arduino的SCK (D13)。SDA (MOSI)SPI数据线主机输出从机输入接Arduino的MOSI (D11)。DC (Data/Command)数据/命令选择引脚。用于告诉屏幕接下来发送的是命令如设置地址窗口还是显示数据如像素颜色。接任意数字IO如D9。CS (Chip Select)片选引脚低电平有效。当有多个SPI设备时通过此引脚选择要通信的设备。接任意数字IO如D10。RST (Reset)复位引脚低电平复位。可接任意数字IO如D8也可直接接3.3V不推荐因为无法通过软件复位。BL (Backlight)背光控制通常接3.3V或通过一个三极管/PWM引脚控制亮度。2.2 电路连接实战与注意事项根据上面的分析我们可以安全地进行连接了。请务必在断电状态下操作。Arduino UNO 引脚连接至说明与注意事项3.3VGC9A01VCC绝对禁止接5V这是最容易烧屏的操作。5VDHT11VCC为传感器供电。GNDGC9A01GND, DHT11GND共地确保所有器件参考电位一致。Digital 13 (SCK)GC9A01SCL (SCK)SPI时钟线必须连接。Digital 11 (MOSI)GC9A01SDA (MOSI)SPI数据线必须连接。Digital 10GC9A01CS片选可自定义。Digital 9GC9A01DC数据/命令选择可自定义。Digital 8GC9A01RST复位可自定义。建议连接以便软件复位。Digital 2DHT11DATA (S)数据引脚可自定义。模块板通常已带上拉电阻。实操心得1电源与布线独立供电检查在通电前请再三确认GC9A01的VCC接的是3.3VDHT11接的是5V。一个简单的记忆方法是屏幕“娇贵”用3.3V传感器“皮实”用5V。背光处理GC9A01的BL引脚我建议先直接连接到3.3V让背光常亮。如果想实现亮度调节可以后续将其连接到一个支持PWM的引脚如D3, D5, D6, D9, D10并在Visuino中配置。上拉电阻如果你的DHT11是模块板通常无需额外操作。如果是单独的传感器元件务必在DATA引脚和5V之间焊接一个4.7KΩ-10KΩ的电阻。线序与接触使用面包板时确保跳线插紧避免虚接。SPI通信对信号质量敏感凌乱的飞线可能导致显示花屏或通信失败。3. Visuino可视化编程环境搭建与项目配置3.1 Visuino简介与初始设置Visuino是一款图形化Arduino编程软件它将代码封装成可视化的“组件”通过连线来表示数据流和控制流。对于这个项目它能极大地简化驱动库引入、引脚初始化和数据显示逻辑的编写。下载与安装从Visuino官网下载对应操作系统的安装包。安装过程简单完成后启动软件。创建新项目与选择板卡启动后你会看到一个空白的设计区域和一个“组件工具箱”。首先从工具箱中拖拽一个Arduino组件到设计区。然后点击这个Arduino组件在右下角的属性面板中找到Board属性点击旁边的“...”按钮在弹出的板卡选择器中找到并选择Arduino UNO。这一步至关重要它决定了后续编译时代码针对的正确处理器和引脚定义。3.2 添加与配置核心功能组件我们的项目需要三个核心功能读取传感器、转换数据格式、驱动显示。在Visuino中它们对应三个组件。添加DHT11传感器组件在工具箱的搜索框输入“DHT11”或“DHT”找到HumidityThermometer组件它兼容DHT11/DHT22等将其拖到设计区。这个组件代表了传感器实体我们需要告诉它数据线连接在Arduino的哪个引脚。点击该组件在属性面板找到Sensor Pin属性将其设置为Digital 2。这步操作相当于在代码里定义了#define DHTPIN 2。添加数据格式转换组件DHT11组件输出的温度和湿度是“模拟值”在Visuino里是一种内部数据格式而屏幕显示需要文本字符串。我们需要“翻译官”。从工具箱中找到Analog To Text组件拖拽两个到设计区。分别重命名为“TempToText”和“HumiToText”以便区分。分别点击这两个组件在属性面板中设置Precision精度。对于DHT11其湿度分辨率是1%RH温度是1°C没有小数位。所以我们将两个组件的Precision都设置为0。如果你用的是DHT22精度0.1°C这里可以设置为1。添加GC9A01显示屏组件在工具箱搜索“GC9A01”或“TFT”找到GC9A01组件拖拽到设计区。Visuino已经集成了该显示屏的驱动无需手动安装库。这个组件需要配置多个控制引脚。点击它在属性面板中设置Chip Select Pin:Digital 10(对应我们硬件连接的CS引脚)Data Command Pin:Digital 9(对应DC引脚)Reset Pin:Digital 8(对应RST引脚)最关键的一步将显示屏连接到Arduino的SPI总线。找到GC9A01组件上的SPI接口一个蓝色的连接点点击并拖出一条线连接到Arduino组件上的SPI接口也是一个蓝色连接点。这条线就代表了硬件SPID11, D12, D13的启用。3.3 设计显示屏用户界面UI双击设计区中的GC9A01组件会打开一个全新的“显示屏画布”窗口。这里就是设计UI的地方。创建背景与区域划分我们希望有一个分区的界面。从右侧的“Elements”工具箱中拖拽一个Draw Rectangle到画布左侧。选中这个矩形在属性面板设置Fill Color: 选择一个作为背景色例如aclDarkTurquoise深青绿色。Color: 边框颜色例如aclSteelBlue钢蓝色。Width: 300 (因为屏幕是240这里设置大于240会填满)Height: 120 (作为上半部分温度显示区)X,Y: 保持为0作为左上角起点。再拖拽一个Draw Rectangle设置不同的Fill Color如aclDeepSkyBlueHeight为300Y为120。这样它就紧挨着第一个矩形的下方作为下半部分湿度显示区。添加文本显示框从“Elements”中拖拽一个Text Field到画布。这个元素用于动态显示文本。将其放置在上半部分矩形区域内例如X: 80, Y: 20。在属性面板中可以设置Size文本大小如2Fill Color文本框填充色可设为透明或与背景一致。关键操作绑定字体。在属性面板中找到Elements属性点击旁边的“...”按钮。在新的窗口中从左侧拖拽一个Font元素到中间。然后选中这个Font元素在属性面板的Font属性里点击“...”会弹出系统字体选择器。Visuino支持使用系统TrueType字体。为了兼容性和美观我推荐选择一个等宽字体或者使用Visuino自带的点阵字体如Adafruit\FreeMonoBold18pt7b如果你安装了Adafruit GFX库的话。选择后关闭窗口。重复以上步骤再添加一个Text Field放置在下半部分区域例如X: 80, Y: 125并绑定同样的字体。关闭UI设计器完成两个文本框的设置后关闭GC9A01的UI设计窗口回到主设计界面。你会看到GC9A01组件上多了两个输入引脚分别对应我们刚创建的两个文本框如TextField1,TextField2。4. 逻辑连接、代码生成与上传4.1 连接数据流现在我们需要将传感器数据流“导向”显示屏的文本框。这个过程在Visuino里就是连线。传感器 - 格式转换找到DHT11组件它有两个输出引脚Temperature温度和Humidity湿度。将Temperature引脚连接到第一个Analog To Text组件TempToText的In引脚。将Humidity引脚连接到第二个Analog To Text组件HumiToText的In引脚。格式转换 - 显示屏将第一个Analog To Text组件TempToText的Out引脚连接到GC9A01组件上对应的TextField1的In引脚。将第二个Analog To Text组件HumiToText的Out引脚连接到GC9A01组件上对应的TextField2的In引脚。至此完整的数据流链路已经建立DHT11采集数据 - 转换为文本字符串 - 发送到显示屏指定位置显示。你的Visuino设计界面应该看起来像一个有清晰流向的流程图。4.2 生成、编译与上传Arduino代码这是将图形化设计转化为实际运行在Arduino上代码的关键一步。切换至代码生成界面点击Visuino底部的Build标签页。选择端口在“Port”下拉菜单中选择你的Arduino UNO所连接的COM端口在Windows设备管理器中可查看在macOS/Linux上是类似/dev/cu.usbmodemXXX的端口。生成与上传点击Compile/Build and Upload按钮一个向右的箭头图标。Visuino会首先将你的图形化设计编译成标准的Arduino C/C代码。然后调用后台的Arduino IDE或编译器对代码进行编译。最后通过avrdude工具将编译好的二进制文件上传到Arduino UNO板子上。观察输出日志底部日志窗口会显示整个过程。如果出现错误通常会在这里给出提示例如端口被占用、板卡选择错误、库缺失等。成功上传后会显示“Done uploading”。实操心得2Visuino编译与调试驱动安装首次连接Arduino UNO到电脑可能需要安装CH340或FTDI的USB转串口驱动确保在设备管理器中能看到正确的端口。编译错误如果编译失败首先检查板卡类型是否选对Arduino UNO。其次检查是否所有必要的引脚都已正确连接特别是SPI总线。Visuino生成的代码依赖于其自带的库通常无需手动管理。上传失败检查端口选择是否正确尝试拔插USB线或者按一下UNO板上的复位按钮再重新上传。确保没有其他软件如串口监视器占用了该端口。5. 系统测试、优化与扩展思路5.1 功能测试与显示效果验证给Arduino上电后GC9A01屏幕应该会点亮并显示出两个不同颜色的矩形区域。稍等片刻DHT11需要约2秒的稳定时间温度和湿度的数值就会分别显示在对应的区域。如果屏幕不亮检查背光BL引脚是否已接3.3V以及屏幕的VCC是否接3.3V。如果屏幕白屏或花屏首先检查RST引脚的连接和初始化。在Visuino生成的代码中会在setup()函数里对RST引脚进行一个复位操作先高后低再高。如果硬件连接不可靠或时序问题可能导致初始化失败。可以尝试在属性面板中调整GC9A01组件的Initialization Delay初始化延迟参数例如从默认的120ms增加到200ms。如果显示“NaN”或数值异常通常是DHT11读取失败。检查接线确认DATA线接D2是否松动VCC和GND是否接反。检查上拉电阻如果使用裸传感器必须加4.7KΩ上拉电阻到5V。检查读取间隔DHT11两次读取之间需要至少2秒间隔。Visuino的DHT11组件内部已经做了限制但如果你尝试在代码中频繁读取就会失败。确保没有在其他地方过快调用。环境干扰单总线协议容易受干扰尽量让连接线短一些远离电机、继电器等噪声源。5.2 界面美化与功能增强基础功能实现后我们可以利用Visuino进一步优化这个气象站。添加单位与标签在GC9A01的UI设计器中可以再拖拽两个Text Field将它们设置为静态文本。例如在温度数值旁边添加一个“°C”的文本框在湿度数值旁边添加一个“%RH”的文本框。将这些静态文本框的Read Only属性设为True这样它们就不会接收动态数据。添加图标Visuino支持在显示屏上绘制位图。你可以找到或制作小型的温度计和水滴图标BMP格式注意颜色深度和尺寸然后使用Draw Bitmap元素将其添加到UI中让界面更生动。数据记录与历史趋势这需要引入SD卡模块或通过网络传输。在Visuino中可以添加“SD Card”组件并将DHT11的数据同时连接到“Write Text File”组件实现定时将数据写入CSV文件。更高级的可以添加ESP8266组件将数据发送到物联网平台如Thingspeak、Blynk进行云端存储和图表展示。增加其他传感器Visuino组件库非常丰富。你可以轻松地添加大气压强传感器BMP280、空气质量传感器MQ-135、光照传感器BH1750等只需拖拽对应组件连接数据线然后在显示屏上新增对应的显示区域即可。5.3 从Visuino到原生代码的过渡理解虽然Visuino极大地简化了开发但了解其背后生成的代码对于深入学习嵌入式开发大有裨益。点击Build标签页下的Show Generated Code按钮你可以看到Visuino为你生成的所有Arduino代码。你会看到它自动包含了必要的库如Adafruit_GC9A01A.h,DHT.h在setup()函数中初始化了串口、设置了引脚模式、初始化了显示屏和传感器在loop()函数中循环读取DHT11数据并刷新显示。研究这段代码可以帮助你理解各个Visuino组件对应的实际函数调用为你将来直接编写Arduino代码打下坚实的基础。这个基于GC9A01和DHT11的气象站项目就像一把钥匙为你打开了传感器应用和嵌入式图形显示的大门。通过Visuino的图形化方式你避开了繁琐的语法和库配置直接聚焦于系统逻辑和交互设计。当你成功看到屏幕上跳动的温湿度数字时那种连接物理世界与数字世界的成就感正是嵌入式开发的魅力所在。接下来不妨试试添加一个按钮来切换显示模式或者让屏幕在超温时闪烁报警这些小小的扩展都能让你对这套系统的理解更深一层。