TJC dan Nextion sebenarnya merupakan HMI yang sama, yang diproduksi oleh perusahaan TJC (Tao Jing Chi). Keduanya memiliki hardware yang sama, hanya berbeda software editornya, karena dirancang untuk pasar yang berbeda. Nextion dikhususkan untuk pasar internasional, sehingga software dan tutorialnya dalam bahasa Inggris, sedangkan TJC dikhususkan untuk pasar Cina, sehingga software editornya hanya dalam bahasa Cina. Meskipun menggunakan software editor berbahasa Cina, namun TJC cukup menarik karena biayanya yang lebih murah, jauh lebih murah daripada Nextion, dengan kemampuan hardware yang sama. Sebagai perbandingan, berikut ini daftar harga yang saya ambil dari salah satu toko online (harga dalam ribuan).

Tabel 1. Daftar harga TJC dan Nextion (dalam ribuan)

Melihat harga di atas, maka akan sangat menarik apabila bisa menggunakan TJC menggantikan Nextion. Untuk itu, sama seperti di bagian ESP32 dan Nextion, berikut ini projek yang sama dibuat di sini, tetapi menggunakan TJC. Ada 2 projek yang akan dibuat di sini:

Berikut ini uraiannya masing-masing:

===================================================================================================

1. Komunikasi Serial ESP32 dengan TJC

A. HASIL YANG DIINGINKAN

Diinginkan membuat input output digital dan analog ESP32 dapat ditampilkan dan dikontrol dari TJC melalui komunikasi serial. Berikut ini detil komponen di ESP32 dan tampilan datanya di TJC:

Komponen di ESP32:

8 input digital (Dip switch),
8 output digital (LED Bar Graph),
2 input analog (Potensio putar dan Potensio geser),
2 output analog (Servo1 dan Servo2),
1 buah Penampil data (LCD I2C).

Objek di TJC:

8 objek Picture (LED merah atau LED hijau) untuk menampilkan status 8 input digital (Dip Switch).
8 Dual-state button untuk mengontrol 8 output digital (LED Bar Graph).
2 kotak Number, 2 Gauge, 2 Progress Bar dan sebuah Waveform untuk menampilkan 2 input analog (Potensio putar dan Potensio geser).
2 kotak Number, 2 Slider dan 2 Button untuk mengontrol 2 output analog (Servo1 dan Servo2).

Gambar berikut ini menunjukkan tampilan halaman 1-3 di TJC dan koneksinya dengan rangkaian input output digital dan analog ESP32 di Wokwi.

Gambar A.1 Tampilan halaman 1 TJC dan koneksinya dengan rangkaian input output digital ESP32

Gambar A.2 Tampilan halaman 2 TJC dan koneksinya dengan rangkaian input output analog ESP32

Gambar A.3 Tampilan halaman 3 TJC berupa grafik dan koneksinya dengan input analog ESP32

===================================================================================================

B. PEMBUATAN TAMPILAN HMI

Secara garis besar, ada 7 tahapan pembuatan tampilan HMI (Human Machine Interface) di TJC:

Berikut ini uraian masing-masing tahapan:

---------------------------------------------------------------------------------------------------------------------------------------------

Tahap 1. Pemilihan Model

1. Unduh file setup software TJC di link ini: http://wiki.tjc1688.com/download/usart_hmi.html

Gambar 1.1 Klik link (kotak biru) untuk mengunduh file setup software TJC (USART HMI)

2. Ekstrak file USARTHMIsetup_latest.zip.

3. Klik 2 kali pada file exe (application) untuk menjalankan instalasi.

Catatan: Ketika software TJC ini diinstal, software ini akan me-remove (menghapus) software Nextion yang telah terinstal. Agar Nextion masih bisa dijalankan, silahkan unduh file instalasi Nextion yang portable (berekstensi zip).

Gambar 1.2 Pilih Zip Download untuk instalasi Nextion yang portable

