Πίνακας περιεχομένων:
- Βήμα 1: Απαιτούνται υλικά
- Βήμα 2: Προετοιμάστε το Joystick to Bluefruit EZ Key Jumper Wires
- Βήμα 3: Προετοιμασία περιβλήματος
- Βήμα 4: Εγκαταστήστε το Joystick, το Bluefruit EZ Key και το USB Breakout Board
- Βήμα 5: GUI EZ Key
- Βήμα 6: Power and Pair Bluefruit EZ Key
- Βήμα 7: Επανασκόπηση των κουμπιών στο κλειδί EZ του Bluefruit
- Βήμα 8: Έλεγχος υπάρχοντος σκίτσου P5.js με πρόγραμμα περιήγησης στον Firefox σε πλήρη οθόνη
- Βήμα 9: Επεξεργασία, αναθεώρηση ή δημιουργία της δικής σας εφαρμογής Ιστού
2025 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2025-01-13 06:57
Καταπλήξτε τους φίλους σας και εκπλήξτε την οικογένειά σας, όταν δείτε την "HypnoEllipse", μια διαδραστική εφαρμογή Ιστού A/V. Δημιουργήστε ένα περίβλημα joystick με δυνατότητα Bluetooth, συνδέστε το στο πρόγραμμα περιήγησης ιστού και εκτελέστε με τη σειρά σας αυτο -ύπνωση.
Πρόκειται για ένα Joystick συνδεδεμένο με Bluetooth, το οποίο στέλνει μηνύματα HID (πληκτρολόγιο/ποντίκι) σε ένα σκίτσο p5.js, το οποίο παρουσιάζει μια περιστρεφόμενη οπτική ψευδαίσθηση και στροβιλίζεται δείγμα ήχου.
Βήμα 1: Απαιτούνται υλικά
Εργαλεία
συγκολλητικό σίδερο
κόλλα μετάλλων
απογυμνωτές σύρματος
τρυπάνι
τρυπάνι 1/4"
πριόνι οπής 3/4”
Ανταλλακτικά
Υπολογιστής με δυνατότητα Bluetooth
Περίφραξη
www.adafruit.com/product/905
Bluefruit EZ-Key
www.adafruit.com/product/1535
μίνι αρθρωτό breadboard
www.sparkfun.com/products/12047
καλώδια βραχυκυκλωτήρων
www.sparkfun.com/products/8431
χειριστήριο
www.sparkfun.com/products/9182
USB micro-B breakout board
www.sparkfun.com/products/1833
5vdc επαναφορτιζόμενη μπαταρία microUSB
www.sparkfun.com/products/14167
ΛΟΓΙΣΜΙΚΟ
Εφαρμογή ιστού Hypnoellipse
hypnoellipse.netlify.com/
Επεξεργασία 1.5.1 (για επανατοποθέτηση κλειδιού EZ)
processing.org/download/?processing
Έλεγχος P5 (επεξεργασία βιβλιοθήκης)
www.sojamo.de/libraries/controlP5/
Firefoxhttps://www.mozilla.org/en-US/firefox/new/
Αν θέλετε φτιάξτε τη δική σας έκδοση του Hypnoellipse!
p5.js
p5js.org/download/
Συντάκτης Atom
atom.io/
Βήμα 2: Προετοιμάστε το Joystick to Bluefruit EZ Key Jumper Wires
Κόψτε και απογυμνώστε το ένα άκρο του καθενός από τα τέσσερα ζεύγη διαφορετικών χρωμάτων καλωδίων βραχυκυκλωτήρων.
Κάθε ένα από τα ζεύγη χρωμάτων αντιστοιχεί στη μοναδική κατεύθυνση (αριστερά, δεξιά, πάνω, κάτω) του χειριστηρίου - το ένα από τα δύο ζεύγη πηγαίνει σε μια είσοδο κλειδιού EZ και το άλλο στο GND.
Με αυτό το μυαλό, συγκολλήστε προσεκτικά τα καλώδια του άλτη σε joystick.
Βήμα 3: Προετοιμασία περιβλήματος
Θα χρειαστείτε μια τρύπα 1/2 "στο πλάι του περιβλήματος για το καλώδιο microUSB και τέσσερις οπές 1/4" στο επάνω κάλυμμα για την τοποθέτηση του χειριστηρίου. Το ίδιο το joystick θα χρειαστεί κοπή τρύπας 3/4 ".
Χρησιμοποίησα ένα κομμάτι χαρτί και μολύβι για να εντοπίσω τις τρύπες που απαιτούνται από τη διάταξη του χειριστηρίου, πριν από την πραγματική διάτρηση στην κορυφή του πλαστικού περιβλήματος.
Βήμα 4: Εγκαταστήστε το Joystick, το Bluefruit EZ Key και το USB Breakout Board
Βεβαιωθείτε ότι έχετε καθορίσει προσεκτικά πώς συνδέονται οι τέσσερις μοναδικά χρωματισμένοι βραχυκυκλωτήρες του χειριστηρίου με τις ακίδες #0 - #4 στο κλειδί EZ. Αυτό καθορίζει τον τρόπο με τον οποίο οι τέσσερις μικροδιακόπτες στο joystick θα αλλάξουν τις τιμές του mouseX και του mouseY στο σκίτσο p5.js.
Μόλις καθορίσετε τον προσανατολισμό του περιβλήματός σας, προχωρήστε δεξιόστροφα γύρω από τις συνδέσεις του joystick, συνδέοντας τους βραχυκυκλωτήρες στις εισόδους του κλειδιού EZ και αναθεωρήστε όπως απαιτείται (μέθοδος δοκιμής και σφάλματος!).
Οι ακίδες γείωσης από το χειριστήριο σχηματίζουν ένα δίαυλο γείωσης μαζί με μια καρφίτσα γείωσης του κλειδιού EZ Bluefruit.
Η γείωση και το +5vdc από την υποδοχή microUSB θα συνδεθούν επίσης με το κλειδί EZ Bluefruit.
Βήμα 5: GUI EZ Key
Θα χρειαστεί να χρησιμοποιήσετε μια παλαιότερη έκδοση του Processing 2.2.1 για να εκτελέσετε αυτό το εργαλείο GUI.
Το joystick πάνω/κάτω/αριστερά/δεξιά θα μιμηθεί τις κινήσεις mouseX και mouseY για να ελέγξει το σκίτσο p5.js (HypnoEllipse).
Αυτό το σεμινάριο του Adafruit παρέχει όλες τις απαραίτητες πληροφορίες για τη χρήση του Bluefruit EZ-Key:
learn.adafruit.com/introducing-bluefruit-ez-key-diy-bluetooth-hid-keyboard
Βήμα 6: Power and Pair Bluefruit EZ Key
Ενεργοποιήστε το Blue-Fruit EZ-Key και πατήστε το κουμπί ζεύξης.
Θα πρέπει να δείτε το κόκκινο LED να αναβοσβήνει. Στη συνέχεια, πατήστε το κουμπί μίνι στο πλήκτρο EZ για 5 δευτερόλεπτα και αφήστε το, αυτό θα διαγράψει τις προηγούμενες πληροφορίες σύζευξης και θα σας επιτρέψει να ξαναζευγαρώσετε στον υπολογιστή σας. Το κόκκινο LED θα αναβοσβήνει τώρα.
Ενεργοποιήστε το Bluetooth στις Προτιμήσεις συστήματος και κάντε κλικ στην επιλογή "Ρύθμιση νέας συσκευής".
Αφήστε τον βοηθό να τρέξει μέχρι να εντοπίσει και να εμφανίσει τη μονάδα EZ -Key - επιλέξτε την και κάντε κλικ στο "Συνέχεια".
Βήμα 7: Επανασκόπηση των κουμπιών στο κλειδί EZ του Bluefruit
Στο στιγμιότυπο οθόνης, οι τιμές mouseX και mouseY που σχετίζονται με τις βασικές ακίδες:
καρφίτσα 0: x5
ακίδα 1: x-5
pin2: y5
pin3: y-5
Λήψη της βιβλιοθήκης ControlP5:
www.sojamo.de/libraries/controlP5/
Κατεβάστε το αρχείο zip με τον κωδικό remapper ασύρματου δικτύου:
learn.adafruit.com/system/assets/assets/000/013/042/original/GUI_EZKey_remapper_12-20-13.zip?1387568625
Αποσυμπιέστε και ανοίξτε το GUI_EZKey_remapper.pde στην Επεξεργασία.
Ελέγξτε ξανά ότι το Bluefruit είναι αντιστοιχισμένο με τον υπολογιστή σας.
Επιλέξτε Sketch -> Run για να ξεκινήσετε το γραφικό remapper.
Τώρα επιλέξτε τις καρφίτσες και χρησιμοποιώντας τα μενού επιλέξτε τις αναφορές του ποντικιού.
Στη συνέχεια, κάντε κλικ στο "SEND_MAP" για να το στείλετε στο κλειδί EZ του Bluefruit.
Μια αναφορά κειμένου στο παράθυρο επεξεργασίας θα πρέπει να υποδεικνύει ότι έχει βρει ένα Bluefruit και ότι έστειλε δεδομένα με μια αντιστοίχιση Checksum.
Βήμα 8: Έλεγχος υπάρχοντος σκίτσου P5.js με πρόγραμμα περιήγησης στον Firefox σε πλήρη οθόνη
Εδώ είναι το σκίτσο μου p5.js που φιλοξενείται στο Netlify:
hypnoellipse.netlify.com
Μπορείτε να πειραματιστείτε με το ποντίκι σας, πριν δημιουργήσετε και συνδέσετε τη διεπαφή χειριστηρίου, για να δείτε και να ακούσετε τις παραλλαγές οπτικοακουστικών μοτίβων.
Βήμα 9: Επεξεργασία, αναθεώρηση ή δημιουργία της δικής σας εφαρμογής Ιστού
Ακολουθεί ο κώδικας για την ίδια την εφαρμογή ιστού:
github.com/dkonha01/HypnoEllipse
Μπορείτε εύκολα να αναπτύξετε τη δική σας έκδοση, δοκιμάζοντας να αλλάξετε τις τιμές στις γραμμές 44, 51 και 66 του sketch.js - ανατρέξτε στις σχολιασμένες γραμμές για παραδείγματα αυτού.