esp-01s在arduino中的开发（二）

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>


#include "SSD1306Wire.h"
#include "OLEDDisplayUi.h"

#include "WeatherStationImages.h"


const char* WIFI_SSID = "zwl-plus";
const char* WIFI_PWD = "8863855444";

const int I2C_DISPLAY_ADDRESS=0x3c;
#if defined(ESP8266)
const int SDA_PIN = 0;
const int SCL_PIN = 2;
#endif


SSD1306Wire display(I2C_DISPLAY_ADDRESS, SDA_PIN, SCL_PIN);
OLEDDisplayUi   ui( &display );

void drawFrame1(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y);
void drawFrame2(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y);
void drawFrame3(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y);
void drawFrame4(OLEDDisplay *display, OLEDDisplayUiState* state);
//添加框架
//此数组保留指向所有帧的函数指针
//框架是从右向左滑动的单个视图
//FrameCallback frames[] = { drawDateTime, drawCurrentWeather, drawForecast };
FrameCallback frames[] = { drawFrame1, drawFrame2, drawFrame3 };
//页面数量
int numberOfFrames = 3;

//OverlayCallback overlays[] = { drawHeaderOverlay }; //覆盖回调函数
OverlayCallback overlays[] = { drawFrame4 }; //覆盖回调函数
int numberOfOverlays = 1;  //覆盖数


void drawFrame1(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {
  /* 绘制一个xbm图像 */
  /* 注意：所有坐标位置都需要相对于传入参数x和y绘制 */
//  display->drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_1);
  display->setFont(ArialMT_Plain_24);
  display->setTextAlignment(TEXT_ALIGN_LEFT);
  display->drawString(10, 18, "wait1");

}

void drawFrame2(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {
  /* 绘制一个xbm图像 */
  /* 注意：所有坐标位置都需要相对于传入参数x和y绘制 */
//  display->drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_4);
  display->setFont(ArialMT_Plain_24);
  display->setTextAlignment(TEXT_ALIGN_LEFT);
  display->drawString(10, 18, "wait2");
}

void drawFrame3(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {
  /* 绘制一个xbm图像 */
  /* 注意：所有坐标位置都需要相对于传入参数x和y绘制 */
//  display->drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_7);
  display->setFont(ArialMT_Plain_24);
  display->setTextAlignment(TEXT_ALIGN_LEFT);
  display->drawString(10, 18, "wait3");
}


void drawFrame4(OLEDDisplay *display, OLEDDisplayUiState* state) {
  /* 绘制一个xbm图像 */
  /* 注意：所有坐标位置都需要相对于传入参数x和y绘制 */
//  display->drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_5);
  display->setFont(ArialMT_Plain_24);
  display->setTextAlignment(TEXT_ALIGN_LEFT);
  display->drawString(10, 4, "wait4");
}



void setup(){
  Serial.begin(115200);
  Serial.println();
  Serial.println();

  //屏幕初始化
  display.init();
  display.clear();
  display.display();
  
  display.flipScreenVertically();//屏幕翻转
  display.setContrast(255);//屏幕亮度


  //用固定密码连接，Web配网请注释
  wificonnect();

  //Web配网，密码直连请注释
  //webconnect();


  ui.setTargetFPS(30);//刷新频率

  ui.setActiveSymbol(activeSymbole); //设置活动符号
  ui.setInactiveSymbol(inactiveSymbole); //设置非活动符号

  // 符号位置
  // 你可以把这个改成TOP, LEFT, BOTTOM, RIGHT
  ui.setIndicatorPosition(BOTTOM);


   // 定义第一帧在栏中的位置
  ui.setIndicatorDirection(LEFT_RIGHT);

  // 屏幕切换方向
  // 您可以更改使用的屏幕切换方向 SLIDE_LEFT, SLIDE_RIGHT, SLIDE_TOP, SLIDE_DOWN
  ui.setFrameAnimation(SLIDE_LEFT);

  ui.setFrames(frames, numberOfFrames); // 设置框架
  ui.setTimePerFrame(5000); //设置切换时间
  
  ui.setOverlays(overlays, numberOfOverlays); //设置覆盖

  // UI负责初始化显示
  ui.init();
  display.flipScreenVertically(); //屏幕反转

  
}

void loop(){  
    int remainingTimeBudget = ui.update();

  if (remainingTimeBudget > 0) {
    // 我们可以在这剩余的时间做一些事情，但是如果时间不够，就不要做任何事情了
    delay(remainingTimeBudget);
    Serial.println(remainingTimeBudget);
  }

  /* LED状态取反 */
  digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));
}



  //用固定密码连接，Web配网请注释
void wificonnect(){
  WiFi.begin(WIFI_SSID, WIFI_PWD);
  while(WiFi.status() != WL_CONNECTED){
    Serial.print('.');
    delay(80);
    display.clear();
    display.drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_1);
    display.display();
    delay(80);
    display.clear();
    display.drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_2);
    display.display();
    delay(80);
    display.clear();
    display.drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_3);
    display.display();
    delay(80);
    display.clear();
    display.drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_4);
    display.display();
    delay(80);
    display.clear();
    display.drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_5);
    display.display();
    delay(80);
    display.clear();
    display.drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_6);
    display.display();
    delay(80);
    display.clear();
    display.drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_7);
    display.display();
    delay(80);
    display.clear();
    display.drawXbm(34, 0, bili_Logo_width, bili_Logo_height, bili_Logo_8);
    display.display();
    delay(80);
  }
  Serial.println("");
  delay(500);
}



// Web配网，密码直连将其注释
void webconnect(){ 
  display.clear();
  display.drawXbm(0, 0, 128, 64, bilibili); //显示哔哩哔哩
  display.display();
}

一、调试wificonnect，动画效果（WeatherStationImages.h图像数据）

 

二、加入ui显示控制测试

三、写覆盖回调函数，覆盖界面效果

四、写框架函数，frame1界面效果