M5StickC Jam Tangan Keren Dengan Menu dan Kontrol Kecerahan: 8 Langkah

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

Dalam tutorial ini kita akan belajar bagaimana memprogram ESP32 M5Stack StickC dengan Arduino IDE dan Visuino untuk Menampilkan waktu pada LCD dan juga mengatur waktu dan kecerahan menggunakan menu dan tombol StickC.

Tonton video demonstrasi.

Langkah 1: Apa yang Anda Butuhkan

M5StickC ESP32: Anda bisa mendapatkannya di sini

Program Visuino: Unduh Visuino

Catatan: Lihat tutorial ini di sini tentang cara Memasang papan StickC ESP32

Langkah 2: Mulai Visuino, dan Pilih Jenis Papan M5 Stack Stick C

Jalankan Visuino seperti pada gambar pertama Klik tombol "Tools" pada komponen Arduino (Gambar 1) di Visuino Ketika muncul dialog, pilih "M5 Stack Stick C" seperti yang ditunjukkan pada Gambar 2

Langkah 3: Di Visuino Atur Papan StickC

1. Klik pada Papan "M5 Stack Stick C" untuk memilihnya
2. Di jendela "Properties" pilih "Modules" dan klik "+" untuk Melebarkan,
3. Pilih "Tampilan ST7735" dan klik "+" untuk memperluasnya,
4. Setel "Orientasi" ke "goRight"
5. Setel "Warna Latar Belakang" ke "ClBlack"
6. Pilih "Elemen" dan klik tombol biru dengan 3 titik …
7. Dialog Elemen akan ditampilkan
8. Dalam Dialog Elemen, seret 2X "Bidang Teks" dari sisi kanan ke kiri
9. Klik pada "Bidang Teks1" di sisi kiri untuk memilihnya, lalu di "jendela Properti" klik "Warna" dan atur ke "aclOrange" dan klik "Isi Warna" dan atur ke "aclBlack" (Anda dapat bermain dengan warna jika Anda mau) -juga di properti windows set X:10 dan Y:20 ini adalah di mana Anda ingin menampilkan waktu pada LCD-set size:3 (ini adalah ukuran font waktu)
10. Klik pada "Bidang Teks2" di sisi kiri untuk memilihnya, lalu di "jendela Properti" klik "Warna" dan atur ke "aclAqua" dan klik "Isi Warna" dan atur ke "aclBlack"

(Anda dapat bermain dengan warna jika Anda mau) -set "Nilai Awal" ke: Setel JAM

-juga di properties windows set X:10 dan Y:2 ini adalah tempat anda ingin menampilkan menu pada LCD -set size:1 (ini adalah ukuran font menu)

Tutup jendela elemen

1. Klik pada Papan "M5 Stack Stick C" untuk memilihnya
2. Di jendela "Properties" pilih "Modules" dan klik "+" untuk Melebarkan,
3. Pilih "Tampilkan Jam Alarm Waktu Nyata (RTC)" dan klik "+" untuk memperluasnya,
4. Pilih "Elemen" dan klik tombol biru dengan 3 titik …
5. Dalam Dialog Elemen seret "Atur Jam" dari sisi kanan ke kiri-dan di jendela properti atur "Tambah Nilai" ke: Benar dan "Nilai" ke: 1
6. Dalam Dialog Elemen seret "Atur Menit" dari sisi kanan ke kiri-dan di jendela properti atur "Tambah Nilai" ke: Benar dan "Nilai" ke: 1
7. Dalam Dialog Elemen seret "Tetapkan Kedua" dari sisi kanan ke kiri-dan di jendela properti atur "Tambah Nilai" ke: Benar dan "Nilai" ke: 1

Tutup jendela elemen

Langkah 4: Di Visuino Tambahkan Komponen

1. Tambahkan 2x komponen "Tombol Debounce"
2. Tambahkan komponen "Tombol Ulangi Otomatis"
3. Tambahkan komponen "Array Teks"
4. Tambahkan komponen "Array Analog"
5. Tambahkan 2x komponen "Penghitung"
6. Tambahkan komponen "Jam Demux (Beralih saluran Keluaran Ganda)"
7. Tambahkan komponen "Decode(Split) Date/Time"
8. Tambahkan komponen "FormattedText1"

Langkah 5: Dalam Komponen Set Visuino

1. Pilih komponen "FormattedText1" dan di bawah jendela "Properties" setel "Teks" ke: %0:%1:%2
2. Klik dua kali pada komponen "FormattedText1" dan dalam dialog Elemen seret 3x "Elemen Teks" ke kiri
3. Pilih "TextElement1" di sisi kiri dan di jendela properti atur "Isi Karakter" ke: 0 dan "Panjang" ke: 2
4. Pilih "TextElement2" di sisi kiri dan di jendela properti atur "Isi Karakter" ke: 0 dan "Panjang" ke: 2
5. Pilih "TextElement3" di sisi kiri dan di jendela properti atur "Isi Karakter" ke: 0 dan "Panjang" ke: 2
6. Pilih komponen "ClockDemmux1" dan di jendela properti atur "Output Pins" ke: 5
7. Pilih komponen "Counter1" dan di jendela properti perluas "Max" dan atur "Value" ke: 4
8. Pilih komponen "Counter1" dan di jendela properti perluas "Min" dan atur "Value" ke: 0
9. Pilih komponen "Counter2" dan di jendela properti perluas "Max" dan atur "Value" ke: 6
10. Pilih komponen "Counter2" dan di jendela properti perluas "Min" dan setel "Value" ke: 0BUILDING THE MENU:
11. Pilih komponen "Array1" (Text Array) dan klik dua kali di atasnya.-Di jendela elemen seret 4X "Nilai" ke sisi kiri-Di sisi kiri Pilih "Item[1]" dan di jendela properti setel "Nilai" ke: SET JAM-Di sisi kiri Pilih "Item[2]" dan di jendela properti atur "Nilai" ke: SET MENIT-Di sisi kiri Pilih "Item[3]" dan di jendela properti atur "Nilai" ke: SET DETIK-Di sisi kiri Pilih "Item[4]" dan di jendela properti atur "Nilai" ke: SET BRIGHTNESSTutup jendela Elements. SETTING NILAI UNTUK BRIGHTNESS:

12. Pilih komponen "Array2" (Analog Array) dan klik dua kali di atasnya.-Di jendela elemen seret 6X "Nilai" ke sisi kiri-Di sisi kiri Pilih "Item[0]" dan di jendela properti atur "Nilai" ke: 1

    -Di sisi kiri Pilih "Item[1]" dan di jendela properti atur "Nilai" ke: 0,9

    -Di sisi kiri Pilih "Item[2]" dan di jendela properti atur "Nilai" ke: 0,8 -Di sisi kiri Pilih "Item[3]" dan di jendela properti atur "Nilai" ke: 0,7-Aktif sisi kiri Pilih "Item[4]" dan di jendela properti atur "Nilai" ke: 0,6-Di sisi kiri Pilih "Item[5]" dan di jendela properti atur "Nilai" ke: 0,55

Langkah 6: Dalam Komponen Visuino Connect

1. Hubungkan pin "M5 Stack Stick C" A(M5) ke pin "Button2" [In]
2. Hubungkan pin "M5 Stack Stick C" [B] ke pin "Button1" [In]
3. Hubungkan pin "Button2" [Out] ke pin 'RepeatButton1" [In]
4. Hubungkan pin "RepeatButton1" [Out] ke pin "ClockDemmux1" [In]
5. Hubungkan pin "Button1" [Out] ke pin "Counter1" [In]
6. Hubungkan pin "M5 Stack Stick C"> "Real Time Alarm Clock(RTC)" [Keluar] ke pin "DecodeDateTime1" [Masuk]
7. Hubungkan "DecodeDateTime1" pin[Hour] ke "FormattedText1">"TextElement1" pin[In]
8. Hubungkan pin "DecodeDateTime1" [Menit] ke pin "FormattedText1">"TextElement2"[Dalam]
9. Hubungkan pin "DecodeDateTime1" [Kedua] ke pin "FormattedText1">"TextElement3"[Dalam]
10. Hubungkan pin "FormattedText1" [Keluar] ke papan "M5 Stack Stick C" > "Tampilan ST7735" > pin "Bidang Teks1" [Masuk]
11. Hubungkan pin "Counter1"[Out] ke pin "ClockDemmux1"[Select] dan ke pin "Array1"[Index]
12. Hubungkan "Counter2" pin[Out] ke "Array2" pin[Index]
13. Hubungkan pin "Array1" [Keluar] ke papan "M5 Stack Stick C" > "Tampilan ST7735" > pin "Bidang Teks2" [Masuk]
14. Hubungkan pin "Array2" [Out] ke board "M5 Stack Stick C" > "Display ST7735" > pin [Brightness]
15. Hubungkan pin "ClockDemmux1" [1] ke papan "M5 Stack Stick C" > "Jam Alarm Waktu Nyata (RTC)" > pin "Atur Hour1" [Jam]
16. Hubungkan pin "ClockDemmux1" [2] ke papan "M5 Stack Stick C" > "Jam Alarm Waktu Nyata (RTC)" > pin "Set Minute1" [Jam]
17. Hubungkan pin "ClockDemmux1" [3] ke papan "M5 Stack Stick C" > "Jam Alarm Waktu Nyata (RTC)" > pin "Set Second1" [Jam]
18. Hubungkan pin "ClockDemmux1"[4] ke pin "Counter2" [In]

Langkah 7: Hasilkan, Kompilasi, dan Unggah Kode Arduino

Di Visuino, di bagian bawah klik pada Tab "Build", pastikan port yang benar dipilih, lalu klik tombol "Compile/Build and Upload".

Langkah 8: Mainkan

Jika Anda menyalakan modul M5Sticks, layar akan mulai menunjukkan waktu. Anda dapat mengubah waktu dan kecerahan menggunakan tombol "B" untuk menampilkan Menu dan beralih antara (Atur Jam, Atur Menit, Atur Detik, Atur Kecerahan) dan gunakan tombol "M5" untuk mengaturnya.

Selamat! Anda telah menyelesaikan proyek M5Sticks Anda dengan Visuino. Juga terlampir adalah proyek Visuino, yang saya buat untuk Instruksi ini, Anda dapat mengunduhnya di sini. Anda dapat mengunduh dan membukanya di Visuino: