Lesson 08 : เล่นกับจอ OLED กันครับ

ในบทเรียนนี้จะสอนให้น้องๆ เรียนรู้การใช้งานโปรแกรม Arduino ยากขึ้นไปอีกระดับ โดยเราจะควบคุมจอ OLED ขนาด 0.97” ให้แสดงข้อความ รวมถึงรูปภาพ ตามที่เราต้องการ บทความนี้จะต้องใช้ External Library เพิ่มเติมด้วยซึ่งเราต้องไป Download มาติดตั้งก่อน ลองศึกษาวิธีการติดตั้ง External Library หรือคลิกที่นี่ นะครับ

ระดับความยาก :  

สิ่งที่ต้องทราบก่อนเริ่มเรียน

สิ่งที่จะได้จากบทเรียนนี้

อุปกรณ์

ลำดับชิ้นส่วนจำนวน
1Board Arduino UNO1 ชิ้น
2สาย Jump ผู้ – เมีย4 เส้น
3จอ OLED 0.96 นิ้ว พร้อม interface I2C IIC SPI ให้ท่านได้ใช้งานง่าย(สีขาว)1 ชุด

ให้ต่ออุปกรณ์ดังรูปต่อไปนี้

Coding กันเลย
1. เตรียม Library สำหรับสั่งการ OLED 0.96” ก่อนนะครับ โดยให้ไปที่ URL https://github.com/adafruit/Adafruit-GFX-Library และ Download Library มาดังภาพที่ 1 หรือคลิก Download ที่ Link(Adafruit_SSD1306, Adafruit-GFX-Library-master) นี้ได้เลยครับ ให้ Download มาทั้งสองตัวนะครับ

ภาพที่ 1 แสดงการ Download Library สำหรับใช้งาน

2. ติดตั้ง Library ที่ Download มาแล้ว ที่ Arduino IDE ซึ่งสามารถดูวิธีการติดตั้งได้ที่ “การติดตั้ง External Library ใน Arduino IDE” ซึ่งเมื่อติดตั้งเสร็จแล้ว ให้ลองเปิดเมนู ดังภาพที่ 2 จะเห็น Library Adafruit_SSD1306, Adafruit-GFX ที่ติดตั้งแล้ว

3. เปิดโปรแกรม Arduino และ New File ขึ้นมาดังภาพที่ 3

ภาพที่ 3 แสดงการสร้างไฟล์ใหม่

4. พิมพ์ code ตามภาพที่ 4 (download code here) จากนั้นกดปุ่มบันทึกและตั้งชื่อตามที่ต้องการ

/**
* @desc Class นี้ใช้สำหรับเรียนรู้การทำงานเบื้องต้นของ Arduino, OLED, Adafruit Library
* @author Prayoon V.,
* Email : themakerthailand@hotmail.com
* Facebook : @MrMakerThailand
*/#include
#include
#include
#include
#include
#define OLED_RESET 4
Adafruit_SSD1306 display(OLED_RESET);

#define POS_X 0
#define POS_Y 1

//กำหนดความกว้าง ความยาว ของรูปที่ต้องการ
#define IMG_HEIGHT 32
#define IMG_WIDTH 32
//แปลงรูปให้เป็น byte array ใช้โปรแกรมที่ http://themakerthailand.com/convertImageToByte.html
static const unsigned char PROGMEM IMG_DATA[] = {

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf1, 0x8f, 0x8f, 0xff, 0xed, 0xb3, 0x00, 0x03,
0xec, 0x3b, 0x00, 0x03, 0xef, 0xfb, 0x88, 0x7f, 0xf3, 0xcf, 0xfb, 0x7f, 0xfd, 0xdf, 0xfb, 0x7f,
0xfd, 0xdf, 0xfb, 0x7f, 0xfd, 0xdf, 0xfb, 0x7f, 0xfd, 0xdf, 0xfb, 0x7f, 0xfd, 0xdf, 0xfb, 0x7f,
0xfb, 0xdf, 0xfb, 0x7f, 0xfb, 0xdf, 0xfb, 0x7f, 0xfb, 0xef, 0xfb, 0x3f, 0xfa, 0x6f, 0xf7, 0xbf,
0xf9, 0x4f, 0xf3, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0x82, 0x9d, 0x68, 0x91, 0xda, 0x9d, 0x6d, 0x93, 0xda, 0xba, 0x56, 0xb5, 0xff, 0xdf, 0xff, 0xdf,
0xff, 0xff, 0xff, 0xff, 0xdd, 0xed, 0x6d, 0xff, 0xed, 0x6d, 0x6c, 0xdb, 0xed, 0x55, 0x76, 0x5b,
0xed, 0x15, 0x11, 0x57, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff
};

