# Vitrine pixels — l'électronique Workshop **« Vitrine pixels »**, ESADHaR, 2026-2027. Le but : fabriquer un **écran de pixels lumineux** pour une vitrine, une matrice de LED de couleur de **7 × 39 pixels**, avec un écart de **1 cm** entre les pixels. Des étudiantes et étudiants en art y affichent leurs animations, dessinées dans **Krita** ou écrites en code. Ce dossier rassemble tout le volet électronique : montages, programmes, schémas et modes d'emploi. Il est écrit pour des **débutants** : pas besoin de savoir souder, programmer ou lire un schéma pour commencer, tout est expliqué pas à pas, en français. ![De Krita à la matrice](8x32%20PI/schemas/chaine_krita_matrice.svg) --- ## Sommaire 1. [Le parcours en trois étapes](#1-le-parcours-en-trois-étapes) 2. [Par où commencer ?](#2-par-où-commencer-) 3. [Les trois dossiers](#3-les-trois-dossiers) 4. [Les idées à retenir](#4-les-idées-à-retenir) 5. [Les règles de sécurité communes](#5-les-règles-de-sécurité-communes) 6. [Les logiciels utilisés](#6-les-logiciels-utilisés) 7. [Où en est le projet ?](#7-où-en-est-le-projet-) 8. [Vers la matrice finale 7 × 39](#8-vers-la-matrice-finale-7--39) 9. [Organisation des fichiers](#9-organisation-des-fichiers) --- ## 1. Le parcours en trois étapes On ne construit pas un écran de 273 pixels du premier coup. Le projet avance par étapes, chacune avec son dossier, sa documentation et son programme : | | Dossier | Quoi | Cerveau | On apprend… | |---|---|---|---|---| | **1** | [`matrice_3x3/`](matrice_3x3/README.md) | **9 pixels** soudés à la main : LED RGB classiques, transistors, résistances | Arduino Uno | souder, lire un schéma, le **multiplexage** (allumer une ligne à la fois, très vite) | | **2** | [`matrice_8x32/`](matrice_8x32/README.md) | un panneau souple de **256 LED « intelligentes »** (WS2812B), 5 fils à brancher | Arduino Uno | les LED adressables, la **chaîne** de LED, l'alimentation, dessiner en code | | **3** | [`8x32 PI/`](8x32%20PI/README.md) | le même panneau, **posé debout**, piloté par un ordinateur | Raspberry Pi | jouer les **animations Krita** telles quelles, une **page web** pour gérer la vitrine, le mode « vitrine » autonome | Chaque étape s'appuie sur la précédente : la fonction `XY()` qui retrouve une LED à partir de sa position, par exemple, apparaît à l'étape 2 en C++ et est reprise telle quelle, en Python, à l'étape 3. --- ## 2. Par où commencer ? | Vous êtes… | Lisez d'abord | Puis | |---|---|---| | dans l'**équipe design** (Krita) | [Guide Krita](8x32%20PI/GUIDE_KRITA.md) : dessiner en 8 × 32 pour des LED | [Interface web](8x32%20PI/INTERFACE_WEB.md) : déposer et ordonner vos animations | | dans l'**équipe électronique** | [Maquette 3 × 3](matrice_3x3/README.md), puis [panneau 8 × 32 avec Arduino](matrice_8x32/README.md) | [Raspberry Pi : montage](8x32%20PI/README.md) et [installation](8x32%20PI/INSTALLATION_PI.md) | | curieux de **code** | les programmes Arduino [`matrice_3x3.ino`](matrice_3x3/matrice_3x3.ino) et [`matrice_8x32.ino`](matrice_8x32/matrice_8x32.ino), très commentés | [Coder en Python](8x32%20PI/CODER_EN_PYTHON.md) | | responsable de la **vitrine** | [Mode vitrine](8x32%20PI/MODE_VITRINE.md) : démarrage automatique, coupures de courant, horaires | [Interface web](8x32%20PI/INTERFACE_WEB.md) | > **Vous voulez juste mettre une animation en vitrine ?** Exportez-la de > Krita en GIF de **8 × 32 pixels**, ouvrez **http://172.16.50.27** depuis le > Wi-Fi de l'école, et déposez-la. C'est tout. --- ## 3. Les trois dossiers ### Étape 1 — [`matrice_3x3/`](matrice_3x3/README.md) : la maquette multiplexée ![Implantation de la maquette 3 × 3](matrice_3x3/schemas/implantation_plaque.svg) 9 LED RGB à cathode commune, soudées sur une plaque à pastilles, et 3 transistors qui allument les lignes une par une. L'Arduino balaie les 3 lignes environ 333 fois par seconde : l'œil voit une image fixe. - **Mode d'emploi** : [`README.md`](matrice_3x3/README.md) (matériel, reconnaître les composants, souder pas à pas, dépannage). - **Programme** : [`matrice_3x3.ino`](matrice_3x3/matrice_3x3.ino), 6 animations (test des pixels, aplats, chenille, damier, balayages, scintillement). - **Schémas** : schéma électrique, plan d'implantation recto-verso, fichier Fritzing [`matrice_3x3.fzz`](matrice_3x3/matrice_3x3.fzz) ; régénérables par les scripts du dossier [`outils/`](matrice_3x3/outils/). ### Étape 2 — [`matrice_8x32/`](matrice_8x32/README.md) : le panneau WS2812B et l'Arduino ![Branchement du panneau 8 × 32 à l'Arduino](matrice_8x32/schema_branchement.svg) Un panneau souple de 256 LED WS2812B : chaque LED contient une puce, et toutes sont reliées en une seule chaîne. Un seul fil de données suffit. L'énergie vient d'une alimentation d'établi réglée sur 5 V. - **Mode d'emploi** : [`README.md`](matrice_8x32/README.md) (repérer les fils, régler l'alimentation, brancher, téléverser, vérifier l'orientation). - **Programme** : [`matrice_8x32.ino`](matrice_8x32/matrice_8x32.ino), avec la bibliothèque FastLED : arc-en-ciel, pluie, pixel art qui défile, étincelles. ### Étape 3 — [`8x32 PI/`](8x32%20PI/README.md) : le Raspberry Pi, Krita et la vitrine ![L'interface web de la vitrine](8x32%20PI/schemas/interface_web.png) Le même panneau, posé **debout** (8 de large, 32 de haut), piloté par un Raspberry Pi. Le Pi sait lire des fichiers : les animations Krita sont jouées sans conversion, et une **page web** permet de les déposer et de les ordonner depuis un téléphone. | Document | Pour qui | Contenu | |---|---|---| | [`README.md`](8x32%20PI/README.md) | électronique | Arduino ou Pi, montage, le problème des 3,3 V, test, interface web, dépannage | | [`INSTALLATION_PI.md`](8x32%20PI/INSTALLATION_PI.md) | électronique | de la carte SD vide à la matrice allumée | | [`GUIDE_KRITA.md`](8x32%20PI/GUIDE_KRITA.md) | design | dessiner, animer, exporter et vérifier pour les LED | | [`INTERFACE_WEB.md`](8x32%20PI/INTERFACE_WEB.md) | tous | la page web : déposer, ordonner, jouer | | [`MODE_VITRINE.md`](8x32%20PI/MODE_VITRINE.md) | vitrine | démarrage automatique, coupures de courant, horaires, entretien | | [`CODER_EN_PYTHON.md`](8x32%20PI/CODER_EN_PYTHON.md) | code | Python pour qui connaît l'Arduino, exercices | Les programmes : [`lecteur.py`](8x32%20PI/lecteur.py) (joue les animations), [`serveur_web.py`](8x32%20PI/serveur_web.py) (la page web), [`matrice.py`](8x32%20PI/matrice.py) (le moteur, avec un **simulateur** pour travailler sans matériel), [`test_matrice.py`](8x32%20PI/test_matrice.py), [`mes_animations.py`](8x32%20PI/mes_animations.py), et des outils pour vérifier un export Krita ou redessiner les schémas. --- ## 4. Les idées à retenir **Le multiplexage** (étape 1) : avec peu de fils, on commande beaucoup de LED en n'allumant qu'**une ligne à la fois**, très vite. L'œil, trop lent, voit une image fixe : c'est la **persistance rétinienne**. Simple pour 9 pixels, trop lourd pour 273 (il faudrait 117 fils de couleur et de gros transistors). **Les LED adressables** (étapes 2 et 3) : chaque LED a sa puce. On envoie une longue liste de couleurs dans **un seul fil** ; la 1re LED garde la 1re couleur et passe le reste à la suivante, et ainsi de suite. Les LED sont câblées en **serpentin** (une colonne descend, la suivante remonte) : la fonction `XY()` traduit une position (x, y) en numéro de LED. **L'énergie et l'information sont séparées** : l'Arduino ou le Pi envoient les couleurs, mais l'énergie vient d'une **alimentation** à part. 256 LED en blanc à fond demandent plus de 15 A ; un port USB en donne 0,5. Le programme **limite le courant** pour ne jamais dépasser ce que l'alimentation fournit. **L'écran et les LED ne voient pas les couleurs pareil** : les couleurs sombres disparaissent, les couleurs saturées rendent très bien, le noir est une LED éteinte. Le programme applique une **correction gamma** pour que la matrice ressemble au dessin de Krita. **Microcontrôleur ou ordinateur** : l'Arduino exécute un seul programme, sans système, et démarre instantanément ; idéal pour apprendre. Le Raspberry Pi est un vrai ordinateur (Linux, fichiers, réseau) ; idéal pour diffuser les créations d'une équipe. --- ## 5. Les règles de sécurité communes 1. **5 volts, pas plus** pour les LED WS2812B. On règle l'alimentation **avant** de brancher, et on n'y touche plus. 2. **Jamais le 5 V de l'Arduino ou du Pi vers le panneau** : il est alimenté uniquement par son alimentation. 3. **Toutes les masses (GND) reliées ensemble** : sinon le signal de données n'est pas compris. 4. **On câble hors tension**, et on fait **vérifier** avant d'allumer. 5. **Jamais de 5 V sur une broche du Raspberry Pi** : elles supportent 3,3 V au maximum. 6. **Le 230 V** (alimentation fixe de la vitrine) est câblé ou vérifié par une personne compétente. 7. **Pas plus de 3 flashs par seconde** dans les animations : une vitrine est vue par tout le monde, y compris des personnes épileptiques. En cas de chaleur ou d'odeur de brûlé : **on coupe tout** et on appelle l'encadrant. --- ## 6. Les logiciels utilisés | Logiciel | Pour quoi | Étapes | |---|---|---| | [IDE Arduino](https://www.arduino.cc/en/software) | écrire et téléverser les programmes Arduino | 1, 2 | | Bibliothèques **TimerOne** et **FastLED** | multiplexage par interruption ; pilotage des WS2812B | 1 ; 2 | | [Krita](https://krita.org) | dessiner et animer en pixel art | 3 | | [Python 3](https://www.python.org) + **Pillow** | lecteur, outils de vérification, simulateur | 3 | | **rpi_ws281x**, **Flask** | pilotage des LED par le Pi ; la page web | 3 | | [Raspberry Pi Imager](https://www.raspberrypi.com/software/) | préparer la carte SD du Pi | 3 | | [Fritzing](https://fritzing.org) (facultatif) | ouvrir le schéma de la maquette 3 × 3 | 1 | Tout est libre et gratuit. --- ## 7. Où en est le projet ? *Mis à jour le 8 octobre 2026.* - ✅ **Maquette 3 × 3** : programme et documentation prêts. - ✅ **Panneau 8 × 32 avec Arduino** : programme et documentation prêts. - ✅ **Raspberry Pi** : un Pi 3 Model B (Raspbian 11) est installé et mis à jour ; le lecteur, la page web et les exemples y tournent. Adresse Wi-Fi : **http://172.16.50.27** (câble : 172.16.7.199). L'équipe design y dépose déjà ses premières animations. - ✅ **Matrice debout** : tout le logiciel travaille en 8 × 32 (`ROTATION = 90`). - ⏳ **Premier test sur la vraie matrice** avec le Pi : régler le sens de l'image (`INVERSER_X` / `INVERSER_Y`) avec `test_matrice.py`, puis activer le lecteur au démarrage. - ⏳ **Adaptateur de niveau 74AHCT125** : pas disponible pendant le workshop ; on utilise le **montage A** (panneau alimenté en 4,4 V) ou le **montage B** (un transistor). Voir le [README du Pi, partie 4](8x32%20PI/README.md#4-le-problème-des-33-v-et-le-74ahct125). - ⏳ **Mode vitrine** : protection contre les coupures de courant (overlay), mot de passe de la page web, adresse fixe à demander au service informatique. --- ## 8. Vers la matrice finale 7 × 39 Pistes et décisions à ce jour (le détail technique est dans [`CLAUDE.md`](CLAUDE.md)) : - **LED WS2812B** plutôt que du multiplexage : à 273 pixels, le multiplexage demanderait 117 fils de couleur, des circuits spécialisés et de gros transistors, pour une image 7 fois moins lumineuse. - **Format envisagé** : un panneau 8 × 32 + un panneau 8 × 8, chaînés, au pas de 10 mm (soit 8 × 40, dont on n'utilise que 7 × 39). La 8e rangée reste éteinte : on ne la coupe pas, ça casserait la chaîne. - **Alimentation** : 5 V, environ 10 A, réinjectée à plusieurs endroits de la chaîne ; limite de courant réglée dans le programme. - **Cerveau** : le Raspberry Pi de l'étape 3 ; le programme s'adapte en changeant quelques réglages dans `matrice.py`. - **À préciser** : sens de pose (couché ou debout) de la matrice finale, choix définitif des panneaux (ou d'une bande à 100 LED/m). --- ## 9. Organisation des fichiers ``` vitrine pixel electronique/ ├── README.md ← ce document ├── CLAUDE.md ← notes techniques du projet (décisions, chiffres clés) │ ├── matrice_3x3/ ← étape 1 : maquette multiplexée, Arduino │ ├── README.md │ ├── matrice_3x3.ino │ ├── matrice_3x3.fzz (Fritzing) │ ├── schemas/ schéma électrique, plan d'implantation │ └── outils/ scripts qui redessinent les schémas │ ├── matrice_8x32/ ← étape 2 : panneau WS2812B, Arduino │ ├── README.md │ ├── matrice_8x32.ino │ ├── schema_branchement.svg │ └── photos du panneau │ └── 8x32 PI/ ← étape 3 : panneau WS2812B debout, Raspberry Pi ├── README.md montage, test, interface web, dépannage ├── INSTALLATION_PI.md GUIDE_KRITA.md INTERFACE_WEB.md ├── MODE_VITRINE.md CODER_EN_PYTHON.md ├── matrice.py le moteur (+ simulateur) ├── lecteur.py joue les animations en boucle ├── serveur_web.py la page web (+ dossier web/) ├── test_matrice.py mes_animations.py ├── animations/ exemples (GIF, APNG, séquence de PNG) ├── krita/ palette de couleurs pour les LED ├── outils/ vérifier un export, générer exemples et schémas ├── schemas/ branchements, brochage, chaîne Krita → matrice └── installation/ script d'installation et services du Pi ```