M5StickC Cool Looking Watch με μενού και Έλεγχος φωτεινότητας: 8 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:32

Σε αυτό το σεμινάριο θα μάθουμε πώς να προγραμματίζουμε το ESP32 M5Stack StickC με το Arduino IDE και το Visuino να εμφανίζει μια ώρα στην οθόνη LCD και επίσης να ρυθμίζουμε την ώρα και τη φωτεινότητα χρησιμοποιώντας το μενού και τα κουμπιά StickC.

Δείτε ένα βίντεο επίδειξης.

Βήμα 1: Τι θα χρειαστείτε

M5StickC ESP32: μπορείτε να το αποκτήσετε εδώ

Πρόγραμμα Visuino: Κατεβάστε το Visuino

Σημείωση: Ελέγξτε αυτό το σεμινάριο εδώ για τον τρόπο εγκατάστασης της πλακέτας StickC ESP32

Βήμα 2: Ξεκινήστε το Visuino και επιλέξτε τον τύπο πλακέτας M5 Stack Stick C

Ξεκινήστε το Visuino όπως φαίνεται στην πρώτη εικόνα Κάντε κλικ στο κουμπί "Εργαλεία" στο στοιχείο Arduino (Εικόνα 1) στο Visuino Όταν εμφανιστεί το παράθυρο διαλόγου, επιλέξτε "M5 Stack Stick C" όπως φαίνεται στην Εικόνα 2

Βήμα 3: Στο Visuino Ρυθμίστε τον πίνακα StickC

1. Κάντε κλικ στον πίνακα "M5 Stack Stick C" για να τον επιλέξετε
2. Στο παράθυρο "Ιδιότητες" επιλέξτε "Ενότητες" και κάντε κλικ στο "+" για επέκταση,
3. Επιλέξτε "Εμφάνιση ST7735" και κάντε κλικ στο "+" για να το επεκτείνετε,
4. Ορίστε τον "Προσανατολισμό" σε "goRight"
5. Ορίστε "Χρώμα φόντου" σε "ClBlack"
6. Επιλέξτε "Στοιχεία" και κάντε κλικ στο μπλε κουμπί με 3 τελείες…
7. Τα στοιχεία διαλόγου θα εμφανιστούν
8. Στο Στοιχεία διαλόγου σύρετε 2Χ "Πεδίο κειμένου" από τη δεξιά πλευρά προς τα αριστερά
9. Κάντε κλικ στο "Πεδίο κειμένου1" στην αριστερή πλευρά για να το επιλέξετε, στη συνέχεια στο παράθυρο "Ιδιότητες" κάντε κλικ στο "Χρώμα" και ορίστε το σε "aclOrange" και κάντε κλικ στο "Συμπλήρωση χρώματος" και ορίστε το σε "aclBlack" (Εσείς μπορεί να παίξει με τα χρώματα αν θέλετε) -επίσης στα παράθυρα ιδιοτήτων ορίστε X: 10 και Y: 20 εδώ θέλετε να εμφανίσετε την ώρα στο μέγεθος της οθόνης LCD: 3 (αυτό είναι το μέγεθος της γραμματοσειράς της εποχής)
10. Κάντε κλικ στο "Πεδίο κειμένου2" στην αριστερή πλευρά για να το επιλέξετε, στη συνέχεια στο παράθυρο "Ιδιότητες" κάντε κλικ στο "Χρώμα" και ορίστε το σε "aclAqua" και κάντε κλικ στο "Συμπλήρωση χρώματος" και ορίστε το σε "aclBlack"

(Μπορείτε να παίξετε με τα χρώματα αν θέλετε) -ρυθμίστε την "Αρχική τιμή" σε: Ρύθμιση ώρας

-επίσης στα παράθυρα ιδιοτήτων ορίστε X: 10 και Y: 2 εδώ θέλετε να εμφανίσετε το μενού στην οθόνη LCD -μέγεθος: 1 (αυτό είναι το μέγεθος γραμματοσειράς του μενού)

Κλείστε το παράθυρο στοιχείων

1. Κάντε κλικ στον πίνακα "M5 Stack Stick C" για να τον επιλέξετε
2. Στο παράθυρο "Ιδιότητες" επιλέξτε "Ενότητες" και κάντε κλικ στο "+" για επέκταση,
3. Επιλέξτε "Display Real Time Alarm Clock (RTC)" και κάντε κλικ στο "+" για να το επεκτείνετε,
4. Επιλέξτε "Στοιχεία" και κάντε κλικ στο μπλε κουμπί με 3 τελείες…
5. Στο Elements Dialog σύρετε το "Set Hour" από τη δεξιά πλευρά προς τα αριστερά και στο παράθυρο ιδιοτήτων ορίστε "Add Value" σε: True και "Value" σε: 1
6. Στο Elements Dialog σύρετε το "Set Minute" από τη δεξιά πλευρά προς τα αριστερά και στο παράθυρο ιδιοτήτων ορίστε "Add Value" σε: True και "Value" σε: 1
7. Στο Elements Dialog σύρετε το "Set Second" από τη δεξιά πλευρά προς τα αριστερά και στο παράθυρο ιδιοτήτων ορίστε "Add Value" σε: True και "Value" σε: 1

