Wikifab - Contributions de l’utilisateur [fr]

Animatronic Interactif : Le Live

2022-02-03T16:03:12Z

Toni2Tech :

{{Tuto Details
|Main_Picture=Group-Hackathon_Animatronic_-_L_Art_et_la_Main_-_29_et_30_janvier_2022_M_chant_Minion.png
|Main_Picture_annotation={"version":"2.4.6","objects":[{"type":"image","version":"2.4.6","originX":"left","originY":"top","left":-1,"top":-2,"width":360,"height":450,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"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/0/02/Group-Hackathon_Animatronic_-_L_Art_et_la_Main_-_29_et_30_janvier_2022_M_chant_Minion.png","filters":[]}],"height":449.7142857142857,"width":600}
|Description=<translate>Suivi du prototypage d'un Animatronic Interactif. La figurine sera animée, pourra se déplacer et sera douée de parole ou d'une interface permettant de communiquer avec un humain.</translate>
|Area=Electronics, Robotics
|Type=Création
|Difficulty=Hard
|Duration=3
|Duration-type=day(s)
|Cost=0
|Currency=EUR (€)
|Tags=Robot, animatronic, jarvis, arduino, soudure, marionette, interactif, yeux, bouche, expression, capteur, moteur, python, Raspberry Pi
}}
{{Introduction
|Introduction=<translate>Des quatre coins de Rennes et de l'Hexagone, une équipe de Makers se réunit à l'occasion d'un Festival pour tenter la réalisation d'un personnage animé et interactif.

[https://photos.google.com/share/AF1QipOre6uD87uvmf3qormHtdylWjPjGnATCZjOeBe1Id2wZPSkXviN3VdGRjlEXAx--A/photo/AF1QipMPU_51DmvCkfE-j-vA39PtWCPRn70dujmcJ3fz?key=bG1sNTNvT2ZMSnE3SjM4RndTTERLR19YLXNwY1Vn Lien vers l'album Photos]

[https://meet.jit.si/hackathonartalamain Lien du stream vidéo]

Quelques contraintes propres au Hackathon : 2 jours (+une soirée), une dizaine de participants et une restitution ouverte au public le deuxième jour.

L'objet de cette page est de documenter en temps quasi réel les avancées du projet, afin de pouvoir en reproduire les étapes, voire, de les améliorer.

C'est parti !

 </translate>
}}
{{Materials}}
{{Tuto Step
|Step_Title=<translate>Jour 0, Jour 1 Jour 2 - Commencer à documenter</translate>
|Step_Content=<translate>'''Ce sera LA contrainte, pour que :'''

1) Tout les participants (et les visiteurs), sachent "où on en est ?"

2) A l'issue du projet : Bravo ! Tout est déjà documenté pour être remixé
{{Info|Conseil : Nommer un rapporteur par pôle pour faciliter la remontée d'informations auprès des facilitateurs...}}</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - Samedi Matin : Faire connaissance, trouver les affinités</translate>
|Step_Content=<translate>'''Un résumé de qui est qui et qui de fait quoi...''' 

*Ivan, Valentin et Tonino planchent sur les capteurs avec Ardunio et Rapi...
*Yo, Marc, Rémy, Pierre sur le chariot à roues du robot
*Tony et Stéphane sur la Documentation
*Marie, Chloé, Lucie sur les éléments textiles, un haut de forme et même un nœud papillon.
*La découpeuse laser permet de prototyper certaines pièces en carton ou en bois (Rémy, Chloé ou Stéphane)
*Olivier démonte des trucs pour récupérer des choses (engrenages, courroies)
*3 imprimantes 3D sont prêtes à démarrer (Marc et Tony)

'''Les Groupes que l'on à pus observer :''' 

*👘 Habillage de l'automate : Marie, Chloé, Lucie.
*⚙️ Structure de l'automate : Yo, Marc, Rémy, Pierre.
*😀 Animation de l'automate : Valentin, Yvan, Gaël (Pierre et Tony en aide).
*🎤 Reconnaissance vocale : Tonino (Tony en aide).
*🚗 Système de déplacement : Yo, Marc.
*📄 Documentation générale : Stéphane, Tony.</translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_IMG_20220129_103150.jpg
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - Samedi après-midi - Les défis</translate>
|Step_Content=<translate>'''Lister les Tâches, les Trier par Pôle:'''

💚 '''Ce qui fonctionne !'''

*Le chariot roule !
*L'œil bouge !
*La main droite bouge
*Les accessoires textiles sont en bonne voie

'''💙 Ce qui semble facile :'''

Faire rouler l'animatronic

'''💛 Ce qui mérite réflexion''' :

Calibrer les moteurs pas à pas pour les mouvements envisagés

Synchroniser mouvement et paroles de l'animatronic

'''💔 Ce qui ne semble pas facile''' :

Installer "Jarvis" sur un Raspberry Pi

'''❌ Ce qui ne sera pas fait''' (a priori...) :

*Permettre à l'animatronic "d'apprendre" de nouvelles choses
*Rendre aléatoires les "routines" d'expression de l'animatronic</translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_VID_20220129_162122.mp4
|Step_Picture_01=Animatronic_Interactif_-_Le_Live_avanceduhackathonJ1.png
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - 👘 Le robot prend corps !</translate>
|Step_Content=<translate>'''Processus :'''

'''Fichiers open-sources :''' [Photo des plans]

'''Ressources utilisées :'''

Machine : Machine à coudre

Technique : Patronage de pour le textile

'''''To Do :''' photos des proto / plans des habits''

 </translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - ⚙️ Structure de l'Animatronic</translate>
|Step_Content=<translate>'''Processus :'''

Le Chariot motorisé : comment il va pouvoir bouger ce petit bonhomme ? 

* La sécurité d'abord ! (Parce qu'il avance comme un âne ce diable !)
* Capteurs de proximité (infrarouge)
*Pare-choc "intelligent" pour arrêter le moteur en cas de rencontre avec un obstacle

La structure / La motorisation / L'alimentation / La sécurité / Détection des collision / Arrêt d'urgence

La structure tient : Le ventre de la bête / La tête / Les accessoires

📝 Bonne avancée mais difficile de donner des plans numériques

'''Fichiers open-sources :''' [Photo des plans]

'''Ressources utilisées :'''

Machine : Soudure à l'arc, Meuleuse

Technique : Soudure.

'''''To Do :''' photos des proto / plans des habits''

 </translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_IMG_20220129_175141.jpg
|Step_Picture_01=Animatronic_Interactif_-_Le_Live_IMG_20220129_105814.jpg
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - 😀 Animation : capteurs et réponses</translate>
|Step_Content=<translate>'''Quelques mots :'''

'''Processus :'''

*Action / Réaction : Qu'est-ce qui provoque quoi ?
*Capteur Passifs / Actifs : On a tout ce qu'il faut ?
*Remonter des infos (mais pas trop) : Quel support ? Quel format ?
*Déclencher une réaction (ou pas !!!!) : Commande et puissance...

{{Info|Conseil : Pour valider un montage, utiliser une breadboard avant de tout souder...}}📝 Beaucoup de difficulté au début mais, tout le monde à surmonté les problèmes

'''Fichiers open-sources :''' [Code arduino / branchements ?]

'''Ressources utilisées :'''

Machine : Ordinateurs

Logiciel : Arduino / bibliothèque : Max72XX, Servo ...

'''''To Do :''' Code à remettre / schéma de cablage''
 </translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_VID_20220129_162122.mp4
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - 🎤 Synthèse vocale ou Interface plus exotique ?</translate>
|Step_Content=<translate>'''1- L'IDEE INITIALE :''' Une reconnaissance vocale opérée par un rapsberry pi.

Les enfants poseraient leurs questions en lien avec l'environnement en français et le robot répondrait en français.

'''2 - PROBLEME TECHNIQUES :'''

*Des professionnels de la silicone vallée bosse à plein temps pour avoir des IA qui permettent de parler avec des machines en Language naturel et de passer le test de Turing. Je vous laisse imaginer la complexité de la tache.
*A la manière de Siri il est possible de faire reconnaitre de mots clefs et de demander à un algorithme d'associer ces mots clefs avec une intention. En fonction de l'intention reconnue une réponse est déclenchée. Il faut donc de toute manière avoir un set de questions et de réponses pré-conçue.
*Le moteur "speech to text" ou stt sur lequel se base "[https://openjarvis.com JARVIS]", snow boy, n'existe plus.
*L'autre stt gratuit et hors ligne pocketSphynx ne fonctionne qu'en anglais, et pas très bien.
*Même problème est la synthèse vocale, souvent en anglais.
*L'IOT et les APIs, c'est pas ma tasse de thé. Compliqué de faire fonctionner JARVIS (qui n'est pas maintenu depuis 3 ans) avec Google speech. Peut-être une histoire de ficher Json.
*Le bruit ambiant rend la compréhension des mots clefs super difficile.
*Le "parlé" enfant peut-être une source de complexité supérieur
*Pour atteindre une bonne efficacité il faut entrainer l'algorithme, ce qui n'est pas adapté lorsqu'il y a plusieurs interlocuteurs.

'''3 - CONCLUSION INTERMEDIAIRE ==> EXIT JARVIS ET LA RECONNAISSANCE VOCALE'''

'''4 - SOLUTION ALTERNATIVE :'''

Plus simple et plus consistant, remplacer de la reconnaisse vocale par de la reconnaissance optique.

'''Avantages :'''

*Plus consistant : la reconnaissance optique n'est pas dépendant du volume ambiant ou du contexte, surtout s'il intègre son propre système d'éclairage.
*Questions et réponses rédigé. Un peu à la manière d'un QR code, le décryptage d'une couleur ou d'un motif déclenche une réponse.
*Permet la manipulation d'objets. C'est pas COVID mais c'est rigolo.

'''Principes :''' Une caméra reconnais un code à deux couleurs. En fonction du code reconnu, déclenche la lecture d'un fichier MP3.

'''Matériel nécéssaire :'''

* Des carte en bois
* De la peinture
* Une raspberry pi 4
* Une pixy2 ==> https://pixycam.com/pixy2/
* Des enceintes

'''Voir en J2 (plus bas) pour le détail du fonctionnement.'''

 </translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_8B601492-BBCC-4E73-9432-2B799612EF68_copie.jpg
|Step_Picture_01=Animatronic_Interactif_-_Le_Live_IMG_20220130_154626.jpg
}}
{{Tuto Step
|Step_Title=<translate>Jour 1&2 - 🚗 Le robot dans sa mobilitée</translate>
|Step_Content=<translate>'''Processus :'''

'''Fichiers open-sources :''' [Schéma de câblage / y'a t'il un code ?]

'''Ressources utilisées :'''

Machine : Ordinateur / Arduino / Électronique

Technique : Logiciel de reconnaissance vocal Jarvis

'''Technique :''' Montage électronique / Codage

''To Do : ??''</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 1&2: 📄 Documenter pour Restituer</translate>
|Step_Content=<translate>''To Do :'' La visio à documenter / la grille des avancées du projet. {{Info|Conseil 1: Le A3 ou le PowerPoint, ben c'est pas si mal !

Conseil 2 : Un bon pitch est un Pitch court (2 à 4min max)

Conseil 3 : Un rapporteur ou plusieurs intervenants ?

Conseil 4 : Penser à ceux qui "n'y connaissent rien..."}} </translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 1&2 : Tester... Encore et encore</translate>
|Step_Content=<translate>'''... Jusqu'à ce que ça marche...''' Ou qu'on abandonne (à un moment, il faut)</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2, le matin : Choisir, c'est renoncer</translate>
|Step_Content=<translate>... Heu... Et si en fait, on ne faisait que ce qui marche ? (ou pas...)

'''Les groupes sur le jour 2 :'''

To do : Y-a t'il des changement ?

 

*👘 Habillage de l'automate : Marie, Chloé, Lucie.
*⚙️ Structure de l'automate : Yo, Marc, Rémy, Pierre (Stéphane, Chloé en aide).
*😀 Animation de l'automate : Valentin, Yvan.
*🎤 Reconnaissance vocale : Tonino, Tony (Stéphane et Chloé en aide).
*🚗 Système de déplacement : Yo, Marc.
*📄 Documentation générale : Stéphane, Tony.

 </translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - Combiner les fonctions</translate>
|Step_Content=<translate>'''Tout ça, faut que ça marche ensemble...'''

 

*Aller voir les copains
*Piquer des idées
*Mutualiser du matériel
*Pensez à plusieurs pôles ?
*Dire les problèmes, pas les planquer...</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - 👘 Le robot prend corps !</translate>
|Step_Content=<translate>texte</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - ⚙️ Structure de l'Animatronic</translate>
|Step_Content=<translate>texte</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - 😀 Animation : capteurs et réponses</translate>
|Step_Content=<translate>texte</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - 🎤 Reconnaissance optique (anciennement vocale)</translate>
|Step_Content=<translate>Comment ça marche !

'''1- LA BOITE'''

Construction d'une boite à la découpeuse laser. Sur cette boite la caméra pixy2 et quatre led blanche pour éclairer l'intérieur. La boite comporte une fente pour y insérer les cartes de couleurs.

'''Ressources :'''

....> Plan de la boite à découper à la laser

....> Plan des cartes à découper à la laser

'''2- LES CARTES'''

Les cartes doivent être découper en trois section puis peintes :

* Une qui reste blanche c'est la partie que l'on garde en main, sur laquelle on peut écrire à quoi sers la carte
* La partie du milieu à peindre d'une couleurs
* La partie supérieure à peindre également
* Un trait noir doit-être tracer entre les deux couleurs pour permettre à la caméra une reconnaissance aisée.

Chaque combinaison de couleur est unique et déclenche une réponse unique.

'''3- LA CAMERA'''

La caméra est une caméra [https://pixycam.com/pixy2/ pixy2], conçus pour la reconnaissance de couleurs. Elle peut stocker en mémoire la reconnaissance de 7 couleurs.

La caméra est "entraînée" à reconnaitre les couleurs sur un ordinateur grâce au logiciel pixymon.

Voici le tutorial pour entrainer la caméra à reconnaitre les couleurs : https://docs.pixycam.com/wiki/doku.php?id=wiki:v2:teach_pixy_an_object_2

 

# Positionner la couleur à reconnaitre, bien éclairée face à la caméra.
# A l'aide de PixyMon sélectionner la couleurs à reconnaitre sur l'image renvoyé par le logiciel (PC, MAC, et LINUX)
# La caméra garde cela en mémoire, même une fois débrancher.
# Faites de même pour toute les couleurs
# Utiliser les paramètres du logiciel pour paramétrer la tolérance de reconnaissance et les paramètre de la caméra (balance des blancs etc.)

'''4- LA Raspberry Pi ET LE CODE PYTHON'''

# La pixy cam est branchée en USB
# Les led sont branché sur la broche 3.3V d'un coté et GND de l'autre
# Tuto pour installer la PixyCam2 sur la Raspberry Pi :https://docs.pixycam.com/wiki/doku.php?id=wiki:v2:hooking_up_pixy_to_a_raspberry_pi
# Tuto pour utiliser le module en python "Build SWIG MODULE":https://docs.pixycam.com/wiki/doku.php?id=wiki:v2:building_libpixyusb_as_a_python_module_on_linux&s[]=python&s[]=api
# Copier le code que l'on fournis dans le répertoire ==>
# Lancer le programme python grâce à la ligne de commande suivante
# Chaque carte déclenche la lecture d'un fichier audio situé dans le dossier "Musique". La carte rouge-rouge déclenche le 1. Etc. Pour changer la piste lu, écraser le fichier de votre choix par une bande audio de votre choix. Ce qui compte c'est qu'elle ai le même nom. Penser à changer dans le code python la valeur de la variable "sound_time[piste modifié]" pour qu'elle corresponde au temps de la nouvelle piste, en seconde.

''Pour info, voici la matrice des cartes :''
 
{| class="wikitable"
|+
!
!Rouge(1)
!Vert(1)
!Bleu(1)
|-
|Rouge(2)
|1
|4
|7
|-
|Vert(2)
|2
|5
|8
|-
|Bleu(2)
|3
|6
|9
|}

'''5- Lancer le programme au démarrage de la Raspberry Pi'''

* Lancer la commande "sudo crontab -e"
* Insérer la ligne "@reboot python3 ....Chemin absolu vers le code python...."
* Sauvegarder

'''Fichiers open-sources :''' [Programme reconnaissance couleur / Plan des cartes et de la boite de détection / Schéma de câblage pour le détecteur de couleur]

'''''To Do :''' ajouter les sources : Programme Python de la reconnaisance vocal / Programme Python de la reconnaisance des couleurs / Plans de la boite et des cartes colorées.''</translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_2022-02-03_15.24.21.gif
|Step_Picture_01=Animatronic_Interactif_-_Le_Live_2022-02-03_15.37.05.gif
|Step_Picture_02=Animatronic_Interactif_-_Le_Live_2022-02-03_15.37.08.gif
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - Restituer : Le bilan</translate>
|Step_Content=<translate>*Si rien ne marche, Peaufiner le Pitch
*Est-ce qu'on ne peut pas "tricher" pour la présentation ?
*Débusquer "le diable dans les détails"
*Faire simple...
*Si ça marche pas, c'est pas grave, c'est l'intention qui compte...</translate>
}}
{{Tuto Step
|Step_Title=<translate>Le début de la Fin</translate>
|Step_Content=<translate>Arrivé ici:

 

*L'animatronic doit commencer à fonctionner un peu tout seul...
*Certains n'ont plus rien à faire, sinon à regarder...
*Ca serait bien de lui donner un nom ? non ?

''... Hey ! Est-ce que tout est bien documenté ? Y a des photos ? des vidéos ? Du son ?''

{{Info|Conseil : Si ça sert plus, alors c'est peut-être le moment de ranger...}}</translate>
}}
{{Tuto Step
|Step_Title=<translate>Epilogue...</translate>
|Step_Content=<translate>* Comment ça s'est passé ?
* La météo de l'humeur de chacun
* Les réussites,
* Les échecs,
* Les frustrations
* Ce qu'on a appris / confirmé / maitrisé.

'''C'est la Fin !'''</translate>
}}
{{Notes
|Notes=<translate>Cahier des charges et Liste des ressources disponibles réalisé en amont du Hackathon :

https://docs.google.com/document/d/1KuY6qdZxfLTBXZP8aNcI_dwIocBYwu62WJG46BG2STs/edit?usp=sharing_eil_m&ts=61e14799</translate>
}}
{{PageLang
|SourceLanguage=none
|IsTranslation=0
|Language=fr
}}
{{Tuto Status
|Complete=Published
}}

Fichier:Animatronic Interactif - Le Live 2022-02-03 15.37.05.gif

2022-02-03T15:48:13Z

Toni2Tech : Animatronic_Interactif_-_Le_Live_2022-02-03_15.37.05

Animatronic_Interactif_-_Le_Live_2022-02-03_15.37.05

Fichier:Animatronic Interactif - Le Live 2022-02-03 15.37.08.gif

2022-02-03T15:47:54Z

Toni2Tech : Animatronic_Interactif_-_Le_Live_2022-02-03_15.37.08

Animatronic_Interactif_-_Le_Live_2022-02-03_15.37.08

Fichier:Animatronic Interactif - Le Live 2022-02-03 15.24.21.gif

2022-02-03T15:32:42Z

Toni2Tech : Animatronic_Interactif_-_Le_Live_2022-02-03_15.24.21

Animatronic_Interactif_-_Le_Live_2022-02-03_15.24.21

Animatronic Interactif : Le Live

2022-02-03T14:18:18Z

Toni2Tech :

{{Tuto Details
|Main_Picture=Group-Hackathon_Animatronic_-_L_Art_et_la_Main_-_29_et_30_janvier_2022_M_chant_Minion.png
|Main_Picture_annotation={"version":"2.4.6","objects":[{"type":"image","version":"2.4.6","originX":"left","originY":"top","left":-1,"top":-2,"width":360,"height":450,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"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/0/02/Group-Hackathon_Animatronic_-_L_Art_et_la_Main_-_29_et_30_janvier_2022_M_chant_Minion.png","filters":[]}],"height":449.7142857142857,"width":600}
|Description=<translate>Suivi du prototypage d'un Animatronic Interactif. La figurine sera animée, pourra se déplacer et sera douée de parole ou d'une interface permettant de communiquer avec un humain.</translate>
|Area=Electronics, Robotics
|Type=Création
|Difficulty=Hard
|Duration=3
|Duration-type=day(s)
|Cost=0
|Currency=EUR (€)
|Tags=Robot, animatronic, jarvis, arduino, soudure, marionette, interactif, yeux, bouche, expression, capteur, moteur, python, Raspberry Pi
}}
{{Introduction
|Introduction=<translate>Des quatre coins de Rennes et de l'Hexagone, une équipe de Makers se réunit à l'occasion d'un Festival pour tenter la réalisation d'un personnage animé et interactif.

[https://photos.google.com/share/AF1QipOre6uD87uvmf3qormHtdylWjPjGnATCZjOeBe1Id2wZPSkXviN3VdGRjlEXAx--A/photo/AF1QipMPU_51DmvCkfE-j-vA39PtWCPRn70dujmcJ3fz?key=bG1sNTNvT2ZMSnE3SjM4RndTTERLR19YLXNwY1Vn Lien vers l'album Photos]

[https://meet.jit.si/hackathonartalamain Lien du stream vidéo]

Quelques contraintes propres au Hackathon : 2 jours (+une soirée), une dizaine de participants et une restitution ouverte au public le deuxième jour.

L'objet de cette page est de documenter en temps quasi réel les avancées du projet, afin de pouvoir en reproduire les étapes, voire, de les améliorer.

C'est parti !

 </translate>
}}
{{Materials}}
{{Tuto Step
|Step_Title=<translate>Jour 0, Jour 1 Jour 2 - Commencer à documenter</translate>
|Step_Content=<translate>'''Ce sera LA contrainte, pour que :'''

1) Tout les participants (et les visiteurs), sachent "où on en est ?"

2) A l'issue du projet : Bravo ! Tout est déjà documenté pour être remixé
{{Info|Conseil : Nommer un rapporteur par pôle pour faciliter la remontée d'informations auprès des facilitateurs...}}</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - Samedi Matin : Faire connaissance, trouver les affinités</translate>
|Step_Content=<translate>'''Un résumé de qui est qui et qui de fait quoi...''' 

*Ivan, Valentin et Tonino planchent sur les capteurs avec Ardunio et Rapi...
*Yo, Marc, Rémy, Pierre sur le chariot à roues du robot
*Tony et Stéphane sur la Documentation
*Marie, Chloé, Lucie sur les éléments textiles, un haut de forme et même un nœud papillon.
*La découpeuse laser permet de prototyper certaines pièces en carton ou en bois (Rémy, Chloé ou Stéphane)
*Olivier démonte des trucs pour récupérer des choses (engrenages, courroies)
*3 imprimantes 3D sont prêtes à démarrer (Marc et Tony)

'''Les Groupes que l'on à pus observer :''' 

*👘 Habillage de l'automate : Marie, Chloé, Lucie.
*⚙️ Structure de l'automate : Yo, Marc, Rémy, Pierre.
*😀 Animation de l'automate : Valentin, Yvan, Gaël (Pierre et Tony en aide).
*🎤 Reconnaissance vocale : Tonino (Tony en aide).
*🚗 Système de déplacement : Yo, Marc.
*📄 Documentation générale : Stéphane, Tony.</translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_IMG_20220129_103150.jpg
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - Samedi après-midi - Les défis</translate>
|Step_Content=<translate>'''Lister les Tâches, les Trier par Pôle:'''

💚 '''Ce qui fonctionne !'''

*Le chariot roule !
*L'œil bouge !
*La main droite bouge
*Les accessoires textiles sont en bonne voie

'''💙 Ce qui semble facile :'''

Faire rouler l'animatronic

'''💛 Ce qui mérite réflexion''' :

Calibrer les moteurs pas à pas pour les mouvements envisagés

Synchroniser mouvement et paroles de l'animatronic

'''💔 Ce qui ne semble pas facile''' :

Installer "Jarvis" sur un Raspberry Pi

'''❌ Ce qui ne sera pas fait''' (a priori...) :

*Permettre à l'animatronic "d'apprendre" de nouvelles choses
*Rendre aléatoires les "routines" d'expression de l'animatronic</translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_VID_20220129_162122.mp4
|Step_Picture_01=Animatronic_Interactif_-_Le_Live_avanceduhackathonJ1.png
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - 👘 Le robot prend corps !</translate>
|Step_Content=<translate>'''Processus :'''

'''Fichiers open-sources :''' [Photo des plans]

'''Ressources utilisées :'''

Machine : Machine à coudre

Technique : Patronage de pour le textile

'''''To Do :''' photos des proto / plans des habits''

 </translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - ⚙️ Structure de l'Animatronic</translate>
|Step_Content=<translate>'''Processus :'''

Le Chariot motorisé : comment il va pouvoir bouger ce petit bonhomme ? 

* La sécurité d'abord ! (Parce qu'il avance comme un âne ce diable !)
* Capteurs de proximité (infrarouge)
*Pare-choc "intelligent" pour arrêter le moteur en cas de rencontre avec un obstacle

La structure / La motorisation / L'alimentation / La sécurité / Détection des collision / Arrêt d'urgence

La structure tient : Le ventre de la bête / La tête / Les accessoires

📝 Bonne avancée mais difficile de donner des plans numériques

'''Fichiers open-sources :''' [Photo des plans]

'''Ressources utilisées :'''

Machine : Soudure à l'arc, Meuleuse

Technique : Soudure.

'''''To Do :''' photos des proto / plans des habits''

 </translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_IMG_20220129_175141.jpg
|Step_Picture_01=Animatronic_Interactif_-_Le_Live_IMG_20220129_105814.jpg
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - 😀 Animation : capteurs et réponses</translate>
|Step_Content=<translate>'''Quelques mots :'''

'''Processus :'''

*Action / Réaction : Qu'est-ce qui provoque quoi ?
*Capteur Passifs / Actifs : On a tout ce qu'il faut ?
*Remonter des infos (mais pas trop) : Quel support ? Quel format ?
*Déclencher une réaction (ou pas !!!!) : Commande et puissance...

{{Info|Conseil : Pour valider un montage, utiliser une breadboard avant de tout souder...}}📝 Beaucoup de difficulté au début mais, tout le monde à surmonté les problèmes

'''Fichiers open-sources :''' [Code arduino / branchements ?]

'''Ressources utilisées :'''

Machine : Ordinateurs

Logiciel : Arduino / bibliothèque : Max72XX, Servo ...

'''''To Do :''' Code à remettre / schéma de cablage''
 </translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_VID_20220129_162122.mp4
}}
{{Tuto Step
|Step_Title=<translate>Jour 1 - 🎤 Synthèse vocale ou Interface plus exotique ?</translate>
|Step_Content=<translate>'''1- L'IDEE INITIALE :''' Une reconnaissance vocale opérée par un rapsberry pi.

Les enfants poseraient leurs questions en lien avec l'environnement en français et le robot répondrait en français.

'''2 - PROBLEME TECHNIQUES :'''

*Des professionnels de la silicone vallée bosse à plein temps pour avoir des IA qui permettent de parler avec des machines en Language naturel et de passer le test de Turing. Je vous laisse imaginer la complexité de la tache.
*A la manière de Siri il est possible de faire reconnaitre de mots clefs et de demander à un algorithme d'associer ces mots clefs avec une intention. En fonction de l'intention reconnue une réponse est déclenchée. Il faut donc de toute manière avoir un set de questions et de réponses pré-conçue.
*Le moteur "speech to text" ou stt sur lequel se base "[https://openjarvis.com JARVIS]", snow boy, n'existe plus.
*L'autre stt gratuit et hors ligne pocketSphynx ne fonctionne qu'en anglais, et pas très bien.
*Même problème est la synthèse vocale, souvent en anglais.
*L'IOT et les APIs, c'est pas ma tasse de thé. Compliqué de faire fonctionner JARVIS (qui n'est pas maintenu depuis 3 ans) avec Google speech. Peut-être une histoire de ficher Json.
*Le bruit ambiant rend la compréhension des mots clefs super difficile.
*Le "parlé" enfant peut-être une source de complexité supérieur
*Pour atteindre une bonne efficacité il faut entrainer l'algorithme, ce qui n'est pas adapté lorsqu'il y a plusieurs interlocuteurs.

'''3 - CONCLUSION INTERMEDIAIRE ==> EXIT JARVIS ET LA RECONNAISSANCE VOCALE'''

'''4 - SOLUTION ALTERNATIVE :'''

Plus simple et plus consistant, remplacer de la reconnaisse vocale par de la reconnaissance optique.

'''Avantages :'''

*Plus consistant : la reconnaissance optique n'est pas dépendant du volume ambiant ou du contexte, surtout s'il intègre son propre système d'éclairage.
*Questions et réponses rédigé. Un peu à la manière d'un QR code, le décryptage d'une couleur ou d'un motif déclenche une réponse.
*Permet la manipulation d'objets. C'est pas COVID mais c'est rigolo.

'''Principes :''' Une caméra reconnais un code à deux couleurs. En fonction du code reconnu, déclenche la lecture d'un fichier MP3.

'''Matériel nécéssaire :'''

* Des carte en bois
* De la peinture
* Une raspberry pi 4
* Une pixy2 ==> https://pixycam.com/pixy2/
* Des enceintes

'''Voir en J2 (plus bas) pour le détail du fonctionnement.'''

 </translate>
|Step_Picture_00=Animatronic_Interactif_-_Le_Live_8B601492-BBCC-4E73-9432-2B799612EF68_copie.jpg
|Step_Picture_01=Animatronic_Interactif_-_Le_Live_IMG_20220130_154626.jpg
}}
{{Tuto Step
|Step_Title=<translate>Jour 1&2 - 🚗 Le robot dans sa mobilitée</translate>
|Step_Content=<translate>'''Processus :'''

'''Fichiers open-sources :''' [Schéma de câblage / y'a t'il un code ?]

'''Ressources utilisées :'''

Machine : Ordinateur / Arduino / Électronique

Technique : Logiciel de reconnaissance vocal Jarvis

'''Technique :''' Montage électronique / Codage

''To Do : ??''</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 1&2: 📄 Documenter pour Restituer</translate>
|Step_Content=<translate>''To Do :'' La visio à documenter / la grille des avancées du projet. {{Info|Conseil 1: Le A3 ou le PowerPoint, ben c'est pas si mal !

Conseil 2 : Un bon pitch est un Pitch court (2 à 4min max)

Conseil 3 : Un rapporteur ou plusieurs intervenants ?

Conseil 4 : Penser à ceux qui "n'y connaissent rien..."}} </translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 1&2 : Tester... Encore et encore</translate>
|Step_Content=<translate>'''... Jusqu'à ce que ça marche...''' Ou qu'on abandonne (à un moment, il faut)</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2, le matin : Choisir, c'est renoncer</translate>
|Step_Content=<translate>... Heu... Et si en fait, on ne faisait que ce qui marche ? (ou pas...)

'''Les groupes sur le jour 2 :'''

To do : Y-a t'il des changement ?

 

*👘 Habillage de l'automate : Marie, Chloé, Lucie.
*⚙️ Structure de l'automate : Yo, Marc, Rémy, Pierre (Stéphane, Chloé en aide).
*😀 Animation de l'automate : Valentin, Yvan.
*🎤 Reconnaissance vocale : Tonino, Tony (Stéphane et Chloé en aide).
*🚗 Système de déplacement : Yo, Marc.
*📄 Documentation générale : Stéphane, Tony.

 </translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - Combiner les fonctions</translate>
|Step_Content=<translate>'''Tout ça, faut que ça marche ensemble...'''

 

*Aller voir les copains
*Piquer des idées
*Mutualiser du matériel
*Pensez à plusieurs pôles ?
*Dire les problèmes, pas les planquer...</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - 👘 Le robot prend corps !</translate>
|Step_Content=<translate>texte</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - ⚙️ Structure de l'Animatronic</translate>
|Step_Content=<translate>texte</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - 😀 Animation : capteurs et réponses</translate>
|Step_Content=<translate>texte</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - 🎤 Synthèse vocale ou Interface plus exotique ?</translate>
|Step_Content=<translate>'''Fichiers open-sources :''' [Programme reconnaissance couleur / Plan des cartes et de la boite de détection / Schéma de câblage pour le détecteur de couleur]

'''''To Do :''' ajouter les sources : Programme Python de la reconnaisance vocal / Programme Python de la reconnaisance des couleurs / Plans de la boite et des cartes colorées.''</translate>
}}
{{Tuto Step
|Step_Title=<translate>Jour 2 - Restituer : Le bilan</translate>
|Step_Content=<translate>*Si rien ne marche, Peaufiner le Pitch
*Est-ce qu'on ne peut pas "tricher" pour la présentation ?
*Débusquer "le diable dans les détails"
*Faire simple...
*Si ça marche pas, c'est pas grave, c'est l'intention qui compte...</translate>
}}
{{Tuto Step
|Step_Title=<translate>Le début de la Fin</translate>
|Step_Content=<translate>Arrivé ici:

 

*L'animatronic doit commencer à fonctionner un peu tout seul...
*Certains n'ont plus rien à faire, sinon à regarder...
*Ca serait bien de lui donner un nom ? non ?

''... Hey ! Est-ce que tout est bien documenté ? Y a des photos ? des vidéos ? Du son ?''

{{Info|Conseil : Si ça sert plus, alors c'est peut-être le moment de ranger...}}</translate>
}}
{{Tuto Step
|Step_Title=<translate>Epilogue...</translate>
|Step_Content=<translate>* Comment ça s'est passé ?
* La météo de l'humeur de chacun
* Les réussites,
* Les échecs,
* Les frustrations
* Ce qu'on a appris / confirmé / maitrisé.

'''C'est la Fin !'''</translate>
}}
{{Notes
|Notes=<translate>Cahier des charges et Liste des ressources disponibles réalisé en amont du Hackathon :

https://docs.google.com/document/d/1KuY6qdZxfLTBXZP8aNcI_dwIocBYwu62WJG46BG2STs/edit?usp=sharing_eil_m&ts=61e14799</translate>
}}
{{PageLang
|Language=fr
|SourceLanguage=none
|IsTranslation=0
}}
{{Tuto Status
|Complete=Published
}}

Fichier:Animatronic Interactif - Le Live IMG 20220130 154626.jpg

2022-02-03T14:15:27Z

Toni2Tech : Animatronic_Interactif_-_Le_Live_IMG_20220130_154626

Animatronic_Interactif_-_Le_Live_IMG_20220130_154626

Fichier:Animatronic Interactif - Le Live 8B601492-BBCC-4E73-9432-2B799612EF68 copie.jpg

2022-02-03T14:15:24Z

Toni2Tech : Animatronic_Interactif_-_Le_Live_8B601492-BBCC-4E73-9432-2B799612EF68_copie

Animatronic_Interactif_-_Le_Live_8B601492-BBCC-4E73-9432-2B799612EF68_copie

Cadre photo Neopixel pour pixel art

2021-12-16T14:46:11Z

Toni2Tech :

{{Tuto Details
|Main_Picture=Cadre_photo_pour_pixel_art_IMG_3072.jpg
|Description=<translate>Il s'agit d'un petit cadre photo, tout à fait ordinaire vu de l'extérieur, mais abritant en son sein une matrice de LED capable d'afficher de petits dessins en Pixel art.

Le cadre est recouvert d'une feuille de papier, ce qui lui donne un rendu organique et "naturel" à la manière du e-paper.

Très simple à utiliser et esthétique, cet objet est également adapté à un usage en atelier, ou les participants pourront dans un premier temps apprendre à faire de petite oeuvre en pixel art sur GIMP puis les afficher chez eux ou sur leur bureau.</translate>
|Area=Art, Decoration, Electronics, House, Play and Hobbies
|Type=Création
|Difficulty=Easy
|Duration=2
|Duration-type=hour(s)
|Cost=10
|Currency=EUR (€)
|Tags=LED, NeoPixels, Pixel Art, Cadre photo, Matrice
}}
{{Introduction
|Introduction=<translate>INFOS : Pour ce tutoriel, chaque étape est illustrée par un GIF animé.

Matériel requis :

*Arduino nano (<5€)
*Matrice de LEDs addressables, type NeoPixel (ws2812b), 8x8 (5€) ou 16x16 (15€)
*Cadre Leroy Merlin (1€)

Outils :

*Pistolet à colle
*Perceuse
*Cutter</translate>
}}
{{Materials
|Prerequisites={{Prerequisites}}
|Tuto_Attachments={{Tuto Attachments
|Attachment=Cadre_photo_Neopixel_pour_pixel_art_test_de_la_matrice_arduino.ino
}}{{Tuto Attachments}}
|ExternalAttachmentsLinks={{ExternalAttachmentsLinks
|ExternalAttachmentsLinks=https://drive.google.com/drive/folders/1qSXMHZJhxBvjEIZN5BhCXURWi191kWFJ?usp=sharing
}}{{ExternalAttachmentsLinks}}
}}
{{Tuto Step
|Step_Title=<translate>Raccorder la matrice de LEDs à l'arduino</translate>
|Step_Content=<translate>La première chose à faire est de réaliser le raccordement entre la matrice et l'arduino nano (ou uno/leonardo) pour qu'il puisse communiquer.

Il existe plusieurs modèles de matrice de LED adressage (ws2812b). De manière générale elles sont structurées de la même manière :

*Un câble qui achemine les informations (Data In and Data Out)
*Un câble qui achemine le courant (VCC ou 5V)
*Un câble qui ferme le circuit en ramendant à la terre (Ground ou GND)

 {{Info|• Le câble VCC est à raccorder au 5V de l'arduino
• Le câble GND est à raccorder au Ground de l'arduino
• Le câble DI doit être raccordé à la PIN 6 (pour fonctionner avec les codes, proposez dans ce tutoriel).
• Le câble DO sert à raccorder une matrice avec une autre matrice. Dans se cas le DO de la matrice 1 doit être connecté avec le DI de la matrice 2.}}</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_Capture_d_e_cran_2021-12-15_a_15.29.50.png
}}
{{Tuto Step
|Step_Title=<translate>Intégrer la matrice au cadre photo</translate>
|Step_Content=<translate>L'idée est d'afficher dans son salon ou dans son bureau, ou dans les couloirs de l'école, l'entreprise ou ailleurs ses oeuvres en pixel art.

Cette étape sert à enjoliver l'objet. Dans mon exemple j'intègre la matrice dans [https://www.leroymerlin.fr/produits/decoration-eclairage/decoration-murale/cadre-photo/cadre-photo-en-bois/cadre-brut-l-10-x-h-15-cm-bois-naturel-71670256.html un cadre 10x15 acheter chez Leroy Merlin].

Pour ajouter un effet E-Paper, j'ai ajouté une feuille de papier devant la vitre, côté regarder.

 

# Ouvrir le cadre et utiliser le dos du cadre comme patron pour découper un rectangle de papier à la bonne taille (un peu épais, du papier à dessin 80g c'est pas mal)
# '''Facultatif :''' Téléverser le code "test_de_la_matrice_arduino.ino" dans l'arduino nano (instruction à l'étape 6) pour avoir un aperçu du résultat.
# À l'aide d'un marqueur, marquer le dos du cadre pour savoir ou percer pour laisser passer les câbles et où coller la matrice
# Percer avec une perceuse, nettoyer avec un cutter
# Pisto-coller la matrice. Le but est de coller la matrice de LED tout en la surélevant un petit peu pour laisser de la place aux câbles.
# Disposer le rectangle de papier devant la vitre (côté regarder) puis assembler les deux parties du cadre.
# Fermer le tout en repliant les petits ergots.</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_1.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_2.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_3.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_4.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_5.gif
|Step_Picture_05=Cadre_photo_pour_pixel_art_6.gif
}}
{{Tuto Step
|Step_Title=<translate>Dessiner un pixel art de 8x8 pixels</translate>
|Step_Content=<translate>En atelier ou pour les fans de retro gaming : dessiner ses propres oeuvres.

 

#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Créer une nouvelle image (ctrl + N) de 8 pixels par 8 pixels
#Zoomer pour que le canva occupe tout l'écran
#Sélectionner l'outil crayon (N)
#Modifier la taille du crayon à 1 pixel et la dureté à 100%
#Changer les couleurs et dessiner pixel par pixel.
#Exporter : Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'images ou de dessins, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}} {{Info|Pour un meilleur rendu, restreindre le nombre de couleurs utilisées et utiliser des couleurs qui contrastent bien.}}</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_PIXEL_ART_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_PIXEL_ART_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_PIXEL_ART_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>ALTERNATIVE : Redimensionner une image en 8x8 pixels</translate>
|Step_Content=<translate>#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Pour cette exemple j'ai téléchargé une image depuis la banque d'image libre de droit [https://pixabay.com pixabay.com]
#Ouvrir l'image en question dans GIMP (ctrl + o)
#Redimensionner l'image dans un format carré (Shift + C)
##🚨Cocher l'option "supprimer les pixels découpés"
##🚨Cocher l'option "proportion fixe", avec le ratio 1:1
#Changer la taille de l'image : Image►Echelle et taille de l'image
#Changer la taille de l'image en 8px par 8px
#Exporter. Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'images ou de dessins, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}}

 </translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_crop_and_convert_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_crop_and_convert_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_crop_and_convert_3_.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_crop_and_convert_4_.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_crop_and_convert_5_.gif
}}
{{Tuto Step
|Step_Title=<translate>Convertir une image en code Arduino</translate>
|Step_Content=<translate>Pour faciliter et automatiser le passage d'un fichier .png à son affichage sur la matrice de LED un code python à été conçu.

'''METTRE EN PLACE L'ENVIRONNEMENT PYTHON'''

 

#Installer [https://www.jetbrains.com/pycharm/ Pycharm version communauté] (gratuit)
#Créer son projet . Choisir python 3.
#Attendre que l'indexation soit terminé
#Supprimer le fichier "main.py" créer par défaut
#Glisser déposer les fichier "main.py" et "create_arduino_code.py" ([https://drive.google.com/drive/folders/1qSXMHZJhxBvjEIZN5BhCXURWi191kWFJ?usp=sharing fournis dans ce tutoriel]) dans le projet acuel
#Ouvrir le terminal et lancer les deux commandes suivantes
<syntaxhighlight lang="python3">
pip3 install pillow
pip3 install pyperclip
</syntaxhighlight>'''UTILISER LE CODE POUR TRANSOFORMER UNE IMAGE EN CODE ARDUINO'''

Il s'agit surtout de changer ces paramètres
 <syntaxhighlight lang="python3">
#########################
##### PARAMETERS ######
#########################
# Don't forget to edit the parameters
folder_path = '/Users/Studio/Desktop/PIXEL/'
name_of_the_drawings = 'EXEMPLE'
number_of_drawings = 1 # 7 is the maximum for 8x8 matrice and arduino nano
matrix_width = 8 # this works for an 8x8 matrice
time_between_scene = 2000 # in milliseconds
brightness = 50
#########################
</syntaxhighlight> 

''folder_path ='' chemin absolu menant jusqu'au dossier contenant les images

''name_of_the_drawings ='' le nom de la série de dessins ou d'images sans les chiffres.

{{Info|1=Si la série est 'MOON1, MOON2, MOON3, etc...' name_of_the_drawings = 'MOON'

S'il n'y a qu'une seule image, elle doit s'appeler 'MOON1' et name_of_the_drawings = 'MOON'}}

''number_of_drawings'' = le nombre d'images de la série

''matrix_width'' = largeur de la matrice de led (généralement 8 ou 16)

''time_between_scene'' = le temps d'attente entre une image et la prochaine

''brightness'' = luminausité des LEDs

Une fois ces informations modifié faite tourner le scripte. Le code Arduino s'inscrit dans la console python et est automatiquement copier dans le presse papier à la fin (grâce à la bibliothèque pyperclip).

'''Il ne vous reste plus qu'a coller le code dans Arduino IDE'''</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_CODE_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_CODE_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_CODE_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>Installer les bibliothèques et Téléverser le code</translate>
|Step_Content=<translate>C'est l'étape ultime : envoyé le code sur l'arduino.

'''INSTALLER LES LIBRAIRIES'''

{{Info|À ne faire qu'une fois , lors de la première utilisation}} 

# Télécharger et installer [https://www.arduino.cc/en/software Arduino IDE]
# Croquis►Inclure une librairie►Gérer les bibliothèques
# Rechercher et installer "FastLED NeoMatrix". Lorsque demandé, choisir "Install all", ce qui installera toutes les bibliothèques nécessaires au bon fonctionnement du code.

'''TELEVERSER LE CODE (Upload en anglais)'''

# En fonction de la carte utilisé renseigner les champs suivant dans le menu outil.
## Outils►Types de cartes►(Dans mon cas Arduino Nano)
## Outils►Procésseur►(Dans mon cas ATmega328P old boot loader)
## Outils►Port►(Dépend d'un ordinateur à l'autre)
# Si un "Sketch" n'est pas ouvert par défaut créer en un nouveau : Fichier►Nouveau (ctrl +N)
# Supprimer tout et remplacer par le code obtenu grâce au code python
# Cliquer sur le bouton "Téléverser" ou cliquer sur Croquis►Téléverser (ctrl +U, "U" pour Upload en anglais)
# Attendre
# Vous réjouir de tout le chemin parcouru :)</translate>
|Step_Picture_00=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_1_.gif
|Step_Picture_01=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_2_.gif
}}
{{Notes
|Notes=<translate>J'espère que ce tutoriel vous à plu. Pour info, je suis codeur amateur et serait ravi d'intégrer vos améliorations.

Amusez-vous bien :)

'''Information sur la bibliothèque FastLED :'''

https://www.arduino.cc/reference/en/libraries/fastled-neomatrix/

https://github.com/marcmerlin/FastLED_NeoMatrix</translate>
}}
{{PageLang
|Language=fr
|SourceLanguage=none
|IsTranslation=0
}}
{{Tuto Status
|Complete=Published
}}

Cadre photo Neopixel pour pixel art

2021-12-16T14:41:53Z

Toni2Tech :

{{Tuto Details
|Main_Picture=Cadre_photo_pour_pixel_art_IMG_3072.jpg
|Description=<translate>Il s'agit d'un petit cadre photo, tout à fait ordinaire vu de l'extérieur, mais abritant en son sein une matrice de LED capable d'afficher de petits dessins en Pixel art.

Le cadre est recouvert d'une feuille de papier, ce qui lui donne un rendu organique et "naturel" à la manière du e-paper.

Très simple à utiliser et esthétique, cet objet est également adapté à un usage en atelier, ou les participants pourront dans un premier temps apprendre à faire de petite oeuvre en pixel art sur GIMP puis les afficher chez eux ou sur leur bureau.</translate>
|Area=Art, Decoration, Electronics, House, Play and Hobbies
|Type=Création
|Difficulty=Easy
|Duration=2
|Duration-type=hour(s)
|Cost=10
|Currency=EUR (€)
|Tags=LED, NeoPixels, Pixel Art, Cadre photo, Matrice
}}
{{Introduction
|Introduction=<translate>INFOS : Pour ce tutoriel, chaque étape est illustrée par un GIF animé.

Matériel requis :

*Arduino nano (<5€)
*Matrice de LEDs addressables, type NeoPixel (ws2812b), 8x8 (5€) ou 16x16 (15€)
*Cadre Leroy Merlin (1€)

Outils :

*Pistolet à colle
*Perceuse
*Cutter</translate>
}}
{{Materials
|Tuto_Attachments={{Tuto Attachments
|Attachment=Cadre_photo_Neopixel_pour_pixel_art_test_de_la_matrice_arduino.ino
}}{{Tuto Attachments}}
|ExternalAttachmentsLinks={{ExternalAttachmentsLinks
|ExternalAttachmentsLinks=https://drive.google.com/drive/folders/1qSXMHZJhxBvjEIZN5BhCXURWi191kWFJ?usp=sharing
}}{{ExternalAttachmentsLinks}}
}}
{{Tuto Step
|Step_Title=<translate>Raccorder la matrice de LEDs à l'arduino</translate>
|Step_Content=<translate>La première chose à faire est de réaliser le raccordement entre la matrice et l'arduino nano (ou uno/leonardo) pour qu'il puisse communiquer.

Il existe plusieurs modèles de matrice de LED adressage (ws2812b). De manière générale elles sont structurées de la même manière :

*Un câble qui achemine les informations (Data In and Data Out)
*Un câble qui achemine le courant (VCC ou 5V)
*Un câble qui ferme le circuit en ramendant à la terre (Ground ou GND)

 {{Info|• Le câble VCC est à raccorder au 5V de l'arduino
• Le câble GND est à raccorder au Ground de l'arduino
• Le câble DI doit être raccordé à la PIN 6 (pour fonctionner avec les codes, proposez dans ce tutoriel).
• Le câble DO sert à raccorder une matrice avec une autre matrice. Dans se cas le DO de la matrice 1 doit être connecté avec le DI de la matrice 2.}}</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_Capture_d_e_cran_2021-12-15_a_15.29.50.png
}}
{{Tuto Step
|Step_Title=<translate>Intégrer la matrice au cadre photo</translate>
|Step_Content=<translate>L'idée est d'afficher dans son salon ou dans son bureau, ou dans les couloirs de l'école, l'entreprise ou ailleurs ses oeuvres en pixel art.

Cette étape sert à enjoliver l'objet. Dans mon exemple j'intègre la matrice dans [https://www.leroymerlin.fr/produits/decoration-eclairage/decoration-murale/cadre-photo/cadre-photo-en-bois/cadre-brut-l-10-x-h-15-cm-bois-naturel-71670256.html un cadre 10x15 acheter chez Leroy Merlin].

Pour ajouter un effet E-Paper, j'ai ajouté une feuille de papier devant la vitre, côté regarder.

 

# Ouvrir le cadre et utiliser le dos du cadre comme patron pour découper un rectangle de papier à la bonne taille (un peu épais, du papier à dessin 80g c'est pas mal)
# '''Facultatif :''' Téléverser le code "test_de_la_matrice_arduino.ino" dans l'arduino nano (instruction à l'étape 6) pour avoir un aperçu du résultat.
# À l'aide d'un marqueur, marquer le dos du cadre pour savoir ou percer pour laisser passer les câbles et où coller la matrice
# Percer avec une perceuse, nettoyer avec un cutter
# Pisto-coller la matrice. Le but est de coller la matrice de LED tout en la surélevant un petit peu pour laisser de la place aux câbles.
# Disposer le rectangle de papier devant la vitre (côté regarder) puis assembler les deux parties du cadre.
# Fermer le tout en repliant les petits ergots.</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_1.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_2.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_3.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_4.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_5.gif
|Step_Picture_05=Cadre_photo_pour_pixel_art_6.gif
}}
{{Tuto Step
|Step_Title=<translate>Dessiner un pixel art de 8x8 pixels</translate>
|Step_Content=<translate>En atelier ou pour les fans de retro gaming : dessiner ses propres oeuvres.

 

#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Créer une nouvelle image (ctrl + N) de 8 pixels par 8 pixels
#Zoomer pour que le canva occupe tout l'écran
#Sélectionner l'outil crayon (N)
#Modifier la taille du crayon à 1 pixel et la dureté à 100%
#Changer les couleurs et dessiner pixel par pixel.
#Exporter : Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'images ou de dessins, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}} {{Info|Pour un meilleur rendu, restreindre le nombre de couleurs utilisées et utiliser des couleurs qui contrastent bien.}}</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_PIXEL_ART_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_PIXEL_ART_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_PIXEL_ART_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>ALTERNATIVE : Redimensionner une image en 8x8 pixels</translate>
|Step_Content=<translate>#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Pour cette exemple j'ai téléchargé une image depuis la banque d'image libre de droit [https://pixabay.com pixabay.com]
#Ouvrir l'image en question dans GIMP (ctrl + o)
#Redimensionner l'image dans un format carré (Shift + C)
##🚨Cocher l'option "supprimer les pixels découpés"
##🚨Cocher l'option "proportion fixe", avec le ratio 1:1
#Changer la taille de l'image : Image►Echelle et taille de l'image
#Changer la taille de l'image en 8px par 8px
#Exporter. Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'images ou de dessins, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}}

 </translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_crop_and_convert_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_crop_and_convert_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_crop_and_convert_3_.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_crop_and_convert_4_.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_crop_and_convert_5_.gif
}}
{{Tuto Step
|Step_Title=<translate>Convertir une image en code Arduino</translate>
|Step_Content=<translate>Pour faciliter et automatiser le passage d'un fichier .png à son affichage sur la matrice de LED un code python à été conçu.

'''METTRE EN PLACE L'ENVIRONNEMENT PYTHON'''

 

#Installer [https://www.jetbrains.com/pycharm/ Pycharm version communauté] (gratuit)
#Créer son projet . Choisir python 3.
#Attendre que l'indexation soit terminé
#Supprimer le fichier "main.py" créer par défaut
#Glisser déposer les fichier "main.py" et "create_arduino_code.py" ([https://drive.google.com/drive/folders/1qSXMHZJhxBvjEIZN5BhCXURWi191kWFJ?usp=sharing fournis dans ce tutoriel]) dans le projet acuel
#Ouvrir le terminal et lancer les deux commandes suivantes
<syntaxhighlight lang="python3">
pip3 install pillow
pip3 install pyperclip
</syntaxhighlight>'''UTILISER LE CODE POUR TRANSOFORMER UNE IMAGE EN CODE ARDUINO'''

Il s'agit surtout de changer ces paramètres
 <syntaxhighlight lang="python3">
#########################
##### PARAMETERS ######
#########################
# Don't forget to edit the parameters
folder_path = '/Users/Studio/Desktop/PIXEL/'
name_of_the_drawings = 'EXEMPLE'
number_of_drawings = 1 # 7 is the maximum for 8x8 matrice and arduino nano
matrix_width = 8 # this works for an 8x8 matrice
time_between_scene = 2000 # in milliseconds
brightness = 50
#########################
</syntaxhighlight> 

''folder_path ='' chemin absolu menant jusqu'au dossier contenant les images

''name_of_the_drawings ='' le nom de la série de dessins ou d'images sans les chiffres.

{{Info|1=Si la série est 'MOON1, MOON2, MOON3, etc...' name_of_the_drawings = 'MOON'

S'il n'y a qu'une seule image, elle doit s'appeler 'MOON1' et name_of_the_drawings = 'MOON'}}

''number_of_drawings'' = le nombre d'images de la série

''matrix_width'' = largeur de la matrice de led (généralement 8 ou 16)

''time_between_scene'' = le temps d'attente entre une image et la prochaine

''brightness'' = luminausité des LEDs

Une fois ces informations modifié faite tourner le scripte. Le code Arduino s'inscrit dans la console python et est automatiquement copier dans le presse papier à la fin (grâce à la bibliothèque pyperclip).

'''Il ne vous reste plus qu'a coller le code dans Arduino IDE'''</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_CODE_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_CODE_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_CODE_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>Installer les bibliothèques et Téléverser le code</translate>
|Step_Content=<translate>C'est l'étape ultime : envoyé le code sur l'arduino.

'''INSTALLER LES LIBRAIRIES'''

{{Info|À ne faire qu'une fois , lors de la première utilisation}} 

# Télécharger et installer [https://www.arduino.cc/en/software Arduino IDE]
# Croquis►Inclure une librairie►Gérer les bibliothèques
# Rechercher et installer "FastLED NeoMatrix". Lorsque demandé, choisir "Install all", ce qui installera toutes les bibliothèques nécessaires au bon fonctionnement du code.

'''TELEVERSER LE CODE (Upload en anglais)'''

# En fonction de la carte utilisé renseigner les champs suivant dans le menu outil.
## Outils►Types de cartes►(Dans mon cas Arduino Nano)
## Outils►Procésseur►(Dans mon cas ATmega328P old boot loader)
## Outils►Port►(Dépend d'un ordinateur à l'autre)
# Si un "Sketch" n'est pas ouvert par défaut créer en un nouveau : Fichier►Nouveau (ctrl +N)
# Supprimer tout et remplacer par le code obtenu grâce au code python
# Cliquer sur le bouton "Téléverser" ou cliquer sur Croquis►Téléverser (ctrl +U, "U" pour Upload en anglais)
# Attendre
# Vous réjouir de tout le chemin parcouru :)</translate>
|Step_Picture_00=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_1_.gif
|Step_Picture_01=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_2_.gif
}}
{{Notes
|Notes=<translate>J'espère que ce tutoriel vous à plu. Pour info, je suis codeur amateur et serait ravi d'intégrer vos améliorations.

Amusez-vous bien :)

'''Information sur la bibliothèque FastLED :'''

https://www.arduino.cc/reference/en/libraries/fastled-neomatrix/

https://github.com/marcmerlin/FastLED_NeoMatrix</translate>
}}
{{PageLang
|Language=fr
|SourceLanguage=none
|IsTranslation=0
}}
{{Tuto Status
|Complete=Published
}}

Cadre photo Neopixel pour pixel art

2021-12-16T14:40:51Z

Toni2Tech :

{{Tuto Details
|Main_Picture=Cadre_photo_pour_pixel_art_IMG_3072.jpg
|Description=<translate>Il s'agit d'un petit cadre photo, tout à fait ordinaire vu de l'extérieur, mais abritant en son sein une matrice de LED capable d'afficher de petits dessins en Pixel art.

Le cadre est recouvert d'une feuille de papier, ce qui lui donne un rendu organique et "naturel" à la manière du e-paper.

Très simple à utiliser et esthétique, cet objet est également adapté à un usage en atelier, ou les participants pourront dans un premier temps apprendre à faire de petite oeuvre en pixel art sur GIMP puis les afficher chez eux ou sur leur bureau.</translate>
|Area=Art, Decoration, Electronics, House, Play and Hobbies
|Type=Création
|Difficulty=Easy
|Duration=2
|Duration-type=hour(s)
|Cost=10
|Currency=EUR (€)
|Tags=LED, NeoPixels, Pixel Art, Cadre photo, Matrice
}}
{{Introduction
|Introduction=<translate>INFOS : Pour ce tutoriel, chaque étape est illustrée par un GIF animé.

Matériel requis :

*Arduino nano (<5€)
*Matrice de LEDs addressables, type NeoPixel (ws2812b), 8x8 (5€) ou 16x16 (15€)
*Cadre Leroy Merlin (1€)

Outils :

*Pistolet à colle
*Perceuse
*Cutter</translate>
}}
{{Materials
|Tuto_Attachments={{Tuto Attachments
|Attachment=Cadre_photo_Neopixel_pour_pixel_art_test_de_la_matrice_arduino.ino
}}{{Tuto Attachments}}
|ExternalAttachmentsLinks={{ExternalAttachmentsLinks
|ExternalAttachmentsLinks=https://drive.google.com/drive/folders/1qSXMHZJhxBvjEIZN5BhCXURWi191kWFJ?usp=sharing
}}{{ExternalAttachmentsLinks}}
}}
{{Tuto Step
|Step_Title=<translate>Raccorder la matrice de LEDs à l'arduino</translate>
|Step_Content=<translate>La première chose à faire est de réaliser le raccordement entre la matrice et l'arduino nano (ou uno/leonardo) pour qu'il puisse communiquer.

Il existe plusieurs modèles de matrice de LED adressage (ws2812b). De manière générale elles sont structurées de la même manière :

* Un câble qui achemine les informations (Data In and Data Out)
* Un câble qui achemine le courant (VCC ou 5V)
* Un câble qui ferme le circuit en ramendant à la terre (Ground ou GND)
{{Info|• Le câble VCC est à raccorder au 5V de l'arduino
• Le câble GND est à raccorder au Ground de l'arduino
• Le câble DI doit être raccordé à la PIN 6 (pour fonctionner avec les codes, proposez dans ce tutoriel).
• Le câble DO sert à raccorder une matrice avec une autre matrice. Dans se cas le DO de la matrice 1 doit être connecté avec le DI de la matrice 2.}}</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_Capture_d_e_cran_2021-12-15_a_15.29.50.png
}}
{{Tuto Step
|Step_Title=<translate>Intégrer la matrice au cadre photo</translate>
|Step_Content=<translate>L'idée est d'afficher dans son salon ou dans son bureau, ou dans les couloirs de l'école, l'entreprise ou ailleurs ses oeuvres en pixel art.

Cette étape sert à enjoliver l'objet. Dans mon exemple j'intègre la matrice dans [https://www.leroymerlin.fr/produits/decoration-eclairage/decoration-murale/cadre-photo/cadre-photo-en-bois/cadre-brut-l-10-x-h-15-cm-bois-naturel-71670256.html un cadre 10x15 acheter chez Leroy Merlin].

Pour ajouter un effet E-Paper, j'ai ajouté une feuille de papier devant la vitre, côté regarder.

 

# Ouvrir le cadre et utiliser le dos du cadre comme patron pour découper un rectangle de papier à la bonne taille (un peu épais, du papier à dessin 80g c'est pas mal)
# '''Facultatif :''' Téléverser le code "test_de_la_matrice_arduino.ino" dans l'arduino nano (instruction à l'étape 6) pour avoir un aperçu du résultat.
# À l'aide d'un marqueur, marquer le dos du cadre pour savoir ou percer pour laisser passer les câbles et où coller la matrice
# Percer avec une perceuse, nettoyer avec un cutter
# Pisto-coller la matrice. Le but est de coller la matrice de LED tout en la surélevant un petit peu pour laisser de la place aux câbles.
# Disposer le rectangle de papier devant la vitre (côté regarder) puis assembler les deux parties du cadre.
# Fermer le tout en repliant les petits ergots.</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_1.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_2.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_3.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_4.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_5.gif
|Step_Picture_05=Cadre_photo_pour_pixel_art_6.gif
}}
{{Tuto Step
|Step_Title=<translate>Dessiner un pixel art de 8x8 pixels</translate>
|Step_Content=<translate>En atelier ou pour les fans de retro gaming : dessiner ses propres oeuvres.

 

#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Créer une nouvelle image (ctrl + N) de 8 pixels par 8 pixels
#Zoomer pour que le canva occupe tout l'écran
#Sélectionner l'outil crayon (N)
#Modifier la taille du crayon à 1 pixel et la dureté à 100%
#Changer les couleurs et dessiner pixel par pixel.
#Exporter : Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'images ou de dessins, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}} {{Info|Pour un meilleur rendu, restreindre le nombre de couleurs utilisées et utiliser des couleurs qui contrastent bien.}}</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_PIXEL_ART_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_PIXEL_ART_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_PIXEL_ART_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>ALTERNATIVE : Redimensionner une image en 8x8 pixels</translate>
|Step_Content=<translate>#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Pour cette exemple j'ai téléchargé une image depuis la banque d'image libre de droit [https://pixabay.com pixabay.com]
#Ouvrir l'image en question dans GIMP (ctrl + o)
#Redimensionner l'image dans un format carré (Shift + C)
##🚨Cocher l'option "supprimer les pixels découpés"
##🚨Cocher l'option "proportion fixe", avec le ratio 1:1
#Changer la taille de l'image : Image►Echelle et taille de l'image
#Changer la taille de l'image en 8px par 8px
#Exporter. Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'images ou de dessins, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}}

 </translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_crop_and_convert_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_crop_and_convert_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_crop_and_convert_3_.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_crop_and_convert_4_.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_crop_and_convert_5_.gif
}}
{{Tuto Step
|Step_Title=<translate>Convertir une image en code Arduino</translate>
|Step_Content=<translate>Pour faciliter et automatiser le passage d'un fichier .png à son affichage sur la matrice de LED un code python à été conçu.

'''METTRE EN PLACE L'ENVIRONNEMENT PYTHON'''

 

#Installer [https://www.jetbrains.com/pycharm/ Pycharm version communauté] (gratuit)
#Créer son projet . Choisir python 3.
#Attendre que l'indexation soit terminé
#Supprimer le fichier "main.py" créer par défaut
#Glisser déposer les fichier "main.py" et "create_arduino_code.py" ([https://drive.google.com/drive/folders/1qSXMHZJhxBvjEIZN5BhCXURWi191kWFJ?usp=sharing fournis dans ce tutoriel]) dans le projet acuel
#Ouvrir le terminal et lancer les deux commandes suivantes
<syntaxhighlight lang="python3">
pip3 install pillow
pip3 install pyperclip
</syntaxhighlight>'''UTILISER LE CODE POUR TRANSOFORMER UNE IMAGE EN CODE ARDUINO'''

Il s'agit surtout de changer ces paramètres
 <syntaxhighlight lang="python3">
#########################
##### PARAMETERS ######
#########################
# Don't forget to edit the parameters
folder_path = '/Users/Studio/Desktop/PIXEL/'
name_of_the_drawings = 'EXEMPLE'
number_of_drawings = 1 # 7 is the maximum for 8x8 matrice and arduino nano
matrix_width = 8 # this works for an 8x8 matrice
time_between_scene = 2000 # in milliseconds
brightness = 50
#########################
</syntaxhighlight> 

''folder_path ='' chemin absolu menant jusqu'au dossier contenant les images

''name_of_the_drawings ='' le nom de la série de dessins ou d'images sans les chiffres.

{{Info|1=Si la série est 'MOON1, MOON2, MOON3, etc...' name_of_the_drawings = 'MOON'

S'il n'y a qu'une seule image, elle doit s'appeler 'MOON1' et name_of_the_drawings = 'MOON'}}

''number_of_drawings'' = le nombre d'images de la série

''matrix_width'' = largeur de la matrice de led (généralement 8 ou 16)

''time_between_scene'' = le temps d'attente entre une image et la prochaine

''brightness'' = luminausité des LEDs

Une fois ces informations modifié faite tourner le scripte. Le code Arduino s'inscrit dans la console python et est automatiquement copier dans le presse papier à la fin (grâce à la bibliothèque pyperclip).

'''Il ne vous reste plus qu'a coller le code dans Arduino IDE'''</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_CODE_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_CODE_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_CODE_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>Installer les bibliothèques et Téléverser le code</translate>
|Step_Content=<translate>C'est l'étape ultime : envoyé le code sur l'arduino.

'''INSTALLER LES LIBRAIRIES'''

{{Info|À ne faire qu'une fois , lors de la première utilisation}} 

# Télécharger et installer [https://www.arduino.cc/en/software Arduino IDE]
# Croquis►Inclure une librairie►Gérer les bibliothèques
# Rechercher et installer "FastLED NeoMatrix". Lorsque demandé, choisir "Install all", ce qui installera toutes les bibliothèques nécessaires au bon fonctionnement du code.

'''TELEVERSER LE CODE (Upload en anglais)'''

# En fonction de la carte utilisé renseigner les champs suivant dans le menu outil.
## Outils►Types de cartes►(Dans mon cas Arduino Nano)
## Outils►Procésseur►(Dans mon cas ATmega328P old boot loader)
## Outils►Port►(Dépend d'un ordinateur à l'autre)
# Si un "Sketch" n'est pas ouvert par défaut créer en un nouveau : Fichier►Nouveau (ctrl +N)
# Supprimer tout et remplacer par le code obtenu grâce au code python
# Cliquer sur le bouton "Téléverser" ou cliquer sur Croquis►Téléverser (ctrl +U, "U" pour Upload en anglais)
# Attendre
# Vous réjouir de tout le chemin parcouru :)</translate>
|Step_Picture_00=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_1_.gif
|Step_Picture_01=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_2_.gif
}}
{{Notes
|Notes=<translate>J'espère que ce tutoriel vous à plu. Pour info, je suis codeur amateur et serait ravi d'intégrer vos améliorations.

Amusez-vous bien :)

'''Information sur la bibliothèque FastLED :'''

https://www.arduino.cc/reference/en/libraries/fastled-neomatrix/

https://github.com/marcmerlin/FastLED_NeoMatrix</translate>
}}
{{PageLang
|Language=fr
|SourceLanguage=none
|IsTranslation=0
}}
{{Tuto Status
|Complete=Draft
}}

Cadre photo Neopixel pour pixel art

2021-12-16T14:39:18Z

Toni2Tech :

{{Tuto Details
|Main_Picture=Cadre_photo_pour_pixel_art_IMG_3072.jpg
|Description=<translate>Il s'agit d'un petit cadre photo, tout à fait ordinaire vu de l'extérieur, mais abritant en son sein une matrice de LED capable d'afficher de petits dessins en Pixel art.

Le cadre est recouvert d'une feuille de papier, ce qui lui donne un rendu organique et "naturel" à la manière du e-paper.

Très simple à utiliser et esthétique, cet objet est également adapté à un usage en atelier, ou les participants pourront dans un premier temps apprendre à faire de petite oeuvre en pixel art sur GIMP puis les afficher chez eux ou sur leur bureau.</translate>
|Area=Art, Decoration, Electronics, House, Play and Hobbies
|Type=Création
|Difficulty=Easy
|Duration=2
|Duration-type=hour(s)
|Cost=10
|Currency=EUR (€)
|Tags=LED, NeoPixels, Pixel Art, Cadre photo, Matrice
}}
{{Introduction
|Introduction=<translate>Matériel requis :

* Arduino nano (<5€)
* Matrice de LEDs addressables, type NeoPixel (ws2812b), 8x8 (5€) ou 16x16 (15€)
* Cadre Leroy Merlin (1€)

Outils :

* Pistolet à colle
* Perceuse
* Cutter</translate>
}}
{{Materials
|Tuto_Attachments={{Tuto Attachments
|Attachment=Cadre_photo_Neopixel_pour_pixel_art_test_de_la_matrice_arduino.ino
}}{{Tuto Attachments}}
|ExternalAttachmentsLinks={{ExternalAttachmentsLinks
|ExternalAttachmentsLinks=https://drive.google.com/drive/folders/1qSXMHZJhxBvjEIZN5BhCXURWi191kWFJ?usp=sharing
}}{{ExternalAttachmentsLinks}}
}}
{{Tuto Step
|Step_Title=<translate>Raccorder la matrice de LEDs à l'arduino</translate>
|Step_Content=<translate>La première chose à faire est de réaliser le raccordement entre la matrice et l'arduino nano (ou uno/leonardo) pour qu'il puisse communiquer.

Il existe plusieurs modèles de matrice de LED adressage (ws2812b). De manière générale elles sont structurées de la même manière :

* Un câble qui achemine les informations (Data In and Data Out)
* Un câble qui achemine le courant (VCC ou 5V)
* Un câble qui ferme le circuit en ramendant à la terre (Ground ou GND)
{{Info|• Le câble VCC est à raccorder au 5V de l'arduino
• Le câble GND est à raccorder au Ground de l'arduino
• Le câble DI doit être raccordé à la PIN 6 (pour fonctionner avec les codes, proposez dans ce tutoriel).
• Le câble DO sert à raccorder une matrice avec une autre matrice. Dans se cas le DO de la matrice 1 doit être connecté avec le DI de la matrice 2.}}</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_Capture_d_e_cran_2021-12-15_a_15.29.50.png
}}
{{Tuto Step
|Step_Title=<translate>Intégrer la matrice au cadre photo</translate>
|Step_Content=<translate>L'idée est d'afficher dans son salon ou dans son bureau, ou dans les couloirs de l'école, l'entreprise ou ailleurs ses oeuvres en pixel art.

Cette étape sert à enjoliver l'objet. Dans mon exemple j'intègre la matrice dans [https://www.leroymerlin.fr/produits/decoration-eclairage/decoration-murale/cadre-photo/cadre-photo-en-bois/cadre-brut-l-10-x-h-15-cm-bois-naturel-71670256.html un cadre 10x15 acheter chez Leroy Merlin].

Pour ajouter un effet E-Paper, j'ai ajouté une feuille de papier devant la vitre, côté regarder.

 

# Ouvrir le cadre et utiliser le dos du cadre comme patron pour découper un rectangle de papier à la bonne taille (un peu épais, du papier à dessin 80g c'est pas mal)
# '''Facultatif :''' Téléverser le code "test_de_la_matrice_arduino.ino" dans l'arduino nano (instruction à l'étape 6) pour avoir un aperçu du résultat.
# À l'aide d'un marqueur, marquer le dos du cadre pour savoir ou percer pour laisser passer les câbles et où coller la matrice
# Percer avec une perceuse, nettoyer avec un cutter
# Pisto-coller la matrice. Le but est de coller la matrice de LED tout en la surélevant un petit peu pour laisser de la place aux câbles.
# Disposer le rectangle de papier devant la vitre (côté regarder) puis assembler les deux parties du cadre.
# Fermer le tout en repliant les petits ergots.</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_1.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_2.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_3.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_4.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_5.gif
|Step_Picture_05=Cadre_photo_pour_pixel_art_6.gif
}}
{{Tuto Step
|Step_Title=<translate>Dessiner un pixel art de 8x8 pixels</translate>
|Step_Content=<translate>En atelier ou pour les fans de retro gaming : dessiner ses propres oeuvres.

 

#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Créer une nouvelle image (ctrl + N) de 8 pixels par 8 pixels
#Zoomer pour que le canva occupe tout l'écran
#Sélectionner l'outil crayon (N)
#Modifier la taille du crayon à 1 pixel et la dureté à 100%
#Changer les couleurs et dessiner pixel par pixel.
#Exporter : Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'images ou de dessins, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}} {{Info|Pour un meilleur rendu, restreindre le nombre de couleurs utilisées et utiliser des couleurs qui contrastent bien.}}</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_PIXEL_ART_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_PIXEL_ART_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_PIXEL_ART_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>ALTERNATIVE : Redimensionner une image en 8x8 pixels</translate>
|Step_Content=<translate>#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Pour cette exemple j'ai téléchargé une image depuis la banque d'image libre de droit [https://pixabay.com pixabay.com]
#Ouvrir l'image en question dans GIMP (ctrl + o)
#Redimensionner l'image dans un format carré (Shift + C)
##🚨Cocher l'option "supprimer les pixels découpés"
##🚨Cocher l'option "proportion fixe", avec le ratio 1:1
#Changer la taille de l'image : Image►Echelle et taille de l'image
#Changer la taille de l'image en 8px par 8px
#Exporter. Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'images ou de dessins, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}}

 </translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_crop_and_convert_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_crop_and_convert_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_crop_and_convert_3_.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_crop_and_convert_4_.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_crop_and_convert_5_.gif
}}
{{Tuto Step
|Step_Title=<translate>Convertir une image en code Arduino</translate>
|Step_Content=<translate>Pour faciliter et automatiser le passage d'un fichier .png à son affichage sur la matrice de LED un code python à été conçu.

'''METTRE EN PLACE L'ENVIRONNEMENT PYTHON'''

 

#Installer [https://www.jetbrains.com/pycharm/ Pycharm version communauté] (gratuit)
#Créer son projet . Choisir python 3.
#Attendre que l'indexation soit terminé
#Supprimer le fichier "main.py" créer par défaut
#Glisser déposer les fichier "main.py" et "create_arduino_code.py" ([https://drive.google.com/drive/folders/1qSXMHZJhxBvjEIZN5BhCXURWi191kWFJ?usp=sharing fournis dans ce tutoriel]) dans le projet acuel
#Ouvrir le terminal et lancer les deux commandes suivantes
<syntaxhighlight lang="python3">
pip3 install pillow
pip3 install pyperclip
</syntaxhighlight>'''UTILISER LE CODE POUR TRANSOFORMER UNE IMAGE EN CODE ARDUINO'''

Il s'agit surtout de changer ces paramètres
 <syntaxhighlight lang="python3">
#########################
##### PARAMETERS ######
#########################
# Don't forget to edit the parameters
folder_path = '/Users/Studio/Desktop/PIXEL/'
name_of_the_drawings = 'EXEMPLE'
number_of_drawings = 1 # 7 is the maximum for 8x8 matrice and arduino nano
matrix_width = 8 # this works for an 8x8 matrice
time_between_scene = 2000 # in milliseconds
brightness = 50
#########################
</syntaxhighlight> 

''folder_path ='' chemin absolu menant jusqu'au dossier contenant les images

''name_of_the_drawings ='' le nom de la série de dessins ou d'images sans les chiffres.

{{Info|1=Si la série est 'MOON1, MOON2, MOON3, etc...' name_of_the_drawings = 'MOON'

S'il n'y a qu'une seule image, elle doit s'appeler 'MOON1' et name_of_the_drawings = 'MOON'}}

''number_of_drawings'' = le nombre d'images de la série

''matrix_width'' = largeur de la matrice de led (généralement 8 ou 16)

''time_between_scene'' = le temps d'attente entre une image et la prochaine

''brightness'' = luminausité des LEDs

Une fois ces informations modifié faite tourner le scripte. Le code Arduino s'inscrit dans la console python et est automatiquement copier dans le presse papier à la fin (grâce à la bibliothèque pyperclip).

'''Il ne vous reste plus qu'a coller le code dans Arduino IDE'''</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_CODE_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_CODE_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_CODE_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>Installer les bibliothèques et Téléverser le code</translate>
|Step_Content=<translate>C'est l'étape ultime : envoyé le code sur l'arduino.

'''INSTALLER LES LIBRAIRIES'''

{{Info|À ne faire qu'une fois , lors de la première utilisation}} 

# Télécharger et installer [https://www.arduino.cc/en/software Arduino IDE]
# Croquis►Inclure une librairie►Gérer les bibliothèques
# Rechercher et installer "FastLED NeoMatrix". Lorsque demandé, choisir "Install all", ce qui installera toutes les bibliothèques nécessaires au bon fonctionnement du code.

'''TELEVERSER LE CODE (Upload en anglais)'''

# En fonction de la carte utilisé renseigner les champs suivant dans le menu outil.
## Outils►Types de cartes►(Dans mon cas Arduino Nano)
## Outils►Procésseur►(Dans mon cas ATmega328P old boot loader)
## Outils►Port►(Dépend d'un ordinateur à l'autre)
# Si un "Sketch" n'est pas ouvert par défaut créer en un nouveau : Fichier►Nouveau (ctrl +N)
# Supprimer tout et remplacer par le code obtenu grâce au code python
# Cliquer sur le bouton "Téléverser" ou cliquer sur Croquis►Téléverser (ctrl +U, "U" pour Upload en anglais)
# Attendre
# Vous réjouir de tout le chemin parcouru :)</translate>
|Step_Picture_00=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_1_.gif
|Step_Picture_01=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_2_.gif
}}
{{Notes
|Notes=<translate>J'espère que ce tutoriel vous à plu. Pour info, je suis codeur amateur et serait ravi d'intégrer vos améliorations.

Amusez-vous bien :)

'''Information sur la bibliothèque FastLED :'''

https://www.arduino.cc/reference/en/libraries/fastled-neomatrix/

https://github.com/marcmerlin/FastLED_NeoMatrix</translate>
}}
{{PageLang
|Language=fr
|SourceLanguage=none
|IsTranslation=0
}}
{{Tuto Status
|Complete=Draft
}}

Cadre photo Neopixel pour pixel art

2021-12-16T14:22:55Z

Toni2Tech :

{{Tuto Details
|Main_Picture=Cadre_photo_pour_pixel_art_IMG_3072.jpg
|Description=<translate>Il s'agit d'un petit cadre photo, tout à fait ordinaire vue de l'extérieur, mais abritant en son sein une matrice de LED capable d'afficher de petits dessins en Pixel art.
Le cadre est recouvert d'une feuille de papier, ce qui lui donne un rendu organique et "naturel" à la manière du e-paper.
Très simple à utiliser et esthétique, cet objet est également adapté à un usage en atelier, ou les participant pourront dans un premier temps apprendre à faire de petite oeuvre en pixel art sur GIMP puis les afficher chez eux ou sur leur bureau grâce à ce cadre ?</translate>
|Area=Art, Decoration, Electronics, House, Play and Hobbies
|Type=Création
|Difficulty=Easy
|Duration=2
|Duration-type=hour(s)
|Cost=10
|Currency=EUR (€)
|Tags=LED, NeoPixels, Pixel Art, Cadre photo, Matrice
}}
{{Introduction
|Introduction=<translate></translate>
}}
{{Materials
|Tuto_Attachments={{Tuto Attachments
|Attachment=Cadre_photo_Neopixel_pour_pixel_art_test_de_la_matrice_arduino.ino
}}
}}
{{Tuto Step
|Step_Title=<translate>Raccorder la matrice à l'arduino</translate>
|Step_Content=<translate>La première chose à faire est de réaliser le raccordement entre la matrice et l'arduino nano (ou uno/leonardo) pour qu'il puisse communiquer.

Il existe plusieurs modèle de matrice de LED adressage (ws2812b). De manière générale elle sont structurés de la même manière :

 

* Un câble qui achemine les information (Data In and Data Out)
* Un câble qui achemine le courant (VCC ou 5V)
* Un câble qui ferme le circuit en ramendant à la terre (Ground ou GND)

 {{Pin|• Le cable VCC est à raccorder au 5V de l'arduino

• Le cable GND est à raccorder au Ground de l'arduino

• Le cable DI doit être raccorder à la PIN 6 (pour fonctionner avec les codes proposer dans ce tutoriel).

• Le cable DO sers à raccorder une matrice avec une autre matrice. Dans se cas le DO de la matrice 1 doit être connecter avec le DI de la matrice 2.}} </translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_Capture_d_e_cran_2021-12-15_a_15.29.50.png
}}
{{Tuto Step
|Step_Title=<translate>Intégrer la matrice au cadre photo</translate>
|Step_Content=<translate>L'idée est d'afficher dans son salon ou dans son bureau, ou dans les couloirs de l'école, l'entreprise ou ailleurs ses oeuvres en pixel art. Cette étape sers à enjoliver l'objet.

Dans mon exemple j'intègre la matrice dans [https://www.leroymerlin.fr/produits/decoration-eclairage/decoration-murale/cadre-photo/cadre-photo-en-bois/cadre-brut-l-10-x-h-15-cm-bois-naturel-71670256.html un cadre 10x15 acheter chez Leroy Merlin].

Pour ajouter un effet E-Paper, j'ai ajouter une feuille de papier devant la vitre, côté regarder.

 

# Ouvrir le cadre et utiliser le dos du cadre comme patron pour découper un rectangle de papier à la bonne taille (un peu épais, du papier à dessin 80g c'est pas mal)
# '''Facultatif :''' Téléverser le code "test_de_la_matrice_arduino.ino" dans l'arduino nano (instruction à l'étape 6) pour avoir un aperçu du résultat.
# A l'aide d'un marqueur, marquer le dos du cadre pour savoir ou percer pour laisser passer les câbles et où coller la matrice
# Percer avec une perceuse, nettoyer avec un cutter
# Pisto-coller la matrice. Le but est de coller la matrice de led tout en la surélevant un petit peu pour laisser de la place aux câbles.
# Disposer le rectangle de papier devant la vitre (coter regarder) puis assembler les deux partie du cadre.
# Fermer le tout en repliant les petits ergots.</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_1.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_2.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_3.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_4.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_5.gif
|Step_Picture_05=Cadre_photo_pour_pixel_art_6.gif
}}
{{Tuto Step
|Step_Title=<translate>Dessiner un pixel art de 8x8 pixels</translate>
|Step_Content=<translate>En atelier ou pour les fans de retro gaming : dessiner ses propres oeuvres.

 

#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Créer une nouvelle image (ctrl + N) de 8 pixels par 8 pixels
#Zoomer pour que le canva prenne tout l'écran
#Sélectionner l'outil crayon (N)
#Modifier la taille du crayon à 1 pixel et la dureté à 100%
#Changer les couleurs et dessiner pixel par pixelExporter.
#Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'image ou de dessin, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}} {{Info|Pour un meilleur rendu, restreindre le nombre de couleurs utilisées et utiliser des couleurs qui contrastent bien.}}</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_PIXEL_ART_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_PIXEL_ART_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_PIXEL_ART_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>ALTERNATIVE : Redimensionner une image en 8x8 pixels</translate>
|Step_Content=<translate>La première option est de redimensionner une image/photo existante en 8x8 pixel.

 

#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Pour cette exemple j'ai télécharger une image depuis la banque d'image libre de droit [https://pixabay.com pixabay.com]
#Ouvrir l'image en question dans GIMP (ctrl + o)
#Redimensionner l'image dans un format carré (Shift + C)
##🚨Cocher l'option "supprimer les pixels découpés"
##🚨Cocher l'option "proportion fixe", avec le ratio 1:1
#Changer la taille de l'image. Image►Echelle et taille de l'image
#Changer la taille de l'image pour 8px par 8px
#Exporter. Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'image ou de dessin, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}}

 </translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_crop_and_convert_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_crop_and_convert_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_crop_and_convert_3_.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_crop_and_convert_4_.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_crop_and_convert_5_.gif
}}
{{Tuto Step
|Step_Title=<translate>Convertir une image en code Arduino</translate>
|Step_Content=<translate>Pour faciliter et automatiser le passage d'un fichier .png à son affichage sur la matrice de LED un code python à été conçu.

'''METTRE EN PLACE L'ENVIRONNEMENT'''

 

#Installer [https://www.jetbrains.com/pycharm/ Pycharm version communauté] (gratuit)
#Créer son projet . Choisir python 3.
#Attendre que l'indexation soit terminé
#Supprimer le fichier "main.py" créer par défaut
#Glisser déposer les fichier "main.py" et "create_arduino_code.py" (fournis dans ce tutoriel) dans le projet acuel
#Ouvrir le terminal et lancer les deux commandes suivantes
<syntaxhighlight lang="python3">
pip3 install pillow
pip3 install pyperclip
</syntaxhighlight>'''UTILISER LE CODE POUR TRANSOFORMER UNE IMAGE EN CODE ARDUINO'''

Il s'agit surtout de changer ces paramètres
 <syntaxhighlight lang="python3">
#########################
##### PARAMETERS ######
#########################
# Don't forget to edit the parameters
folder_path = '/Users/Studio/Desktop/PIXEL/'
name_of_the_drawings = 'EXEMPLE'
number_of_drawings = 1 # 7 is the maximum for 8x8 matrice and arduino nano
matrix_width = 8 # this works for an 8x8 matrice
time_between_scene = 2000 # in milliseconds
brightness = 50
#########################
</syntaxhighlight> 

''folder_path ='' chemin absolu menant jusqu'au dossier contenant les images

''name_of_the_drawings ='' le nom de la série de dessins ou d'images sans les chiffres.

{{Info|1=Si la série est 'MOON1, MOON2, MOON3, etc...' name_of_the_drawings = 'MOON'

S'il n'y a qu'une seule image, elle doit s'appeler 'MOON1' et name_of_the_drawings = 'MOON'}}

''number_of_drawings'' = le nombre d'images de la série

''matrix_width'' = largeur de la matrice de led (généralement 8 ou 16)

''time_between_scene'' = le temps d'attente entre une image et la prochaine

''brightness'' = luminausité des LEDs

Une fois ces informations modifié faite tourner le scripte. Le code Arduino s'inscrit dans la console python et est automatiquement copier dans le presse papier à la fin (grâce à la bibliothèque pyperclip).

'''Il ne vous reste plus qu'a coller le code dans Arduino IDE'''</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_CODE_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_CODE_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_CODE_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>Installer les bibliothèques et Téléverser le code</translate>
|Step_Content=<translate>C'est l'étape ultime : envoyé le code sur l'arduino.

'''INSTALLER LES LIBRAIRIES'''

{{Info|À ne faire qu'une fois , lors de la première utilisation}} 

# Télécharger et installer [https://www.arduino.cc/en/software Arduino IDE]
# Croquis►Inclure une librairie►Gérer les bibliothèques
# Rechercher et installer "FastLED NeoMatrix". Lorsque demandé, choisir "Install all", ce qui installera toutes les bibliothèques nécessaires au bon fonctionnement du code.

'''TELEVERSER LE CODE (Upload en anglais)'''

# En fonction de la carte utilisé renseigner les champs suivant dans le menu outil.
## Outils►Types de cartes►(Dans mon cas Arduino Nano)
## Outils►Procésseur►(Dans mon cas ATmega328P old boot loader)
## Outils►Port►(Dépend d'un ordinateur à l'autre)
# Si un "Sketch" n'est pas ouvert par défaut créer en un nouveau : Fichier►Nouveau (ctrl +N)
# Supprimer tout et remplacer par le code obtenu grâce au code python
# Cliquer sur le bouton "Téléverser" ou cliquer sur Croquis►Téléverser (ctrl +U, "U" pour Upload en anglais)
# Attendre
# Vous réjouir de tout le chemin parcouru :)</translate>
|Step_Picture_00=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_1_.gif
|Step_Picture_01=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_2_.gif
}}
{{Notes
|Notes=<translate>J'espère que ce tutoriel vous à plu. Pour info, je suis codeur amateur et serait ravi d'intégrer vos améliorations.

'''Information sur la bibliothèque FastLED :'''

https://www.arduino.cc/reference/en/libraries/fastled-neomatrix/

https://github.com/marcmerlin/FastLED_NeoMatrix</translate>
}}
{{PageLang
|Language=fr
|SourceLanguage=none
|IsTranslation=0
}}
{{Tuto Status
|Complete=Draft
}}

Cadre photo Neopixel pour pixel art

2021-12-16T13:49:13Z

Toni2Tech :

{{Tuto Details
|Main_Picture=Cadre_photo_pour_pixel_art_IMG_3072.jpg
|Description=<translate>Il s'agit d'un petit cadre photo, tout à fait ordinaire vue de l'extérieur, mais abritant en son sein une matrice de LED capable d'afficher de petits dessins en Pixel art.
Le cadre est recouvert d'une feuille de papier, ce qui lui donne un rendu organique et "naturel" à la manière du e-paper.
Très simple à utiliser et esthétique, cet objet est également adapté à un usage en atelier, ou les participant pourront dans un premier temps apprendre à faire de petite oeuvre en pixel art sur GIMP puis les afficher chez eux ou sur leur bureau grâce à ce cadre ?</translate>
|Area=Art, Decoration, Electronics, House, Play and Hobbies
|Type=Création
|Difficulty=Easy
|Duration=2
|Duration-type=hour(s)
|Cost=10
|Currency=EUR (€)
|Tags=LED, NeoPixels, Pixel Art, Cadre photo, Matrice
}}
{{Introduction
|Introduction=<translate></translate>
}}
{{Materials
|Tuto_Attachments={{Tuto Attachments
|Attachment=Cadre_photo_Neopixel_pour_pixel_art_test_de_la_matrice_arduino.ino
}}
}}
{{Tuto Step
|Step_Title=<translate>Raccorder la matrice à l'arduino</translate>
|Step_Content=<translate>La première chose à faire est de réaliser le raccordement entre la matrice et l'arduino nano (ou uno/leonardo) pour qu'il puisse communiquer.

Il existe plusieurs modèle de matrice de LED adressage (ws2812b). De manière générale elle sont structurés de la même manière :

 

* Un câble qui achemine les information (Data In and Data Out)
* Un câble qui achemine le courant (VCC ou 5V)
* Un câble qui ferme le circuit en ramendant à la terre (Ground ou GND)

 {{Pin|• Le cable VCC est à raccorder au 5V de l'arduino

• Le cable GND est à raccorder au Ground de l'arduino

• Le cable DI doit être raccorder à la PIN 6 (pour fonctionner avec les codes proposer dans ce tutoriel).

• Le cable DO sers à raccorder une matrice avec une autre matrice. Dans se cas le DO de la matrice 1 doit être connecter avec le DI de la matrice 2.}} </translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_Capture_d_e_cran_2021-12-15_a_15.29.50.png
}}
{{Tuto Step
|Step_Title=<translate>Intégrer la matrice au cadre photo</translate>
|Step_Content=<translate>L'idée est d'afficher dans son salon ou dans son bureau, ou dans les couloirs de l'école, l'entreprise ou ailleurs ses oeuvres en pixel art. Cette étape sers à enjoliver l'objet.

Dans mon exemple j'intègre la matrice dans [https://www.leroymerlin.fr/produits/decoration-eclairage/decoration-murale/cadre-photo/cadre-photo-en-bois/cadre-brut-l-10-x-h-15-cm-bois-naturel-71670256.html un cadre 10x15 acheter chez Leroy Merlin].

Pour ajouter un effet E-Paper, j'ai ajouter une feuille de papier devant la vitre, côté regarder.

 

# Ouvrir le cadre et utiliser le dos du cadre comme patron pour découper un rectangle de papier à la bonne taille (un peu épais, du papier à dessin 80g c'est pas mal)
# '''Facultatif :''' Téléverser le code "test_de_la_matrice_arduino.ino" dans l'arduino nano (instruction à l'étape 6) pour avoir un aperçu du résultat.
# A l'aide d'un marqueur, marquer le dos du cadre pour savoir ou percer pour laisser passer les câbles et où coller la matrice
# Percer avec une perceuse, nettoyer avec un cutter
# Pisto-coller la matrice. Le but est de coller la matrice de led tout en la surélevant un petit peu pour laisser de la place aux câbles.
# Disposer le rectangle de papier devant la vitre (coter regarder) puis assembler les deux partie du cadre.
# Fermer le tout en repliant les petits ergots.</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_1.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_2.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_3.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_4.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_5.gif
|Step_Picture_05=Cadre_photo_pour_pixel_art_6.gif
}}
{{Tuto Step
|Step_Title=<translate>Dessiner un pixel art de 8x8 pixels</translate>
|Step_Content=<translate>En atelier ou pour les fans de retro gaming : dessiner ses propres oeuvres.

 

#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Créer une nouvelle image (ctrl + N) de 8 pixels par 8 pixels
#Zoomer pour que le canva prenne tout l'écran
#Sélectionner l'outil crayon (N)
#Modifier la taille du crayon à 1 pixel et la dureté à 100%
#Changer les couleurs et dessiner pixel par pixelExporter.
#Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'image ou de dessin, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}} {{Info|Pour un meilleur rendu, restreindre le nombre de couleurs utilisées et utiliser des couleurs qui contrastent bien.}}</translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_PIXEL_ART_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_PIXEL_ART_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_PIXEL_ART_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>ALTERNATIVE : Redimensionner une image en 8x8 pixels</translate>
|Step_Content=<translate>La première option est de redimensionner une image/photo existante en 8x8 pixel.

 

#Télécharger et installer [https://www.gimp.org/downloads/ GIMP à cette adresse]
#Pour cette exemple j'ai télécharger une image depuis la banque d'image libre de droit [https://pixabay.com pixabay.com]
#Ouvrir l'image en question dans GIMP (ctrl + o)
#Redimensionner l'image dans un format carré (Shift + C)
##🚨Cocher l'option "supprimer les pixels découpés"
##🚨Cocher l'option "proportion fixe", avec le ratio 1:1
#Changer la taille de l'image. Image►Echelle et taille de l'image
#Changer la taille de l'image pour 8px par 8px
#Exporter. Fichier►Exporter sous►Choisir PNG►Renommer1.png
{{Info|S'il s'agit d'une série d'image ou de dessin, nommer les fichiers comme suis : "nom1.png, nom2.png, nom3.png, etc."}}{{Warning|S'il n'y a qu'une seule image il est nécéssaire de la nommer "nom1.png"....}}

 </translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_crop_and_convert_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_crop_and_convert_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_crop_and_convert_3_.gif
|Step_Picture_03=Cadre_photo_pour_pixel_art_crop_and_convert_4_.gif
|Step_Picture_04=Cadre_photo_pour_pixel_art_crop_and_convert_5_.gif
}}
{{Tuto Step
|Step_Title=<translate>Convertir une image en code Arduino</translate>
|Step_Content=<translate>Pour faciliter et automatiser le passage d'un fichier .png à son affichage sur la matrice de LED un code python à été conçu.

'''METTRE EN PLACE L'ENVIRONNEMENT'''

 

# Installer [https://www.jetbrains.com/pycharm/ Pycharm version communauté] (gratuit)
# Créer son projet . Choisir python 3.
# Attendre que l'indexation soit terminé
# Supprimer le fichier "main.py" créer par défaut
# Glisser déposer les fichier "main.py" et "create_arduino_code.py" (fournis dans ce tutoriel) dans le projet acuel
# Ouvrir le terminal et lancer les deux commandes suivantes
<syntaxhighlight lang="python3">
pip3 install pillow
pip3 install pyperclip
</syntaxhighlight>'''UTILISER LE CODE POUR TRANSOFORMER UNE IMAGE EN CODE ARDUINO'''

Il s'agit surtout de changer ces paramètres
 <syntaxhighlight lang="python3">
#########################
##### PARAMETERS ######
#########################
# Don't forget to edit the parameters
folder_path = '/Users/Studio/Desktop/PIXEL/'
name_of_the_drawings = 'EXEMPLE'
number_of_drawings = 1 # 7 is the maximum for 8x8 matrice and arduino nano
matrix_width = 8 # this works for an 8x8 matrice
time_between_scene = 2000 # in milliseconds
brightness = 50
#########################
</syntaxhighlight> </translate>
|Step_Picture_00=Cadre_photo_pour_pixel_art_CODE_1_.gif
|Step_Picture_01=Cadre_photo_pour_pixel_art_CODE_2_.gif
|Step_Picture_02=Cadre_photo_pour_pixel_art_CODE_3_.gif
}}
{{Tuto Step
|Step_Title=<translate>Installer les bibliothèques et Téléverser le code</translate>
|Step_Content=<translate></translate>
|Step_Picture_00=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_1_.gif
|Step_Picture_01=Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_2_.gif
}}
{{Notes
|Notes=<translate></translate>
}}
{{PageLang
|Language=fr
|SourceLanguage=none
|IsTranslation=0
}}
{{Tuto Status
|Complete=Draft
}}

Fichier:Cadre photo Neopixel pour pixel art ARDUINO 2 .gif

2021-12-16T13:34:54Z

Toni2Tech : Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_2_

Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_2_

Fichier:Cadre photo Neopixel pour pixel art ARDUINO 1 .gif

2021-12-16T13:34:52Z

Toni2Tech : Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_1_

Cadre_photo_Neopixel_pour_pixel_art_ARDUINO_1_

Cadre photo Neopixel pour pixel art

2021-12-16T13:23:21Z

Toni2Tech :

Cadre photo Neopixel pour pixel art

2021-12-16T13:09:37Z

Toni2Tech :

Fichier:Cadre photo Neopixel pour pixel art test de la matrice arduino.ino

2021-12-16T12:59:30Z

Toni2Tech : Cadre_photo_Neopixel_pour_pixel_art_test_de_la_matrice_arduino

Cadre_photo_Neopixel_pour_pixel_art_test_de_la_matrice_arduino

Cadre photo Neopixel pour pixel art

2021-12-16T12:45:23Z

Toni2Tech : Toni2Tech a déplacé la page Cadre photo pour pixel art vers Cadre photo Neopixel pour pixel art

Cadre photo pour pixel art

2021-12-16T12:45:23Z

Toni2Tech : Toni2Tech a déplacé la page Cadre photo pour pixel art vers Cadre photo Neopixel pour pixel art

#REDIRECTION [[Cadre photo Neopixel pour pixel art]]

Cadre photo Neopixel pour pixel art

2021-12-16T12:42:49Z

Toni2Tech :

Fichier:Cadre photo pour pixel art 6.gif

2021-12-15T19:43:59Z

Toni2Tech : Cadre_photo_pour_pixel_art_6

Cadre_photo_pour_pixel_art_6

Fichier:Cadre photo pour pixel art 4.gif

2021-12-15T19:43:58Z

Toni2Tech : Cadre_photo_pour_pixel_art_4

Cadre_photo_pour_pixel_art_4

Fichier:Cadre photo pour pixel art 5.gif

2021-12-15T19:43:58Z

Toni2Tech : Cadre_photo_pour_pixel_art_5

Cadre_photo_pour_pixel_art_5

Fichier:Cadre photo pour pixel art 3.gif

2021-12-15T19:43:57Z

Toni2Tech : Cadre_photo_pour_pixel_art_3

Cadre_photo_pour_pixel_art_3

Fichier:Cadre photo pour pixel art 2.gif

2021-12-15T19:43:54Z

Toni2Tech : Cadre_photo_pour_pixel_art_2

Cadre_photo_pour_pixel_art_2

Fichier:Cadre photo pour pixel art 1.gif

2021-12-15T19:43:52Z

Toni2Tech : Cadre_photo_pour_pixel_art_1

Cadre_photo_pour_pixel_art_1

Fichier:Cadre photo pour pixel art Capture d e cran 2021-12-15 a 15.29.50.png

2021-12-15T19:43:33Z

Toni2Tech : Cadre_photo_pour_pixel_art_Capture_d_e_cran_2021-12-15_a_15.29.50

Cadre_photo_pour_pixel_art_Capture_d_e_cran_2021-12-15_a_15.29.50

Cadre photo Neopixel pour pixel art

2021-12-15T13:40:55Z

Toni2Tech :

Cadre photo Neopixel pour pixel art

2021-12-15T13:39:36Z

Toni2Tech :

Cadre photo Neopixel pour pixel art

2021-12-15T13:37:34Z

Toni2Tech :

Cadre photo Neopixel pour pixel art

2021-12-15T13:19:04Z

Toni2Tech :

Fichier:Cadre photo pour pixel art CODE 3 .gif

2021-12-15T13:17:39Z

Toni2Tech : Cadre_photo_pour_pixel_art_CODE_3_

Cadre_photo_pour_pixel_art_CODE_3_

Fichier:Cadre photo pour pixel art CODE 2 .gif

2021-12-15T13:17:38Z

Toni2Tech : Cadre_photo_pour_pixel_art_CODE_2_

Cadre_photo_pour_pixel_art_CODE_2_

Fichier:Cadre photo pour pixel art CODE 1 .gif

2021-12-15T13:17:37Z

Toni2Tech : Cadre_photo_pour_pixel_art_CODE_1_

Cadre_photo_pour_pixel_art_CODE_1_

Fichier:Cadre photo pour pixel art PIXEL ART 2 .gif

2021-12-15T13:17:04Z

Toni2Tech : Cadre_photo_pour_pixel_art_PIXEL_ART_2_

Cadre_photo_pour_pixel_art_PIXEL_ART_2_

Fichier:Cadre photo pour pixel art PIXEL ART 3 .gif

2021-12-15T13:17:04Z

Toni2Tech : Cadre_photo_pour_pixel_art_PIXEL_ART_3_

Cadre_photo_pour_pixel_art_PIXEL_ART_3_

Fichier:Cadre photo pour pixel art PIXEL ART 1 .gif

2021-12-15T13:17:01Z

Toni2Tech : Cadre_photo_pour_pixel_art_PIXEL_ART_1_

Cadre_photo_pour_pixel_art_PIXEL_ART_1_

Fichier:Cadre photo pour pixel art crop and convert 5 .gif

2021-12-15T13:15:41Z

Toni2Tech : Cadre_photo_pour_pixel_art_crop_and_convert_5_

Cadre_photo_pour_pixel_art_crop_and_convert_5_

Fichier:Cadre photo pour pixel art crop and convert 3 .gif

2021-12-15T13:15:40Z

Toni2Tech : Cadre_photo_pour_pixel_art_crop_and_convert_3_

Cadre_photo_pour_pixel_art_crop_and_convert_3_

Fichier:Cadre photo pour pixel art crop and convert 4 .gif

2021-12-15T13:15:40Z

Toni2Tech : Cadre_photo_pour_pixel_art_crop_and_convert_4_

Cadre_photo_pour_pixel_art_crop_and_convert_4_

Fichier:Cadre photo pour pixel art crop and convert 2 .gif

2021-12-15T13:15:39Z

Toni2Tech : Cadre_photo_pour_pixel_art_crop_and_convert_2_

Cadre_photo_pour_pixel_art_crop_and_convert_2_

Fichier:Cadre photo pour pixel art crop and convert 1 .gif

2021-12-15T13:15:38Z

Toni2Tech : Cadre_photo_pour_pixel_art_crop_and_convert_1_

Cadre_photo_pour_pixel_art_crop_and_convert_1_

Cadre photo Neopixel pour pixel art

2021-12-15T09:48:19Z

Toni2Tech :

Fichier:Cadre photo pour pixel art 2021-12-15 10.47.43.gif

2021-12-15T09:48:09Z

Toni2Tech : Cadre_photo_pour_pixel_art_2021-12-15_10.47.43

Cadre_photo_pour_pixel_art_2021-12-15_10.47.43

Cadre photo Neopixel pour pixel art

2021-12-15T09:47:25Z

Toni2Tech :

Fichier:Cadre photo pour pixel art 2021-12-15 10.41.34.gif

2021-12-15T09:47:09Z

Toni2Tech : Cadre_photo_pour_pixel_art_2021-12-15_10.41.34

Cadre_photo_pour_pixel_art_2021-12-15_10.41.34

Cadre photo Neopixel pour pixel art

2021-12-15T09:43:57Z

Toni2Tech :

Fichier:Cadre photo pour pixel art 2021-12-15 10.42.44.gif

2021-12-15T09:43:38Z

Toni2Tech : Cadre_photo_pour_pixel_art_2021-12-15_10.42.44

Cadre_photo_pour_pixel_art_2021-12-15_10.42.44

Cadre photo Neopixel pour pixel art

2021-12-12T10:21:41Z

Toni2Tech :