Tag Archives: FSM

Membuat Menu pada TFT LCD 2.2″ ILI9340

Pada tutorial kali ini saya akan coba menjelaskan cara membuat menu pada TFT LCD 2.2″ ILI9340 menggunakan Arduino. LCD ini sudah pernah saya gunakan pada tutorial penunjuk jarum Kompas Digital . Tujuan dari tutorial ini sederhana, ketika anda membuat suatu proyek elektronika menggunakan Arduino dan sebuah TFT LCD kemudian anda ingin menampilkan suatu user-interface, maka anda bisa melakukannya!

Sekilas tentang MENU
Pada dasarnya untuk membuat sebuah tampilan menu adalah dengan membuat beberapa halaman. Berapa banyak halaman yang akan dibuat bergantung pada berapa banyak menu atau bahkan sub-menu yang diiinginkan dan juga seberapa interaktif tampilannya.

Sebagai contoh saya berikan sebuah tampilan menu yang akan kita pelajari pada tutorial kali ini, berikut tampilannya.

Tampilan Menu Sederhana

Untuk membuat tampilan menu seperti gambar diatas, maka kita terlebih dahulu harus membuat beberapa halaman. Pada dasarnya gerakan pointer yang dapat berpindah-pindah dari opsi pertama menuju opsi selanjutnya adalah dengan membuat beberapa halaman berisikan posisi pointer yang berbeda-beda. Untuk lebih jelasnya coba perhatikan gambar dibawah ini.

Tampilan Menu yang berisi beberapa halaman

Namun yang perlu diperhatikan pada gambar diatas adalah: kita tidak perlu membuat semua halaman dengan seluruh isi teksnya. Pergerakan menu yang diinginkan dari tampilan diatas hanyalah pointernya saja. Oleh karena itu, pada setiap halaman hanya berisi kode program untuk menampilkan pointer saja, sedangankan untuk teks yang lain cukup dieksekusi sekali, lebih tepatnya tidak masuk dalam void loop namun masuk ke dalam void setup sehingga yang dieksekusi berkali-kali adalah kode program untuk pointernya.

Komponen
[1] Arduino Pro Mini 5V
[1] TFT LCD 2.2″ ILI9340
[1] Push Button
[1] Resistor 1kOhm
[~] Komponen penunjang (breadboard, kabel jumper, dll)

Koneksi Pin

Arduino (Uno, Pro Mini) LCD TFT 2.2″ (ILI9340) Push Button (Pull Up)
5V (VCC) VIN
GND GND
D8 RST
D9 DC
D10 CS
D11 MOSI
D13 SCK
D3 INPUT

Rangkaian

Rangkaian TFT LCD 2.2″ + Arduino Pro Mini 5V

Kode Program

/******************************************************************************
  This is an sketch for the project below
  ----> http://engine-near.com/2018/04/05/membuat-menu-pada-tft-lcd/

  Check out the links below to download specific library used in this project
  ----> https://github.com/adafruit/Adafruit_ILI9340
  ----> https://github.com/adafruit/Adafruit-GFX-Library
 
  All library works with Arduino IDE 1.6.5 version. 

  Written by Fathur Miftahudin for http://engine-near.com
 *****************************************************************************/

#include "SPI.h"
#include "Adafruit_GFX.h" Library for all our adafruit displays
#include "Adafruit_ILI9340.h" // Library for Adafruit TFT LCD 2.2"

#if defined(__SAM3X8E__)
    #undef __FlashStringHelper::F(string_literal)
    #define F(string_literal) string_literal
#endif

#define _sclk 13
#define _miso 12
#define _mosi 11
#define _cs 10
#define _dc 9
#define _rst 8

Adafruit_ILI9340 tft = Adafruit_ILI9340(_cs, _dc, _rst);
int Button;

void setup() {
  pinMode(3,INPUT); // Digital input from pushButton
  tft.begin(); // TFT display
  pageMenu(); // Show display of page menu
}


void loop() {
  
  Button = digitalRead(3); //read the pushButton value
  
  if (Button == LOW){
    page1(); //--------------------------> Show page 1
    delay(200); // Avoid bounce

    int stoploop = false;
    while(!stoploop){
    Button = digitalRead(3);
    if (Button == LOW){
      stoploop = true;
      page2(); //------------------------> Show page 2
      delay(200);
      
      int stoploop = false;
      while(!stoploop){
      Button = digitalRead(3);
      if (Button == LOW){
        stoploop = true;
        page3(); //----------------------> Show page 3
        delay(200);
        
        int stoploop = false;
        while(!stoploop){
        Button = digitalRead(3);
        if (Button == LOW){
          stoploop = true;
          page4(); //--------------------> Show page 4
          delay(200);
          
            int stoploop = false;
            while(!stoploop){
            Button = digitalRead(3);
            if (Button == LOW){
              stoploop = true;
              page1(); //----------------> Back to page 1
          }      
          }
        }
        }      
      }
      }
    }
    }
  }
}


void pageMenu(){ // Show main page (menu)
  
  tft.fillScreen(ILI9340_BLACK);
  tft.setTextColor(ILI9340_WHITE);
  tft.setTextSize(2);
  
  tft.setCursor(55, 10);
  tft.print("MENU EXAMPLE");

  tft.drawLine(0, 32, 240, 32, ILI9340_WHITE); 
  
  tft.setCursor(75, 50);
  tft.print("Option 1");
  
  tft.setCursor(75, 95);
  tft.print("Option 2");
  
  tft.setCursor(75, 140);
  tft.print("Option 3"); 
  
  tft.setCursor(75, 185);
  tft.print("Option 4");

  tft.drawLine(0, 220, 240, 220, ILI9340_WHITE);
 
}

void page1(){
  
  tft.fillTriangle(45,187,45,197,55,192,ILI9340_BLACK); // Erase pointer option4
  tft.fillTriangle(45,52,45,62,55,57,ILI9340_WHITE); // Print pointer option1
  
}

void page2(){

  tft.fillTriangle(45,52,45,62,55,57,ILI9340_BLACK); // Erase pointer option1
  tft.fillTriangle(45,97,45,107,55,102,ILI9340_WHITE); // Print pointer option2
  
}

void page3(){

  tft.fillTriangle(45,97,45,107,55,102,ILI9340_BLACK); // Erase pointer option2
  tft.fillTriangle(45,142,45,152,55,147,ILI9340_WHITE); // Print pointer option3

}

void page4(){
  
  tft.fillTriangle(45,142,45,152,55,147,ILI9340_BLACK); // Erase pointer option3
  tft.fillTriangle(45,187,45,197,55,192,ILI9340_WHITE); // Print pointer option4
  
}