4. Setelah instalasi selesai, buka TJC (USART HMI), klik New, beri nama file HMI, kemudian tekan tombol Save.

Gambar 1.3 Klik New, beri nama file HMI, tekan tombol Save

5. Muncul pilihan Model, pilih sesuai tipe HMI yang dimiliki, dalam contoh di sini, saya menggunakan model TJC4827T143_011, yang memiliki ukuran 480x272.

Gambar 1.4 Pilih model sesuai hardware yang dimiliki

6. Untuk arah tampilan (display direction), pilih arah mendatar (0), klik OK.

Gambar 1.5 Pilih display direction arah mendatar, klik OK

---------------------------------------------------------------------------------------------------------------------------------------------

Tahap 2. Penambahan Picture

1. Unduh file gambar HMI di link ini: file gambar HMI

2. Ekstrak file, seharusnya ada 9 gambar, yang terdiri dari 3 gambar untuk background, 2 gambar untuk Indikator LED, 2 gambar untuk Dual-state button dan 2 gambar untuk Gauge.

3. Klik Tab Picture, klik Add (+), arahkan ke lokasi ekstrak file gambar HMI, klik Open, maka di kolom Picture, muncul ke-9 gambar seperti berikut.

Gambar 2.1 Klik Tab Picture, klik Add (+), pilih ke-9 file gambar HMI, klik Open

---------------------------------------------------------------------------------------------------------------------------------------------

Tahap 3. Penambahan Font

1. Buka menu kedua (menu Tools), pilih pilihan paling atas (Font Generator).

2. Di jendela yang muncul, isi Height = 14, isi Encoding = ASCII, pilih Font = Consolas, beri nama Font = Consolas14, klik Generate Font, muncul jendela Save As, klik tombol Save.

3. Muncul pertanyaan Add the generated font? Pilih Yes, maka nama Consolas14 dengan nomor ID=0 muncul di kolom Fonts.

Gambar 3.1 Klik Tab Fonts, buka menu Tools, pilih Font Generator, isi Height=14, pilih Encoding=ASCII, pilih Font=Consolas, isi nama Font=Consolas14

Gambar 3.2 Klik Generate Font, tekan tombol Save

Gambar 3.3 Muncul pertanyaan Add the generated font? Pilih Yes, maka muncul di Tab Font, sebuah tipe Font Consolas14 dengan ID=0

4. Ulangi langkah 1-3 di atas dengan ukuran Font yang lebih besar, yaitu dengan ukuran Height = 32m pilih Consolas, beri nama Font = Consolas32, klik Generate Font, tekan tombol Save.

5. Muncul pertanyaan Add the generated font? Pilih Yes, maka nama Consolas32 dengan nomor ID=1 muncul di kolom Fonts.

Gambar 3.4 Buka menu Tools, pilih Font Generator, isi Height=32, pilih Encoding=ASCII, pilih Font=Consolas, isi nama Font=Consolas32, klik Generate Font

Gambar 3.5 Muncul pertanyaan Add the generated font? Pilih Yes, maka muncul di Tab Font, sebuah tipe Font Consolas32 dengan ID=1

---------------------------------------------------------------------------------------------------------------------------------------------

Tahap 4. Penambahan Page

1. Di kolom Page, klik page0.
2. Di kolom Attribute, pilih sta = image, isi pic = 0 diikuti Enter, maka gambar pertama (ID=0) yang menampilkan tulisan INPUT OUTPUT DIGITAL muncul di layar page0.

Gambar 4.1 Klik page0, pilih sta=image, isi pic=0 tekan Enter

3. Di kolom Page, klik tombol Add page, maka muncul page1, klik page1.
4. Di kolom Attribute, pilih sta = image, isi pic = 1, maka di layar page1 menampilkan gambar layar Input Output Analog.

Gambar 4.2 Klik tombol Add page, di Attribute page1, pilih sta = image, isi pic = 1, diikuti Enter

