【NodeMCU实时天气时钟温湿度项目 1】连接点亮SPI-TFT屏幕和UI布局设计

本文主要是介绍【NodeMCU实时天气时钟温湿度项目 1】连接点亮SPI-TFT屏幕和UI布局设计,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

        从今天开始,我们详解介绍制作实时天气时钟项目的方法步骤,主要分以下几个专题分别进行:(1)连接点亮SPI-TFT屏幕和UI布局设计;(2)NodeMCU的WIFI模式设置及连接;(3)连接I2C-SHT30传感器,获取显示当前温湿度数据;(4)连接NTP服务器,获取并显示网络时钟数据;(5)连接 [和风天气](商业气象服务商)服务器,获取并显示实时天气数据;(6)按照UI设计实时更新显示各项数据,等等。
        第二专题内容,请参考
        【NodeMCU实时天气时钟温湿度项目 2】WIFI模式设置及连接-CSDN博客
        第三专题内容,请参考       
【NodeMCU实时天气时钟温湿度项目 3】连接SHT30传感器,获取并显示当前环境温湿度数据(I2C)-CSDN博客
        今天是第一专题的内容。

一、项目需求清单

        1. MCU开发平台:NodeMCU 1.0 (ESP-12E Module)

                        
        2. 软件开发环境:VSCode + PlatformIO
                                     Platforms:Espressif 8266
                                     Framework: Arduino
        3. TFT显示屏:1.3寸液晶屏模组,240x240 IPS高清SPI串口屏,驱动芯片ST7789

                        
        4. 传感器:SHT3X温湿度传感器

                        
        4. 面包板、杜邦线若干
        5. 第三方库:TFT_eSPI,NTPClient,ArduinoJson,etc ...   

二、硬件电路连接关系

                

                

三、添加TFT_eSPI 图形库

        方法一:直接打开 PlatformIO 界面,在箭头指向的搜索栏内,输入TFT_eSPI,添加库。

                

方法二:当创建工程完成后,在该工程中添加库。

1. 打开当前工程文件夹
2. 依次进入.pio\libdeps\nodemcuv2\目录,直接将下载解压后的文件,拷贝到此目录。

四、配置TFT_eSPI 图形库

        1、依次进入项目文件夹下的 .pio\libdeps\nodemcuv2\TFT_eSPI 文件夹。

                

        2、使用NotePad++打开 User_Setup.h文件,复制以下代码,替换该文件内容。

#define USER_SETUP_INFO "User_Setup"#define ST7789_DRIVER      // Full configuration option, define additional parameters below for this display
#define TFT_WIDTH  240 // ST7789 240 x 240 and 240 x 320
#define TFT_HEIGHT 240 // ST7789 240 x 240// For NodeMCU - use pin numbers in the form PIN_Dx where Dx is the NodeMCU pin designation
#define TFT_MOSI  PIN_D7  // Automatically assigned with ESP8266 if not defined
#define TFT_SCLK  PIN_D5  // Automatically assigned with ESP8266 if not defined//*** 2.4寸TFT,8P,320*240, display cs pin is attached to MCU pin GND. //*** 1.3寸TFT,7P, 240*240, this line is not attached any MCU pin.
//#define TFT_CS    PIN_D8  // Chip select control pin D8   
#define TFT_DC    PIN_D3  // Data Command control pin
#define TFT_RST   PIN_D4  // Reset pin (could connect to NodeMCU RST, see next line)#define LOAD_GLCD   // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2  // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4  // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6  // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7  // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8  // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.#define LOAD_GFXFF  // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts#define SMOOTH_FONT
#define SPI_FREQUENCY  27000000
#define SPI_READ_FREQUENCY  20000000
#define SPI_TOUCH_FREQUENCY  2500000

五、项目UI布局设计展示

        下图是项目最终完成后的TFT显示布局,显示内容为静态文本,仅作为布局设计的展示。
        今后几个专题,我们将从网络获取实时日期时间、实时天气和明天天气,从温湿度传感器获取实时的空间数据。

                

        以下代码是项目主文件 main.cpp 具体内容,供参考。

//main.cpp   ---项目主文件#include <Arduino.h>
#include <TFT_eSPI.h>//构造函数,实例化 TFT 屏幕对象
TFT_eSPI tft = TFT_eSPI();//程序用到的字库文件,后面再详细说明
#include "hefeng-min-40px.h"
#include "weather_font20.h"
#include "weather_font16.h"void setup()
{//设置串口波特率Serial.begin(115200);//等待串口稳定Serial.println("");Serial.println("");Serial.println("");//TFT初始化设置tft.init();tft.setSwapBytes(true);tft.setRotation(0);  tft.fillScreen(TFT_BLACK);tft.setTextColor(TFT_WHITE, TFT_BLACK, true);// 显示当前日期,星期几,农历tft.loadFont(weather_font16);tft.setTextColor(TFT_WHITE, TFT_BLACK, true);tft.drawString("2024-05-03  星期五  三月二五", 0, 0);tft.unloadFont();tft.setTextSize(5);tft.setTextColor(TFT_GREEN, TFT_BLACK, true);tft.drawString("17:16:26", 0, 30);// 今日天气// 擦除指定区域tft.fillRect(55, 90, 240, 40, TFT_BLACK);tft.setTextColor(TFT_YELLOW, TFT_BLACK, true);tft.loadFont(hefeng40);tft.drawString("\uf101", 10, 90);tft.unloadFont();tft.loadFont(weather_font20);tft.setTextColor(TFT_WHITE, TFT_BLACK, true);tft.drawString("25°C  晴", 55, 90);tft.drawString("东南风3级 3KM/H", 55, 110);tft.drawLine(0, 140, 240, 140, TFT_WHITE);// 明日天气// 擦除指定区域tft.fillRect(55, 150, 240, 40, TFT_BLACK);tft.loadFont(hefeng40);tft.setTextColor(TFT_YELLOW, TFT_BLACK, true);tft.drawString("\uf103", 10, 150);tft.unloadFont();tft.loadFont(weather_font20);tft.setTextColor(TFT_WHITE, TFT_BLACK, true);tft.drawString("明天 15° - 28°", 55, 150);tft.drawString("多云", 55, 170);tft.drawLine(0, 200, 240, 200, TFT_WHITE);// 温湿度传感器的数据tft.loadFont(weather_font20);tft.setTextColor(TFT_WHITE, TFT_BLACK, true);tft.drawString("室温:", 20, 210);tft.setTextColor(TFT_GREEN, TFT_BLACK, true);tft.setTextColor(TFT_WHITE, TFT_BLACK, true);tft.drawString("湿度:", 120, 210);tft.setTextColor(TFT_GREEN, TFT_BLACK, true);
}void loop()
{
}

六、项目源代码下载

        百度网盘下载链接:https://pan.baidu.com/s/1zejX6A5kA70HZqXS0XWqYA?pwd=ueef
                          提取码:ueef

        将项目导入 【VSCode + PlatformIO】环境下,编译上传到开发板后,TFT屏幕即按照UI布局设计的样式,显示出有关的信息。

        参考文档:欢迎留言交流

        1. platformio添加外部库文件方法_platformio添加自己的库-CSDN博客
        2. 【NodeMcu-ESP8266】点亮 1.3寸/2.4寸TFT液晶屏(SPI,ST7789)-CSDN博客

这篇关于【NodeMCU实时天气时钟温湿度项目 1】连接点亮SPI-TFT屏幕和UI布局设计的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/967024

相关文章

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

Spring Boot 整合 MyBatis 连接数据库及常见问题

《SpringBoot整合MyBatis连接数据库及常见问题》MyBatis是一个优秀的持久层框架,支持定制化SQL、存储过程以及高级映射,下面详细介绍如何在SpringBoot项目中整合My... 目录一、基本配置1. 添加依赖2. 配置数据库连接二、项目结构三、核心组件实现(示例)1. 实体类2. Ma

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

电脑win32spl.dll文件丢失咋办? win32spl.dll丢失无法连接打印机修复技巧

《电脑win32spl.dll文件丢失咋办?win32spl.dll丢失无法连接打印机修复技巧》电脑突然提示win32spl.dll文件丢失,打印机死活连不上,今天就来给大家详细讲解一下这个问题的解... 不知道大家在使用电脑的时候是否遇到过关于win32spl.dll文件丢失的问题,win32spl.dl

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC(MappedDiagnosticContext)为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步

Windows Server服务器上配置FileZilla后,FTP连接不上?

《WindowsServer服务器上配置FileZilla后,FTP连接不上?》WindowsServer服务器上配置FileZilla后,FTP连接错误和操作超时的问题,应该如何解决?首先,通过... 目录在Windohttp://www.chinasem.cnws防火墙开启的情况下,遇到的错误如下:无法与