【開(kāi)源項(xiàng)目】用ESP32制作一個(gè)桌面天氣預(yù)報(bào)站

氣象站功能：

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

2. 使用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ú)線控制。
• STA+AP 模式：兩種模式的共存模式，即可以通過(guò)互聯(lián)網(wǎng)控制可實(shí)現(xiàn)無(wú)縫切換，方便操作。

#include?
#include?
#include?
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();
??????String?weatherInfo?=?obj["weatherinfo"];
??????deserializeJson(doc1,weatherInfo);
??????JsonObject?obj1?=?doc1.as();
??????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ò)訪問(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?
#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 圖片動(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?
#include?
#include?
#include?
#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();
??????String?weatherInfo?=?obj["weatherinfo"];
??????deserializeJson(doc1,weatherInfo);
??????JsonObject?obj1?=?doc1.as();
??????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?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?);//設(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?
#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ū)

參考資料