【零知ESP8266教程】快速入门21 世界时钟demo

roc2

【零知ESP8266教程】快速入门21 世界时钟demo [复制链接]

上次分享了一个本地时钟，小伙伴觉得不fashion，所以思前想后，做一个世界时钟，来撑撑场面，也算是一个小拓展。这次，我们一起制作世界时钟！
一、硬件
电脑，windows系统
零知ESP8266开发板
OLED SSD1306模块
micro-usb线
杜邦线若干
二、连线

三、软件库的查找安装
（1）查找：可以在零知实验室查看“无线”下载安装，也可在github查找安装。
（亦可评论留言，私发给你）

OLED和WeatherStation

（2）安装：可以在零知实验室搜索：本地库，即可出现安装教程。
（3）安装完成后，打开零知开源软件，选择对应的开发板，如图：

（4）我们新建工程，烧写以下代码：

濠电姷鏁告慨鐑藉极閸涘﹥鍙忛柣鎴ｆ閺嬩線鏌涘☉姗堟敾闁告瑥绻橀弻锝夊箣閿濆棭妫勯梺鍝勵儎缁舵岸寮诲☉妯锋婵鐗婇弫楣冩⒑閸涘﹦鎳冪紒缁樺姍濠€渚€姊虹粙璺ㄧ闁告艾顑囩槐鐐哄箣閿旂晫鍘遍梺闈浨归崕閬嶅焵椤掆偓濞尖€愁嚕婵犳碍鏅插璺猴功椤旀帡鎮楃憴鍕婵炲眰鍊濆畷顐⒚洪鍛嫼闂佸憡绻傜€氱兘宕曢幇鐗堢厽婵°倓绶″▓姗€鏌熼獮鍨仼闁宠棄顦垫慨鈧柣妯活問閸氬懘姊绘担铏瑰笡闁告梹娲熼、姘额敇閻愨晜鐏侀梺闈涚墕椤︿即鍩涢幋鐐电闁煎ジ顤傞崵娆愵殽閻愭惌娈滈柡宀€鍠栭幃鐑芥偋閸繃鐏庨柣搴㈩問閸犳牠鈥﹂悜钘夌畺闁靛繈鍊栭幆鐐烘煕閿旇寮跨紒杈ㄧ叀濮婄粯绗熼埀顒€岣胯閹广垽骞掗幘鏉戝伎闂佹眹鍨归幉锟犲磹閸洘鐓曟い鎰Т閸旀粓鏌嶉柨瀣伌闁哄本绋戦埞鎴﹀幢濡ゅ﹣鎮ｆ俊鐐€曠换鍫ュ磿閻㈢ǹ钃熸繛鎴炵懄閸庣喖鏌ㄥ┑鍡橆棡婵絽鐗撻幃妤€鈻撻崹顔界亪濡炪値鍙冮弨杈ㄧ┍婵犲洤绠瑰ù锝呮憸閸樻悂姊虹粙鎸庢拱闁活収鍠氶懞杈ㄧ鐎ｎ偀鎷绘繛杈剧到閹虫瑨銇愰幒鎴濈彉濡炪倖甯掗崐濠氭儗濞嗘挻鐓欓弶鍫熷劤閻︽粓鏌℃担绋库偓鍧楀蓟閵娾晜鍋嗛柛灞剧☉椤忥拷

登录后复制

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <Ticker.h>
#include <JsonListener.h>
#include <SSD1306Wire.h>
#include <OLEDDisplayUi.h>
#include <Wire.h>
#include <WorldClockClient.h>
#include "icons.h"
#include "fonts.h"
 
 
 
/***************************
 * Begin Settings
 **************************/
// WIFI
const char* WIFI_SSID = "xx";//在这里写入你的WIFI名字
const char* WIFI_PWD = "xx"; //写WIFI密码
 
// Setup
const int UPDATE_INTERVAL_SECS = 10 * 60; // Update every 10 minutes
 
// Display Settings
const int I2C_DISPLAY_ADDRESS = 0x3c;
const int SDA_PIN = D3; //
const int SDC_PIN = D4;
 
// TimeClient settings
 
 
// Initialize the oled display for address 0x3c
// sda-pin=14 and sdc-pin=12
 
SSD1306Wire  display(I2C_DISPLAY_ADDRESS, SDA_PIN, SDC_PIN);
OLEDDisplayUi ui     ( &display );
 
/***************************
 * End Settings
 **************************/
//String timeZoneIds [] = {"America/New_York", "Europe/London", "Europe/Paris", "Australia/Sydney", ""};
//WorldClockClient worldClockClient("de", "CH", "E, dd. MMMMM yyyy", 4, timeZoneIds);
//
String timeZoneIds [] = {"America/New_York", "Europe/London", "Europe/Paris", "Australia/Sydney", "Asia/Shanghai"};
WorldClockClient worldClockClient("zh", "CN", "E, dd. MMMMM yyyy", 5, timeZoneIds);
 
