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>
This commit is contained in:
bach
@@ -0,0 +1,212 @@
|
||||
# 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` |
|
||||
|
||||
> **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) et le bouton **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.
|
||||
|
||||
### 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).
|
||||
- **Taille maximum** d'un envoi : 50 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` | `50` | taille maximum d'un envoi |
|
||||
|
||||
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` |
|
||||
Reference in New Issue
Block a user