Panduan Pemula Ultimate untuk Menjalankan Display LCD TFT oleh Arduino

Dalam artikel ini, Anda akan belajar cara menggunakan LCD TFT oleh papan Arduino. Dari perintah dasar hingga desain profesional dan teknik semuanya dijelaskan di sini. Di akhir artikel ini, Anda dapat:

  • Menulis teks dan angka dengan font yang Anda inginkan.
  • Gambarkan bentuk seperti lingkaran, segitiga, persegi, dll.
  • Gambar-gambar Display.bmp di layar.
  • Ubah parameter layar seperti memutar dan membalikkan warna.
  • Tampilkan animasi oleh Arduino.

Mempresentasikan Gagasan tentang Menampilkan

Dalam proyek-proyek elektronik, membuat antarmuka antara pengguna dan sistem sangat penting. Antarmuka ini dapat dibuat dengan menampilkan data yang berguna, menu, dan kemudahan akses. Desain yang indah juga sangat penting.

Ada beberapa komponen untuk mencapai hal ini. LED, 7-segmen, tampilan Karakter dan Grafis, dan LCD TFT full-color. Komponen yang tepat untuk proyek Anda tergantung pada jumlah data yang akan ditampilkan, jenis interaksi pengguna, dan kapasitas prosesor.

TFT LCD adalah varian dari layar kristal cair (LCD) yang menggunakan transistor film tipis ( TFT) teknologi untuk meningkatkan kualitas gambar seperti addressability dan kontras. LCD TFT adalah LCD matriks aktif, berbeda dengan LCD matriks pasif atau LCD sederhana, langsung digerakkan dengan beberapa segmen.

Dalam proyek berbasis Arduino, frekuensi prosesor rendah. Jadi tidak mungkin untuk menampilkan gambar yang kompleks, definisi tinggi dan gerakan berkecepatan tinggi. Oleh karena itu, LCD TFT full-color hanya dapat digunakan untuk menampilkan data dan perintah sederhana.

Pada artikel ini, kami telah menggunakan pustaka dan teknik canggih untuk menampilkan data, bagan, menu, dll. Dengan desain profesional. Ini dapat memindahkan presentasi proyek Anda ke tingkat yang lebih tinggi.

Ukuran Mana? Controller yang mana?

Ukuran layar mempengaruhi parameter proyek Anda. Tampilan yang lebih besar tidak selalu lebih baik. jika Anda ingin menampilkan gambar dan tanda resolusi tinggi, Anda harus memilih tampilan ukuran besar dengan resolusi lebih tinggi. Tapi itu mengurangi kecepatan pemrosesan Anda, membutuhkan lebih banyak ruang dan juga membutuhkan lebih banyak arus untuk berjalan.

Jadi, Pertama, Anda harus memeriksa resolusi, kecepatan gerak, detail warna dan ukuran gambar proyek Anda, teks, dan

Kami menyarankan ukuran populer tampilan Arduino seperti 3,5 inci 480 × 320, 2,8 inci 400 × 240, 2,4 inci 320 × 240, dan 1,8 inci 220 × 176.

Setelah memilih tampilan yang tepat, Sudah waktunya untuk pilih pengontrol yang tepat. Jika Anda ingin menampilkan karakter, tes, angka dan gambar statis dan kecepatan tampilan tidak penting, papan Atmega328 Arduino (seperti Arduino UNO) adalah pilihan yang tepat. Jika ukuran kode Anda besar, papan UNO mungkin tidak cukup. Anda dapat menggunakan Arduino Mega2560 sebagai gantinya. Dan jika Anda ingin menampilkan gambar resolusi tinggi dan gerakan dengan kecepatan tinggi, Anda harus menggunakan papan ARD Arduino inti seperti Arduino DUE.

Driver & Perpustakaan

Dalam perangkat elektronik / perangkat keras komputer, pengandar tampilan biasanya semikonduktor terintegrasi sirkuit (tetapi dapat juga terdiri dari mesin keadaan yang terbuat dari logika diskrit dan komponen lainnya) yang menyediakan fungsi antarmuka antara mikroprosesor, mikrokontroler, ASIC atau antarmuka periferal tujuan umum dan jenis tertentu dari perangkat tampilan, misalnya LCD, LED, OLED, ePaper, CRT, Vakum fluorescent atau Nixie.

Pengandar tampilan biasanya akan menerima perintah dan data menggunakan antarmuka serial atau paralel standar umum industri, seperti TTL, CMOS, RS232, SPI, I2C, dll. Dan menghasilkan sinyal dengan tegangan, arus, waktu, dan demultipleksing yang sesuai untuk membuat layar menampilkan teks atau gambar yang diinginkan.

Produsen LCD menggunakan driver yang berbeda dalam produk mereka. Beberapa di antaranya lebih populer dan beberapa di antaranya sangat tidak dikenal. Untuk menjalankan layar Anda dengan mudah, Anda harus menggunakan pustaka LCD Arduino dan menambahkannya ke kode Anda. Kalau tidak menjalankan tampilan mungkin sangat sulit. Ada banyak pustaka gratis yang dapat Anda temukan di internet tetapi poin penting tentang pustaka adalah kompatibilitasnya dengan driver LCD. Pengemudi LCD Anda harus diketahui oleh perpustakaan Anda. Dalam artikel ini, kami menggunakan pustaka Adafruit GFX dan MCUFRIEND KBV library dan contoh kode. Anda dapat mengunduhnya dari tautan berikut.

