สำหรับใครที่ยังไม่ได้ดู Lab 1 สามารถเข้าดูได้จาก

วิธีใช้งานหน้าจอสัมผัส ili9341 กับ Nodemcu (esp8266) [Lab1]

Lab 2 : เรียนรู้การใช้ฟังก์ชันต่างๆ

 

ไลบรารี่ TFT_eSPI ใช้รูปแบบฟังก์ชันคล้ายของ Adafruit_ili9341 ซึ่งเป็นต้นฉบับ โดยในแลปนี้จะยกตัวอย่างฟังก์ชันที่ใช้บ่อยๆเป็นพื้นฐานสำหรับสร้างความเข้าใจในการประกอบเป็นรูปร่างที่ต้องการกันครับ โดยสามารถทำตามทีละสเต็ปหรือใช้เป็น reference ในอนาคตก็ได้

 

1.1        ตั้งค่าแนวตั้งของจอ

เราสามารถตั้งค่าแนวตั้งแนวนอน หรือกลับหัว ได้โดยใช้ฟังก์ชัน

setRotation( ตัวเลข 0-3 );

นิยามฟังก์ชัน

 

ซึ่งแต่ละตัวเลขจะแทนมุมการหมุนจอที่แตกต่างกันในแต่ละรุ่น

 

สำหรับรุ่น ili9341 เลข 0 คือกำหนดให้แนวยาวเป็นแนวเริ่มต้น โดย pixel จะนับตั้งแต่ซ้ายไปขวาสำหรับแกน x บนลงล่างสำหรับแกน y

tft.setRotation(0);

 

1.2        สี

นิยามของการเลือกสีใน TFT_eSPI จะใช้วิธีเลือกจากใน macro ที่มีให้อยู่แล้วคือ

1.3        สีพื้นหลัง

กำหนดสีพื้นหลังเป็นสีดำ โดยใช้สีจากตารางในข้อ 2.2

  tft.fillScreen(TFT_BLACK);

 

1.4        ข้อความและการจัดวาง

ฟังก์ชันกำหนดค่าสีข้อความ เช่น กำหนดสีข้อความให้เป็นสีขาว พื้นหลังข้อความโปร่งแสง

  tft.setTextColor(TFT_WHITE);

 

ฟังก์ชันกำหนดค่าสีข้อความพร้อมพื้นหลังข้อความ กำหนดสีข้อความสีดำ พื้นหลังสีขาว

  tft.setTextColor(TFT_BLACK, TFT_WHITE);  

 

เขียนข้อความ สมมติเขียน  TEXT HERE ที่ตำแหน่ง x=10 (นับจากขอบซ้าย 10 pixel) Y= 100 (นับจากขอบบน 100pixel) ขนาดอักษร 2

  tft.drawString("TEXT HERE", 10, 100, 2); 

 

เขียนข้อความ CENTER โดยตำแหน่งที่เราใส่จะเป็นจุดศูนย์กลางข้อความ ที่ตำแหน่ง x=60  y=150 ขนาดอักษร 4

  tft.drawCentreString("CENTER", 60, 150, 4); 

 

เขียนข้อความ RIGHT โดยตำแหน่งที่เราใส่จะเป็นจุดขวาบนสุดของข้อความ สมมติวางที่ตำแหน่ง x=240 (สุดขอบขวาจอ) y=0 ขนาดอักษร 1

  tft.drawRightString("RIGHT", 240, 0, 1);

 

ทั้งสามแบบรวมกันจะได้รูปร่างออกมาดังรูป

 

1.5        เส้นตรง

ลากเส้นตรงจากจุด (0,30)  ไปยังจุด (100,320) เส้นสีฟ้าทะเล

  tft.drawLine(0,30,100,320,TFT_CYAN);

 

ลากเส้นตรงแนวดิ่ง เริ่มจากจุด (120, 160) ความยาว 80 pixel สีเหลือง

  tft.drawFastVLine(120, 160, 80, TFT_YELLOW);

 

ลากเส้นตรงแนวตั้ง เริ่มจากจุด (120, 160) ความยาว 40 pixel สีฟ้า

  tft.drawFastVLine(120, 160, 40, TFT_BLUE);

 

หน้าตาจะออกมาประมาณนี้

 

1.6        สี่เหลี่ยมกลวง, ทึบ

วาดสี่เหลี่ยมกลวง ที่ตำแหน่งมุมซ้ายบนที่ (180, 60) ขนาดกว้างยาว 30x100 สีแดง

  tft.drawRect(180, 60, 30, 100, TFT_RED);

 

วาดสี่เหลี่ยมทึบ ที่ตำแหน่งมุมซ้ายบนที่ (190, 140) ขนาดกว้างยาว 20x20 สีฟ้า

  tft.fillRect(190, 140, 20, 20, TFT_BLUE);

 

วาดสี่เหลี่ยมกลวงขอบมนรัศมี 5 ที่ตำแหน่ง (155,60) ขนาดกว้างยาว 25x25 สีเขียว

tft.drawRoundRect(155, 60, 25, 25, 5, TFT_GREEN);

 

วาดสี่เหลี่ยมทึบขอบมนรัศมี 10 ที่ตำแหน่ง (155,86) ขนาดกว้างยาว 25x25 สีเขียว

tft.fillRoundRect(155, 86, 25, 25, 10, TFT_CYAN);

รวมๆกันแล้วควรได้รูปร่างออกมาตามนี้

 

1.7        วงกลมกลวง, ทึบ

ทำนองเดียวกับสี่เหลี่ยม วาดวงกลมกลวงใช้ draw วาดวงกลมทึบใช้ fill โดยวาดกลวงไว้ที่ (200,300) รัศมี 20 สีน้ำตาล และวาดวงกลมทึบไว้ด้านในตำแหน่งเดียวกันรัศมี 10 สีน้ำตาล

  tft.drawCircle(200, 300, 20, TFT_BROWN);

  tft.fillCircle(200, 300, 10, TFT_BROWN);

 

หน้าตาจะออกมาดังนี้

 

1.8        การลงรูป

ลงรูป Logo ร้านที่ตำแหน่ง 0,0 ขนาด 100x99 pixel

  tft.setSwapBytes(true);

  tft.pushImage(0,0,100,99,image);

 

โดยตัวแปร image เป็น array ของสีในรูปแบบ RGB565 ซึ่งสามารถใช้โปรแกรม ImageConverter565 ใน

Arduino\libraries\UTFT\Tools\ImageConverter565.exe

(หากใครยังไม่ลง UTFT ให้ลงผ่าน Tools->Library manager ก่อน)

จากนั้นให้ตั้งค่าต่างๆดังนี้

 

จากนั้นกด save จะได้ไฟล์ .c ออกมา ให้เราคัดลอกตัวแปร array ไว้เป็น global variable (คือไม่ได้อยู่ใน loop() หรือ setup())

 

สุดท้าย เราควรได้รูปหน้าตาประมาณนี้ 

 


โค้ดเต็มของบทความ

ในแลปหน้าจะมาอธิบายเรื่องการใช้ Touch screen และ การcalibrate touch screen

Stay tune!




(แถม)

ธนบดี บุหลันศรีชาติ

ผู้เขียน