Κλείστε το παράθυρο στοιχείων

Βήμα 4: Στο Visuino Προσθέστε εξαρτήματα

1. Προσθέστε 2x στοιχείο "Κουμπί κατάργησης"
2. Προσθέστε το στοιχείο "Κουμπί αυτόματης επανάληψης"
3. Προσθέστε το στοιχείο "Πίνακας κειμένου"
4. Προσθέστε το στοιχείο "Analog Array"
5. Προσθέστε 2x στοιχείο "Counter"
6. Προσθέστε το στοιχείο "Clock Demux (Multiple Output Channel Switch)"
7. Προσθέστε το στοιχείο "Αποκωδικοποίηση (Διαίρεση) Ημερομηνία/Timeρα"
8. Προσθέστε το στοιχείο "FormattedText1"

Βήμα 5: Στο Visuino Set Components

1. Επιλέξτε το στοιχείο "FormattedText1" και στο παράθυρο "Ιδιότητες" ορίστε "Κείμενο" σε:%0:%1:%2
2. Κάντε διπλό κλικ στο στοιχείο "FormattedText1" και στο παράθυρο διαλόγου Elements σύρετε 3x "Στοιχείο κειμένου" προς τα αριστερά
3. Επιλέξτε "TextElement1" στην αριστερή πλευρά και στο παράθυρο ιδιοτήτων ορίστε "Fill Character" σε: 0 και "Length" σε: 2
4. Επιλέξτε "TextElement2" στην αριστερή πλευρά και στο παράθυρο ιδιοτήτων ορίστε "Fill Character" σε: 0 και "Length" σε: 2
5. Επιλέξτε "TextElement3" στην αριστερή πλευρά και στο παράθυρο ιδιοτήτων ορίστε "Fill Character" σε: 0 και "Length" σε: 2
6. Επιλέξτε το στοιχείο "ClockDemmux1" και στο παράθυρο ιδιοτήτων ορίστε "Καρφίτσες εξόδου" σε: 5
7. Επιλέξτε το στοιχείο "Counter1" και στο παράθυρο ιδιοτήτων αναπτύξτε το "Max" και ορίστε το "Value" σε: 4
8. Επιλέξτε το στοιχείο "Counter1" και στο παράθυρο ιδιοτήτων αναπτύξτε το "Min" και ορίστε το "Value" σε: 0
9. Επιλέξτε το στοιχείο "Counter2" και στο παράθυρο ιδιοτήτων αναπτύξτε το "Max" και ορίστε το "Value" σε: 6
10. Επιλέξτε το στοιχείο "Counter2" και στο παράθυρο ιδιοτήτων αναπτύξτε το "Min" και ορίστε το "Value" σε: 0BILLDING THE MENU:
11. Επιλέξτε το στοιχείο "Array1" (Text Array) και κάντε διπλό κλικ σε αυτό.-Στο παράθυρο στοιχείων σύρετε 4X "Value" στην αριστερή πλευρά-Στην αριστερή πλευρά Επιλέξτε "Item [1]" και στο παράθυρο ιδιοτήτων ορίστε "Value" σε: ΡΥΘΜΙΣΗ ΩΡΩΝ-Στην αριστερή πλευρά Επιλέξτε "Στοιχείο [2]" και στο παράθυρο ιδιοτήτων ορίστε "Τιμή" σε: ΡΥΘΜΙΣΗ ΛΕΠΤΩΝ-Στην αριστερή πλευρά Επιλέξτε "Στοιχείο [3]" και στο παράθυρο ιδιοτήτων ορίστε "Τιμή" σε: SET SECONDS-Στην αριστερή πλευρά Επιλέξτε "Item [4]" και στο παράθυρο ιδιοτήτων ορίστε "Value" σε: SET BRIGHTNESS Κλείστε το παράθυρο Elements. ΡΥΘΜΙΣΗ ΤΩΝ ΑΞΙΩΝ ΓΙΑ ΛΑΜΠΕΡΙΑ:

12. Επιλέξτε το στοιχείο "Array2" (Analog Array) και κάντε διπλό κλικ σε αυτό.-Στο παράθυρο στοιχείων σύρετε 6X "Value" στην αριστερή πλευρά-Στην αριστερή πλευρά Επιλέξτε "Item [0]" και στο παράθυρο ιδιοτήτων ορίστε "Value" προς: 1

    -Στην αριστερή πλευρά Επιλέξτε "Στοιχείο [1]" και στο παράθυρο ιδιοτήτων ορίστε "Τιμή" σε: 0,9

    -Στην αριστερή πλευρά Επιλέξτε "Στοιχείο [2]" και στο παράθυρο ιδιοτήτων ορίστε "Τιμή" σε: 0,8 -Στην αριστερή πλευρά Επιλέξτε "Στοιχείο [3]" και στο παράθυρο ιδιοτήτων ορίστε "Τιμή" σε: 0,7 -Ενεργό στην αριστερή πλευρά Επιλέξτε "Στοιχείο [4]" και στο παράθυρο ιδιοτήτων ορίστε "Τιμή" σε: 0,6-Στην αριστερή πλευρά Επιλέξτε "Στοιχείο [5]" και στο παράθυρο ιδιοτήτων ορίστε "Τιμή" σε: 0,55

Βήμα 6: Στο Visuino Connect Components

1. Συνδέστε τον ακροδέκτη A "M5 Stack Stick C" (M5) στον ακροδέκτη "Button2" [In]
2. Συνδέστε τον πείρο "M5 Stack Stick C" [B] στον ακροδέκτη "Button1" [In]
3. Συνδέστε τον ακροδέκτη "Button2" [Out] στον ακροδέκτη "RepeatButton1" [In]
4. Συνδέστε τον ακροδέκτη "RepeatButton1" [Out] με τον ακροδέκτη "ClockDemmux1" [In]
5. Συνδέστε τον ακροδέκτη "Button1" [Out] στον ακροδέκτη "Counter1" [In]
6. Συνδέστε το pin "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)" [Out] στο pin "DecodeDateTime1" [In]
7. Συνδέστε τον ακροδέκτη "DecodeDateTime1" [Hour] στο "FormattedText1"> "TextElement1" pin [In]
8. Συνδέστε το pin "DecodeDateTime1" [Minute] στο "FormattedText1"> "TextElement2" pin [In]
9. Συνδέστε τον ακροδέκτη "DecodeDateTime1" [Δεύτερο] στο "FormattedText1"> "TextElement3" pin [In]
10. Συνδέστε την καρφίτσα "FormattedText1" [Out] στην πλακέτα "M5 Stack Stick C"> "Display ST7735"> "Field Text1" pin [In]
11. Συνδέστε τον ακροδέκτη "Counter1" [Out] στον ακροδέκτη "ClockDemmux1" [Επιλογή] και στον ακροδέκτη "Array1" [Ευρετήριο]
12. Συνδέστε τον ακροδέκτη "Counter2" [Out] με τον ακροδέκτη "Array2" [Ευρετήριο]
13. Συνδέστε την καρφίτσα "Array1" [Out] στην πλακέτα "M5 Stack Stick C"> "Display ST7735"> "Text Field2" pin [In]
14. Συνδέστε την καρφίτσα "Array2" [Out] στην πλακέτα "M5 Stack Stick C"> "Display ST7735"> pin [Brightness]
15. Συνδέστε τον ακροδέκτη "ClockDemmux1" [1] στον πίνακα "M5 Stack Stick C"> "Ρολόι ξυπνητηριού σε πραγματικό χρόνο (RTC)"> καρφίτσα "Ρύθμιση ώρας 1" [Ρολόι]
16. Συνδέστε τον ακροδέκτη "ClockDemmux1" [2] στον πίνακα "M5 Stack Stick C"> "Ρολόι ξυπνητηριού σε πραγματικό χρόνο (RTC)"> καρφίτσα "Ρύθμιση λεπτού 1" [Ρολόι]
17. Συνδέστε τον ακροδέκτη "ClockDemmux1" [3] στον πίνακα "M5 Stack Stick C"> "Ρολόι ξυπνητηριού σε πραγματικό χρόνο (RTC)"> "Ρύθμιση δεύτερου1" καρφίτσα [Ρολόι]
18. Συνδέστε τον ακροδέκτη "ClockDemmux1" [4] στον ακροδέκτη "Counter2" [In]

Βήμα 7: Δημιουργία, μεταγλώττιση και μεταφόρτωση του κώδικα Arduino

Στο Visuino, στο κάτω μέρος κάντε κλικ στην καρτέλα "Build", βεβαιωθείτε ότι έχει επιλεγεί η σωστή θύρα και, στη συνέχεια, κάντε κλικ στο κουμπί "Compile/Build and Upload".

Βήμα 8: Παίξτε

Εάν τροφοδοτήσετε τη μονάδα M5Sticks, η οθόνη θα πρέπει να αρχίσει να εμφανίζει την ώρα. Μπορείτε να αλλάξετε την ώρα και τη φωτεινότητα χρησιμοποιώντας τα κουμπιά "B" για να εμφανίσετε το Μενού και να κάνετε εναλλαγή μεταξύ (Set Hours, Set Minutes, Set Seconds, Set Brightness) και να χρησιμοποιήσετε το κουμπί "M5" για να το ρυθμίσετε.

Συγχαρητήρια! Ολοκληρώσατε το έργο M5Sticks με το Visuino. Επισυνάπτεται επίσης το έργο Visuino, που δημιούργησα για αυτό το Instructable, μπορείτε να το κατεβάσετε εδώ. Μπορείτε να το κατεβάσετε και να το ανοίξετε στο Visuino: