在我經(jīng)歷的IoT項(xiàng)目中呐萌，上圖中的這個(gè)屏是我最喜歡的一種了弊予，接過顯示屏的都該對它們各種復(fù)雜的接線感到崩潰吧翼岁，由其是并行式的屏幕。這個(gè)OLED冷光屏( 型號 SSD1306 )卻是個(gè)例外寿桨，它有I2C和SPI兩種接口這就意味著我們只要接很少的線就能將它給驅(qū)動(dòng)起來愈诚。
不要因?yàn)檫@個(gè)屏幕只有一寸不到的面積就認(rèn)為它只能顯示很少的內(nèi)容，它的驅(qū)動(dòng)可是可以支持編寫出多屏滑動(dòng)界面的牛隅，這樣就可以極大地?cái)U(kuò)充了顯示空間。它的成本也就20來塊錢左右酌泰，可以說是小型IoT設(shè)備的首選級顯示模塊了媒佣。
接下來，我就簡單介紹一下如何在ESP8266中來使用它吧陵刹。
可支持 ESP8266和ESP32的原驅(qū)動(dòng)可以到Github下載
OLED 128x64 SSD130b
安裝驅(qū)動(dòng)
首先要為項(xiàng)目安裝SSD1306的驅(qū)動(dòng)庫默伍，在項(xiàng)目目錄下的命令行內(nèi)運(yùn)行的以下指令：
$ pio lib install 562
我是用的是PlatformIO，如果使用Arduino IDE 可以到庫管理器內(nèi)安裝SSD1306:
線路
我的屏是I2C版本的，具體連接方法如下:
NodeMCU_I2C_OLED
固件
首先,由于這個(gè)板子有I2C和SPI兩個(gè)版本也糊，所以在實(shí)例化時(shí)有一點(diǎn)區(qū)別：
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 屏幕芯片的基本驅(qū)動(dòng)炼蹦，用于直接在屏幕的指定點(diǎn)上直接繪制圖案或文字 -
OLEDDisplayUi.h- OLED 屏的高級圖型繪制庫，提供圖型框架狸剃、覆蓋層掐隐、動(dòng)畫等的高級圖型繪制功能，簡化OLED的圖形操作钞馁。
流程:
- 定義
display實(shí)例SSD1306 display(I2C_DISPLAY_ADDRESS, SDA_PIN, SCL_PIN); - 定義
ui實(shí)例OLEDDisplayUi ui( &display ); - 定義
FrameCallback frame圖形繪制回調(diào)函數(shù)數(shù)組 - 定義 各個(gè)圖形框架 繪制函數(shù)
- 定義
OverlayCallback overlays數(shù)組 - 實(shí)現(xiàn) Overlay 回調(diào)函數(shù)
- 初始化OLED (
ui) - 在
loop函數(shù)中調(diào)用ui.update()進(jìn)行屏幕刷新
#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網(wǎng)絡(luò) SSID";
const char* WIFI_PWD = "WIFI網(wǎng)絡(luò)密碼";
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);
}
}
