顯示具有 [128 X 64 I2C介面OLED顯示器實習]OLED顯示照片與圖像顯示實習 標籤的文章。 顯示所有文章
顯示具有 [128 X 64 I2C介面OLED顯示器實習]OLED顯示照片與圖像顯示實習 標籤的文章。 顯示所有文章

2020年6月19日 星期五

OLED顯示照片與圖像顯示實習


四.10-4  OLED顯示照片與圖像顯示實習

本實習所使用的0.96" SSD1306 OLED顯示器,基本上就是一個繪圖型的顯示器,一定有許多人想在上面顯示一些有趣的圖案;在網路上有許多範例,甚至拿來顯示動畫乃至小遊戲。不過再複雜的畫面,其實只用到一種指令,也就是點矩陣的貼圖指令,在這個小單元中將會帶領大家實作這個貼圖的方法,弄懂了之後就可以擴充成更多更精采的應用了!


◎功能與動作說明:

在這個範例程式中,我們會令OLED顯示器交互的顯示下圖中的兩種畫面,第一個是Arduino家族的Logo,而第二個則是我們學校的Logo(在此置入性行銷一下^_^);由於這種的OLED顯示器只能顯示單一顏色,所以真正會顯示在螢幕上的是右邊的黑白圖案!


圖4、27-1 Arduino家族原始與單色Logo比較圖

圖4、27-2 本校原始與單色Logo比較圖


◎電路圖:

本次實習所使用之電路與前面幾個相同,學者可依自己的方便自行選用。


