Isi kandungan:

Jam Tangan M5StickC Cool Look Dengan Menu dan Kawalan Kecerahan: 8 Langkah
Jam Tangan M5StickC Cool Look Dengan Menu dan Kawalan Kecerahan: 8 Langkah

Video: Jam Tangan M5StickC Cool Look Dengan Menu dan Kawalan Kecerahan: 8 Langkah

Video: Jam Tangan M5StickC Cool Look Dengan Menu dan Kawalan Kecerahan: 8 Langkah
Video: M5StickC ESP32 Cool Looking watch with a Menu and Brightness Control -Arduino Tutorial 2024, Mungkin
Anonim

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

Tonton video demonstrasi.

Langkah 1: Apa yang Anda Perlu

Apa yang Anda Perlu
Apa yang Anda Perlu
Apa yang Anda Perlu
Apa yang Anda Perlu

M5StickC ESP32: anda boleh mendapatkannya di sini

Program Visuino: Muat turun Visuino

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

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

Mulakan Visuino, dan Pilih Jenis Papan M5 Stack Stick C
Mulakan Visuino, dan Pilih Jenis Papan M5 Stack Stick C
Mulakan Visuino, dan Pilih Jenis Papan M5 Stack Stick C
Mulakan Visuino, dan Pilih Jenis Papan M5 Stack Stick C
Mulakan Visuino, dan Pilih Jenis Papan M5 Stack Stick C
Mulakan Visuino, dan Pilih Jenis Papan M5 Stack Stick C

Mulakan Visuino seperti yang ditunjukkan pada gambar pertama Klik pada butang "Alat" 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 Tetapkan Papan StickC

Di Visuino Tetapkan Papan StickC
Di Visuino Tetapkan Papan StickC
Di Visuino Tetapkan Papan StickC
Di Visuino Tetapkan Papan StickC
Di Visuino Tetapkan Papan StickC
Di Visuino Tetapkan Papan StickC
Di Visuino Tetapkan Papan StickC
Di Visuino Tetapkan Papan StickC
  1. Klik pada papan "M5 Stack Stick C" untuk memilihnya
  2. Di tetingkap "Properties" pilih "Modul" dan klik "+" untuk Meluaskan,
  3. Pilih "Paparan ST7735" dan klik "+" untuk mengembangkannya,
  4. Tetapkan "Orientasi" ke "goRight"
  5. Tetapkan "Warna Latar Belakang" ke "ClBlack"
  6. Pilih "Elemen" dan klik pada butang biru dengan 3 titik …
  7. Dialog Elemen akan ditunjukkan
  8. Dalam Elemen Dialog seret 2X "Text Field" dari sebelah kanan ke kiri
  9. Klik pada "Text Field1" di sebelah kiri untuk memilihnya, kemudian di "Properties window" klik "Color" dan tetapkan ke "aclOrange" dan klik "Fill Color" dan tetapkan ke "aclBlack" (Anda boleh bermain dengan warna jika anda mahu) -juga pada tetingkap sifat set X: 10 dan Y: 20 di sinilah anda ingin memaparkan waktu pada ukuran set LCD: 3 (ini adalah ukuran fon pada masa itu)
  10. Klik pada "Text Field2" di sebelah kiri untuk memilihnya, kemudian di "Properties window" klik "Color" dan tetapkan ke "aclAqua" dan klik "Fill Color" dan tetapkan ke "aclBlack"

(Anda boleh bermain dengan warna jika anda mahu) -set "Nilai Awal" ke: Tetapkan JAM

-Juga pada tetingkap sifat set X: 10 dan Y: 2 di sinilah anda mahu memaparkan menu pada LCD -set berukuran: 1 (ini adalah ukuran fon menu)