5. Di kolom Page, klik tombol Add page, maka muncul page2, klik page2.
6. Di kolom Attribute, pilih sta = image, isi pic = 2, maka di layar page2 menampilkan gambar layar Grafik Input Analog.

Gambar 4.3 Klik tombol Add page, di Attribute page2, pilih sta = image, isi pic = 2, diikuti Enter

---------------------------------------------------------------------------------------------------------------------------------------------

Tahap 5. Penambahan Objek

1. Di kolom Page, klik page0.
2. Di kolom Toolbox, klik Picture, maka muncul objek Picture di pojok kiri atas.
3. Di kolom Attribute, isi pic = 3, isi x = 48, y = 60, w = 42, h = 50, maka objek Picture menampilkan gambar LED merah, dengan posisi tepat pada gambar elips di atas OD.1.

Gambar 5.1 Klik page0, klik Picture di Toolbox, isi pic=3, x=48, y=60, w=42, h=50

4. Perbanyak (Ctrl+C dan Ctrl+V) objek Picture sehingga menjadi 8 buah, kemudian tempatkan kedelapan LED merah tersebut pada posisi yang ditandai.

Gambar 5.2 Duplikasi objek Picture (LED merah) sebanyak 8 buah, tempatkan sesuai posisinya

5. Di Toolbox, klik objek Dual-state button.
6. Di kolom Attribute objek Dual-state button, pilih sta = image, isi pic = 5 dan pic2 = 6.

Gambar 5.3 Klik Dual-state button, pilih sta=image, pic=5, pic2=6

7. Di Attribute objek Dual-state button, hapus tulisan newtxt.

Gambar 5.4 Hapus tulisan newtxt

8. Atur posisi dan ukuran objek Dual-state button di Attribute x = 45, y = 131, w = 46 dan h = 68.

Gambar 5.5 Di Attribute Dual-state button, isi x=45, y=131, w=46 dan h=68.

9. Perbanyak objek Dual-state button sehingga menjadi 8 buah, kemudian tempatkan kedelapan Dual-state button tersebut pada posisi yang telah ditandai dengan kotak.

Gambar 5.6 Perbanyak Dual-state button sebanyak 8 buah dan tempatkan sesuai posisinya

10. Untuk membuat halaman berpindah dari page0 ke page1, klik objek Button di Toolbox, pilih sta = crop image (pilihan pertama), isi picc=0, picc2=2.

Gambar 5.7 Klik objek Button, pilih sta=crop image, picc=0, picc2=2

11. Hapus newtxt objek Button, dan atur posisi serta ukurannya, isi x = 390, y = 218, w = 100, h = 54.

Gambar 5.8 Atur posisi dan ukuran objek Button, isi x=390, y=218, w=100, h=54

12. Di kolom page, klik page1.

13. Di Toolbox, klik objek Number (123) sebanyak 4 kali, atur Font semua Number = 1.

Gambar 5.9 Klik objek Number sebanyak 4 kali, atur Font=1

14. Atur posisi dan ukuran semua objek Number seperti gambar berikut.

Gambar 5.10 Atur posisi dan ukuran semua objek Number seperti gambar di atas

15. Klik objek Gauge, pilih sta = image, pic = 7, val = 320, x = 41, y = 122, w = 80, h = 80.

Gambar 5.11 Klik objek Gauge, pilih sta=image, pic=7, val=320, x=41, y=122, w=80, h=80

16. Duplikasi objek Gauge, ganti isi pic dari 7 menjadi 8, atur x = 160, y = 122, w = 80, h = 80.

Gambar 5.12 Klik objek Gauge, pilih sta=image, pic=8, val=320, x=160, y=122, w=80, h=80

17. Klik objek Progress Bar, pilih dez = vertikal, val = 0, isi x = 128, y = 83, w = 25, h = 120.

18. Duplikasi objek Progress Bar, ubah nilai x dari 128 menjadi 248.

