Cet Instructable vous montre comment ajouter un écran tactile haute résolution à votre Arduino et créer un synthétiseur contrôlant des voyants colorés! Les techniques que vous apprendrez ici peuvent servir de base à d’autres projets d’écrans tactiles!

Dans cet Instructable, vous apprendrez:

• Où trouver un écran tactile haute résolution 800x480.
• Comment souder un en-tête sur l'écran tactile.
• Comment imprimer et assembler en 3D un support LCD (étape facultative).
• Comment connecter l'écran tactile couleur à l'Arduino Uno.
• Comment créer une prise de sortie de ligne sur l'écran tactile à l'aide de composants passifs.
• Comment connecter une matrice de LED à votre Arduino.

Pour cet Instructable, vous aurez besoin de:

• Un écran tactile haute résolution basé sur une puce FT810 (voir la prochaine étape pour ma recommandation)
• 2x5 et 1x4 têtes mâles (vous pouvez les acheter et les couper à longueur)
• Un fer à souder
• Ruban électrique
• Fils de connexion femme à homme
• Fils de connexion mâle à mâle.
• Un Arduino Uno
• Une planche à pain
• Un ensemble de LEDs WS2812 (j'ai eu un module 4x4 pour environ 5 $ d'eBay)
• Une résistance de 220 Ohms et une résistance de 100 Ohms, un condensateur en céramique de 100 nF et un condensateur à film mince de 1uF et une prise audio de 3,5 mm.
• Une planche à pain
• Un Arduino Uno
• Ensemble de haut-parleurs ou d’écouteurs amplifiés.

Crédits / Disclaimer: Ce projet utilise le code de bibliothèque librement disponible et sous licence GPL sur lequel j'ai travaillé alors qu'il était employé chez AlephObjects, fabricant des imprimantes 3D à code source libre LulzBot. Ce projet et les vidéos associées ont été réalisés pendant mon temps libre à la maison, en utilisant mon propre équipement.

Provisions:

Étape 1: L’écran tactile utilisé dans cet appareil

Pour cet Instructable, je vais utiliser des écrans tactiles de Haoyu Electronics. J'ai utilisé ce qui suit:

• Ecran tactile LCD graphique 5 ", 800x480, SPI, FT810

Cet écran coûte environ 36 $ avec l'expédition. C'est plus que d'autres écrans Arduino, mais vous en avez beaucoup pour votre argent:

• Un écran tactile haute résolution d'une résolution de 800x480.
• Un coprocesseur graphique intégré et de la mémoire vive permettent un contrôle sans perte de temps.
• Synthétiseur audio intégré avec échantillons de son de qualité et divers instruments à choisir.
• Prise en charge des paysages et des portraits (sur le FT810 ou supérieur).
• Support multi-touch.
• JPEG intégré, décodeur audio et vidéo wave, pour projets avancés.

Étape 2: Préparation de l'écran

Une fois que vous obtenez votre écran, vous devrez souder des en-têtes sur celui-ci. Les écrans Haoyu sont parfaits car ils sont dotés de trous traversants faciles à souder et vous avez le choix de souder l'en-tête directement à l'arrière de l'écran ou à l'extrémité d'un petit câble ruban qui se fixe à un panneau détachable détachable.

Pour terminer le travail de soudure, vous souhaiterez déconnecter temporairement le câble ruban et retirer la carte de circuit imprimé à l'arrière du panneau. Utilisez votre ongle pour soulever délicatement le clip de fixation du connecteur LCD et dégagez le câble ruban. Ensuite, retirez les quatre vis qui maintiennent la carte en place.

Maintenant, souder un en-tête 5x2 (ou deux en-têtes 5x1) où vous le souhaitez. Couvrez le dos avec du ruban isolant pour éviter les courts-circuits. Ensuite, revissez le circuit imprimé et rebranchez le câble ruban.

Étape 3: en option: imprimez le support LCD et ajoutez des inserts en laiton

J'ai choisi d'imprimer en 3D un support pour tenir mon écran LCD 1

Le panneau est livré avec quatre inserts en laiton; ceux-ci sont destinés à être pressés dans du plastique avec la chaleur.Quand ils refroidissent, les petites dents sur eux mordent dans le plastique et les empêchent de tomber. Ces inserts sont un moyen courant d’ajouter des filetages durables aux pièces imprimées en 3D.

