2020年6月19日 星期五

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


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

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


◎功能與動作說明：

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


圖４、２７-１ Arduino家族原始與單色Logo比較圖

圖４、２７-２ 本校原始與單色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上的小畫家就可以了，簡單又好用；當你啟動小畫家並開啟要編輯的圖片後，如【圖４、２８-１】所示，先使用標記１的[選取]功能選擇你要使用的部分後，再點選[剪裁]去保留它，接者點選標記２的[調整大小]的選項，進入調整大小的跳出視窗中(【圖４、２８-２】)。


圖４、２８-１ 啟動小畫家後載入要編輯的圖片並修正剪裁


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

圖４、２８-２ 進入小畫家調整大小功能選項


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


圖４、２９-１ 『image2cpp』首頁畫面


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

圖４、２９-２ 圖片特性設定選項畫面


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

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

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


圖４、２９-３ 圖片點陣檔輸出及產生畫面


圖４、３０ Arduino IDE點陣圖檔使用畫面


為了方便Arduino程式的撰寫及保持頁面的清爽，在這個範例程式中兩個點陣檔的內容分別存放在標記１的兩個副頁面內，並分別命名為”image.h”和”image2.h”，然後在程式開始的標記２上以引入(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


張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)