ESP8266+TFT1.44网络图形时钟

活不多说，直接上代码和效果图：

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <TFT_eSPI.h>
//图片解码库
#include <TJpg_Decoder.h>
#include "clockpic.h"//时钟圆盘图片
#include "kaiji.h"   //开机图片
#include<EEPROM.h>
const char *ssid = "xxxxx";    //你的网络名称
const char *password = "xxxxx"; //你的网络密码
TFT_eSPI tft = TFT_eSPI();
TFT_eSprite clk = TFT_eSprite(&tft);
uint32_t targetTime = 0;

int timeShi1;
int timeShi2;
int timeShi;
int timeFen1;
int timeFen2;
int timemiao1;
int timemiao2;
int shi;
int fen;
int miao;

//我直接把时针、分针、秒针的60个状态坐标算出来了，很简单EXCEL公式
int shiX[]={64,67,70,73,76,78,81,84,86,88,89,91,92,93,93,94,93,93,92,91,89,88,86,84,81,79,76,73,70,67,64,
60,57,54,51,49,46,43,41,39,38,36,35,34,34,34,34,34,35,36,38,39,41,43,46,48,51,54,57,60,};

int shiY[]={34,35,35,36,37,39,40,42,44,47,49,52,55,58,61,64,68,71,74,77,79,82,85,87,89,90,92,93,94,94,94,
94,94,93,92,90,89,87,85,82,80,77,74,71,68,65,61,58,55,52,50,47,44,42,40,39,37,36,35,35,};

int fenX[]={65,68,72,76,80,83,87,90,93,96,98,100,102,103,103,104,103,103,102,100,98,96,93,90,87,84,80,76,
72,68,64,59,55,51,47,44,40,37,34,31,29,27,25,24,24,24,24,24,25,27,29,31,34,37,40,43,47,51,55,59,};

int fenY[]={24,25,25,26,28,30,32,35,38,41,44,48,52,56,60,64,69,73,77,81,84,88,91,94,97,99,101,103,104,104,
104,104,104,103,101,99,97,94,91,88,85,81,77,73,69,65,60,56,52,48,45,41,38,35,32,30,28,26,25,25,};

int miaoX[]={64,69,74,80,85,89,94,98,102,106,109,111,113,114,115,116,115,114,113,111,109,106,102,98,94,90,
85,80,74,69,64,58,53,47,42,38,33,29,25,21,18,16,14,13,12,12,12,13,14,16,18,21,25,29,33,37,42,47,53,58,};

int miaoY[]={12,13,14,15,17,19,22,26,30,34,38,43,48,54,59,64,70,75,81,86,90,95,99,103,107,110,112,114,115,
116,116,116,115,114,112,110,107,103,99,95,91,86,81,75,70,65,59,54,48,43,39,34,30,26,22,19,17,15,14,13,};

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 to decode next block
  return 1;

}


void gettime()
{
    HTTPClient http; // 声明HTTPClient对象

  WiFiClient client;
  http.begin(client,"http://quan.suning.com/getSysTime.do"); // 准备启用连接

  int httpCode = http.GET(); // 发起GET请求

  if (httpCode > 0) // 如果状态码大于0说明请求过程无异常
  {
    if (httpCode == HTTP_CODE_OK) // 请求被服务器正常响应，等同于httpCode == 200
    {
      String payload = http.getString(); // 读取服务器返回的响应正文数据
      // 如果正文数据很多该方法会占用很大的内存
      Serial.println(payload);

      timeShi1=payload.charAt(54)-48;
      timeShi2=payload.charAt(55)-48;
      timeFen1=payload.charAt(56)-48;
      timeFen2=payload.charAt(57)-48;
      timemiao1=payload.charAt(58)-48;
      timemiao2=payload.charAt(59)-48;

      shi=timeShi1*10+timeShi2;
      fen=timeFen1*10+timeFen2;
      miao=timemiao1*10+timemiao2;
     if(shi>=12)
       {shi=shi-12;}
       timeShi=shi*5+fen/12;
      Serial.print("Now is Beijing Time:");
      Serial.print(timeShi1);
      Serial.print(timeShi2);
      Serial.print(":");
      Serial.print(timeFen1);
      Serial.println(timeFen2);
     
      }
  }
  else
  {
    Serial.printf("[HTTP] GET... failed, error: %s\n", http.errorToString(httpCode).c_str());
  }

  http.end(); // 结束当前连接
}


void setup()
{   tft.begin(); /* TFT init */
    //tft.invertDisplay(1);//反转所有显示颜色：1反转，0正常
    tft.fillScreen(0x0000);
    tft.setTextColor(TFT_WHITE, 0x0000);
         // 设置屏幕显示的旋转角度，参数为：0, 1, 2, 3
        // 分别代表 0°、90°、180°、270°
        //根据实际需要旋转
    tft.setRotation(4); 
          
    TJpgDec.setJpgScale(1);
    TJpgDec.setSwapBytes(true);
    TJpgDec.setCallback(tft_output);
    TJpgDec.drawJpg(2,2,kaiji,sizeof(kaiji)); 
    
  Serial.begin(115200);
  int huan=0;
 
  Serial.println();

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED)
  { 
  if(huan<20)
  {huan++;
    
    Serial.print(".");
    delay(50);
   
  }
  else
  {
    Serial.println(".");
    huan=0;
  }
  }
  Serial.println("WiFi connected!");

  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

    delay(1000);
    gettime(); //
    targetTime = millis();
    TJpgDec.drawJpg(2,2,clockpic,sizeof(clockpic)); //
    //tft.drawLine(64, 64, shiX[timeShi],shiY[timeShi],tft.color565(0, 0, 255));//
    //tft.drawLine(64, 64, fenX[fen],fenY[fen],tft.color565(255, 0, 255));}// 
    //tft.drawLine(64, 64, miaoX[miao],miaoY[miao],0xffff);
}


void loop()
{  
  if (targetTime + 1000 < millis())  //millis()+1000事先比millis()多1000ms，为否；直到millis()又累计1s，为真
  { //每秒
    targetTime = millis();
    miao++;
    if(miao>=60)
    {
      gettime();
     }
    tft.drawLine(64, 64, miaoX[miao-1],miaoY[miao-1], tft.color565(0, 0, 0));//clear pre sec
    TJpgDec.drawJpg(2,2,clockpic,sizeof(clockpic)); //
    tft.drawLine(64, 64, shiX[timeShi],shiY[timeShi],tft.color565(0, 0, 255));//
    tft.drawLine(64, 64, fenX[fen],fenY[fen],tft.color565(255, 0, 255));}// 
    tft.drawLine(64, 64, miaoX[miao],miaoY[miao],tft.color565(255, 255, 255));
   
 }

其中图片转出.h文件，使用这个网站

File to hex converter
http://tomeko.net/online_tools/file_to_hex.php?lang=en

复制后粘贴到大括号里就行了

#include <pgmspace.h>  // PROGMEM support header
const uint8_t  Lee[] PROGMEM={0xff，............}

图片最好小一点，我是用windows画图另存一下就变小了，1.44寸128*128的也就几K，大了好像没法显示。

上效果图：开机效果（本人行李，自恋一下）

其实还有改进的地方，本人纯属业余爱好，不喜勿喷。