Tutup tetingkap elemen

  1. Klik pada papan "M5 Stack Stick C" untuk memilihnya
  2. Di tetingkap "Properties" pilih "Modul" dan klik "+" untuk Meluaskan,
  3. Pilih "Paparkan Jam Penggera Masa Sebenar (RTC)" dan klik "+" untuk mengembangkannya,
  4. Pilih "Elemen" dan klik pada butang biru dengan 3 titik …
  5. Dalam Elemen Dialog seret "Tetapkan Jam" dari sebelah kanan ke kiri-dan di tetingkap sifat tetapkan "Tambah Nilai" ke: Benar dan "Nilai" ke: 1
  6. Dalam Elemen Dialog seret "Set Minute" dari sebelah kanan ke kiri-dan di tetingkap sifat tetapkan "Tambah Nilai" ke: Benar dan "Nilai" ke: 1
  7. Dalam Elemen Dialog seret "Set Kedua" dari sebelah kanan ke kiri-dan di tetingkap sifat tetapkan "Tambah Nilai" ke: Benar dan "Nilai" ke: 1

Tutup tetingkap elemen

Langkah 4: Dalam Visuino Tambah Komponen

Dalam Visuino Tambah Komponen
Dalam Visuino Tambah Komponen
  1. Tambah komponen "Tombol Debounce" 2x
  2. Tambah komponen "Auto Repeat Button"
  3. Tambahkan komponen "Text Array"
  4. Tambah komponen "Analog Array"
  5. Tambah komponen "Counter" 2x
  6. Tambahkan komponen "Clock Demux (Multiple Output channel Switch)"
  7. Tambahkan komponen "Decode (Split) Date / Time"
  8. Tambah komponen "FormattedText1"

Langkah 5: Dalam Komponen Set Visuino

Dalam Komponen Set Visuino
Dalam Komponen Set Visuino
Dalam Komponen Set Visuino
Dalam Komponen Set Visuino
Dalam Komponen Set Visuino
Dalam Komponen Set Visuino
  1. Pilih komponen "FormattedText1" dan di bawah tetingkap "Properties" set "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 sebelah kiri dan di tetingkap sifat tetapkan "Isi Karakter" ke: 0 dan "Panjang" hingga: 2
  4. Pilih "TextElement2" di sebelah kiri dan di tetingkap sifat tetapkan "Isi Karakter" ke: 0 dan "Panjang" ke: 2
  5. Pilih "TextElement3" di sebelah kiri dan di tetingkap sifat tetapkan "Isi Karakter" ke: 0 dan "Panjang" ke: 2
  6. Pilih komponen "ClockDemmux1" dan di tetingkap sifat tetapkan "Output Pins" ke: 5
  7. Pilih komponen "Counter1" dan di tetingkap sifat kembangkan "Max" dan tetapkan "Nilai" ke: 4
  8. Pilih komponen "Counter1" dan di tetingkap sifat kembangkan "Min" dan tetapkan "Nilai" ke: 0
  9. Pilih komponen "Counter2" dan di tetingkap sifat kembangkan "Max" dan tetapkan "Nilai" ke: 6
  10. Pilih komponen "Counter2" dan di tetingkap sifat kembangkan "Min" dan tetapkan "Nilai" ke: 0 MEMBUAT MENU:
  11. Pilih komponen "Array1" (Array Teks) dan klik dua kali padanya.-Di tetingkap elemen seret 4X "Nilai" ke sebelah kiri-Di sebelah kiri Pilih "Item [1]" dan di tetingkap sifat tetapkan "Nilai" ke: SET JAM-Di sebelah kiri Pilih "Item [2]" dan di tetingkap sifat tetapkan "Nilai" ke: SET MINIT-Di sebelah kiri Pilih "Item [3]" dan di tetingkap sifat tetapkan "Nilai" ke: SET SECONDS -Di sebelah kiri Pilih "Item [4]" dan di tetingkap sifat tetapkan "Nilai" ke: SET BRIGHTNESSTutup tetingkap Elemen. MENETAPKAN NILAI UNTUK CERAH:
  12. Pilih komponen "Array2" (Analog Array) dan klik dua kali padanya.-Di tetingkap elemen seret 6X "Nilai" ke sebelah kiri-Di sebelah kiri Pilih "Item [0]" dan di tetingkap sifat tetapkan "Nilai" kepada: 1

    -Di sebelah kiri Pilih "Item [1]" dan di tetingkap sifat tetapkan "Nilai" ke: 0.9

    -Di sebelah kiri Pilih "Item [2]" dan di tetingkap sifat "Nilai" ke: 0.8 - Di sebelah kiri Pilih "Item [3]" dan di tetingkap sifat tetapkan "Nilai" ke: 0.7-Aktif sebelah kiri Pilih "Item [4]" dan di tetingkap sifat "Nilai" ke: 0.6-Di sebelah kiri Pilih "Item [5]" dan di tetingkap sifat tetapkan "Nilai" ke: 0.55

