Table of Contents

โมดูลหน้าจอ TFT LCD ST7789 SPI 1.3 1.54 2.0 inch Touch IPS Display with Module SD card Massmore

ภาพรวม (Overview)

LCD_ST7789 (1)

แนะนำ (Introduction)

          โมดูลหน้าจอแสดงผลซีรีส์ ST7789 จาก Massmore เป็นจอภาพชนิด IPS (In-Plane Switching) ที่ให้ความคมชัดสูง สีสันสดใส และมีมุมมองที่กว้างถึง 170 องศา เชื่อมต่อผ่านโปรโตคอล SPI ซึ่งใช้สายสัญญาณน้อย เหมาะสำหรับการใช้งานร่วมกับไมโครคอนโทรลเลอร์หลากหลายชนิด เช่น Arduino, ESP32, STM32 และ Raspberry Pi โดยมีให้เลือกใช้งานตั้งแต่ขนาดเล็กกะทัดรัดไปจนถึงขนาด 2.0 นิ้วที่รองรับการอ่านข้อมูลจาก SD card และระบบสัมผัสแม่นยำ เพื่อตอบโจทย์การสร้างสรรค์อุปกรณ์อัจฉริยะ (Smart Devices) และโปรเจกต์ IoT ในยุคปัจจุบัน

คุณสมบัติ (Features)

  • เทคโนโลยี IPS: ให้สีสันที่แม่นยำและมองเห็นได้ชัดเจนจากทุกมุมมอง

  • ไดรเวอร์ ST7789: เป็นมาตรฐานสากล รองรับไลบรารีการเขียนโปรแกรมที่หลากหลาย

  • ความละเอียดสูง: 240×240 และ 240×320 พิกเซล ให้ภาพที่เนียนละเอียด

  • การเชื่อมต่อ SPI: ใช้พินน้อย ประหยัดทรัพยากรของไมโครคอนโทรลเลอร์

  • ฟังก์ชันเสริม (รุ่น 2.0″): มาพร้อมช่องเสียบ Micro SD Card สำหรับจัดเก็บรูปภาพหรือข้อมูล

  • ระบบสัมผัส (รุ่น Touch): ใช้เทคโนโลยี Capacitive ผ่านชิป CST816 รองรับการตอบสนองที่รวดเร็วและลื่นไหล

ข้อมูลสินค้า (Spec Data)

  • ไดรเวอร์ไอซี (Driver IC) : ST7789 / ST7789V

  • แรงดันไฟฟ้าใช้งาน (Operating Voltage) : 3.3V – 5.0VDC เฉพาะรุ่น 2.0 นิ้ว

  • แรงดันสัญญาณลอจิก (Logic Voltage) : 3.3V (แนะนำ)

  • การเชื่อมต่อ (Interface) : 4-Wire SPI

  • สีการแสดงผล (Color) : RGB 65K Color / 16-bit

  • ทิศทางการมอง: รอบด้าน (Full Viewing Angle)

ข้อมูลบอร์ด (Onboard Resources)

ข้อมูลขนาดสินค้า

ข้อมูลทางเทคนิค (Specification)

ขนาด 1.3 นิ้ว และ 1.54 นิ้ว

  • Resolution: 240 x 240 Pixels

  • Controller: ST7789V

  • Interface: 7-Pin SPI (GND, VCC, SCL, SDA, RES, DC, BLK)

  • Active Area: 23.4 x 23.4 mm (1.3″) / 27.72 x 27.72 mm (1.54″)

ขนาด 2.0 นิ้ว (Non Touch / Touch)

  • Resolution: 240 x 320 Pixels

  • Controller: ST7789V

  • Touch Controller: CST816 (เฉพาะรุ่น Touch) เชื่อมต่อผ่าน I2C

  • Storage: Micro SD Card Slot เชื่อมต่อผ่าน SPI

  • Interface: Multi-pin Header (รองรับทั้งการแสดงผล, SD Card และ Touch)

