LCD & Touch Screen

ผลการเรียนรู้ (Learning Outcomes)

• อธิบายความต่างของภาพแบบ raster (พิกเซล) กับภาพแบบ vector และโครงสร้างของพิกเซลที่ประกอบด้วย sub-pixel แดง-เขียว-น้ำเงิน
• อธิบายหลักการจอ LCD: แสง backlight ส่องผ่าน polarizer และ liquid crystal ที่ถูกควบคุมด้วยสนามไฟฟ้าเพื่อปรับความเข้มแสงแต่ละพิกเซล
• เปรียบเทียบหน้าจอสัมผัสแบบ resistive, capacitive (surface / projected), และ infrared ทั้งหลักการ ข้อดี และข้อจำกัด
• เข้ารหัสสีแบบ RGB565 (16 บิต) และอธิบายว่าทำไมจึงใช้แดง 5 บิต เขียว 6 บิต น้ำเงิน 5 บิต
• ต่อจอ TFT ILI9341 เข้ากับ NUCLEO-F767ZI ผ่าน SPI พร้อมขา D/C, reset, chip select และ backlight (PWM)
• อธิบายเทคนิค bit-banging และเขียนโปรแกรมอ่านตำแหน่งสัมผัสเพื่อวาดจุดบนจอ

§11.1 ภาพดิจิทัลและโครงสร้างพิกเซล

ภาพดิจิทัลเก็บได้ 2 แนวทางหลัก. แบบแรกคือภาพ raster (บางทีเรียก bitmap): เก็บข้อมูลเป็นจุดต่อจุด แต่ละจุดเรียก พิกเซล (pixel) ซึ่งเก็บความเข้มแสงของแม่สีที่ตำแหน่งนั้น. เมื่อนำพิกเซลหลายจุดมาเรียงเป็นตาราง 2 มิติก็ประกอบเป็นภาพขึ้นมา.

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

แบบที่สองคือภาพ vector: เก็บเป็นสมการคณิตศาสตร์ รูปที่เห็นเกิดจากการตัดกันของเส้นและเส้นโค้งตามสมการ. ข้อดีคือซูมได้เรื่อย ๆ โดยภาพไม่แตก จึงเหมาะกับโลโก้และฟอนต์ที่รายละเอียดไม่เยอะ (เช่นไฟล์จาก Adobe Illustrator).

หนึ่งพิกเซลบนจอสีไม่ได้มีจุดเดียว แต่ประกอบด้วย sub-pixel 3 จุด คือแดง (R) เขียว (G) น้ำเงิน (B). เมื่อควบคุมความเข้มของ sub-pixel ทั้งสามแยกกันก็ผสมได้ทุกสี. ดังนั้นจอที่บอก resolution 1920×1080 จะมี sub-pixel รวมเป็น 3 เท่าของจำนวนพิกเซล.

§11.2 เทคโนโลยีจอ LCD ทำงานอย่างไร

LCD ย่อจาก Liquid Crystal Display (จอผลึกเหลว). ประเด็นสำคัญคือ LCD ส่องสว่างด้วยตัวเองไม่ได้ ต้องมีไฟส่องสว่างอยู่ข้างหลังเรียก backlight แล้ว LCD ทำหน้าที่เป็นวาล์วคอยปิด-เปิดแสงของแต่ละพิกเซล. ต่างจากจอ CRT รุ่นเก่า (ยิงอิเล็กตรอนใส่สารเรืองแสง) หรือจอ OLED ยุคใหม่ที่แต่ละพิกเซลเปล่งแสงเองได้.

หัวใจอยู่ที่ polarizer (ตัวกรองแสงเชิงขั้ว). แสงจาก backlight สั่นได้ทุกทิศทาง เมื่อผ่าน polarizer จะเหลือเฉพาะระนาบเดียว. ถ้าวาง polarizer สองแผ่นตั้งฉากกัน แสงจะผ่านไม่ได้เลย (มืดสนิท).

ระหว่าง polarizer สองแผ่นคือชั้น liquid crystal. เมื่อ ไม่ จ่ายไฟ โมเลกุลคริสตัลเรียงตัวบิดระนาบของแสงให้ผ่าน polarizer แผ่นที่สองได้ (สว่าง). เมื่อ จ่ายไฟ เกิดสนามไฟฟ้า คริสตัลเรียงตัวใหม่ไม่บิดแสง แสงจึงถูก polarizer แผ่นที่สองกั้น (มืด). การปรับแรงดันจึงปรับความเข้มแสงของพิกเซลได้ต่อเนื่อง — นี่คือหลักของจอแบบ TN (Twisted Nematic). จอสมัยใหม่ส่วนใหญ่ใช้ IPS ซึ่งคุมคริสตัลคนละแบบแต่หลักการพื้นฐานคล้ายกัน.

backlight สมัยนี้ใช้ LED (เดิมใช้หลอด fluorescent ที่ร้อนและใหญ่). แสงจาก LED จะผ่าน diffuser ให้กระจายทั่วหน้าจอ ผ่าน prism บังคับทิศให้พุ่งไปข้างหน้า แล้วจึงเข้าชั้น LCD panel.

