By | 12/03/2021
0 Comment
Tutorial-ESP8266-NodeMCU-dan-Wemos-dengan-LCD-TFT-1.8

Tutorial ESP8266 NodeMCU Mengakses LCD TFT 1.8 akan dibahas pada artikel ini dengan dilengkapi dengan skematik dan program nodemcu ESP8266. sebelumnya saya sudah membuat tutorial hal serupa tentang Tutorial ESP32 Mengakses LCD TFT 1.8 ST7735

Selain menggunakan ESP8266 tutorial ini juga bisa untuk diterapkan pada Wemos D1 mini ESP8266, LCD TFT 1.8 sudah dilengkapi dengan slot SD card yang bisa menampilkan gambar bitmap yang tersimpan didalam memori sd card.

Mengakses LCD TFT 1.8 dengan ESP8266 NodeMCU dan software Arduino IDE sangat mudah dan simple, baca terus artikel ini untuk mudah memahami cara penggunaan ESP8266 NodeMCU untuk mengakses LCD TFT 1.8 dengan library Adafruit ST7735 dan Adafruit GFX.

Tutorial ESP8266 NodeMCU Mengakses LCD TFT 1.8 ST7735
Panduan mengakses LCD TFT 1.8 dengan NodeMCU ESP8266

Panduan mengakses LCD TFT 1.8 dengan NodeMCU ESP8266

Siapkan modul hawrdware yang diperlukan untuk memulai mengakses LCD TFT 1.8 dengan NodeMCU ESP8266 atau Wemos D1 Mini.

Kemudian download library yang dibutuhkan seperti Adafruit GFX dan juga Adafruit ST7735 untuk Arduino IDE, setelah didownload silahkan pasang library nya baik manual atau otomatis.

Buka example dari library Adafruit ST7735 untuk test grafik LCD TFT 1.8 dan jangan lupa sesuaikan konfigurasi pin yang dihubungkan dari ESP8266 NodeMCU ke LCD TFT 1.8, untuk lebih jelasnya bisa perhatikan tabel keterangan pin LCD TFT 1.8 dengan NodeMCU ESP8266 atau wemos D1 mini.

Tutorial ESP8266 NodeMCU Mengakses LCD TFT 1.8 ST7735
Tutorial ESP8266 NodeMCU Mengakses LCD TFT 1.8 ST7735
PIN ESP32PIN LCD TFT 1.8Keterangan
D5SCKBisa diganti ke pin lain tapi nanti lebih lambat prosesnya
D7SDA / MOSIBisa diganti ke pin lain tapi nanti lebih lambat prosesnya
3.3VLEDUntuk menyalakan lampu dilatar belakang
VCC5VPower
GNDGNDPower
D1ResetBisa diganti pin GPIO lain
D6CSBisa diganti pin GPIO lain
D2DC/A0/RSBisa diganti pin GPIO lain
Tabel Keterngan Pin LCD TFT dan GPIO ESP32

Detail Langkah Tutorial ESP8266 NodeMCU LCD TFT 1.8

  1. Lengkapi detail hardware yang dibutuhkan untuk keperluan antarmuka lcd tft 1.8 dengan nodemcu esp8266
  2. Download library Adafruit_GFX.h
  3. Download library Adafruit_ST7735.h
  4. Rangkai NodeMCU ESP8266 atau Wemos D1 Mini dengan LCD TFT 1.8
  5. Ikuti program dari example atau copy paste program di bawah ini
#define TFT_CS     D6
#define TFT_RST    D1  // you can also connect this to the Arduino reset
                       // in which case, set this #define pin to -1!
#define TFT_DC     D2

// Option 1 (recommended): must use the hardware SPI pins
// (for UNO thats sclk = 13 and sid = 11) and pin 10 must be
// an output. This is much faster - also required if you want
// to use the microSD card (see the image drawing example)

// For 1.44" and 1.8" TFT with ST7735 use
//Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS,  TFT_DC, TFT_RST);

// For 1.54" TFT with ST7789
//Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS,  TFT_DC, TFT_RST);

// Option 2: use any pins but a little slower!
#define TFT_SCLK D5   // set these to be whatever pins you like!
#define TFT_MOSI D7   // set these to be whatever pins you like!
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_MOSI, TFT_SCLK, TFT_RST);


float p = 3.1415926;

