Funpack 第十二期 Wio Terminal 自动联网的天气预报仪

内容介绍

Wio Terminal 简介

Wio Terminal的运行速度为 120MHz (最高可达200MHz), 4MB 外部闪存和 192KB RAM。

Wio Terminal自身配有一个2.4英寸 LCD屏幕, 板载IMU(LIS3DHTR)，麦克风，蜂鸣器，microSD卡槽，光传感器和940nm红外发射器。除了这些它还有两个用于Grove生态系统的多功能Grove接口和兼容Raspberry pi的40个GPIO引脚，用于支持更多附加组件。

实现方式

图像转换

和风天气官网提供了天气的图标。将图标由 SVG 转换成 XBM 即可显示在屏幕上。

GitHub - qwd/Icons: 和风天气开源图标字体库 Open source weather icons && fonts for QWeather

Wi-Fi 及服务器连接

Wi-Fi 调用系统内置的库函数，指定 SSID 和密码就可以直接连接。

服务器如果采用 HTTPS 加密协议，需要指定证书。可以通过 CSDN 的教程导出证书。

浏览器如何导出证书？_渡安H的博客-CSDN博客_浏览器导出证书

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfQ19IYW8=,size_16,color_FFFFFF,t_70

总体代码实现

通过 HTTPS 请求天气 API，获得的数据经过 JSON 解析，得到每一项的值。进而显示在屏幕上。

#include "rpcWiFi.h"
#include <WiFiClientSecure.h>
#include <ArduinoJson.h>
#include"Free_Fonts.h"
#include"TFT_eSPI.h"
TFT_eSPI tft;

const char* ssid     = "your_ssid";
const char* password = "your_password";

// 字库代码开始

const unsigned char icon100[] = {
  0x00, 0x00, 0x80, 0x01, 0x00, 0x00, 0x00, 0x00, 0xc0, 0x03, 0x00, 0x00,
  0x00, 0x00, 0xc0, 0x03, 0x00, 0x00, 0x00, 0x00, 0xc0, 0x03, 0x00, 0x00,
  0x00, 0x00, 0xc0, 0x03, 0x00, 0x00, 0x00, 0x00, 0xc0, 0x03, 0x00, 0x00,
  0x00, 0x00, 0xc0, 0x03, 0x00, 0x00, 0x80, 0x03, 0x80, 0x01, 0xc0, 0x01,
  0x80, 0x07, 0x00, 0x00, 0xe0, 0x01, 0x80, 0x0f, 0x00, 0x00, 0xf0, 0x01,
  0x00, 0x1f, 0x00, 0x00, 0xf8, 0x00, 0x00, 0x1e, 0xf8, 0x1f, 0x78, 0x00,
  0x00, 0x08, 0xfe, 0x7f, 0x30, 0x00, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00,
  0x00, 0xc0, 0xff, 0xff, 0x03, 0x00, 0x00, 0xc0, 0xff, 0xff, 0x03, 0x00,
  0x00, 0xe0, 0xff, 0xff, 0x07, 0x00, 0x00, 0xf0, 0xff, 0xff, 0x0f, 0x00,
  0x00, 0xf0, 0xff, 0xff, 0x0f, 0x00, 0x00, 0xf8, 0xff, 0xff, 0x1f, 0x00,
  0x00, 0xf8, 0xff, 0xff, 0x1f, 0x00, 0x00, 0xf8, 0xff, 0xff, 0x1f, 0x00,
  0x3e, 0xf8, 0xff, 0xff, 0x1f, 0x00, 0x7f, 0xf8, 0xff, 0xff, 0x1f, 0xfe,
  0x7f, 0xf8, 0xff, 0xff, 0x1f, 0xfe, 0x00, 0xf8, 0xff, 0xff, 0x1f, 0x7c,
  0x00, 0xf8, 0xff, 0xff, 0x1f, 0x00, 0x00, 0xf8, 0xff, 0xff, 0x1f, 0x00,
  0x00, 0xf8, 0xff, 0xff, 0x1f, 0x00, 0x00, 0xf0, 0xff, 0xff, 0x0f, 0x00,
  0x00, 0xf0, 0xff, 0xff, 0x0f, 0x00, 0x00, 0xe0, 0xff, 0xff, 0x07, 0x00,
  0x00, 0xc0, 0xff, 0xff, 0x03, 0x00, 0x00, 0xc0, 0xff, 0xff, 0x03, 0x00,
  0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0x00, 0x0c, 0xfe, 0x7f, 0x30, 0x00,
  0x00, 0x1e, 0xf8, 0x1f, 0x78, 0x00, 0x00, 0x0f, 0x00, 0x00, 0xf8, 0x00,
  0x80, 0x0f, 0x00, 0x00, 0xf0, 0x01, 0x80, 0x07, 0x00, 0x00, 0xe0, 0x01,
  0x80, 0x03, 0x00, 0x00, 0xc0, 0x01, 0x00, 0x00, 0x80, 0x01, 0x00, 0x00,
  0x00, 0x00, 0xc0, 0x01, 0x00, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x00, 0x00,
  0x00, 0x00, 0xc0, 0x01, 0x00, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x00, 0x00,
  0x00, 0x00, 0xc0, 0x01, 0x00, 0x00, 0x00, 0x00, 0x80, 0x01, 0x00, 0x00
};

