在我经历的IoT项目中，上图中的这个屏是我最喜欢的一种了，接过显示屏的都该对它们各种复杂的接线感到崩溃吧，由其是并行式的屏幕。这个OLED冷光屏( 型号 SSD1306 )却是个例外，它有I2C和SPI两种接口这就意味着我们只要接很少的线就能将它给驱动起来。
不要因为这个屏幕只有一寸不到的面积就认为它只能显示很少的内容，它的驱动可是可以支持编写出多屏滑动界面的，这样就可以极大地扩充了显示空间。它的成本也就20来块钱左右，可以说是小型IoT设备的首选级显示模块了。
接下来，我就简单介绍一下如何在ESP8266中来使用它吧。
可支持 ESP8266和ESP32的原驱动可以到Github下载
OLED 128x64 SSD130b
安装驱动
首先要为项目安装SSD1306的驱动库，在项目目录下的命令行内运行的以下指令：
$ pio lib install 562
我是用的是PlatformIO，如果使用Arduino IDE 可以到库管理器内安装SSD1306:
线路
我的屏是I2C版本的，具体连接方法如下:
NodeMCU_I2C_OLED
固件
首先,由于这个板子有I2C和SPI两个版本，所以在实例化时有一点区别：
I2C
#include <Wire.h>
#include "SSD1306.h"
SSD1306 display(ADDRESS, SDA, SDC);
** SPI **
SPI
#include <SPI.h>
#include "SSD1306Spi.h"
SSD1306Spi display(RES, DC, CS);
库说明:
-
SSD1306.h- OLED 屏幕芯片的基本驱动，用于直接在屏幕的指定点上直接绘制图案或文字 -
OLEDDisplayUi.h- OLED 屏的高级图型绘制库，提供图型框架、覆盖层、动画等的高级图型绘制功能，简化OLED的图形操作。
流程:
- 定义
display实例SSD1306 display(I2C_DISPLAY_ADDRESS, SDA_PIN, SCL_PIN); - 定义
ui实例OLEDDisplayUi ui( &display ); - 定义
FrameCallback frame图形绘制回调函数数组 - 定义 各个图形框架 绘制函数
- 定义
OverlayCallback overlays数组 - 实现 Overlay 回调函数
- 初始化OLED (
ui) - 在
loop函数中调用ui.update()进行屏幕刷新
#include <ESP8266WiFi.h>
#include "SSD1306.h"
#include "OLEDDisplayUi.h"
#include "Wire.h"
#include "TimeClient.h"
#include <Images.h>
#include <Fonts.h>
const int I2C_DISPLAY_ADDRESS = 0x3c;
const int SDA_PIN = D2;
const int SCL_PIN = D1;
const float UTC_OFFSET = 8;
// WIFI
const char* WIFI_SSID = "你的WIFI网络 SSID";
const char* WIFI_PWD = "WIFI网络密码";
void drawProgress(OLEDDisplay *display, int percentage, String label);
void drawDateTime(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y);
// void drawCurrentWeather(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y);
void drawHeaderOverlay(OLEDDisplay *display, OLEDDisplayUiState* state);
void drawDHT(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y);
SSD1306 display(I2C_DISPLAY_ADDRESS, SDA_PIN, SCL_PIN);
OLEDDisplayUi ui( &display );
TimeClient timeClient(UTC_OFFSET);
String temp = "22";
String hum = "66";
// Add frames
// this array keeps function pointers to all frames
// frames are the single views that slide from right to left
FrameCallback frames[] = { drawDHT };
int numberOfFrames = 1;
OverlayCallback overlays[] = { drawHeaderOverlay };
int numberOfOverlays = 1;
void drawDateTime(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {
display->setTextAlignment(TEXT_ALIGN_CENTER);
display->setFont(ArialMT_Plain_10);
String date = "11/3/2017"; //wunderground.getDate();
int textWidth = display->getStringWidth(date);
display->drawString(64 + x, 5 + y, date);
display->setFont(ArialMT_Plain_24);
String time = timeClient.getFormattedTime();
textWidth = display->getStringWidth(time);
display->drawString(64 + x, 15 + y, time);
display->setTextAlignment(TEXT_ALIGN_LEFT);
}
void drawDHT(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {
display->setTextAlignment(TEXT_ALIGN_CENTER);
display->setFont(ArialMT_Plain_16);
display->drawString(64 + x, 5 + y, "50.5");
display->setFont(ArialMT_Plain_10);
display->drawString(64 + x, 30 + y, "ppm");
// display->drawString(30 + x, 15 + y, temp + "°C");
//display->drawString(90 + x, 15 + y, hum + "%");
}
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(2, 28, 124, 10, percentage);
display->display();
}
void drawHeaderOverlay(OLEDDisplay *display, OLEDDisplayUiState* state) {
display->setColor(WHITE);
display->setFont(ArialMT_Plain_10);
String time = timeClient.getFormattedTime().substring(0, 5);
Serial.println(time);
display->setTextAlignment(TEXT_ALIGN_LEFT);
display->drawString(0, 54, "17:20");
display->setTextAlignment(TEXT_ALIGN_RIGHT);
String temp = "20°C 70%";
display->drawString(128, 54, temp);
display->drawHorizontalLine(0, 52, 128);
}
void updateData(OLEDDisplay *display) {
drawProgress(display, 10, "Updating time...");
//timeClient.updateTime();
delay(1000);
drawProgress(display, 30, "Updating conditions...");
// wunderground.updateConditions(WUNDERGRROUND_API_KEY, WUNDERGRROUND_LANGUAGE, WUNDERGROUND_COUNTRY, WUNDERGROUND_CITY);
delay(1000);
drawProgress(display, 50, "Updating forecasts...");
// wunderground.updateForecast(WUNDERGRROUND_API_KEY, WUNDERGRROUND_LANGUAGE, WUNDERGROUND_COUNTRY, WUNDERGROUND_CITY);
delay(1000);
drawProgress(display, 80, "Updating thingspeak...");
// thingspeak.getLastChannelItem(THINGSPEAK_CHANNEL_ID, THINGSPEAK_API_READ_KEY);
// lastUpdate = timeClient.getFormattedTime();
// readyForWeatherUpdate = false;
delay(1000);
drawProgress(display, 100, "Done...");
delay(1000);
}
void connectWiFi() {
// 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(300);
Serial.print(".");
display.clear();
display.drawXbm(34, 2, WiFi_Logo_width, WiFi_Logo_height, WiFi_Logo_bits);
display.drawString(64, WiFi_Logo_height+5, "Connecting to WiFi");
display.drawXbm(46, WiFi_Logo_height+20, 8, 8, counter % 3 == 0 ? activeSymbol : inactiveSymbol);
display.drawXbm(60, WiFi_Logo_height+20, 8, 8, counter % 3 == 1 ? activeSymbol : inactiveSymbol);
display.drawXbm(74, WiFi_Logo_height+20, 8, 8, counter % 3 == 2 ? activeSymbol : inactiveSymbol);
display.display();
counter++;
}
}
void setup() {
Serial.begin(115200);
Serial.println();
Serial.println();
connectWiFi();
ui.setTargetFPS(60);
// Customize the active and inactive symbol
//ui.setActiveSymbol(activeSymbol);
//ui.setInactiveSymbol(inactiveSymbol);
// 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);
ui.disableAllIndicators();
// You can change the transition that is used
// SLIDE_LEFT, SLIDE_RIGHT, SLIDE_UP, SLIDE_DOWN
//ui.setFrameAnimation(SLIDE_LEFT);
// Add frames
ui.setFrames(frames, numberOfFrames);
// Add overlays
ui.setOverlays(overlays, numberOfOverlays);
ui.disableAutoTransition();
// Initialising the UI will init the display too.
ui.init();
display.flipScreenVertically();
}
void loop() {
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);
}
}
