IOT物聯網之ESP8266的世界: Adafruit SSD1306 OLED內建範例顯示實習

四．10-1　Adafruit SSD1306 OLED內建範例顯示實習

Adafruit這家公司在Arduino界是一家很有名的第三方供應公司，他們設計了不少好用的Arduin周邊模組，當然也提供了不少功能強大的函式庫，Arduino 這個環境最大的優點，就是元件周邊或是驅動的軟體及函式庫等，都有很大的共通性，因此許多的軟硬體只要稍作修改，就可以互相通用，這就讓業餘界的玩家或創客們增添了不少的方便。

要使用Adafrut內建的OLED顯示器範例程式，第一件事要做的事當然就是先掛上它們的函式庫，首先在Arduino IDE中點選「草稿碼」🡪「匯入程式庫」🡪「管理程式庫」一直到開啟下圖的「程式庫管理員」為止。接著在標記１的地方輸入”SSD1306”這個搜尋特徵字串，此時應該很容易就可以在下方的程式庫視窗中看到標記２的『Adafruit SSD1306』選項，當然一般我們都會選擇最新版的程式碼來安裝！

圖４、２１在Arduino IDE中新增Adafruit SSD1306 OLED函式庫示意圖

裝好Adafruit的SSD1306 OLED函式庫之後，我們就可以開始打開他們所提供的範例程式，如下圖所示，點選「檔案」 🡪「範例」後，先在右邊的範例視窗中找到”Adafruit SSD1306”(標記3)這個選項，然後將滑鼠移到右邊的”>”位置，就會有另外一個視窗展開來，接著選取”ssd1306_128X64_i2c” (標記4)這個範例程式，就可以在Arduino IDE中看到程式的完整內容了。

圖４、２２ Adafruit SSD1306 OLED函式庫範例選取示意圖

◎功能與動作說明：

在Adafruit的”ssd1306_128X64_i2c”這個範例程式中，示範了非常多的功能與動作，其中包括：

顯示AdaFruit公司的Logo
畫單一點(pixel)
連續畫出多重的直線(line)
連續畫出不同大小的矩形(rectangle)外框
連續畫出不同大小的填滿矩形(filled rectangle)
連續畫出不同大小的圓形(circle)外框
連續畫出不同大小的填滿圓形(filled circles )
連續畫出不同大小的圓角矩形(rounded rectangle)外框
連續畫出不同大小的填滿圓角矩形(filled rounded rectangle)
連續畫出不同大小的三角形(triangles)外框
連續畫出不同大小的填滿三角形(filled triangles)
顯示內建的字元集合(characters)
顯示顯示不同大小的字元外觀(stylized characters)
顯示字元在螢幕上上、下、左、右及斜方向等不同的捲動(scrolling)方式
顯示bitmap型態的圖案(五角星)，一次正常，一次反白
顯示bitmap圖案(五角星)動畫

一次示範那麼多種功能與動作看起來很嚇人吧！所以這個範例程式光程式碼就差不多快要350行，不過實際跑起來大概不用兩分鐘，就執行到最後一個動作了。

◎電路圖：

圖４、２３ WeMos D1使用I2C介面與OLED顯示器麵包板接線及電路圖

其實不管使那一種單晶片模組板，都可以和這塊SSD1306 OLED顯示器一起使用，只要它有提供I2C這個通信介面；在此會使用這塊WeMos D1，只是讓大家有一個不同的選擇而已。在WeMos D1跟NodeMCU這兩塊常見的ESP8266模組板上，I2C通信介面的「SCL」和「SDA」這兩隻腳都是接在D1(SCL)與D2(SDA)上，不過在WeMos D1 這塊跟Arduino Uno很類似的模組板，共內建了三組的I2C(並接)接腳，如果你的電路會用到多個I2C通信介面的零件或感測器的話，會讓你很方便接線。