◎ 程式列表與說明:

 

  1. #include <Wire.h>

  2. #include <Adafruit_GFX.h>

  3. #include <Adafruit_SSD1306.h>

  4. #include "image.h"

  5. #include  "image2.h"

  6.  

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

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

  9.  

  10. Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

  11.  

  12. void setup() {

  13.   Serial.begin(115200);

  14.   Serial.println();

  15.   // initialize with the I2C addr 0x3C

  16.   if(display.begin(SSD1306_SWITCHCAPVCC, 0x3C))  // Address 0x3D for 128x64

  17.   Serial.println("SSD1036 OLED allocation Successed!");

  18.   else  {

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

  20.     for(;;);

  21.   }

  22.   delay(2000); // Pause for 2 seconds

  23.  

  24.   while(1) {

  25.     // // 清除顯示緩衝區:

  26.     display.clearDisplay();  

  27.     // 在螢幕上繪製出Arduino的Logo:

  28.     display.drawBitmap(0, 0, Arduino_Logo, 128, 64, WHITE);

  29.     display.display();

  30.     delay(3000);    

  31.   

  32.     // // 清除顯示緩衝區:

  33.     display.clearDisplay();  

  34.     // 在螢幕上繪製出明新的Logo:

  35.     display.drawBitmap(0, 0, Must_logo, 128, 64, WHITE);

  36.     display.display();

  37.     delay(3000);

  38.     for(int i=0;i<10;i++) {

  39.       display.clearDisplay();  

  40.     // 在螢幕上繪製出Arduino的Logo:

  41.       display.drawBitmap(0, 0, Arduino_Logo, 128, 64, WHITE);

  42.       display.display();

  43.       delay(200);    

  44.   

  45.     // // 清除顯示緩衝區:

  46.       display.clearDisplay();  

  47.     // 在螢幕上繪製出明新的Logo:

  48.       display.drawBitmap(0, 0, Must_logo, 128, 64, WHITE);

  49.       display.display();

  50.       delay(200);

  51.     }

  52.   }    

  53. }

  54.  

  55. void loop() {}

  56. // “mage.h”的內容 'Arduino_logo', 128x64px

  57. const unsigned char Arduino_Logo [] PROGMEM = {

  58.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  59.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  60.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  61.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  62.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  63.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  64.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  65.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  66.   0x00, 0x00, 0x00, 0x07, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 

  67.   0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0x80, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xf0, 0x1f, 0x00, 0x00, 

  68.   0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xfe, 0x1f, 0x00, 0x00, 

  69.   0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 

  70.   0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 

  71.   0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 

  72.   0x00, 0x00, 0x7f, 0xff, 0x80, 0x7f, 0xff, 0xc0, 0x1f, 0xff, 0xe0, 0x0f, 0xff, 0xf0, 0x00, 0x00, 

  73.   0x00, 0x00, 0xff, 0xf8, 0x00, 0x03, 0xff, 0xe0, 0x7f, 0xff, 0x00, 0x00, 0xff, 0xfc, 0x00, 0x00, 

  74.   0x00, 0x01, 0xff, 0xc0, 0x00, 0x00, 0xff, 0xf8, 0x7f, 0xfc, 0x00, 0x00, 0x1f, 0xfc, 0x00, 0x00, 

  75.   0x00, 0x03, 0xff, 0x80, 0x00, 0x00, 0x3f, 0xfc, 0xff, 0xf0, 0x00, 0x00, 0x0f, 0xfe, 0x00, 0x00, 

  76.   0x00, 0x03, 0xff, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x07, 0xff, 0x00, 0x00, 

  77.   0x00, 0x07, 0xfe, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0x80, 0x00, 0x00, 0x03, 0xff, 0x00, 0x00, 

  78.   0x00, 0x0f, 0xfc, 0x00, 0x00, 0x00, 0x07, 0xff, 0xfe, 0x00, 0x0f, 0xc0, 0x01, 0xff, 0x00, 0x00, 

  79.   0x00, 0x0f, 0xfc, 0x00, 0x00, 0x00, 0x01, 0xff, 0xfe, 0x00, 0x0f, 0xc0, 0x00, 0xff, 0x00, 0x00, 

  80.   0x00, 0x0f, 0xf8, 0x00, 0x00, 0x00, 0x01, 0xff, 0xfc, 0x00, 0x0f, 0xc0, 0x00, 0xff, 0xc0, 0x00, 

  81.   0x00, 0x0f, 0xf8, 0x03, 0xff, 0xf8, 0x00, 0xff, 0xf8, 0x01, 0xff, 0xfe, 0x00, 0xff, 0xc0, 0x00, 

  82.   0x00, 0x0f, 0xf8, 0x03, 0xff, 0xf8, 0x00, 0x3f, 0xf0, 0x01, 0xff, 0xfe, 0x00, 0xff, 0xc0, 0x00, 

  83.   0x00, 0x0f, 0xf8, 0x03, 0xff, 0xf8, 0x00, 0x7f, 0xf8, 0x01, 0xff, 0xfe, 0x00, 0xff, 0xc0, 0x00, 

  84.   0x00, 0x0f, 0xf8, 0x03, 0xff, 0xf8, 0x00, 0xff, 0xf8, 0x01, 0xff, 0xfe, 0x00, 0xff, 0xc0, 0x00, 

  85.   0x00, 0x0f, 0xf8, 0x00, 0x00, 0x00, 0x01, 0xff, 0xfc, 0x00, 0x0f, 0xc0, 0x00, 0xff, 0x80, 0x00, 

  86.   0x00, 0x0f, 0xfc, 0x00, 0x00, 0x00, 0x01, 0xff, 0xfe, 0x00, 0x0f, 0xc0, 0x00, 0xff, 0x00, 0x00, 

  87.   0x00, 0x07, 0xfe, 0x00, 0x00, 0x00, 0x07, 0xff, 0xff, 0x00, 0x0f, 0xc0, 0x01, 0xff, 0x00, 0x00, 

  88.   0x00, 0x07, 0xfe, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0x80, 0x00, 0x00, 0x03, 0xff, 0x00, 0x00, 

  89.   0x00, 0x03, 0xff, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x07, 0xfe, 0x00, 0x00, 

  90.   0x00, 0x03, 0xff, 0x80, 0x00, 0x00, 0x7f, 0xfc, 0xff, 0xf0, 0x00, 0x00, 0x0f, 0xfe, 0x00, 0x00, 

  91.   0x00, 0x01, 0xff, 0xe0, 0x00, 0x00, 0xff, 0xf8, 0x7f, 0xfc, 0x00, 0x00, 0x1f, 0xfc, 0x00, 0x00, 

  92.   0x00, 0x00, 0xff, 0xf8, 0x00, 0x07, 0xff, 0xe0, 0x3f, 0xff, 0x80, 0x00, 0xff, 0xf8, 0x00, 0x00, 

  93.   0x00, 0x00, 0x7f, 0xff, 0x80, 0x7f, 0xff, 0xc0, 0x1f, 0xff, 0xf8, 0x0f, 0xff, 0xf0, 0x00, 0x00, 

  94.   0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0x80, 0x07, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 

  95.   0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 

  96.   0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 

  97.   0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 

  98.   0x00, 0x00, 0x00, 0x1f, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 

  99.   0x00, 0x00, 0x00, 0x00, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xfc, 0x00, 0x00, 0x00, 0x00, 

  100.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  101.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  102.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  103.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  104.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 

  105.   0x00, 0x00, 0x3e, 0x07, 0xfe, 0x1f, 0xf0, 0xf8, 0xf9, 0xff, 0xcf, 0x8f, 0x8f, 0xf0, 0x00, 0x00, 

  106.   0x00, 0x00, 0x3f, 0x07, 0xff, 0x1f, 0xfc, 0xf8, 0xf9, 0xff, 0xcf, 0xcf, 0x9f, 0xfc, 0x00, 0x00, 

  107.   0x00, 0x00, 0x7f, 0x87, 0x8f, 0x9e, 0x3c, 0xf8, 0xf8, 0x1c, 0x0f, 0xef, 0x9e, 0x3c, 0x00, 0x00, 

  108.   0x00, 0x00, 0x7b, 0x87, 0x8f, 0x9e, 0x1e, 0xf8, 0xf8, 0x1e, 0x0f, 0xef, 0xbe, 0x3c, 0x00, 0x00, 

  109.   0x00, 0x00, 0x73, 0x87, 0xff, 0x1e, 0x1e, 0xf8, 0xf8, 0x1e, 0x0f, 0xff, 0xbc, 0x3c, 0x00, 0x00, 

  110.   0x00, 0x00, 0xf3, 0xc7, 0xff, 0x1e, 0x1e, 0xf8, 0xf8, 0x1e, 0x0f, 0x7f, 0xbe, 0x3c, 0x00, 0x00, 

  111.   0x00, 0x00, 0xff, 0xc7, 0xfe, 0x1e, 0x1c, 0xf8, 0xf8, 0x1c, 0x0f, 0x3f, 0x9e, 0x3c, 0x00, 0x00, 

  112.   0x00, 0x01, 0xff, 0xc7, 0x9f, 0x1f, 0xfc, 0x7f, 0xf9, 0xff, 0xcf, 0x1f, 0x9f, 0xfc, 0x00, 0x00, 

  113.   0x00, 0x01, 0xe1, 0xe7, 0x8f, 0x1f, 0xf8, 0x3f, 0xe1, 0xff, 0xcf, 0x0f, 0x8f, 0xf8, 0x00, 0x00, 

  114.   0x00, 0x03, 0xc0, 0xf7, 0x8f, 0x9f, 0x80, 0x0f, 0x81, 0xff, 0xcf, 0x0f, 0x03, 0xe0, 0x00, 0x00, 

  115.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  116.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  117.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  118.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  119.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  120.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  121.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00

  122. };

  123.  

  124. // “mage2.h”的內容 'must1', 128x64px

  125. const unsigned char Must_logo [] PROGMEM = {

  126.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  127.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  128.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  129.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  130.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 

  131.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 

  132.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 

  133.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 

  134.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x60, 0x0c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 

  135.   0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0x00, 0x60, 0x04, 0x03, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x07, 

  136.   0x00, 0x00, 0x00, 0x00, 0x00, 0x0f, 0xc0, 0x60, 0x04, 0x07, 0x78, 0x00, 0x00, 0x00, 0x00, 0x07, 

  137.   0x00, 0x00, 0x00, 0x00, 0x00, 0x78, 0xc0, 0x60, 0x0e, 0x04, 0x1e, 0x00, 0x00, 0x00, 0x00, 0x07, 

  138.   0x00, 0x00, 0x00, 0x00, 0x01, 0xc0, 0x63, 0xe0, 0x07, 0xfc, 0x01, 0x80, 0x00, 0x00, 0x00, 0x07, 

  139.   0x00, 0x00, 0x00, 0x00, 0x07, 0x00, 0x7f, 0x00, 0x00, 0x50, 0x00, 0x80, 0x00, 0x00, 0x00, 0x07, 

  140.   0x00, 0x00, 0x00, 0x00, 0x06, 0x00, 0x10, 0x00, 0x00, 0x00, 0x03, 0x80, 0x00, 0x00, 0x00, 0x07, 

  141.   0x00, 0x00, 0x00, 0x00, 0x03, 0x00, 0x00, 0x03, 0xf0, 0x00, 0x06, 0x00, 0x00, 0x00, 0x00, 0x07, 

  142.   0x00, 0x00, 0x00, 0x00, 0x01, 0xc0, 0x01, 0xff, 0x3f, 0xc0, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x07, 

  143.   0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x07, 0x80, 0x0f, 0xf8, 0x03, 0x00, 0x00, 0x00, 0x00, 0x03, 

  144.   0x00, 0x00, 0x00, 0x00, 0x00, 0xc0, 0x3b, 0xff, 0xff, 0xfe, 0x01, 0xc7, 0xc0, 0x00, 0x00, 0x01, 

  145.   0x00, 0x00, 0x00, 0x07, 0x83, 0x01, 0xff, 0xf8, 0x0f, 0xff, 0xc0, 0x7c, 0x60, 0x00, 0x00, 0x00, 

  146.   0x00, 0x00, 0x00, 0x0c, 0x76, 0x03, 0xf8, 0x00, 0x07, 0x8f, 0xe0, 0x00, 0x30, 0x00, 0x00, 0x00, 

  147.   0x00, 0x00, 0x00, 0x18, 0x1e, 0x0f, 0xe1, 0xe0, 0x60, 0x33, 0xfc, 0x00, 0x18, 0x00, 0x00, 0x01, 

  148.   0x00, 0x00, 0x00, 0x18, 0x00, 0x3f, 0x98, 0x03, 0xfe, 0xfc, 0xfc, 0x00, 0x08, 0x00, 0x00, 0x01, 

  149.   0x00, 0x00, 0x00, 0x30, 0x00, 0x3e, 0xf8, 0x1f, 0xfc, 0x7f, 0x3f, 0xff, 0xf8, 0x00, 0x00, 0x01, 

  150.   0x00, 0x00, 0x00, 0x1f, 0xff, 0xfc, 0xff, 0xff, 0xfc, 0x1f, 0xdf, 0xf0, 0x00, 0x00, 0x00, 0x01, 

  151.   0x0c, 0x1c, 0x1f, 0xff, 0xf0, 0x7f, 0xff, 0xff, 0xf0, 0x0f, 0xec, 0x00, 0x00, 0x00, 0x00, 0x01, 

  152.   0x1f, 0xff, 0xff, 0xfb, 0xf9, 0xe7, 0xff, 0xff, 0x00, 0x07, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x60, 

  153.   0x38, 0x01, 0xe0, 0x00, 0x0d, 0xcf, 0x20, 0x72, 0x00, 0x3f, 0x7b, 0x00, 0x3f, 0xc0, 0x01, 0xfc, 

  154.   0x38, 0x00, 0xe0, 0x00, 0x0f, 0xfe, 0x20, 0x20, 0x00, 0x1f, 0xff, 0xff, 0xf1, 0xff, 0xff, 0x86, 

  155.   0x38, 0xf8, 0xe3, 0xff, 0x8f, 0xf0, 0x00, 0x00, 0x00, 0x06, 0xff, 0xe0, 0x00, 0x01, 0xc0, 0x06, 

  156.   0x19, 0xf8, 0xe1, 0xff, 0x8f, 0x80, 0x00, 0x00, 0x00, 0x04, 0xff, 0xe0, 0x00, 0x01, 0x81, 0xfe, 

  157.   0x19, 0xf8, 0xe0, 0x00, 0x0f, 0x06, 0x00, 0x00, 0x00, 0x03, 0xef, 0xfe, 0x3f, 0x8f, 0x8f, 0xf8, 

  158.   0x19, 0xf8, 0xe0, 0x00, 0x0e, 0x06, 0x00, 0x00, 0x00, 0x06, 0x3f, 0xfe, 0x3f, 0x07, 0x8f, 0xfc, 

  159.   0x18, 0x00, 0xe1, 0xff, 0x0e, 0x07, 0x18, 0x00, 0x00, 0x00, 0x3f, 0xf0, 0x00, 0x03, 0x80, 0x0e, 

  160.   0x18, 0x00, 0xe3, 0xff, 0x8e, 0x01, 0x83, 0x00, 0x00, 0x04, 0x7b, 0xff, 0xe0, 0xff, 0x80, 0x06, 

  161.   0x18, 0xf8, 0xe3, 0xfe, 0x0e, 0x00, 0xc3, 0x00, 0x00, 0x00, 0xff, 0xff, 0xf1, 0xff, 0x8f, 0x86, 

  162.   0x19, 0xfc, 0xe3, 0x00, 0x0f, 0x00, 0x01, 0x00, 0x00, 0x01, 0xff, 0xe0, 0x00, 0x01, 0x8f, 0x86, 

  163.   0x19, 0xfc, 0xe3, 0xff, 0x8f, 0x80, 0x00, 0x00, 0x00, 0x01, 0xff, 0xe0, 0x00, 0x01, 0x8f, 0x86, 

  164.   0x18, 0xf8, 0xe3, 0xff, 0x8f, 0x80, 0x40, 0x00, 0x00, 0x00, 0xef, 0xfc, 0xf0, 0x0f, 0x8f, 0x86, 

  165.   0x18, 0x00, 0x03, 0xce, 0x0f, 0xc0, 0x01, 0x00, 0x00, 0x0c, 0x7d, 0xf8, 0xf0, 0x07, 0x8f, 0x86, 

  166.   0x18, 0x7f, 0x07, 0x80, 0x1f, 0xe0, 0x00, 0x70, 0x00, 0x1f, 0x31, 0xf0, 0x00, 0xc1, 0x8f, 0x86, 

  167.   0x1f, 0xc3, 0xff, 0xf8, 0xf9, 0xf0, 0x18, 0xfc, 0x1c, 0x07, 0xe1, 0xe0, 0x00, 0xf0, 0x0f, 0x86, 

  168.   0x0e, 0x00, 0x78, 0x3f, 0xc0, 0xe0, 0x03, 0xfc, 0x3f, 0x0c, 0x7e, 0x77, 0xc3, 0x98, 0x1d, 0xc6, 

  169.   0x00, 0x00, 0x00, 0x0f, 0x87, 0xf0, 0x07, 0xfe, 0x77, 0x38, 0x67, 0xff, 0xfe, 0x0f, 0xf0, 0xfc, 

  170.   0x00, 0x00, 0x00, 0x1f, 0xfe, 0xf8, 0x3e, 0x7f, 0x3f, 0x03, 0x3f, 0x7f, 0x0e, 0x00, 0x00, 0x00, 

  171.   0x00, 0x00, 0x00, 0x20, 0x00, 0x3e, 0x3f, 0xff, 0x7f, 0x87, 0x7e, 0x00, 0x0e, 0x00, 0x00, 0x00, 

  172.   0x00, 0x00, 0x00, 0x18, 0x00, 0x0f, 0x23, 0xfd, 0xff, 0xfe, 0xfc, 0x00, 0x18, 0x00, 0x00, 0x00, 

  173.   0x00, 0x00, 0x00, 0x18, 0x0c, 0x07, 0xe3, 0xff, 0xff, 0xf9, 0xf0, 0x18, 0x30, 0x00, 0x00, 0x00, 

  174.   0x00, 0x00, 0x00, 0x0c, 0x1f, 0x01, 0xff, 0xff, 0xf7, 0x8f, 0xe0, 0x7f, 0xb0, 0x00, 0x00, 0x00, 

  175.   0x00, 0x00, 0x00, 0x07, 0x61, 0xc0, 0x7f, 0xff, 0xff, 0x7f, 0x01, 0xc0, 0xe0, 0x00, 0x00, 0x00, 

  176.   0x00, 0x00, 0x00, 0x01, 0x80, 0x60, 0x1e, 0x3f, 0xff, 0xf8, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 

  177.   0x00, 0x00, 0x00, 0x00, 0x00, 0x70, 0x03, 0xff, 0xff, 0xc0, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 

  178.   0x00, 0x00, 0x00, 0x00, 0x00, 0xc0, 0x00, 0x1f, 0xf8, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 

  179.   0x00, 0x00, 0x00, 0x00, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00, 0x00, 

  180.   0x00, 0x00, 0x00, 0x00, 0x02, 0x00, 0x08, 0x00, 0x00, 0x0c, 0x00, 0x60, 0x00, 0x00, 0x00, 0x00, 

  181.   0x00, 0x00, 0x00, 0x00, 0x02, 0x00, 0x1f, 0x80, 0x00, 0xfe, 0x01, 0xc0, 0x00, 0x00, 0x00, 0x00, 

  182.   0x00, 0x00, 0x00, 0x00, 0x00, 0xe0, 0x30, 0xe0, 0x0f, 0x83, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 

  183.   0x00, 0x00, 0x00, 0x00, 0x00, 0x3c, 0x60, 0x60, 0x06, 0x01, 0x9c, 0x00, 0x00, 0x00, 0x00, 0x00, 

  184.   0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0xc0, 0x60, 0x02, 0x00, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x00, 

  185.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x60, 0x06, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  186.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  187.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0f, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  188.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 

  189.   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00

  190. };



