DIY Cara Menampilkan Waktu di M5StickC ESP32 Menggunakan Visuino - Mudah Dilakukan: 9 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 di LCD.

Langkah 1: Apa yang Anda Butuhkan

1. M5StickC ESP32: Anda bisa mendapatkannya di sini
2. 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 dialog muncul, pilih "M5 Stack Stick C" seperti yang ditunjukkan pada Gambar 2

Langkah 3: Di Visuino Tambahkan dan Setel Komponen

1. Klik pada Papan "M5 Stack Stick C" untuk memilihnya
2. Di jendela "Properties" pilih "Modules" dan klik "+" untuk Melebarkan, Pilih "Tampilan ST7735" dan klik "+" untuk memperluasnya
3. Atur Orientasi ke "goRight" < ini berarti bagaimana waktu akan diorientasikan pada LCD
4. Pilih "Elemen" dan klik tombol biru dengan 3 titik …
5. Dialog Elemen akan ditampilkan
6. Dalam Dialog Elemen, seret "Bidang Teks" dari sisi kanan ke kiri

Klik pada "Bidang Teks1" di sisi kiri untuk memilihnya, lalu di "jendela Properti" klik warna dan atur ke "aclOrange"

-juga di properti windows set X:10 dan Y:20 ini adalah tempat Anda ingin menampilkan waktu di LCD

-set size:3 ini adalah ukuran font waktu

-Anda dapat mengatur ukuran dan warna teks jika Anda mau

Tutup jendela elemen

Opsional:

Klik pada Papan "M5 Stack Stick C" untuk memilihnya

Di jendela "Properties" pilih "Modules" dan klik "+" untuk Melebarkan, Pilih "Tampilan ST7735" dan klik "+" untuk memperluasnya dan Anda akan melihat "Warna latar belakang" ini adalah warna default tampilan, ubah menjadi warna favorit Anda, Anda juga dapat mengatur kecerahan tampilan, defaultnya adalah 1 (maks) Anda dapat mengaturnya ke 0,5 atau nilai lain untuk membuatnya lebih redup

6. Tambahkan komponen "Decode (Split) Date/Time" 7. Tambahkan komponen "Formatted text"

Langkah 4: Dalam Komponen Set Visuino

1. Pilih komponen "FormattedTxt1" 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

Langkah 5: Di Komponen Visuino Connect

• Hubungkan "M5 Stack Stick C"> Jam Alarm Waktu Nyata (RTC) > Pin [Keluar] ke pin komponen "DecodeDateTime1"[Masuk]
• Hubungkan pin komponen "DecodeDateTime1" [Hour] ke komponen "FormattedText1" pin "TextElement1" [Dalam]
• Hubungkan pin komponen "DecodeDateTime1" [Menit] ke komponen "FormattedText1" pin "TextElement2" [Dalam]
• Hubungkan pin komponen "DecodeDateTime1" [Second] ke "FormattedText1" komponen "TextElement3" pin[In]
• Hubungkan pin komponen "FormattedText1" [Keluar] ke papan "M5 Stack Stick C" papan "Tampilan ST7735">"Bidang Teks1" pin [Masuk]

Langkah 6: 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 7: Mainkan

Jika Anda menyalakan modul M5Sticks, layar akan mulai menunjukkan waktu.

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:

Langkah 8: Ekstra: Trik Sederhana

Anda dapat menggunakan waktu saat ini yang ada di komputer Anda pada saat Anda mengkompilasi kode di Arduino.

Untuk melakukannya, cukup letakkan komponen "Kompilasi Tanggal/Waktu" dan sambungkan ke pin "M5 Stack Stick C"> "Jam Alarm Waktu Nyata (RTC)" [Set]

Anda dapat mengunduh file Proyek dengan trik ini di sini.

Langkah 9: Di Tutorial Selanjutnya

Dalam tutorial berikutnya saya akan menunjukkan cara membuat jam tangan Keren di mana Anda dapat mengatur waktu menggunakan tombol StickC! Nantikan dan lihat tutorial saya yang lain di sini.