◎ 程式列表與說明：

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
#define OLED_RESET -1 // Reset pin # (or -1 if sharing Arduino reset pin)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
#define NUMFLAKES 10 // Number of snowflakes in the animation example
#define LOGO_HEIGHT 16
#define LOGO_WIDTH 16
static const unsigned char PROGMEM logo_bmp[] =
{ B00000000, B11000000,
B00000001, B11000000,
B00000001, B11000000,
B00000011, B11100000,
B11110011, B11100000,
B11111110, B11111000,
B01111110, B11111111,
B00110011, B10011111,
B00011111, B11111100,
B00001101, B01110000,
B00011011, B10100000,
B00111111, B11100000,
B00111111, B11110000,
B01111100, B11110000,
B01110000, B01110000,
B00000000, B00110000 };
void setup() {
Serial.begin(115200);
// SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3c)) { // Address 0x3D for 128x64
Serial.println(F("SSD1306 allocation failed"));
for(;;); // Don't proceed, loop forever
}
// Show initial display buffer contents on the screen --
// the library initializes this with an Adafruit splash screen.
display.display();
delay(2000); // Pause for 2 seconds
// Clear the buffer
display.clearDisplay();
// Draw a single pixel in white
display.drawPixel(10, 10, SSD1306_WHITE);
// Show the display buffer on the screen. You MUST call display() after
// drawing commands to make them visible on screen!
display.display();
delay(2000);
testdrawline(); // Draw many lines
testdrawrect(); // Draw rectangles (outlines)
testfillrect(); // Draw rectangles (filled)
testdrawcircle(); // Draw circles (outlines)
testfillcircle(); // Draw circles (filled)
testdrawroundrect(); // Draw rounded rectangles (outlines)
testfillroundrect(); // Draw rounded rectangles (filled)
testdrawtriangle(); // Draw triangles (outlines)
testfilltriangle(); // Draw triangles (filled)
testdrawchar(); // Draw characters of the default font
testdrawstyles(); // Draw 'stylized' characters
testscrolltext(); // Draw scrolling text
testdrawbitmap(); // Draw a small bitmap image
// Invert and restore display, pausing in-between
display.invertDisplay(true);
delay(1000);
display.invertDisplay(false);
delay(1000);
testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps
}
void loop() {
}
void testdrawline() {
int16_t i;
display.clearDisplay(); // Clear display buffer
for(i=0; i<display.width(); i+=4) {
display.drawLine(0, 0, i, display.height()-1, SSD1306_WHITE);
display.display(); // Update screen with each newly-drawn line
delay(1);
}
for(i=0; i<display.height(); i+=4) {
display.drawLine(0, 0, display.width()-1, i, SSD1306_WHITE);
display.display();
delay(1);
}
delay(250);
display.clearDisplay();
for(i=0; i<display.width(); i+=4) {
display.drawLine(0, display.height()-1, i, 0, SSD1306_WHITE);
display.display();
delay(1);
}
for(i=display.height()-1; i>=0; i-=4) {
display.drawLine(0, display.height()-1, display.width()-1, i, SSD1306_WHITE);
display.display();
delay(1);
}
delay(250);
display.clearDisplay();
for(i=display.width()-1; i>=0; i-=4) {
display.drawLine(display.width()-1, display.height()-1, i, 0, SSD1306_WHITE);
display.display();
delay(1);
}
for(i=display.height()-1; i>=0; i-=4) {
display.drawLine(display.width()-1, display.height()-1, 0, i, SSD1306_WHITE);
display.display();
delay(1);
}
delay(250);
display.clearDisplay();
for(i=0; i<display.height(); i+=4) {
display.drawLine(display.width()-1, 0, 0, i, SSD1306_WHITE);
display.display();
delay(1);
}
for(i=0; i<display.width(); i+=4) {
display.drawLine(display.width()-1, 0, i, display.height()-1, SSD1306_WHITE);
display.display();
delay(1);
}
delay(2000); // Pause for 2 seconds
}
void testdrawrect(void) {
display.clearDisplay();
for(int16_t i=0; i<display.height()/2; i+=2) {
display.drawRect(i, i, display.width()-2*i, display.height()-2*i, SSD1306_WHITE);
display.display(); // Update screen with each newly-drawn rectangle
delay(1);
}
delay(2000);
}
void testfillrect(void) {
display.clearDisplay();
for(int16_t i=0; i<display.height()/2; i+=3) {
// The INVERSE color is used so rectangles alternate white/black
display.fillRect(i, i, display.width()-i*2, display.height()-i*2, SSD1306_INVERSE);
display.display(); // Update screen with each newly-drawn rectangle
delay(1);
}
delay(2000);
}
void testdrawcircle(void) {
display.clearDisplay();
for(int16_t i=0; i<max(display.width(),display.height())/2; i+=2) {
display.drawCircle(display.width()/2, display.height()/2, i, SSD1306_WHITE);
display.display();
delay(1);
}
delay(2000);
}
void testfillcircle(void) {
display.clearDisplay();
for(int16_t i=max(display.width(),display.height())/2; i>0; i-=3) {
// The INVERSE color is used so circles alternate white/black
display.fillCircle(display.width() / 2, display.height() / 2, i, SSD1306_INVERSE);
display.display(); // Update screen with each newly-drawn circle
delay(1);
}
delay(2000);
}
void testdrawroundrect(void) {
display.clearDisplay();
for(int16_t i=0; i<display.height()/2-2; i+=2) {
display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i,
display.height()/4, SSD1306_WHITE);
display.display();
delay(1);
}
delay(2000);
}
void testfillroundrect(void) {
display.clearDisplay();
for(int16_t i=0; i<display.height()/2-2; i+=2) {
// The INVERSE color is used so round-rects alternate white/black
display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i,
display.height()/4, SSD1306_INVERSE);
display.display();
delay(1);
}
delay(2000);
}
void testdrawtriangle(void) {
display.clearDisplay();
for(int16_t i=0; i<max(display.width(),display.height())/2; i+=5) {
display.drawTriangle(
display.width()/2 , display.height()/2-i,
display.width()/2-i, display.height()/2+i,
display.width()/2+i, display.height()/2+i, SSD1306_WHITE);
display.display();
delay(1);
}
delay(2000);
}
void testfilltriangle(void) {
display.clearDisplay();
for(int16_t i=max(display.width(),display.height())/2; i>0; i-=5) {
// The INVERSE color is used so triangles alternate white/black
display.fillTriangle(
display.width()/2 , display.height()/2-i,
display.width()/2-i, display.height()/2+i,
display.width()/2+i, display.height()/2+i, SSD1306_INVERSE);
display.display();
delay(1);
}
delay(2000);
}
void testdrawchar(void) {
display.clearDisplay();
display.setTextSize(1); // Normal 1:1 pixel scale
display.setTextColor(SSD1306_WHITE); // Draw white text
display.setCursor(0, 0); // Start at top-left corner
display.cp437(true); // Use full 256 char 'Code Page 437' font
// Not all the characters will fit on the display. This is normal.
// Library will draw what it can and the rest will be clipped.
for(int16_t i=0; i<256; i++) {
if(i == '\n') display.write(' ');
else display.write(i);
}
display.display();
delay(2000);
}
void testdrawstyles(void) {
display.clearDisplay();
display.setTextSize(1); // Normal 1:1 pixel scale
display.setTextColor(SSD1306_WHITE); // Draw white text
display.setCursor(0,0); // Start at top-left corner
display.println(F("Hello, world!"));
display.setTextColor(SSD1306_BLACK, SSD1306_WHITE); // Draw 'inverse' text
display.println(3.141592);
display.setTextSize(2); // Draw 2X-scale text
display.setTextColor(SSD1306_WHITE);
display.print(F("0x")); display.println(0xDEADBEEF, HEX);
display.display();
delay(2000);
}
void testscrolltext(void) {
display.clearDisplay();
display.setTextSize(2); // Draw 2X-scale text
display.setTextColor(SSD1306_WHITE);
display.setCursor(10, 0);
display.println(F("scroll"));
display.display(); // Show initial text
delay(100);
// Scroll in various directions, pausing in-between:
display.startscrollright(0x00, 0x0F);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrollleft(0x00, 0x0F);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrolldiagright(0x00, 0x07);
delay(2000);
display.startscrolldiagleft(0x00, 0x07);
delay(2000);
display.stopscroll();
delay(1000);
}
void testdrawbitmap(void) {
display.clearDisplay();
display.drawBitmap(
(display.width() - LOGO_WIDTH ) / 2,
(display.height() - LOGO_HEIGHT) / 2,
logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);
display.display();
delay(1000);
}
#define XPOS 0 // Indexes into the 'icons' array in function below
#define YPOS 1
#define DELTAY 2
void testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {
int8_t f, icons[NUMFLAKES][3];
// Initialize 'snowflake' positions
for(f=0; f< NUMFLAKES; f++) {
icons[f][XPOS] = random(1 - LOGO_WIDTH, display.width());
icons[f][YPOS] = -LOGO_HEIGHT;
icons[f][DELTAY] = random(1, 6);
Serial.print(F("x: "));
Serial.print(icons[f][XPOS], DEC);
Serial.print(F(" y: "));
Serial.print(icons[f][YPOS], DEC);
Serial.print(F(" dy: "));
Serial.println(icons[f][DELTAY], DEC);
}
for(;;) { // Loop forever...
display.clearDisplay(); // Clear the display buffer
// Draw each snowflake:
for(f=0; f< NUMFLAKES; f++) {
display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, SSD1306_WHITE);
}
display.display(); // Show the display buffer on the screen
delay(200); // Pause for 1/10 second
// Then update coordinates of each flake...
for(f=0; f< NUMFLAKES; f++) {
icons[f][YPOS] += icons[f][DELTAY];
// If snowflake is off the bottom of the screen...
if (icons[f][YPOS] >= display.height()) {
// Reinitialize to a random position, just off the top
icons[f][XPOS] = random(1 - LOGO_WIDTH, display.width());
icons[f][YPOS] = -LOGO_HEIGHT;
icons[f][DELTAY] = random(1, 6);
}
}
}
}

程式名稱：ssd1306_128X64_i2c.ino

由於這個程式很長，而且是廠商的範例程式，因此在這裡只做一些簡單的說明，後面我們會將這些功能與動作分開後，再去做更多更詳細的示範與解說。

程式一開始先引入三個必須用到的函式庫：

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

第一個是使用I2C介面匯流排必須用到的函式庫，而第三個是Adafruit公司專門用於SSD1306上的函式庫，由於這種OLED顯示器不管要顯示文字或圖形，其實都是用繪圖的方式來完成的，因此還必須使用到它們繪圖專用函式庫🡪「Adafruit_GFX.h」。

接下來這兩行則是宣告這個SSD1306 OLED顯示器寬度和高度的像素數目值，在此寬度是128個像素，而高度為64個：

#define SCREEN_WIDTH 128 // OLED display width, in pixels

#define SCREEN_HEIGHT 64 // OLED display height, in pixels

由於SSD1306這個晶片本身有一個重置腳輸入，當使用SPI介面時必須指定Arduino板所使用的腳位，可是I2C介面沒有重置腳，因此就只能和Arduino板的預設腳共用，此時這個腳位的值就要設為”-1”以資區別！

#define OLED_RESET -1 // Reset pin # (or -1 if sharing Arduino reset pin)

在做完前面的宣告與定義之後，才能開始定義我們要使用的類別為『Adafruit_SSD1306』的物件變數(名稱為”display”)：

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

至於14~32行則是定義一個寬高都是16的點陣(bitmap)圖案，以做為最後一個動畫的範例之用。跟LCD顯示器一樣，在使用前都需要執行初始化的動作，下面這幾行就是在進行初始化，並測試是否成功？如果失敗，會把訊息顯示在電腦的監控視窗上，而且既然失敗了，後面的程式也不用再執行下去，程式就會被停在這裡不再動作！

如果大家注意一下「display.begin()」這個初始化指令的第二個參數，在這裏用的值是”0x3c”，而後面的註解說明卻寫”0x3D”！？所以會這樣是因為一般在市面上買到的這種I2C界面OLED顯示器所使用的硬體通信位址，除非是Adafruit原廠的(使用”0x3D”這個位址)，否則都是使用”0x3c”這個位址，這點還請大家注意。

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3c)) { // Address 0x3D for 128x64

Serial.println(F("SSD1306 allocation failed"));

for(;;); // Don't proceed, loop forever

}

一般在使用這類的SSD1306 OLED顯示器時不外三個步驟：

１、先在背景將顯示記憶體(GDDRAM)內容清除(即使用“.clearDisplay”這個方法)

２、將要顯示的結束處理好之後，載入顯示記憶體(GDDRAM)內

３、將處理好的內容從顯示記憶體(GDDRAM)上傳到OLED顯示器面板(即使用“.Display”這個方法)

下面這幾行程式的結構就在對應上面這三個步驟，而中間”…….”部份就是你要執行的動或是功能，也就是說每個結果的畫面，都必須在使用過“.Display”這個方法後，才會顯示在OLED顯示器的螢幕上。

// Clear the buffer

display.clearDisplay();

……………………………………..

………………………………………….

display.display();

delay(2000); // Pause for 2 seconds

如果我們完整檢視這個範例程式將會發現，前面提到的那些顯示與繪圖功能其實在初始化(setup())的地方就做完了！主迴圈(loop())程式部份則是空無一物，而這些動作都已經寫成副程式，因此在初始化這裏只是單純的呼叫它們而已所以才會顯得那麼精簡。

