【开源】用ESP32制作一个桌面天气预报站

九月一到，就有了秋意，秋意在一个多雾的黎明溜来，到了炎热的下午便不见踪影。它踮起脚尖掠过树顶，染红几片叶子，然后乘着一簇飞掠过山谷离开。秋天已悄悄到来，背上你的行囊，叫上你的小伙伴一起去外面看看缤纷的世界。这不我养的小青蛙已经出去旅行了，它总是会给我发一些它在旅游时候的照片，不过最近在外好像有了艳遇。给大家看看它寄回来的照片。

我每当我看到我这里天气的变好或变差的时候，我都会去看看我的蛙儿子在哪里旅行。

气象站功能：

1. 接受当地时间及当地天气，显示在屏幕上；

2. 使用ESP32-E的电容触摸引脚，切换屏幕显示内容，显示青蛙旅行图片。

一、准备材料

1、硬件材料

• ESP32-E主板

• 3.7v电池

• 3.7V电池充电器

• TFT显示屏

2、外壳打印：

获取图纸链接[1]

二、制作过程

2.1 将各个模块按下图进行连接

2.2 安装开发板和库文件

• 关于如何下载本次使用的库文件，DFRobot_GDL库文件[2]

• 关于如何使用Firebeetle Board-ESP32-E[3]

• 关于如何下载库文件[4]

三、使用esp32获取网络天气及时间

ESP32同时支持STA以及AP模式的WiFi连接。

• STA 模式：ESP32模块通过路由器连接互联网，手机或电脑通过互联网实现对设备的远程控制。

• AP 模式：ESP32模块作为热点，实现手机或电脑直接与模块通信，实现局域网无线控制。

• STA+AP 模式：两种模式的共存模式，即可以通过互联网控制可实现无缝切换，方便操作。

1. #include <WiFi.h>

2. #include <HTTPClient.h>

3. #include <ArduinoJson.h>

4. HTTPClient http;

5. const char* ssid="dfrobotOffice";

6. const char* password="dfrobot2011";

7. const char* ntpServer = "pool.ntp.org";

8. const long gmtOffset_sec = 28800;

9. const int daylightOffset_sec = 0;

10. DynamicJsonDocument doc(1024);

11. DynamicJsonDocument doc1(1024);

13. void printLocalTime(){

14.  struct tm timeinfo;

15.  if(!getLocalTime(&timeinfo)){

16.    Serial.println("Failed to obtian time");

17.    return ;

18.  }

19.  Serial.println(&timeinfo,"%A, %B %d %Y %H:%M:%S");

20. }

22. void printLocalWeather(){

23.     http.begin("http://www.weather.com.cn/data/cityinfo/101270101.html");

24.     int httpCode = http.GET();

25.     if(httpCode == HTTP_CODE_OK){

26.       String pageData = http .getString();

27.       //Serial.println(pageData);

28.       deserializeJson(doc,pageData);

29.       JsonObject obj = doc.as<JsonObject>();

30.       String weatherInfo = obj["weatherinfo"];

31.       deserializeJson(doc1,weatherInfo);

32.       JsonObject obj1 = doc1.as<JsonObject>();

33.       String city = obj1["city"];

34.       String temp1 = obj1["temp1"];

35.       String temp2 = obj1["temp2"];

36.       String weather = obj1["weather"];

37.       String cityInfo ="地点："+ city;

38.       String tempInfo =" 温度: " + temp1 + "~" + temp2;

39.       String cityWeatherinfo = " 天气状况: " + weather;

40.       Serial.println("获得天气情况如下：");

41.       printLocalTime();

42.       Serial.print(cityInfo);

43.       Serial.print(tempInfo);

44.       Serial.println(cityWeatherinfo);

45.     }else{

46.       Serial.println("GET ERR");

47.     }

48.     http.end();

49. }

51. void setup() {

52. Serial.begin(115200);

53.   Serial.printf("Connecting to %s",ssid);

54.   WiFi.begin(ssid,password);

55.   while(WiFi.status()!=WL_CONNECTED){

56.     delay(500);

57.     Serial.print(".");

58.   }

59.   Serial.println(" CONNECTED");

60.   configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

62.  // printLocalWeather();  

63. }

