โปรเจกต์ กรอบรูป E-Paper

ตั้งแต่ผมได้รู้จักกับเทคโนโลยี E-paper ผมก็รู้สึกหลงใหลในตัวมันมาก ผมมักจะสงสัยอยู่เสมอว่าจะมีอะไรที่ผมสามารถสร้างขึ้นโดยใช้มันได้บ้าง เมื่อไม่กี่เดือนก่อน ผมได้ซื้อเครื่องอ่านอีบุ๊ก Kindle และพบว่าแม้หน้าจอจะเป็นขาวดำ แต่รูปภาพที่แสดงออกมานั้นดูสวยงามมาก ราวกับว่าพวกมันผ่านฟิลเตอร์ Instagram มาเลย ผมจึงตัดสินใจทำกรอบรูปดิจิทัลด้วยหน้าจอ E-ink

ข้อดีของหน้าจอพวกนี้คือไม่จำเป็นต้องใช้พลังงานในการคงรูปภาพไว้ คุณต้องจ่ายไฟให้มันเฉพาะตอนที่จะเปลี่ยนภาพบนหน้าจอเท่านั้น ถึงแม้คุณจะถอดปลั๊กหน้าจอนี้ออกโดยสิ้นเชิง มันก็จะยังคงแสดงภาพล่าสุดไว้ตลอดกาล นี่คือเหตุผลที่การนำมาใช้เป็นกรอบรูปนั้นใช้งานได้จริง

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

มันทำงานด้วยถ่านกระดุม (Button cell) 3 ก้อน ซึ่งน่าจะอยู่ได้นานประมาณ 9-12 เดือน หากใช้แบตเตอรี่ AAA ก็จะช่วยยืดอายุการใช้งานไปได้ถึงสองสามปี ข้อดีคือถ้าแบตเตอรี่หมด ภาพสุดท้ายจะยังคงค้างอยู่บนหน้าจอ รูปภาพจะถูกบันทึกไว้ใน microSD card และซอฟต์แวร์จะทำหน้าที่วนแสดงภาพเหล่านั้น นอกจากนี้ยังมีปุ่มสำหรับกดข้ามรูปภาพปัจจุบันด้วย

Step 1: เครื่องมือและวัสดุอุปกรณ์

เครื่องมือ:

• หัวแร้งบัดกรี

• 3D printer (ถ้ามี)

• เลื่อยมือ

• ปืนกาวร้อน

วัสดุอุปกรณ์:

• 4.3 inch E-ink display module

• microSD card

• Button cell battery holder / 3x AAA battery holder

• arduino mini pro + USB to serial converter

• BC548 transistor

• Momentary push button

• 1k resistor

• 100k resistor

• Pref board

• กรอบรูปขนาด 9x13 ซม. (หรือขนาดใกล้เคียง)

Step 2: การต่อวงจร (Wiring)

ก่อนอื่น เป็นความคิดที่ดีที่จะทดสอบว่าอุปกรณ์ต่างๆ ของคุณทำงานได้ปกติไหม โชคดีที่มันทำได้ค่อนข้างง่าย เพียงแค่เชื่อมต่อหน้าจอเข้ากับ Arduino ตาม Schematic ของผม ยกเว้น Transistor และปุ่มกดที่คุณยังไม่ต้องใช้ก็ได้ เพียงเชื่อมต่อ Pins พลังงานเข้ากับ 5V โดยตรง คุณสามารถใช้ Sketch ตัวอย่างจาก Library epd.h ได้เลย

Schematic ค่อนข้างเรียบง่ายเพราะมีอุปกรณ์เพียงไม่กี่ชิ้น อย่างไรก็ตาม Resistor, Transistor และปุ่มกดจะปล่อยให้ลอยอยู่เฉยๆ ไม่ได้ วิธีที่ง่ายที่สุดคือบัดกรีพวกมันลงบน Pref board ขนาดเล็ก เมื่อบอร์ดนี้พร้อมแล้ว อุปกรณ์ทุกอย่างก็จะสามารถจัดวางและเดินสายไฟได้อย่างถาวร

