九月一到，就有了秋意，秋意在一個(gè)多霧的黎明溜來(lái)，到了炎熱的下午便不見(jiàn)蹤影。它踮起腳尖掠過(guò)樹(shù)頂，染紅幾片葉子，然后乘著一簇飛掠過(guò)山谷離開(kāi)。秋天已悄悄到來(lái)，背上你的行囊，叫上你的小伙伴一起去外面看看繽紛的世界。這不我養(yǎng)的小青蛙已經(jīng)出去旅行了，它總是會(huì)給我發(fā)一些它在旅游時(shí)候的照片，不過(guò)最近在外好像有了艷遇。給大家看看它寄回來(lái)的照片。

我每當(dāng)我看到我這里天氣的變好或變差的時(shí)候，我都會(huì)去看看我的蛙兒子在哪里旅行。

氣象站功能：

接受當(dāng)?shù)貢r(shí)間及當(dāng)?shù)靥鞖?#xff0c;顯示在屏幕上；

使用ESP32-E的電容觸摸引腳，切換屏幕顯示內(nèi)容，顯示青蛙旅行圖片。

一、準(zhǔn)備材料

1、硬件材料

• ESP32-E主板

• 3.7v電池

• 3.7V電池充電器

• TFT顯示屏

2、外殼打印：

獲取圖紙鏈接^[1]

二、制作過(guò)程

2.1 將各個(gè)模塊按下圖進(jìn)行連接

2.2 安裝開(kāi)發(fā)板和庫(kù)文件

• 關(guān)于如何下載本次使用的庫(kù)文件，DFRobot_GDL庫(kù)文件^[2]

• 關(guān)于如何使用Firebeetle Board-ESP32-E^[3]

• 關(guān)于如何下載庫(kù)文件^[4]

三、使用esp32獲取網(wǎng)絡(luò)天氣及時(shí)間

ESP32同時(shí)支持STA以及AP模式的WiFi連接。

• STA 模式：ESP32模塊通過(guò)路由器連接互聯(lián)網(wǎng)，手機(jī)或電腦通過(guò)互聯(lián)網(wǎng)實(shí)現(xiàn)對(duì)設(shè)備的遠(yuǎn)程控制。

• AP 模式：ESP32模塊作為熱點(diǎn)，實(shí)現(xiàn)手機(jī)或電腦直接與模塊通信，實(shí)現(xiàn)局域網(wǎng)無(wú)線(xiàn)控制。

• STA+AP 模式：兩種模式的共存模式，即可以通過(guò)互聯(lián)網(wǎng)控制可實(shí)現(xiàn)無(wú)縫切換，方便操作。

#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?="地點(diǎn)："+?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");} }

說(shuō)明：本Demo實(shí)現(xiàn)了通過(guò)WiFi功能獲取網(wǎng)絡(luò)時(shí)間以及通過(guò)訪(fǎng)問(wèn)國(guó)家氣象局提供的http://www.weather.com.cn/datalcityinfo/101010100.html來(lái)獲取天氣情況，本接口中“101010100"為城市代碼。

注意：該例程需要下載ArduinoJson庫(kù)，下載方式如下圖：

結(jié)果

四、添加旋轉(zhuǎn)太空人圖片

4.1 旋轉(zhuǎn)太空人的動(dòng)態(tài)圖

其實(shí)是從動(dòng)態(tài)圖里面截取下來(lái)的4張圖片 ?通過(guò)每100毫秒切換一張圖片，達(dá)到旋轉(zhuǎn)太空人的形態(tài)。

4.2 把圖片轉(zhuǎn)換成數(shù)組

4.3 把圖片的數(shù)組存放到.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 圖片動(dòng)態(tài)展示

五、把從網(wǎng)絡(luò)上獲取到的天氣和時(shí)間信息顯示在TFT屏幕

5.1 python環(huán)境搭建

在使用setup.py腳本生成自定義字體之前，需要做如下準(zhǔn)備:

• 登錄網(wǎng)址https://www.python.org/downloads/，下載python3.6及以上版本；

• 安裝完畢后，需要用下列命令安裝python第三方依賴(lài)包:

• pip3 install numpy

• pip install freetype-py

• pip install chardet

5.2 生成自定義字體

把ttf文件放在庫(kù)文件的對(duì)應(yīng)ttf文件夾下，這里我提供了一個(gè)ttf文件，供大家使用。鏈接獲取^[5]:

• 將TTF字體文件存放在ttf文件夾里，例如：SIMKAI.TTF（簡(jiǎn)體字 楷體）

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

• 打開(kāi)config.txt文件，配置生成字體文件的名字前綴和字體大小

