開源項目，隻對動手能力有要求，有現成程式
b站示範視訊: https://www.bilibili.com/video/BV1ND4y1W7oS/?spm_id_from=333.999.0.0
效果圖
子產品和接線方法
使用ESP8266-12F子產品，4M空間。OLED使用1.3寸IPS 240*240點陣彩屏，ST7789驅動晶片。
接線：
螢幕 ESP8266-12F
GND<----->G
VCC<----->3V
SCL<----->D5
SDA<----->D7
RES<----->D0
DC <----->D6
BLK<----->3V
程式
//**********************************************************************
//開源項目
//更新加注釋 2023/1/10 V1
//
//**********************************************************************
#include "main.h"
#define VERSION "V101"
//--------------------------------------------------------------------------
//WIFI聯網配置
void connect_wifi() //聯網
{
WiFi.mode(WIFI_STA);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD); //用固定的賬号密碼連接配接網絡
while (WiFi.status() != WL_CONNECTED) { //未連接配接上的話
for (uint8_t n = 0; n < 10; n++){ //每500毫秒檢測一次狀态
PowerOn_Loading(50);
}
}
while(loadNum < 194){ //讓動畫走完
PowerOn_Loading(1); //加載動畫，加載完後序列槽輸出wifi資訊
}
Serial.print("\nWiFi connected to: ");
Serial.println(WIFI_SSID);
Serial.print("IP: ");
Serial.println(WiFi.localIP()); //得到IP位址
}
//-------------------------------------------------------------------------
//-------------------------------------------------------------------------
//開機聯網動畫
void PowerOn_Loading(uint8_t delayTime) //開機聯網顯示的進度條，輸入延時時間
{
clk.setColorDepth(8);
clk.createSprite(200, 50); //建立Sprite
clk.fillSprite(0x0000); //填充顔色
clk.drawRoundRect(0,0,200,16,8,0xFFFF); //畫一個圓角矩形
clk.fillRoundRect(3,3,loadNum,10,5,0xFFFF); //畫一個填充的圓角矩形
clk.setTextDatum(CC_DATUM); //顯示對齊方式
clk.setTextColor(TFT_GREEN, 0x0000); //文本的前景色和背景色
clk.drawString("Connecting to WiFi",100,40,2); //顯示文本
clk.pushSprite(20,110); //Sprite中内容一次推向螢幕
clk.deleteSprite(); //删除Sprite
loadNum += 1; //進度條位置變化，直到加載完成
if(loadNum>=194){
loadNum = 194;
}
delay(delayTime);
}
//--------------------------------------------------------------------------
void digitalClockDisplay() //時間顯示
{
clk.setColorDepth(8);
//--------------------中間時間區顯示開始--------------------
//時分
clk.createSprite(140, 48); //建立Sprite，先在Sprite記憶體中畫點，然後将記憶體中的點一次推向螢幕，這樣重新整理比較快
clk.fillSprite(bgColor); //背景色
//clk.loadFont(FxLED_48);
clk.setTextDatum(CC_DATUM); //顯示對齊方式
clk.setTextColor(TFT_BLACK, bgColor); //文本的前景色和背景色
clk.drawString(hourMinute(),70,24,7); //繪制時和分
//clk.unloadFont();
clk.pushSprite(28,40); //Sprite中内容一次推向螢幕
clk.deleteSprite(); //删除Sprite
//秒
clk.createSprite(40, 32);
clk.fillSprite(bgColor);
clk.loadFont(FxLED_32); //加載字型
clk.setTextDatum(CC_DATUM);
clk.setTextColor(TFT_BLACK, bgColor);
clk.drawString(num2str(second()),20,16);
clk.unloadFont(); //解除安裝字型
clk.pushSprite(170,60);
clk.deleteSprite();
//--------------------中間時間區顯示結束--------------------
//--------------------底部時間區顯示開始--------------------
clk.loadFont(ZdyLwFont_20); //加載漢字字型
//星期
clk.createSprite(58, 32);
clk.fillSprite(bgColor);
clk.setTextDatum(CC_DATUM);
clk.setTextColor(TFT_BLACK, bgColor);
clk.drawString(week(),29,16); //周幾
clk.pushSprite(1,168);
clk.deleteSprite();
//月日
clk.createSprite(98, 32);
clk.fillSprite(bgColor);
clk.setTextDatum(CC_DATUM);
clk.setTextColor(TFT_BLACK, bgColor);
clk.drawString(monthDay(),49,16); //幾月幾日
clk.pushSprite(61,168);
clk.deleteSprite();
clk.unloadFont(); //解除安裝字型
//--------------------底部時間區顯示結束--------------------
}
String week() //星期
{
String wk[7] = {"日","一","二","三","四","五","六"};
String s = "周" + wk[weekday()-1];
return s;
}
String monthDay() //月日
{
String s = String(month());
s = s + "月" + day() + "日";
return s;
}
String hourMinute() //時分
{
String s = num2str(hour());
s = s + ":" + num2str(minute());
return s;
}
String num2str(int digits) //數字轉換成字元串，保持2位顯示
{
String s = "";
if (digits < 10)
s = s + "0";
s = s + digits;
return s;
}
void printDigits(int digits) //列印時間資料
{
Serial.print(":");
if (digits < 10) //列印兩位數字
Serial.print('0');
Serial.print(digits);
}
time_t getNtpTime() //擷取NTP時間
{
IPAddress ntpServerIP; //NTP伺服器的IP位址
while (Udp.parsePacket() > 0) ; //之前的資料沒有處理的話一直等待 discard any previously received packets
WiFi.hostByName(ntpServerName, ntpServerIP); //從網站名擷取IP位址
sendNTPpacket(ntpServerIP); //發送資料包
uint32_t beginWait = millis();
while (millis() - beginWait < 1500) {
int size = Udp.parsePacket(); //接收資料
if (size >= NTP_PACKET_SIZE) {
Serial.println("Receive NTP Response");
Udp.read(packetBuffer, NTP_PACKET_SIZE); //從緩沖區讀取資料
unsigned long secsSince1900;
secsSince1900 = (unsigned long)packetBuffer[40] << 24;
secsSince1900 |= (unsigned long)packetBuffer[41] << 16;
secsSince1900 |= (unsigned long)packetBuffer[42] << 8;
secsSince1900 |= (unsigned long)packetBuffer[43];
return secsSince1900 - 2208988800UL + timeZone * SECS_PER_HOUR;
}
}
Serial.println("No NTP Response :-(");
return 0; //沒擷取到資料的話傳回0
}
void sendNTPpacket(IPAddress &address) //發送資料包到NTP伺服器
{
memset(packetBuffer, 0, NTP_PACKET_SIZE); //緩沖區清零
packetBuffer[0] = 0b11100011; //LI, Version, Mode 填充緩沖區資料
packetBuffer[1] = 0; //Stratum, or type of clock
packetBuffer[2] = 6; //Polling Interval
packetBuffer[3] = 0xEC; //Peer Clock Precision
packetBuffer[12] = 49;
packetBuffer[13] = 0x4E;
packetBuffer[14] = 49;
packetBuffer[15] = 52;
Udp.beginPacket(address, 123); //NTP伺服器端口123
Udp.write(packetBuffer, NTP_PACKET_SIZE); //發送udp資料
Udp.endPacket(); //發送結束
}
bool tft_output(int16_t x, int16_t y, uint16_t w, uint16_t h, uint16_t* bitmap)//顯示回調函數
{
if (y >= tft.height()) return 0;
tft.pushImage(x, y, w, h, bitmap);
return 1;
}
void getCityCode() //發送HTTP請求并且将伺服器響應通過序列槽輸出
{
String URL = "http://wgeo.weather.com.cn/ip/?_="+String(now());
httpClient.begin(URL); //配置請求位址。此處也可以不使用端口号和PATH而單純的
httpClient.setUserAgent("esp8266"); //使用者代理版本，其實沒什麼用 最重要是後端伺服器支援
//httpClient.setUserAgent("Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1");//設定請求頭中的User-Agent
httpClient.addHeader("Referer", "http://www.weather.com.cn/");
int httpCode = httpClient.GET(); //啟動連接配接并發送HTTP請求
Serial.print("Send GET request to URL: ");
Serial.println(URL);
if (httpCode == HTTP_CODE_OK) { //如果伺服器響應OK則從伺服器擷取響應體資訊并通過序列槽輸出
String str = httpClient.getString();
int aa = str.indexOf("id=");
if (aa > -1){ //應答包裡找到ID了
cityCode = 101110901;//寶雞 //str.substring(aa+4,aa+4+9); //9位長度
Serial.println(cityCode);
getCityWeater(); //擷取天氣資訊
LastTime2 = millis();
}
else{ //沒有找到ID
Serial.println("擷取城市代碼失敗");
}
}
else{
Serial.println("請求城市代碼錯誤：");
Serial.println(httpCode);
}
httpClient.end(); //關閉與伺服器連接配接
}
void getCityWeater() //擷取城市天氣
{
String URL = "http://d1.weather.com.cn/weather_index/" + cityCode + ".html?_="+String(now());
httpClient.begin(URL); //配置請求位址。
httpClient.setUserAgent("esp8266"); //使用者代理版本，其實沒什麼用 最重要是後端伺服器支援
//httpClient.setUserAgent("Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1");//設定請求頭中的User-Agent
httpClient.addHeader("Referer", "http://www.weather.com.cn/");
int httpCode = httpClient.GET(); //啟動連接配接并發送HTTP請求
Serial.print("Send GET request to URL: ");
Serial.println(URL);
if (httpCode == HTTP_CODE_OK) { //如果伺服器響應OK則從伺服器擷取響應體資訊并通過序列槽輸出
String str = httpClient.getString();
int indexStart = str.indexOf("weatherinfo\":");//尋找起始和結束位置
int indexEnd = str.indexOf("};var alarmDZ");
String jsonCityDZ = str.substring(indexStart+13,indexEnd);//複制字元串
Serial.println(jsonCityDZ);
indexStart = str.indexOf("dataSK ="); //尋找起始和結束位置
indexEnd = str.indexOf(";var dataZS");
String jsonDataSK = str.substring(indexStart+8,indexEnd);//複制字元串
Serial.println(jsonDataSK);
indexStart = str.indexOf("\"f\":["); //尋找起始和結束位置
indexEnd = str.indexOf(",{\"fa");
String jsonFC = str.substring(indexStart+5,indexEnd);//複制字元串
Serial.println(jsonFC);
weaterData(&jsonCityDZ,&jsonDataSK,&jsonFC); //顯示天氣資訊
Serial.println("擷取成功");
}
else {
Serial.println("請求城市天氣錯誤：");
Serial.print(httpCode);
}
httpClient.end(); //關閉與伺服器連接配接
}
void weaterData(String *cityDZ,String *dataSK,String *dataFC)//天氣資訊寫到螢幕上
{
DynamicJsonDocument doc(512);
deserializeJson(doc, *dataSK);
JsonObject sk = doc.as<JsonObject>();
clk.setColorDepth(8);
clk.loadFont(ZdyLwFont_20); //加載漢字字型
//溫度顯示
clk.createSprite(54, 32); //建立Sprite
clk.fillSprite(bgColor); //填充顔色
clk.setTextDatum(CC_DATUM); //顯示對齊方式
clk.setTextColor(TFT_BLACK, bgColor); //文本的前景色和背景色
clk.drawString(sk["temp"].as<String>()+"℃",27,16);//顯示文本
clk.pushSprite(185,168); //Sprite中内容一次推向螢幕
clk.deleteSprite(); //删除Sprite
//城市名稱顯示
clk.createSprite(88, 32);
clk.fillSprite(bgColor);
clk.setTextDatum(CC_DATUM);
clk.setTextColor(TFT_BLACK, bgColor);
clk.drawString(sk["cityname"].as<String>(),44,16);
clk.pushSprite(151,1);
clk.deleteSprite();
//PM2.5空氣指數顯示
uint16_t pm25BgColor = tft.color565(156,202,127);//優
String aqiTxt = "優";
int pm25V = sk["aqi"];
if (pm25V > 200){
pm25BgColor = tft.color565(136,11,32); //重度，顯示顔色和空氣品質程度
aqiTxt = "重度";
}
else if (pm25V > 150){
pm25BgColor = tft.color565(186,55,121); //中度
aqiTxt = "中度";
}
else if (pm25V > 100){
pm25BgColor = tft.color565(242,159,57); //輕
aqiTxt = "輕度";
}
else if (pm25V > 50){
pm25BgColor = tft.color565(247,219,100); //良
aqiTxt = "良";
}
clk.createSprite(50, 24);
clk.fillSprite(bgColor);
clk.fillRoundRect(0,0,50,24,4,pm25BgColor);
clk.setTextDatum(CC_DATUM);
clk.setTextColor(0xFFFF);
clk.drawString(aqiTxt,25,13);
clk.pushSprite(5,130);
clk.deleteSprite();
//濕度顯示
clk.createSprite(56, 24);
clk.fillSprite(bgColor);
clk.setTextDatum(CC_DATUM);
clk.setTextColor(TFT_BLACK, bgColor);
clk.drawString(sk["SD"].as<String>(),28,13);
//clk.drawString("100%",28,13);
clk.pushSprite(180,130);
clk.deleteSprite();
scrollText[0] = "實時天氣 " + sk["weather"].as<String>();//滾動顯示的資料緩沖區
scrollText[1] = "空氣品質 " + aqiTxt;
scrollText[2] = "風向 " + sk["WD"].as<String>()+sk["WS"].as<String>();
//左上角滾動字幕
deserializeJson(doc, *cityDZ);
JsonObject dz = doc.as<JsonObject>();
//Serial.println(sk["ws"].as<String>());
//String aa = "今日天氣:" + dz["weather"].as<String>() + "，溫度:最低" + dz["tempn"].as<String>() + "，最高" + dz["temp"].as<String>() + " 空氣品質:" + aqiTxt + "，風向:" + dz["wd"].as<String>() + dz["ws"].as<String>();
//Serial.println(aa);
scrollText[3] = "今日" + dz["weather"].as<String>();
deserializeJson(doc, *dataFC);
JsonObject fc = doc.as<JsonObject>();
scrollText[4] = "最低溫度"+fc["fd"].as<String>()+"℃";
scrollText[5] = "最高溫度"+fc["fc"].as<String>()+"℃";
clk.unloadFont(); //解除安裝字型
}
void scrollBanner() //天氣滾動條顯示
{
now1 = millis();
if(now1 - LastTime1 > 2500){ //2.5秒切換一次顯示内容
if(scrollText[Dis_Count]){ //如果滾動顯示緩沖區有資料
clkb.setColorDepth(8);
clkb.loadFont(ZdyLwFont_20); //加載漢字字型
for(int pos = 24; pos>0; pos--){ //24點，每次移動一個點，從下往上移
Dis_Scroll(pos);
}
//clkb.deleteSprite(); //删除Sprite，這個我移動到Dis_Scroll函數裡了
clkb.unloadFont(); //解除安裝字型
if (Dis_Count >= 5){ //總共顯示五條資訊
Dis_Count = 0; //回第一個
}
else{
Dis_Count += 1; //準備切換到下一個
}
//Serial.println(Dis_Count);
}
LastTime1 = now1;
}
}
void Dis_Scroll(int pos){ //字型滾動
clkb.createSprite(148, 24); //建立Sprite，先在Sprite記憶體中畫點，然後将記憶體中的點一次推向螢幕，這樣重新整理比較快
clkb.fillSprite(bgColor); //背景色
clkb.setTextWrap(false);
clkb.setTextDatum(CC_DATUM); //顯示對齊方式
clkb.setTextColor(TFT_BLACK, bgColor); //文本的前景色和背景色
clkb.drawString(scrollText[Dis_Count],74,pos+12);//打顯示内容
clkb.pushSprite(2,4); //Sprite中内容一次推向螢幕
clkb.deleteSprite(); //删除Sprite
}
void imgAnim(){
int x=80,y=94,dt=30; //瘦子版dt=10毫秒 胖子30較為合适
TJpgDec.drawJpg(x,y,i0, sizeof(i0)); //打一張圖檔延時一段時間，達到動畫效果
delay(dt);
TJpgDec.drawJpg(x,y,i1, sizeof(i1));
delay(dt);
TJpgDec.drawJpg(x,y,i2, sizeof(i2));
delay(dt);
TJpgDec.drawJpg(x,y,i3, sizeof(i3));
delay(dt);
TJpgDec.drawJpg(x,y,i4, sizeof(i4));
delay(dt);
TJpgDec.drawJpg(x,y,i5, sizeof(i5));
delay(dt);
TJpgDec.drawJpg(x,y,i6, sizeof(i6));
delay(dt);
TJpgDec.drawJpg(x,y,i7, sizeof(i7));
delay(dt);
TJpgDec.drawJpg(x,y,i8, sizeof(i8));
delay(dt);
TJpgDec.drawJpg(x,y,i9, sizeof(i9));
delay(dt);
}
void setup()
{
Serial.begin(115200); //初始化序列槽
Serial.println(); //列印回車換行
tft.init(); //TFT初始化
tft.setRotation(0); //旋轉角度0-3
tft.fillScreen(0x0000); //清屏
tft.setTextColor(TFT_BLACK, bgColor); //設定字型顔色
connect_wifi(); //聯網處理
Serial.println("Starting UDP"); //連接配接時間伺服器
Udp.begin(localPort);
Serial.print("Local port: ");
Serial.println(Udp.localPort());
Serial.println("waiting for sync");
setSyncProvider(getNtpTime);
setSyncInterval(300);
TJpgDec.setJpgScale(1); //設定放大倍數
TJpgDec.setSwapBytes(true); //交換位元組
TJpgDec.setCallback(tft_output); //回調函數
TJpgDec.drawJpg(0,0,watchtop, sizeof(watchtop));//顯示頂部圖示 240*20
TJpgDec.drawJpg(0,220,watchbottom, sizeof(watchbottom));//顯示底部圖示 240*20
//繪制一個視窗
tft.setViewport(0, 20, 240, 200); //中間的顯示區域大小
tft.fillScreen(0x0000); //清屏
tft.fillRoundRect(0,0,240,200,5,bgColor); //實心圓角矩形
//tft.resetViewport();
//繪制線框
tft.drawFastHLine(0,34,240,TFT_BLACK); //這些坐标都是窗體内部坐标
tft.drawFastVLine(150,0,34,TFT_BLACK);
tft.drawFastHLine(0,166,240,TFT_BLACK);
tft.drawFastVLine(60,166,34,TFT_BLACK);
tft.drawFastVLine(160,166,34,TFT_BLACK);
getCityCode(); //通過IP位址擷取城市代碼
TJpgDec.drawJpg(161,171,temperature, sizeof(temperature));//溫度圖示
TJpgDec.drawJpg(159,130,humidity, sizeof(humidity)); //濕度圖示
}
void loop()
{
if (timeStatus() != timeNotSet){ //已經擷取到資料的話
if (now() != prevDisplay){ //如果本次資料和上次不一樣的話，重新整理
prevDisplay = now();
digitalClockDisplay();
}
}
if(millis() - LastTime2 > 600000){ //10分鐘更新一次天氣
LastTime2 = millis();
getCityWeater();
}
scrollBanner(); //天氣資料滾動顯示
imgAnim(); //太空人顯示
}
//-------------------------------------------------------------
#ifndef __MAIN_H__
#define __MAIN_H__
#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiUdp.h>
#include <ArduinoJson.h>
#include <TimeLib.h>
#include <TFT_eSPI.h>
#include <SPI.h>
#include <TJpg_Decoder.h>
#include "font/ZdyLwFont_20.h" //字型頭檔案
#include "font/FxLED_32.h"
#include "img/pangzi/i0.h" //太空人圖檔
#include "img/pangzi/i1.h"
#include "img/pangzi/i2.h"
#include "img/pangzi/i3.h"
#include "img/pangzi/i4.h"
#include "img/pangzi/i5.h"
#include "img/pangzi/i6.h"
#include "img/pangzi/i7.h"
#include "img/pangzi/i8.h"
#include "img/pangzi/i9.h"
#include "img/temperature.h" //溫度圖示
#include "img/humidity.h" //濕度圖示
#include "img/watch_top.h" //頂部圖示
#include "img/watch_bottom.h" //底部圖示
TFT_eSPI tft = TFT_eSPI(); //引腳請自行配置tft_espi庫中的 User_Setup.h檔案
TFT_eSprite clk = TFT_eSprite(&tft);
TFT_eSprite clkb = TFT_eSprite(&tft); //字型滾動用
const char* WIFI_SSID = "YiMing3864"; //家裡無線路由器的賬号和密碼，----------要修改成自己的----------，引号不要去掉
const char* WIFI_PASSWORD = "wj2313464349";
HTTPClient httpClient; //建立 HTTPClient 對象
uint8_t loadNum = 6; //開機啟動進度條的起始位置
uint16_t bgColor = 0xFFFF; //背景顔色
String cityCode = "101010100"; //寶雞 //天氣城市代碼
uint8_t Dis_Count = 0; //滾動顯示内容計數
String scrollText[6]; //滾動顯示的資料緩沖區
//---------------------NTP相關參數---------------------
static const char ntpServerName[] = "ntp1.aliyun.com"; //NTP伺服器
const int timeZone = 8; //時區，東八區為中原標準時間
WiFiUDP Udp;
unsigned int localPort = 8888; //連接配接時間伺服器的本地端口号
time_t prevDisplay = 0; //上一次擷取到的時間
const int NTP_PACKET_SIZE = 48; //NTP發送資料包長度
byte packetBuffer[NTP_PACKET_SIZE]; //NTP資料包緩沖區
//---------------------Time 相關參數---------------------
int Led_Flag = HIGH; //預設目前滅燈
bool Led_State = false; //燈狀态
unsigned long now1; //輪流滾動時間計時
unsigned long LastTime1 = 0;
unsigned long now2; //定時擷取天氣
unsigned long LastTime2 = 0;
unsigned long now3;
unsigned long LastTime3 = 0; //
time_t getNtpTime();
void digitalClockDisplay();
void printDigits(int digits);
String num2str(int digits);
void sendNTPpacket(IPAddress &address);
#endif
![mac歌曲傳到iphone_如何在iPhone，iPad，Mac或Apple TV上檢視歌曲歌詞[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)