# 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` |