【开源】用ESP32制作一个桌面天气预报站
九月一到，就有了秋意，秋意在一個多霧的黎明溜來，到了炎熱的下午便不見蹤影。它踮起腳尖掠過樹頂，染紅幾片葉子，然后乘著一簇飛掠過山谷離開。秋天已悄悄到來，背上你的行囊，叫上你的小伙伴一起去外面看看繽紛的世界。這不我養的小青蛙已經出去旅行了，它總是會給我發一些它在旅游時候的照片，不過最近在外好像有了艷遇。給大家看看它寄回來的照片。
我每當我看到我這里天氣的變好或變差的時候，我都會去看看我的蛙兒子在哪里旅行。
氣象站功能：
接受當地時間及當地天氣，顯示在屏幕上；
使用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 模式：兩種模式的共存模式，即可以通過互聯網控制可實現無縫切換，方便操作。
#include?<WiFi.h>
#include?<HTTPClient.h>
#include?<ArduinoJson.h>
HTTPClient?http;
const?char*?ssid="dfrobotOffice";
const?char*?password="dfrobot2011";
const?char*?ntpServer?=?"pool.ntp.org";
const?long?gmtOffset_sec?=?28800;
const?int?daylightOffset_sec?=?0;
DynamicJsonDocument?doc(1024);
DynamicJsonDocument?doc1(1024);
void?printLocalTime(){
?struct?tm?timeinfo;
?if(!getLocalTime(&timeinfo)){
???Serial.println("Failed?to?obtian?time");
???return?;
?}
?Serial.println(&timeinfo,"%A,?%B?%d?%Y?%H:%M:%S");
}
void?printLocalWeather(){
????http.begin("http://www.weather.com.cn/data/cityinfo/101270101.html");
????int?httpCode?=?http.GET();
????if(httpCode?==?HTTP_CODE_OK){
??????String?pageData?=?http?.getString();
??????//Serial.println(pageData);
??????deserializeJson(doc,pageData);
??????JsonObject?obj?=?doc.as<JsonObject>();
??????String?weatherInfo?=?obj["weatherinfo"];
??????deserializeJson(doc1,weatherInfo);
??????JsonObject?obj1?=?doc1.as<JsonObject>();
??????String?city?=?obj1["city"];
??????String?temp1?=?obj1["temp1"];
??????String?temp2?=?obj1["temp2"];
??????String?weather?=?obj1["weather"];
??????String?cityInfo?="地點："+?city;
??????String?tempInfo?="?溫度:?"?+?temp1?+?"~"?+?temp2;
??????String?cityWeatherinfo?=?"?天氣狀況:?"?+?weather;
??????Serial.println("獲得天氣情況如下：");
??????printLocalTime();
??????Serial.print(cityInfo);
??????Serial.print(tempInfo);
??????Serial.println(cityWeatherinfo);
????}else{
??????Serial.println("GET?ERR");
????}
????http.end();
}
void?setup()?{
Serial.begin(115200);
??Serial.printf("Connecting?to?%s",ssid);
??WiFi.begin(ssid,password);
??while(WiFi.status()!=WL_CONNECTED){
????delay(500);
????Serial.print(".");
??}
??Serial.println("?CONNECTED");
??configTime(gmtOffset_sec,?daylightOffset_sec,?ntpServer);
?//?printLocalWeather();??
}
void?loop()?{
??if(WiFi.status()?==?WL_CONNECTED){
????printLocalWeather();??
??}else{
????Serial.println("WiFi??Disconnect");
???}
}
說明：本Demo實現了通過WiFi功能獲取網絡時間以及通過訪問國家氣象局提供的http://www.weather.com.cn/datalcityinfo/101010100.html來獲取天氣情況，本接口中“101010100"為城市代碼。
注意：該例程需要下載ArduinoJson庫，下載方式如下圖：
結果
四、添加旋轉太空人圖片
4.1 旋轉太空人的動態圖
其實是從動態圖里面截取下來的4張圖片 ?通過每100毫秒切換一張圖片，達到旋轉太空人的形態。
4.2 把圖片轉換成數組
4.3 把圖片的數組存放到.h文件下
4.4 圖片的使用代碼如下
#include?<DFRobot_GDL.h>
#include?"BMP.h"
#define?TFT_DC??D2
#define?TFT_CS??D6
#define?TFT_RST?D3
#define?PICNUMBER?6
DFRobot_ST7789_240x240_HW_SPI?screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
void?setup()?{
????screen.begin();
}
void?loop()?{
??screen.drawPIC(/*x=*/0,/*y=*/124,/*w=*/124,/*h=*/124,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_black1);
??delay(100);
??screen.drawPIC(/*x=*/0,/*y=*/124,/*w=*/124,/*h=*/124,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_black2);
??delay(100);
??screen.drawPIC(/*x=*/0,/*y=*/124,/*w=*/124,/*h=*/124,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_black3);
??delay(100);
??screen.drawPIC(/*x=*/0,/*y=*/124,/*w=*/124,/*h=*/124,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_black4);
??delay(100);
??screen.drawPIC(/*x=*/0,/*y=*/124,/*w=*/124,/*h=*/124,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_black5);
}
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 顯示天氣和時間的代碼如下
#include?<DFRobot_GDL.h>
#include?<WiFi.h>
#include?<HTTPClient.h>
#include?<ArduinoJson.h>
#include?"BMP.h"
HTTPClient?http;
const?char*?ssid="dfrobotOffice";
const?char*?password="dfrobot2011";
const?char*?ntpServer?=?"pool.ntp.org";
const?long?gmtOffset_sec?=?28800;
const?int?daylightOffset_sec?=?0;
DynamicJsonDocument?doc(1024);
DynamicJsonDocument?doc1(1024);
#define?TFT_DC??D2
#define?TFT_CS??D6
#define?TFT_RST?D3
#define?PICNUMBER?6
String?weekDays[]={"周天",?"周一",?"周二","周三",?"周四",?"周五",?"周六"};
DFRobot_ST7789_240x240_HW_SPI?screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
void?setup()?{
??Serial.begin(115200);
??screen.begin();
??Serial.printf("Connecting?to?%s",ssid);
??WiFi.begin(ssid,password);
??while(WiFi.status()!=WL_CONNECTED){
????delay(500);
????Serial.print(".");
??}
??Serial.println("?CONNECTED");
??configTime(gmtOffset_sec,?daylightOffset_sec,?ntpServer);
??screen.fillScreen(COLOR_RGB565_BLACK);??
}
void?printLocalWeather(){
????http.begin("http://www.weather.com.cn/data/cityinfo/101270101.html");
????int?httpCode?=?http.GET();
????if(httpCode?==?HTTP_CODE_OK){
??????String?pageData?=?http?.getString();
??????//Serial.println(pageData);
??????deserializeJson(doc,pageData);
??????JsonObject?obj?=?doc.as<JsonObject>();
??????String?weatherInfo?=?obj["weatherinfo"];
??????deserializeJson(doc1,weatherInfo);
??????JsonObject?obj1?=?doc1.as<JsonObject>();
??????String?city?=?obj1["city"];
??????String?temp1?=?obj1["temp1"];
??????String?temp2?=?obj1["temp2"];
??????String?weather?=?obj1["weather"];
??????String?cityInfo?=?city;
??????String?tempInfo?=temp1?+?"~"?+?temp2;
??????String?cityWeatherinfo?=weather;
??????Serial.println("獲得天氣情況如下：");
??????Serial.print(cityInfo);
??????Serial.print(tempInfo);
??????Serial.println(cityWeatherinfo);
??????
??????struct?tm?timeinfo;
??????if(!getLocalTime(&timeinfo)){
??????Serial.println("Failed?to?obtian?time");
??????return?;
??????}
??????Serial.println(&timeinfo,?"%F?%R?%u");?//?格式化輸出
??????//顯示天氣及時間信息
??????screen.setFont(&simkaiFont72pt?);//Set?the?font?to?FreeMono12pt7b
??????screen.setCursor(/*x=*/15,/*y=*/0);
??????screen.println(&timeinfo,"%H");
??????screen.setCursor(/*x=*/15,/*y=*/55);
??????screen.println(&timeinfo,"%M");
??????screen.setFont(&simkaiFont72pt?);//Set?the?font?to?FreeMono12pt7b
??????screen.setCursor(/*x=*/0,/*y=*/0);
??????screen.setTextColor(COLOR_RGB565_LGRAY);
??????screen.setTextWrap(true);
??????screen.setFont(&simkaiFont48pt?);//Set?the?font?to?FreeMono12pt7b
??????screen.setCursor(/*x=*/124,/*y=*/0);
??????screen.println(weekDays[timeinfo.tm_wday]);
??????screen.setFont(&simkaiFont24pt?);//設置字體大小?為24像素點大小
??????screen.setCursor(/*x=*/130,/*y=*/70);?//設置顯示光標
??????screen.println(cityWeatherinfo);//屏幕顯示天氣狀況，如多云轉晴類字樣
??????screen.drawPIC(/*x=*/125,/*y=*/200,/*w=*/24,/*h=*/24,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_black6);//屏幕顯示位置圖標
??????screen.setFont(&simkaiFont36pt?);//設置字體大小?為36像素點大小
??????screen.setCursor(/*x=*/120,/*y=*/135);//設置顯示光標
??????screen.println(tempInfo);//屏幕顯示溫度信息
??????screen.setCursor(/*x=*/204,/*y=*/135);
??????screen.println("°");//顯示溫度的符號
??????screen.setCursor(/*x=*/150,/*y=*/190);
??????screen.println(cityInfo);//屏幕顯示你所在城市的位置信息???
????}else{
??????Serial.println("GET?ERR");
????}
????http.end();
}
void?loop()?{
????if(WiFi.status()?==?WL_CONNECTED){
????printLocalWeather();??
??}else{
????Serial.println("WiFi??Disconnect");
???}
}
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引腳作為觸摸按鍵，并通過串口監視器返回觸摸值。
void?setup()
{
??Serial.begin(9600);
}
void?loop()
{
???Serial.printf("touch:%d\n",touchRead(4));
}
結果
6.2 選擇放置的圖片
6.3 觸摸一次就切換一次圖片代碼
#include?<DFRobot_GDL.h>
#include?"BMP.h"
#define?TFT_DC??D2
#define?TFT_CS??D6
#define?TFT_RST?D3
#define?PICNUMBER?6
uint8_t?randNumber;
DFRobot_ST7789_240x240_HW_SPI?screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
uint8_t?printfrog(uint8_t?number){
????switch(number){
????case?0:
????screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_qingwa1);//顯示的隨機圖片
????delay(2000);
????break;
????case?1:
????screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_qingwa2);
????delay(2000);
????break;
????case?2:
????screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_qingwa3);
????delay(2000);
????break;
????case?3:
????screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_qingwa4);
????delay(2000);
????break;
????case?4:
????screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_qingwa5);
????delay(2000);
????break;
????case?5:
????screen.drawPIC(/*x=*/0,/*y=*/0,/*w=*/240,/*h=*/240,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_qingwa6);
????delay(2000);
????break;
????}
??}
void?setup()?{
??Serial.begin(115200);
??screen.begin();
}
void?loop()?{
?????if(touchRead(4)<=20)
???{
????screen.fillScreen(COLOR_RGB565_BLACK);??
????Serial.println("摸到了");
????randNumber?=random(PICNUMBER);
????Serial.println(randNumber);//隨機數的打印
????printfrog(randNumber);
????}
????else{
??????Serial.println("沒有摸到");
??????}
??}
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
總結
以上是生活随笔為你收集整理的【开源】用ESP32制作一个桌面天气预报站的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 功能测试和兼容性测试
- 下一篇： 资料一下很不错的下载站，有大量的书籍：快