Buka KBU MCUFRIEND dan buka MCUFRIEND_kbv.CPP. Anda dapat melihat daftar driver yang didukung oleh pustaka MCUFRIEND.

Buka folder Contoh. Ada beberapa contoh kode yang bisa Anda jalankan oleh Arduino. Sambungkan LCD dan uji beberapa contoh.

Kode

Anda harus menambahkan pustaka lalu mengunggah kode. Jika ini pertama kalinya Anda menjalankan papan Arduino, jangan khawatir. Ikuti saja langkah-langkah ini:

  • Buka www.arduino.cc/en/Main/Software dan unduh perangkat lunak OS Anda. Instal perangkat lunak IDE seperti yang diinstruksikan.
  • Jalankan Arduino IDE dan hapus editor teks dan salin kode berikut di editor teks.
  • Navigasikan ke sketsa dan sertakan perpustakaan. Sekarang klik tambahkan pustaka ZIP dan tambahkan pustaka
  • Pilih papan di alat dan papan, pilih Arduino Board Anda.
  • Sambungkan Arduino ke PC Anda dan setel port COM di alat dan port.
  • Tekan Unggah (Tanda panah).
  • Anda sudah siap!

Setelah mengunggah kode contoh, sekarang saatnya mempelajari cara membuat gambar Anda pada LCD.

Buka Sketsa baru, dan kode yang diperlukan seperti yang dijelaskan di bagian berikut.

Perpustakaan

 #include "Adafruit_GFX.h"
 #include "MCUFRIEND_kbv.h"

Baris pertama menambahkan pustaka grafis inti untuk display (ditulis oleh Adafruit).

Yang kedua menambahkan pustaka yang mendukung driver MCUFRIEND Arduino display shields.

 #include "TouchScreen.h" // hanya ketika Anda ingin menggunakan layar sentuh
 #include "bitmap_mono.h" // ketika Anda ingin menampilkan gambar bitmap dari pustaka
 #include "bitmap_RGB.h" // ketika Anda ingin menampilkan gambar bitmap dari pustaka
 #include "Fonts / FreeSans9pt7b.h" // ketika Anda ingin font lain
 #include "Fonts / FreeSans12pt7b.h" // ketika Anda ingin font lain
 #include "Fonts / FreeSerif12pt7b.h" // ketika Anda ingin font lain
 #include "FreeDefaultFonts.h" // ketika Anda ingin font lain
 #include "SPI.h" // menggunakan sdcard untuk menampilkan gambar bitmap
 #include "SD.h"

Perpustakaan ini tidak diperlukan untuk saat ini, tetapi Anda dapat menambahkannya.

Perintah Dasar

Kelas & Objek

 // (int CS = A3, int RS = A2, int WR = A1, int RD = A0, int RST = A4)
 MCUFRIEND_kbv tft (A3, A2, A1, A0, A4);

Baris ini membuat objek bernama TFT dari MCUFRIEND_kbv class dan menyediakan komunikasi SPI antara LCD dan Arduino.

Menjalankan LCD

 uint16_t ID = tft.readID ();
 tft.begin (ID);

Fungsi tft.readID membaca ID dari tampilan dan memasukkannya ke dalam variabel ID. Kemudian tft.begin berfungsi mendapatkan ID dan LCD siap digunakan.

Resolusi Display

 tft.width (); // int16_t width (void);
 tft.height (); // int16_t tinggi (kosong);

Dengan dua fungsi ini, Anda dapat mengetahui resolusi layar. Cukup tambahkan ke kode dan masukkan output dalam variabel uint16_t. Kemudian baca dari port Serial oleh Serial.println () ;. Pertama, tambahkan Serial.begin (9600); di setup ().

Warna Layar

 tft.fillScreen (t); // fillScreen (uint16_t t);

fungsi fillScreen mengubah warna layar menjadi warna t. T harus merupakan variabel 16bit yang berisi kode warna UTFT.

 #define BLACK 0x0000
 #define NAVY 0x000F
 #define DARKGREEN 0x03E0
 #define DARKCYAN 0x03EF
 #define MAROON 0x7800
 #define PURPLE 0x780F
 #define OLIVE 0x7BE0
 #define LIGHTGREY 0xC618
 #define DARKGREY 0x7BEF
 #define BIRU 0x001F
 #define GREEN 0x07E0
 #define CYAN 0x07FF
 #define RED 0xF800
 #define MAGENTA 0xF81F
 #define KUNING 0xFFE0
 #define WHITE 0xFFFF
 #define ORANGE 0xFD20
 #define GREENYELLOW 0xAFE5
 #define PINK 0xF81F

Anda dapat menambahkan baris ini ke bagian atas kode Anda dan cukup gunakan nama warna dalam fungsi.

