นั่งเล่น Internet of Things กัน: ESP32:Board:TTGO T-Display

Board TTGO T-Display

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

มี จอ IPS ขนาด 1.4 นิ้ว 135x240 พิกเซล ต่อแบบ SPI
สามารถต่อแบ็ตเตอรี่ 3.7v สามารถชาร์ตได้ในตัว
มีปุ่มให้ใช้สองปุ่ม

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

ทดสอบปุ่ม

บอร์ดนี้เป็นอีกตัวของ TTGO ที่ไม่มีให้เลือกตรงๆจาก Arduino IDE เวลาใช้งานให้เลือกบอร์ดเป็น ESP32 Dev Module เนื่องจากไม่มีหลอด LED ในตัวเลยใช้โปรแกรม Blink ทดสอบไม่ได้ ลองทดสอบด้วยโปรแกรม DigitalReadSerial แต่ต้องแก้ค่าปุ่มไปใช้ปุ่ม 0 หรือ 35 บนบอร์ดก็ได้ เปิดดูสถานะการกดปุ่มที่ Tools/Serial Monitor หรือ Tools/Serial Ploter เพื่อดูสถานะการกดปุ่ม (อย่าลืมตั้งค่าให้เป็น 9600 baud) ค่าที่อ่านได้จากปุ่ม
1 ปล่อยปุ่ม
0 กดปุ่ม

int pushButton = 35;
void setup() {
  Serial.begin(9600);
  pinMode(pushButton, INPUT);
}
void loop() {
  int buttonState = digitalRead(pushButton);
  Serial.println(buttonState);
  delay(1); 
}

DigitalReadSerial แสดงใน Serial Plotter

ตัวอย่าง DigitalReadSerial 2ปุ่ม จะแสดงสถานะสองปุ่มในบรรทัดเดียวกันขั้นด้วยช่องว่างหนึ่งตัวอักษร ค่าปุ่มที่สองจะคูณด้วย 2 (ได้ค่า 0 หรือ 2) เพื่อจะได้เห็นความสูงของกราฟต่างจาก ปุ่ม 1

DigitalReadSerial 2ปุ่ม แสดงใน Serial Plotter

ทดสอบหน้าจอ

ต้องติดตั้งไลบารี่ TFT_eSPI เดิมต้องไปแก้โค้ดของไลบารี่ ในเวปอัปเดตล่าสุดให้ดาว์นโหลดมาไว้ในเครื่องและแตกไฟล์ออก ที่ Arduino IDE ให้เลือก Sketch/Include Library/Add Zip Library ให้เลือกไปที่โฟลเดอร์ TTGO-T-Display-master/TFT_eSPI ก็จะมี TFT_eSPI แค่นี้ก็ใช้หน้าจอได้แล้ว สามารถศึกษาจากตัวอย่างที่อยู่ใน Example ได้ ลองตัวอย่างง่ายๆกันก่อน จะเขียนคำว่า Hello ในขนาดต่างๆ (จอแนวตั้ง)

// ตัวอย่างอย่างง่ายในการเขียนตัวหนังสือบนหน้าจอ และใช้ปุ่มปิดเปิด Black light
// ใช้ได้เฉพาะESP32 TTGO T-Display
#include <TFT_eSPI.h>
#include <SPI.h>
#define ON_OFF_BT 35 //ปุ่มดับจอ
TFT_eSPI tft = TFT_eSPI(); //จะใช้แบบนี้ก็ได้ TFT_eSPI(135, 240) 
void setup()
{
  pinMode(TFT_BL, OUTPUT);   // TFT_BL จะอยู่ GPIO4
  pinMode(ON_OFF_BT, INPUT); // ปุ่มอยู่ GPIO35
   tft.init();
}
void loop()
{
  tft.setCursor(0, 0, 2);      //จุดเริ่มเขียน
  tft.fillScreen(TFT_RED);     //ลงพื้นสีแดง
  tft.setTextColor(TFT_BLACK); //ตัวหนังสือดำ พื้นใส
  for(int i=1;i<8;i++)
  {
    tft.setTextSize(i);   
    tft.println("Hello"); //พิมพ์เสร็๗ขึ้นใหม่จุดเริ่มจะไปอยู่ต้นบรรทัดใหม่
    digitalWrite(TFT_BL, digitalRead(ON_OFF_BT)); //กดปุ่มเพื่อดับจอ
    delay(2000);
  }
}