เนื่องจาก backlight เป็นแสงขาว เราจึงฉาบ ฟิล์มสี (color filter) ลงบน sub-pixel แต่ละจุดให้เป็นแดง เขียว น้ำเงิน. คริสตัลด้านในของทั้งสาม sub-pixel เหมือนกันหมด ต่างกันแค่สีฟิล์มที่ฉาบทับ. เพราะต้องควบคุมทุก sub-pixel แยกกัน จอรุ่นแรก ๆ จึงมีปัญหา dead pixel (จุดเสียดับ) และ stuck pixel (จุดค้าง) ได้ง่าย.

§11.3 เทคโนโลยีหน้าจอสัมผัส (Touch Screen)

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

แบบ Resistive (ความต้านทาน): มีฟิล์มนำไฟฟ้า ITO (Indium Tin Oxide) สองชั้นประกบกัน โดยมีช่องว่างกั้น. เมื่อกดลงไป ฟิล์มสองชั้นแตะกันเกิดจุดที่กระแสไหลผ่าน. เรียกโครงสร้างนี้ว่า 4-wire เพราะมีขั้ว X+, X−, Y+, Y−. การหาพิกัด Y ทำโดยจ่ายไฟคร่อม Y+ กับ Y− แล้วอ่านแรงดันที่ X+; พิกัด Y = (แรงดันที่อ่านได้ ÷ แรงดันที่จ่าย) × ความสูงจอ. การหาพิกัด X ทำกลับด้าน คือจ่ายไฟคร่อมแกน X แล้วอ่านแรงดันที่ Y+.

ข้อดีของ resistive คือราคาถูก และกดด้วยอะไรก็ได้ที่มีแรง (นิ้ว ปากกา ถุงมือ) เพราะอาศัยแรงกดไม่ได้อาศัยประจุ. ข้อจำกัดคือได้ทีละ 1 จุดเท่านั้น (ถ้าแตะ 2 นิ้วจะได้ค่าเฉลี่ยตรงกลาง) ความโปร่งแสงเพียง 75–85% และของมีคมทำให้ผิวด้านบนเสียหายได้.

แบบ Capacitive (ความจุประจุ): มาตรฐานที่ใช้กันทุกวันนี้. จอปล่อยประจุไฟฟ้าไว้ นิ้วคนซึ่งนำประจุได้จะไปรบกวนสภาพประจุของจุดนั้น ตัว controller จึงรู้ว่ามีการสัมผัสที่ใด. แบ่งย่อยเป็น surface (ใส่ขั้วที่มุมจอ วัดกระแสจากแต่ละมุมแล้วคำนวณระยะ ได้ความละเอียดต่ำ) กับ projected (วางกริดสายส่ง-สายรับถี่ ๆ ทั่วจอ เมื่อแตะใกล้จุดใดประจุรั่วเข้านิ้วทำให้ตัวรับได้ประจุน้อยลง ได้ความละเอียดสูงและรองรับ multi-touch 10 จุด).

ข้อดีของ capacitive คือทนทาน (ไม่มีชั้นที่ต้องกดยืดหยุ่น) แม่นยำ และโปร่งแสงดี. ข้อจำกัดคือต้องแตะด้วยวัตถุที่นำประจุ นิ้วมือใช้ได้แต่ถุงมือธรรมดาใช้ไม่ได้ ต้องใช้ stylus แบบ active (ใส่ถ่าน) หรือถุงมือชนิดพิเศษที่ปลายนิ้วนำประจุ.

แบบ Infrared (อินฟราเรด): เหมาะกับจอขนาดใหญ่มาก (video wall) ที่ resistive/capacitive เริ่มคำนวณยากเพราะความต้านทานและการสูญเสียประจุ. วาง LED อินฟราเรดยิงลำแสงขวางหน้าจอ อีกด้านมีตัวรับ. เมื่อนิ้วหรือ stylus ไปขวางลำแสง ตัวรับฝั่งนั้นจะรับไม่ได้ ระบบจึงคำนวณตำแหน่งที่ถูกบังได้.

§11.4 การเข้ารหัสสี RGB565

จอ TFT ในแล็บแสดงสีได้ 65,536 สี (= 2 ยกกำลัง 16) ที่ resolution 320×240 ใช้ชิป controller เบอร์ ILI9341. การแทนสี 16 บิตนี้เรียก RGB565.

RGB565 แบ่ง 16 บิตเป็น แดง 5 บิต (บิต 15–11), เขียว 6 บิต (บิต 10–5), น้ำเงิน 5 บิต (บิต 4–0). ที่เขียวได้ 6 บิต (มากกว่าอีกสองสี) เพราะตาคนไวต่อสีเขียวมากที่สุด การเพิ่มระดับสีเขียวจึงช่วยให้ไล่เฉดดูเนียนขึ้น.

ตัวอย่างการคิดค่าสี: สีแดงเต็ม = บิตแดงเป็น 1 ทั้งหมด บิตเขียวและน้ำเงินเป็น 0 ได้ 0xF800. สีเขียวเต็ม = 0x07E0. สีน้ำเงินเต็ม = 0x001F. สีเหลือง = แดง+เขียว (น้ำเงินเป็น 0) = 0xFFE0. ในโปรแกรมจริงนิยมตั้งชื่อ constant ให้สี (เช่น RED, GREEN) แทนการจำเลขฐานสิบหกเพื่อให้โค้ดอ่านง่าย.

§11.5 ต่อจอ TFT เข้ากับ NUCLEO ผ่าน SPI

จอที่ใช้ในแล็บขนาด 2.8 นิ้ว 320×240 controller ILI9341 ใช้ไฟ 3.3–5V. ข้อควรจำเวลาซื้อจอคือ ให้ดูเบอร์ controller ก่อน (เช่น ILI9341, ILI9325) เพราะต้องมี library ที่คุม controller เบอร์นั้นได้.

จอนี้มี SPI (Serial Peripheral Interface) ถึง 3 ชุด: ชุดแรกสำหรับส่งข้อมูลภาพ RGB ไป LCD, ชุดที่สองสำหรับ touch sensor, ชุดที่สามสำหรับ SD card (ถ้าบอร์ดมี). SPI เป็นบัสแบบ master-out/slave-in ที่เราเคยเรียน MCU เป็น master ส่วนจอเป็น slave.

นอกจากสาย SPI (SCK, MOSI, MISO) ยังมีขาคุมอีกหลายเส้นที่ต่อเป็น GPIO ธรรมดา: D/C (Data/Command — บอกว่าไบต์ที่ส่งเป็นข้อมูลภาพหรือเป็นคำสั่ง), RESET, CS (Chip Select) และ LED (คุม backlight). ถ้าอยากให้ backlight ติด 100% ต่อขา LED เข้าไฟตรง ๆ ได้ แต่ถ้าอยากหรี่-เพิ่มความสว่างให้ต่อ PWM (ควรผ่านทรานซิสเตอร์เพราะกระแสจากขา MCU เส้นเดียวอาจไม่พอ).

เรื่องน่าสังเกต: ขา touch sensor ดูชื่อเป็น SPI แต่ตัวอย่างในแล็บกำหนดให้เป็น GPIO ธรรมดา. เหตุผลคือใช้เทคนิค bit-banging — ใช้ ซอฟต์แวร์ จำลองการทำงานของโพรโทคอล SPI ด้วยการสั่งขา GPIO ขึ้น-ลงเองตามจังหวะ แทนการใช้ฮาร์ดแวร์ SPI (เหมือน SoftwareSerial ใน Arduino ที่จำลอง UART). ทำเช่นนี้เมื่อโมดูลฮาร์ดแวร์ SPI มีไม่พอหรือต้องการวางขาที่สะดวกกว่า.

ในตัวอย่าง LCD Demo ยังต้องตั้งค่าเพิ่ม 3 อย่างใน CubeMX. หนึ่ง ตั้ง timer (ตัวอย่างใช้ TIM1) สำหรับ PWM backlight. สอง จำกัด system clock ที่ 200 MHz (ไม่ใช่ 216 MHz เต็ม) เพราะมีข้อจำกัดบางอย่างใน path ของ LCD. สาม เปิดใช้ (enable) Cache ของ Cortex-M7 เพราะการวาดจอทำงานกับพิกเซลที่อยู่ติดกัน (มี locality สูง) การมี Cache จึงช่วยให้วาดเร็วขึ้น เหมาะกับงานทำเกมบนจอ.

เคล็ดลับการตั้งชื่อขา: ใน CubeMX ช่อง User Label เราตั้งชื่อขาเองได้ เช่นตั้ง PB0 เป็น LD1, PB7 เป็น LD2, PB14 เป็น LD3. เวลาเขียนโปรแกรมจะเรียกด้วยชื่อนี้ ทำให้ย้ายบอร์ด/เปลี่ยนขาแล้วแก้แค่ที่ตั้งชื่อ โค้ดส่วนอื่นยังทำงานได้เหมือนเดิม.

uint16_t pos[2];
while (1) {
  // อ่านสถานะสัมผัส: คืน 1 ถ้ามีการแตะ, 0 ถ้าไม่มี
  if (TS_IsTouched()) {
    HAL_GPIO_WritePin(GPIOB, LD3_Pin, GPIO_PIN_RESET); // สัมผัส → LD3 ดับ
    TS_GetCoordinate(pos);        // คืนพิกัดเป็น array 2 ตัว: pos[0]=X, pos[1]=Y
    uint16_t x = pos[0];
    uint16_t y = pos[1];
    LCD_DrawCircle(x, y, 2, BLACK); // วาดวงกลมรัศมี 2 พิกเซลสีดำตรงจุดที่แตะ
    LCD_DrawText(x, y, "touch");     // พิมพ์ข้อความตรงจุดนั้น
  } else {
    HAL_GPIO_WritePin(GPIOB, LD3_Pin, GPIO_PIN_SET); // ไม่สัมผัส → LD3 ติด
  }
}