void setup(void) {
  Serial.begin(9600);
  Serial.print("Hello! ST77xx TFT Test");

  // Use this initializer if you're using a 1.8" TFT
  tft.initR(INITR_BLACKTAB);   // initialize a ST7735S chip, black tab

  // Use this initializer (uncomment) if you're using a 1.44" TFT
  //tft.initR(INITR_144GREENTAB);   // initialize a ST7735S chip, black tab

  // Use this initializer (uncomment) if you're using a 0.96" 180x60 TFT
  //tft.initR(INITR_MINI160x80);   // initialize a ST7735S chip, mini display

  // Use this initializer (uncomment) if you're using a 1.54" 240x240 TFT
  //tft.init(240, 240);   // initialize a ST7789 chip, 240x240 pixels

  Serial.println("Initialized");

  uint16_t time = millis();
  tft.fillScreen(ST77XX_BLACK);
  time = millis() - time;

  Serial.println(time, DEC);
  delay(500);

  // large block of text
  tft.fillScreen(ST77XX_BLACK);
  testdrawtext("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur adipiscing ante sed nibh tincidunt feugiat. Maecenas enim massa, fringilla sed malesuada et, malesuada sit amet turpis. Sed porttitor neque ut ante pretium vitae malesuada nunc bibendum. Nullam aliquet ultrices massa eu hendrerit. Ut sed nisi lorem. In vestibulum purus a tortor imperdiet posuere. ", ST77XX_WHITE);
  delay(1000);

  // tft print function!
  tftPrintTest();
  delay(4000);

  // a single pixel
  tft.drawPixel(tft.width()/2, tft.height()/2, ST77XX_GREEN);
  delay(500);

  // line draw test
  testlines(ST77XX_YELLOW);
  delay(500);

  // optimized lines
  testfastlines(ST77XX_RED, ST77XX_BLUE);
  delay(500);

  testdrawrects(ST77XX_GREEN);
  delay(500);

  testfillrects(ST77XX_YELLOW, ST77XX_MAGENTA);
  delay(500);

  tft.fillScreen(ST77XX_BLACK);
  testfillcircles(10, ST77XX_BLUE);
  testdrawcircles(10, ST77XX_WHITE);
  delay(500);

  testroundrects();
  delay(500);

  testtriangles();
  delay(500);

  mediabuttons();
  delay(500);

  Serial.println("done");
  delay(1000);
}

void loop() {
  tft.invertDisplay(true);
  delay(500);
  tft.invertDisplay(false);
  delay(500);
}
void testlines(uint16_t color) {
  tft.fillScreen(ST77XX_BLACK);
  for (int16_t x=0; x < tft.width(); x+=6) {
    tft.drawLine(0, 0, x, tft.height()-1, color);
    delay(0);
  }
  for (int16_t y=0; y < tft.height(); y+=6) {
    tft.drawLine(0, 0, tft.width()-1, y, color);
    delay(0);
  }

  tft.fillScreen(ST77XX_BLACK);
  for (int16_t x=0; x < tft.width(); x+=6) {
    tft.drawLine(tft.width()-1, 0, x, tft.height()-1, color);
    delay(0);
  }
  for (int16_t y=0; y < tft.height(); y+=6) {
    tft.drawLine(tft.width()-1, 0, 0, y, color);
    delay(0);
  }

  tft.fillScreen(ST77XX_BLACK);
  for (int16_t x=0; x < tft.width(); x+=6) {
    tft.drawLine(0, tft.height()-1, x, 0, color);
    delay(0);
  }
  for (int16_t y=0; y < tft.height(); y+=6) {
    tft.drawLine(0, tft.height()-1, tft.width()-1, y, color);
    delay(0);
  }

  tft.fillScreen(ST77XX_BLACK);
  for (int16_t x=0; x < tft.width(); x+=6) {
    tft.drawLine(tft.width()-1, tft.height()-1, x, 0, color);
    delay(0);
  }
  for (int16_t y=0; y < tft.height(); y+=6) {
    tft.drawLine(tft.width()-1, tft.height()-1, 0, y, color);
    delay(0);
  }
}

void testdrawtext(char *text, uint16_t color) {
  tft.setCursor(0, 0);
  tft.setTextColor(color);
  tft.setTextWrap(true);
  tft.print(text);
}

void testfastlines(uint16_t color1, uint16_t color2) {
  tft.fillScreen(ST77XX_BLACK);
  for (int16_t y=0; y < tft.height(); y+=5) {
    tft.drawFastHLine(0, y, tft.width(), color1);
  }
  for (int16_t x=0; x < tft.width(); x+=5) {
    tft.drawFastVLine(x, 0, tft.height(), color2);
  }
}

void testdrawrects(uint16_t color) {
  tft.fillScreen(ST77XX_BLACK);
  for (int16_t x=0; x < tft.width(); x+=6) {
    tft.drawRect(tft.width()/2 -x/2, tft.height()/2 -x/2 , x, x, color);
  }
}

void testfillrects(uint16_t color1, uint16_t color2) {
  tft.fillScreen(ST77XX_BLACK);
  for (int16_t x=tft.width()-1; x > 6; x-=6) {
    tft.fillRect(tft.width()/2 -x/2, tft.height()/2 -x/2 , x, x, color1);
    tft.drawRect(tft.width()/2 -x/2, tft.height()/2 -x/2 , x, x, color2);
  }
}

void testfillcircles(uint8_t radius, uint16_t color) {
  for (int16_t x=radius; x < tft.width(); x+=radius*2) {
    for (int16_t y=radius; y < tft.height(); y+=radius*2) {
      tft.fillCircle(x, y, radius, color);
    }
  }
}

void testdrawcircles(uint8_t radius, uint16_t color) {
  for (int16_t x=0; x < tft.width()+radius; x+=radius*2) {
    for (int16_t y=0; y < tft.height()+radius; y+=radius*2) {
      tft.drawCircle(x, y, radius, color);
    }
  }
}

void testtriangles() {
  tft.fillScreen(ST77XX_BLACK);
  int color = 0xF800;
  int t;
  int w = tft.width()/2;
  int x = tft.height()-1;
  int y = 0;
  int z = tft.width();
  for(t = 0 ; t <= 15; t++) {
    tft.drawTriangle(w, y, y, x, z, x, color);
    x-=4;
    y+=4;
    z-=4;
    color+=100;
  }
}

void testroundrects() {
  tft.fillScreen(ST77XX_BLACK);
  int color = 100;
  int i;
  int t;
  for(t = 0 ; t <= 4; t+=1) {
    int x = 0;
    int y = 0;
    int w = tft.width()-2;
    int h = tft.height()-2;
    for(i = 0 ; i <= 16; i+=1) {
      tft.drawRoundRect(x, y, w, h, 5, color);
      x+=2;
      y+=3;
      w-=4;
      h-=6;
      color+=1100;
    }
    color+=100;
  }
}

void tftPrintTest() {
  tft.setTextWrap(false);
  tft.fillScreen(ST77XX_BLACK);
  tft.setCursor(0, 30);
  tft.setTextColor(ST77XX_RED);
  tft.setTextSize(1);
  tft.println("Hello World!");
  tft.setTextColor(ST77XX_YELLOW);
  tft.setTextSize(2);
  tft.println("Hello World!");
  tft.setTextColor(ST77XX_GREEN);
  tft.setTextSize(3);
  tft.println("Hello World!");
  tft.setTextColor(ST77XX_BLUE);
  tft.setTextSize(4);
  tft.print(1234.567);
  delay(1500);
  tft.setCursor(0, 0);
  tft.fillScreen(ST77XX_BLACK);
  tft.setTextColor(ST77XX_WHITE);
  tft.setTextSize(0);
  tft.println("Hello World!");
  tft.setTextSize(1);
  tft.setTextColor(ST77XX_GREEN);
  tft.print(p, 6);
  tft.println(" Want pi?");
  tft.println(" ");
  tft.print(8675309, HEX); // print 8,675,309 out in HEX!
  tft.println(" Print HEX!");
  tft.println(" ");
  tft.setTextColor(ST77XX_WHITE);
  tft.println("Sketch has been");
  tft.println("running for: ");
  tft.setTextColor(ST77XX_MAGENTA);
  tft.print(millis() / 1000);
  tft.setTextColor(ST77XX_WHITE);
  tft.print(" seconds.");
}

void mediabuttons() {
  // play
  tft.fillScreen(ST77XX_BLACK);
  tft.fillRoundRect(25, 10, 78, 60, 8, ST77XX_WHITE);
  tft.fillTriangle(42, 20, 42, 60, 90, 40, ST77XX_RED);
  delay(500);
  // pause
  tft.fillRoundRect(25, 90, 78, 60, 8, ST77XX_WHITE);
  tft.fillRoundRect(39, 98, 20, 45, 5, ST77XX_GREEN);
  tft.fillRoundRect(69, 98, 20, 45, 5, ST77XX_GREEN);
  delay(500);
  // play color
  tft.fillTriangle(42, 20, 42, 60, 90, 40, ST77XX_BLUE);
  delay(50);
  // pause color
  tft.fillRoundRect(39, 98, 20, 45, 5, ST77XX_RED);
  tft.fillRoundRect(69, 98, 20, 45, 5, ST77XX_RED);
  // play color
  tft.fillTriangle(42, 20, 42, 60, 90, 40, ST77XX_GREEN);
}

Penjelasan beberapa fungsi library LCD TFT 1.8 dengan Adafruit

Perintah untuk mengatur warna background LCD TFT 1.8

tft.fillScreen(ST77XX_BLACK);

ST77XX_BLACK bisa diganti dengan kode warna 16bit atau RGB56 seperti contoh beberapa code warna seperti berikut

#define BLACK   0x0000
#define BLUE    0x001F
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF

Berikut adalah perintah untuk mengatur posisi cursor berdasarkan koordinat X dan Y

tft.setCursor(0, 0); // x,y

Perintah berikut untuk mengatur warna teks yang ditampilkan pada LCD TFT 1.8

 tft.setTextColor(code_color);

code_color bisa diubah dengan code warna RGB56 atau 16bit color

dan berikut adalah perintah untuk menampilkan teks pada LCD TFT 1.8

tft.print(text);

Itulah tutorial LCD TFT dengan modul NodeMCU atau Wemos D1 Mini ESP8266 dari anakkendali.com semoga bermanfaat dan jangan lupa untuk membagikan artikel ini.

Keyword

  1. ESP8266 LCD TFT 1.8,
  2. NodeMCU ESP8266 LCD TFT 1.8,
  3. Wemos D1 Mini LCD TFT 1.8,
  4. Program D1 Mini LCD TFT 1.8,
  5. Tutorial Panduan LCD TFT 1.8 ESP8266,
  6. Cara Mengakses LCD TFT 1.8 ESP8266,

Leave a Reply

Your email address will not be published. Required fields are marked *