// 字库代码结束

// 天气文字

String weather[] = {
  "Sunny",
  "Clear",
  "Fair",
  "Fair",
  "Cloudy",
  "PartlyCloudy",
  "PartlyCloudy",
  "MostlyCloudy",
  "MostlyCloudy",
  "Overcast",
  "Shower",
  "Thundershower",
  "ThundershowerwithHail",
  "LightRain",
  "ModerateRain",
  "HeavyRain",
  "Storm",
  "HeavyStorm",
  "SevereStorm",
  "IceRain",
  "Sleet",
  "SnowFlurry",
  "LightSnow",
  "ModerateSnow",
  "HeavySnow",
  "Snowstorm",
  "Dust",
  "Sand",
  "Duststorm",
  "Sandstorm",
  "Foggy",
  "Haze",
  "Windy",
  "Blustery",
  "Hurricane",
  "TropicalStorm",
  "Tornado",
  "Cold",
  "Hot"
};

// 天气文字结束

const char*  server = "devapi.qweather.com";  // API 地址

const char* root_ca = \
                           "-----BEGIN CERTIFICATE-----\n"
                           "MIIGEzCCA/ugAwIBAgIQfVtRJrR2uhHbdBYLvFMNpzANBgkqhkiG9w0BAQwFADCB\n"
                           "iDELMAkGA1UEBhMCVVMxEzARBgNVBAgTCk5ldyBKZXJzZXkxFDASBgNVBAcTC0pl\n"
                           "cnNleSBDaXR5MR4wHAYDVQQKExVUaGUgVVNFUlRSVVNUIE5ldHdvcmsxLjAsBgNV\n"
                           "BAMTJVVTRVJUcnVzdCBSU0EgQ2VydGlmaWNhdGlvbiBBdXRob3JpdHkwHhcNMTgx\n"
                           "MTAyMDAwMDAwWhcNMzAxMjMxMjM1OTU5WjCBjzELMAkGA1UEBhMCR0IxGzAZBgNV\n"
                           "BAgTEkdyZWF0ZXIgTWFuY2hlc3RlcjEQMA4GA1UEBxMHU2FsZm9yZDEYMBYGA1UE\n"
                           "ChMPU2VjdGlnbyBMaW1pdGVkMTcwNQYDVQQDEy5TZWN0aWdvIFJTQSBEb21haW4g\n"
                           "VmFsaWRhdGlvbiBTZWN1cmUgU2VydmVyIENBMIIBIjANBgkqhkiG9w0BAQEFAAOC\n"
                           "AQ8AMIIBCgKCAQEA1nMz1tc8INAA0hdFuNY+B6I/x0HuMjDJsGz99J/LEpgPLT+N\n"
                           "TQEMgg8Xf2Iu6bhIefsWg06t1zIlk7cHv7lQP6lMw0Aq6Tn/2YHKHxYyQdqAJrkj\n"
                           "eocgHuP/IJo8lURvh3UGkEC0MpMWCRAIIz7S3YcPb11RFGoKacVPAXJpz9OTTG0E\n"
                           "oKMbgn6xmrntxZ7FN3ifmgg0+1YuWMQJDgZkW7w33PGfKGioVrCSo1yfu4iYCBsk\n"
                           "Haswha6vsC6eep3BwEIc4gLw6uBK0u+QDrTBQBbwb4VCSmT3pDCg/r8uoydajotY\n"
                           "uK3DGReEY+1vVv2Dy2A0xHS+5p3b4eTlygxfFQIDAQABo4IBbjCCAWowHwYDVR0j\n"
                           "BBgwFoAUU3m/WqorSs9UgOHYm8Cd8rIDZsswHQYDVR0OBBYEFI2MXsRUrYrhd+mb\n"
                           "+ZsF4bgBjWHhMA4GA1UdDwEB/wQEAwIBhjASBgNVHRMBAf8ECDAGAQH/AgEAMB0G\n"
                           "A1UdJQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjAbBgNVHSAEFDASMAYGBFUdIAAw\n"
                           "CAYGZ4EMAQIBMFAGA1UdHwRJMEcwRaBDoEGGP2h0dHA6Ly9jcmwudXNlcnRydXN0\n"
                           "LmNvbS9VU0VSVHJ1c3RSU0FDZXJ0aWZpY2F0aW9uQXV0aG9yaXR5LmNybDB2Bggr\n"
                           "BgEFBQcBAQRqMGgwPwYIKwYBBQUHMAKGM2h0dHA6Ly9jcnQudXNlcnRydXN0LmNv\n"
                           "bS9VU0VSVHJ1c3RSU0FBZGRUcnVzdENBLmNydDAlBggrBgEFBQcwAYYZaHR0cDov\n"
                           "L29jc3AudXNlcnRydXN0LmNvbTANBgkqhkiG9w0BAQwFAAOCAgEAMr9hvQ5Iw0/H\n"
                           "ukdN+Jx4GQHcEx2Ab/zDcLRSmjEzmldS+zGea6TvVKqJjUAXaPgREHzSyrHxVYbH\n"
                           "7rM2kYb2OVG/Rr8PoLq0935JxCo2F57kaDl6r5ROVm+yezu/Coa9zcV3HAO4OLGi\n"
                           "H19+24rcRki2aArPsrW04jTkZ6k4Zgle0rj8nSg6F0AnwnJOKf0hPHzPE/uWLMUx\n"
                           "RP0T7dWbqWlod3zu4f+k+TY4CFM5ooQ0nBnzvg6s1SQ36yOoeNDT5++SR2RiOSLv\n"
                           "xvcRviKFxmZEJCaOEDKNyJOuB56DPi/Z+fVGjmO+wea03KbNIaiGCpXZLoUmGv38\n"
                           "sbZXQm2V0TP2ORQGgkE49Y9Y3IBbpNV9lXj9p5v//cWoaasm56ekBYdbqbe4oyAL\n"
                           "l6lFhd2zi+WJN44pDfwGF/Y4QA5C5BIG+3vzxhFoYt/jmPQT2BVPi7Fp2RBgvGQq\n"
                           "6jG35LWjOhSbJuMLe/0CjraZwTiXWTb2qHSihrZe68Zk6s+go/lunrotEbaGmAhY\n"
                           "LcmsJWTyXnW0OMGuf1pGg+pRyrbxmRE1a6Vqe8YAsOf4vmSyrcjC8azjUeqkk+B5\n"
                           "yOGBQMkKW+ESPMFgKuOXwIlCypTPRpgSabuY0MLTDXJLR27lk8QyKGOHQ+SwMj4K\n"
                           "00u/I5sUKUErmgQfky3xxzlIPK1aEn8=\n"
                           "-----END CERTIFICATE-----\n";

