# TIVALA — éditeur de panneaux d'arrêt
Outil local (HTML/CSS/JS, aucune dépendance à installer) pour composer les
panneaux d'arrêt du réseau et les exporter en PNG aux tailles utilisées en jeu.
## Démarrer
```bash
python3 serveur.py
```
Le navigateur s'ouvre sur `http://localhost:8787`. `Ctrl+C` pour arrêter.
> **Pourquoi un serveur ?** En ouvrant les fichiers directement (`file://`), le
> navigateur refuse de lire les PNG depuis un canvas : l'aperçu s'affiche mais
> **l'export d'image échoue**. Le serveur règle ce point et permet en plus
> d'écrire directement `lignes.json` et `panneaux.json` sur le disque.
> Un `python3 -m http.server` fonctionne aussi, mais les sauvegardes restent
> alors dans le navigateur (bouton **Télécharger** pour récupérer les fichiers).
## Les deux pages
### `index.html` — Lignes
Le catalogue des lignes du réseau. Pour chaque ligne :
| Champ | Rôle |
|---|---|
| **N°** | ce qui identifie la ligne dans l'interface (`1`, `12`, `N`…) |
| **Fichier picto** | image de `pictos/` utilisée sur les panneaux |
| **Terminus** | destinations possibles, séparées par des virgules |
| **Couleur** | utilisée pour le carré généré quand aucun picto n'est choisi |
Une ligne peut avoir **plusieurs terminus** (ex. ligne 12 : *Thyzons* et
*Bastille*) : dans l'éditeur de panneau, le terminus se choisit ensuite dans une
**liste déroulante** alimentée par cette colonne. Une destination qui n'apparaît
pas dans la liste doit donc être ajoutée ici d'abord.
L'écriture du fichier a lieu **uniquement sur clic** de **Enregistrer**
(ou Cmd/Ctrl+S). Tant que des modifications
attendent, le bouton porte un point (« Enregistrer • ») et le bandeau indique
*Modifications non enregistrées* ; après écriture il affiche
*lignes.json enregistré à hh:mm*. Fermer l'onglet sans enregistrer déclenche un
avertissement du navigateur.
Pour ajouter un picto : déposer un PNG carré (500×500 idéalement) dans
`pictos/`, recharger la page, il apparaît dans la liste.
### `panneau.html` — Panneaux
1. choisir **Totem** (300×300) ou **Abribus** (600×300) ;
2. saisir le **nom de la station** ;
3. cliquer sur les **lignes desservies** pour les ajouter — l'ordre se règle
par glisser-déposer ou avec les flèches, et le terminus affiché se choisit
dans la liste déroulante de chaque ligne ;
4. **Exporter le PNG**.
Comme pour les lignes, rien n'est écrit sans un clic sur **Enregistrer le
panneau** (ou Cmd/Ctrl+S). Ouvrir un autre
panneau ou en créer un nouveau alors que des modifications attendent demande une
confirmation, de façon à ne rien perdre.
L'aperçu est mis à jour en direct, avec en dessous un rendu **à la taille
réelle** et un **zoom ×2** pour juger la lisibilité finale en jeu.
Les panneaux composés peuvent être enregistrés (`panneaux.json`) pour être
rouverts, dupliqués, ou tous réexportés d'un coup.
## Typographie
Le rendu utilise **Century Gothic Gras**, comme les panneaux d'origine. Le
fichier est **embarqué dans le projet** (`assets/polices/CenturyGothic-Bold.ttf`,
copie de `GOTHICB.TTF`) et déclaré en `@font-face` sous le nom privé
`TivalaGothic` : le navigateur ne peut donc pas piocher une autre « Century
Gothic » installée sur la machine, et le rendu est identique partout — y compris
sur un poste où la police n'est pas installée. Nunito, Poppins et la police
système restent proposées dans les réglages.
> Le `.ttf` est là pour l'usage local de l'outil. C'est une police sous licence
> Monotype : ne pas publier le dossier tel quel.
Les gabarits décrivent le texte en **hauteur de capitale** et non en taille de
police : changer de police ne déplace donc ni le nom de la station ni les
terminus, seule la forme des lettres change.
## Réglages d'affichage
Repliés par défaut, ils sont propres à chaque panneau : affichage des terminus,
taille des pictos / terminus / nom, alignement, nombre de pictos par rangée,
police, et fond. Les valeurs par défaut reproduisent les panneaux de référence.
Au delà de 4 pictos (totem) ou 7 (abribus), la mise en page passe
automatiquement sur deux rangées et réduit les pictos. Un nom de station trop
long est réduit pour tenir dans le bandeau.
## Export
| Type | ×1 | **×2 (par défaut)** | ×4 |
|---|---|---|---|
| Totem | 300 × 300 | **600 × 600** | 1200 × 1200 |
| Abribus | 600 × 300 | **1200 × 600** | 2400 × 1200 |
Le rendu se fait à la résolution native du gabarit (2000×2000 / 4000×2000) puis
est réduit par paliers de moitié : le texte reste net même à ×1. L'option
« Gabarit » sort la pleine résolution, pour les visuels hors-jeu.
Sous l'aperçu, le **rendu 1:1 en jeu** montre toujours la taille ×1 (300 × 300 /
600 × 300) : c'est le contrôle de lisibilité, indépendamment de la résolution
choisie pour l'export.
Nom de fichier généré : `TOTEM_Castel_600x600.png`, `ABRIBUS_Eiffel_1200x600.png`.
Le bouton **Copier dans le presse-papier** évite le passage par un fichier.
## Organisation des fichiers
```
tivala/
├── serveur.py petit serveur local + écriture des .json
├── index.html page Lignes
├── panneau.html page Panneaux
├── lignes.json catalogue des lignes
├── panneaux.json panneaux enregistrés
├── arret/ gabarits : totem.png (2000²), abribus.png (4000×2000)
├── pictos/ pictos de lignes (PNG carrés)
└── assets/
├── logo-tivala.png logo détouré (extrait du gabarit)
├── polices/ Century Gothic Gras embarquée
├── rendu.js géométrie des gabarits + dessin canvas + export
├── donnees.js lecture/écriture des .json, liste des pictos
├── commun.js utilitaires d'interface
├── lignes.js page Lignes
├── panneau.js page Panneaux
└── style.css
```
Toute la géométrie (position du nom, de l'encart, taille des pictos) est
regroupée dans l'objet `GABARITS` en haut de `assets/rendu.js` : c'est là qu'il
faut intervenir pour ajouter un nouveau type de support (mât, plan de quai…) ou
si un gabarit PNG est redessiné.