เปรียบเทียบ (Comparison)

          ในรุ่นขนาด 1.3″ และ 1.54″ จะเน้นความกะทัดรัด เหมาะสำหรับอุปกรณ์สวมใส่หรืออุปกรณ์แสดงผลสถานะขนาดเล็ก ส่วนรุ่น 2.0″ จะมีความโดดเด่นในด้านพื้นที่การแสดงผลที่มากกว่า และถูกออกแบบมาเพื่อการใช้งานที่ซับซ้อนขึ้นด้วยการเพิ่มช่อง SD Card เข้ามา ทำให้สามารถเก็บไฟล์รูปภาพ .bmp เพื่อดึงมาแสดงผลบนหน้าจอได้โดยไม่เปลืองหน่วยความจำของตัวประมวลผลหลัก สำหรับรุ่น Capacitive Touch จะให้ประสบการณ์การใช้งานเหมือนสมาร์ทโฟน เหมาะสำหรับเครื่องมือวัดหรือแผงควบคุมที่ต้องการการโต้ตอบจากผู้ใช้งาน

ตัวอย่างการใช้งาน (Applications)

  • Smart Watch DIY: สร้างนาฬิกาอัจฉริยะที่แสดงผลแจ้งเตือนและวัดอัตราการเต้นของหัวใจ

  • IoT Dashboard: แสดงค่าอุณหภูมิ ความชื้น และกราฟสถานะของระบบ Smart Home

  • Media Player: ใช้รุ่น 2.0″ แสดงภาพถ่ายจาก SD Card หรือสร้างเครื่องเล่น MP3 ขนาดเล็ก

  • Control Panel: รุ่น Touch Screen ใช้ทำหน้าจอควบคุมเครื่องจักรหรือระบบสั่งการในโรงงาน

  • Educational Kits: ใช้เป็นอุปกรณ์เสริมสำหรับการเรียนรู้การเขียนโปรแกรมกราฟิกบนไมโครคอนโทรลเลอร์

ตัวอย่างโปรแกรม (Example Arduino Code)

การตั้งค่าและติดตั้งโปรแกรม Setup Arduino Library

  1. TFT_eSPI
  2.  PNGdec
  3.  JPEGDecoder
  4. TJpg_Decoder
  • ใช้ไลบรารี TFT_eSPI สำหรับควบคุมจอ ST7789

  • ไลบรารีนี้ต้องตั้งค่าขา GPIO ในไฟล์ User_Setup.h ให้ตรงกับบอร์ดก่อนใช้งาน

การใช้งานหน้าจอ TFT LCD 1.3″ 1.54″ 2.0″ สามารถใช้โปรแกรมเดียวกันได้ เนื่องจาก Driver ST7789 เหมือนกัน ทำให้ง่ายต่อการใช้งาน

ตัวอย่างที่ 1 การแสดงผลกราฟิก UI หน้าจอ 1.3" หรือ 1.54" TFT LCD 240x240 Pixel Driver ST7789

1-TFT_LCD_ST7789_Demo

อุปกรณ์ที่ใช้ในโปรเจกต์

  • บอร์ด ESP32 38PIN Massmore

  • TFT LCD 1.3″ 1.54″ 2.0″ (รุ่นใดก็ได้)

Arduino IDE Code

  • อย่าลืมติดตั้ง Library จากไฟล์บน Github 
    https://github.com/Massmore/SKU-1021-TFT-LCD-ST7789
				
					#include <SPI.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

// --- Color Definitions ---
#define MASSMORE_BLUE   0x041F
#define MASSMORE_PINK   0xF81F
#define MASSMORE_CYAN   0x07FF
#define NEON_GREEN      0x07E0
#define DARK_BG         0x10A2 // Dark Grey
#define ORANGE_RED      0xFA20
#define PURPLE_Haze     0x780F

// --- Global Variables ---
int currentPage = 1;
unsigned long lastPageSwitchTime = 0;
const unsigned long pageDuration = 5000; // 5000ms = 5 วินาที
bool pageInitialized = false; // ตัวแปรเช็กว่าวาด Background หรือยัง

// ตัวแปรสำหรับ Animation หน้า 1
int p1_circleR = 5;
int p1_grow = 1;

// ตัวแปรสำหรับ Animation หน้า 2 (Bouncing Ball)
int p2_ballX = 120, p2_ballY = 120;
int p2_dirX = 3, p2_dirY = 3;
int p2_radius = 8;