แน่นอนว่าในการจัดวางอุปกรณ์ คุณต้องเตรียมกรอบรูปให้พร้อมก่อน ผมเลือกกรอบรูปขนาด 9x13 ซม. ซึ่งสามารถใส่หน้าจอและวงจรอิเล็กทรอนิกส์อื่นๆ ได้อย่างสบายๆ กรอบรูปขนาดใกล้เคียงกันก็สามารถใช้ได้เช่นกัน มันเป็นเพียงเรื่องของการเจาะช่องสำหรับหน้าจอ ถ้าคุณมีกรอบรูปขนาดเดียวกัน คุณสามารถพิมพ์ 3D print ส่วนด้านหลังออกมาเหมือนที่ผมทำก็ได้ เพราะผมไม่ค่อยถนัดเรื่องการเจาะรูบนกระดาษแข็งที่ผ่านการเคลือบแข็งมา...

คุณอาจสังเกตเห็นว่าผมใช้ Arduino Nano แต่ผมแนะนำให้ใช้ Arduino mini pro แทน คุณสามารถใช้ตัวไหนก็ได้แต่ต้องถอด Power regulator และ LEDs ออก หากคุณใช้ Nano คุณจะต้องถอด USB to serial chip และส่วนประกอบอื่นๆ ที่ไม่จำเป็นออกด้วย สิ่งนี้จำเป็นมาก มิฉะนั้นแบตเตอรี่ของคุณจะหมดภายในไม่กี่วัน เพราะ Arduino mini pro ไม่มีส่วนประกอบที่ไม่จำเป็นมากเท่ารุ่นอื่น

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

Step 3: ซอฟต์แวร์ (Software)

ซอฟต์แวร์ถูกเขียนขึ้นใน Arduino 1.8.5 โดยต้องใช้ Library สองตัวคือ epd และ Arduino low power ซึ่งทั้งสองตัวนี้ควรมีอยู่ใน Library manager เมื่อติดตั้ง Library ทั้งสองแล้ว คุณควรจะสามารถคอมไพล์และอัปโหลดโค้ดลงใน Arduino ของคุณได้ หากคุณต้องการปรับแต่งค่า มีตัวแปร (Variable) เพียงตัวเดียวคือ refreshRate นี่คือเวลาที่ใช้ระหว่างการโหลดรูปภาพ โดยปกติจะตั้งค่าไว้ที่ 10800 ซึ่งเท่ากับ 24 ชั่วโมง นั่นหมายความว่าหนึ่งหน่วยจะเท่ากับ 8 วินาที ดังนั้นหากตั้งค่าเป็น 1 รูปภาพจะอัปเดตทุกๆ 8 วินาที ตั้งค่าเป็น 2 จะเท่ากับ 16 วินาที และตั้งค่าเป็น 10800 คือ 24 ชั่วโมง

<p>#include <lowpower.h><br>#include <epd.h></epd.h></lowpower.h></p><p>const int wake_up = 6;
const int reset = 5;
const int lcd_on = 4;
const int button = 3;</p><p>int refreshRate = 10800; //time between loading images. number you enter * 8 = seconds between refresh (10800 = 24h)
int counter = 1;
int refreshCounter = 0;
int ByteReceived;
bool errorFlag = false;
bool picSend = false;
bool picLoaded = false;</p><p>void(* resetFunc) (void) = 0;</p><p>void setup(void)
{
  pinMode(lcd_on,OUTPUT);
  pinMode(13,OUTPUT);
  digitalWrite(13,LOW);
  //LowPower.powerDown(SLEEP_8S, ADC_OFF, BOD_OFF);
}</p><p>void loop(void){
  DrawPic(counter);
  counter++;
}</p><p>void wakeUp(){
  refreshCounter++;
  if(refreshCounter < refreshRate) enterSleep();
}</p><p>void DrawPic(int index){
  pinMode(lcd_on,OUTPUT);
  pinMode(13,OUTPUT);
  digitalWrite(13,LOW);
  //delay(2000);
  digitalWrite(lcd_on,HIGH);
  delay(300);
  epd_init(wake_up, reset);
  epd_wakeup(wake_up);
  epd_set_memory(MEM_TF);
  epd_clear();
  digitalWrite(13,HIGH);</p><p>  //int index = 7;
  String indexStr = String(counter);
  String str = 'i' + indexStr + ".BMP ";
  char character[str.length()] ;
  str.toCharArray(character, str.length());
  epd_disp_bitmap(character, 0, 0);
  epd_udpate();
  epd_enter_stopmode();
  while(1){
    ByteReceived = Serial.read();
    if(ByteReceived == 13){
      picSend= true;
    }
    if(ByteReceived == 69){
      errorFlag= true;
      //if(!picSend && counter == 1) noSDcard();
      //if(picSend && counter == 1) noPic();
      //resetFunc();
      counter = 0;
      //Serial.flush();
      break;
    }
    if(ByteReceived == 75 && picSend && picLoaded){
      break;
    }
    
    if(ByteReceived == 75 && picSend){
      picLoaded = true;
    }
    
  }
  digitalWrite(13,LOW);
  digitalWrite(lcd_on,LOW);
  picLoaded = false;
  errorFlag= false;
  picSend= false;
  refreshCounter = 0;
  
  enterSleep();
}</p><p>void noSDcard(){
  epd_wakeup(wake_up);
  //delay(5000);
  epd_clear();
  epd_set_ch_font(GBK32);
  epd_set_en_font(ASCII32);
  epd_disp_string("Can't find SD card", 0, 300);
  epd_udpate();
  delay(10000);
}</p><p>void noPic(){
  epd_wakeup(wake_up);
  //delay(5000);
  epd_clear();
  epd_set_ch_font(GBK32);
  epd_set_en_font(ASCII32);
  epd_disp_string("Can't find this picture", 0, 300);
  epd_udpate();
  delay(10000);
}</p><p>void enterSleep(){
  attachInterrupt(1, wakeUp, RISING);
  LowPower.powerDown(SLEEP_8S, ADC_OFF, BOD_OFF);
  wakeUp();
  detachInterrupt(1);
}</p>

Step 4: การเตรียมรูปภาพ

หน้าจอมีความละเอียด 800x600 และแสดงได้ 4 สี คือ ดำ, ขาว และสีเทาสองเฉด หน้าจอยังมีเครื่องอ่านการ์ดซึ่งเราจะใช้งานกัน อย่างไรก็ตาม การแค่อัปโหลดรูปภาพลงในการ์ดนั้นไม่เพียงพอ เพราะหน้าจอรองรับเฉพาะไฟล์ BMP เท่านั้น และยิ่งไฟล์มีขนาดเล็กเท่าไหร่ รูปก็จะถูกโหลดได้เร็วขึ้นและประหยัดแบตเตอรี่ได้มากขึ้น

โชคดีที่ปัญหาทั้งหมดนี้สามารถแก้ไขได้ด้วยโปรแกรมเดียวคือ Adobe Photoshop ผมเข้าใจว่าไม่ใช่ทุกคนที่มีโปรแกรมนี้ แต่คุณสามารถใช้ GIMP หรือ paint แทนได้ ทว่าผมจะแสดงวิธีทำทั้งหมดนี้ใน Photoshop ให้ดูครับ

ผมแนะนำให้ดูวิดีโอสำหรับขั้นตอนนี้เพราะจะเห็นภาพชัดเจนกว่า โดยเริ่มจากการลากรูปภาพเข้า PS ไปที่ Image -> image size ตรวจสอบให้แน่ใจว่าหน่วยเป็น pixels และตั้งค่าความสูงเป็น 600 ส่วนความกว้างจะถูกเปลี่ยนโดยอัตโนมัติ หากความกว้างไม่เท่ากับ 800 คุณจะต้องตัดขอบด้านข้างของภาพออกเพื่อให้ได้ความละเอียดที่ถูกต้อง ไปที่ Image -> canvas size ตั้งค่าหน่วยเป็น pixels อีกครั้งและตั้งความกว้างเป็น 800 กด OK แล้วกด Proceed ตอนนี้รูปภาพของคุณควรจะมีขนาดที่ถูกต้องแล้ว

ปกติรูปภาพจะดูเข้มกว่าปกติเล็กน้อยบนหน้าจอ E-ink ดังนั้นควรปรับความสว่างเพิ่มขึ้นอีกหน่อย คลิกที่ไอคอนรูปดวงจันทร์ (วงกลมที่มีครึ่งสีดำและขาว) ที่มุมขวาล่างแล้วเลือก Brightness/Contrast ผมมักจะตั้งค่าความสว่างไว้ที่ 30 แต่คุณสามารถปรับแต่งได้ตามใจชอบ ต่อไปเราจะเปลี่ยนให้เป็นแบบ 4 สีเพื่อดูตัวอย่างว่าภาพจะเป็นอย่างไร ไปที่ Image -> Mode -> Indexed Color... หากโปรแกรมถามว่าจะ flatten layers หรือไม่ ให้คลิก OK ในส่วนของ palette ให้เลือก Local(adaptive) ในช่อง Colors ใส่ค่า 4 แล้วคลิก OK ต่อไปไปที่ Image -> Mode -> Color Table คุณควรจะเห็นสีทั้ง 4 สีของคุณ ตั้งค่าช่องซ้ายสุดเป็นสีดำและขวาสุดเป็นสีขาว สองช่องระหว่างนั้นควรเป็นเฉดสีเทา เลือก OK จากนั้นไปที่ File -> Save as เลือกประเภทไฟล์เป็น BMP

ชื่อไฟล์ควรจะเป็น iX.BMP โดยที่ X คือหมายเลขของรูปภาพ หากเป็นรูปแรกให้ตั้งชื่อว่า i1 แล้วกด save นามสกุล .BMP จะถูกเติมให้โดยอัตโนมัติ รูปที่ยี่สิบหกก็จะเป็น i26.BMP เป็นต้น เมื่อคุณกด save จะมีตัวเลือก BMP options ปรากฏขึ้น ให้เปลี่ยนค่า depth เป็น 4 Bit แล้วกด OK

ตรวจสอบให้แน่ใจว่า microSD card ของคุณฟอร์แมตเป็น FAT32 การ์ดควรจะว่างเปล่าและคุณสามารถคัดลอกรูปภาพลงไปได้เลย อย่างที่บอกไว้ว่าชื่อไฟล์ควรเริ่มตั้งแต่ i1 ถึง i150 หรือหมายเลขสุดท้ายที่คุณมี หากมีหมายเลขที่หายไป เช่น คุณมี i21.BMP แล้วข้ามไป i23.BMP รูป i23 และรูปถัดๆ ไปจะไม่ถูกโหลด เพราะซอฟต์แวร์จะวนกลับไปที่ 1 หลังจากจบรูปที่ 21

Step 5: เสร็จสมบูรณ์

เมื่อโหลดรูปภาพเรียบร้อยแล้ว คุณก็แค่เสียบการ์ดหน่วยความจำและใส่แบตเตอรี่เข้าไป รูปภาพแรกจะถูกโหลดขึ้นมาหลังจากผ่านไปไม่กี่วินาที และจะอัปเดตทุกๆ 24 ชั่วโมง แม้จะมีเพียง 4 สี แต่ภาพที่ออกมานั้นดูสวยงามน่าทึ่งจริงๆ ความละเอียดนั้นสูงมากสำหรับหน้าจอขนาดเล็กเช่นนี้ และการกระจายสีแบบ Adaptive color diffusion ทำให้ดูเหมือนว่ามีสีเทาอย่างน้อย 50 เฉดเลยทีเดียว

ไม่ต้องบอกก็รู้ว่าผมพอใจกับผลลัพธ์ที่ได้มาก นี่คือสิ่งที่จะวางอยู่บนโต๊ะทำงานของผมตลอดไป โปรดดูวิดีโอเพื่อข้อมูลเพิ่มเติมและขอขอบคุณ dfrobot.com เป็นอย่างสูงสำหรับการสนับสนุนชิ้นส่วนอุปกรณ์ หากคุณมีคำถามใดๆ สามารถสอบถามไว้ที่นี่หรือทวีตหาได้ที่ @Gyro_youtube