# VKQV SoloTank Application web progressive (PWA) destinée à l'affichage de données sur un terminal au niveau de la cuve # 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 `//VKQV/`) : | Topic | Description | |---|---| | `Apps//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. # Manuel d'utilisation Pour lancer l'application, naviguer vers [https://vkvision.ch/VKQVSoloTank](https://vkvision.ch/VKQVWeb/app.html) La page suivante s'affiche: [![2026-05-06_22-36-48.PNG](https://docs.vkvision.net/uploads/images/gallery/2026-05/scaled-1680-/2026-05-06-22-36-48.PNG)](https://docs.vkvision.net/uploads/images/gallery/2026-05/2026-05-06-22-36-48.PNG) Pour commencer, il faut définir quelques paramètres. Cliquez sur l'icône de configuration en haut à droite. La première fois, la boîte de dialogue suivante s'affiche: [![2026-05-06_22-41-01.PNG](https://docs.vkvision.net/uploads/images/gallery/2026-05/scaled-1680-/2026-05-06-22-41-01.PNG)](https://docs.vkvision.net/uploads/images/gallery/2026-05/2026-05-06-22-41-01.PNG) Le mot de passe par défaut est "vk1844". Cliquez sur \[Ouvrir\], la page de configuration s'affiche. La page de configuration est partagée en 3 onglets: La connexion MQTT, L'Affichage et les Logs. ##### Connexion MQTT Il faut définir tous les champs selon la configuration de votre broker MQTT. [![2026-05-06_22-44-09.PNG](https://docs.vkvision.net/uploads/images/gallery/2026-05/scaled-1680-/2026-05-06-22-44-09.PNG)](https://docs.vkvision.net/uploads/images/gallery/2026-05/2026-05-06-22-44-09.PNG) ##### L'Affichage Cet onglet permet de définir le nom du synoptique principal et d'autres données importantes. [![2026-05-06_22-47-23.PNG](https://docs.vkvision.net/uploads/images/gallery/2026-05/scaled-1680-/2026-05-06-22-47-23.PNG)](https://docs.vkvision.net/uploads/images/gallery/2026-05/2026-05-06-22-47-23.PNG) Vous devez définir les champs suivants:
ChampsDescription
Numéro de position machineIndiquer l'index de la position de la machine
Nom du synoptique principalNom de la page définie dans QuickView. Par exemple: VKWINQV ou VKW11. Cette page sera affichée au démarrage de l'application
Mot de passe de configurationMot de passe qu'il faut introduire lorsque l'on clique sur l'icône de configuration. Si ce champ est vide, le mot de passe par défaut est utilisé. S'il contient quelque chose, cela correspondra au mot de passe à introduire. Le mot de passe par défaut est toujours utilisable.
Login automatique dans QuickViewLorsque vous activez cette case, 2 nouveaux champs s'affichent: [![2026-05-06_22-54-01.PNG](https://docs.vkvision.net/uploads/images/gallery/2026-05/scaled-1680-/2026-05-06-22-54-01.PNG)](https://docs.vkvision.net/uploads/images/gallery/2026-05/2026-05-06-22-54-01.PNG) Cela correspond au login dans QuickView
Afficher les alarmes sous le synoptiqueSi cette case est cochée, la liste des alarmes sera affichée en dessous du synoptique.
Groupe d'alarmes à afficherNuméro des groupes devant être affichés dans la liste. Les numéros sont séparés par une virgule.
Activer les logsSi cette case est cochée alors les évènements seront enregistrés et pourront être affichés dans l'onglet Log
Nombre maximum de lignes de log.Si rien n'est indiqué, le nombre maximum de lignes sera 10000 sinon le nombre indiqué
Dans le haut à droite de l'écran de configuration, une icône "clavier" permet d'indiquer qu'un clavier virtuel sera utilisé pour l'introduction des données : [![2026-05-06_23-02-57.PNG](https://docs.vkvision.net/uploads/images/gallery/2026-05/scaled-1680-/2026-05-06-23-02-57.PNG)](https://docs.vkvision.net/uploads/images/gallery/2026-05/2026-05-06-23-02-57.PNG) ##### Les Logs [![2026-05-06_23-10-25.PNG](https://docs.vkvision.net/uploads/images/gallery/2026-05/scaled-1680-/2026-05-06-23-10-25.PNG)](https://docs.vkvision.net/uploads/images/gallery/2026-05/2026-05-06-23-10-25.PNG) Les 10000 dernières lignes sont affichées. Lorsque vous cliquez sur le bouton \[Enregistrer\], la configuration est sauvegardée dans le local storage, la page de configuration se ferme et le synoptique principal est affiché: [![Mainscreen with load.png](https://docs.vkvision.net/uploads/images/gallery/2026-05/scaled-1680-/mainscreen-with-load.png)](https://docs.vkvision.net/uploads/images/gallery/2026-05/mainscreen-with-load.png) Lorsque l'application reçoit le message de statut de connexion avec QuickView (=connected), le login automatique est effectué si défini. Si une charge se trouve dans la position, le bandeau d'information sur la charge est affiché au-dessous du header. Il est caché lorsque la charge est prise. Si des groupes d'alarmes ont été définis, alors un bouton \[Filtre\] s'affiche à côté du titre des alarmes actives. La pression sur ce bouton permet de filtrer ou non la liste des alarmes. Lorsque le filtre est désactivé, l'ensemble des alarmes apparaît dans la liste. Lorsqu'il est activé, uniquement les alarmes appartenant aux groupes définis sont affichées. Vous pouvez acquitter les alarmes seulement si un utilisateur est loggé. Lorsque vous cliquez sur un bouton du synoptique qui appelle un autre synoptique, le synoptique principal est remplacé par le synoptique appelé. Un flèche permettant le retour en arrière s'affiche sur l'entête de la page. [![2026-05-06_23-19-00.PNG](https://docs.vkvision.net/uploads/images/gallery/2026-05/scaled-1680-/2026-05-06-23-19-00.PNG)](https://docs.vkvision.net/uploads/images/gallery/2026-05/2026-05-06-23-19-00.PNG)