65. void loop() {

66.   if(WiFi.status() == WL_CONNECTED){

67.     printLocalWeather();  

68.   }else{

69.     Serial.println("WiFi  Disconnect");

70.    }

71. }

说明：本Demo实现了通过WiFi功能获取网络时间以及通过访问国家气象局提供的http://www.weather.com.cn/datalcityinfo/101010100.html来获取天气情况，本接口中“101010100"为城市代码。

注意：该例程需要下载ArduinoJson库，下载方式如下图：

结果

四、添加旋转太空人图片

4.1 旋转太空人的动态图

其实是从动态图里面截取下来的4张图片  通过每100毫秒切换一张图片，达到旋转太空人的形态。

4.2 把图片转换成数组

4.3 把图片的数组存放到.h文件下

4.4 图片的使用代码如下

1. #include <DFRobot_GDL.h>

2. #include "BMP.h"

4. #define TFT_DC  D2

5. #define TFT_CS  D6

6. #define TFT_RST D3

7. #define PICNUMBER 6

9. DFRobot_ST7789_240x240_HW_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);

11. void setup() {

12.     screen.begin();

15. }

17. void loop() {

18.   screen.drawPIC(/*x=*/0,/*y=*/124,/*w=*/124,/*h=*/124,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_black1);

19.   delay(100);

20.   screen.drawPIC(/*x=*/0,/*y=*/124,/*w=*/124,/*h=*/124,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_black2);

21.   delay(100);

22.   screen.drawPIC(/*x=*/0,/*y=*/124,/*w=*/124,/*h=*/124,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_black3);

23.   delay(100);

24.   screen.drawPIC(/*x=*/0,/*y=*/124,/*w=*/124,/*h=*/124,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_black4);

25.   delay(100);

26.   screen.drawPIC(/*x=*/0,/*y=*/124,/*w=*/124,/*h=*/124,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_black5);

29. }

4.5 图片动态展示

五、把从网络上获取到的天气和时间信息显示在TFT屏幕

5.1 python环境搭建

在使用setup.py脚本生成自定义字体之前，需要做如下准备:

• 登录网址https://www.python.org/downloads/，下载python3.6及以上版本；

• 安装完毕后，需要用下列命令安装python第三方依赖包:

• pip3 install numpy

• pip install freetype-py

• pip install chardet

5.2 生成自定义字体

把ttf文件放在库文件的对应ttf文件夹下，这里我提供了一个ttf文件，供大家使用。链接获取[5]:

• 将TTF字体文件存放在ttf文件夹里，例如：SIMKAI.TTF（简体字 楷体）

• 在text.txt文件中输入你想生成的字符，例如：你好，世界！

• 打开config.txt文件，配置生成字体文件的名字前缀和字体大小

5.3 在屏幕上显示

• 运行setup.py脚本，会在font文件夹生成一系列后缀名为.h的字体文件，并弹出一个font.txt的文本，再进行以下步骤，即可在屏上显示：你好，世界！

• 将font文件夹里的文件复制到DFRobot_GDL\src\Fonts\Fonts目录下;

• 将弹出的font.txt的内容粘贴到DFRobot_GDL\src\Fonts\DFRobot_Font.h文件中;

• 打开Arduino IDE，构造屏对象，如tft，调用tft.setFont(&SIMKAIFont48pt);

• 调用tft.println("你好，世界！"),此时即可在屏上显示"你好，世界！"

5.4 显示天气和时间的代码如下

1. #include <DFRobot_GDL.h>

2. #include <WiFi.h>

3. #include <HTTPClient.h>

4. #include <ArduinoJson.h>

5. #include "BMP.h"

6. HTTPClient http;

8. const char* ssid="dfrobotOffice";

9. const char* password="dfrobot2011";

10. const char* ntpServer = "pool.ntp.org";

11. const long gmtOffset_sec = 28800;

12. const int daylightOffset_sec = 0;

13. DynamicJsonDocument doc(1024);

14. DynamicJsonDocument doc1(1024);

