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
Manuel d'utilisation

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

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

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.

VKQV SoloTank

Description de l'application

VKQVSoloTank

Fonctionnalités

Affichage

Alarmes

Connexion MQTT

Login QuickView

Clavier virtuel

Configuration

Logs

PWA

Architecture des fichiers

Souscriptions MQTT

Configuration

Onglet Connexion MQTT

Onglet Affichage

Dépendances

Déploiement

Copyright

Manuel d'utilisation

Connexion MQTT

L'Affichage

Les Logs