Antaramuka Paparan Nextion Dengan Papan Relay Empat ESP 32: 7 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:11

Dalam instruksional ini kita akan menghubungkan paparan seterusnya 5 ke papan relay Esp 32 empat. Papan dikendalikan oleh protokol MQTT. Papan juga mempunyai ciri kawalan dua hala. Ia dapat dikendalikan oleh mqtt dan layar sentuh. Skrin sentuh disambungkan ke Esp 32 melalui uart.

Persediaan Paparan Nextion:

Nextion Editor adalah perisian pengembangan yang digunakan untuk pembuatan visual antara muka grafik untuk peranti intensif GUI tertanam dengan pelbagai jenis paparan TFT dan Panel Sentuh. Dengan menggunakan alat ini, pengguna dapat mula membuat peranti berdasarkan TFT dengan cara yang lebih cepat dan mudah.

Editor Nextion boleh dimuat turun dari pautan ini

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

Selepas memuat turun pasang penyunting seterusnya.

Langkah 1: Penyunting Nextion

Buka editor nextion di bawah menunjukkan tetingkap sebelah, yang mempunyai sub tetingkap. Kotak alat di tetingkap ini akan ada sekumpulan ciri seperti menunjukkan teks, menambah butang atau membuat dail dll. Kita boleh menyeret dan melepaskan objek ini ke tetingkap utama. Sudut kiri bawah adalah tetingkap gambar dan fon di mana pengguna dapat menambahkan gambar menggunakan simbol ‘+’ dan dapat menghapus gambar menggunakan simbol ‘-’. Di sudut kanan atas terdapat tetingkap halaman di mana pengguna dapat menambah atau menghapus halaman. Di sudut kanan bawah tetingkap atribut ada, di sini pengguna dapat mengubah parameter objek. Di bawah terdapat dua tetingkap satu adalah tetingkap Keluaran dan tetingkap Peristiwa. akan memaparkan ralat penyusun. Pengguna akan memilih objek dan menulis kod di tetingkap acara untuk membuat sesuatu berlaku.

Kita perlu membuat fail baru, setelah kita menyimpan fail baru tetingkap image2 muncul, ia akan meminta untuk memilih model, model tidak lain adalah model paparan seterusnya anda akan mendapatkannya di bahagian belakang sebelah selepas klik ok untuk teruskan.

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

Langkah 2: Menambah Imej dan Fon

Dalam gambar4 anda dapat melihat cara membuat fon. Pergi ke alat dan klik pada Font Generator tetingkap pembuat font akan muncul, dalam ini pilih ketinggian dan jenis fon dan berikan nama fon dan klik pada fon penjana. Setelah membuat fon, orang seterusnya akan bertanya sama ada untuk menambah fon atau tidak.

Dalam gambar5 anda dapat melihat cara menambahkan fon, yang diserlahkan dalam gambar. Menggunakan simbol + dan - pengguna boleh menambah atau menghapus fon.

Dalam gambar6 anda dapat melihat cara menambahkan gambar atau menghapus gambar dengan memilih masing-masing memilih "+" atau "-".

Langkah 3: Membuat Butang

Image7 menunjukkan cara menambahkan objek ke tetingkap utama dari kotak alat. Sebagai contoh klik pada butang keadaan dua keadaan objek, ia akan muncul di tetingkap utama seperti yang ditunjukkan pada gambar butang keadaan dua objek objek bt0. Pengguna boleh menggerakkan butang dalam arah x dan y. Kami akan menunjukkan cara membuat butang beralih dengan keadaan dua.

Dalam gambar8 kita dapat melihat gambar butang telah diubah mengikut pengguna. Kita perlu mengklik butang bt0, di jendela atribut parameter butang akan muncul. Pada pengguna itu perlu menukar parameter sta menjadi gambar dan di tab pic0 dan pic1 pengguna perlu memberikan gambar yang ingin diterapkan.

Dalam gambar9 menunjukkan susunan terakhir semua butang termasuk penamaan. Di sini kita telah menambahkan bt0, bt1, bt2 dan bt3 untuk butang0, butang1, butang2 dan butang3 masing-masing.

Langkah 4: Kod Acara untuk Butang Tukar

Image10 menunjukkan pengawalan awal baud rate = 115200 pada tetingkap acara, bahagian kodnya. Pengguna dapat menginisialisasi pada bahagian ini berkaitan dengan paparan.

Dalam gambar11 menunjukkan bahagian kod butang bt0, di sini kita mencetak bersiri bergantung pada keadaan berubah-ubah butang, yaitu untuk pemboleh ubah bt0 adalah 0 maka kita mengirim serial "R10" dan untuk bt0 pemboleh ubah adalah 1 maka kita mengirim "R11" ke esp. Setelah Esp menerima R10, ia mematikan relay 1 dan apabila ia menerima R11 1st relay dihidupkan. Begitu juga kita perlu membuat kod untuk semua butang contohnya bt1, bt2 dan bt3.

Langkah 5: Debug GUI

Setelah semuanya dikodekan, kita perlu menyusunnya, jika tidak ada kesalahan, kita dapat men-debug GUI yang dibuat berfungsi sesuai dengan keperluan kita sebelum memuat naik ke paparan berikutnya. Image12 menunjukkan tetingkap debugger, di sini pengguna dapat menggunakan simulator dari butang tarik turun dan memeriksa sama ada ia berfungsi mengikut pengguna.

Setelah peranti berfungsi seperti pengguna maka langkah seterusnya adalah memuat naik kod ke paparan seterusnya.

Image13 menunjukkan muat naik tetingkap ke peranti sebelah, di sini anda perlu memilih port com dan baud-rate. Selepas itu perlu mengklik butang pergi untuk memuat naik ke kod, mungkin memerlukan sedikit masa untuk memuat naik.

Langkah 6: Kerja Peranti

Image14 menunjukkan gambarajah sambungan papan relay empat wifi ESP 32 dengan paparan nextion. Dari papan ESP 32 J1 dan J2 sambungkan 5v dan Ground (G) ke paparan sebelah seperti ditunjukkan di bawah. Sambungkan Tx sebelah ke Rx0 ESP32 papan dan Rx sebelah Tx0 papan ESP32. Ini akan mewujudkan komunikasi Uart.

Bekerja: Setelah semuanya disambungkan kuasa peranti mengkonfigurasi peranti dengan ssid dan kata laluan dan broker mqtt dengan nama topik penerbitan dan langganan. Setelah menyerahkan kelayakan, peranti akan reboot dan menyambung ke mqtt. Sudah ada peranti yang dikonfigurasi untuk openhab (untuk openhab sila periksa kami arahan terbuka) seperti yang ditunjukkan dalam gambar15.

Peranti dapat dikendalikan oleh http, mqtt juga melalui layar sentuh GUI. Kami dapat memperoleh status terkini dari semua saluran relay sama ada saluran hidup atau mati pada kedua mqtt dan paparan skrin sentuh.

Langkah 7: Bantuan Nextion

Image17 menunjukkan tetingkap untuk set arahan seterusnya, di mana pengguna boleh mendapatkan bantuan.