15. #define TFT_DC  D2

16. #define TFT_CS  D6

17. #define TFT_RST D3

18. #define PICNUMBER 6

20. String weekDays[]={"周天", "周一", "周二","周三", "周四", "周五", "周六"};

22. DFRobot_ST7789_240x240_HW_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);

24. void setup() {

25.   Serial.begin(115200);

26.   screen.begin();

28.   Serial.printf("Connecting to %s",ssid);

29.   WiFi.begin(ssid,password);

30.   while(WiFi.status()!=WL_CONNECTED){

31.     delay(500);

32.     Serial.print(".");

33.   }

34.   Serial.println(" CONNECTED");

35.   configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

37.   screen.fillScreen(COLOR_RGB565_BLACK);  

39. }

41. void printLocalWeather(){

42.     http.begin("http://www.weather.com.cn/data/cityinfo/101270101.html");

43.     int httpCode = http.GET();

44.     if(httpCode == HTTP_CODE_OK){

45.       String pageData = http .getString();

46.       //Serial.println(pageData);

47.       deserializeJson(doc,pageData);

48.       JsonObject obj = doc.as<JsonObject>();

49.       String weatherInfo = obj["weatherinfo"];

50.       deserializeJson(doc1,weatherInfo);

51.       JsonObject obj1 = doc1.as<JsonObject>();

52.       String city = obj1["city"];

53.       String temp1 = obj1["temp1"];

54.       String temp2 = obj1["temp2"];

55.       String weather = obj1["weather"];

56.       String cityInfo = city;

57.       String tempInfo =temp1 + "~" + temp2;

58.       String cityWeatherinfo =weather;

59.       Serial.println("获得天气情况如下：");

60.       Serial.print(cityInfo);

61.       Serial.print(tempInfo);

62.       Serial.println(cityWeatherinfo);

63.       

64.       struct tm timeinfo;

65.       if(!getLocalTime(&timeinfo)){

66.       Serial.println("Failed to obtian time");

67.       return ;

68.       }

69.       Serial.println(&timeinfo, "%F %R %u"); // 格式化输出

71.       //显示天气及时间信息

72.       screen.setFont(&simkaiFont72pt );//Set the font to FreeMono12pt7b

73.       screen.setCursor(/*x=*/15,/*y=*/0);

74.       screen.println(&timeinfo,"%H");

75.       screen.setCursor(/*x=*/15,/*y=*/55);

76.       screen.println(&timeinfo,"%M");

77.       screen.setFont(&simkaiFont72pt );//Set the font to FreeMono12pt7b

78.       screen.setCursor(/*x=*/0,/*y=*/0);

79.       screen.setTextColor(COLOR_RGB565_LGRAY);

80.       screen.setTextWrap(true);

81.       screen.setFont(&simkaiFont48pt );//Set the font to FreeMono12pt7b

82.       screen.setCursor(/*x=*/124,/*y=*/0);

83.       screen.println(weekDays[timeinfo.tm_wday]);

84.       screen.setFont(&simkaiFont24pt );//设置字体大小 为24像素点大小

85.       screen.setCursor(/*x=*/130,/*y=*/70); //设置显示光标

86.       screen.println(cityWeatherinfo);//屏幕显示天气状况，如多云转晴类字样

87.       screen.drawPIC(/*x=*/125,/*y=*/200,/*w=*/24,/*h=*/24,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_black6);//屏幕显示位置图标

88.       screen.setFont(&simkaiFont36pt );//设置字体大小 为36像素点大小

89.       screen.setCursor(/*x=*/120,/*y=*/135);//设置显示光标

90.       screen.println(tempInfo);//屏幕显示温度信息

91.       screen.setCursor(/*x=*/204,/*y=*/135);

92.       screen.println("°");//显示温度的符号

93.       screen.setCursor(/*x=*/150,/*y=*/190);

94.       screen.println(cityInfo);//屏幕显示你所在城市的位置信息   

96.     }else{

97.       Serial.println("GET ERR");

98.     }

99.     http.end();

100. }