ลองไปดูตัวอย่างที่ Examples/TFT_eSPI/160x128 จะลองเลือกตัวอย่างอื่นๆก็ได้แต่อาจจะล้นจอ
ด้านล่างเป็นตัวอย่างการเขียนตัวหนังสือด้วยวิธีต่างๆ และการวาดสามเหลี่ยมสี่เหลี่ยม วงกลม

//ตัวอย่างการเขียนหน้าจอของ T-Display
#include <TFT_eSPI.h>     // ค่าต่างๆกำหนดในไฟล์นี้ลองไปอ่านดูได้
#include <SPI.h>
TFT_eSPI tft = TFT_eSPI(); // T-Display 135x240pixel
int black_light = HIGH;   // black light state
void setup() {
  tft.init();             // -- Display
  tft.setRotation(1);
  //fillRect(x,y,width,hight,color)
  tft.fillRect(2,2,200,84,TFT_WHITE);
  tft.drawRect(2, 2, 238, 133, TFT_YELLOW);
  tft.fillScreen(TFT_RED);
  tft.setTextColor(TFT_BLACK); //ตัวอักษรดำพื้นใส
  //TL_DATUM=Top left(default), TC_DATUM 1=Top centre,TR_DATUM 2=Top right
  //drawString(String,x,y,font)
  tft.setTextDatum(TR_DATUM);//Right ใช้คู่กับ drawString()
  tft.drawString("Right",120,3,2);
  tft.setTextDatum(TL_DATUM);//Left
  tft.drawString("Left",120,13,2);
  tft.setTextDatum(TC_DATUM);//Center
  tft.drawString("Center",120,23,2); 
  //setCursor(x, y, font) กำหนดพิกัดที่จะเขียน
  tft.setCursor(20, 30);
  tft.setTextFont(2);
  tft.setTextColor(TFT_RED,TFT_BLACK);//ตัวหนังสือแดงพื้นดำ
  tft.print("Hello ");//พิมพ์แบบไม่ขึ้นบรรทัดใหม่
  tft.println("IT "); // พิมพ์แล้วขึ้นบรรทัดใหม่
  //ถ้าใช้ setTextSize(size)จะเพิ่มขนาดตัวอักษรแบบซูมเข้าไป(ขอบหยัก)ขนาดปรกติเป็น 1
  tft.setTextFont(4); //ตัวอักษรรูปแบบ 4
  tft.println("Student");// พิมพ์แล้วขึ้นบรรทัดใหม่
  tft.setCursor(3, 28, 4);
  
  tft.fillCircle(170,67, 20, TFT_OLIVE);
  tft.drawCircle(170,67, 15, TFT_ORANGE);
  tft.drawRoundRect(170,10, 40,30,4, TFT_PURPLE);
  //drawChar(x,y,char,color,blackground,size)
  tft.drawChar(120,70, 'A', TFT_BLUE, TFT_MAGENTA, 4);
  tft.fillTriangle(50, 100, 100, 130, 20, 115, TFT_CYAN);
  tft.drawLine(0, 135, 240, 0, TFT_BLUE);
}

void loop() {
}

ทดสอบตัวตัวอย่างที่มากับบอร์ด Factory Test

แต่เดิมต้อง ติดตั้ง Button2 ก่อน แต่ตัวอย่างใหม่จะรวม Button2.cpp Button2.h เอาไว้ใน Sketch ที่เหลือก็ต้องไปอ่านคู่มือของการใช้ TFT_eSPI ว่าทำอะไรได้บ้าง

