README général du projet, interface web dans le README du Pi, Pillow récente

- README.md (racine) : présentation du projet Vitrine pixels, parcours en
  trois étapes, par où commencer selon le profil, idées clés, sécurité,
  logiciels, état du projet, pistes pour la matrice 7 × 39, arborescence.
- 8x32 PI/README.md : nouvelle partie 10 sur l'interface web (capture
  d'écran, actions, adresses Wi-Fi / câble, architecture, services,
  réglages et sécurité) ; parties suivantes renumérotées, dépannage complété.
- installer.sh et INSTALLATION_PI.md : installer une Pillow récente dans
  ~/vitrine-env (la Pillow 8 de Raspbian 11 décodait mal les GIF optimisés).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

8x32 PI/INSTALLATION_PI.md

@@ -186,9 +186,13 @@ python3 -m venv --system-site-packages ~/vitrine-env
 ```
 
 ```bash
-~/vitrine-env/bin/pip install rpi_ws281x
+~/vitrine-env/bin/pip install rpi_ws281x pillow
 ```
 
+(Pillow est aussi installé par `apt`, mais une version **récente** dans la
+boîte est indispensable : les anciennes, comme la Pillow 8 de Raspbian 11,
+décodent mal certains GIF.)
+
 C'est pour ça qu'on lance ensuite les programmes avec `~/vitrine-env/bin/python`
 et pas simplement `python3` : seul ce Python-là connaît `rpi_ws281x`.
 

8x32 PI/README.md

@@ -31,9 +31,10 @@ dessinées dans **Krita** sont jouées telles quelles, sans les traduire en code
 7. [Préparer le Raspberry Pi](#7-préparer-le-raspberry-pi)
 8. [Premier allumage : le test](#8-premier-allumage--le-test)
 9. [Jouer les animations](#9-jouer-les-animations)
-10. [Ça ne marche pas ?](#10-ça-ne-marche-pas-)
-11. [Petit lexique](#11-petit-lexique)
-12. [Les fichiers du dossier](#12-les-fichiers-du-dossier)
+10. [L'interface web : piloter la vitrine depuis un navigateur](#10-linterface-web--piloter-la-vitrine-depuis-un-navigateur)
+11. [Ça ne marche pas ?](#11-ça-ne-marche-pas-)
+12. [Petit lexique](#12-petit-lexique)
+13. [Les fichiers du dossier](#13-les-fichiers-du-dossier)
 
 ---
 
@@ -381,7 +382,7 @@ puis **Ctrl + O**, **Entrée** (enregistrer) et **Ctrl + X** (quitter).
 chaîne.
 
 **3. Les couleurs pleines** : rouge, vert, bleu, puis blanc. Si le rouge
-apparaît vert, l'ordre des couleurs est faux (voir partie 10).
+apparaît vert, l'ordre des couleurs est faux (voir partie 11).
 
 ---
 
@@ -401,8 +402,9 @@ dans le dossier des animations :
 | Séquence de PNG | `03_vague/` contenant `vague_0000.png`, `vague_0001.png`… | la vitesse est dans `images_par_seconde.txt` (sinon 12) |
 | Image fixe | `logo.png` | affichée 10 secondes |
 
-Le dossier lu est **`/boot/firmware/animations`** s'il existe (créé par
-l'installation, voir [MODE_VITRINE.md](MODE_VITRINE.md)), sinon le dossier
+Le dossier lu est **`/boot/firmware/animations`** (ou **`/boot/animations`**
+sur Raspbian 11, comme sur le Pi de l'école) s'il existe : il est créé par
+l'installation, voir [MODE_VITRINE.md](MODE_VITRINE.md). Sinon, c'est le dossier
 [`animations`](animations/) à côté du programme. Il est **relu à chaque tour** :
 on peut ajouter un GIF pendant que ça tourne.
 
@@ -434,7 +436,116 @@ Une fenêtre s'ouvre avec 256 ronds de couleur qui imitent la matrice.
 
 ---
 
-## 10. Ça ne marche pas ?
+## 10. L'interface web : piloter la vitrine depuis un navigateur
+
+Le Pi fait aussi tourner un **petit site web**. Depuis un ordinateur ou un
+téléphone connecté au même réseau, on ouvre l'adresse du Pi dans un
+navigateur, et on gère la vitrine sans terminal ni carte SD.
+
+![L'interface web, sur le Pi de l'école](schemas/interface_web.png)
+
+### Ce qu'on peut faire
+
+| Action | Comment |
+|---|---|
+| **Déposer** des GIF, PNG animés, WebP, images fixes | cadre « Un ou plusieurs fichiers » |
+| **Déposer une séquence de PNG** exportée de Krita | cadre « Une séquence de PNG » (+ nom et images/s) |
+| **Voir un aperçu animé** de chaque animation | il est fabriqué comme le lecteur verra l'image (taille adaptée, rotation) |
+| **Changer l'ordre** de lecture | ▲ ▼ (les fichiers sont renumérotés `01_`, `02_`…) |
+| **Retirer** une animation de la boucle, sans la supprimer | ⏸ (elle passe dans « Pas jouées ») ; ＋ pour la remettre |
+| **Jouer tout de suite** une animation, ou **passer** à la suivante | ▶ et **Suivante ⏭** |
+| **Supprimer** | ✕ : elle va à la corbeille ; « Vider » efface pour de bon |
+| **Savoir ce que joue la matrice** | en haut de la page, mis à jour toutes les 2 secondes |
+
+Chaque fichier envoyé est **ouvert et vérifié** avant d'être accepté : un
+fichier abîmé ou d'un format inconnu est refusé, une mauvaise taille est
+signalée par ⚠. Les noms sont nettoyés (pas d'accents ni d'espaces).
+
+### L'adresse de la page
+
+Le Pi de l'école a **deux adresses**, une par réseau. Le réseau Wi-Fi et le
+réseau filaire de l'école ne communiquent pas entre eux : prenez celle de
+**votre** réseau.
+
+| Vous êtes connecté… | Adresse |
+|---|---|
+| en **Wi-Fi** (téléphone, portable) | **http://172.16.50.27** |
+| par **câble** | http://172.16.7.199 |
+
+Ces adresses sont distribuées par le réseau et **peuvent changer** : les
+adresses du moment sont toujours écrites **en bas de la page web**, et
+`hostname -I` les affiche sur le Pi.
+
+### Comment c'est construit
+
+Deux programmes tournent **en même temps**, chacun dans son propre
+**service** (un programme que Linux lance au démarrage et relance s'il
+s'arrête) :
+
+```
+  téléphone / ordinateur
+          │  (réseau, page web)
+          ▼
+  serveur_web.py ──── range les fichiers ───▶  /boot/animations/
+  service vitrine-web                            01_…, 02_…, .desactivees/, .corbeille/
+          │                                              │
+          │ « post-it » dans /run/vitrine-pixels/        │ relu à chaque tour
+          │ (jouer maintenant, suivante, en cours)       ▼
+          └──────────────────────────────────▶  lecteur.py ──▶ matrice
+                                                 service vitrine-pixels
+```
+
+- [`serveur_web.py`](serveur_web.py) est écrit avec **Flask**, une
+  bibliothèque Python pour fabriquer des sites web. La page elle-même est dans
+  [`web/page.html`](web/page.html), son style dans [`web/style.css`](web/style.css).
+- Le serveur **ne parle jamais à la matrice** : il range les fichiers dans le
+  dossier des animations, et laisse des « post-it » (de tout petits fichiers,
+  en mémoire vive) que le lecteur consulte en permanence. Ainsi, une erreur
+  dans la page web ne peut pas figer la vitrine.
+- « Pas jouées » et la corbeille sont des sous-dossiers dont le nom commence
+  par un point (`.desactivees`, `.corbeille`) : le lecteur les ignore.
+
+### Démarrer, arrêter, surveiller
+
+L'installation (`installation/installer.sh`) installe les deux services, et
+**active l'interface web** tout de suite. Le lecteur, lui, s'active à la main
+une fois la matrice testée (partie 8).
+
+| Je veux… | Commande (sur le Pi) |
+|---|---|
+| activer le lecteur au démarrage | `sudo systemctl enable --now vitrine-pixels` |
+| savoir si l'interface web tourne | `systemctl status vitrine-web` |
+| la relancer (après une modification) | `sudo systemctl restart vitrine-web` |
+| voir ses messages et erreurs en direct | `journalctl -u vitrine-web -f` |
+| la lancer à la main, pour tester | `sudo systemctl stop vitrine-web` puis `sudo ~/vitrine-env/bin/python serveur_web.py` |
+
+**Sur son ordinateur**, sans Pi : `python3 serveur_web.py --port 8080`, puis
+ouvrir <http://localhost:8080>. Avec `python3 lecteur.py --simulateur` dans un
+autre terminal, la fenêtre du simulateur réagit aux boutons de la page.
+(Il faut Flask : `pip install flask`.)
+
+### Réglages et sécurité
+
+En haut de [`serveur_web.py`](serveur_web.py) :
+
+| Réglage | Valeur | À quoi ça sert |
+|---|---|---|
+| `MOT_DE_PASSE` | `None` | ⚠️ sans mot de passe, **toute personne sur le réseau** peut ajouter ou supprimer des animations. Ex. `"pixels"` : le navigateur le demandera |
+| `PORT` | `80` | le port web habituel ; un autre port s'ajoute à l'adresse (`http://172.16.50.27:8080`) |
+| `TAILLE_MAX_MO` | `50` | taille maximum d'un envoi |
+
+> **Avec la protection contre les coupures de courant** (overlay, voir
+> [MODE_VITRINE.md](MODE_VITRINE.md#4-survivre-aux-coupures-de-courant)), si la
+> partition de démarrage est protégée en écriture, la page ne peut plus rien
+> modifier : elle affiche une erreur, mais « jouer » et « suivante » marchent
+> toujours.
+
+Le mode d'emploi détaillé, pour l'équipe design, est dans
+**[INTERFACE_WEB.md](INTERFACE_WEB.md)**.
+
+---
+
+## 11. Ça ne marche pas ?
 
 | Symptôme | Causes probables | Solution |
 |---|---|---|
@@ -447,6 +558,8 @@ Une fenêtre s'ouvre avec 256 ronds de couleur qui imitent la matrice.
 | **`ModuleNotFoundError: rpi_ws281x`** | Mauvais Python | Utiliser `~/vitrine-env/bin/python`, pas `python3` |
 | | Installation incomplète | Relancer `bash installation/installer.sh` |
 | **Le simulateur s'ouvre au lieu de la matrice** | Même cause : `rpi_ws281x` introuvable | Idem |
+| **La page web ne s'ouvre pas** | Mauvaise adresse pour votre réseau (Wi-Fi ou câble) | Voir partie 10 ; adresses du moment : `hostname -I` |
+| **Un GIF s'affiche en morceaux ou avec un fond coloré** | Pillow trop ancienne dans `~/vitrine-env` | `~/vitrine-env/bin/pip install --upgrade pillow`, puis relancer les services |
 | **Ça marche, puis tout se fige ou scintille quand on branche un casque / lance un son** | La sortie audio utilise le même circuit que GPIO 18 | Vérifier `dtparam=audio=off` dans `/boot/firmware/config.txt`, redémarrer |
 | **Couleurs aléatoires, scintillement** | Puce absente ou de type HC (sans T) | Vérifier les lettres sur la puce |
 | | Montage sans puce (solution A) | Baisser encore un peu l'alimentation (4,2 V), raccourcir le fil vert, ou passer à la solution B |
@@ -464,7 +577,7 @@ Pour voir ce que fait le lecteur quand il tourne tout seul (mode vitrine) :
 
 ---
 
-## 11. Petit lexique
+## 12. Petit lexique
 
 | Mot | Signification |
 |---|---|
@@ -488,7 +601,7 @@ Pour voir ce que fait le lecteur quand il tourne tout seul (mode vitrine) :
 
 ---
 
-## 12. Les fichiers du dossier
+## 13. Les fichiers du dossier
 
 | Fichier | Pour qui | Contenu |
 |---|---|---|
@@ -505,6 +618,7 @@ Pour voir ce que fait le lecteur quand il tourne tout seul (mode vitrine) :
 | [`test_matrice.py`](test_matrice.py) | | test de branchement et d'orientation |
 | [`mes_animations.py`](mes_animations.py) | | les animations de l'Arduino, traduites en Python |
 | [`animations/`](animations/) | | exemples : GIF, séquence de PNG, APNG |
+| [`schemas/`](schemas/) | | schémas de branchement, brochage de la puce, chaîne Krita → matrice, capture de l'interface web |
 | `apercus/` | design | créé par `verifier_animation.py` : aperçus « façon LED » à partager |
 | [`krita/palette_vitrine_pixels.gpl`](krita/palette_vitrine_pixels.gpl) | design | palette de couleurs adaptée aux LED, à importer dans Krita |
 | [`outils/verifier_animation.py`](outils/verifier_animation.py) | design | vérifie un export et crée un aperçu « façon LED » |
@@ -516,10 +630,11 @@ Pour voir ce que fait le lecteur quand il tourne tout seul (mode vitrine) :
 
 ## Pour aller plus loin
 
-- **La matrice finale 7 × 39** : changez `LARGEUR`, `HAUTEUR` et la fonction
-  `XY()` dans `matrice.py` ; il faudra une alimentation 5 V de 10 A environ.
-  Les dessins Krita se feront alors en 39 × 7.
+- **La matrice finale 7 × 39** : changez `COLONNES_PANNEAU`,
+  `LIGNES_PANNEAU` et, si besoin, `ROTATION` dans `matrice.py` ; il faudra une
+  alimentation 5 V de 10 A environ.
 - **Plusieurs matrices** : la bibliothèque sait piloter deux chaînes à la fois
   (GPIO 18 et GPIO 13).
-- **Interactivité** : le Pi peut lire un bouton, un capteur de présence, une
-  page web… et changer d'animation en conséquence.
+- **Interactivité** : la page web sait déjà déclencher une animation. Sur le
+  même principe (un « post-it » pour le lecteur), un bouton ou un capteur de
+  présence branché sur le Pi pourrait en déclencher une quand quelqu'un passe.

8x32 PI/installation/installer.sh

@@ -49,6 +49,10 @@ if [ ! -d "$ENV" ]; then
     python3 -m venv --system-site-packages "$ENV"
 fi
 "$ENV/bin/pip" install --upgrade rpi_ws281x
+# Une Pillow récente DANS la boîte : celle des systèmes anciens (Pillow 8 sur
+# Raspbian 11) décode mal les GIF « optimisés » (images partielles) : le cœur
+# n'apparaissait qu'en morceaux sur la matrice.
+"$ENV/bin/pip" install --upgrade pillow
 
 echo
 echo "=== 3/5 Désactivation de la sortie audio (elle utilise le même circuit que les LED)"