// ตัวแปรสำหรับ Animation หน้า 3 (Radar Pulse)
int p3_pulseR = 10;

void setup() {
  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(TFT_BLACK);
  lastPageSwitchTime = millis();
}

void loop() {
  unsigned long currentTime = millis();

  // ตรวจสอบว่าถึงเวลาเปลี่ยนหน้าหรือยัง
  if (currentTime - lastPageSwitchTime > pageDuration) {
    currentPage++;
    if (currentPage > 3) currentPage = 1; // วนกลับไปหน้า 1
    lastPageSwitchTime = currentTime;
    pageInitialized = false; // บอกให้วาด Background ใหม่
    tft.fillScreen(TFT_BLACK); // ล้างหน้าจอ
  }

  // เลือกทำงานตามหน้าปัจจุบัน
  switch (currentPage) {
    case 1:
      if (!pageInitialized) drawPage1_Static();
      runPage1_Anim();
      break;
    case 2:
      if (!pageInitialized) drawPage2_Static();
      runPage2_Anim();
      break;
    case 3:
      if (!pageInitialized) drawPage3_Static();
      runPage3_Anim();
      break;
  }
  
  delay(30); // หน่วงนิดหน่อยเพื่อความลื่นไหล (30-50ms)
}

// ==========================================
// PAGE 1: "Hello Worlds" (ธีมสีฟ้า/ชมพู)
// ==========================================
void drawPage1_Static() {
  tft.fillScreen(TFT_BLACK);
  // กรอบ Card
  tft.drawRoundRect(10, 10, 220, 220, 10, MASSMORE_CYAN);
  tft.drawRoundRect(12, 12, 216, 216, 9, MASSMORE_BLUE);
  // Header
  tft.fillRoundRect(20, 30, 200, 40, 5, MASSMORE_BLUE);
  
  tft.setTextColor(TFT_WHITE, MASSMORE_BLUE);
  tft.setTextDatum(MC_DATUM);
  tft.setTextSize(2);
  tft.drawString("Hello Worlds", 120, 50);

  tft.setTextColor(TFT_YELLOW, TFT_BLACK);
  tft.setTextSize(1);
  tft.setTextFont(4);
  tft.drawString("We are", 120, 130);
  
  tft.setTextColor(MASSMORE_CYAN, TFT_BLACK);
  tft.drawString("Massmore", 120, 160);
  
  pageInitialized = true;
}

void runPage1_Anim() {
  // Animation: วงกลมหายใจ (Breathing Circle)
  tft.drawCircle(120, 200, p1_circleR, TFT_BLACK); // ลบวงเก่า
  
  if (p1_grow) {
    p1_circleR++;
    if (p1_circleR > 18) p1_grow = 0;
  } else {
    p1_circleR--;
    if (p1_circleR < 5) p1_grow = 1;
  }
  tft.drawCircle(120, 200, p1_circleR, MASSMORE_PINK); // วาดวงใหม่
}

// ==========================================
// PAGE 2: "System Ready" (ธีมสีเขียว/Cyber)
// ==========================================
void drawPage2_Static() {
  tft.fillScreen(DARK_BG);
  // เส้นตาราง Grid แบบ Cyber
  for(int i=0; i<240; i+=40) {
    tft.drawFastHLine(0, i, 240, 0x2124); // เส้นแนวนอนสีเทาเข้ม
    tft.drawFastVLine(i, 0, 240, 0x2124); // เส้นแนวตั้ง
  }
  
  // กล่องข้อความตรงกลาง
  tft.fillRect(40, 90, 160, 60, TFT_BLACK);
  tft.drawRect(40, 90, 160, 60, NEON_GREEN);
  
  tft.setTextColor(NEON_GREEN, TFT_BLACK);
  tft.setTextDatum(MC_DATUM);
  tft.setTextFont(4);
  tft.setTextSize(1);
  tft.drawString("SYSTEM", 120, 110);
  tft.drawString("READY...", 120, 135);
  
  pageInitialized = true;
}