void setup() {
display.begin(SSD1306_SWITCHCAPVCC, 0x3c); //initialize I2C addr 0x3c

}

void testscrolltext(void) {
display.setTextSize(2);
display.setTextColor(WHITE);
display.setCursor(10,0);
display.clearDisplay();
display.println(“The Maker Thailand”);
display.display();
delay(1000);

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();
}

void loop() {

//แสดงข้อความบรรทัดที่ 1
display.clearDisplay(); //ล้างหน้าจอ
display.setCursor(0,0);
display.setTextSize(1);
display.setTextColor(WHITE);
display.println(“The Maker Thailand”);

//แสดงข้อความบรรทัดที่ 2
display.setTextSize(1);
display.setTextColor(WHITE);
display.println(“We are made the maker”);

//แสดงข้อความบรรทัดที่ 3
display.setTextSize(1);
display.println(“www.TheMakerThailand.com”);
display.setTextColor(BLACK,WHITE);
display.display();

//ค้างที่ข้อความสามบรรทัดนี้ 5 วินาที
delay(5000);

//วาดรูปโดยเริ่มที่ Pixel ตำแหน่ง x=50, y=0
display.clearDisplay(); //ล้างหน้าจอ
display.drawBitmap(50, 0, IMG_DATA, IMG_WIDTH, IMG_HEIGHT, WHITE);
display.display();
//ค้างการแสดงรูปนี้ 10 วินาที
delay(10000);

display.clearDisplay();
testscrolltext(); //แสดงข้อความ Text ที่แบบเคลื่อนไหว
}

ภาพที่ 4 แสดง Sourcecode


ภาพที่ 5 แสดงการบันทึก

สั่ง Compile code โดยใช้คลิกที่ปุ่ม Verify ตามภาพที่ 6

ภาพที่ 6 แสดงการ Verify และ Compile Sourcecode

สั่ง Deploy code ไปที่ Board Arduino ตามภาพที่ 7

ภาพที่ 7 แสดงการ Upload Program ไปที่ Board Arduino

7. ดูผลลัพธ์จะเห็น OLED แสดงข้อความ รูปภาพ และตัววิ่ง ดัง Video นี้ครับ

ภาพที่ 8 แสดง Video การทำงานของ OLED

8. ทดลองเปลี่ยนรูปดูครับ โดยเราจะต้องแปลงรูปเป็น Byte Character ก่อน ซึ่งจะทำได้ดังนี้ครับ
8.1 ให้เตรียมรูปที่ต้องการแสดง โดยย่อให้มีขนาด 32 pixel x 32 Pixel ครับ จากนั้นเปิด URL http://themakerthailand.com/convertImageToByte.html แนบรูปที่ต้องการ จากนั้นกดแปลง ดังภาพที่ 9

ภาพที่ 9 แสดงการแปลงรูปภาพ เป็น Byte Array

8.2 นำ Byte Array ที่ Copy ได้ไปใส่ใน Arduino IDE ดังภาพที่ 10

ภาพที่ 10 แสดงตำแหน่งที่ต้องแก้ข้อมูลรูปภาพ

9. ลอง Upload Code ขึ้น Arduino Board ใหม่ จะเห็นการแสดงภาพที่ต่างออกไป

ภาพที่ 11 แสดงรูปที่ได้มีการเปลี่ยนแปลงแล้ว

!!!สำเร็จแล้ว!!!

Share ผลงาน
เมื่อน้อง ๆ ทำสำเร็จแล้วอย่าลืมแชร์ให้เพื่อนๆ ดูได้ที่ Facebook MrMakerThailand
และหากน้อง ๆ ทำไม่ได้ ให้ติดต่อมาได้ตลอดเวลาที่ Inbox นะครับ