Gambar 5.13 Klik objek Progress Bar sebanyak 2 kali, pilih dez = vertikal, val=0, untuk objek pertama x=128, y=122, w=80, h=80, sedangkan objek kedua x=248, y=122, w=80, h=80

19. Klik objek Slider sebanyak 2 kali, isi val = 0, isi maxval = 180, untuk Slider pertama, isi x = 319, y = 75, w = 120, h = 25, untuk Slider kedua, isi x = 319, y = 142, w = 120, h = 25.

Gambar 5.14 Klik objek Slider sebanyak 2 kali, isi val = 0, isi maxval = 180, untuk Slider pertama, isi x = 319, y =75, w = 120, h = 25, sedangkan untuk Slider kedua, isi x = 319, y = 142, w = 120, h = 25

20. Klik objek Button sebanyak 2 kali, isi Font = 1, pilih warna bc0 lebih gelap dan warna pc0 = putih, isi txt = OK, untuk Button pertama, isi x = 368, y = 106, w = 72, h = 30, untuk Button kedua, isi x = 368, y = 174, w = 72, h = 30.

Gambar 5.15 Klik objek Button sebanyak 2 kali, isi Font = 1, isi txt = OK, untuk Button pertama, isi x = 368, y = 106, w = 72, h = 30, untuk Button kedua, isi x = 368, y = 174, w = 72, h = 30.

21. Berikutnya, tambahkan 2 buah objek Button lagi untuk berpindah ke page0 atau ke page2. Klik objek Button sebanyak 2 kali.

22. Untuk Button b2, pilih sta = crop image, picc = 1, picc2 = 0, x = 0, y = 218, w = 100, h = 54, dan untuk Button b3, pilih sta = crop image, picc = 1, picc2 = 2, x = 380, y = 218, w = 100, h = 54.

Gambar 5.16 Klik Button sebanyak 2 kali, pilih sta = crop image, untuk Button b2, isi picc = 1, picc2 = 0, x = 0, y = 218, w = 100, h = 54, untuk Button b3, isi picc = 1, picc2 = 2, x = 380, y = 218, w = 100, h = 54.

23. Klik page2, klik objek Waveform, pilih ch = 2, bco = putih, gdc = abu-abu muda, gdw = 28, gdh = 28, pco0 = merah, pco1 = biru, dis = 55, x = 66, y = 62, w = 364, h = 140.

Gambar 5.17 Klik page2, klik objek Waveform, pilih ch=2, bco=putih, gdc=abu-abu muda, gdw=28, gdh=28, pco0=merah, pco1=biru, dis=55, x=66, y=62, w=364, h=140

24. Klik objek Text, isi txt_maxl = 100, isi txt dengan angka berturut-turut: 4095, Enter, 3276, Enter, 2457, Enter, 1638, Enter, 819, Enter, 0, isi x = 36, y = 54, w = 30, h = 160.

Gambar 5.18 Klik objek Text, isi txt_maxl=100, isi txt dengan angka berturut-turut: 4095, Enter, 3276, Enter, 2457, Enter, 1638, Enter, 819, Enter, 0, isi x=36, y=54, w=30, h=160

25. Klik objek Text, pilih xcen = left, ycen = up, isi txt_maxl = 100, isi txt dengan angka berturut-turut: 28 56 84 112 140 168 196 224 252 280 308 336 364, isi x = 90, y = 203, w = 355, h = 15.

Gambar 5.19 Klik objek Text, isi txt_maxl=100, xcen=left, ycen=up, isi txt dengan angka berturut-turut: 28 56 84 112 140 168 196 224 252 280 308 336 364, isi x=90, y=203, w=355, h=15.

25. Untuk berpindah dari page2 ke page1, klik objek Button, pilih sta = crop image, picc = 2, picc2 = 0, hapus text "newtxt", isi x = 0, y = 218, w = 100 dan h = 54.

Gambar 5.20 Klik objek Button, pilih sta = crop image, picc = 2, picc2 = 0, hapus text "newtxt", isi x = 0, y = 218, w = 100 dan h = 54.

---------------------------------------------------------------------------------------------------------------------------------------------

Tahap 6. Penambahan Event

1. Di kolom Page, klik page0. Klik objek Dual-state button bt0.
2. Agar setiap kali Dual-state button diklik, nilai status Dual-state button dikirim ke ESP32, tambahkan kode di Touch Release Event dengan kode berikut ini:
print "0"
print bt0.val

Gambar 6.1 Klik Dual-state button, di Touch Release Event, isi kode print "0", Enter, print bt0.val

3. Ulangi langkah di atas untuk semua objek Dual-state button, dengan isi kode yang diketikkan untuk setiap Touch Release Event seperti tabel berikut:

4. Agar penekanan tombol b0 di page0 bisa membuat layar berpindah dari page0 ke page1, tambahkan kode di Touch Release Event:

page 1

Gambar 6.2 Klik Button b0 di page0, di Touch Release Event, ketik page 1

5. Ulangi langkah di atas untuk Button b2 di page1, diinginkan ketika Button b2 ditekan, layar berpindah dari page1 ke page0, untuk itu tambahkan kode di Touch Release Event:

page 0

Gambar 6.3 Klik Button b2 di page1, di Touch Release Event, ketik page 0

6. Ulangi langkah di atas untuk Button b3 di page1, diinginkan ketika Button b3 ditekan, layar berpindah dari page1 ke page2, untuk itu tambahkan kode di Touch Release Event:

page 2

Gambar 6.4 Klik Button b3 di page1, di Touch Release Event, ketik page 2

7. Ulangi langkah di atas untuk Button b0 di page2, diinginkan ketika Button b0 ditekan, layar berpindah dari page2 ke page1, untuk itu tambahkan kode di Touch Release Event:

page 1

Gambar 6.5 Klik Button b0 di page2, di Touch Release Event, ketik page 1

8. Kembali ke page1, agar nilai di kotak Number n2 berubah nilainya mengikuti nilai Slider h0, klik objek Slider h0 di page1, kemudian di Touch Move Event ketik kode berikut ini:

n2.val=h0.val

Gambar 6.6 Klik Slider h0 di page1, di Touch Move Event, ketik n2.val=h0.val

9. Ulangi langkah di atas untuk Slider h1 di page1, klik objek Slider h1 di page1, kemudian di Touch Move Event ketik kode berikut ini:

n3.val=h1.val

Gambar 6.7 Klik Slider h1 di page1, di Touch Move Event, ketik n3.val=h1.val

10. Diinginkan nilai di kotak Number n2 dapat dikirimkan ke ESP32 setiap kali tombol OK (Button b0) ditekan. Untuk itu klik Button b0, di Touch Release Event ketik kode berikut ini:

print "8"

print n2.val

Gambar 6.8 Klik Button b0 di page1, di Touch Release Event, ketik print "8" Enter print n2.val

11. Diinginkan nilai di kotak Number n3 dapat dikirimkan ke ESP32 setiap kali tombol OK (Button b1) ditekan. Untuk itu klik Button b1, di Touch Release Event ketik kode berikut ini:

print "9"

print n3.val

Gambar 6.9 Klik Button b1 di page1, di Touch Release Event, ketik print "9" Enter print n3.val

---------------------------------------------------------------------------------------------------------------------------------------------

Tahap 7. Penambahan Keypad

1. Masih di page1, diinginkan kotak Number n2 dan n3 tidak hanya bisa diisi dari nilai Slider, tetapi bisa juga diisi dari Keypad. Untuk itu klik objek Number n2, pilih vscope = global (pilihan kedua), kemudian pilih key = Numeric Keyboard (keybdB - pilihan kedua), klik OK.

Gambar 7.1 Klik Number n2, pilih vscope=global, pilih key=keybdB, klik OK