程式名稱:ESP_OLED3_Image3.ino


在介紹這個範例程的內容之前,首先介紹一下如何產生可用來貼上OLED顯示器的圖片點陣檔(bitmap)案,我想這也是很多人最想知道的吧!一般來說要產生點矩陣檔案大致要經過下面幾個步驟:


  1. 先取得你想要顯示的圖檔,一般不外”*.jpg”、”*.png”或”*.bmp”格式的圖片,當然如果自己動手畫也是可以。

  2. 將圖片的尺寸調整到你想要在OLED顯示器螢幕上顯示的大小,在此也就是全螢幕的128 X 64點。

  3. 將調整好的圖片檔案轉成點陣檔案的格式,然後複製到你的Arduino程式內,供貼圖指令使用。


前述的步驟一應該是最容易的,不過要注意圖片的版權問題,還有因為OLED顯示器的螢幕跟解析度都不高,所以不要選擇太複雜的圖案,以免最後的效果不佳。

至於步驟二可以使用的方法跟軟體很多,在此建議就使用Windows上的小畫家就可以了,簡單又好用;當你啟動小畫家並開啟要編輯的圖片後,如【圖4、28-1】所示,先使用標記1的[選取]功能選擇你要使用的部分後,再點選[剪裁]去保留它,接者點選標記2的[調整大小]的選項,進入調整大小的跳出視窗中(【圖4、28-2】)。