void runPage2_Anim() {
  // Animation: ลูกบอลเด้งดึ๋ง (Bouncing Ball)
  
  // 1. ลบลูกบอลเก่า (ใช้สีพื้นหลังทับ)
  // เนื่องจากพื้นหลังมี Grid การลบอาจจะทำให้เส้นหาย (เขียนทับด้วยสีพื้น)
  // แต่เพื่อความง่าย เราจะทับด้วยสีพื้น Dark BG ไปเลย
  tft.fillCircle(p2_ballX, p2_ballY, p2_radius, DARK_BG); 
  
  // 2. คำนวณตำแหน่งใหม่
  p2_ballX += p2_dirX;
  p2_ballY += p2_dirY;
  
  // 3. เช็กการชนขอบ (Bounce)
  if (p2_ballX > 230 || p2_ballX < 10) p2_dirX *= -1;
  if (p2_ballY > 230 || p2_ballY < 10) p2_dirY *= -1;
  
  // 4. วาดลูกบอลใหม่
  tft.fillCircle(p2_ballX, p2_ballY, p2_radius, ORANGE_RED);
}

// ==========================================
// PAGE 3: "Processing" (ธีมสีม่วง/ส้ม)
// ==========================================
void drawPage3_Static() {
  tft.fillScreen(TFT_BLACK);
  
  // วาดวงแหวนรอบนอก
  tft.drawCircle(120, 120, 110, PURPLE_Haze);
  tft.drawCircle(120, 120, 100, PURPLE_Haze);

  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.setTextDatum(MC_DATUM);
  tft.setTextFont(2);
  tft.setTextSize(2);
  tft.drawString("ESP32 Demo", 120, 30);
  
  tft.setTextColor(ORANGE_RED, TFT_BLACK);
  tft.setTextFont(4);
  tft.setTextSize(1);
  tft.drawString("Processing", 120, 210);

  pageInitialized = true;
}

void runPage3_Anim() {
  // Animation: เรดาร์กระจายออก (Pulse Radar) ตรงกลางจอ
  
  // ลบวงเก่า
  tft.drawCircle(120, 120, p3_pulseR, TFT_BLACK);
  tft.drawCircle(120, 120, p3_pulseR - 1, TFT_BLACK); // ลบเส้นหนาหน่อย
  
  // ขยายขนาด
  p3_pulseR += 2;
  
  // ถ้าใหญ่เกินกรอบ ให้เริ่มใหม่จากตรงกลาง
  if (p3_pulseR > 80) p3_pulseR = 10;
  
  // วาดวงใหม่ (เปลี่ยนสีตามขนาดได้ถ้าต้องการ)
  tft.drawCircle(120, 120, p3_pulseR, 0xFFE0); // สีเหลือง
  tft.drawCircle(120, 120, p3_pulseR - 1, 0xFFE0);
}

				
			

ตัวอย่างที่ 2 การแสดงผลกราฟิกแบบ DMA (Direct Memory Access) UI หน้าจอ 1.3" หรือ 1.54" TFT LCD 240x240 Pixel Driver ST7789

2-TFT_LCD_ST7789_DM

อุปกรณ์ที่ใช้ในโปรเจกต์

  • บอร์ด ESP32 38PIN Massmore

  • TFT LCD 1.3″ 1.54″ 2.0″ (รุ่นใดก็ได้)

Arduino IDE Code

  • อย่าลืมติดตั้ง Library จากไฟล์บน Github 
    https://github.com/Massmore/SKU-1021-TFT-LCD-ST7789
				
					#include <TFT_eSPI.h>  // ใช้ไลบรารี TFT_eSPI (ตั้งค่าใน User_Setup.h ก่อนใช้งาน)

TFT_eSPI tft = TFT_eSPI();  // สร้างอ็อบเจ็กต์สำหรับควบคุมจอ

// กำหนดขา Analog Input
const int analogPins[5] = {13, 12, 14, 15, 5};
int analogValues[5];  // ตัวแปรเก็บค่าที่อ่านได้

void setup() {
  Serial.begin(115200);

  // เริ่มต้นจอแสดงผล
  tft.init();
  tft.setRotation(0);  // หมุนหน้าจอได้ 0-3 แล้วแต่การติดตั้ง
  tft.fillScreen(TFT_BLACK);  // เคลียร์หน้าจอด้วยสีดำ
  tft.setTextSize(2);
  tft.setTextColor(TFT_GREEN, TFT_BLACK);  // ตัวอักษรสีเขียว พื้นหลังดำ

  // แสดงข้อความเริ่มต้น
  tft.setCursor(20, 10);
  tft.println("Analog Monitor");
  delay(1000);
}