Filling Pixels

 tft.drawPixel (x, y, t); // drawPixel (int16_t x, int16_t y, uint16_t t)
 tft.readPixel (x, y); // uint16_t readPixel (int16_t x, int16_t y)

drawPixel berfungsi mengisi piksel di lokasi x dan y dengan warna t.

fungsi readPixel membaca warna piksel di lokasi x dan y. [19659097] Menggambar Garis

 tft.drawFastVLine (x, y, h, t);
 // drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t t)
 tft.drawFastHLine (x, y, w, t);
 // drawFastHLine (int16_t x, int16_t y, int16_t w, uint16_t t)
 tft.drawLine (xi, yi, xj, yj, t);
 // drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t t)

drawFastVLine fungsi menggambar garis vertikal yang dimulai pada x, y lokasi, dan panjangnya adalah h pixel dan warnanya t.

drawFastHLine fungsi menggambar garis horizontal yang dimulai di lokasi x dan y dan panjangnya adalah pixel dan warnanya t

drawLine fungsi menggambar garis yang dimulai pada xi dan yi lokasi berada di xj dan yj dan warnanya t.

 untuk (uint16_t a = 0; a <5; a ++)
 {tft.drawFastVLine (x + a, y, h, t);}
 untuk (uint16_t a = 0; a <5; a ++)
 {tft.drawFastHLine (x, y + a, w, t);}
 untuk (uint16_t a = 0; a <5; a ++)
 {tft.drawLine (xi + a, yi, xj + a, yj, t);}
 untuk (uint16_t a = 0; a <5; a ++)
 {tft.drawLine (xi, yi + a, xj, yj + a, t);}

Tiga blok kode ini menarik garis seperti kode sebelumnya dengan ketebalan 5 piksel.

 tft.fillRect (x, y, w, h, t);
 // fillRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)
 tft.drawRect (x, y, w, h, t);
 // drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)
 tft.fillRoundRect (x, y, w, h, r, t);
 // fillRoundRect (int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R, uint16_t t)
 tft.drawRoundRect (x, y, w, h, r, t);
 // drawRoundRect (int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R, uint16_t t)

fillRect fungsi menggambar persegi panjang terisi di lokasi x dan y. w adalah lebar, h adalah tinggi dan t adalah warna rextangle

drawRect fungsi menggambar persegi panjang di lokasi x dan y dengan lebar w dan tinggi h dan warna t. [19659009] fillRoundRect fungsi menggambar Rectangle diisi dengan r radius putaran sudut di x dan y lokasi dan lebar w dan tinggi h dan warna t.

drawRoundRect fungsi menggambar sebuah Rectangle dengan r radius round corners di lokasi x dan y dan lebar w dan tinggi h dan warna t.

Menggambar Lingkaran

 tft.drawCircle (x, y, r, t); // drawCircle (int16_t x, int16_t y, int16_t r, uint16_t t)
 tft.fillCircle (x, y, r, t); // fillCircle (int16_t x, int16_t y, int16_t r, uint16_t t)

drawCircle fungsi menggambar lingkaran di lokasi x dan y dan r jari-jari dan warna t.

fillCircle fungsi menggambar lingkaran penuh di x dan y lokasi dan r radius dan warna t.

 untuk (int p = 0; p <4000; p ++)
 {j = 120 * (sin (PI * p / 2000));
 i = 120 * (cos (PI * p / 2000));
 j2 = 60 * (sin (PI * p / 2000));
 i2 = 60 * (cos (PI * p / 2000));
 tft.drawLine (i2 + 160, j2 + 160, i + 160, j + 160, col [n]);
}

Dengan kode ini, Anda dapat menggambar Arc. ubah “untuk” antara 0 dan 4000.

Menggambar Segitiga

 tft.drawTriangle (x1, y1, x2, y2, x3, y3, t);
 // drawTriangle (int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3, // uint16_t t)
 tft.fillTriangle (x1, y1, x2, y2, x3, y3, t);
 // fillTriangle (int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3, // uint16_t t)

drawTriangle fungsi menggambar segitiga dengan tiga lokasi sudut x, y dan z, dan warna t.

fillTriangle fungsi menggambar segitiga terisi dengan tiga lokasi sudut x, y dan z, dan warna t.

Menampilkan Teks

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

Kode ini menetapkan posisi kursor ke x dan y

 tft.setTextColor (t); // setTextColor (uint16_t t)
 tft.setTextColor (t, b); // setTextColor (uint16_t t, uint16_t b)

Baris pertama mengatur warna teks. Baris selanjutnya mengatur warna teks dan latar belakangnya.

 tft.setTextSize (s); // setTextSize (uint8_t s)

Kode ini menetapkan ukuran teks dengan s. s adalah angka antara 1 dan 5.

 tft.write (c); // tulis (uint8_t c)

Kode ini menampilkan karakter.

 tft.println ("www.Electropeak.com");
 tft.print ("www.Electropeak.com");

Fungsi pertama menampilkan string dan menggerakkan kursor ke baris berikutnya.

