Skip to main content

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.

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

No comments to display

Back to top