void loop() {
  // อ่านค่า Analog ทุกช่อง
  for (int i = 0; i < 5; i++) {
    analogValues[i] = analogRead(analogPins[i]);
  }

  // เคลียร์พื้นหลังบางส่วนก่อนเขียนค่าใหม่
  tft.fillRect(0, 40, 240, 200, TFT_BLACK);

  // แสดงผลค่า Analog
  for (int i = 0; i < 5; i++) {
    tft.setCursor(10, 50 + i * 30);
    tft.printf("AIN%d (GPIO%d): %4d", i + 1, analogPins[i], analogValues[i]);
  }

  delay(500);  // หน่วงเวลา 0.5 วินาที
}

				
			

อธิบายการทำงานของโค้ด

สรุป

  • โปรแกรมนี้ใช้ ESP32 อ่านค่า Analog จาก GPIO 5 ช่อง แล้วนำไปแสดงผลบนจอ LCD ST7789 ขนาด 240×240 พิกเซล ด้วยไลบรารี TFT_eSPI โดยแสดงผลค่าที่ได้แบบเรียลไทม์พร้อมข้อความกำกับอย่างชัดเจน

ตัวอย่างที่ 4 การแสดงผลหน้าจอ OLED 128x64 Pixel Driver SSD1306 Size 0.96"

อุปกรณ์ที่ใช้ในโปรเจกต์

  • บอร์ด ESP32 38PIN Massmore

  • หน้าจอ OLED 128×64 Pixel Driver SSD1306 Size 0.96″

Arduino IDE Code

โปรแกรมนี้เขียนด้วยภาษา Arduino โดยมีจุดประสงค์เพื่อแสดงผลหน้าจอ ผ่านขา GPIO ของ ESP32 โดยใช้ I2C Port

*** จำเป็นต้องติดตั้ง Library Adafruit_GFX.h และ Adafruit_SSD1306.h

				
					#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

#define NUMFLAKES     10 // Number of snowflakes in the animation example

#define LOGO_HEIGHT   16
#define LOGO_WIDTH    16
static const unsigned char PROGMEM logo_bmp[] =
{ B00000000, B11000000,
  B00000001, B11000000,
  B00000001, B11000000,
  B00000011, B11100000,
  B11110011, B11100000,
  B11111110, B11111000,
  B01111110, B11111111,
  B00110011, B10011111,
  B00011111, B11111100,
  B00001101, B01110000,
  B00011011, B10100000,
  B00111111, B11100000,
  B00111111, B11110000,
  B01111100, B11110000,
  B01110000, B01110000,
  B00000000, B00110000 };

void setup() {
  Serial.begin(115200);

  // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { 
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); // Don't proceed, loop forever
  }

  // Show initial display buffer contents on the screen --
  // the library initializes this with an Adafruit splash screen.
  display.display();
  delay(2000); // Pause for 2 seconds

  // Clear the buffer
  display.clearDisplay();

  // Draw a single pixel in white
  display.drawPixel(10, 10, WHITE);

  // Show the display buffer on the screen. You MUST call display() after
  // drawing commands to make them visible on screen!
  display.display();
  delay(2000);
  // display.display() is NOT necessary after every single drawing command,
  // unless that's what you want...rather, you can batch up a bunch of
  // drawing operations and then update the screen all at once by calling
  // display.display(). These examples demonstrate both approaches...

  testdrawline();      // Draw many lines

  testdrawrect();      // Draw rectangles (outlines)

  testfillrect();      // Draw rectangles (filled)

  testdrawcircle();    // Draw circles (outlines)

  testfillcircle();    // Draw circles (filled)

  testdrawroundrect(); // Draw rounded rectangles (outlines)

  testfillroundrect(); // Draw rounded rectangles (filled)

  testdrawtriangle();  // Draw triangles (outlines)

  testfilltriangle();  // Draw triangles (filled)

  testdrawchar();      // Draw characters of the default font

  testdrawstyles();    // Draw 'stylized' characters

  testscrolltext();    // Draw scrolling text

  testdrawbitmap();    // Draw a small bitmap image

  // Invert and restore display, pausing in-between
  display.invertDisplay(true);
  delay(1000);
  display.invertDisplay(false);
  delay(1000);

  testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps
}