Langkah 6: Dalam Komponen Sambungan Visuino

Dalam Komponen Sambungan Visuino
Dalam Komponen Sambungan Visuino
Dalam Komponen Sambungan Visuino
Dalam Komponen Sambungan Visuino
Dalam Komponen Sambungan Visuino
Dalam Komponen Sambungan Visuino
Dalam Komponen Sambungan Visuino
Dalam Komponen Sambungan Visuino
  1. Sambungkan pin "M5 Stack Stick C" A (M5) ke pin "Button2" [In]
  2. Sambungkan pin "M5 Stack Stick C" [B] ke pin "Button1" [In]
  3. Sambungkan pin "Button2" [Out] ke pin 'RepeatButton1 "[In]
  4. Sambungkan pin "RepeatButton1" [Keluar] ke pin "ClockDemmux1" [In]
  5. Sambungkan pin "Button1" [Out] ke pin "Counter1" [In]
  6. Sambungkan pin "M5 Stack Stick C"> "Jam Alarm Masa Nyata (RTC)" [Keluar] ke pin "DecodeDateTime1" [Dalam]
  7. Sambungkan pin "DecodeDateTime1" [Hour] ke "FormattedText1"> "TextElement1" pin [In]
  8. Sambungkan pin "DecodeDateTime1" [Minit] ke "FormattedText1"> "TextElement2" pin [In]
  9. Sambungkan pin "DecodeDateTime1" [Kedua] ke "FormattedText1"> "TextElement3" pin [In]
  10. Sambungkan pin "FormattedText1" [Keluar] ke papan "M5 Stack Stick C"> "Paparan ST7735"> pin "Medan Teks1" [Dalam]
  11. Sambungkan pin "Counter1" [Out] ke pin "ClockDemmux1" [Pilih] dan ke pin "Array1" [Indeks]
  12. Sambungkan pin "Counter2" [Out] ke pin "Array2" [Indeks]
  13. Sambungkan pin "Array1" [Keluar] ke papan "M5 Stack Stick C"> "Paparan ST7735"> pin "Medan Teks2" [Dalam]
  14. Sambungkan pin "Array2" [Keluar] ke papan "M5 Stack Stick C"> "Paparan ST7735"> pin [Kecerahan]
  15. Sambungkan pin "ClockDemmux1" [1] ke papan "M5 Stack Stick C"> "Jam Penggera Masa Sebenar (RTC)"> pin "Tetapkan Jam1" [Jam]
  16. Sambungkan pin "ClockDemmux1" [2] ke papan "M5 Stack Stick C"> "Jam Penggera Masa Sebenar (RTC)"> pin "Tetapkan Minit1" [Jam]
  17. Sambungkan pin "ClockDemmux1" [3] ke papan "M5 Stack Stick C"> "Jam Alarm Masa Nyata (RTC)"> "Tetapkan pin Kedua1" [Jam]
  18. Sambungkan pin "ClockDemmux1" [4] ke pin "Counter2" [In]

Langkah 7: Hasilkan, Susun, dan Muat Naik Kod Arduino

Hasilkan, Susun, dan Muat Naik Kod Arduino
Hasilkan, Susun, dan Muat Naik Kod Arduino

Di Visuino, klik bawah pada tab "Build", pastikan port yang betul dipilih, kemudian klik pada butang "Compile / Build and Upload".

Langkah 8: Main

Sekiranya anda menghidupkan modul M5Sticks, paparan akan mula menunjukkan waktu. Anda dapat mengubah waktu dan kecerahan menggunakan butang "B" untuk menampilkan Menu dan beralih di antara (Set Hours, Set Minutes, Set Seconds, Set Brightness) dan gunakan tombol "M5" untuk mengaturnya.

Tahniah! Anda telah menyelesaikan projek M5Sticks anda dengan Visuino. Juga dilampirkan adalah projek Visuino, yang saya buat untuk Instructable ini, anda boleh memuat turunnya di sini. Anda boleh memuat turun dan membukanya di Visuino:

Disyorkan: