8x32 PI : interface web, matrice verticale, compatibilité Raspbian 11

- Interface web (serveur_web.py, Flask, gabarits dans web/) : dépôt de GIF,
  PNG animés et séquences de PNG, aperçus animés, ordre de lecture,
  activer / désactiver, corbeille, « jouer maintenant » et « suivante ».
  Service systemd vitrine-web, activé par installer.sh.
- Lecteur : réagit aux demandes de la page web (post-it dans
  /run/vitrine-pixels), écrit l'animation en cours, éteint la matrice
  proprement sur SIGTERM.
- Matrice posée debout : réglage ROTATION (90 = image 8 × 32) dans
  matrice.py ; images couchées tournées automatiquement ; exemples,
  animations codées, aperçus et page web adaptés au format vertical.
- Compatibilité Raspbian 11 Bullseye : partition /boot, Pillow 8.1, Flask 1.1.
- Doc : nouveau guide INTERFACE_WEB.md ; README, GUIDE_KRITA, MODE_VITRINE,
  CODER_EN_PYTHON mis à jour (format 8 × 32, adresses Wi-Fi / câble du Pi).

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

8x32 PI/GUIDE_KRITA.md

@@ -6,7 +6,8 @@ le fichier dans le dossier des animations.
 
 ![De Krita à la matrice](schemas/chaine_krita_matrice.svg)
 
-> **En une phrase** : un document de **32 × 8 pixels**, un pixel = une LED,
+> **En une phrase** : un document **vertical** de **8 × 32 pixels** (8 de
+> large, 32 de haut), un pixel = une LED,
 > des couleurs **franches**, un fond **noir**, et un export en **séquence de
 > PNG** (ou en GIF).
 
@@ -29,26 +30,47 @@ le fichier dans le dossier des animations.
 
 ## 1. Comprendre la « toile »
 
-La matrice est un écran de **32 colonnes × 8 lignes** = 256 pixels. Chaque
+La matrice est posée **debout** dans la vitrine : c'est un écran de
+**8 colonnes × 32 lignes** = 256 pixels, comme une enseigne verticale. Chaque
 pixel est une LED, et les LED sont espacées de **1 cm** : la matrice mesure
-32 × 8 cm.
+8 cm de large et 32 cm de haut.
 
 ```
-x →  0                              31
-y ↓ ┌────────────────────────────────┐
-  0 │■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ │
-    │                                │   8 lignes
-  7 │■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ │
-    └────────────────────────────────┘
-                32 colonnes
+   x → 0 . . . . . . 7
+ y ↓ ┌─────────────────┐
+   0 │ ■ ■ ■ ■ ■ ■ ■ ■ │
+     │ ■ ■ ■ ■ ■ ■ ■ ■ │
+     │        …        │     32 lignes
+     │ ■ ■ ■ ■ ■ ■ ■ ■ │
+  31 │ ■ ■ ■ ■ ■ ■ ■ ■ │
+     └─────────────────┘
+          8 colonnes
 ```
 
 Quelques ordres de grandeur pour se repérer :
 
-- un caractère lisible fait **5 pixels de large × 7 de haut** : on écrit
-  **5 lettres** à la fois, pas plus. Un texte plus long doit **défiler** ;
-- un visage simple tient dans **8 × 8** ;
-- une ligne de 1 pixel d'épaisseur se voit très bien : c'est une rangée de LED.
+- un caractère lisible fait **5 pixels de large × 7 de haut**. Deux façons
+  d'écrire :
+  - lettres **empilées**, les unes sous les autres, comme une enseigne
+    d'hôtel : **4 lettres** visibles à la fois (4 × 8 = 32) ;
+  - texte **couché**, qui se lit en penchant la tête, comme le titre au dos
+    d'un livre : **5 lettres** à la fois.
+
+  Un texte plus long doit **défiler** (vers le haut) ;
+- un visage simple tient dans **8 × 8** : il y a la place pour 4 visages
+  l'un au-dessus de l'autre ;
+- une ligne de 1 pixel d'épaisseur se voit très bien : c'est une rangée de LED ;
+- **jouez avec la verticalité** : ce qui monte, tombe, coule, grimpe, se remplit
+  (une pluie, une bulle, un thermomètre, une fusée, une liane…).
+
+> **Dessiné couché par erreur ?** Une image de 32 × 8 (couchée) est quand même
+> jouée : le lecteur la fait tourner d'un quart de tour, et elle se lit alors
+> de bas en haut. Pratique pour un texte « dos de livre », mais pensez en
+> vertical dès le départ, c'est plus beau.
+
+> **La matrice finale fera 39 × 7** (ou 7 × 39 si elle est aussi verticale) :
+> on vous le précisera. Le lecteur centre les images qui n'ont pas la bonne
+> taille, et coupe ce qui dépasse.
 
 > **La matrice finale fera 39 × 7.** Si vous préparez déjà des animations
 > pour elle, créez des documents de **39 × 7** : sur la matrice d'essai, le
@@ -63,8 +85,8 @@ Quelques ordres de grandeur pour se repérer :
 
 | Réglage | Valeur |
 |---|---|
-| Largeur | **32** pixels |
-| Hauteur | **8** pixels |
+| Largeur | **8** pixels |
+| Hauteur | **32** pixels |
 | Résolution | peu importe (72 ppp) |
 | Modèle de couleur | **RVB/Alpha**, **8 bits** entier, profil **sRGB** (celui par défaut) |
 | Contenu / arrière-plan | **noir** (ou transparent : le transparent devient noir, donc éteint) |
