2016/Dec/17

การนำ รูปภาพ หรือ Logo ไปแสดงผลจอ OLED บนบอร์ด D-Duino

พยายามหามานานแล้ว วิธีการนำ รูปภาพ หรือ Logo ไปแสดงผลบนจอ OLED หาไปเรื่อยๆ หาไม่เจอก็พักไว้ก่อน เดี๋ยวมาหาใหม่ คราวก่อนไปอบรมและ Workshop ในหัวข้อ “LAMBDA DESIGN CONTEST - Chiang Mai” ที่ Pinn Creative Space Chiang Mai เมื่อวันที่ 19 -20 พ.ย. 2559 จัดโดย บริษัท GravitechThai และ Pinn Creative Space ChiangMai ได้ความรู้กับบอร์ด LAMBDA มาพอสมควร

พอดีทาง บริษัท GravitechThai เอาสินค้าที่ชื่อว่า D-Duino มาจำหน่ายด้วย เห็นว่ามีจอ OLED มาพร้อมกับบอร์ดเลย ลองเล่นกันดูก็ OK ใช้งานคำสั่งเดียวกับบอร์ด NodeMCU เลย... ลองนำโปรแกรมที่เคยเขียนบน NodeMCU ไป Run ดูก็ใช้งานได้ดีเลยครับ หน้าตาของบอร์ดก็เป็นตามรูปครับ (รูปจาก https://www.gravitechthai.com)

ขาเชื่อมต่อและการเรียกใช้งานเหมือนๆ กับ NodeMCU

 

เริ่มต้นมาเตรียมรูปที่เป็น ขาว-ดำ กันก่อน ตาม Spec ของจอ OLED 0.96” เขาบอกว่ามีจำนวน Pixels = 128 x 64  ดังนั้นรูปที่เราจะใช้งานควรมีขนาดไม่เกิน 128 x 64

 จากนั้นก็บันทึกไฟล์ไว้รอ... แล้วไปเปิดเว็บไซต์ https://www.online-utility.org/image_converter.jsp  เลือกให้ Output เป็น XBM - X Windows system bitmap black and white only è กดปุ่ม Select format

ขอขอบคุณ https://blog.squix.org/2015/05/esp8266-nodemcu-how-to-create-xbm.html ที่แนะนำวิธีให้ครับ

จากนั้นก็จะเข้าสู่หน้าต่างการแปลงรูปภาพ (Image) ไปเป็น XBM ให้เลือกปุ่ม Choose File è เลือกไฟล์รูปปปภาพที่ได้สร้างไว้แล้ว è กดปุ่ม Open

ระบบจะเปิด Tab ใหม่ขึ้นมาแล้วให้พิมพ์ชื่อไฟล์ ที่ต้องการ => เลือก Type เป็น XBM File (.XBM) => กดปุ่ม Save เป็นอันเสร็จสิ้นการแปลงภาพ (Image) เป็นไฟล์ XBM แล้ว

ลองเปิดไฟล์ ด้วย Notepad++ ดู

 

จะเห็นไฟล์ในรูปแบบของ XBM

กลับมาที่โปรแกรม Arduino IDE พิมพ์คำสั่งลงไปตามรูป (ที่จริงผมก็ไปเอาไฟล์ตัวอย่างมานะครับ แล้วตัดส่วนที่ไม่ใช้งานออกไป อ่านรายละเอียดผู้ผลิตได้ที่  http://dong-sen.com/d-duino/   หาโหลดไฟล์ตัวอย่างได้จาก https://github.com/lspoplove/D-duino)

  

#include <Wire.h>  // Only needed for Arduino 1.6.5 and earlier

#include "SSD1306.h" // alias for `#include "SSD1306Wire.h"`

#include "images.h"

SSD1306  display(0x3c, D1, D2);

 

void setup() {

  Serial.begin(9600);

  Serial.println();

  display.init();

//  display.setFont(ArialMT_Plain_10);

}

 

void loop() {

  // clear the display

  display.clear();

  display.setTextAlignment(TEXT_ALIGN_CENTER);

  display.drawXbm(3, 0, EGAT_Logo_width, EGAT_Logo_height, EGAT_Logo_bits);

  display.display();

}

 

 

 ส่วนไฟล์ image.h ให้คัดลอกข้อความ จากไฟล์ .XBM มาใส่  จากนั้นเปลี่ยน ชื่อให้ตามที่เรากำหนด

 

ทดลอง Run โปรแกรมดูจะเห็น ภาพที่เราได้สร้างไว้ครับ

ปัญหาที่พบคือภาพที่สร้างครั้งแรกกลับหัว เลยต้องไปทำภาพให้กลับหัวก่อน แล้วจะออกมาตรงไม่รู้เป็นเพราะอะไร เอาให้ทำงานได้ก่อนแล้วกันครับ


== จบแล้วครับ ไม่เข้าใจติดตรงไหนก็ถามกันได้ครับ ==

เจอวิธีการแล้วครับ ส่วนไหนกลับหัว ก็เอาคำสั่ง 

display.flipScreenVertically(); 

ไปดักข้างหน้า จบเลยครับ ไม่ต้องไปทำการกลับภาพ Image ตอนสร้างไฟล์ .XBM แล้วครับ

นอนไปฝันไป ฝันว่าแก้ด้วยวิธีนี้ ลองดูซิ... ใช้ได้เลย ความฝันที่เป็นจริง 

 

edit @ 18 Dec 2016 09:55:58 by BigTUI ^_^

เพิ่มเติม สำหรับการนำไปใช้งานร่วมกับบอร์ด ESPert V.2 ให้ไปเปลี่ยน ต่ำแหน่งของขา SDA กับ SCL ซึ่งใช้ไม่เหมือนกันครับ 

//SSD1306 display(0x3c, D1, D2); //D-duino board D1--SDA , D2--SCL
SSD1306 display(0x3c, 4, 5); // ESPert board GPIO4---SDA , GPIO5--SCL

 
OKได้ผลเหมือนกันครับ

 

edit @ 8 Jan 2017 19:40:49 by BigTUI ^_^

Comment

Comment:

Tweet


ศรีเดช ปัญจขันธ์
View full profile