KKM: 2.4inch graphic display

Početnik si s Croduinom. Ili s elektronikom? Za oko ti je zapeo određeni modul, ali ne znaš kako ga koristiti? Bez brige, tu je KKM! Kako Koristiti Module (KKM) je serija blog tutorijala e-radionice na kojoj ćeš pronaći sve što ti treba kako bi započeo rad sa svojim omiljenim modulom. Tutorijali obuhvaćaju: tehničke karakteristike, princip rada, upute kako povezati modul s Croduinom te osnovni kod. Sve ostalo prepuštamo tebi na maštu.

UVOD

Kada trebamo modul koji nam omogućuje unos podataka, ali i prikaz podataka onda je ovo pravi modul, a radi se o TFT displayu s touch-om. Modul je jednostavno za koristiti jer sa Croduinom komunicira preko SPI komunikacije, te nam omogućuje puno zanimljivih stvari kao što su ispis teksta te iscrtavanje raznih geometrijskih oblika. Za sve ovo možemo birati koju boju hoćemo postaviti, ali i veličinu oblika ili teksta.

KAKO RADI?

Ovaj display je 320x240 pixela te je prilično velik i može se koristiti za razne projekte, a možemo i mijenjati boju svakom pixelu. Da sve ove funkcionalnosti displeja budu jednostavne brine se ILI9341 čip koji kontrolira rad svakoga piksela te nam omogućuje jednostavno upravljanje s displejom. Čip sa Croduinom komunicira preko SPI komunikacije te mu pomoću biblioteke jednostavnim funkcijama šaljemo što treba napraviti.
Za kontrolu touch panela brine se XP2046 koji nam podatke također šalje putem SPI komunikacije. Postoje dvije vrste touch panela a to su kapacitivni i otporni paneli. Naš panel je otporni pa ćemo u nastavku objasniti kako on radi.

Panel u sebi sadrži dva vodljiva sloja koji su razmaknuti sve dok na njih ne djelujemo pritiskom, te se onda spoje. Jedan vodljivi sloj je spojen na napon i kroz taj sloj konstantno teče struja. Ako pritisnemo panel na tom mjestu se dodirnu dva vodljiva sloja i struja se mijenja te kontroler prepoznaje na kojem mjestu je pritisnut panel te nam šalje te podatke. Prednosti ovih panela su što su jeftiniji i jednostavniji, ali mogu prepoznati samo jedan pritisak, a ne više njih u istom trenutku pa im je to jedna od mana. Kapacitivni paneli rade drukčije i mogu prepoznati više pritisaka te se oni koriste na mobitelima i sličnim uređajima gdje nam je to potrebno, a otporni se koriste u jednostavnijim uređajima gdje nije potrebno očitavanje više pritisaka.

KAKO POVEZATI?

Displej kao i touch panel podatke sa Croduinom razmjenjuju preko SPI komunikacije, te nam je za njihovo povezivanje potrebno 11 pinova na Croduinu. Pošto kontroleri za displej i touch panel rade na 3.3 V prilikom povezivanja Croduina i ovog modula potrebno je koristiti otpornike od 10 kOhm-a na svim podatkovnim linijama kojima se podaci šalju prema modulu. Za napajanje displeja možemo koristiti 5 V zato što on na sebi ima ugrađen regulator napona, ali kako bi se lakše snašli prilikom spajanja na slici je prikazan shema kako sve treba povezati.

ARDUINO KOD

