Arduino Uno: Bitmap Animation στην ασπίδα οθόνης αφής ILI9341 TFT με Visuino: 12 βήματα (με εικόνες)

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

Οι ασπίδες οθόνης αφής TFT με βάση ILI9341 είναι πολύ δημοφιλείς ασπίδες οθόνης χαμηλού κόστους για το Arduino. Ο Visuino είχε υποστήριξη για αρκετό καιρό, αλλά ποτέ δεν είχα την ευκαιρία να γράψω ένα σεμινάριο για το πώς να τα χρησιμοποιήσω. Πρόσφατα, ωστόσο, λίγοι άνθρωποι έκαναν ερωτήσεις σχετικά με τη χρήση οθονών με το Visuino, έτσι αποφάσισα να κάνω ένα σεμινάριο.

Σε αυτό το σεμινάριο, θα σας δείξω πόσο εύκολο είναι, να συνδέσετε το Shield στο Arduino και να το προγραμματίσετε με το Visuino για να ζωντανέψετε ένα Bitmap για να μετακινηθείτε στην οθόνη.

Βήμα 1: Στοιχεία

1. Ένας συμβατός πίνακας Arduino Uno (Μπορεί να λειτουργεί και με το Mega, αλλά δεν έχω δοκιμάσει την ασπίδα με αυτό ακόμα)
2. Μία ασπίδα οθόνης αφής TFT 2,4 "ILI9341 για Arduino

Βήμα 2: Συνδέστε το ILI9341 TFT Touchscreen Shield Shield στο Arduino

Συνδέστε το TFT Shield πάνω από το Arduino Uno όπως φαίνεται στις εικόνες

Βήμα 3: Ξεκινήστε το Visuino και προσθέστε TFT Display Shield

Για να ξεκινήσετε τον προγραμματισμό του Arduino, θα πρέπει να έχετε εγκαταστήσει το Arduino IDE από εδώ:

Βεβαιωθείτε ότι έχετε εγκαταστήσει 1.6.7 ή νεότερη έκδοση, διαφορετικά αυτό το Instructable δεν θα λειτουργήσει

Το Visuino: https://www.visuino.com πρέπει επίσης να εγκατασταθεί.

1. Ξεκινήστε το Visuino όπως φαίνεται στην πρώτη εικόνα
2. Κάντε κλικ στο κουμπί "Βέλος προς τα κάτω" του στοιχείου Arduino για να ανοίξετε το αναπτυσσόμενο μενού (Εικόνα 1)
3. Από το μενού επιλέξτε "Προσθήκη ασπίδων …" (Εικόνα 1)
4. Στο παράθυρο διαλόγου "Ασπίδες" επεκτείνετε την κατηγορία "Οθόνες" και επιλέξτε την "TFT Color Touch Screen Display ILI9341 Shield" και, στη συνέχεια, κάντε κλικ στο κουμπί "+" για να την προσθέσετε (Εικόνα 2)

Βήμα 4: Στο Visuino: Προσθήκη στοιχείου σχεδίασης κειμένου για τη σκιά κειμένου

Στη συνέχεια πρέπει να προσθέσουμε στοιχεία γραφικών για απόδοση κειμένου και χάρτη bitmap. Πρώτα θα προσθέσουμε γραφικό στοιχείο για να σχεδιάσουμε τη σκιά του κειμένου:

1. Στο Object Inspector, κάντε κλικ στο κουμπί "…" δίπλα στην τιμή της ιδιότητας "Elements" του στοιχείου "TFT Display" (Εικόνα 1)
2. Στο πρόγραμμα επεξεργασίας στοιχείων επιλέξτε "Σχεδίαση κειμένου" και, στη συνέχεια, κάντε κλικ στο κουμπί "+" (Εικόνα 2) για να προσθέσετε ένα (Εικόνα 3)
3. Στο Object Inspector ορίστε την τιμή της ιδιότητας "Color" του στοιχείου "Draw Text1" σε "aclSilver" (Εικόνα 3)
4. Στο Object Inspector ορίστε την τιμή της ιδιότητας "Μέγεθος" του στοιχείου "Draw Text1" σε "4" (Εικόνα 4). Αυτό κάνει το κείμενο μεγαλύτερο
5. Στο Object Inspector ορίστε την τιμή της ιδιότητας "Text" του στοιχείου "Draw Text1" σε "Visuino" (Εικόνα 5)
6. Στο Object Inspector ορίστε την τιμή της ιδιότητας "X" του στοιχείου "Draw Text1" σε "43" (Εικόνα 6)
7. Στο Object Inspector ορίστε την τιμή της ιδιότητας "Y" του στοιχείου "Draw Text1" σε "278" (Εικόνα 6)

Βήμα 5: Στο Visuino: Προσθέστε στοιχείο σχεδίασης κειμένου για το κείμενο σε πρώτο πλάνο

Τώρα θα προσθέσουμε στοιχείο γραφικών για να σχεδιάσουμε το κείμενο:

1. Στο πρόγραμμα επεξεργασίας στοιχείων επιλέξτε "Σχεδίαση κειμένου" και, στη συνέχεια, κάντε κλικ στο κουμπί "+" (Εικόνα 1) για να προσθέσετε το δεύτερο (Εικόνα 2)
2. Στο Object Inspector ορίστε την τιμή της ιδιότητας "Μέγεθος" του στοιχείου "Draw Text1" σε "4" (Εικόνα 2)
3. Στο Object Inspector ορίστε την τιμή της ιδιότητας "Text" του στοιχείου "Draw Text1" σε "Visuino" (Εικόνα 3)
4. Στο Object Inspector ορίστε την τιμή της ιδιότητας "X" του στοιχείου "Draw Text1" σε "40" (Εικόνα 4)
5. Στο Object Inspector ορίστε την τιμή της ιδιότητας "Y" του στοιχείου "Draw Text1" σε "275" (Εικόνα 4)

Βήμα 6: Στο Visuino: Προσθήκη στοιχείου σχεδίασης bitmap για την κινούμενη εικόνα

Στη συνέχεια θα προσθέσουμε στοιχείο γραφικών για να σχεδιάσουμε το bitmap:

1. Στον επεξεργαστή Elements επιλέξτε "Draw Bitmap" και, στη συνέχεια, κάντε κλικ στο κουμπί "+" (Εικόνα 1) για να προσθέσετε ένα (Εικόνα 2)
2. Στο Object Inspector, κάντε κλικ στο κουμπί "…" δίπλα στην τιμή της ιδιότητας "Bitmap" του στοιχείου "Draw Bitmap1" (Εικόνα 2) για να ανοίξετε το "Bitmap Editor" (Εικόνα 3)
3. Στο "Bitmap Editor" κάντε κλικ στο κουμπί "Load …" (Εικόνα 3) για να ανοίξετε το Open Open Dialog (Εικόνα 4)
4. Στο παράθυρο διαλόγου Άνοιγμα αρχείου, επιλέξτε το bitmap για να σχεδιάσετε και κάντε κλικ στο κουμπί "Άνοιγμα" (Εικόνα 4). Εάν το αρχείο είναι πολύ μεγάλο μπορεί να μην μπορεί να χωρέσει στη μνήμη Arduino. Εάν ξεφύγετε από σφάλμα μνήμης κατά τη μεταγλώττιση, ίσως χρειαστεί να επιλέξετε μικρότερο bitmap
5. Στο "Bitmap Editor" κάντε κλικ στο "OK". κουμπί (Εικόνα 5) για να κλείσετε το παράθυρο διαλόγου

Βήμα 7: Στο Visuino: Προσθέστε καρφίτσες για τις ιδιότητες X και Y του στοιχείου Draw Bitmap

Για να ζωντανέψουμε το Bitmap, πρέπει να ελέγξουμε τη θέση του X και Y. Για αυτό θα προσθέσουμε καρφίτσες για τις ιδιότητες Χ και Υ:

1. Στο Object Inspector κάντε κλικ στο κουμπί "Pin" μπροστά από την ιδιότητα "X" του στοιχείου "Draw Bitmap1" (Εικόνα 1) και επιλέξτε "Integer SinkPin" (Εικόνα 2)
2. Στο Object Inspector κάντε κλικ στο κουμπί "Pin" μπροστά από την ιδιότητα "Y" του στοιχείου "Draw Bitmap1" (Εικόνα 3) και επιλέξτε "Integer SinkPin" (Εικόνα 4)

Βήμα 8: Στο Visuino: Προσθέστε 2 ακέραιες γεννήτριες ημιτόνου και διαμορφώστε την πρώτη

Θα χρησιμοποιήσουμε 2 ακέραιες γεννήτριες ημιτόνου για να ζωντανέψουμε την κίνηση bitmap:

1. Πληκτρολογήστε "sine" στο πλαίσιο Filter της Εργαλειοθήκης Component Toolbox και στη συνέχεια επιλέξτε το στοιχείο "Sine Integer Generator" (Εικόνα 1) και αφήστε δύο από αυτά στην περιοχή σχεδίασης
2. Στο Object Inspector, ορίστε την τιμή της ιδιότητας "Amplitude" του στοιχείου SineIntegerGenerator1 σε "96" (Εικόνα 2)
3. Στο Object Inspector, ορίστε την τιμή της ιδιότητας "Offset" του στοιχείου SineIntegerGenerator1 σε "96" (Εικόνα 3)
4. Στο Object Inspector, ορίστε την τιμή της ιδιότητας "Frequency" του στοιχείου SineIntegerGenerator1 σε "0,2" (Εικόνα 4)

Βήμα 9: Στο Visuino: Διαμορφώστε τη δεύτερη γεννήτρια ημιτόνου και συνδέστε τις γεννήτριες Sine στις ακίδες συντονισμού X και Y του Bitmap

1. Στο Object Inspector, ορίστε την τιμή της ιδιότητας "Amplitude" του στοιχείου SineIntegerGenerator2 σε "120" (Εικόνα 1)
2. Στο Object Inspector, ορίστε την τιμή της ιδιότητας "Offset" του στοιχείου SineIntegerGenerator2 σε "120" (Εικόνα 2)
3. Στο Object Inspector, ορίστε την τιμή της ιδιότητας "Frequency" του στοιχείου SineIntegerGenerator2 σε "0.03" (Εικόνα 3)
4. Συνδέστε τον πείρο εξόδου "Out" του στοιχείου SineIntegerGenerator1 με τον πείρο εισόδου "X" του στοιχείου "Shields. TFT Sisplay. Elements. Draw Bitmap1" του στοιχείου Arduino (Εικόνα 4)
5. Συνδέστε τον πείρο εξόδου "Out" του στοιχείου SineIntegerGenerator2 με τον πείρο εισόδου "Y" του στοιχείου "Shields. TFT Display. Elements. Draw Bitmap1" του στοιχείου Arduino (Εικόνα 5)

Βήμα 10: Στο Visuino: Προσθήκη και σύνδεση στοιχείων έναρξης και ρολογιού πολλαπλών πηγών

Για την απόδοση του bitmap κάθε φορά που ενημερώνονται οι θέσεις X και Y πρέπει να στείλουμε ένα σήμα ρολογιού στο στοιχείο "Draw Bitmap1". Για να στείλουμε την εντολή μετά την αλλαγή των θέσεων, χρειαζόμαστε έναν τρόπο συγχρονισμού των συμβάντων. Για αυτό θα χρησιμοποιήσουμε το στοιχείο Επανάληψη για να δημιουργούμε συνεχώς συμβάντα και το Clock Multi Source για να δημιουργήσουμε 2 συμβάντα στη σειρά. Το πρώτο συμβάν θα χρονομετρήσει τις γεννήτριες ημιτόνου για να ενημερώσει τις θέσεις Χ και Υ και το δεύτερο θα χρονομετρήσει το "Draw Bitmap1":

1. Πληκτρολογήστε "επανάληψη" στο πλαίσιο Φίλτρο της Εργαλειοθήκης εξαρτημάτων και, στη συνέχεια, επιλέξτε το στοιχείο "Επανάληψη" (Εικόνα 1) και αφήστε το στην περιοχή σχεδίασης (Εικόνα 2)
2. Πληκτρολογήστε "multi" στο πλαίσιο Φίλτρο της Εργαλειοθήκης στοιχείων και, στη συνέχεια, επιλέξτε το στοιχείο "Clock Multi Source" (Εικόνα 2) και αφήστε το στην περιοχή σχεδίασης (Εικόνα 3)
3. Συνδέστε τον ακροδέκτη εξόδου "Out" του στοιχείου Repeat1 με τον ακροδέκτη εισόδου "In" του στοιχείου ClockMultiSource1 (Εικόνα 3)
4. Συνδέστε τον ακροδέκτη εξόδου "Pin [0]" των ακίδων "Out" του συστατικού ClockMultiSource1 με τον ακροδέκτη εισόδου "In" του στοιχείου SineIntegerGenerator1 (Εικόνα 4)
5. Συνδέστε τον ακροδέκτη εξόδου "Pin [0]" των ακίδων "Out" του συστατικού ClockMultiSource2 με τον ακροδέκτη εισόδου "In" του στοιχείου SineIntegerGenerator1 (Εικόνα 5)
6. Συνδέστε τον πείρο εξόδου "Pin [1]" του πείρου εισόδου "Clock" του στοιχείου "Shields. TFT Display. Elements. Draw Bitmap1" του στοιχείου Arduino (Εικόνα 6)

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

1. Στο Visuino, πατήστε F9 ή κάντε κλικ στο κουμπί που εμφανίζεται στην εικόνα 1 για να δημιουργήσετε τον κωδικό Arduino και ανοίξτε το Arduino IDE
2. Στο Arduino IDE, κάντε κλικ στο κουμπί Μεταφόρτωση, για να μεταγλωττίσετε και να ανεβάσετε τον κώδικα (Εικόνα 2)

Βήμα 12: Και παίξτε…

Συγχαρητήρια! Ολοκληρώσατε το έργο.

Οι εικόνες 2, 3, 4 και 5 και το Βίντεο δείχνουν το συνδεδεμένο και ενεργοποιημένο έργο. Θα δείτε το Bitmap να κινείται γύρω από την ασπίδα οθόνης αφής TFT με βάση το ILI9341, όπως φαίνεται στο βίντεο.

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