Wikifab - Contributions de l’utilisateur [fr]

Contrôleur Midi avec des boutons d'arcade et un RPi Pico

2021-10-04T11:52:26Z

Madnerd :

{{Tuto Details
|Main_Picture=Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_photo7622a97a.jpg
|Main_Picture_annotation={"version":"2.4.6","objects":[{"type":"image","version":"2.4.6","originX":"left","originY":"top","left":-83,"top":1,"width":960,"height":540,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.84,"scaleY":0.84,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://wikifab.org/images/e/e1/Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_photo7622a97a.jpg","filters":[]}],"height":449.5774647887324,"width":600}
|Description=<translate>Utiliser des boutons de borne d'arcade pour faire un contrôleur Midi
(Traduction du tutoriel d'Adafruit : Raspberry Pi Pico and Led Arcade Button Midi Controller des Ruiz Brothers)</translate>
|Area=Art, Electronics, Music and Sound
|Type=Création
|Difficulty=Hard
|Duration=3
|Duration-type=day(s)
|Cost=85
|Currency=EUR (€)
|Tags=MIDI, Midi Fighter, Raspberry Pi, Circuit Python, Pico, Adafruit
}}
{{Introduction
|Introduction=<translate>''Dans ce tutoriel, nous allons principalement traduire en français, les instructions des Ruiz Brothers du site Adafruit.''

''Nous y apporterons des notes sur''

*''⚠️les difficultés rencontrés''
*''🛒🇫🇷 les liens pour acheter les composants en France.''
*''🔧ainsi que les modifications apportés au 🐍code et au design.''

L'intégralité des ressources viennent du site d'Adafruit : https://learn.adafruit.com/raspberry-pi-pico-led-arcade-button-midi-controller-fighter et sont sous Licence [https://learn.adafruit.com/assets/100403 Creative Commons Attribution-ShareAlike]

 </translate>
}}
{{TutoVideo
|VideoType=Youtube
|VideoURLYoutube=https://www.youtube.com/watch?v=WMKVC1su4Bw
}}
{{Materials
|ExternalAttachmentsLinks={{ExternalAttachmentsLinks
|ExternalAttachmentsLinks=https://learn.adafruit.com/raspberry-pi-pico-led-arcade-button-midi-controller-fighter
}}
}}
{{Tuto Step
|Step_Title=<translate>Présentation</translate>
|Step_Content=<translate>= Un contrôleur MIDI DIY =
Fabriquer votre propre contrôleur midi avec Circuit Python!

Cet instrument Midi à la "Midi Fighter" a 16 boutons équipés de LED, un écran OLED (de 128x128 pixels) et un joystick.

Jouer de la batterie, du synthé ou n'importe quoi en utilisant la norme MIDI!

Toute l'électronique est logé dans un boitier enclipsable.

= Boutons et Leds =
Le Raspberry PI Pico a bien assez de GPIO pour connecter des boutons sur une grille de 4x4.

L'expandeur de GPIO / Driver de LED AW9525 permet de rajouter les 16 LED et les connectent au Raspberry Pi Pico à travers le protocole I2C.

Les LED s'allument quand les boutons sont appuyés, mais elles sont toutes contrôlable individuellement.
 

= Modifier les notes à la volée =
La spécificité de ce contrôleur Midi est de pouvoir changer les notes grâce à l'écran et au joystick.

Parfait pour créer ses propres kits et faire ses propres mélodies.
 

= Interface Intuitive =
L'écran OLDED affiche les 16 boutons, comme des cercles avec des nombres.

Ces nombres corresponds au notes MIDI assigné à chaque bouto.

Utiliser le joystick pour sélectionner un bouton et éditer la note midi.

Dans le mode édition, le bouton se met à clignoter, afin de savoir qu'il est actif.

Les autres boutons restent actif afin de comparer les notes.

= Une poignée pivotable =
La poignée est imprimé en une fois avec aucun support, elle marche aussi très bien comme support pour incliner légèrement l'instrument.
 </translate>
|Step_Picture_00=Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_loop-thumb-hq.mp4
|Step_Picture_01=Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_hero-1.jpg
|Step_Picture_02=Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_oled-demo-loop.mp4
|Step_Picture_03=Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_hero-oled-joystick.jpg
|Step_Picture_04=Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_hero-3.jpg
}}
{{Notes
|Notes=<translate>Tutoriel en anglais: https://learn.adafruit.com/raspberry-pi-pico-led-arcade-button-midi-controller-fighter/overview

Vidéo de présentation du projet détaillé par Blitz City DIY : https://www.youtube.com/watch?v=zm90guAoNeI

Vidéo de présentation du projet d'Adafruit: https://www.youtube.com/watch?v=WMKVC1su4Bw

 </translate>
}}
{{PageLang
|Language=fr
|SourceLanguage=none
|IsTranslation=0
}}
{{Tuto Status
|Complete=Draft
}}

Fichier:Contr leur Midi avec des boutons d arcade et un RPi Pico 3d printing hero-3.jpg

2021-10-04T11:47:33Z

Madnerd : Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_hero-3

Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_hero-3

Fichier:Contr leur Midi avec des boutons d arcade et un RPi Pico 3d printing hero-oled-joystick.jpg

2021-10-04T11:25:27Z

Madnerd : Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_hero-oled-joystick

Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_hero-oled-joystick

Fichier:Contr leur Midi avec des boutons d arcade et un RPi Pico 3d printing oled-demo-loop.mp4

2021-10-04T11:25:26Z

Madnerd : Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_oled-demo-loop

Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_oled-demo-loop

Contrôleur Midi avec des boutons d'arcade et un RPi Pico

2021-10-04T11:23:48Z

Madnerd :

Contrôleur Midi avec des boutons d'arcade et un RPi Pico

2021-10-04T11:22:30Z

Madnerd :

Fichier:Contr leur Midi avec des boutons d arcade et un RPi Pico 3d printing hero-1.jpg

2021-10-04T11:22:25Z

Madnerd : Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_hero-1

Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_hero-1

Fichier:Contr leur Midi avec des boutons d arcade et un RPi Pico 3d printing loop-thumb-hq.mp4

2021-10-04T11:21:48Z

Madnerd : Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_loop-thumb-hq

Contr_leur_Midi_avec_des_boutons_d_arcade_et_un_RPi_Pico_3d_printing_loop-thumb-hq

2019-04-21T11:43:29Z

Madnerd :

Brancher des périphériques USB sur un ESP8266

2019-04-21T11:42:09Z

Madnerd :

Brancher des périphériques USB sur un ESP8266

2019-04-21T11:41:24Z

Madnerd :

Fichier:Brancher des périphériques USB sur un ESP8266 3V3 only.png

2019-04-21T11:41:05Z

Madnerd : Brancher_des_périphériques_USB_sur_un_ESP8266_3V3_only

Brancher_des_périphériques_USB_sur_un_ESP8266_3V3_only

Fichier:Brancher des périphériques USB sur un ESP8266 usbhost mini def.png

2019-04-21T11:35:12Z

Madnerd : Brancher_des_périphériques_USB_sur_un_ESP8266_usbhost_mini_def

Brancher_des_périphériques_USB_sur_un_ESP8266_usbhost_mini_def

2019-03-30T20:03:51Z

Madnerd : Pavé_Numérique_MIDI_midikeypad_wiki

Pavé_Numérique_MIDI_midikeypad_wiki

Mini écran connecté

2019-03-30T20:01:37Z

Madnerd :

{{ {{tntn|Tuto Details}}
|Main_Picture=Mini_écran_connecté_tft_iftt_wiki.jpg
|Licences=Attribution (CC BY)
|Description=Nous allons voir comment afficher des messages depuis un serveur MQTT sur un écran TFT.
|Area=Electronics, House
|Type=Creation
|Difficulty=Medium
|Duration=1
|Duration-type=hour(s)
|Cost=7
|Currency=EUR (€)
|Tags=iftt, mqtt, esp8266, st7789, tft, adafruit.io, iot
|SourceLanguage=none
|Language=fr
|IsTranslation=0
}}
{{ {{tntn|Introduction}}
|Introduction=Précédemment, nous avons vu comment afficher une image sur un ST7789, un écran TFT à 3€. ( [[Afficher une image sur un écran ST7789]] )

Nous allons exploiter cette connaissance pour faire un mini écran connecté.

*Cet écran va afficher les messages reçus depuis un serveur MQTT
*Les messages peuvent contenir des caractères accentués
*La transmission sera chiffrés
*Afin d'éviter les attaques MITM (man in the middle), nous allons vérifier l'identité du serveur MQTT à l'aide de son certificat.

À partir de là nous pouvons même utiliser '''IFTT''' (ou '''tasker''') afin de transmettre des informations du '''web''' / de notre '''installation domotique''' ou de notre '''téléphone''' sur le serveur MQTT.

Afin de simplifier la partie MQTT, nous allons utiliser '''Adafruit IO''' qui permet d'avoir un '''serveur MQTT gratuitement'''.

{{Info|Vous pouvez bien évidemment utiliser votre propre serveur MQTT (la partie IFTT par contre ne marchera plus)}} 
}}
{{ {{tntn|Materials}}
|Step_Picture_00=Afficher_une_image_sur_un_écran_ST7789_tft.png
|Material=*ESP8266
*ST7789
*Câble Wrapping 30 AWG
|Tools=*Fer à souder
*Imprimante 3D
|Prerequisites={{ {{tntn|Prerequisites}}
|Prerequisites=Afficher une image sur un écran ST7789
}}
}}
{{ {{tntn|Separator}}}}
{{ {{tntn|Tuto Step}}
|Step_Title=Fabriquer l'écran connecté
|Step_Content=Suivez le tutoriel sur l'écran ST7789, avant toute chose,

En résumé,

*il faut installer la '''bibliothèque tft_espi'''
*Changer le fichier '''User_Setup.h''' directement dans la bibliothèque
*Reliez l'écran à l'esp8266

[[Afficher une image sur un écran ST7789]]

 
|Step_Picture_00=Afficher_une_image_sur_un_écran_ST7789_displayFinish.png
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Paramétrer Adafruit IO
|Step_Content=*Créer un compte sur Adafruit IO: https://io.adafruit.com/
*Cliquer sur '''Feeds'''
*Cliquer sur '''Actions''' / '''Create a New Feed'''
*Dans '''Name''' mettez '''notifications'''
|Step_Picture_00=Mini_écran_connecté_adafruit_io.png
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Paramétrer les identifiants
|Step_Content=Tout d'abord il nous faut '''récupérer le programme'''

*Télécharger le croquis ici : https://github.com/maditnerd/st7789_mqtt
*Il nous faut aussi la bibliothèque : '''Adafruit_MQTT'''

Cette bibliothèque va nous permettre de communiquer avec notre '''serveur MQTT'''.

Dans le programme, il y a un fichier '''arduino_secrets.h''', c'est ici que nous allons stocker nos identifiants pour le '''Wi-Fi''' et le '''serveur MQTT'''

Les identifiants sur Adafruit IO se trouvent en cliquant sur '''View AIO Key'''

*Dans '''HOME_SSID''' mettez le nom de votre réseau WI-FI
*Dans '''HOME_PASS''' mettez le mot de passe de votre réseau WI-FI
*Dans '''ADAFRUIT_MQTT_USERNAME''' mettez le '''Username''' d'adafruit IO
*Dans '''ADAFRUIT_MQTT_PASS''' mettez l''''Active Key''' d'adafruit IO

Téléverser le croquis pour tester si tout marche bien.

Normalement vous devriez arriver jusqu'à l'écran '''Notifications'''

{{Info|Vous pouvez vérifier sur le moniteur série (Baudrate : 115200) s'il y a un problème.}}

 
|Step_Picture_00=Mini_écran_connecté_arduino_secrets.png
|Step_Picture_01=Mini_écran_connecté_adafruit_io_key.png
|Step_Picture_02=Mini_écran_connecté_tft_wifi.jpg
|Step_Picture_03=Mini_écran_connecté_tft_io.jpg
|Step_Picture_04=Mini_écran_connecté_tft_notification.jpg
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Test depuis Adafruit IO
|Step_Content=Adafruit IO nous permet de créer une donnée qui sera affichée sur l'écran.

*Cliquer sur '''Feeds''' / '''Notifications'''
*Puis cliquer sur '''Add Data'''
*Écrivez un message
{{Info|Si un message est envoyé alors que l'écran n'est pas connecté, celui-ci sera ignoré. MQTT permet toutefois de garder en mémoire les messages avec la fonction Retain}}

 
|Step_Picture_00=Mini_écran_connecté_adafruit_io3.png
|Step_Picture_01=Mini_écran_connecté_tft_io_test.jpg
}}
{{ {{tntn|Tuto Step}}
|Step_Title=IFTTT - Afficher les notifications d'un téléphone
|Step_Content=IFTTT est un service qui permet d'automatiser des tâches, Adafruit IO est compatible avec celui-ci.

{{Info|Si vous voulez utiliser IFTTT avec votre propre serveur, il y a des webhooks qui permettent de faire cela.}}

Nous allons voir comment afficher les notifications qu'un smartphone sur notre écran.

{{Warning|Bien que ce soit amusant comme projet, n'oubliez pas que vous allez donner accès à vos notifications à deux services sur internet.
Même si les communications sont en théorie sécurisée, niveau vie privée c'est une très mauvaise idée.}}

*Créer un compte sur IFTTT
*Installer l'application android

'''if'''

*Sur l'interface web d'IFTTT, cliquer sur '''My Applets'''
*Cliquer sur '''New Applet'''
*Choisissez le service '''Android Device'''
*Choisissez '''Notification Received'''

'''then'''

*Choisissez '''Adafruit'''
*Choisissez '''Send data to Adafruit IO'''
*Dans '''Feed Name''' mettez '''notifications'''
*Dans '''Data to save''' choisisez '''AppName''' et Notification '''Title'''
{{Dont|L'ESP8266 va se déconnecter (puis se reconnecter) du serveur MQTT, si le message est trop long.}} Votre applet devrait ressembler à ceci.

Aller sur votre téléphone, lancer IFTTT et autoriser '''l'accès aux notifications'''. 
|Step_Picture_00=Mini_écran_connecté_ifttt.png
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Cacher vos identifiants dans le logiciel Arduino
|Step_Content=Nous avons utilisé le fichier '''arduino_secrets.h''' qui est dans notre croquis pour '''sauvegarder nos identifiants'''.

{{Warning|Il vaut mieux éviter de faire cela, car vous risquez de partager accidentellement vos mot de passe!}}

Une solution pour éviter ça et de créer une '''bibliothèque''' pour nos identifiants.

L'autre avantage c'est que nos identifiants seront '''accessibles pour tous nos croquis''' !

{{Info|1=C'est Andreas Spiesss qui a eu cette idée
https://www.youtube.com/watch?v=CAGQ8h8PKX4&t=347s}}

*Créer dans '''Documents/Arduino/libraries''' un dossier '''arduino_secrets'''
*Copier '''arduino_secrets.h''' dans ce dossier

Dans le croquis, changez l'include au début du code

<code>//#include "arduino_secrets.h"

include <arduino_secrets.h></code>
|Step_Picture_00=Mini_écran_connecté_arduino_secrets2.png
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Changer les images
|Step_Content=Si vous voulez changer les images affichées, elles sont sauvegardées dans '''bitmaps.h'''

Pour convertir vos images en code, suivez ce tutoriel

[[Afficher une image sur un écran ST7789]]

Les images en version vectorielle SVG et PNG sont disponibles dans le dossier '''images'''

Pour afficher une image, il faut juste utiliser cette commande:

<code>tft.pushImage(0,0,240,240,adafruit_io);</code>

Pour écrire du texte sur plusieurs lignes, positionnez le texte puis écrivez le

<code>tft.setCursor(0,50);</code>

<code>tft.println(data); //Print text</code>

Vous pouvez aussi écrire une seule ligne avec cette commande

<code>tft.drawString(HOME_SSID, 25, 20);</code>

 
|Step_Picture_00=Mini_écran_connecté_adafruit_io2.png
|Step_Picture_01=Mini_écran_connecté_notifications.png
|Step_Picture_02=Mini_écran_connecté_wifi.png
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Changer la police d'écriture
|Step_Content=Vous avez peut-être remarqué que la police d'écriture est incluse dans le croquis sous le nom '''arial12pt8b.h'''

Il se trouve que par défaut, il n'y a pas de police d'écriture avec les accents qui puissent être intégrés directement dans le code.

J'ai donc dû la générer à partir d'une police d'écriture ('''.ttf''').

Vous pouvez télécharger une police d'écriture (par ex: sur https://www.dafont.com/), et la convertir en code.

Pour cela il vous faut '''fontconvert''', le code source est disponible dans Adafruit_GFX mais vous pouvez trouver une version prêt à l'usage (pour Windows) dans la description de cette vidéo

https://www.youtube.com/watch?v=L8MmTISmwZ8

Pour générer la police d'écriture il vous suffit de taper cette commande:

<code>fontconvert arial.ttf 12 32 255 > arial12pt8b.h</code>

Pour changer la taille de la police, changer le premier chiffre (ici 12pt)

Le 8b signifie que la police utilise 8bytes et contient donc les caractères accentués (entre autres)
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Utiliser son propre serveur MQTT
|Step_Content={{Info|Le croquis est configuré pour un serveur qui utilise SSL pour chiffrer les communications.}}

En plus de changer les identifiants / le serveur / le port dans '''arduino_secrets.h''', il faut récupérer le certificat SSL de votre serveur.

Pour cela il vous faut openssl, vous pouvez le télécharger ici (Windows) : https://slproweb.com/products/Win32OpenSSL.html

Puis tapez cette commande (avec l'adresse de votre serveur mqtt)

<code>openssl s_client -showcerts -connect io.adafruit.com:8883</code>

Récupérer le dernier certificat affiché et copier le dans '''connection.h''' 
|Step_Picture_00=Mini_écran_connecté_ssl.png
|Step_Picture_01=Mini_écran_connecté_ssl2.png
}}
{{ {{tntn|Notes}}
|Notes=Voilà ce tutoriel est fini, j'espère que cela vous donnera des idées pour faire des applications sympas avec.

Évidemment dans l'idéal

*Il faudrait pouvoir '''paramétrer notre écran''' depuis une '''interface web'''
*Éviter d'utiliser des '''images''' de la '''taille de l'écran''' quand ce n'est pas nécessaire

Mais cela devrait vous donner un bon point de départ.

'''Suivez-moi sur Twitter''' si vous voulez être au courant des prochains tutoriels en avance : https://twitter.com/m4dnerd
}}
{{ {{tntn|Tuto Status}}
|Complete=Draft
}}