void loop() {
}

void testdrawline() {
  int16_t i;

  display.clearDisplay(); // Clear display buffer

  for(i=0; i<display.width(); i+=4) {
    display.drawLine(0, 0, i, display.height()-1, WHITE);
    display.display(); // Update screen with each newly-drawn line
    delay(1);
  }
  for(i=0; i<display.height(); i+=4) {
    display.drawLine(0, 0, display.width()-1, i, WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i<display.width(); i+=4) {
    display.drawLine(0, display.height()-1, i, 0, WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(0, display.height()-1, display.width()-1, i, WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=display.width()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, i, 0, WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, 0, i, WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i<display.height(); i+=4) {
    display.drawLine(display.width()-1, 0, 0, i, WHITE);
    display.display();
    delay(1);
  }
  for(i=0; i<display.width(); i+=4) {
    display.drawLine(display.width()-1, 0, i, display.height()-1, WHITE);
    display.display();
    delay(1);
  }

  delay(2000); // Pause for 2 seconds
}

void testdrawrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2; i+=2) {
    display.drawRect(i, i, display.width()-2*i, display.height()-2*i, WHITE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testfillrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2; i+=3) {
    // The INVERSE color is used so rectangles alternate white/black
    display.fillRect(i, i, display.width()-i*2, display.height()-i*2, INVERSE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testdrawcircle(void) {
  display.clearDisplay();

  for(int16_t i=0; i<max(display.width(),display.height())/2; i+=2) {
    display.drawCircle(display.width()/2, display.height()/2, i, WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillcircle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=3) {
    // The INVERSE color is used so circles alternate white/black
    display.fillCircle(display.width() / 2, display.height() / 2, i, INVERSE);
    display.display(); // Update screen with each newly-drawn circle
    delay(1);
  }

  delay(2000);
}

void testdrawroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2-2; i+=2) {
    display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2-2; i+=2) {
    // The INVERSE color is used so round-rects alternate white/black
    display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawtriangle(void) {
  display.clearDisplay();

  for(int16_t i=0; i<max(display.width(),display.height())/2; i+=5) {
    display.drawTriangle(
      display.width()/2  , display.height()/2-i,
      display.width()/2-i, display.height()/2+i,
      display.width()/2+i, display.height()/2+i, WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfilltriangle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=5) {
    // The INVERSE color is used so triangles alternate white/black
    display.fillTriangle(
      display.width()/2  , display.height()/2-i,
      display.width()/2-i, display.height()/2+i,
      display.width()/2+i, display.height()/2+i, INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawchar(void) {
  display.clearDisplay();

  display.setTextSize(1);      // Normal 1:1 pixel scale
  display.setTextColor(WHITE); // Draw white text
  display.setCursor(0, 0);     // Start at top-left corner
  display.cp437(true);         // Use full 256 char 'Code Page 437' font

  // Not all the characters will fit on the display. This is normal.
  // Library will draw what it can and the rest will be clipped.
  for(int16_t i=0; i<256; i++) {
    if(i == '\n') display.write(' ');
    else          display.write(i);
  }

  display.display();
  delay(2000);
}

void testdrawstyles(void) {
  display.clearDisplay();

  display.setTextSize(1);             // Normal 1:1 pixel scale
  display.setTextColor(WHITE);        // Draw white text
  display.setCursor(0,0);             // Start at top-left corner
  display.println(F("Hello, world!"));

  display.setTextColor(BLACK, WHITE); // Draw 'inverse' text
  display.println(3.141592);

  display.setTextSize(2);             // Draw 2X-scale text
  display.setTextColor(WHITE);
  display.print(F("0x")); display.println(0xDEADBEEF, HEX);

  display.display();
  delay(2000);
}

void testscrolltext(void) {
  display.clearDisplay();

  display.setTextSize(2); // Draw 2X-scale text
  display.setTextColor(WHITE);
  display.setCursor(10, 0);
  display.println(F("scroll"));
  display.display();      // Show initial text
  delay(100);

  // Scroll in various directions, pausing in-between:
  display.startscrollright(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrollleft(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrolldiagright(0x00, 0x07);
  delay(2000);
  display.startscrolldiagleft(0x00, 0x07);
  delay(2000);
  display.stopscroll();
  delay(1000);
}

void testdrawbitmap(void) {
  display.clearDisplay();

  display.drawBitmap(
    (display.width()  - LOGO_WIDTH ) / 2,
    (display.height() - LOGO_HEIGHT) / 2,
    logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);
  display.display();
  delay(1000);
}

#define XPOS   0 // Indexes into the 'icons' array in function below
#define YPOS   1
#define DELTAY 2

void testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {
  int8_t f, icons[NUMFLAKES][3];

  // Initialize 'snowflake' positions
  for(f=0; f< NUMFLAKES; f++) {
    icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
    icons[f][YPOS]   = -LOGO_HEIGHT;
    icons[f][DELTAY] = random(1, 6);
    Serial.print(F("x: "));
    Serial.print(icons[f][XPOS], DEC);
    Serial.print(F(" y: "));
    Serial.print(icons[f][YPOS], DEC);
    Serial.print(F(" dy: "));
    Serial.println(icons[f][DELTAY], DEC);
  }

  for(;;) { // Loop forever...
    display.clearDisplay(); // Clear the display buffer

    // Draw each snowflake:
    for(f=0; f< NUMFLAKES; f++) {
      display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, WHITE);
    }

    display.display(); // Show the display buffer on the screen
    delay(200);        // Pause for 1/10 second

    // Then update coordinates of each flake...
    for(f=0; f< NUMFLAKES; f++) {
      icons[f][YPOS] += icons[f][DELTAY];
      // If snowflake is off the bottom of the screen...
      if (icons[f][YPOS] >= display.height()) {
        // Reinitialize to a random position, just off the top
        icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
        icons[f][YPOS]   = -LOGO_HEIGHT;
        icons[f][DELTAY] = random(1, 6);
      }
    }
  }
}
				
			

สรุป

    1. เริ่มต้นใช้งานจอ OLED

      • ตั้งค่าการเชื่อมต่อจอผ่าน I2C ที่ Address 0x3C

      • ล้างหน้าจอ (clear)

    2. แสดงกราฟิกต่าง ๆ ทีละขั้น

      • วาดเส้น (line), สี่เหลี่ยม (rectangle), วงกลม (circle), สามเหลี่ยม (triangle)

      • วาดตัวอักษรธรรมดา และแบบสไตล์ต่าง ๆ

      • แสดงข้อความแบบ scroll ซ้ายขวา

      • แสดงรูปภาพ (bitmap)

      • แสดงภาพเคลื่อนไหว (animation) แบบเกล็ดหิมะตกลงหน้าจอ

อ้างอิง (reference)

Arduino Code

ให้คะแนน 0 ตั้งแต่ 1-5 คะแนน

Development Board - บอร์ดพัฒนา

บอร์ด ESP32 38PIN ชิพแท้จาก Espressif Node32s ESP32S USB Type-C Massmore

🎉บอร์ด ESP32 38PIN ชิพแท้จาก E...

฿350.00

ให้คะแนน 0 ตั้งแต่ 1-5 คะแนน

Development Board - บอร์ดพัฒนา

เซ็นเซอร์จับเส้น Sensor Line Follower เซ็นเซอร์หุ่นยนต์วิ่งตามเส้น Phototransistor รุ่น Ruby
ให้คะแนน 0 ตั้งแต่ 1-5 คะแนน

Robotics - หุ่นยนต์

โมดูลหน้าจอ OLED ขนาด 0.91 0.96 นิ้ว I2C Display Module Driver SSD1306 12864 128x64 Pixel
ให้คะแนน 0 ตั้งแต่ 1-5 คะแนน

Displays - หน้าจอ

โมดูลหน้าจอ OLED ขนาด 0.91 0.96 นิ้ว I2C Display Module Driver SSD1306 12864 128x64 Pixel

🔥ชื่อสินค้า: โมดูลแสดงผล OLED ...

Price range: ฿65.00 through ฿69.00

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