Fungsi kedua hanya menampilkan string.

 showmsgXY (x, y, sz, & FreeSans9pt7b, "www.Electropeak.com") ;
 // void showmsgXY (int x, int y, int sz, const GFXfont * f, const char * msg)
 membatalkan showmsgXY (int x, int y, int sz, const GFXfont * f, const char * msg)
 {uint16_t x1, y1;
 uint16_t wid, ht;
 tft.setFont (f);
 tft.setCursor (x, y);
 tft.setTextColor (0x0000);
 tft.setTextSize (sz);
 tft.print (msg);
}

Fungsi ini mengubah font teks. Anda harus menambahkan fungsi ini dan pustaka font.

 untuk (int j = 0; j <20; j ++) {
 tft.setCursor (145, 290);
 int color = tft.color565 (r - = 12, g - = 12, b - = 12);
 tft.setTextColor (warna);
 tft.print ("www.Electropeak.com");
 penundaan (30);
}

Fungsi ini dapat memudar teks Anda. Anda harus menambahkannya ke kode Anda.

Memutar Layar

 tft.setRotation (r); // setRotation (uint8_t r)

Kode ini memutar layar. 0 = 0, 1 = 90, 2 = 180, 3 = 270.

Warna Layar Pembalik

 tft.invertDisplay (i); // invertDisplay (boolean i)

Kode ini membalik warna layar.

 tft.color565 (r, g, b); // uint16_t color565 (uint8_t r, uint8_t g, uint8_t b)

Kode ini memberikan kode RGB dan mendapatkan kode warna UTFT.

Menggulir Layar

 untuk (uint16_t i = 0; i  tft.vertScroll (0, maxscroll, i);
 penundaan (10);}

Kode ini Gulir layar Anda. Maxroll adalah tinggi maksimum pengguliran Anda.

Reset

 tft.reset ();

Kode ini mereset layar.

Menampilkan Gambar Monokrom

 static const uint8_t name [] PROGMEM =
 {// Tambahkan kode gambar di sini.
}
 tft.drawBitmap (x, y, nama, sx, sy, 0x0000);

Pertama, Anda harus mengonversi gambar Anda menjadi kode hex. Unduh perangkat lunak dari tautan berikut. jika Anda tidak ingin mengubah pengaturan perangkat lunak, Anda harus membalikkan warna gambar dan membuat gambar secara horizontal dicerminkan dan memutarnya 90 derajat berlawanan arah jarum jam. Sekarang tambahkan ke perangkat lunak dan mengubahnya. Buka file yang diekspor dan salin kode hex ke Arduino IDE. x dan y adalah lokasi gambar. sx dan sy adalah ukuran gambar. Anda dapat mengubah warna gambar pada input terakhir.

RGB Color Image Menampilkan

 const uint16_t name [] PROGMEM = {
 // Tambahkan kode gambar di sini.
}
 tft.drawRGBBitmap (x, y, nama, sx, sy);

Pertama, Anda harus mengonversi gambar ke kode. Gunakan tautan ini untuk mengonversi gambar:

http://www.rinkydinkelectronics.com/t_imageconverter565.php

Unggah gambar Anda dan unduh file yang dikonversi yang dapat diproses oleh pustaka UTFT. Sekarang salin kode hex ke Arduino IDE. x dan y adalah lokasi gambar. sx dan sy adalah ukuran gambar.

Template yang Telah Direkomendasikan

Memuat

Dalam template ini, Kami hanya menggunakan string dan 8 lingkaran penuh yang mengubah warna mereka secara berurutan. Untuk menggambar lingkaran di sekitar titik statis, Anda dapat menggunakan sin (); dan cos (); fungsi. Anda harus menentukan nomor PI. Untuk mengubah warna, Anda dapat menggunakan color565 (); berfungsi dan mengganti kode RGB Anda.

 #include "Adafruit_GFX.h"
 #include "MCUFRIEND_kbv.h"
 MCUFRIEND_kbv tft;
 #include "Fonts / FreeSans9pt7b.h"
 #include "Fonts / FreeSans12pt7b.h"
 #include "Fonts / FreeSerif12pt7b.h"
 #include "FreeDefaultFonts.h"
 #define PI 3.1415926535897932384626433832795
 int col [8];
 membatalkan showmsgXY (int x, int y, int sz, const GFXfont * f, const char * msg)
 {
 int16_t x1, y1;
 uint16_t wid, ht;
 tft.setFont (f);
 tft.setCursor (x, y);
 tft.setTextColor (0x0000);
 tft.setTextSize (sz);
 tft.print (msg);
}
 void setup () {
 tft.reset ();
 Serial.begin (9600);
 uint16_t ID = tft.readID ();
 tft.begin (ID);
 tft.setRotation (1);
 tft.invertDisplay (true);
 tft.fillScreen (0xffff);
 showmsgXY (170, 250, 2, & FreeSans9pt7b, "Memuat ...");
 col [0] = tft.color565 (155, 0, 50);
 col [1] = tft.color565 (170, 30, 80);
 col [2] = tft.color565 (195, 60, 110);
 col [3] = tft.color565 (215, 90, 140);
 col [4] = tft.color565 (230, 120, 170);
 col [5] = tft.color565 (250, 150, 200);
 col [6] = tft.color565 (255, 180, 220);
 col [7] = tft.color565 (255, 210, 240);
}
 void loop () {
 untuk (int i = 8; i> 0; i--) {
 tft.fillCircle (240 + 40 * (cos (-i * PI / 4)), 120 + 40 * (sin (-i * PI / 4)), 10, col [0]); penundaan (15);
 tft.fillCircle (240 + 40 * (cos (- (i + 1) * PI / 4)), 120 + 40 * (sin (- (i + 1) * PI / 4)), 10, col [1]); penundaan (15);
 tft.fillCircle (240 + 40 * (cos (- (i + 2) * PI / 4)), 120 + 40 * (sin (- (i + 2) * PI / 4)), 10, col [2]); penundaan (15);
 tft.fillCircle (240 + 40 * (cos (- (i + 3) * PI / 4)), 120 + 40 * (sin (- (i + 3) * PI / 4)), 10, col [3]); penundaan (15);
 tft.fillCircle (240 + 40 * (cos (- (i + 4) * PI / 4)), 120 + 40 * (sin (- (i + 4) * PI / 4)), 10, col [4]); penundaan (15);
 tft.fillCircle (240 + 40 * (cos (- (i + 5) * PI / 4)), 120 + 40 * (sin (- (i + 5) * PI / 4)), 10, col [5]); penundaan (15);
 tft.fillCircle (240 + 40 * (cos (- (i + 6) * PI / 4)), 120 + 40 * (sin (- (i + 6) * PI / 4)), 10, col [6]); penundaan (15);
 tft.fillCircle (240 + 40 * (cos (- (i + 7) * PI / 4)), 120 + 40 * (sin (- (i + 7) * PI / 4)), 10, col [7]); penundaan (15);
}
}

Presentasi Logo

Dalam template ini, Kami mengonversi file to.c ke file a.jpg dan menambahkannya ke kode, menulis string dan menggunakan kode fade untuk ditampilkan. Lalu kami menggunakan kode gulir untuk memindahkan layar ke kiri. Unduh file .h dan tambahkan ke folder sketsa Arduino.

 #include "Adafruit_GFX.h" // Pustaka grafis inti
 #include "MCUFRIEND_kbv.h" // Perpustakaan khusus perangkat keras
 MCUFRIEND_kbv tft;
 #include "Ard_Logo.h"
 #define BLACK 0x0000
 #define RED 0xF800
 #define GREEN 0x07E0
 #define WHITE 0xFFFF
 #define GRAY 0x8410
 #include "Fonts / FreeSans9pt7b.h"
 #include "Fonts / FreeSans12pt7b.h"
 #include "Fonts / FreeSerif12pt7b.h"
 #include "FreeDefaultFonts.h"
 membatalkan showmsgXY (int x, int y, int sz, const GFXfont * f, const char * msg)
 {
 int16_t x1, y1;
 uint16_t wid, ht;
 tft.setFont (f);
 tft.setCursor (x, y);
 tft.setTextSize (sz);
 tft.println (msg);
}
 uint8_t r = 255, g = 255, b = 255;
 warna uint16_t;
 membatalkan pengaturan ()
 {
 Serial.begin (9600);
 uint16_t ID = tft.readID ();
 tft.begin (ID);
 tft.invertDisplay (true);
 tft.setRotation (1);
}
 kekosongan lingkaran (void)
 {
 tft.invertDisplay (true);
 tft.fillScreen (WHITE);
 tft.drawRGBBitmap (100, 50, Logo, 350, 200);
 penundaan (1000);
 tft.setTextSize (2);
 untuk (int j = 0; j <20; j ++) {
 warna = tft.color565 (r - = 12, g - = 12, b - = 12);
 tft.setTextColor (warna);
 showmsgXY (95, 280, 1, & FreeSans12pt7b, "ELECTROPEAK PRESENTS");
 penundaan (20);
}
 penundaan (1000);
 untuk (int i = 0; i <480; i ++) {
 tft.vertScroll (0, 480, i);
 tft.drawFastVLine (i, 0, 320, 0xffff); // garis vertikal
 penundaan (5);}
 sementara (1);
}

Dot Chart