// SSL 证书，不配无法连接

String ret;

WiFiClientSecure client;

void Center_String(String text, int start, int height , int width) {
  tft.drawString(text, start + (width - tft.textWidth(text)) / 2, height);
}

void Draw_icon(int code, int height, int width) {
  if (code == 100) {
    tft.drawXBitmap(height, width, icon100, 48, 48, TFT_WHITE);
  }
  // 根据 code 绘制图标
}

void getData();

void setup() {
  Serial.begin(115200);
  delay(100);

  Serial.print("Attempting to connect to SSID: ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  tft.begin();
  tft.setRotation(3);
  tft.fillScreen(TFT_BLACK);
  tft.setTextSize(2);
  tft.setCursor((320 - tft.textWidth("Connecting to Wi-Fi..")) / 2, 120);
  tft.print("Connecting to Wi-Fi..");

  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(1000);
  }

  Serial.print("Connected to ");
  Serial.println(ssid);

  tft.fillScreen(TFT_BLACK);
  tft.setCursor((320 - tft.textWidth("Connected!")) / 2, 120);
  tft.print("Connected!"); // 连接 Wi-Fi

  getData();
}

void loop() {
}

void getData() {
  client.setCACert(root_ca);
  tft.fillScreen(TFT_BLACK);
  tft.setCursor((320 - tft.textWidth("Conecting to Server..")) / 2, 120);
  tft.print("Connecting to Server..");

  Serial.println("\nStarting connection to server...");
  if (!client.connect(server, 443)) {
    Serial.println("Connection failed!");
    tft.fillScreen(TFT_BLACK);
    tft.setCursor((320 - tft.textWidth("Connection failed!")) / 2, 120);
    tft.print("Connection failed!");
  } else {
    Serial.println("Connected to server!");
    tft.fillScreen(TFT_BLACK);
    tft.setCursor((320 - tft.textWidth("Connected to Server!")) / 2, 120);
    tft.print("Connected to Server!");

    client.println("GET /v7/weather/now?location=101210111&key=d1fb5e4caa604b78be6aa4e2e5ffc65f&lang=en&gzip=n HTTP/1.1");
    client.println("Host: devapi.qweather.com");
    client.println("User-Agent: Seeed-Studio");
    client.println("Connection: close");
    client.println();

    while (client.connected()) {
      String line = client.readStringUntil('\n');
      if (line == "\r") {
        Serial.println("headers received");
        break;
      }
      Serial.println(line);
    }

    while (client.available())
    {
      String line = client.readStringUntil('\r');
      ret = line;
    }
    Serial.println(ret);
    client.stop();
    Serial.println("closing connection");
  }

  // 获取天气数据

  const size_t capacity = 2 * JSON_OBJECT_SIZE(18) + JSON_OBJECT_SIZE(77) + 6050;
  DynamicJsonDocument doc(capacity);
  deserializeJson(doc, ret);
  int code = doc["now"]["icon"];
  String weather_text = doc["now"]["text"];
  String temperature = doc["now"]["temp"];
  String humidity = doc["now"]["humidity"];
  String before = "Hum:";
  humidity = before + humidity;
  humidity += "%";
  String location = "Hangzhou";


  // 天气数据解码

  if (!client.connect(server, 443)) {
    Serial.println("Connection failed!");
    tft.fillScreen(TFT_BLACK);
    tft.setCursor((320 - tft.textWidth("Connection failed!")) / 2, 120);
    tft.print("Connection failed!");
  }
  client.println("GET /v7/weather/3d?location=101210111&key=d1fb5e4caa604b78be6aa4e2e5ffc65f&lang=en&gzip=n HTTP/1.1");
  client.println("Host: devapi.qweather.com");
  client.println("User-Agent: Seeed-Studio");
  client.println("Connection: close");
  client.println();

  while (client.connected()) {
    String line = client.readStringUntil('\n');
    if (line == "\r") {
      Serial.println("headers received");
      break;
    }
    Serial.println(line);
  }

  while (client.available())
  {
    String line = client.readStringUntil('\r');
    ret = line;
  }
  Serial.println(ret);
  client.stop();
  Serial.println("closing connection");

  deserializeJson(doc, ret);
  int today_code = doc["daily"][0]["iconDay"];
  String today_weather_text = doc["daily"][0]["textDay"];
  String today_temperature = doc["daily"][0]["tempMin"];
  String today_temperature_high = doc["daily"][0]["tempMax"];

  today_temperature.concat("~");
  today_temperature.concat(today_temperature_high);

  int tomorrow_code = doc["daily"][1]["iconDay"];
  String tomorrow_weather_text = doc["daily"][1]["textDay"];
  String tomorrow_temperature = doc["daily"][1]["tempMin"];
  String tomorrow_temperature_high = doc["daily"][1]["tempMax"];

  tomorrow_temperature.concat("~");
  tomorrow_temperature.concat(tomorrow_temperature_high);

  int tdat_code = doc["daily"][2]["iconDay"];
  String tdat_weather_text = doc["daily"][2]["textDay"];
  String tdat_temperature = doc["daily"][2]["tempMin"];
  String tdat_temperature_high  = doc["daily"][2]["tempMax"];
  tdat_temperature.concat("~");
  tdat_temperature.concat(tdat_temperature_high);

  // 也是获取天气信息

  if (!client.connect(server, 443)) {
    Serial.println("Connection failed!");
    tft.fillScreen(TFT_BLACK);
    tft.setCursor((320 - tft.textWidth("Connection failed!")) / 2, 120);
    tft.print("Connection failed!");
  }
  client.println("GET /v7/air/now?location=101210111&key=d1fb5e4caa604b78be6aa4e2e5ffc65f&lang=en&gzip=n HTTP/1.1");
  client.println("Host: devapi.qweather.com");
  client.println("User-Agent: Seeed-Studio");
  client.println("Connection: close");
  client.println();

  while (client.connected()) {
    String line = client.readStringUntil('\n');
    if (line == "\r") {
      Serial.println("headers received");
      break;
    }
    Serial.println(line);
  }

  while (client.available())
  {
    String line = client.readStringUntil('\r');
    ret = line;
  }
  Serial.println(ret);
  client.stop();
  Serial.println("closing connection");

  deserializeJson(doc, ret);
  String aqi = doc["now"]["aqi"];
  String air = "AQI:";
  air.concat(aqi);

  // 根据获取的天气数据进行页面显示

  tft.setFreeFont(FSS9);
  tft.setTextSize(1);
  tft.setTextColor(TFT_WHITE);
  tft.fillScreen(TFT_BLACK);
  tft.drawString(location, 20, 10);
  tft.drawFastHLine(tft.textWidth(location) + 40, 18, 300 - tft.textWidth(location) - 40 + 10 , TFT_RED);
  tft.drawFastHLine(tft.textWidth(location) + 40, 19, 300 - tft.textWidth(location) - 40 + 10 , TFT_RED);
  tft.drawFastHLine(tft.textWidth(location) + 40, 20, 300 - tft.textWidth(location) - 40 + 10 , TFT_RED);
  tft.drawFastHLine(10, 33, 300 , TFT_NAVY);
  tft.drawFastHLine(10, 34, 300 , TFT_NAVY);
  tft.drawFastHLine(10, 35, 300 , TFT_NAVY);

  const int Margin = 20;
  const int Width = (320 - 5 * Margin) / 4;

  Draw_icon(code, Margin, Width);
  tft.setFreeFont(FMB9);
  Center_String("Now", Margin,  120, Width);
  Center_String(temperature + "C", Margin,  140, Width);
  Center_String(humidity, Margin,  160, Width);
  Center_String(air, Margin,  180, Width);
  Center_String(weather_text, Margin,  200, Width);

  Draw_icon(today_code, Margin * 2 + Width, Width);
  tft.setFreeFont(FMB9);
  Center_String("Today", Margin * 2 + Width,  120, Width);
  Center_String(today_temperature + "C", Margin * 2 + Width,  160, Width);
  Center_String(today_weather_text, Margin * 2 + Width,  200, Width);

  Draw_icon(tomorrow_code, Margin * 3 + Width * 2, Width);
  tft.setFreeFont(FMB9);
  Center_String("Tomorrow", Margin * 3 + Width * 2,  120, Width);
  Center_String(tomorrow_temperature + "C", Margin * 3 + Width * 2,  160, Width);
  Center_String(tomorrow_weather_text, Margin * 3 + Width * 2,  200, Width);

  Draw_icon( tdat_code, Margin * 4 + Width * 3, Width);
  tft.setFreeFont(FMB9);
  Center_String("TDAT", Margin * 4 + Width * 3,  120, Width);
  Center_String(tdat_temperature + "C", Margin * 4 + Width * 3,  160, Width);
  Center_String(tdat_weather_text, Margin * 4 + Width * 3,  200, Width);
}

Fgr3UmqEgFZ0umXUhCCB7_8aHrEW

心得体会

Wio Terminal 扩展性非常强大，可以实现多样的功能，在此感谢硬核团队的技术支持。

在使用中发现如果不配置 SSL 证书会导致连接时直接跑飞，不报错也不继续执行。在之后的调试中逐渐发现了证书的问题。