2. Ulangi hal yang sama untuk n3, klik objek Number n3, pilih vscope = global (pilihan kedua), kemudian pilih key = Numeric Keyboard (keybdB - pilihan kedua), klik OK.

Gambar 7.2 Klik Number n3, pilih vscope=global, pilih key=keybdB, klik OK

Catatan: Secara default, vscope objek TJC adalah local, yang artinya hanya bisa aktif pada halaman di mana objek tersebut ditempatkan. Ketika pindah halaman, nilai objek tersebut akan reset menjadi 0 atau false. Agar nilai objek tidak menjadi 0 atau false ketika pindah halaman, ubah vscope menjadi global.

Saran: Silahkan mengubah vscope semua objek menjadi global.

Sampai di sini langkah-langkah pembuatan tampilan HMI TJC selesai. Untuk mengetahui apakah pembuatannya sudah sesuai dengan yang diinginkan, silahkan bisa menjalankan simulasinya.

===================================================================================================

C. MENJALANKAN SIMULASI

1. Klik tombol Save.
2. Klik Compile untuk mengetahui apakah ada kesalahan.
3. Apabila tidak ada kesalahan (Compile Successfull), klik Debug untuk menjalankan simulasinya.

Gambar C.1 Klik Save, klik Compile, klik Debug

4. Pada Gambar C.1 di atas terlihat tampilan simulasi TJC. Ada 3 kolom di bawah tampilan layar TJC; kolom pertama merupakan kolom input data dari keyboard, kolom kedua merupakan kolom data dari TJC, sedangkan kolom ketiga merupakan kolom data dari ESP32. Perhatikan ketika objek Dual-state button ID.1 dibuat ON, maka di kolom data TJC muncul data 30 01 00 00 00. Data TJC ini dalam format Hex, yang terdiri dari 5 byte data. Byte pertama menunjukkan objek apa yang sedang mengirimkan data, byte kedua menunjukkan nilai yang dikirimkan, dan byte ketiga sampai kelima merupakan penanda akhir data. Untuk kode objek pengirim data, lihat daftar berikut:

5. Klik tanda panah untuk berpindah ke halaman kedua.
6. Di halaman kedua, geser Slider h0 hingga kotak Number n2 (OA.1) menampilkan angka 180, kemudian tekan tombol OK (Button b0). Perhatikan kolom data TJC menampilkan data 38 B4 00 00 00. Data di byte pertama menunjukkan objek pengirim adalah Button b0 (0x38). Byte kedua berisi angka B4, yang sama dengan angka 180 desimal. Byte ketiga sampai byte kelima merupakan penanda akhir data.

7. Geser Slider h1 hingga kotak Number n3 (OA.2) menampilkan angka 90, kemudian tekan tombol OK (Button b1). Perhatikan kolom data TJC menampilkan data 39 5A 00 00 00. Data di byte pertama menunjukkan objek pengirim adalah Button b1 (0x39). Byte kedua berisi angka 5A, yang sama dengan angka 90 desimal. Byte ketiga sampai byte kelima merupakan penanda akhir data.

Gambar C.2 Geser Slider h0 tekan tombol OK di sampingnya, kemudian geser Slider h1 tekan tombol OK di sampingnya, perhatikan data yang ditampilkan di kolom kedua

8. Klik kotak Number n3, maka muncul Keypad.

9. Ketik angka 100, kemudian klik OK di Keypad, klik OK di page1, maka di kolom kedua muncul 5 byte angka: 39 64 00 00 00. Byte pertama = 39 menunjuk pada tombol OK (Button b1), byte kedua = 64 (heksadesimal) sama dengan angka 100 desimal, byte ketiga sampai byte kelima merupakan penanda akhir data.

Gambar C.3 Klik kotak Number n3, ketik angka 100 di Keypad, klik OK, klik OK di page1, maka muncul data 5 byte di kolom kedua: 39 64 00 00 00

