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 La page suivante s'affiche: 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: 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. L'Affichage Cet onglet permet de définir le nom du synoptique principal et d'autres données importantes. Vous devez définir les champs suivants: Champs Description Numéro de position machine Indiquer l'index de la position de la machine Nom du synoptique principal Nom 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 configuration Mot 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 QuickView Lorsque vous activez cette case, 2 nouveaux champs s'affichent: Cela correspond au login dans QuickView Afficher les alarmes sous le synoptique Si cette case est cochée, la liste des alarmes sera affichée en dessous du synoptique. Groupe d'alarmes à afficher Numéro des groupes devant être affichés dans la liste. Les numéros sont séparés par une virgule. Activer les logs Si 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 : Les Logs 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é: 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.