bachandClaude Opus 5.5
5b0e858abe
- Vitesse de lecture : réglage VITESSE du lecteur et menu « Vitesse » sur la page web (×0,25 à ×2, gardé dans .vitesse.txt du dossier des animations). - QR code d'accès à la page web et affiche A5 (outils/generer_qrcode.py → qrcode/) : une coulée inspirée de « cascade » en haut, une partie de « tetris » en bas, couleurs tirées des animations de l'équipe (qrcode/sources/), titre en pixels de couleur. - Matrice de la vitrine : image retournée d'un demi-tour (INVERSER_X et INVERSER_Y) et nouveau réglage DECALAGE_X / DECALAGE_Y (ici 1 pixel vers la droite). - Doc : README, INTERFACE_WEB.md et CLAUDE.md à jour. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
230 lines
10 KiB
Markdown
230 lines
10 KiB
Markdown
# 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](#1-ouvrir-la-page)
|
||
2. [Ajouter des animations](#2-ajouter-des-animations)
|
||
3. [Choisir ce qui est joué](#3-choisir-ce-qui-est-joué)
|
||
4. [Ce qu'il faut savoir](#4-ce-quil-faut-savoir)
|
||
5. [Comment ça marche (pour les curieux)](#5-comment-ça-marche-pour-les-curieux)
|
||
6. [Réglages et dépannage](#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/`](qrcode/) contient
|
||
> le QR code de la page et une **affiche A5 à imprimer**
|
||
> ([`affiche_interface_web.pdf`](qrcode/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](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](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 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`](serveur_web.py) (Python, avec la bibliothèque
|
||
**Flask**), la page [`web/page.html`](web/page.html) (HTML avec des « trous »
|
||
remplis par Python) et son style [`web/style.css`](web/style.css). Tout est
|
||
commenté.
|
||
|
||
**L'essayer sur son ordinateur**, sans Pi :
|
||
|
||
```bash
|
||
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`](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` |
|