10. Untuk menguji sekaligus memastikan bahwa nantinya data yang dikirim oleh ESP32 dapat ditampilkan di kotak Number, Gauge dan Progress Bar, maka ketik kode berikut ini di kolom yang pertama, dan akhiri setiap baris kode dengan menekan Enter:
n0.val=500
n1.val=1000
z0.val=75
z1.val=150

j0.val=80
j1.val=30

Gambar C.4 Di kolom pertama (kolom instruction), ketik kode n0.val=500 diikuti Enter, perhatikan kotak Number n0 (IA.1), seharusnya menampilkan nilai 500, lanjutkan dengan mengetik kode di baris berikutnya, dan perhatikan tampilan kotak Number, Gauge dan Progress Bar

11. Agar TJC ini bisa terhubung dengan ESP32, klik pada opsi User MCU Input (1), biarkan baudrate sebesar 9600 (2), pilih COM yang berpasangan, dalam contoh di sini menggunakan COM7 dan COM8, COM7 (3) untuk TJC, sedangkan COM8 untuk ESP32, kemudian klik Start (4) untuk menjalankan komunikasi serial.

Gambar C.5 Klik opsi User MCU Input, pilih 9600, pilih COM yang berpasangan, klik tombol Start

Catatan: Apabila rekan-rekan belum memiliki pasangan COM, silahkan bisa mengunduh software pembuat pasangan COM, salah satunya: https://hhdsoftware.com/virtual-serial-port-tools. Instal software tersebut, kemudian pilih Create Local Bridge, secara default pasangan COM yang dibuat adalah COM1 dan COM2.

12. Buka rangkaian ESP32 di Wokwi di link ini: https://wokwi.com/projects/452309526197985281

13. Jalankan simulasi Wokwi, pastikan muncul kotak dialog pemilihan Port COM. Pilih COM yang berpasangan dengan COM di TJC.
14. Setelah terhubung, geser Dip Switch Wokwi, perhatikan kedelapan LED indikator di TJC.
15. Geser Dual-state Button TJC, perhatikan LED Bar Graph di Wokwi.

Gambar C.6 Jalankan simulasi Wokwi, pilih Port COM yang berpasangan dengan COM TJC, geser Switch di Wokwi, dan juga geser Dual-state Button dari OFF menjadi ON atau sebaliknya

16. Klik tombol panah untuk berpindah halaman ke halaman Input Output Analog.
17. Ubah nilai Potensio Putar dan Potensio Geser di ESP32, perhatikan nilai kotak Number, Gauge dan Progress Bar seharusnya sesuai dengan nilai Potensio. Perhatikan juga tampilan LCD I2C yang menampilkan nilai Potensio Putar dan Potensio Geser.

18. Geser Slider h0 dan h1, kemudian tekan tombol OK di samping kotak n2 dan n3, perhatikan posisi Servo1 dan Servo2, yang seharusnya mengikuti nilai di kotak Number n2 dan n3.

Gambar C.7 Putar potensio pertama dan geser potensio kedua di ESP32, dan perhatikan nilai di kotak Number n0 dan n1, Gauge z0 dan z1 dan Progress bar j0 dan j1, kemudian geser Slider h0 dan h1, klik tombol OK, seharusnya Servo1 dan Servo2 di ESP32 mengikuti nilai di kotak Number n2 dan n3

19. Klik tombol panah untuk berpindah ke halaman Grafik Input Analog. Putar potensio putar dan geser potensio geser di ESP32, maka seharusnya nilai kedua Potensio tersebut ditampilkan di Grafik.

Gambar C.8 Putar potensio pertama dan geser potensio kedua di ESP32, dan perhatikan tampilan grafik di halaman ketiga

===================================================================================================

D. UPLOAD FILE

1. Untuk membuat file output tft, klik menu File, pilih TFT file output.
2. Di jendela TFT yang muncul, pilih direktori untuk lokasi file TFT ditempatkan, kemudian tekan tombol Output.