ภาพที่แสดงบนหน้าจอจะเป็นไฟล์ภาพที่แปลงเป็นโค้ดโปรแกรมแล้ว อยู่ในไฟล์ bitmap.h ถ้าอยากลองเปลี่ยนรูปของโปรแกรมทดสอบก็ต้องสร้างไฟล์ bmp.h จากภาพขนาด 240x135 พิกเซล ผมไปเจอรูปลูกชายตอนเด็กๆ เอาเข้าโปรแกรม paint บนวินโดว์แล้วปรับขนาด ผมเซฟเป็นไฟล์ oom.png

ต่อไปจะทำการแปลงภาพให้กลายเป็นโค้ดโปรแกรมไปที่เวป http://www.rinkydinkelectronics.com/t_imageconverter565.php กดปุ่ม Choose File เลือกเป็น .c แล้วกด Make file เราจะได้ไฟล์ oom.c ให้ดาว์นโหลด

แก้ชื่อไฟล์เป็น bmp.h แล้วเปิดดูบรรทัดที่ 16 แก้คำว่า oom เป็น ttgo เพราะโปรแกรมตัวอย่างอ้างถึงตัวแปรนี้ จริงๆแล้วตอนแปลงไฟล์ถ้าใช้ไฟล์ชื่อ ttgo.png ก็ไม่ต้องแก้ตรงนี้

const unsigned short oom[32400] PROGMEM={

อัปโหลดโปรแกรมใหม่ก็จะได้ภาพขึ้นจอแล้ว โปรแกรมดูซับซ้อนไปหน่อยสำหรับมือใหม่ ผมตัดเอาเฉพาะโค้ดแสดงภาพกับตัวหนังสือจะได้เข้าใจง่าย เอาไฟล์ bmp.h ไว้ในโฟลเดอร์เดียวกัโปรเจ็กไฟล์แล้วเปิดใหม่ Arduino IDE

#include <TFT_eSPI.h>
#include <SPI.h>
#include "bmp.h"
#define TFT_BL          4  // Display backlight control pin
TFT_eSPI tft = TFT_eSPI(135, 240); // Invoke custom library
void setup()
{
    tft.init(); 
    tft.setRotation(1);
    tft.setSwapBytes(true);
    tft.setTextDatum(MC_DATUM);
    tft.setTextSize(3);
    tft.setTextColor(TFT_WHITE, TFT_BLACK);          
}
void loop()
{
    tft.pushImage(0, 0,  240, 135, oom);
    delay(5000);
    tft.fillScreen(TFT_RED);
    delay(5000);
    tft.fillScreen(TFT_GREEN);
    tft.setTextColor(TFT_YELLOW, TFT_GREEN);
    tft.drawString("Hello Green",  tft.width() / 2, tft.height() / 2 );
    delay(5000);
    tft.fillScreen(TFT_BLUE);
    delay(5000);
    tft.fillScreen(TFT_BLACK);
    tft.setTextColor(TFT_WHITE, TFT_BLACK);    
    tft.drawString("Hello Black",  tft.width() / 2, tft.height() / 2 );
    delay(5000);
}

มีบอร์ด T-Dispaly อีกสองรุ่นจาก TTGO คือ T-Display-GD32 และ T-Display-S2 ระวังซื้อผิดนะ

นั่งเล่น Internet of Things กัน

วันจันทร์ที่ 28 ตุลาคม พ.ศ. 2562

ESP32:Board:TTGO T-Display

Board TTGO T-Display

ทดสอบปุ่ม

ทดสอบหน้าจอ

ทดสอบตัวตัวอย่างที่มากับบอร์ด Factory Test

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

Module:Control:IFR 520

หน้าเว็บ

ค้นหาบล็อกนี้