งานครั้งที่ 12 การสร้างรูปเพื่อแสดงผลบนจอ OLED(SSD1306) ด้วยวิธีคัดลอกหน้าจอ

[admin]

การสร้างรูปเพื่อแสดงผลบนจอ OLED ด้วยวิธีคัดลอกหน้าจอ
หลายครั้งที่ผู้ใช้งานจำเป็นต้องสร้างรูปเพื่อใช้แสดงผลบนจอ OLED ซึ่งเป็นภาพกราฟฟิก การสร้างภาพให้ได้ตามต้องการนั้นมีความซับซ้อนมากพอสมควรสำหรับผู้ที่ไม่มีทักษะในการวาดรูปด้วยแล้วแทบจะเป็นไปไม่ได้เลย งานครั้งนี้เป็นงานที่นำเสนอการนำภาพที่แสดงบนจอคอมพิวเตอร์ซึ่งอาจเป็นภาพที่เปิดหาได้จากทางอินเตอร์เน็ตทำให้ได้ภาพที่ต้องการใช้งานได้ตรงตามต้องการ ตัวอย่างดังรูป


ขั้นตอนการดำเนินการ

1. เปิดหาภาพที่ต้องการจากแหล่งต่าง ๆ ตัวอย่างในรูปเป็นภาพจากหน้าเวปไซด์เช่นเวปไซต์
http://www.alessioatzeni.com/meteocons/
ซึ่งเป็นภาพขาวดำและมีขนาดใกล้เคียงกับที่ต้องการ ทำการปรับขยาย/ย่อการแสดงผลในโปรแกรมบราวน์เซอร์ (โปรแกรมที่กำลังเปิดเวป) ให้ได้ขนาดที่ต้องการซึ่งจะต้องมีขนาดไม่เกินขนาดของหน้าจอ OLED ที่ใช้งาน การปรับขยาย/ย่อทำได้โดยการกดแป้นพิมพ์ Ctrl ค้างไว้แล้วกลิ้งเมาส์ให้ได้ขนาดตามต้องการ (จากตัวอย่างปรับย่อเหลือ 67%)


2. ใช้โปรแกรมจับภาพหน้าจอ เช่นโปรแกรม SnagIt ทำการจับเฉพาะไอคอนที่ต้องการ
https://www.techsmith.com/download/snagit/ (สามารถหายาแก้ไอหรือตัวเต็มได้ด้วยกูเกิล)


3. เมื่อจับภาพเสร็จตัวภาพจะเข้าไปยังโปรแกรมแก้ไขภาพซึ่งสามารถดูขนาดได้ หากใหญ่หรือเล็กเกินไปให้กลับไปทำการปรับขยาย/ย่อและจับภาพใหม่อีกครั้ง


4. ใช้โปรแกรมแปลงภาพเป็นรหัส "LCD Image Converter" ซึ่งดาวน์โหลดโปรแกรมได้ที่ http://www.riuson.com/lcd-image-converter ทำการเปิดให้โปรแกรมค้างไว้ แล้วกลับไปขั้นตอนข้อ 3 คัดลอกภาพ Ctrl+c แล้วกลับมายังโปรแกรม LCD Image Converter อีกครั้งทำการวางภาพที่คัดลอกมาโดยใช้ Ctril+v ทำการปรับสีภาพตามพิกเซลที่ต้องการ คลิกซ้ายจะเติมสีดำ คลิกขวาจะเติมสีขวา ดังรูป


5. ปรับสีภาพในแต่ละพิกเซลในขั้นตอนข้อ 4 เสร็จได้ดั่งใจแล้ว ทำการปรับขนาดของภาพให้ได้พิเซลการแสดงผลไม่เกินขนาดของจอ OLED ในที่นี้คือ 128x64


6. ทำการปรับเพิ่มลดขนาดของภาพด้านซ้าย(1) ด้านขวา(2) ด้านบน(3) ด้านล่าง(4) ซึ่งขนาดที่คลิกเป็นจำนวนพิกเซลที่เพิ่มขึ้นหรือลดลงเท่านั้น


7. หลังจากปรับขนาดข้อ 6 ขนาดของภาพจะได้ดังรูปโดยแสดงผลที่มุมล่างของโปรแกรม ซึ่งขนาดในแต่ละด้านจะต้องเป็นตัวเลขที่ 8 หารลงตัว


8. กลับภาพเป็นตรงข้าม เพราะโปรแกรมจะส่งค่าที่เป็นสีขาวให้พิเซลจอ OLED ติดสว่าง และพิกเซลสีดำให้พิเซลจอ OLED ดับ


9. ผลการกลับภาพ


10. คลิกที่เมนู Option เลือก Conversion คลิกเลือก Monochrome(1) และ Show Preview(2)


11. คลิกขวาบริกเวณกลาง ๆ ของข้อมูล เลือก SelectAll


12. ทำการคัดลอกข้อมูลรหัสทั้งหมด ดังรูป


13. นำไปวางแทนค่าตัวแปรแสดงผล (ต้องทำการติดตั้งไลบรารี่และได้ทดลองในงานครั้งที่ 9,10 ที่ผ่านมาแล้ว)
งานครั้งที่ 9 การติดตั้งไลบารี่ OLED i2c และการใช้งานเบื้องต้น
งานครั้งที่ 10 การแสดงผลรูปภาพบนจอ OLED 128x64
*หากยังไม่ได้ดำเนินการให้กลับไปศึกษาในงานดังกล่าวแล้วดำเนินการให้ใช้งานได้ก่อน


วงจรที่ใช้ทดลอง
กรณีใช้บอร์ดรุ่น NodeMCU

กรณีใช้บอร์ดรุ่น WeMos D1 mini


ตัวอย่างโปรแกรม

โค๊ด: [Select]

#include <Wire.h> 
#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
Adafruit_SSD1306 OLED(-1); 

const unsigned char logo [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x03, 0x80, 0x00, 
0x00, 0x00, 0x1f, 0xc0, 0x00, 
0x00, 0x00, 0x3f, 0xf0, 0x00, 
0x00, 0x01, 0xf0, 0x3e, 0x00, 
0x00, 0x07, 0xe0, 0x0f, 0x00, 
0x00, 0x0e, 0x00, 0x03, 0x80, 
0x00, 0x0c, 0xfc, 0x01, 0xc0, 
0x00, 0x1b, 0xff, 0x00, 0xe0, 
0x00, 0x1f, 0x87, 0x80, 0x60, 
0x00, 0x1e, 0x01, 0xc0, 0x60, 
0x01, 0xfc, 0x00, 0xfe, 0xe0, 
0x07, 0xfc, 0x00, 0x7f, 0xc0, 
0x0f, 0xf0, 0x00, 0x07, 0x80, 
0x0f, 0x00, 0x00, 0x01, 0xc0, 
0x1c, 0x00, 0x00, 0x00, 0xe0, 
0x1c, 0x00, 0x00, 0x00, 0xe0, 
0x1c, 0x00, 0x00, 0x00, 0x60, 
0x1c, 0x00, 0x00, 0x00, 0x60, 
0x1c, 0x00, 0x00, 0x00, 0x60, 
0x1c, 0x00, 0x00, 0x00, 0xe0, 
0x0e, 0x00, 0x00, 0x01, 0xc0, 
0x07, 0x8c, 0x18, 0x03, 0xc0, 
0x03, 0xfe, 0x30, 0xff, 0x80, 
0x00, 0xf8, 0x73, 0xfe, 0x00, 
0x00, 0x00, 0x63, 0x80, 0x00, 
0x00, 0x01, 0xe0, 0x00, 0x00, 
0x00, 0x01, 0xf8, 0x00, 0x00, 
0x00, 0x00, 0x38, 0x00, 0x00, 
0x00, 0x00, 0x70, 0x00, 0x00, 
0x00, 0x00, 0xe0, 0x00, 0x00, 
0x00, 0x01, 0xc0, 0x00, 0x00, 
0x00, 0x03, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x00, 0x00
};
void setup() {
  OLED.begin(SSD1306_SWITCHCAPVCC,0x3C); // initialize with the I2C addr 0x3C (for the 128x64)
  OLED.clearDisplay();
  OLED.drawBitmap(20,10,logo,40,40,1);  //20,10 is x,y coordinates and 40,40 is image size
  OLED.display();
}
void loop(){
  delay(250); 
}

ผลการรัน