Gambar D.1 Pilih menu File, klik TFT file output, pilih direktori lokasi file, klik Output

3. Buka direktori file TFT, simpan file TFT ke dalam SD Card (melalui USB Card Reader).

Gambar D.2 Simpan file TFT ke dalam SD Card

4. Masukkan SD Card yang sudah diisi file tft ke dalam slot SD Card di TJC, beri suplai tegangan 5V ke TJC, maka secara otomatis file TFT di dalam SD Card akan diupload ke memori TJC.

Gambar D.3 Masukkan SD Card ke slot SD Card TJC, beri suplai tegangan

Gambar D.4 File tft diupload ke memori TJC

5. Setelah proses upload file TFT selesai, hentikan suplai tegangan, ambil SD Card.
6. Setelah SD Card diambil, berikan lagi suplai tegangan ke TJC, maka sekarang hardware TJC akan bekerja menampilkan tampilan HMI yang sama seperti tampilan simulasi.
7. Untuk pengujian komunikasi serial dengan ESP32, di sini kita menggunakan simulasi Wokwi yang sama seperti sebelumnya. Agar hardware TJC ini bisa terhubung dengan Wokwi, tambahkan konverter USB to TTL.

Gambar D.5 Tambahkan konverter USB to TTL

8. Buka Device Manager, buka Ports (COM & LPT), lihat COM yang digunakan Konverter USB to TTL. Dalam contoh di sini, terlihat Konverter USB to TTL menggunakan COM11.

9. Buka link Wokwi ini: https://wokwi.com/projects/452309526197985281
10. Jalankan Wokwi, di kotak pemilihan COM, pilih COM yang digunakan konverter USB to TTL.

Gambar D.6 Buka Device Manager, lihat COM yang digunakan Konverter USB to TTL, jalankan Wokwi, pilih COM tersebut

11. Masukkan SD Card ke dalam slot SD Card di TJC, beri suplai tegangan 5V ke TJC, maka secara otomatis file TFT di dalam SD Card akan diunduh dan ditanamkan ke memori TJC.

Gambar D.7 Geser Dual-state button di TJC dan perhatikan nyala LED Bar Graph di ESP32, kemudian geser Dip Switch di ESP32 dan perhatikan nyala LED indikator di TJC

12. Masukkan SD Card ke dalam slot SD Card di TJC, beri suplai tegangan 5V ke TJC, maka secara otomatis file TFT di dalam SD Card akan diunduh dan ditanamkan ke memori TJC.

Gambar D.8 Putar dan geser potensio di ESP32 dan perhatikan isi kotak Number, Gauge dan Progress Bar, kemudian geser kedua Slider di TJC, dan tekan OK di TJC, dan perhatikan posisi kedua Servo

13. Pindah ke halaman ketiga TJC, putar dan geser potensio di ESP32 dan perhatikan tampilan Grafik Input Analog, seharusnya kedua nilai potensio ditampilkan grafiknya.

Gambar D.9 Di halaman ketiga TJC, putar dan geser potensio, seharusnya grafik menampilkan kedua nilai potensio

14. Sampai di sini proses pembuatan komunikasi serial antara ESP32 dengan TJC selesai. Apabila rekan-rekan membutuhkan file projek TJC ini, silahkan bisa mengunduh di sini: File HMI TJC.

15. Agar lebih jelas, berikut ini video pembuatannya:

Video pembuatan koneksi ESP32 (Wokwi) dengan HMI TJC (Nextion)

Yuk bermain Wokwi

Topik

11. ESP32 dan TJC (Nextion)

1. Komunikasi Serial ESP32 dengan TJC

A. HASIL YANG DIINGINKAN

B. PEMBUATAN TAMPILAN HMI

C. MENJALANKAN SIMULASI

D. UPLOAD FILE

No comments:

Post a Comment

Report Abuse