圖4、28-1 啟動小畫家後載入要編輯的圖片並修正剪裁


在調整大小的視窗中先點選標記1的[像素]功能,並取消標記2的[維持外觀比例]的選項,然後分別在水平和垂直欄位輸入128和64這兩個值,最後按下[確定]鍵就大功告成了,當然不要忘了把新的圖片存檔起來!

圖4、28-2 進入小畫家調整大小功能選項


接下來就是最重要的步驟三了,一般來說要把圖片轉成點陣檔,必須要借助其他的軟體,例如網路上有名的「LCD Image Converter」應用程式;不過如果你拿到的是試用版,最後轉出來的檔案會被加上他們的浮水印標記,這點就讓人比較頭痛,除非你去付費購買才能解決。


圖4、29-1 『image2cpp』首頁畫面


除此之外,在網路上也有很多熱心人士所提供免費的軟體或網站可供轉檔之用,在此建議一個不錯的網站🡪『image2cpp』,在你點選鍊結或是用電腦瀏覽器進到這個網站之後,首先會看到【圖4、29-1】的畫面,其中標記1是這個網站的網址《javl.github.io/image2ccp/》,接著按下標記2的[選擇檔案]按鈕,選擇你要上傳進行轉換的檔案,當圖檔上傳成功之後,將網頁往下移動可看到【圖4、29-2】的畫面。

圖4、29-2 圖片特性設定選項畫面


在【圖4、29-2】中,標記1是你上傳圖檔被單色黑白化的預覽圖,而標記2是這張圖片要轉換的的尺寸,也就是解析度,至於標記3中上方是圖片背景顏色選擇鈕,而下方的方形點選塊可用來選擇是否要把圖片的顏色黑白反相。至於標記4是像素亮點轉換的閥值,使用者可自行調整以得到自己喜歡的轉換畫面。最後的標記5是用來選擇是否要調整最後圖片的大小,也就是標記2部分所輸入的水平與垂直的像素值;以上提到的選項或調整功能,都可以及時在標記1的預覽圖上看到結果。

等設定值都調好了就可以把網頁往下移到【圖4、29-3】處,在此把標記1輸出檔案的種類設定為「Arduino code」,而標記2則是這個輸出檔案標頭名稱(在此為“Arduino_Logo”)的輸入欄位,其內容可由使用者自行決定;這兩樣設定好之後,就可以按下標記3【Generate code】這個按鈕去產生檔案,如果一切正常,可在標記4這個視窗中看到最後的結果;其中標記5便是這個點陣檔的陣列名稱,也就是前面使用者在標記2輸入欄位中所選定的輸出檔案標頭名稱,至此檔案產生的就算大功告成!

接下來就是要取用這個點陣檔,首先可將滑鼠游標移到標記4這個視窗中任意的位置上,並點擊一下滑鼠左鍵,接著按下鍵盤的「ctrl+A」組合鍵,選取點陣檔全部的內容後,再按下「ctrl+C」組合鍵執行拷貝的動作,這時就可以回到你的Arduino IDE中,將這個點陣檔案的內容貼到你的程式碼裡面了。


圖4、29-3 圖片點陣檔輸出及產生畫面


圖4、30 Arduino IDE點陣圖檔使用畫面


為了方便Arduino程式的撰寫及保持頁面的清爽,在這個範例程式中兩個點陣檔的內容分別存放在標記1的兩個副頁面內,並分別命名為”image.h”和”image2.h”,然後在程式開始的標記2上以引入(include)的方式去取用它們。不過在上面的程式列表中,為了方便展示所以是把這兩個圖檔的內容移到主程式的後面來放置,這兩個點陣檔分別命名為「Arduino_Logo[]」(57~122行)及「Must_Logo[]」(125~190行)。

本範例程式最前面的1~22行,除了多了4、5兩行用來引入圖片點陣檔之外,其他都是沿用之前的範例;而真正的主體程式就是setup()剩下的部分,這是一個展示圖片的無窮while(1) {}(24~52行)迴圈,在這個迴圈中,先顯示Arduino 的logo 3秒(26~30行),然後改成我們學校的logo,一樣顯示3秒(33~37行),最後則是一個重複10次的for迴圈(38~51行),在這個迴圈中會以間隔0.2秒的方式快速切換顯示上面的兩張圖片;如果仔細去看這for迴圈內的程式,其實只是複製前面那兩個圖片的顯示動作,但是把顯示的時間縮短為0.2秒而已!

在整個範例程式中只有多一個新的程式碼,就是:


      display.drawBitmap(0, 0, Arduino_Logo, 128, 64, WHITE);


在這個專門做為繪圖的程式碼中,共用了6個參數,前兩個是這張圖片左上角在OLE顯示器螢幕的位置,而第3個是這張圖片的點陣檔名稱,接著4、5這兩個參數是這張圖片水平與垂直的像素值,最後一個是這張圖片顯示的顏色,要注意的是如果上面的值改成"BLACK",並不會讓圖片反白,而是變成漆黑一片,因為你把原來該亮的部分都變成黑色了!

本實習最後完成的結果已上傳到Youtube下列的網址上,請讀者自行到網站去觀看執行的結果為何﹖並跟程式碼做一個比對。




https://youtu.be/ZQjdyg_yBV0