Da bi display mogli koristiti sa Croduinom trebamo preuzeti biblioteke za display i biblioteku za rad s touch panelom. Biblioteka za rad s displayom je Adafruit_ILI9341, a za rad s touch panelom koristimo XPT2046_Touchscreen biblioteku, za crtanje grafičkih oblika na displayu treba instalirati i Adafruit_GFX biblioteku koja služi upravo za crtanje. Ako ne znate instalirati biblioteke pogledajte tutorijal koji objašnjava postupak instalacije.
S ovim primjerom koda palimo i gasimo LED diodu koristeći display. Na displayu iscrtavamo dvije tipke te ovisno o stanju led diode i o tome na koju smo tipku pritisnuli palimo ili gasimo led diodu.
Drugi primjer koda ispisuje tekst u nekoliko linija i crta neke geometrijske oblike. Što se sve ispisuje i crta na displayu možemo vidjeti na sljedećoj slici.

#include "Adafruit_GFX.h" //uključujemo biblioteku koja nam omogućuje crtanje geometrijskih oblika
#include "Adafruit_ILI9341.h" //uključujemo biblioteku koja nam omogućuje upravljanje display-om
#include <XPT2046_Touchscreen.h>//uključujemo biblioteku za rad s touch panelom
//definiramo pinove koje koristimo za display i za touch panel
#define TFT_DC 4
#define TFT_CS 2
#define TFT_RST 3
#define TFT_MISO 7
#define TFT_MOSI 5
#define TFT_CLK 6
#define CS_PIN 10
// MOSI=11, MISO=12, SCK=13
//konstruktor za biblioteku koja upravlja radom displaya(predajemo joj pinove koje koristimo za SPI komunikaciju)
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_MOSI, TFT_CLK, TFT_RST, TFT_MISO);
//konstruktor za biblioteku kojoj predajemo samo CS_pin, ostali pinovi su standardni Croduino pinovi za SPI)
XPT2046_Touchscreen ts(CS_PIN);
boolean RecordOn = false;//varijabla u koju spremamo koja je tipka pritisnuta
int ledPin=8;//pin na koji spajamo LED diodu
//definiramo minimalne i maksimalne vrijednosti za x i y os za touch panel(treba prilagoditi display-u koji koristimo)
#define TS_MINX 150
#define TS_MINY 150
#define TS_MAXX 3900
#define TS_MAXY 4900
//definiramo točku(x,y) gdje započinjemo s crtanjem pravokutnika, kao i širinu te visinu pravokutnika(okvira oko tipki)
#define FRAME_X 10
#define FRAME_Y 50
#define FRAME_W 100
#define FRAME_H 50
//definiramo točku(x,y) gdje započinjemo s crtanjem crvene tipke, kao i širinu te visinu tipke
#define REDBUTTON_X FRAME_X
#define REDBUTTON_Y FRAME_Y
#define REDBUTTON_W (FRAME_W/2)
#define REDBUTTON_H FRAME_H
//definiramo točku(x,y) gdje započinjemo s crtanjem zelene tipke, kao i širinu te visinu tipke
#define GREENBUTTON_X (REDBUTTON_X + REDBUTTON_W)
#define GREENBUTTON_Y FRAME_Y
#define GREENBUTTON_W (FRAME_W/2)
#define GREENBUTTON_H FRAME_H
// funkcija za crtanje pravokutnika
void drawFrame()
{
tft.drawRect(FRAME_X, FRAME_Y, FRAME_W, FRAME_H, ILI9341_BLACK);
}
// funkcija koja iscrtava crvenu tipku
void redBtn()
{ //tipku na koordinatama(x,y) širine(REDBUTTON_W) i visine(REDBUTTON_H) popunjavamo crvenom bojom
tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, ILI9341_RED);
//tipku na koordinatama(x,y) širine(GREENBUTTON_W) i visine(GREENBUTTON_H) popunjavamo plavom bojom
tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, ILI9341_BLUE);
drawFrame();//pozivamo funkciju za iscrtavanje okvira
//postavljamo kursor na sredinu plave tipke
tft.setCursor(GREENBUTTON_X + 6 , GREENBUTTON_Y + (GREENBUTTON_H/2));
tft.setTextColor(ILI9341_WHITE);//boju teksta postavljamo na bijelu
tft.setTextSize(2);//veličinu teksta postavljamo na 2
tft.println("ON");//u plavoj tipki ispisujemo ON
RecordOn = false; //spremamo da je pritisnuta crvena tipka
}
//funkcija koja iscrtava zelenu tipku
void greenBtn()
{
//tipku na koordinatama(x,y) širine(GREENBUTTON_W) i visine(GREENBUTTON_H) popunjavamo zelenom bojom
tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, ILI9341_GREEN);
//tipku na koordinatama(x,y) širine(REDBUTTON_W) i visine(REDBUTTON_H) popunjavamo plavom bojom
tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, ILI9341_BLUE);
drawFrame();//pozivamo funkciju za iscrtavanje okvira
//postavljamo kursor na sredinu plave tipke
tft.setCursor(REDBUTTON_X + 6 , REDBUTTON_Y + (REDBUTTON_H/2));
tft.setTextColor(ILI9341_WHITE);//boju teksta postavljamo na bijelu
tft.setTextSize(2);//veličinu teksta postavljamo na 2
tft.println("OFF");//u plavoj tipki ispisujemo OFF
RecordOn = true; //spremamo da je pritisnuta zelena tipka
}
void setup(void)
{
pinMode(ledPin,OUTPUT);
Serial.begin(9600);//Inicijalizacija serijske komunikacije( brzina 9600 bauda)
tft.begin();//inicijalizacija displaya
ts.setRotation(3);//postavljamo rotaciju touch panela na 3
//inicijaliziramo touch panel te ovisno dali smo uspjeli ili ne ispisujemo odgovarajuću poruku na Serial monitor
if (!ts.begin()) {
Serial.println("Unable to start touchscreen.");
}
else {
Serial.println("Touchscreen started.");
}
tft.fillScreen(ILI9341_BLUE);//ispunjavamo display s plavom bojom
tft.setRotation(3);//postavljamo rotaciju displaya na 3 (isto kao i za touch panel)
redBtn();//iscrtavamo crvenu tipku, a u plavoj ispisujemo ON
}
void loop()
{
// provjeravamo dali ima podataka s touch panela, te ako ima nastavljamo s izvršavanjem koda
if (!ts.bufferEmpty())
{
// u pokazivač p spremamo vrijednosti s touch panela
TS_Point p = ts.getPoint();
//touch panel nam daje vrijednosti od 150 do 3900 pa ih trebamo pretvoriti u vrijednosti koje display može primiti( naš displej je 320x240 pixela)
int y = map(p.y, TS_MINY, TS_MAXY, 0, tft.height());
int x = map(p.x, TS_MINX, TS_MAXX, 0, tft.width());
//ako je bila pritisnuta zelena tipka onda provjeravamo samo crvenu tipku kada će biti pritisnuta
if (RecordOn)
{
// ako je x koordinata unutar granica crvenog pravokutnika provjeravamo da je
// i y koordinata unutar granica te pozivamo funkciju za iscrtavanje
// crvenog pravokutnika i gasimo led diodu
if((x > REDBUTTON_X) && (x < (REDBUTTON_X + REDBUTTON_W))) {
if ((y > REDBUTTON_Y) && (y <= (REDBUTTON_Y + REDBUTTON_H))) {
Serial.println("Red btn hit");
redBtn();
digitalWrite(ledPin,LOW);
}
}
}
//ako je bila pritisnuta crvena tipka onda provjeravamo samo zelenu tipku kada će biti pritisnuta
else
{
// ako je x koordinata unutar granica zelenog pravokutnika provjeravamo da je
// i y koordinata unutar granica te pozivamo funkciju za iscrtavanje
// zelenog pravokutnika i palimo led diodu
if((x > GREENBUTTON_X) && (x < (GREENBUTTON_X + GREENBUTTON_W))) {
if ((y > GREENBUTTON_Y) && (y <= (GREENBUTTON_Y + GREENBUTTON_H))) {
Serial.println("Green btn hit");
greenBtn();
digitalWrite(ledPin,HIGH);
}
}
}
Serial.println(RecordOn);
}
}

Drugi primjer koda.

#include "Adafruit_GFX.h" //uključujemo biblioteku koja nam omogućuje crtanje geometrijskih oblika
#include "Adafruit_ILI9341.h" //uključujemo biblioteku koja nam omogućuje upravljanje display-om
//definiramo pinove koje koristimo za display
#define TFT_DC 4
#define TFT_CS 2
#define TFT_RST 3
#define TFT_MISO 7
#define TFT_MOSI 5
#define TFT_CLK 6
//konstruktor za biblioteku koja upravlja radom displaya(predajemo joj pinove koje koristimo za SPI komunikaciju)
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_MOSI, TFT_CLK, TFT_RST, TFT_MISO);
void setup() {
tft.begin();//inicijalizacija displaya
tft.setRotation(3);//postavljamo rotaciju displaya na 3
test();//pozivamo funkciju test koja ispisuje tekst na display, te iscrtava neke geometrijske oblike
}
void loop(void) {
//loop petlja u kojoj ništa ne radimo
}
//funkcija koju pozivamo iz setup-a
void test() {
tft.fillScreen(ILI9341_BLACK); //ispunjavamo display crnom bojom
tft.setCursor(5, 5); //postavljamo kursor na (x,y) koordinate
tft.setTextColor(ILI9341_WHITE); //postavljamo boju teksta na bijelu
tft.setTextSize(2); // postavljamo veličinu teksta na 2
tft.println("Hello World!"); // ispisujemo Hello World! na display te kursor prebacujemo u novi red(println-isto kao i kod Serial monitora)
tft.setTextColor(ILI9341_YELLOW); //postavljamo boju slova na žutu
tft.println(1234.56); //ispisujemo broj iz zagrade u novi red
//crtamo pravokutnika na displayu(početna točka x,y, veličina po x osi, veličina po y osi, boja)
tft.drawRect(0, 40,205,34,ILI9341_RED);
tft.setTextColor(ILI9341_RED); //postavljamo boju slova na crvenu
tft.setTextSize(3); // postavljamo veličinu teksta na 3
tft.setCursor(5, 45);//postavljamo kursor na (x,y) koordinate
tft.println("e-radionica"); //ispisujemo tekst unutar navodnika
tft.fillRect(10, 90,41,41,ILI9341_GREEN);//crtamo ispunjeni pravokutnik(početna točka x,y, veličina po x osi, veličina po y osi, boja)
tft.fillCircle(30, 110, 20,ILI9341_BLUE);//crtamo ispunjeni krug (središte x, središte y, polumjer kruga, boja)
tft.fillRect(60, 90,125,41,ILI9341_PURPLE);//crtamo ispunjeni pravokutnik(početna točka x,y, veličina po x osi, veličina po y osi, boja)
tft.setCursor(65, 93);//postavljamo kursor na (x,y) koordinate
tft.setTextColor(ILI9341_WHITE);//postavljamo boju teksta na bijelu
tft.setTextSize(5);//postavljamo veličinu teksta na 3
tft.println("TEST"); //ispisujemo tekst unutar navodnika
tft.fillCircle(240, 170, 60,ILI9341_BLUE);//crtamo ispunjeni krug (središte x, središte y, polumjer kruga, boja)
tft.fillCircle(240, 170, 45,ILI9341_YELLOW);//crtamo ispunjeni krug (središte x, središte y, polumjer kruga, boja)
tft.fillCircle(240, 170, 30,ILI9341_ORANGE);//crtamo ispunjeni krug (središte x, središte y, polumjer kruga, boja)
tft.fillCircle(240, 170, 20,ILI9341_PURPLE);//crtamo ispunjeni krug (središte x, središte y, polumjer kruga, boja)
}
Leave a Reply