Antarmuka Tampilan Selanjutnya Dengan ESP 32 Empat Relay Board: 7 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:57

Dalam instruksi ini kita akan menghubungkan tampilan berikutnya 5” ke papan relai empat Esp 32. Papan dikendalikan oleh protokol MQTT. Board juga memiliki fitur kontrol dua arah. Itu dapat dikontrol baik oleh mqtt dan layar sentuh. Layar sentuh terhubung ke Esp 32 melalui uart.

Pengaturan Tampilan Berikutnya:

Nextion Editor adalah perangkat lunak pengembangan yang digunakan untuk membangun visual antarmuka grafis untuk perangkat intensif GUI tertanam dengan berbagai jenis tampilan TFT dan Panel Sentuh. Dengan menggunakan alat ini, pengguna dapat mulai membuat perangkat berbasis TFT dengan cara yang lebih cepat dan mudah.

Editor Nextion dapat diunduh dari tautan ini

nextion.itead.cc/resources/download/nextion-editor/

Setelah mengunduh, instal editor berikutnya.

Langkah 1: Editor Berikutnya

Buka editor berikutnya di bawah ini menunjukkan jendela berikutnya, yang memiliki sub jendela. Kotak Alat di jendela ini akan ada serangkaian fitur seperti menampilkan teks, tombol tambah atau untuk membuat panggilan dll. Kita dapat menarik dan melepas objek-objek ini ke jendela utama. Pojok kiri bawah adalah jendela gambar dan font di mana pengguna dapat menambahkan gambar menggunakan simbol '+' dan dapat menghapus gambar menggunakan simbol '-'. Pojok kanan atas ada jendela halaman di mana pengguna dapat menambah atau menghapus halaman. Pojok kanan bawah jendela atribut ada, di sini pengguna dapat memodifikasi parameter objek. Bawah ada dua jendela satu adalah jendela Output dan jendela Event. Di jendela Output itu akan menampilkan kesalahan kompiler. Pengguna akan memilih objek dan menulis kode di jendela acara untuk membuat sesuatu terjadi.

Kita perlu membuat file baru, setelah kita menyimpan file baru jendela image2 muncul, itu akan meminta untuk memilih model, model tidak lain adalah model tampilan berikutnya Anda akan mendapatkannya di bagian belakang nextion setelah itu klik ok untuk memproses.

Setelah membuat file baru halaman dibuat seperti yang ditunjukkan pada gambar image3, pengguna dapat membuat banyak halaman tergantung pada aplikasinya. Tetapi dalam aplikasi saat ini kami membatasi hanya satu halaman.

Langkah 2: Menambahkan Gambar dan Font

Di image4 Anda dapat melihat cara membuat font. Buka alat dan klik pada Generator Font, jendela pembuat font akan muncul, dalam hal ini pilih tinggi dan jenis font dan berikan nama font dan klik pada font generator. Setelah membuat font, selanjutnya akan menanyakan apakah akan menambahkan font atau bukan.

Di image5 Anda dapat melihat cara menambahkan font, yang disorot di snapshot. Menggunakan simbol + dan – pengguna dapat menambah atau menghapus font.

Di image6 Anda dapat melihat cara menambahkan gambar atau menghapus gambar dengan memilih masing-masing memilih "+" atau "-".

Langkah 3: Membuat Tombol

Gambar7 menunjukkan cara menambahkan objek ke jendela utama dari kotak alat. Misalnya klik pada objek tombol status ganda, maka akan muncul di jendela utama seperti yang ditunjukkan pada gambar7 objek tombol status ganda bt0. Pengguna dapat memindahkan tombol dalam arah x dan y. Kami akan menunjukkan cara membuat tombol sakelar dengan status ganda.

Pada gambar8 kita dapat melihat gambar tombol telah diubah sesuai dengan pengguna. Kita perlu mengklik tombol bt0, di jendela atribut parameter tombol akan muncul. Dalam pengguna itu perlu mengubah parameter sta ke gambar dan di tab pic0 dan pic1 pengguna perlu menetapkan gambar yang ingin dia terapkan.

Pada gambar9 menunjukkan pengaturan akhir dari semua tombol termasuk penamaan. Di sini kami telah menambahkan bt0, bt1, bt2 dan bt3 untuk button0, button1, button2 dan button3 masing-masing.

Langkah 4: Kode Acara untuk Tombol Switch

Image10 menunjukkan prainisialisasi baud rate = 115200 di jendela acara, bagian dari kode. Pengguna dapat menginisialisasi di bagian ini yang berkaitan dengan tampilan.

Pada gambar11 menunjukkan bagian kode tombol bt0, disini kita mencetak serial tergantung pada keadaan variabel tombol, yaitu untuk variabel bt0 adalah 0 maka kita kirim serial “R10” dan untuk variabel bt0 adalah 1 maka kita kirim “R11” ke esp. Setelah Esp menerima R10 maka relay ke-1 mati dan saat menerima R11 relay ke-1 menyala. Demikian pula kita perlu kode untuk semua tombol misalnya bt1, bt2 dan bt3.

Langkah 5: Debug GUI

Setelah semuanya dikodekan, kita perlu mengkompilasi, jika tidak ada kesalahan, kita dapat men-debug GUI yang dibuat berfungsi sesuai kebutuhan kita sebelum mengunggah ke tampilan berikutnya. Image12 menunjukkan jendela debugger, di sini pengguna dapat simulator saat ini dari tombol drop down dan memeriksa apakah berfungsi sesuai pengguna.

Setelah perangkat berfungsi sesuai pengguna, langkah selanjutnya adalah mengunggah kode ke tampilan berikutnya.

Gambar13 menunjukkan jendela unggah ke perangkat nextion, di sini Anda harus memilih com port dan baud-rate. Setelah itu perlu mengklik tombol go untuk mengunggah ke kode, mungkin perlu beberapa saat untuk mengunggah.

Langkah 6: Kerja Perangkat

Gambar14 menunjukkan diagram koneksi papan relai empat wifi ESP 32 wifi dengan tampilan berikutnya. Dari papan ESP 32 J1 dan J2 hubungkan 5v dan Ground (G) ke tampilan berikutnya seperti yang ditunjukkan di bawah ini. Hubungkan Tx dari berikutnya ke Rx0 dari ESP32 papan dan Rx berikutnya ke Tx0 papan ESP32. Ini akan membangun komunikasi Uart.

Bekerja: Setelah semuanya terhubung, perangkat mengonfigurasi perangkat dengan ssid dan kata sandi dan broker mqtt dengan nama topik publikasi dan subskrip. Setelah mengirimkan kredensial, perangkat akan reboot dan terhubung ke mqtt. Perangkat sudah dikonfigurasi ke openhab (untuk openhab, silakan periksa kami instruksi openhab) seperti yang ditunjukkan pada gambar15.

Perangkat dapat dikontrol oleh http, mqtt juga melalui layar sentuh GUI. Kita bisa mendapatkan status terkini dari semua saluran relai apakah saluran aktif atau nonaktif pada tampilan layar sentuh dan mqtt.

Langkah 7: Bantuan Selanjutnya

Gambar17 menunjukkan jendela untuk set instruksi berikutnya, di mana pengguna bisa mendapatkan bantuan.