Dalam template ini, Kami menggunakan garis gambar, lingkaran penuh, dan fungsi tampilan string.

 #include "Adafruit_GFX.h"
 #include "MCUFRIEND_kbv.h"
 MCUFRIEND_kbv tft;
 uint16_t ox = 0, oy = 0;
 int ave = 0, avec = 0, avet = 0;
 /////////////////////////////////////////////// /////////////////
 void aveg (kosong)
 {int z = 0;
 Serial.println (ave);
 Serial.println (avec);
 avet = ave / avec;
 Serial.println (avet);
 avet = avet * 32;
 untuk (int i = 0; i <24; i ++) {
 untuk (uint16_t a = 0; a <3; a ++) {
 tft.drawLine (avet + a, z, avet + a, z + 10, 0xFB21);} // tebal
 untuk (uint16_t a = 0; a <2; a++){ tft.drawLine(avet-a, z, avet-a, z+10, 0xFB21);} delay(100); z=z+20; } } ////////////////////////////////////////////////////////////////// void dchart_10x10(uint16_t nx,uint16_t ny) { ave+=nx; avec++; nx=nx*32; ny=ny*48; tft.drawCircle(nx, ny, 10, 0x0517); tft.drawCircle(nx, ny, 9, 0x0517); tft.fillCircle(nx, ny, 7, 0x0517); delay (100); ox=nx; oy=ny; } /////////////////////////////////////////////////////////////////////// void dotchart_10x10(uint16_t nx,uint16_t ny) { ave+=nx; avec++; nx=nx*32; ny=ny*48; int plus=0; float fplus=0; int sign=0; int y=0,x=0; y=oy; x=ox; float xmines, ymines; xmines=nx-ox; ymines=ny-oy; if (ox> nx)
 {xmines = ox-nx;
 tanda = 1;}
 lain
 tanda = 0;
 untuk (int a = 0; a <(ny-oy); a ++)
 {
 fplus + = xmines / ymines;
 plus = fplus;
 jika (tanda == 1)
 tft.drawFastHLine (0, y, x-plus, 0xBFDF);
 lain
 tft.drawFastHLine (0, y, x + plus, 0xBFDF);
 y ++;
 penundaan (5);}
 untuk (uint16_t a = 0; a <2; a ++) {
 tft.drawLine (ox + a, oy, nx + a, ny, 0x01E8);} // tebal
 untuk (uint16_t a = 0; a <2; a ++) {
 tft.drawLine (sapi, oy + a, nx, ny + a, 0x01E8);}
 sapi = nx;
 oy = ny;
}
 /////////////////////////////////////////////// /////////////////////
 void setup () {
 tft.reset ();
 Serial.begin (9600);
 uint16_t ID = tft.readID ();
 tft.begin (ID);
}
 void loop () {
 tft.invertDisplay (true);
 tft.fillScreen (0xffff);
 dotchart_10x10 (3, 0);
 dotchart_10x10 (2, 1);
 dotchart_10x10 (4, 2);
 dotchart_10x10 (4, 3);
 dotchart_10x10 (5, 4);
 dotchart_10x10 (3, 5);
 dotchart_10x10 (6, 6);
 dotchart_10x10 (7, 7);
 dotchart_10x10 (9, 8);
 dotchart_10x10 (8, 9);
 dotchart_10x10 (10, 10);
 dchart_10x10 (3, 0);
 dchart_10x10 (2, 1);
 dchart_10x10 (4, 2);
 dchart_10x10 (4, 3);
 dchart_10x10 (5, 4);
 dchart_10x10 (3, 5);
 dchart_10x10 (6, 6);
 dchart_10x10 (7, 7);
 dchart_10x10 (9, 8);
 dchart_10x10 (8, 9);
 dchart_10x10 (10, 10);
 tft.setRotation (1);
 tft.setTextSize (2);
 tft.setTextColor (0x01E8);
 tft.setCursor (20, 20);
 tft.print ("Average");
 int dl = 20;
 untuk (int i = 0; i <6; i ++) {
 untuk (uint16_t a = 0; a <3; a ++) {
 tft.drawLine (dl, 40 + a, dl + 10, 40 + a, 0xFB21);}
 dl + = 16;}
 tft.setRotation (0);
 aveg ();
 sementara (1);
}

Anda dapat menemukan lebih banyak templat grafik di sini .

Musik