5.3 在屏幕上顯示

• 運(yùn)行setup.py腳本，會(huì)在font文件夾生成一系列后綴名為.h的字體文件，并彈出一個(gè)font.txt的文本，再進(jìn)行以下步驟，即可在屏上顯示：你好，世界！

• 將font文件夾里的文件復(fù)制到DFRobot_GDL\src\Fonts\Fonts目錄下;

• 將彈出的font.txt的內(nèi)容粘貼到DFRobot_GDL\src\Fonts\DFRobot_Font.h文件中;

• 打開(kāi)Arduino IDE，構(gòu)造屏對(duì)象，如tft，調(diào)用tft.setFont(&SIMKAIFont48pt);

• 調(diào)用tft.println("你好，世界！"),此時(shí)即可在屏上顯示"你好，世界！"

5.4 顯示天氣和時(shí)間的代碼如下

#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");?//?格式化輸出//顯示天氣及時(shí)間信息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?);//設(shè)置字體大小?為24像素點(diǎn)大小screen.setCursor(/*x=*/130,/*y=*/70);?//設(shè)置顯示光標(biāo)screen.println(cityWeatherinfo);//屏幕顯示天氣狀況，如多云轉(zhuǎn)晴類(lèi)字樣screen.drawPIC(/*x=*/125,/*y=*/200,/*w=*/24,/*h=*/24,/*bitmap?gImage_Bitmap=*/(?uint8_t*)gImage_black6);//屏幕顯示位置圖標(biāo)screen.setFont(&simkaiFont36pt?);//設(shè)置字體大小?為36像素點(diǎn)大小screen.setCursor(/*x=*/120,/*y=*/135);//設(shè)置顯示光標(biāo)screen.println(tempInfo);//屏幕顯示溫度信息screen.setCursor(/*x=*/204,/*y=*/135);screen.println("°");//顯示溫度的符號(hào)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個(gè)touch傳感器可用.分別對(duì)應(yīng)引腳4、2、15、13、12、14、27、33、32. 無(wú)需設(shè)置PinMode，touchRead()返回值為0~255. 觸摸強(qiáng)度越大，返回值越小。燒錄此例程，將使用4/D12引腳作為觸摸按鍵，并通過(guò)串口監(jiān)視器返回觸摸值。

void?setup() {Serial.begin(9600); }void?loop() {Serial.printf("touch:%d\n",touchRead(4)); }

結(jié)果

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);//顯示的隨機(jī)圖片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);//隨機(jī)數(shù)的打印printfrog(randNumber);}else{Serial.println("沒(méi)有摸到");}}

6.4 ?隨機(jī)觸摸顯示圖片效果展示

七、 完整功能代碼展示

點(diǎn)擊左下角閱讀原文查看

從這次的小應(yīng)用中我學(xué)會(huì)了很多東西，比如在tft屏幕上顯示圖片、動(dòng)態(tài)圖、中文。如何抓取天氣信息，如何把抓取到的信息顯示到tft屏幕上。

所以去旅行吧，不理會(huì)繁雜的瑣事，自由自在地，去體驗(yàn)一個(gè)城市，一段故事，留下一片歡笑。

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

項(xiàng)目作者:?創(chuàng)客達(dá)聞西

首發(fā)于DF創(chuàng)客社區(qū)

開(kāi)源項(xiàng)目，轉(zhuǎn)載請(qǐng)務(wù)必注明項(xiàng)目出處與原作者信息

參考資料

[1]

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

[2]

DFRobot_GDL庫(kù)文件:?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]

下載庫(kù)文件:?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.該如何學(xué)習(xí)嵌入式？看大佬的職業(yè)規(guī)劃！

2.臺(tái)積電突然變臉：將向美國(guó)交出商業(yè)機(jī)密數(shù)據(jù)

3.如何用Keil驗(yàn)證8位和32位單片機(jī)變量占用空間大小？

4.楊福宇專(zhuān)欄|細(xì)讀特斯拉安陽(yáng)案48頁(yè)數(shù)據(jù)文檔，了解故障的存在~

5.別讓你的項(xiàng)目，毀在單片機(jī)選型上！

6.時(shí)鐘失效之后，STM32還能運(yùn)行？

免責(zé)聲明：本文系網(wǎng)絡(luò)轉(zhuǎn)載，版權(quán)歸原作者所有。如涉及作品版權(quán)問(wèn)題，請(qǐng)與我們聯(lián)系，我們將根據(jù)您提供的版權(quán)證明材料確認(rèn)版權(quán)并支付稿酬或者刪除內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的自己来制作一个桌面天气预报站~的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。