Contrôleur de joystick compatible Bluetooth : 9 étapes (avec photos)

2025 Auteur: John Day | [email protected]. Dernière modifié: 2025-01-23 14:46

Surprenez vos amis et surprenez votre famille lorsqu'ils découvrent « HypnoEllipse », une application Web A/V interactive. Construisez un boîtier de joystick compatible Bluetooth, connectez-le au navigateur Web et effectuez à tour de rôle une auto-hypnose.

Il s'agit d'un joystick connecté par Bluetooth, qui envoie des messages HID (clavier/souris) à un sketch p5.js, qui présente une illusion d'optique en rotation et un échantillon sonore tourbillonnant.

Étape 1: Matériel nécessaire

Outils

fer à souder

souder

pinces à dénuder

percer

foret 1/4"

scie cloche 3/4"

les pièces

Ordinateur compatible Bluetooth

Enceinte

www.adafruit.com/product/905

Bluefruit EZ-Key

www.adafruit.com/product/1535

mini planche à pain modulaire

www.sparkfun.com/products/12047

fils de liaison

www.sparkfun.com/products/8431

manette

www.sparkfun.com/products/9182

Carte de dérivation USB micro-B

www.sparkfun.com/products/1833

Batterie microUSB rechargeable 5vdc

www.sparkfun.com/products/14167

LOGICIEL

Application web Hypnoellipse

hypnoellipse.netlify.com/

Traitement 1.5.1 (pour remapper EZ Key)

processing.org/download/?processing

Contrôle P5 (Bibliothèque de traitement)

www.sojamo.de/libraries/controlP5/

Firefoxhttps://www.mozilla.org/en-US/firefox/new/

Si vous voulez faire votre propre version de l'Hypnoellipse !

p5.js

p5js.org/download/

Éditeur d'atomes

atom.io/

Étape 2: préparer le joystick aux câbles de connexion Bluefruit EZ Key

Coupez et dénudez une extrémité de chacune des quatre paires de cavaliers de couleurs différentes.

Chacune des paires de couleurs correspond à la direction unique du joystick (gauche, droite, haut, bas) - une de chaque paire va à une entrée EZ Key et l'autre à GND.

Dans cet esprit, soudez soigneusement les fils de connexion au joystick.

Étape 3: Préparer l'enceinte

Vous aurez besoin d'un trou de 1/2" sur le côté du boîtier pour le câble microUSB et de quatre trous de 1/4" dans le couvercle supérieur pour le montage du joystick. Le joystick lui-même aura besoin d'un trou de 3/4".

J'ai utilisé un morceau de papier et un crayon pour tracer les trous requis par l'assemblage du joystick, avant de percer le haut du boîtier en plastique.

Étape 4: Installez le joystick, la clé Bluefruit EZ et la carte de dérivation USB

Assurez-vous de déterminer soigneusement comment les quatre cavaliers de couleur unique du joystick se connectent aux broches #0 - #4 de la clé EZ. Cela définit comment les quatre micro-interrupteurs du joystick modifieront les valeurs de mouseX et mouseY dans le sketch p5.js.

Une fois que vous avez déterminé l'orientation de votre boîtier, procédez dans le sens des aiguilles d'une montre autour des connexions du joystick, en attachant les cavaliers aux entrées de la clé EZ, et révisez si nécessaire (méthode d'essai et d'erreur !).

Les broches de masse du joystick forment un bus de masse avec une broche de masse de la clé Bluefruit EZ.

La terre et le +5vdc du connecteur microUSB se connecteront également à la clé Bluefruit EZ.

Étape 5: GUI EZ Key

Vous devrez utiliser une ancienne version de Processing 2.2.1 pour exécuter cet outil GUI.

Les contacts haut/bas/gauche/droite du joystick émuleront les mouvements mouseX et mouseY afin de contrôler le sketch p5.js (HypnoEllipse).

Ce tutoriel Adafruit fournit toutes les informations nécessaires pour utiliser la Bluefruit EZ-Key:

learn.adafruit.com/introducing-bluefruit-ez-key-diy-bluetooth-hid-keyboard

Étape 6: Alimentez et associez la clé Bluefruit EZ

Allumez le Bluefruit EZ-Key et appuyez sur le bouton de jumelage.

Vous devriez voir la LED rouge clignoter. Appuyez ensuite sur le mini-bouton de la clé EZ pendant 5 secondes et relâchez-le, cela effacera les informations de couplage précédentes et vous permettra de vous reconnecter à votre ordinateur. La LED rouge va maintenant clignoter.

Activez Bluetooth dans les Préférences Système et cliquez sur "Configurer un nouvel appareil".

Laissez l'assistant fonctionner jusqu'à ce qu'il localise et affiche le module EZ-Key - sélectionnez-le et cliquez sur "Continuer".

Étape 7: Remappage des boutons sur le Bluefruit EZ-Key

Dans la capture d'écran, notez les valeurs mouseX et mouseY associées aux broches clés:

broche 0: x5

broche 1: x-5

broche2: y5

broche 3: y-5

Téléchargez la bibliothèque ControlP5:

www.sojamo.de/libraries/controlP5/

Téléchargez le fichier zip avec le code de remappage sans fil:

learn.adafruit.com/system/assets/assets/000/013/042/original/GUI_EZKey_remapper_12-20-13.zip?1387568625

Décompressez et ouvrez GUI_EZKey_remapper.pde dans Processing.

Vérifiez que le Bluefruit est couplé à votre ordinateur.

Sélectionnez Esquisse -> Exécuter pour démarrer le remappeur graphique.

Maintenant, choisissez les broches et à l'aide des menus, sélectionnez les rapports de la souris.

Cliquez ensuite sur "SEND_MAP" pour l'envoyer à votre Bluefruit EZ-Key.

Un rapport texte dans la fenêtre de traitement doit indiquer qu'il a trouvé un Bluefruit et qu'il a envoyé des données avec une correspondance de somme de contrôle.

Étape 8: Contrôlez l'esquisse P5.js existante avec le navigateur Web Firefox en plein écran

Voici mon sketch p5.js hébergé sur Netlify:

hypnoellipse.netlify.com

Vous pouvez expérimenter avec votre souris, avant de créer et de connecter l'interface du joystick, pour voir et entendre les variations de motifs audiovisuels.

Étape 9: Modifier, réviser ou créer votre propre application Web

Voici le code de l'application Web elle-même:

github.com/dkonha01/HypnoEllipse

Vous pouvez facilement développer votre propre version en essayant de modifier les valeurs des lignes 44, 51 et 66 de sketch.js - consultez les lignes commentées pour des exemples.