Dalam template ini, Kami menambahkan gambar yang dikonversi ke kode dan kemudian menggunakan dua busur hitam dan putih ke buat penunjuk volume. Unduh file .h dan tambahkan ke folder sketsa Arduino.

 #include "Adafruit_GFX.h"
 #include "MCUFRIEND_kbv.h"
 MCUFRIEND_kbv tft;
 #include "Volume.h"
 #define BLACK 0x0000
 int a = 0, b = 4000, c = 1000, d = 3000;
 int s = 2000;
 int j, j2;
 int i, i2;
 int Putih;
 membatalkan pengaturan ()
 {
 Serial.begin (9600);
 uint16_t ID = tft.readID ();
 tft.begin (ID);
 tft.invertDisplay (true);
 tft.setRotation (1);
}
 kekosongan lingkaran (void)
 {
 tft.invertDisplay (true);
 tft.fillScreen (HITAM);
 tft.drawRGBBitmap (0, 0, test, 480, 320);
 Putih = tft.color565 (255, 255, 255);
 selagi (1) {
 jika (a  j = 14 * (sin (PI * a / 2000));
 i = 14 * (cos (PI * a / 2000));
 j2 = 1 * (sin (PI * a / 2000));
 i2 = 1 * (cos (PI * a / 2000));
 tft.drawLine (i2 + 62, j2 + 240, i + 62, j + 240, White);
 j = 14 * (sin (PI * (a-300) / 2000));
 i = 14 * (cos (PI * (a-300) / 2000));
 j2 = 1 * (sin (PI * (a-300) / 2000));
 i2 = 1 * (cos (PI * (a-300) / 2000));
 tft.drawLine (i2 + 62, j2 + 240, i + 62, j + 240, 0x0000);
 tft.fillRect (50, 285, 30, 30, 0x0000);
 tft.setTextSize (2);
 tft.setTextColor (0xffff);
 tft.setCursor (50, 285);
 tft.print (a / 40); tft.print ("%");
 a ++;
}
 jika (b  j = 14 * (sin (PI * b / 2000));
 i = 14 * (cos (PI * b / 2000));
 j2 = 1 * (sin (PI * b / 2000));
 i2 = 1 * (cos (PI * b / 2000));
 tft.drawLine (i2 + 180, j2 + 240, i + 180, j + 240, White);
 j = 14 * (sin (PI * (b-300) / 2000));
 i = 14 * (cos (PI * (b-300) / 2000));
 j2 = 1 * (sin (PI * (b-300) / 2000));
 i2 = 1 * (cos (PI * (b-300) / 2000));
 tft.drawLine (i2 + 180, j2 + 240, i + 180, j + 240, 0x0000);
 tft.fillRect (168, 285, 30, 30, 0x0000);
 tft.setTextSize (2);
 tft.setTextColor (0xffff);
 tft.setCursor (168, 285);
 tft.print (b / 40); tft.print ("%");
 b ++;}
 jika (c  j = 14 * (sin (PI * c / 2000));
 i = 14 * (cos (PI * c / 2000));
 j2 = 1 * (sin (PI * c / 2000));
 i2 = 1 * (cos (PI * c / 2000));
 tft.drawLine (i2 + 297, j2 + 240, i + 297, j + 240, White);
 j = 14 * (sin (PI * (c-300) / 2000));
 i = 14 * (cos (PI * (c-300) / 2000));
 j2 = 1 * (sin (PI * (c-300) / 2000));
 i2 = 1 * (cos (PI * (c-300) / 2000));
 tft.drawLine (i2 + 297, j2 + 240, i + 297, j + 240, 0x0000);
 tft.fillRect (286, 285, 30, 30, 0x0000);
 tft.setTextSize (2);
 tft.setTextColor (0xffff);
 tft.setCursor (286, 285);
 tft.print (c / 40); tft.print ("%");
 c ++;}
 jika (d < s) { j = 14 * (sin(PI * d / 2000)); i = 14 * (cos(PI * d / 2000)); j2 = 1 * (sin(PI * d / 2000)); i2 = 1 * (cos(PI * d / 2000)); tft.drawLine(i2 + 414, j2 + 240, i + 414, j + 240, White); j = 14 * (sin(PI * (d-300) / 2000)); i = 14 * (cos(PI * (d-300) / 2000)); j2 = 1 * (sin(PI * (d-300) / 2000)); i2 = 1 * (cos(PI * (d-300) / 2000)); tft.drawLine(i2 + 414, j2 + 240, i + 414, j + 240, 0x0000); tft.fillRect(402, 285, 30, 30, 0x0000); tft.setTextSize(2); tft.setTextColor(0xffff); tft.setCursor(402, 285); tft.print(d / 40); tft.print("%"); d++;} if (a > s) {
 j = 14 * (sin (PI * a / 2000));
 i = 14 * (cos (PI * a / 2000));
 j2 = 1 * (sin (PI * a / 2000));
 i2 = 1 * (cos (PI * a / 2000));
 tft.drawLine (i2 + 62, j2 + 240, i + 62, j + 240, White);
 j = 14 * (sin (PI * (+ 300) / 2000));
 i = 14 * (cos (PI * (a + 300) / 2000));
 j2 = 1 * (sin (PI * (+ 300) / 2000));
 i2 = 1 * (cos (PI * (a + 300) / 2000));
 tft.drawLine (i2 + 62, j2 + 240, i + 62, j + 240, 0x0000);
 tft.fillRect (50, 285, 30, 30, 0x0000);
 tft.setTextSize (2);
 tft.setTextColor (0xffff);
 tft.setCursor (50, 285);
 tft.print (a / 40); tft.print ("%");
 a--;}
 jika (b> s) {
 j = 14 * (sin (PI * b / 2000));
 i = 14 * (cos (PI * b / 2000));
 j2 = 1 * (sin (PI * b / 2000));
 i2 = 1 * (cos (PI * b / 2000));
 tft.drawLine (i2 + 180, j2 + 240, i + 180, j + 240, White);
 j = 14 * (sin (PI * (b + 300) / 2000));
 i = 14 * (cos (PI * (b + 300) / 2000));
 j2 = 1 * (sin (PI * (b + 300) / 2000));
 i2 = 1 * (cos (PI * (b + 300) / 2000));
 tft.drawLine (i2 + 180, j2 + 240, i + 180, j + 240, 0x0000);
 tft.fillRect (168, 285, 30, 30, 0x0000);
 tft.setTextSize (2);
 tft.setTextColor (0xffff);
 tft.setCursor (168, 285);
 tft.print (b / 40); tft.print ("%");
 b--;}
 jika (c> s) {
 j = 14 * (sin (PI * c / 2000));
 i = 14 * (cos (PI * c / 2000));
 j2 = 1 * (sin (PI * c / 2000));
 i2 = 1 * (cos (PI * c / 2000));
 tft.drawLine (i2 + 297, j2 + 240, i + 297, j + 240, White);
 j = 14 * (sin (PI * (c + 300) / 2000));
 i = 14 * (cos (PI * (c + 300) / 2000));
 j2 = 1 * (sin (PI * (c + 300) / 2000));
 i2 = 1 * (cos (PI * (c + 300) / 2000));
 tft.drawLine (i2 + 297, j2 + 240, i + 297, j + 240, 0x0000);
 tft.fillRect (286, 285, 30, 30, 0x0000);
 tft.setTextSize (2);
 tft.setTextColor (0xffff);
 tft.setCursor (286, 285);
 tft.print (c / 40); tft.print ("%");
 c--;}
 jika (d> s) {
 j = 14 * (sin (PI * d / 2000));
 i = 14 * (cos (PI * d / 2000));
 j2 = 1 * (sin (PI * d / 2000));
 i2 = 1 * (cos (PI * d / 2000));
 tft.drawLine (i2 + 414, j2 + 240, i + 414, j + 240, White);
 j = 14 * (sin (PI * (d + 300) / 2000));
 i = 14 * (cos (PI * (d + 300) / 2000));
 j2 = 1 * (sin (PI * (d + 300) / 2000));
 i2 = 1 * (cos (PI * (d + 300) / 2000));
 tft.drawLine (i2 + 414, j2 + 240, i + 414, j + 240, 0x0000);
 tft.fillRect (402, 285, 30, 30, 0x0000);
 tft.setTextSize (2);
 tft.setTextColor (0xffff);
 tft.setCursor (402, 285);
 tft.print (d / 40); tft.print ("%");
 d--;}
}
}

Anda dapat menemukan lebih banyak template beranimasi (Seperti GIF berikut) dengan mengklik tautan ini

Screen Saver

Dalam template ini, Kami hanya menampilkan beberapa gambar dengan RGBbitmap dan bitmap fungsi. Buat saja kode untuk layar sentuh dan gunakan template ini. Download the.h file and add it to folder of the Arduino sketch.

#include "Adafruit_GFX.h"    // Core graphics library
#include "MCUFRIEND_kbv.h"   // Hardware-specific library
MCUFRIEND_kbv tft;
#define BLACK   0x0000
#define RED     0xF800
#define GREEN   0x07E0
#define WHITE   0xFFFF
#define GREY    0x8410
#include "images.h"
#include "Fonts/FreeSans9pt7b.h"
#include "Fonts/FreeSans12pt7b.h"
#include "Fonts/FreeSerif12pt7b.h"
#include "FreeDefaultFonts.h"
int a = 3000;
int b = 4000;
int j, j2;
int i, i2;
void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg)
{
   int16_t x1, y1;
   uint16_t wid, ht;
  // tft.drawFastHLine(0, y, tft.width(), 0xffff);
   tft.setFont(f);
   tft.setCursor(x, y);
   tft.setTextColor(WHITE);
   tft.setTextSize(sz);
   tft.print(msg);
   delay(1000);
}
void setup()
{
 Serial.begin(9600);
 uint16_t ID = tft.readID();
 tft.begin(ID);
 tft.invertDisplay(true);
 tft.setRotation(1);
}
void loop(void)
{
 tft.invertDisplay(true);
 tft.fillScreen(BLACK);
 tft.drawRGBBitmap(0, 0, test, 480, 320);
 tft.drawBitmap(20, 20, Line1, 45, 45, 0xffff);//battery
 tft.drawBitmap(65, 20, Line2, 45, 45, 0xffff);//wifi
 tft.drawBitmap(125, 25, Line3, 45, 45, 0xffff);//mail
 tft.drawBitmap(185, 25, Line4, 45, 45, 0xffff);//instagram
 tft.drawBitmap(245, 25, Line6, 45, 45, 0xffff);//power
 tft.drawBitmap(20, 260, Line5, 45, 45, 0xffff);//twitter
 tft.drawBitmap(410, 140, Line7, 45, 45, 0xffff);//rain
 tft.setTextSize(6);
 tft.setTextColor(0xffff);
 tft.setCursor(280, 210);
 tft.print("20:45"); 
   tft.setTextSize(2);
 tft.setTextColor(0xffff);
 showmsgXY(330, 280, 1, &FreeSans12pt7b, "Saturday");
 showmsgXY(300, 305, 1, &FreeSans12pt7b, "6 October 2018");
 while (1);
} 
  • The speed of playing all the GIF files are edited and we made them faster or slower for better understanding. The speed of motions depends on the speed of your processor or type of code or size and thickness of elements in the code.
  • You can add the image code in the main page but it fills all the main page. So you can make a.h file and add in the folder of the sketch.
  • In this article, We just discussed about displaying elements on LCD. Follow our next tutorials to learn using touch screens and SD Cards.
  • If you have problem with including the Libraries, change the “” sign to <>.

× SPECIAL OFFER (VALID UNTIL NOVEMBER 1ST 2018): If you order the 3.5″ LCD from ElectroPeak, our technical staff will design your desired template for free! Just send an email to [email protected] containing your order number and requirements 😉

Leave a Reply

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