Mana yang lebih baik, Dwin atau Nextion?
DWIN dan Nextion adalah dua platform layar sentuh HMI (Human-Machine Interface) populer, dengan Nextion unggul dalam kemudahan penggunaan IDE dan string handling, sedangkan DWIN menawarkan harga lebih murah, variasi model lebih banyak (hingga layar besar), dukungan industri (RS232, CAN, Modbus), dan touch kapasitif, menjadikannya pilihan lebih cost-effective untuk aplikasi industri meski Nextion lebih mudah untuk pemula.
Keunggulan Nextion:
- IDE Mudah: IDE (Integrated Development Environment) Nextion lebih sederhana dan kuat, dengan instruction statements yang mempermudah coding event sentuh.
- Pengiriman Teks: Lebih mudah mengirim teks (string) dibandingkan DWIN.
- Komunitas: Forum online yang kuat untuk dukungan.
Keunggulan DWIN:
- Harga: Jauh lebih terjangkau (cost-effective) dibandingkan Nextion.
- Variasi Model: Pilihan model sangat banyak, termasuk ukuran besar hingga 21.5 inci, dengan casing berkualitas industri.
- Konektivitas Industri: Mendukung RS232, CAN, dan Modbus pada model industri.
- Jenis Sentuh: Menawarkan model sentuh kapasitif, bahkan untuk ukuran kecil.
- IDE: Memiliki debug yang lebih kuat dan jumlah komponen lebih banyak.
- Kontrol Elemen: Mudah mengontrol tombol dan elemen menggunakan alokasi alamat VP.
Saran Pemilihan:
- Pilih Nextion jika prioritas Anda adalah kemudahan prototyping cepat, pembelajaran awal yang mudah, dan coding berbasis string sederhana.
- Pilih DWIN jika Anda membutuhkan solusi yang lebih hemat biaya, layar besar, fitur industri (seperti Modbus/CAN), atau touch kapasitif, serta siap dengan IDE yang mungkin sedikit lebih kompleks untuk fitur lebih kaya.
========================================================================================
Berikut ini cara pengaturan Dwin dan koneksinya dengan IO Digital Analog ESP32 (simulasi Wokwi):
Ada 18 langkah yang diperlukan:
- Buat gambar background dan gambar icon.
- Buka Dwin DGUS, pilih resolusi dan lokasi penyimpanan.
- Tempatkan file gambar background di folder DWIN SET dan file gambar icon di luar folder.
- Buat page dengan add background.
- Generate gambar background -> 32.icl.
- Generate gambar icon -> 42.icl.
- Generate tipe Font => 0_DWIN_ASC.HZK.
- Tambahkan Display Icon Show:
- Var Icon Display -> Switch dan LED.
- Icon Rotating -> Gauge.
- Slider Display -> Slider.
- Tambahkan Display Text Show:
- Data Variables Display -> kotak angka analog input dan analog output.
- Tambahkan Display Graph Show:
- Progress Bar -> Progress Bar.
- Dynamic Curve -> Grafik.
- Tambahkan Touch:
- Increment Adjustment -> Switch.
- Drag Adjustment -> Slider.
- Variables Input -> Input dari Keypad.
- Basic Touch -> Pindah page dan tombol Keypad.
- Tambahkan CFG EDIT untuk pengaturan baud-rate, Touch sensitif dan posisi tampilan -> T5LCFG.CFG.
- Save dan Generate -> 13TouchFile.bin, 14ShowFile.bin, 22_Config.bin.
- Simulasikan hasil seting Dwin dengan Show Preview from First, dan Show Debug untuk mensimulasikan ESP32.
- Apabila simulasi berjalan dengan baik, copy folder DWIN SET ke dalam SD Card, upload file ke Dwin.
- Buka link Wokwi: https://wokwi.com/projects/453377093722015745.
- Hubungkan Dwin ke port USB komputer melalui Konverter USB to TTL.
- Jalankan Wokwi, maka seharusnya komponen IO digital dan analog di ESP32 dapat dikontrol dan dimonitor dari Dwin.
========================================================================================
Berikut ini contoh penerapan untuk langkah-langkah di atas:
Catatan: di contoh ini saya menggunakan resolusi Dwin 320x240. Untuk ukuran yang lain, silahkan bisa mengubah gambar Background dan gambar Iconnya.
1. Buat gambar Background dan gambar Icon. Unduh gambar background di link ini: file gambar Background
Unduh gambar icon di link ini: file gambar Icon
Gambar 1. Unduh file gambar background
Gambar 2. Unduh file gambar icon
2. Buka Dwin DGUS, pilih New, pilih resolusi dan lokasi penyimpanan.
Gambar 3. Buka software Dwin DGUS, pilih New, pilih resolusi, pilih lokasi
3. Ekstrak dan pindahkan isi file gambar background ke folder IMAGE dan isi file gambar icon ke folder ICON.
Gambar 4. Ekstrak file gambar background di folder IMAGE dan file gambar icon di folder ICON
4. Di halaman Touch and Display Config Dwin, buat page dengan add (+) background.
Gambar 7. Di Touch and Display Config, di kolom Images View, klik tombol +, arahkan ke folder IMAGE, pilih semua gambar, klik Open
Gambar 8. Terlihat di kolom Images View, muncul 6 file gambar, yang langsung menjadi 6 buah page
5. Generate gambar background -> 32.icl.
Gambar 9. Klik Tab Welcome, klik DWIN ICL Generation, klik Select Directory, arahkan ke folder IMAGE
Gambar 10. Klik Select Directory, pilih folder IMAGE, klik Select Folder, klik Generate ICL
Gambar 11. Klik Generate ICL, beri nama file 32, klik tombol Save
6. Generate gambar icon -> 42.icl.
Gambar 12. Klik Select Directory, pilih folder ICON, klik Select Folder
Gambar 13. Klik Generate ICL, beri nama file 42, klik tombol Save, tutup jendela ICL Tool
Gambar 14. Di folder DWIN SET, akan ada 6 buah file gambar, 2 buah file ICL (32 dan 42)
7. Generate tipe Font => 0_DWIN_ASC.HZK.
Gambar 15. Klik Tab Welcome, klik 0# word bank generating, Select Char = 8 (karena hanya menampilkan angka saja), atur Horizontal dan Vertical Scale dan Shift sehingga tidak ada bagian yang terpotong, klik Create 0_DWIN_ASC.HZK, tutup jendela Font Generator
Gambar 16. File Font 0_DWIN_ASC.HZK yang di-generate muncul di folder software DGUS, pindahkan file tersebut ke folder DWIN SET
Gambar 17. Di folder DWIN SET, akan ada 6 buah file gambar, 2 buah file ICL dan sebuah file HZK
8. Tambahkan Display Icon Show:
Gambar 18. Kembali ke Touch and Display config, di page 00, pilih Icon Show, klik VAR_Icon Display, tempatkan di posisi 0x5000, isi VP=5000, Icon File=42.icl, Minimum=0, icon ID=8 (tekan +, pilih dari daftar icon), Maximum=1, icon ID=9 (tekan +, pilih dari daftar icon), centang Filter, klik OK 
- Var Icon Display -> Switch dan LED.
Gambar 18. Kembali ke Touch and Display config, di page 00, pilih Icon Show, klik VAR_Icon Display, tempatkan di posisi 0x5000, isi VP=5000, Icon File=42.icl, Minimum=0, icon ID=8 (tekan +, pilih dari daftar icon), Maximum=1, icon ID=9 (tekan +, pilih dari daftar icon), centang Filter, klik OK
Gambar 19. Duplikasi VAR Icon Display sehingga menjadi 8 buah, tempatkan di posisi 0x5000-0x5007, atur VP sesuai nilai posisinya
Gambar 20. Pilih ke-8 VAR Icon Display, duplikasi, dan tempatkan di page 01, kemudian ganti icon ID untuk Minimum = 6 dan icon ID untuk Maximum = 7, dan buat nilai VP sesuai dengan posisinya
- Icon Rotating -> Gauge.
Gambar 21. Di page 02, klik Icon Rotating, tempatkan di posisi Gauge 0x5012, isi VP=5012, Icon File=42.icl, klik +, pilih 10 (gambar jarum), beri centang pada Filter background, klik OK
Gambar 22. Muncul jendela Area Setting, klik titik pusat putaran jarum, klik OK
Gambar 23. Isi Start Variable=0, End Variable=100, Start Angle=90 dan End Angle=630
Catatan: Dwin menetapkan sudut putaran penuh sebesar 720, agar bisa menghasilkan ketelitian hingga 0,5 derajat. Agar bisa menghasilkan posisi awal di 225 derajat, maka di Dwin nilainya menjadi 225 x 2 = 450, dan untuk menghasilkan posisi akhir di 135 derajat, maka di Dwin nilainya menjadi 135 x 2 = 270. Hanya saja, apabila posisi tersebut dimasukkan ke kolom Start Angle dan End Angle, maka putaran jarum menjadi berlawanan jarum jam, karena nilai posisi awal lebih besar dari nilai posisi akhir. Agar putarannya bisa searah jarum jam, maka dibuat posisi jarum mengarah ke bawah. Dengan membuat posisi jarum mengarah ke bawah, maka posisi awal di sudut 450 menjadi 90, dan posisi akhir di sudut 270 menjadi 630 (lihat Gambar 24, perhatikan ekor garis jarum). Sehingga dengan memasukkan Start Angle = 90 dan End Angle = 630, putaran jarum akan searah jarum jam.
Gambar 24. Sudut jarum, ketika dibuat dari 450 ke 270, ternyata putarannya menjadi berlawanan arah jarum jam (nilai awal lebih besar dari nilai akhir), maka solusinya, posisi jarum dibuat mengarah ke bawah, menghasilkan sudut awal menjadi 90 dan sudut akhir menjadi 630
Gambar 25. Duplikasi Icon Rotating, tempatkan di posisi 0x5013, dan sesuaikan VP menjadi 5013
- Slider Display -> Slider.
Gambar 26. Di page 03, pilih menu Icon Show, pilih Slider Display, tempatkan di posisi 0x5014, buat melingkupi garis datar namun jangan sampai penuh, untuk memberikan ruang pada knob, isi VP=5014, Terminal Value=180, Icon file=42.icl, dan tekan tombol +, pilih icon ID=11 
Gambar 28. Duplikasi Slider Display, tempatkan di posisi 0x5015, sesuaikan nilai VP
9. Tambahkan Display Text Show:- Data Variables Display -> kotak angka analog input dan analog output.
Gambar 29. Di page 02, pilih menu Text Show, klik Data Variables Display,
tempatkan di posisi 0x5010, sesuaikan nilai VP, pilih Alignment=Right
dan Integer digits=4
Gambar 30. Duplikasi Data Variables Display, dan tempatkan di posisi 0x5011, sesuaikan nilai VP
- Progress Bar -> Progress Bar.
Gambar 32. Pilih menu Graph Show, klik Progress Bar, tempatkan di posisi 0x5012, sesuaikan VP, beri warna pada border color, forecolor, backcolor, isi Max=100, Min=0, beri centang pada opsi border dan background, isi Orietation=Up 
Gambar 33. Duplikasi Progress Bar, tempatkan di posisi 0x5013, sesuaikan nilai VP
- Dynamic Curve -> Grafik.
Gambar 34. Pilih menu Graph Show, klik Dynamic Curve, tempatkan di kotak grafik, isi Y_Central=106, VD_Central=500, MUL_Y=33, Data Source Channel=0, Space of Axis X=10, Width of Curve=1, Curve Color=Red- Y_Central diisi dengan titik tengah koordinat sumbu Y, gerakkan mouse di titik tengah kotak grafik, dalam gambar di atas, Y = 106.
- VD_Central diisi dengan selisih nilai Maximum (=1000) dengan nilai Minimum (=0), dibagi 2.
- MUL_Y diisi dengan nilai H (tinggi grafik) dikali dengan 256 dibagi dengan 1000, hasilnya dibulatkan ke bawah. Dalam contoh di sini, H=132, bila dikali dengan 256 menghasilkan 33,792, bila dibagi 1000 dan dibulatkan ke bawah, menghasilkan nilai 33.
- Agar dalam 1 kotak grafik bisa menampilkan 2 buah grafik, tempatkan 2 Dynamic Curve dengan 2 buah Data Source Channel yang berbeda. Untuk itu, untuk Dynamic Curve yang pertama, gunakan Data Source Channel=0, sedangkan untuk Dynamic Curve yang kedua, gunakan Data Source Channel=1.
- Untuk Data Source Channel 0, menggunakan memori dari alamat 0x1000-0x17FF, sedangkan untuk Data Source Channel 1, menggunakan memori dari alamat 0x1800-0x1FFF. Untuk itu, alamat 0x1000-0x1FFF tidak bisa digunakan untuk variabel yang lain.
Gambar 35. Duplikasi Dynamic Curve, buat Data Source Channel yang kedua diisi 1, dan Curve Color diisi warna biru, kemudian tempatkan Dynamic Curve tepat pada posisi yang sama dengan Dynamic Curve yang pertama
- Increment Adjustment -> Switch.
Gambar
36. Di page 00, pilih menu Touch, klik Increment Adjustment, tempatkan di posisi 0x5000, beri centang Data auto-uploading, isi VP=5000, Adjust method=++, Over limit=Cycle, Adjusting step=1, Lower limit=0, Upper limit =1
Gambar
37. Duplikasi Increment Adjustment, tempatkan di posisi 0x5001 sampai 0x5007, sesuaikan nilai VP dengan posisinya
- Drag Adjustment -> Slider.
Gambar
39. Duplikasi Drag Adjustment, tempatkan di 0x5015, isi VP=5015
- Variables Input -> Input dari Keypad.
Gambar 41. Isi Display method=Direct display, Keyboard location=Other page, klik Keyboard setting, pilih page 05 (tampilan Keypad) 
Gambar 42. Muncul tampilan Keypad, pilih (gerakkan pointer melingkupi) area Keypad, klik OK
Gambar 43. Klik tombol Set di bawah gambar Keypad, klik pada huruf T untuk menempatkan pojok kiri atas Keypad, klik OK
Gambar 44. Untuk menampilkan angka di posisi yang tepat di Keypad, klik tombol Set, muncul Image Area Setting, centang Displayed Keyboard, klik bagian kanan atas di kolom Keypad, klik OK
Gambar 45. Duplikasi Variables Input, tempatkan di posisi 0x5015, sesuaikan nilai VP dengan alamat posisinya
- Basic Touch -> Pindah page dan tombol Keypad.
Gambar 48. Untuk berpindah halaman, pilih menu Touch, klik Basic Touch Module, pilih page 00, buat ukuran w dan h sebesar 60, tempatkan di pojok kanan bawah, isi Button effect = 5, dan Page switching=1
Gambar 49. Duplikasi Basic Touch Module, tempatkan di page 01, di pojok kiri bawah, isi Button effect = 5, dan Page switching=0
Gambar 50. Duplikasi Basic Touch Module, tempatkan di page 01, di pojok kanan bawah, isi Button effect = 5, dan Page switching=2
Gambar 51. Duplikasi kedua Basic Touch Module, tempatkan di page 02, di pojok kiri dan kanan bawah, untuk yang di kiri: isi Button effect = 5, dan Page switching=1, sedangkan untuk yang di kanan, isi Button effect = 5, dan Page switching=3
Gambar 52. Duplikasi kedua Basic Touch Module, tempatkan di page 03, di pojok kiri dan kanan bawah, untuk yang di kiri: isi Button effect = 5, dan Page switching=2, sedangkan untuk yang di kanan: isi Button effect = 5, dan Page switching=4
Gambar 53. Duplikasi Basic Touch Module, tempatkan di page 04, di pojok kiri bawah, isi Button effect = 5, dan Page switching=3
12. Edit CFG untuk pengaturan baud-rate, Touch sensitif dan posisi tampilan -> T5LCFG.CFG.
Gambar 55. Diinginkan baudrate sebesar 9600 (secara default baudrate=115200), pengubahan baudrate dilakukan di CFG Edit, buka Tab Welcome, klik Config Generator
Gambar 56. Di jendela CFG Edit, atur Baudrate=9600, kemudian pilih Auto pada Touch-sensitive Variable Changes Update, kemudian untuk posisi tampilan LCD, agar bisa mendatar, pilih 90° (khusus yang 320x240, posisi 90° = mendatar), terakhir klik tombol New CFG untuk menyimpan CFG Edit
Gambar 57. Beri nama T5LCFG, simpan di folder DWIN SET, klik Save
13. Save dan Generate -> 13TouchFile.bin, 14ShowFile.bin, 22_Config.bin.
Gambar 58. Klik tombol Save, klik tombol Generate (ini akan menghasilkan 3 buah file bin, yaitu 13TouchFile.bin, 14ShowFile.bin dan 22_Config.bin)
Gambar 59. Terlihat di folder DWIN SET, ada 13 buah file, yang terdiri dari 6 buah file png, sebuah file HZK, 3 buah file bin, 2 buah file icl dan sebuah file CFG
========================================================================================
14. Simulasikan hasil seting Dwin dengan Show Preview from First, dan Show Debug untuk ESP32.
Gambar 60. Pilih menu Show, tekan tombol Preview from First dan tombol Debug
Gambar 61. Atur masing-masing Port ke COM yang berpasangan (lihat Device Manager), dalam contoh di sini menggunakan COM3 dan COM4, COM3 untuk simulasi Dwin, sedangkan COM4 untuk Debug, atur baud rate ke 9600, tekan tombol Open untuk membuka komunikasi
Gambar 62. Geser kedelapan Switch di halaman pertama Dwin, dan perhatikan kolom data di Debug, seharusnya menampilkan data yang meliputi kode baca (83), alamat VP (500x) dan nilainya (1 atau 0)
Gambar 63. Di simulasi Dwin, pindah ke halaman kedua, kemudian di Debug, pilih Write VP, isi VP Address dengan salah satu alamat dari 0x5008-0x500F, isi kolom Write dengan angka 1, kemudian tekan tombol Send Order, maka LED indikator di halaman kedua, yang memiliki alamat yang sesuai, harusnya menyala
Gambar 64. Di simulasi Dwin, pindah ke halaman ketiga, di Debug, isi alamat VP dengan 0x5010, kemudian ketik 64 di kolom Write, tekan tombol Send Order, maka seharusnya kotak angka 5010 menampilkan angka 100 (karena 64 heksadesimal sama dengan desimal 100)
Gambar 65. Isi alamat VP dengan 0x5011, isi kolom Write dengan 32, klik Send Order, maka kotak angka 0x5011 akan menampilkan angka 50 (karena 32 heksadesimal sama dengan desimal 50)
Gambar 66. Isi alamat VP dengan 0x5012, isi kolom Write dengan 50, klik Send
Order, maka jarum Gauge akan berputar 80% dari maksimum (karena 50 heksadesimal sama dengan desimal 80)
Gambar
67. Pindah ke halaman keempat, geser Slider pertama dan kedua, dan perhatikan kolom
data di Debug, seharusnya menampilkan data yang meliputi kode baca (83),
alamat VP (5014 atau 5015) dan nilainya (dari 0 - B4 dalam heksadesimal, atau sama dengan desimal 0-180)
Catatan: Progress Bar di halaman ketiga tidak bisa ditampilkan di simulasi Dwin, begitu juga tampilan Grafik di halaman kelima, tidak bisa muncul di simulasi Dwin. Sekalipun tidak bisa terlihat di simulasi, namun langkah-langkah seting Dwin di atas sudah benar, karena di kondisi riil (dengan hardware LCD Dwin), baik Progress Bar maupun Grafik dapat ditampilkan dengan baik dan lancar.
15. Copy folder DWIN SET ke dalam SD Card, upload file ke Dwin.
Gambar 72. Masukkan USB Card Reader (dengan SD Card di dalamnya) ke port USB Komputer, taruh atau simpan folder DWIN SET ke dalam SD Card
Catatan: Agar proses download dari SD Card ke Dwin berhasil, disarankan SD Card di-format dalam system FAT32 dan allocation unit size = 4096 bytes.
Gambar 73. Masukkan SD Card yang telah berisi DWIN SET ke dalam slot SD Card hardware Dwin
Gambar 74. Berhubung ESP32 disimulasikan dengan Wokwi, maka di-sini diperlukan Konverter USB to TTL, hubungkan RXD Konverter ke TX2 Dwin dan TXD Konverter ke RX2 Dwin
Gambar 75. Setelah SD Card dimasukkan dan suplai daya 5V diberikan, maka akan terlihat proses download dari SD Card ke Dwin, proses selesai ditandai dengan END!
Catatan: Angka di akhir baris menunjukkan jumlah file yang berhasil di-download. Dari tampilan di atas, berarti ada 1 file CFG, 3 file BIN, 1 file HZK dan 2 file ICL yang berhasil di-download.
16. Setelah proses download selesai, cabut suplai daya, keluarkan SD Card, masukkan kembali suplai daya, maka LCD Dwin sudah bisa digunakan.
17. Untuk memastikan bahwa tampilan Dwin sudah benar, gunakan komunikasi serial dengan Debug. Buka menu Show, pilih Debug. Berikut ini tampilan komunikasi serial antara Debug dengan Dwin:
Gambar 77. Pindah ke halaman kedua Dwin, di Debug, pilih Write VP, isi VP=5008, isi Write Down Data=0001, klik Send Order, maka seharusnya LED indikator di 5008 berwarna hijau
Catatan: Data di Dwin berukuran 16 bit (0000-FFFF), sehingga untuk data LED di sini, penulisan datanya 0001 untuk membuat LED hijau, dan 0000 untuk membuat LED merah. Jika di kolom Write down hanya ditulis angka 1 saja, maka diartikan nilainya 1000, ini membuat tampilan LED menghilang.
Catatan: Jangkauan nilai Gauge dan Progress Bar di sini dibuat 0 - 100.
Catatan: Jangkauan nilai Slider di sini dibuat 0 - 180.
5aa5 13 82 0310 5aa5 0200 0002 0032 01C2 0102 0226 03B6
18. Setelah uji komunikasi serial dengan Debug berhasil, berikutnya buka link Wokwi ini: https://wokwi.com/projects/453377093722015745.
19. Jalankan Wokwi, maka seharusnya komponen IO digital dan analog di ESP32 dapat dikontrol dan dimonitor dari Dwin.
19. Jalankan Wokwi, maka seharusnya komponen IO digital dan analog di ESP32 dapat dikontrol dan dimonitor dari Dwin.
Gambar 89. Di Wokwi, klik tombol Start the simulation, pastikan kotak dialog pemilihan COM muncul (ganti browser apabila belum muncul), pilih COM yang digunakan Konverter USB to TTL, klik Connect
Gambar 90. Geser Switch di Dwin dan perhatikan LED Bar Graph di Wokwi
Gambar 91. Geser Dip Switch di Wokwi dan perhatikan LED di halaman kedua Dwin
Gambar 92. Geser Potensio di Wokwi, dan perhatikan kotak angka, Gauge dan Progress Bar di halaman ketiga Dwin
21. Untuk lebih jelasnya, silahkan melihat video pembuatan berikut ini.
Video pembuatan koneksi ESP32 (Wokwi) dengan LCD DWIN melalui komunikasi serial
No comments:
Post a Comment