// flag changed in the ticker function every 10 minutes
bool readyForUpdate = false;
 
String lastUpdate = "--";
 
Ticker ticker;
 
 
void updateData(OLEDDisplay *display) {
  drawProgress(display, 50, "Updating Time...");
  worldClockClient.updateTime();
  drawProgress(display, 100, "Done...");
  readyForUpdate = false;
  delay(1000);
}
 
void drawProgress(OLEDDisplay *display, int percentage, String label) {
  display->clear();
  display->setTextAlignment(TEXT_ALIGN_CENTER);
  display->setFont(ArialMT_Plain_10);
  display->drawString(64, 10, label);
  display->drawProgressBar(10, 28, 108, 12, percentage);
  display->display();
}
 
void drawClock(OLEDDisplay *display, int x, int y, int timeZoneIndex, String city, const uint8_t* icon) {
  display->setTextAlignment(TEXT_ALIGN_LEFT);
  display->setFont(ArialMT_Plain_10);
  display->drawString(x + 60, y + 5, city);
  display->setFont(Crushed_Plain_36);
  display->drawXbm(x, y, 60, 60, icon);
  display->drawString(x + 60, y + 15, worldClockClient.getHours(timeZoneIndex) + ":" + worldClockClient.getMinutes(timeZoneIndex));
 
}
 
void drawFrame1(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {
  drawClock(display, x, y, 0, "New York",  new_york_bits); //纽约
}
 
void drawFrame2(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {
  drawClock(display, x, y, 1, "London",  london_bits); //伦敦
}
 
void drawFrame3(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {
  drawClock(display, x, y, 2, "Paris",  paris_bits);  //巴黎
}
 
void drawFrame4(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {
  drawClock(display, x, y, 3, "Sydney",  sydney_bits); //悉尼
}
 
void drawFrame5(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {
  drawClock(display, x, y, 4, "Beijing",  beijing_bits); //北京
}
 
void setReadyForWeatherUpdate() {
  Serial.println("Setting readyForUpdate to true");
  readyForUpdate = true;
}
 
// this array keeps function pointers to all frames
// frames are the single views that slide from right to left
FrameCallback frames[] = { drawFrame1, drawFrame2, drawFrame3, drawFrame4, drawFrame5};
int numberOfFrames = 5;
 
void setup() {
  Serial.begin(115200);
  Serial.println();
  Serial.println();
 
  // initialize dispaly
  display.init();
  display.clear();
  display.display();
 
  //display.flipScreenVertically();
  display.setFont(ArialMT_Plain_10);
  display.setTextAlignment(TEXT_ALIGN_CENTER);
  display.setContrast(255);
 
  WiFi.begin(WIFI_SSID, WIFI_PWD);
 
  int counter = 0;
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
    display.clear();
    display.drawString(64, 10, "Connecting to WiFi");
    display.drawXbm(46, 30, 8, 8, counter % 3 == 0 ? activeSymbol : inactiveSymbol);
    display.drawXbm(60, 30, 8, 8, counter % 3 == 1 ? activeSymbol : inactiveSymbol);
    display.drawXbm(74, 30, 8, 8, counter % 3 == 2 ? activeSymbol : inactiveSymbol);
    display.display();
 
    counter++;
  }
 
  ui.setTargetFPS(30);
 
  // You can change this to
  // TOP, LEFT, BOTTOM, RIGHT
  ui.setIndicatorPosition(BOTTOM);
 
  // Defines where the first frame is located in the bar.
  ui.setIndicatorDirection(LEFT_RIGHT);
 
  // You can change the transition that is used
  // SLIDE_LEFT, SLIDE_RIGHT, SLIDE_TOP, SLIDE_DOWN
  ui.setFrameAnimation(SLIDE_LEFT);
 
  // Add frames
  ui.setFrames(frames, numberOfFrames);
   
  ui.setTimePerFrame(2*1000); // Setup frame display time to 10 sec
 
  // Inital UI takes care of initalising the display too.
  ui.init();
 
  Serial.println("");
 
  updateData(&display);
 
  ticker.attach(UPDATE_INTERVAL_SECS, setReadyForWeatherUpdate);
 
}
 
void loop() {
 
  if (readyForUpdate && ui.getUiState()->frameState == FIXED) {
    updateData(&display);
  }
 
  int remainingTimeBudget = ui.update();
 
  if (remainingTimeBudget > 0) {
    // You can do some work here
    // Don't do stuff if you are below your
    // time budget.
    delay(remainingTimeBudget);
  }
 
}

（5）验证代码，然后上传

四、结果

同时OLED就可以显示世界时钟的效果：

也有视频效果，可以一览哦