# Description de l'application

# VKQVSoloTank

Application web PWA de visualisation mono-machine pour **VK Vision QuickView**.  
Elle se connecte à un broker MQTT, affiche le synoptique configuré et la liste d'alarmes, et permet d'interagir avec la machine via les dialogues QuickView.

---

## Fonctionnalités

### Affichage
- Synoptique proportionnel ajusté à la zone disponible (largeur **et** hauteur)
- Couleur de fond du conteneur synchronisée avec la couleur du canvas synoptique
- Titre du synoptique centré dans le header
- Navigation inter-synoptiques avec bouton Retour
- Icône de déconnexion QuickView visible dans le header en cas de perte de liaison

### Alarmes
- Liste d'alarmes optionnelle (min 25 % / max 40 % de la hauteur de travail)
- Filtrage par numéro de groupe (`gnum`) : liste de groupes séparés par des virgules
- Bouton bascule Filtre dans le header de la liste (bleu = actif, grisé = inactif)
- Badge affichant le nombre total d'alarmes reçues
- Bouton d'acquittement visible uniquement si des alarmes sont actives et qu'un utilisateur est connecté

### Connexion MQTT
- Transport WebSocket (`ws://` / `wss://`)
- Reconnexion manuelle (pas de reconnexion automatique)
- Message `will` publié en cas de déconnexion inattendue
- Statut de connexion affiché dans le footer (indicateur coloré)
- Compteurs de messages entrants / sortants remis à zéro à chaque connexion

### Login QuickView
- Login manuel via bouton dans le header (icône verte si connecté)
- Login automatique configurable : déclenché à la réception du statut `Connected` de QuickView

### Clavier virtuel
- Clavier QWERTZ / AZERTY commutable
- Mode global : intercepte tous les champs de saisie de l'application
- Rangées : chiffres, lettres, caractères accentués, symboles (`@ . , ; - _ / : # !`)
- Touche Majuscules, Retour arrière, Espace, Valider

### Configuration
- Page de configuration plein écran (dans la zone principale, sans modal)
- Protégée par mot de passe (défaut : `vk1844`, personnalisable dans l'onglet Affichage)
- Trois onglets : **Connexion MQTT**, **Affichage**, **Logs**
- Persistance dans le `localStorage` (clé : `vksolotank_config`)
- Reconnexion automatique à la fermeture de la configuration

### Logs
- Journal interne activable / désactivable
- Nombre maximum de lignes configurable (défaut : 10 000)
- Visionneuse pleine hauteur dans l'onglet Logs
- Niveaux : `info`, `warn`, `error`, `ok`

### PWA
- Installable sur PC, tablette, mobile (Android / iOS)
- Service worker avec stratégie cache-first

---

## Architecture des fichiers

```
VKQVSoloTank/
├── index.html              Page principale (SPA)
├── manifest.json           Manifeste PWA
├── sw.js                   Service worker (cache-first)
├── CHANGELOG.md            Historique des versions
├── README.md               Ce fichier
└── assets/
    ├── css/
    │   ├── app.css         Styles de l'application
    │   └── bootstrap.min.css
    ├── js/
    │   ├── VKSoloTank.js   Logique principale (MQTT, UI, config, login)
    │   ├── VKDialogs.js    Dialogues QuickView (menu, clavier numérique, slider)
    │   ├── VKDrawing.js    Moteur de rendu synoptique (DrawSynoptic)
    │   ├── VKKeyboard.js   Clavier virtuel QWERTZ/AZERTY
    │   ├── VK.js           Variables globales QuickView
    │   ├── Mqtt.min.js     Client MQTT (mqtt.js, transport WebSocket)
    │   ├── jose-5-2-0.js   Décodage JWT (tokens QuickView)
    │   ├── bootstrap.bundle.min.js
    │   └── jquery-3.5.1.min.js
    └── img/
        ├── brands/VK_LOGO_POSITIF.svg
        └── OffLine.png
```

---

## Souscriptions MQTT

Une fois connecté, l'application s'abonne aux topics suivants (préfixe `<baseTopic>/<groupe>/VKQV/`) :

| Topic | Description |
|---|---|
| `Apps/<clientId>/Login` | Réponse login QuickView |
| `Status/Connection` | État de connexion QuickView |
| `Status/Watchdog` | Watchdog QuickView |
| `Status/Databanks/#` | Valeurs des databanks |
| `Status/Alarms` | Liste des alarmes actives |
| `Status/Messages` | Messages QuickView |
| `Status/System` | Statut système |
| `Status/LiftLower` | État levée/baisse |
| `Configuration/Synoptics/#` | Définitions des synoptiques |
| `Configuration/Machine` | Configuration machine |
| `Configuration/Recorders` | Configuration des enregistreurs |

---

## Configuration

### Onglet Connexion MQTT

| Champ | Description | Défaut |
|---|---|---|
| Host | Adresse du broker MQTT | — |
| Port | Port WebSocket | `9001` |
| Path | Chemin WebSocket | `/mqtt` |
| SSL | Activer `wss://` | non |
| Topic de base | Préfixe du topic (ex. `VKVision`) | — |
| Groupe | Nom de la machine | — |
| Client MQTT | GUID unique de connexion | auto-généré |
| Client ID | Identifiant de l'application dans QuickView | — |
| Utilisateur / Mot de passe | Authentification broker MQTT | — |

### Onglet Affichage

| Champ | Description |
|---|---|
| Numéro de position | Position de la machine dans QuickView |
| Synoptique principal | Nom du fichier `.winjson` à afficher au démarrage |
| Mot de passe de configuration | Remplace `vk1844` comme mot de passe d'accès |
| Login automatique | Active le login automatique à la connexion QuickView |
| Utilisateur / Mot de passe auto-login | Identifiants utilisés pour le login automatique |
| Afficher les alarmes | Affiche la liste d'alarmes sous le synoptique |
| Groupes d'alarmes | Numéros `gnum` séparés par des virgules (vide = toutes) |
| Max lignes de log | Nombre maximum d'entrées dans le journal (défaut : 10 000) |

---

## Dépendances

| Bibliothèque | Version | Rôle |
|---|---|---|
| Bootstrap | 5.x | UI, modaux, onglets |
| jQuery | 3.5.1 | DOM (requis par certains composants VK) |
| mqtt.js | — | Client MQTT WebSocket (`Mqtt.min.js`) |
| jose | 5.2.0 | Décodage JWT |
| Font Awesome | 5.x | Icônes |

---

## Déploiement

L'application est entièrement statique. Il suffit de servir le dossier `VKQVSoloTank/` via un serveur HTTP (Apache, Nginx, IIS, ou tout serveur de fichiers statiques).

Pour bénéficier du service worker (mode offline / installable), le serveur doit servir les fichiers en **HTTPS** ou sur `localhost`.

---

## Copyright

© 2026 VK Vision SA — Tous droits réservés.