@@ -75,8 +97,8 @@ Quelques ordres de grandeur pour se repérer :
    beaucoup. Si elle n'apparaît pas : **Configuration → Configurer Krita →
    Affichage → Grille de pixels**, et baissez le seuil d'affichage.
 
-> ⚠️ **Ne dessinez pas en grand pour réduire ensuite.** Une image de 1920 ×
-> 480 réduite à 32 × 8 devient une bouillie floue. Dessinez **directement à
+> ⚠️ **Ne dessinez pas en grand pour réduire ensuite.** Une image de 480 ×
+> 1920 réduite à 8 × 32 devient une bouillie floue. Dessinez **directement à
 > la taille réelle** : c'est le principe du pixel art.
 
 ### Importer la palette « Vitrine pixels »
@@ -196,7 +218,7 @@ supplémentaire.
 2. **Dossier** : créez un dossier **au nom de l'animation**, par exemple
    `05_feu_de_camp`.
 3. **Nom de base** : `feu` → Krita crée `feu_0000.png`, `feu_0001.png`…
-4. Taille : laissez **32 × 8**.
+4. Taille : laissez **8 × 32**.
 5. **Rendu**.
 6. Dans ce dossier, créez un fichier texte **`images_par_seconde.txt`** qui
    contient seulement le nombre d'images par seconde de votre animation,
@@ -220,7 +242,7 @@ Un seul fichier, pratique à partager, et la vitesse est enregistrée dedans.
 2. Krita a besoin du logiciel gratuit **FFmpeg** pour ça. S'il le demande :
    téléchargez-le (<https://ffmpeg.org/download.html>) et indiquez son
    emplacement dans la fenêtre de rendu.
-3. Taille **32 × 8**. Nommez le fichier, par exemple `05_feu_de_camp.gif`.
+3. Taille **8 × 32**. Nommez le fichier, par exemple `05_feu_de_camp.gif`.
 
 > **Limites du GIF** : 256 couleurs maximum (largement assez ici), et une
 > durée d'image arrondie au centième de seconde. Le **PNG animé (APNG)** et le
@@ -264,7 +286,7 @@ Il affiche un rapport :
 ```
 05_feu_de_camp
   Type        : séquence de 24 fichiers (12 images/s)
-  Taille      : 32 × 8  ✓
+  Taille      : 8 × 32  ✓
   Images      : 24, durée 2.00 s (≈ 12.0 images/s)
   Couleurs    : 9 différentes  ✓
   Trop sombre : aucune  ✓
@@ -278,7 +300,7 @@ l'équipe.
 
 | Message | Signification |
 |---|---|
-| `⚠ attendu 32 × 8` | mauvaise taille de document : l'image sera centrée et coupée |
+| `⚠ attendu 8 × 32` | mauvaise taille de document : l'image sera centrée et coupée (ou tournée si elle est couchée, 32 × 8) |
 | `⚠ beaucoup ! anticrénelage ?` | plus de 64 couleurs : du flou s'est glissé dans le dessin |
 | `Trop sombre : N couleur(s) seront ÉTEINTES` | des couleurs trop foncées (partie 5) |
 | `⚠ limité par le logiciel` | image trop claire et trop remplie : elle sera assombrie |
@@ -310,6 +332,11 @@ numéro : `01_`, `02_`, `03_`…
 
 Selon l'organisation de l'équipe :
 
+- **Par la page web (le plus simple)** : ouvrez `http://172.16.50.27` (depuis le Wi-Fi) dans un
+  navigateur, sur le même réseau que le Pi, et déposez vos fichiers. On y
+  choisit aussi l'ordre et les animations jouées. Voir
+  [INTERFACE_WEB.md](INTERFACE_WEB.md). Les noms y sont nettoyés et numérotés
+  automatiquement.
 - **Carte SD** : on éteint le Pi, on sort la carte, on la met dans
   l'ordinateur, on copie les animations dans le dossier `animations` du
   lecteur nommé **`bootfs`**, on remet la carte. Voir
@@ -329,8 +356,8 @@ dans un sous-dossier dont le nom commence par un point, par exemple
   (couleur vive sur noir) se lit de loin.
 - **Le mouvement attire l'œil** : une animation lente et régulière se regarde
   longtemps ; une image fixe passe inaperçue.
-- **Texte** : 5 lettres visibles à la fois. Un défilement d'**1 pixel toutes
-  les 50 à 80 ms** se lit confortablement. Plus vite, on ne lit plus.
+- **Texte** : 4 lettres empilées (ou 5 couchées) visibles à la fois. Un
+  défilement d'**1 pixel toutes les 50 à 80 ms** se lit confortablement. Plus vite, on ne lit plus.
 - **Boucles** : soignez la jonction fin → début. Un saut se remarque
   beaucoup plus sur 256 pixels que sur un écran.
 - **Diffuseur** : si la matrice est placée derrière un matériau diffusant
@@ -356,7 +383,7 @@ crise. On s'en passe.
 
 ## 10. Liste de contrôle avant de rendre une animation
 
-- [ ] Document en **32 × 8** pixels (ou 39 × 7 pour la matrice finale)
+- [ ] Document **vertical** en **8 × 32** pixels
 - [ ] Pas de flou : **moins de 64 couleurs** (vérificateur)
 - [ ] Pas de couleurs **trop sombres** (vérificateur)
 - [ ] Fond **noir** ou transparent