vitrine-pixels/8x32 PI/INTERFACE_WEB.md

L'interface web : gérer la vitrine depuis un navigateur

Le Raspberry Pi héberge une petite page web. Depuis n'importe quel ordinateur ou téléphone connecté au même réseau que le Pi, on peut :

• déposer des animations (GIF, PNG animé, WebP, image fixe, séquence de PNG) ;
• voir un aperçu animé de chacune, tel que la matrice l'affichera ;
• choisir lesquelles sont jouées et dans quel ordre ;
• en jouer une tout de suite, ou passer à la suivante ;
• les supprimer (elles passent d'abord par une corbeille).

C'est la façon la plus simple, pour l'équipe design, de mettre ses animations en vitrine : pas de terminal, pas de carte SD à sortir.

---

Sommaire

1. Ouvrir la page
2. Ajouter des animations
3. Choisir ce qui est joué
4. Ce qu'il faut savoir
5. Comment ça marche (pour les curieux)
6. Réglages et dépannage

---

1. Ouvrir la page

Dans le navigateur (Firefox, Chrome, Safari…), tapez l'adresse du Pi. Le Pi de l'école est branché sur deux réseaux, et a donc deux adresses. Prenez celle du réseau sur lequel vous êtes :

Vous êtes connecté…	Adresse à taper
en Wi-Fi (téléphone, ordinateur portable)	http://172.16.50.27
par câble (ordinateur fixe de l'école)	http://172.16.7.199

Le plus simple : le QR code. Le dossier qrcode/ contient le QR code de la page et une affiche A5 à imprimer (affiche_interface_web.pdf) : on la scanne avec l'appareil photo du téléphone, connecté au Wi-Fi de l'école. Si l'adresse du Pi change, refaites-les : python3 outils/generer_qrcode.py http://NOUVELLE_ADRESSE.

Pourquoi deux adresses ? Une adresse, c'est comme l'adresse postale du Pi, mais sur un réseau donné. Le réseau Wi-Fi et le réseau filaire de l'école sont deux « villes » différentes, et l'école ne fait pas passer le courrier de l'une à l'autre. Depuis le Wi-Fi, l'adresse filaire du Pi ne mène nulle part : la page semble « inaccessible ».

⚠️ Ces adresses peuvent changer (au redémarrage du Pi, ou au bout de quelques jours) : c'est la box ou le réseau de l'école qui les distribue. Les adresses actuelles sont toujours écrites en bas de la page web, et la commande hostname -I sur le Pi les affiche. Pour une vitrine, demandez au service informatique de réserver une adresse fixe pour le Pi.

La page ne s'ouvre toujours pas ? Votre appareil doit être sur le même réseau que l'adresse utilisée. Les données mobiles (4G/5G) ne marchent pas : la page n'est pas sur Internet, seulement sur le réseau local.

En haut de la page, en permanence : ce que la matrice joue en ce moment (mis à jour toutes les 2 secondes), le bouton Suivante ⏭ et le menu Vitesse : ×0,5 joue toutes les animations deux fois plus lentement, ×2 deux fois plus vite. Le choix est gardé même après un redémarrage, et s'applique à partir de l'animation suivante.

---

2. Ajouter des animations

Des fichiers (GIF, PNG animé, WebP, image fixe)

1. Cadre « Un ou plusieurs fichiers » → Choisir des fichiers…
2. Sélectionnez un ou plusieurs exports Krita (voir GUIDE_KRITA.md). Sur téléphone, on peut les prendre dans la galerie ou dans « Fichiers ».
3. Envoyer.

Chaque fichier devient une animation, ajoutée à la fin de la liste. Les noms sont nettoyés automatiquement : Pluie de cœurs (v2)!.gif devient pluie_de_coeurs_v2.gif.

Une séquence de PNG

Pour un export Krita en séquence d'images (feu_0000.png, feu_0001.png…) :

1. Cadre « Une séquence de PNG » → Choisir les PNG… → sélectionnez toutes les images de la séquence (Ctrl + A dans le dossier).
2. Donnez un nom à l'animation et sa vitesse en images par seconde (celle réglée dans Krita).
3. Envoyer.

Les images sont mises dans l'ordre de leurs noms : gardez la numérotation de Krita. 120 images au maximum par séquence.

⚠️ N'envoyez pas une séquence dans le cadre « Un ou plusieurs fichiers » : chaque PNG deviendrait une animation séparée. Au-delà de 10 PNG envoyés d'un coup, la page refuse et vous redirige vers le bon cadre.

Vérifications automatiques

Chaque envoi est ouvert et vérifié avant d'être accepté, comme le ferait le lecteur. Un fichier abîmé ou d'un format inconnu est refusé, avec un message en bas de l'écran.

Si une image n'a pas la bonne taille (8 × 32, debout), elle est quand même acceptée, mais sa fiche affiche un avertissement, par exemple ⚠ 32 × 8 px au lieu de 8 × 32 (image couchée, qui sera tournée d'un quart de tour) : regardez l'aperçu, et réexportez si le résultat ne convient pas.

---

3. Choisir ce qui est joué

La page a deux listes :

Jouées, dans cet ordre : la « playlist » de la vitrine, jouée en boucle de haut en bas. La fiche entourée de rouge est celle que la matrice affiche.

Bouton	Effet
▲ ▼	monter / descendre dans l'ordre de lecture
▶	jouer cette animation tout de suite (puis la liste reprend)
⏸	ne plus la jouer : elle passe dans « Pas jouées », sans être supprimée
✕	la mettre à la corbeille (une confirmation est demandée)

Pas jouées : la réserve. Les animations y attendent, prêtes à revenir.

Bouton	Effet
＋	la remettre dans la liste (à la fin)
▶	la jouer une fois, tout de suite, sans la remettre dans la liste
✕	la mettre à la corbeille

Corbeille (en bas de la page) : les animations supprimées y restent tant qu'on ne clique pas sur Vider. Vider la corbeille efface définitivement.

---

4. Ce qu'il faut savoir

• Tout le monde sur le réseau peut modifier la vitrine. Il n'y a pas de mot de passe par défaut. Sur un réseau partagé (école, lieu public), réglez-en un (partie 6).
• Les changements sont immédiats : le lecteur relit le dossier à chaque tour. Après un changement d'ordre, la liste reprend depuis le début.
• Avec l'overlay (protection contre les coupures de courant, voir MODE_VITRINE.md) : si la partition de démarrage est protégée en écriture, la page ne peut plus rien modifier et affiche une erreur. Pendant l'exposition, on peut choisir : protection totale (et la page sert seulement à regarder et à jouer), ou partition de démarrage modifiable (et la page reste pleinement utilisable).
• Une séquence de PNG compte 120 images au maximum (10 secondes à 12 images/s). Plus long : découpez-la, ou exportez-la en GIF.
• Taille maximum d'un envoi : 200 Mo (largement assez : un GIF de 8 × 32 pèse quelques kilo-octets).

---

5. Comment ça marche (pour les curieux)

Deux programmes tournent en même temps sur le Pi, chacun dans son service (lancé automatiquement au démarrage) :

  navigateur ──(réseau)──▶  serveur_web.py            lecteur.py ──▶ matrice
                            (service vitrine-web)      (service vitrine-pixels)
                                  │                         ▲
                                  │  range les fichiers     │ lit le dossier
                                  ▼                         │ à chaque tour
                        /boot/animations/  ─────────────────┘
                          01_coeur.gif, 02_vague/…
                          .desactivees/   ← « Pas jouées » (ignoré par le lecteur)
                          .corbeille/     ← corbeille (ignorée aussi)

                        /run/vitrine-pixels/   (en mémoire vive, pas sur la carte SD)
                          en_cours  ← écrit par le lecteur, lu par la page
                          demande   ← écrit par la page (▶, Suivante), lu par le lecteur

• L'ordre, c'est l'ordre alphabétique des noms : quand on clique ▲ ou ▼, le serveur renomme les fichiers 01_…, 02_…, 03_…
• Désactiver, c'est déplacer le fichier dans .desactivees. Comme son nom commence par un point, le lecteur l'ignore (c'est la même règle qui lui fait ignorer les fichiers cachés des Mac).
• Jouer maintenant : le serveur dépose un « post-it » (le fichier demande). Le lecteur le remarque en moins de 0,2 seconde, interrompt l'animation en cours, et joue celle demandée.

Le code : serveur_web.py (Python, avec la bibliothèque Flask), la page web/page.html (HTML avec des « trous » remplis par Python) et son style web/style.css. Tout est commenté.

L'essayer sur son ordinateur, sans Pi :

python3 serveur_web.py --port 8080

puis ouvrir http://localhost:8080. Dans un autre terminal, python3 lecteur.py --simulateur joue les animations dans une fenêtre et réagit aux boutons de la page. (Il faut Flask : pip install flask.)

---

6. Réglages et dépannage

Les réglages sont en haut de serveur_web.py :

Réglage	Valeur	Effet
MOT_DE_PASSE	None	ex. "pixels" : le navigateur demande un nom (n'importe lequel) et ce mot de passe
PORT	80	le port web ; avec un autre, l'adresse devient http://172.16.50.27:8080
TAILLE_MAX_MO	200	taille maximum d'un envoi
MAX_IMAGES_SEQUENCE	120	nombre maximum d'images d'une séquence de PNG

Après une modification : sudo systemctl restart vitrine-web.

Problème	Solution
La page ne s'ouvre pas	Bonne adresse pour votre réseau (Wi-Fi ou câble, partie 1) ? Le service tourne-t-il ? systemctl status vitrine-web
« En ce moment : — » et rien ne bouge	Le lecteur ne tourne pas : sudo systemctl enable --now vitrine-pixels
▶ ne fait rien	Idem : c'est le lecteur qui joue, la page ne fait que lui demander
« Impossible d'écrire dans le dossier des animations »	Partition protégée en écriture (overlay) : voir partie 4
La page est lente au premier affichage	Normal sur un Pi 3 : il fabrique les aperçus. Ensuite, ils sont gardés en mémoire
Voir les erreurs du serveur	journalctl -u vitrine-web -f