使用 ESP32 和 TFT 屏幕显示实时天气信息 —— 基于 OpenWeatherMap API

实时监测环境数据是一个非常常见的应用场景，例如气象站、智能家居等。这篇博客将带你使用 ESP32 微控制器和一个 TFT 屏幕，实时显示当前城市的天气信息。通过 OpenWeatherMap API，我们能够获取诸如温度、天气情况以及经纬度等详细的天气数据，并将其显示在屏幕上。使用ESP32的好处就是可以不用外接温湿度传感器，温度数据和天气情况可以实时从网上获取。

IoT天气监测站：使用ESP32从OpenWeatherMap API获取实时天气数据，并通过TFT屏幕显示温度、湿度、风速等信息。项目中涉及到HTTP请求、JSON解析、屏幕显示控制以及网络连接的稳定性优化。

项目概述

本项目的核心是利用 ESP32 连接 Wi-Fi，发起 HTTP 请求获取 OpenWeatherMap 的天气数据，解析返回的 JSON 数据，并使用 TFT 屏幕显示城市名称、当前温度、天气描述以及城市的经纬度信息。ESP32 的强大功能和易于使用的网络库使得这个项目非常适合物联网开发入门者。

所需硬件

ESP32 开发板
1.8寸或更大尺寸的 TFT 屏幕（SPI 接口）
跳线若干
电源线

软件库与工具

Arduino IDE
TFT_eSPI 库（用于 TFT 显示屏的控制）
ArduinoJson 库（用于解析 JSON 格式的数据）
WiFi 库和 HTTPClient 库（ESP32 网络连接和 HTTP 请求）

代码

首先，我们需要设置 ESP32 的网络连接和 OpenWeatherMap API 的配置信息。通过 WiFi.h 库连接到无线网络，然后利用 HTTPClient.h 库发起 HTTP 请求，获取 OpenWeatherMap 提供的实时天气数据。

#include <TFT_eSPI.h>   // 硬件专用库
#include <WiFi.h>       // ESP32 WiFi 库
#include <HTTPClient.h> // HTTP 请求库
#include <ArduinoJson.h> // JSON 解析库

// Wi-Fi 网络名称和密码
const char* ssid = "Zkystudent";
const char* password = "5201314520";

// OpenWeatherMap API 配置
const String apiKey = "fc23a9395c2ba4678e82d0f2df4ac8d9";
const String apiUrl = "http://api.openweathermap.org/data/2.5/weather?id=1784658&appid=" + apiKey + "&units=metric";

// 创建TFT对象
TFT_eSPI tft = TFT_eSPI(); 

void setup() {
  // 初始化串口和TFT屏幕
  Serial.begin(115200);
  tft.init();
  tft.setRotation(2);
  tft.fillScreen(TFT_BLACK);

  // 连接Wi-Fi
  tft.setCursor(10, 50);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.setTextSize(2);
  tft.println("Connecting to WiFi...");
  
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  tft.fillScreen(TFT_BLACK);
  tft.println("Connected to WiFi");
}

void loop() {
  if (WiFi.status() == WL_CONNECTED) {
    HTTPClient http;
    
    http.begin(apiUrl);  // 发起HTTP请求
    int httpCode = http.GET(); // 获取HTTP响应码

    if (httpCode > 0) { // 检查请求是否成功
      String payload = http.getString(); // 获取返回的数据
      
      // 使用 ArduinoJson 解析JSON数据
      DynamicJsonDocument doc(2048);
      deserializeJson(doc, payload);
      
      // 获取城市和地理位置数据
      const char* cityName = doc["name"];
      float lon = doc["coord"]["lon"];
      float lat = doc["coord"]["lat"];
      
      // 获取天气数据
      float temperature = doc["main"]["temp"];
      const char* weatherDescription = doc["weather"][0]["description"];
      
      // 显示城市名称、经纬度和天气数据
      tft.fillScreen(TFT_BLACK);
      
      tft.setCursor(10, 20);
      tft.setTextSize(2);
      tft.setTextColor(TFT_CYAN);
      tft.print("City: ");
      tft.println(cityName);

      tft.setCursor(10, 60);
      tft.setTextColor(TFT_YELLOW);
      tft.print("Lon: ");
      tft.print(lon);
      tft.print("  Lat: ");
      tft.println(lat);

      tft.setCursor(10, 100);
      tft.setTextColor(TFT_WHITE);
      tft.print("Temp: ");
      tft.print(temperature);
      tft.println(" C");
      
      tft.setCursor(10, 140);
      tft.setTextColor(TFT_GREEN);
      tft.print("Weather: ");
      tft.println(weatherDescription);

      Serial.println(payload); // 打印JSON数据到串口监视器
      
    } else {
      Serial.println("Error on HTTP request");
    }
    
    http.end(); // 关闭连接
  }

  delay(60000); // 每分钟更新一次天气
}

Wi-Fi 连接：使用 WiFi.begin() 函数连接到指定的 Wi-Fi 网络，并在 TFT 屏幕上显示连接状态。
HTTP 请求：一旦 Wi-Fi 连接成功，ESP32 通过 HTTP 请求获取天气数据。我们使用 OpenWeatherMap 的城市 ID 1784658 获取永城的天气数据。
JSON 解析：使用 ArduinoJson 库解析返回的 JSON 数据，提取我们所需的字段，如城市名称、经纬度、温度和天气描述。
TFT 显示：解析后的数据通过 TFT_eSPI 库显示在屏幕上，包括城市名称、经纬度、当前温度和天气描述。

如何获取城市 ID

要获取正确的城市 ID，可以访问 OpenWeatherMap 的城市查找页面 并搜索您所需的城市，获取对应的城市 ID。这样可以避免因城市名称拼写错误导致的数据获取问题。

总结

本项目展示了如何使用 ESP32 和 TFT 屏幕实现一个简单的天气信息显示装置。通过利用 OpenWeatherMap API 和 Wi-Fi 网络，我们能够实时获取天气数据并在显示屏上输出。