由於整個範例程式很大，如果全部都說明會佔很多的篇幅，所以在此僅就前面條列的16種動作所對應的程式碼或副程式名稱加以簡單的說明，而每一個由副程式所構成的動作，就請讀者自行參閱後面每個副程式的詳細內容。

顯示AdaFruit公司的Logo：

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3c)) {….}

不要懷疑筆者弄錯，當你使用Adafruit的函式庫，並開始對OLED顯示器進行初始化的動作時，就被它們置入性行銷了！要用人家的東西就得忍耐一下，如果你不接受後面也不用玩下去了，除非改用別人的函式庫，而別人的也不見得不會有。

畫單一點(pixel)：

display.drawPixel(10, 10, SSD1306_WHITE);

這是一個畫點的指令，會以螢幕的左上角當成(0,0)座標原點，位置為(10,10)的地方顯示一個顏色為” SSD1306_WHITE”(也就是白色)的點而已。

連續畫出多重的直線(line)：

testdrawline(); // Draw many lines

程式列表中84~138行的副程式「void testdrawline ()」。

連續畫出不同大小的矩形(rectangle)外框：

testdrawrect(); // Draw rectangles (outlines)

程式列表中140~149行的副程式「void testdrawrect ()」。

連續畫出不同大小的填滿矩形(filled rectangle)：

testfillrect(); // Draw rectangles (filled)

程式列表151~161行的副程式「void testfillrect ()」。

連續畫出不同大小的圓形(circle)外框：

testdrawcircle(); // Draw circles (outlines)

程式列表中163~172行的副程式「void testdrawcircle ()」。

連續畫出不同大小的填滿圓形(filled circles )：

testfillcircle(); // Draw circles (filled)

程式列表中174~183行的副程式「void testscrolltext()」。

連續畫出不同大小的圓角矩形(rounded rectangle)外框：

testdrawroundrect(); // Draw rounded rectangles (outlines)

程式列表中185~95行的副程式「void testdrawroundrect ()」。

連續畫出不同大小的填滿圓角矩形(filled rounded rectangle)：

testfillroundrect(); // Draw rounded rectangles (filled)

程式列表中197~208行的副程式「void testfillroundrect ()」。

連續畫出不同大小的三角形(triangles)外框：

testdrawtriangle(); // Draw triangles (outlines)

程式列表中210~222行的副程式「void testdrawtriangle ()」。

連續畫出不同大小的填滿三角形(filled triangles)：

testfilltriangle(); // Draw triangles (filled)

程式列表中224~237行的副程式「void testfilltriangle ()」。

顯示內建的字元集合(characters)：

testdrawchar(); // Draw characters of the default font

程式列表中239~255行的副程式「void testdrawchar ()」。

顯示顯示不同大小的字元外觀(stylized characters)：

testdrawstyles(); // Draw 'stylized' characters

程式列表中257~271行的副程式「void testscrolltext()」。

顯示字元在螢幕上上、下、左、右及斜方向等不同的捲動(scrolling)方式：

testscrolltext(); // Draw scrolling text

程式列表中273~297行的副程式「void testscrolltext()」。

顯示bitmap型態的圖案(五角星)，一次正常，一次反白：

testdrawbitmap(); // Draw a small bitmap image

// Invert and restore display, pausing in-between

display.invertDisplay(true);

delay(1000);

display.invertDisplay(false);

delay(1000);

這個動作主要是靠程式列表中299~308行的副程式「void testdrawbitmap();」這個副程式來實現，至於是否要讓整個畫面反白！則是用「display.invertDisplay(true)」這個指令來完成，括弧中的參數如果是”true”，會讓整個螢幕反白。

16. 顯示bitmap圖案(五角星)動畫：

testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps

程式列表中310~351行的副程式「void testanimate()」。

◎ 執行結果：

由於示範的動作很多，而且是連續作動，很難用圖片的方式將結果呈現出來，因此特別將整個執行的過程拍成了影片，請讀者自行到下列網址上觀看。

https://www.youtube.com/watch?v=P0TZg16atvM

IOT物聯網之ESP8266的世界

2020年6月11日星期四

Adafruit SSD1306 OLED內建範例顯示實習

沒有留言:

張貼留言

2020年6月11日 星期四

Adafruit SSD1306 OLED內建範例顯示實習

沒有留言:

張貼留言

2020年6月11日星期四