自己来制作一个桌面天气预报站~
九月一到，就有了秋意，秋意在一個多霧的黎明溜來，到了炎熱的下午便不見蹤影。它踮起腳尖掠過樹頂，染紅幾片葉子，然后乘著一簇飛掠過山谷離開。秋天已悄悄到來，背上你的行囊，叫上你的小伙伴一起去外面看看繽紛的世界。這不我養的小青蛙已經出去旅行了，它總是會給我發一些它在旅游時候的照片，不過最近在外好像有了艷遇。給大家看看它寄回來的照片。
我每當我看到我這里天氣的變好或變差的時候，我都會去看看我的蛙兒子在哪里旅行。
氣象站功能：
接受當地時間及當地天氣，顯示在屏幕上；
使用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 模式：兩種模式的共存模式，即可以通過互聯網控制可實現無縫切換，方便操作。
說明：本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?6DFRobot_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?6String?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?FreeMono12pt7bscreen.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?FreeMono12pt7bscreen.setCursor(/*x=*/0,/*y=*/0);screen.setTextColor(COLOR_RGB565_LGRAY);screen.setTextWrap(true);screen.setFont(&simkaiFont48pt?);//Set?the?font?to?FreeMono12pt7bscreen.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
1.該如何學習嵌入式？看大佬的職業規劃！
2.臺積電突然變臉：將向美國交出商業機密數據
3.如何用Keil驗證8位和32位單片機變量占用空間大小？
4.楊福宇專欄|細讀特斯拉安陽案48頁數據文檔，了解故障的存在~
5.別讓你的項目，毀在單片機選型上！
6.時鐘失效之后，STM32還能運行？
免責聲明：本文系網絡轉載，版權歸原作者所有。如涉及作品版權問題，請與我們聯系，我們將根據您提供的版權證明材料確認版權并支付稿酬或者刪除內容。
總結
以上是生活随笔為你收集整理的自己来制作一个桌面天气预报站~的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DVDRip论坛不完全手册
- 下一篇： 安卓合并手机存储