103. void loop() {

104.     if(WiFi.status() == WL_CONNECTED){

105.     printLocalWeather();  

106.   }else{

107.     Serial.println("WiFi  Disconnect");

108.    }

110. }

5.5 显示效果

六、使用电容触摸显示青蛙儿子旅行照片

6.1 电容按键

ESP32提供了电容触摸传感器的功能, 共有T0,T2~T9 共 9个touch传感器可用.分别对应引脚4、2、15、13、12、14、27、33、32. 无需设置PinMode，touchRead()返回值为0~255. 触摸强度越大，返回值越小。烧录此例程，将使用4/D12引脚作为触摸按键，并通过串口监视器返回触摸值。

1. void setup()

2. {

3.   Serial.begin(9600);

4. }

6. void loop()

7. {

8.    Serial.printf("touch:%d\n",touchRead(4));

9. }

结果

6.2 选择放置的图片

6.3 触摸一次就切换一次图片代码

1. #include <DFRobot_GDL.h>

2. #include "BMP.h"

4. #define TFT_DC  D2

5. #define TFT_CS  D6

6. #define TFT_RST D3

7. #define PICNUMBER 6

8. uint8_t randNumber;

9. DFRobot_ST7789_240x240_HW_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);

11. uint8_t printfrog(uint8_t number){

12.     switch(number){

13.     case 0:

14.     screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_qingwa1);//显示的随机图片

15.     delay(2000);

16.     break;

17.     case 1:

18.     screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_qingwa2);

19.     delay(2000);

20.     break;

21.     case 2:

22.     screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_qingwa3);

23.     delay(2000);

24.     break;

25.     case 3:

26.     screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_qingwa4);

27.     delay(2000);

28.     break;

29.     case 4:

30.     screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_qingwa5);

31.     delay(2000);

32.     break;

33.     case 5:

34.     screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap gImage_Bitmap=*/( uint8_t*)gImage_qingwa6);

35.     delay(2000);

36.     break;

37.     }

39.   }

42. void setup() {

43.   Serial.begin(115200);

44.   screen.begin();

45. }

47. void loop() {

49.      if(touchRead(4)<=20)

50.    {

51.     screen.fillScreen(COLOR_RGB565_BLACK);  

52.     Serial.println("摸到了");

53.     randNumber =random(PICNUMBER);

54.     Serial.println(randNumber);//随机数的打印

55.     printfrog(randNumber);

57.     }

58.     else{

59.       Serial.println("没有摸到");

60.       }

61.   }

6.4  随机触摸显示图片效果展示

七、 完整功能代码展示

点击左下角阅读原文查看

从这次的小应用中我学会了很多东西，比如在tft屏幕上显示图片、动态图、中文。如何抓取天气信息，如何把抓取到的信息显示到tft屏幕上。

所以去旅行吧，不理会繁杂的琐事，自由自在地，去体验一个城市，一段故事，留下一片欢笑。

原文链接：https://mc.dfrobot.com.cn/thread-311127-1-1.html

项目作者: 创客达闻西

首发于DF创客社区

开源项目，转载请务必注明项目出处与原作者信息

参考资料

[1]

图纸链接: https://mc.dfrobot.com.cn/forum.php?mod=attachment&aid=MTMzNjgyfGE2NzAxYmY2YzNkOTc5MDk0MTJmNjkyOTNmOWIxNzJhfDE2MzM5MzQwNTM%3D&request=yes&_f=.rar

[2]

DFRobot_GDL库文件: https://codeload.github.com/DFRobot/DFRobot_GDL/zip/master

[3]

使用Firebeetle Board-ESP32-E: https://wiki.dfrobot.com.cn/_SKU_DFR0654_FireBeetle_Board_ESP32_E

[4]

下载库文件: https://mc.dfrobot.com.cn/thread-1854-1-1.html

[5]

ttf文件: https://mc.dfrobot.com.cn/forum.php?mod=attachment&aid=MTMzMzIzfGQ5NDRmNTVhNjk5MGVlYzI4NjExNTk5ZDZmMjc3YjFlfDE2MzM5MzQwNTM%3D&request=yes&_f=.rar