Une fois le support imprimé, j'ai dévissé les quatre inserts en laiton du panneau.

J'ai chauffé mon fer et l'ai tenu avec la pointe inclinée vers le haut, en équilibrant délicatement un insert sur la pointe. J'ai ensuite ramené la pièce en plastique par-dessus et inséré lentement les inserts dans les trous préformés jusqu'à ce qu'ils affleurent la surface.

Cette étape fonctionne mieux si vous avez un fer à souder avec une pointe conique étroite. Si vous n’avez jamais fait cela auparavant, vous pouvez pratiquer pendant que le fer est froid - vous n’avez qu’une chance de le faire correctement quand le fer est chaud!

Soyez prudent avec cette étape car les inserts en laiton deviennent très chauds et vous ne voulez pas qu'ils tombent sur vos genoux. Travaillez sur une surface résistante à la chaleur et, s’ils tombent du fer, résistez à la tentation de les atteindre immédiatement!

1 Sources: fichier STL et CAO du support LCD

Étape 4: Retirez le film et montez l'écran

Maintenant, retournez l’écran et retirez le cadre en acrylique avant, puis retirez le film protecteur du panneau LCD (ceci améliorera la clarté de l’écran). Utilisez les vis pour monter l’écran sur le support imprimé en 3D.

Étape 5: Souder les en-têtes au module DEL

Utilisez des couteaux latéraux pour séparer les en-têtes de longueur à quatre broches et les souder au module DEL, comme indiqué sur la photo. Vous pouvez également couper en deux la longueur des fils de liaison et les souder directement, si vous préférez.

Étape 6: Câbler le circuit

Exécutez trois câbles de démarrage de l’Arduino au module DEL, comme suit:

• 5V au rail rouge sur la planche à pain
• GND au rail noir sur la planche à pain
• IN à épingler ~ 5 sur Arduino

Pour l’écran LCD, connectez:

• 5V au rail rouge sur la planche à pain
• GND au rail noir sur la planche à pain
• SCK à broche ~ 13 sur Arduino
• MISO à brancher ~ 12 sur Arduino
• MOSI à épingler ~ 11 sur Arduino
• CS à épingler ~ 10 sur Arduino
• PD à pin ~ 9 sur Arduino
• AUDIO va au circuit audio comme indiqué dans la maquette et le schéma
• GND va au rail noir sur la planche à pain

De l'Arduino:

• Faites passer un câble volant de la broche 5V au rail rouge de la planche à pain
• Faites passer un câble volant de la broche GND au rail noir de la planche à pain

Une fois le circuit de sortie audio terminé, vous pouvez maintenant brancher un casque d’écouteurs ou un ensemble de haut-parleurs amplifiés à la prise audio.

Conception de la sortie audio:

La sortie AUDIO du panneau d'affichage est un signal numérique qui n'est pas conçu pour piloter directement un haut-parleur. Tenter de le faire pourrait endommager le panneau ou le haut-parleur. Pour fournir une sortie audio appropriée, vous devrez créer un circuit de conditionnement effectuant les tâches suivantes:

• Convertissez le signal numérique PWM (modulé en largeur d'impulsion) en une tension analogique.
• Limite le courant et les tensions de sortie à des niveaux sûrs.

La tâche peut être accomplie avec deux résistances et deux condensateurs.

J'ai vérifié la fiche technique de la puce FTDI FT810 et constaté que la broche AUDIO pouvait alimenter jusqu'à 16 mA à 3,3 V. Cela signifie que la charge doit avoir une résistance d'au moins 206 Ohms. Pour protéger la broche contre un court-circuit, j'ai commencé par placer une résistance de 220 ohms en série avec la broche AUDIO. J'ai ensuite ajouté une autre résistance de 100 Ohm à la terre pour former un diviseur de tension. Lorsque rien n'est connecté à la prise, le 3,3V tombe à un niveau d'environ 1V, ce qui est sans danger pour l'audio au niveau de la ligne. Le 100nF forme un filtre passe-bas qui atténue le bruit PWM haute fréquence tout en transmettant les fréquences audio. Le condensateur 1uF restant s'appelle un condensateur de couplage alternatif. Il empêche le courant continu de sortir de la prise audio tout en laissant passer le signal audio, qui est AC.

Étape 7: Installation de la bibliothèque FastLED et exécution du code

Téléchargez le fichier.zip contenant l'esquisse Arduino à partir de mon référentiel github.

Ouvrez l'IDE Arduino et allez dans "Sketch" -> "Inclure la bibliothèque" -> "Gérer les bibliothèques …". Installez la bibliothèque "FastLED" de Daniel Garcia. Ensuite, ouvrez le fichier "RainbowPiano.ino" et chargez-le sur votre Arduino Uno!

Étape 8: Un aperçu du code

Le code utilise un framework d'interface utilisateur que j'ai développé en C ++. Ce cadre vous permet de créer une interface à partir d’un ou plusieurs écrans d’interface utilisateur. L'application piano n'a qu'un seul écran, défini par le code suivant:

classe PianoScreen: public InterfaceScreen {… public: static void onEntry (); void statique onRedraw (draw_mode_t quoi); void statique onTouchStart (balise uint8_t); void statique onIdle (); }; // Répertorie tous les écrans de votre application dans le tableau suivant SCREEN_TABLE {DECL_SCREEN (PianoScreen)}; SCREEN_TABLE_POST void PianoScreen:: onEntry () {// Code exécuté lorsque l'écran est affiché} void PianoScreen:: onRedraw (draw_mode_t what) {// Code exécuté pour dessiner un écran} void PianoScreen:: onTouchStart (balise uint8_t) { // Code qui s'exécute lorsque l'utilisateur touche l'écran} void PianoScreen:: onIdle () {// Code des tâches exécutées lorsque l'écran est actif}

Parmi ceux-ci, la méthode la plus importante est onRedraw (). Il peint l’interface utilisateur en appelant des méthodes sur le CommandProcessor objet, qui envoie des commandes de dessin au panneau d'affichage. Le premier ensemble de commandes efface l'écran en noir (0x000000):

CommandProcessor cmd; cmd.cmd (CLEAR_COLOR_RGB (0x000000)).cmd (CLEAR (true, true, true));

Ensuite, le code dessine les boutons de sélection d’instrument en haut de l’écran:

#define GRID_ROWS 8 #define GRID_COLS 6 cmd.font (font_small).fgcolor (noir).tag (241).button (BTN_POS (1,1), BTN_SIZE (1,1), F ("Piano")

Il y a quelques choses à noter ici. Tout d'abord, la bibliothèque d'interface utilisateur vous permet de disposer l'interface sur une grille. Dans ce cas, je pose mon interface sur une grille 6x8. J'ai ensuite défini la police et la couleur, suivies d'une balise.

Chaque bouton d'interface est associé à une balise. Lorsqu'un utilisateur clique sur un bouton, le onTouchStart () La méthode est appelée avec cette balise pour que vous puissiez prendre les mesures appropriées pour ce bouton. La balise précède la commande du bouton, qui envoie les instructions pour positionner le bouton intitulé "Piano" sur la position (1,1), tout en occupant un espace de 1x1 sur la grille. Le code de disposition des touches du piano est similaire, mais se déroule en boucle.

Plus loin dans le code, vous trouverez la fonction qui répond au bouton avec la balise 241 enfoncée:

void PianoScreen:: onTouchStart (balise uint8_t) {switch (balise) {cas 241: highlight_instrument = balise; instrument = PIANO; Pause; …} onRefresh (); }

Lorsque l'utilisateur appuie sur un bouton, le code modifie certaines variables pour que l'instrument soit configuré. PIANO puis appelle onRefresh () pour mettre à jour l'écran avec le nouveau bouton en surbrillance. La mise en évidence est faite par le highlightCallback () fonction, qui pendant onRefresh () est appelé pour chaque bouton afin de vous permettre de modifier les couleurs des boutons en fonction de leurs balises et de leur état en surbrillance.

Le code pour jouer des sons est un peu différent:

void PianoScreen:: onTouchStart (balise uint8_t) {switch (balise) {… défaut: // Code permettant de définir les couleurs des voyants … if (instrument == HIHAT) {// Cas particulier pour les notes de kit de batterie} else { // Son de la note sound.play (instrument, NOTE_C3 + tag - 1); } highlight_note = tag; } onRefresh (); }

C'est la conclusion de cette rapide visite guidée. J'espère que cette introduction est suffisante pour vous permettre de commencer à concevoir vos propres interfaces graphiques pour vos projets Arduino!