Introduction to TFT + Touch Screen with Arduino Boards
วันนี้เรามาแนะนำการใช้งานจอ TFT และ จอ TFT แบบ Touch Screen กันครับ
ก่อนอื่นผมจะให้ดูรูปนี้เพื่อเข้าใจหลักการทำงานของจอสีแบบ TFT นะครับ จอที่เห็นด้านล่างเป็นจอที่ใช้ RGB LED มาเรียงกันเพื่อให้มีขนาดใหญ่ แต่ถ้าเข้าไปดูใกล้ๆ จะเห็นแบบภาพต่อไปครับ
ภาพด้านล่างนี้จะเห็นชัดนะครับว่ามันเกิดจากการใช้ LED สีแดง เขียว น้ำเงิน มาใช้ในแต่ละ Pixel เพื่อผสมสีกัน ที่เห็นนี้เป็นจอสนามนะครับ คือมันใช้นอกอาคาร อาจจะต้องทนแดดทนฝุ่นกันหน่อย แถมต้องมีขนาดใหญ่มากๆ และมักติดภายนอกอาคารชั้น 2-3 ทำให้มีระยะห่างจากผู้ดูจอไกลพอสมควร ซึ่งจะทำให้ผู้ดูไม่เห็นรายละเอียดแบบภาพด้านล่าง แต่เห็นเป็นภาพโดยรวมแทนครับ
ทีนี้ถ้าเป็นจอคอมพิวเตอร์ หรือ จอทีวีตามบ้าน ก็คงใช้ LED เป็นเม็ดๆ แบบนี้ไม่ได้ครับ เพราะเราจะต้องนั่งใกล้จอกัน คือมีระยะห่างจากจอน้อย ทำให้มองเห็นเป็นจุดๆ เต็มไปหมด พวกวิศวกรก็เลยหาทางย่อขนาดให้เล็กลงเรื่อยๆ เรียกว่าสามารถมีความละเอียดของจอ หรือ Pixel ต่อพื้นที่ (Resolution) จำนวนมากๆ ดังนั้นเราก็จะเห็นเป็นภาพที่เรียบ ยิ่งมี Resolution สูงมากก็ยิ่งให้ภาพคมชัด แต่แน่นอนครับ ราคาก็ต้องสูงตามไปด้วย ภาพด้านล่างนี้คือภาพขยายระดับ microscope ของจอสีชนิด Twisted nematic (TN) นะครับ จะเห็นว่าก็ประกอบด้วย RGB เช่นกัน
หลักการแสดงภาพนั้นจะใช้หลักการเดียวกับ RGB LED 8x8 ที่เคยเขียนไว้ในบทความก่อนหน้านะครับ โดยสรุปคือการที่เราเห็นเป็นภาพนั้น แท้จริงแล้วการควบคุมจอนั้นจะทำไปทีละ pixel แต่กวาดไปทั้งจอด้วยความเร็วที่ตาเราจะมองแยกไม่ออก หรือ ที่เรียกหลักการนี้ว่า "Persistence of Vision"
ภาพจาก Wikipedia (http://en.wikipedia.org/wiki/Thin-film-transistor_liquid-crystal_display)
เมื่อเวลาผ่านไปหลายสิบปีจากจอ RGB รุ่นแรกๆ เทคโนโลยีใหม่ๆ ก็เข้ามา และเทคโนโลยีที่เราใช้ในจอ TFT หรือ Thin Film Transistor Liquid Crystal Display (TFT-LCD) ก็ก้าวเข้าสู่ระดับราคาที่พอจะทำเชิงพานิชย์ได้ แน่นอนครับมันคือเวลาที่ประเทศจีนสามารถผลิตจอได้ในราคาที่ทุกคนเข้าถึง และเข้าไปอยู่ในอุปกรณ์ไฟฟ้ารอบๆตัวเรามากมายไปหมด ตั้งแต่จอมือถือ จอคอมพิวเตอร์ จอกล้อง จอแสดงผลในรถยนต์ เครื่องมือเครื่องใช้ทางการแพทย์ และอืนๆอีกมาก
และก็แน่นอนครับ มันก็มีได้หลายขนาดมากๆ และก็มีคนหัวใสไปเอามาใช้กับบอร์ด Arduino ซึ่งก็มีทั้ง TFT LCD 1.8", TFT LCD 2.2", 2.4" TFT LCD Module Display +Touch Panel Screen , TFT LCD 3.2" Module Display + Touch Screen มีทั้งแบบที่เป็นหน้าจอแสดงผลเท่านั้น หรือ จะเป็นจอ Touch Screen ด้วย ซึ่งก็มีราคาต่างกันไปเยอะครับ
คราวนี้มาที่เรื่องของเราครับ คือการใช้งานจอ TFT นี้กับบอร์ด Arduino มีข้อมูล 2 เรื่องที่สำคัญก่อนที่จะไปถึงวิธีการใช้งานนะครับ
เรื่องแรก คือจอ TFT ที่มีขายกันทั่วไปในร้านอิเล็กทรอนิกส์นั้น โดยมากจะมีแรงดันทำงาน (Operating Voltage) ที่ระดับ 3.3 V นะครับ แต่บอร์ดบางรุ่น โดยเฉพาะรุ่นยอดนิยมอย่าง Arduino UNO R3 และ Arduino Mega 2560 นั้น มีแรงดันที่แต่ละ PIN ที่ 5 V ถ้าเอาจอ TFT ไปต่อโดยตรงกับบอร์ด ก็จะทำให้เสียหายได้ครับ (ผมยังไม่เคยลองว่ามันเสียยังไง เลยบอกไม่ได้ครับ) วิธีแก้ไขก็คือการใช้ตัวต้านทานมาต่อให้เป็น Voltage Divider ให้กับทุกขาของ TFT แต่วิธีนี้ท่าทางจะใช้เวลาและแรงกายเยอะไปหน่อย วิธีที่ง่ายกว่า (แต่ต้องใช้เงินแลกซื้อ) ก็คือการใช้ TFT01 Arduino Shield ครับ ซึ่งก็มีหลายรุ่น สำหรับบอร์ดแต่ละแบบนะครับ
ข้อดีของการใช้ Shield แบบนี้ก็คือเราไม่ต้องมากังวลเรื่องการต่อขาให้ตรงกับตัวบอร์ดอีกแล้วครับ เพราะเขาออกแบบมาให้ใช้คู่กับบอร์ด และ Library พร้อมเสร็จเลย
เรื่องที่สองคือ บอร์ดแต่ละรุ่นก็จะมี RAM ในส่วนที่ใช้บันทึกโปรแกรมอยู่จำกัดนะครับ เช่น บอร์ด Arduino UNO R3 ก็จะมี Memory น้อยกว่า Arduino Mega 2560 ดังนั้นในเวลาใช้งานอาจจะเจอ Arduino IDE มันฟ้องได้บ้างว่าบอร์ดไม่สามารถบรรจุโปรแกรมลงไปได้ (Sketch is too big)
การใช้งานวันนี้จะแบ่งออกเป็น 2 ส่วน คือ การใช้งานเพื่อแสดงผลเป็นจออย่างเดียว (Universal TFT : UTFT) และ การใช้งานเป็น Touch Screen ครับ
เริ่มต้นจากการใช้งานเพื่อแสดงผลเป็นจออย่างเดียว (Universal TFT : UTFT)
ในการติดต่อคุยกับจอ TFT จะต้องคุยผ่าน Controller Chip ซึ่งจะใช้การสื่อสารแบบ SPI (Serial Peripheral Interface) นะครับ การสื่อสารแบบนี้มีมาให้เป็นขามาตรฐานของบอร์ด Arduino อยู่แล้ว และก็ไม่ต้องตกใจครับ เราสั่งตัว Controller chip กับ จอ TFT นี้โดยเรียกใช้ Library ครับ ไม่ต้องมานั่งเขียนเองตั้งแต่เริ่ม
การสื่อสารและควบคุมบอร์ดก็จะมีทั้งแบบ 8 บิต และ 16 บิตครับ แต่ที่เราจะใช้กับบอร์ดรุ่นเล็กๆ อย่าง Arduino UNO R3 ก็จะเป็นแบบ 8 บิตนะครับ
อุปกรณ์ (Hardware) ที่ผมจะใช้ในวันนี้นะครับ
1. Board Arduino UNO R3
3. 2.4" TFT 240*320 V1.3 (อันนี้คือตัวจอครับ)
Software + Library ที่ต้องใช้
1. เราจะทดลองกับ Arduino IDE 1.5 กันครับ (จริงผมลองหลายตัว ก็ไม่มีปัญหาครับ ไล่ตั้งแต่ 1.02 ถึง 1.5)
2. UTFT Library by Henning Karlsen
ก่อนอื่นก็เอามาประกอบก่อนครับ
แล้วลอง Download Library มาดูครับ
http://www.henningkarlsen.com/electronics/download.php?f=UTFT.rar
ใน Folder ที่ Download มา หลังจาก Unzip แล้วจะมีไฟล์ PDF อยู่หลายตัวครับ
ลองเปิดดูไฟล์ UTFT_Requirements ดูจะเห็นรายละเอียดของ PIN ต่างๆนะครับ อย่างทีบอกครับ ถ้าเราใช้ TFT01 Arduino Shield การต่อจอ TFT ก็จะเรียบร้อยมาแล้ว แค่วางซ้อนกันลงบนบอร์ดเท่านั้นครับ
ส่วนอีกไฟล์ PDF ที่สำคัญคือ UTFT Manaul ซึ่งจะเป็นตัวอธิบายคำสั่งที่ใช้กับ Libary ครับ
ไฟล์ PDF ที่สำคัญอีกอันคือ UTFT Supported Display modules & LCD Controllers ไฟล์นี้สำคัญตรงที่มันจะบอกชื่อ Model ซึ่งเป็น Keyword ที่ใช้ใน Sketch ว่าเราใช้ จอ TFT รุ่นอะไร มีความละเอียดของจอและขนาดเท่าไหร่
เสร็จแล้วอย่าลืมติดตั้ง Library ลงไปแล้ว restart Arduino IDE นะครับ
ตัวอย่างแรก UTFT_ViewFont.ino (ทดลองกับ Arduino UNO R3 + Freaduino TFT Shield V2.0 และ จอ TFT 2.4" 240*230 V1.3)
คราวนี้มาลอง Sketch เบิ้องต้นที่เขียนแสดง Font แบบต่างๆลงบนจอนะครับ ก่อนอื่นต้องรู้ชนิดของจอที่ใช้ก่อน จอที่ผมใช้คือ 24"TFT 240*320 V1.3 และถ้าไปเปิดดูตารางในไฟล์ UTFT_Supported_display_modules_&_controllers.pdf ซึ่งอยู่ใน Library ที่เพิ้ง Download มา เราจะพบกับข้อมูลแบบนี้ครับ Model ของจอนี้จะต้องระบุลงใน Sketch ให้ถูกนะครับ จอที่ผมใช้ก็ต้องระบุว่า TFT01_24R2
หมายเหตุ จะใช้ Sketch ที่ให้มาใน Examples ก็ได้นะครับ แต่แก้ตามที่ผมระบุด้วยครับ หรือจะ copy File ด้านล่างเลยก็ได้ถ้าใช้ Hardware รุ่นเดียวกับผม
// UTFT_ViewFont (C)2012 Henning Karlsen// web: http://www.henningkarlsen.com/electronics//// Modified by Arduitronics.com 10/2/2014// This program is a demo of the included fonts.//// This demo was made for modules with a screen resolution// of 320x240 pixels.//// This program requires the UTFT library.//#include <UTFT.h>// Declare which fonts we will be usingextern uint8_t SmallFont[];extern uint8_t BigFont[];extern uint8_t SevenSegNumFont[];// Uncomment the next line for Arduino 2009/UnoUTFT myGLCD(TFT01_24R2,19,18,17,16); // Remember to change the model //parameter to suit your display module!// Uncomment the next line for Arduino Mega//UTFT myGLCD(TFT01_32,38,39,40,41); // Remember to change the model //parameter to suit your display module!void setup(){myGLCD.InitLCD();myGLCD.clrScr();}void loop(){myGLCD.setColor(0, 147, 159);myGLCD.setBackColor(VGA_BLACK);myGLCD.setFont(BigFont);myGLCD.print(" !\"#$%&'()*+,-./", CENTER, 0);myGLCD.print("0123456789:;<=>?", CENTER, 16);myGLCD.print("@ABCDEFGHIJKLMNO", CENTER, 32);myGLCD.print("PQRSTUVWXYZ[\\]^_", CENTER, 48);myGLCD.print("Arduitronics.com", CENTER, 80);myGLCD.setFont(SmallFont);myGLCD.print(" !\"#$%&'()*+,-./0123456789:;<=>?", CENTER, 120);myGLCD.print("@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_", CENTER, 132);myGLCD.print("`abcdefghijklmnopqrstuvwxyz{|}~ ", CENTER, 144);myGLCD.setFont(SevenSegNumFont);myGLCD.print("0123456789", CENTER, 190);while(1) {};} |
รายละเอียดของ Function ต่างๆ ให้ดูในไฟล์ UTFT.pdf นะครับ
การเลือกสีตัวอักษรและ background นั้นให้ดูที่เว็บนี้เพื่อใช้รหัส RGB ครับ
ตัวอย่างที่สอง ทดสอบการแสดงภาพ โดยใช้ Hardware คือ Arduino Mega 2560 + TFT LCD Mega Shield V2.2 และจอ TFT_320QVT
ในตัวอย่างนี้ ผมจะใช้ภาพของ Yosemite ซึ่งเป็นอุทยานแห่งชาติของสหรัฐอเมริกามาแสดงบนจอนะครับ
ข้อมูลเบื้องต้นที่จำเป็นต้องรู้ก่อนที่จะเริ่มลงโปรแกรมนะครับ
1. บอร์ดต่างๆที่เราใช้ ไม่ว่าจะเป็น Arduino UNO R3 หรือ Arduino Mega 2560 หรือ อื่นๆ เป็นไมโครคอนโทรลเลอร์ขนาดเล็ก มีหน่วยความจำที่จำกัด และต้องใช้ร่วมกับการเก็บโปรแกรมนะครับ ดังนั้นเราจะใส่ภาพได้เฉพาะขนาดเล็กเท่านั้น เท่าที่ผมลองดูกับ Arduino Mega 2560 ภาพที่พอลงได้ก็จะอยูที่ 96x76 pixel เท่านั้นนะครับ คือเล็กมาก ใหญ่กว่านี้จะค่อนข้างลำบากครับ
2. เราสามารถบันทึกภาพลงบนตัวไมโครคอนโทรลเลอร์บนบอร์ดได้ แต่ต้องแปลงเป็นไฟล์ .c นะครับ ขั้นตอนการแปลงไฟล์ที่ผมใช้ก็มีดังนี้ครับ
2.1 เลือกรูปที่ชอบมาและปรับให้มีขนาดเล็กลง ผมเลือกใช้โปรแกรม Paint ครับ และใช้ Function Resize เพื่อย่อภาพและกำหนดขนาดเป็น Pixel เลยครับ
2.2 จากนั้นเราจะใช้โปรแกรม ImageConverter565 เพื่อแปลงให้อยู่ใน format บน .c นะครับ สามารถ download โปรแกรมได้ที่นี่ครับ หรือ ถ้าไม่อยากโหลดก็แปลง online ได้ที่นี่ครับ
สังเกตนะครับ ภาพเล็กนิดเดียวเท่านั้น และเราเลือกไฟล์ที่เก็บเป็น .c โดยเลือกชื่อไฟล์เป็น Yosimite128.c แล้วกด save ในตำแหน่งที่ต้องการ ถ้าลองเปิดไฟล์ดูด้วย Visual studio หรือ TextEditor ตัวอื่นๆ ก็จะเห็นประมาณนี้ครับ
จากนั้นเอาไฟล์ที่เราสร้างนี้ไปไว้ใน Folder เดียวกับ Sketch ที่เราใช้งานครับ
ทีนี้มาดูที่ Sketch กันครับ จุดที่ต้องแก้ไข โดยขึ้นกับภาพ และ ชนิดของ Hardware นะครับ
extern unsigned int yosemite[0x1B00] ; // ตรงนี้จะเห็นเว่าเราต้องใส่ขนาดของภาพด้วยครับ ซึ่งจะดูได้จากรายละเอียดของไฟล์ yosemite.c
และจุดแก้ไขชนิดของจอให้ตรง model ที่ใช้นะครับ เลือกได้แบบเดียวกับขั้นตอนในตัวอย่างแรกครับ
UTFT myGLCD(TFT01_32,38,39,40,41); // Remember to change the model //parameter to suit your display module!
// UTFT_Bitmap (C)2012 Henning Karlsen// web: http://www.henningkarlsen.com/electronics//// This program is a demo of the drawBitmap()-function.//// This demo was made to work on the 320x240 modules.// Any other size displays may cause strange behaviour.//// This program requires the UTFT library.//#include <UTFT.h>#include <avr/pgmspace.h>// Declare which fonts we will be usingextern uint8_t SmallFont[];// Uncomment the next line for Arduino 2009/Uno//UTFT myGLCD(ITDB32S,19,18,17,16); // Remember to change the //model parameter to suit your display module!// Uncomment the next line for Arduino MegaUTFT myGLCD(TFT01_32,38,39,40,41); // Remember to change the model parameter to suit //your display module!extern unsigned int yosemite[0x1B00] ;void setup(){myGLCD.InitLCD();myGLCD.setFont(SmallFont);}void loop(){myGLCD.fillScr(255, 255, 255);myGLCD.setColor(255, 255, 255);myGLCD.print(" *** Arduitronics.com Mega 2560 with TFT01 *** ", CENTER, 228);// for (int x=0; x<10; x++)// for (int y=0; y<7; y++)myGLCD.drawBitmap (20, 10, 96, 72, yosemite,3);delay(5000);} |
เรียบร้อยก็ Upload Sketch กันเลยครับ ต้องบอกนิดครับว่าอาจจะใช้เวลา Compile และ Upload นานกว่าปกติซะหน่อย อันนี้เป็นเพราะขนาดไฟล์มันใหญ่กว่าปกติครับ
เสร็จแล้วผลงานเราก็ได้ประมาณนี้ครับ !!!!
หรือใครอยากจะลอง Sketch ที่ให้มาเป็นตัวอย่างใน Library ก็ได้นะครับ ไปที่ UTFT_Demo_320x240 แก้ไขชนิดของจอ และชนิดของบอร์ดนะครับ จะได้ตัวอย่างที่แสดงบนเว็บของ Elecfreaks.com ตามนี้ครับ
วันนี้พอแค่นี้ครับ คิดว่ายาวมากที่สุดเท่าที่เคยเขียนบทความมาเลย คราวหน้าพบกันในตอนที่ 2 เรื่องการใช้ Touch Screen นะครับ
Link ที่น่าสนใจ
UTFT Manual
https://www.robotics.org.za/datasheet/UTFT_library_ref.pdf
Library
http://www.henningkarlsen.com/electronics/library.php?id=51
Schematics
http://www.elecfreaks.com/wiki/index.php?title=2.4%22_TFT_LCD:_TFT01-2.4#8_bit_Show_Picture_Demo
TFT by Elecfreaks
http://www.elecfreaks.com/1249.html
อ่านต่อบทความตอนที่ 2
การใช้งาน TFT LCD Touch Screen
https://www.arduitronics.com/article/introduction-to-tft-touch-screen-with-arduino-boards-part-ii
อ่านบทความแล้วมีข้อสงสัย หรือมีข้อแนะนำ ก็ติดต่อมาได้นะครับ
โดย Mountain A
หน้านี้เป็นสารบัญของบทความที่ปรากฏในเว็บของ Arduitronics.com นะครับ จะขอแบ่งออกเป็นหัวข้อตามกลุ่มของสินค้าในร้านดังต่อไปนี้
- การลงโปรแกรม
- Raspberry Pi - Media Center (ตอนที่ 1)
- Raspberry Pi - Media Center (ตอนที่ 2)
- Raspberry Pi - How to Cook Raspbian OS
- Raspberry Pi - Connect to the real world : Part 1
- Raspberry Pi -- Connect to the real world GPIO : Part 2
- Raspberry Pi กับ Shield ของ Arduino
- Raspberry Pi - Analog Input with ADC (MCP3208)
- การลงโปรแกรมและไลบรารี่
- เรื่องของบอร์ด Arduino และ การใช้งานบอร์ด
- โมดูลเพื่อวัดค่าจากสิ่งแวดล้อม
- การใช้งาน PM 2.5 Sensor กับ UNO R3 (ตอนที่ 1)
- Arduino Uno Wifi Rev2 (คำนวนมุม Roll และ Pitch จากค่าความเร่งที่วัดได้จาก Accelerometer)
- Arduino Uno Wifi Rev2 (อ่านค่า gyro และ accelerometer ที่ติดมากับบอร์ด)
- การใช้งาน Arduino Uno WiFi (ตอนที่ 1)
- การใช้งาน Arduino Uno WiFi (ตอนที่ 2)
- การใช้งาน DHT11 Humitdity and Temperature Sensor กับบอร์ด Arduino
- Ultrasonic Ranging Module HC-SR04
- Inertial Sensors: หามุม Pitch และ Roll จากเซ็นเซอร์วัดความเร่ง
- Real Time Clock DS3231
- Moisture Sensor on Arduino and Android over Bluetooth
- Moisture Sensor on Arduino and Android over Bluetooth: Part 2
- I2C Communication: Case study of GY-30 (Ambient Light Sensor)
- Inertial Measurement Unit - GY-80 Module for Arduino: Part 1 ADXL345
- Inertial Measurement Unit - GY-80 Module for Arduino: Part 2 L3G4200D
- โมดูลสื่อสาร
- การใช้งาน Motor และ Relay
- การแสดงค่าต่างๆ (แสง สี เสียง จอ)
- โมดูลเพื่อการบันทึกค่าและส่งค่า
- เรื่องของสัญญาณ
- เรื่องของ GPS และการประยุกต์ใช้
- เรื่องทั่วไปเกี่ยวกับ Arduino
@rfm0967y
ติดต่อสอบถาม
Join เป็นสมาชิกร้านค้า
MEMBER
