VKTimeway

VKTimeway est une application web permettant de générer des diagrammes de mouvements d'une machine de traitement de surface.

Description du programme

Application web de gestion et d'édition de timeway pour installations de traitement de surface (galvanoplastie, phosphatation, etc.).

Version : 2.4.2 — © 2026 VK Vision SA

Description

VKTimeway permet de définir, visualiser et éditer graphiquement les cycles de transfert d'un ou de plusieurs robots sur une ligne de traitement de surface. L'application gère :

Architecture

Application PWA vanilla JS sans framework, fonctionnant entièrement côté client.

App/
├── index.html                  Point d'entrée unique (SPA)
├── manifest.json               Manifeste PWA
├── sw.js                       Service Worker (cache offline)
└── assets/
    ├── js/
    │   ├── VKApp.js            Routeur SPA + logique de toutes les pages
    │   ├── VKModels.js         Constructeurs des modèles de données
    │   ├── VKData.js           Persistance localStorage
    │   ├── VKCloud.js          Client PocketBase (auth, CRUD, partage)
    │   ├── VKStore.js          Façade de persistance (routage Local/Cloud)
    │   ├── VKDiagram.js        Moteur de rendu canvas du timeway
    │   ├── VKMachine.js        Dessin SVG inline de la machine
    │   ├── VKTimewayGen.js     Générateur automatique de timeway
    │   ├── VKReport.js         Génération de rapports PDF (pdfmake)
    │   ├── VKI18n.js           Internationalisation (FR / EN / DE / ZH)
    │   ├── pdfmake.min.js      Librairie PDF (embarquée, offline)
    │   ├── vfs_fonts.min.js    Polices pdfmake (Roboto, embarquées)
    │   └── pocketbase.umd.js   SDK client PocketBase (embarqué)
    ├── css/
    │   └── app.css             Styles spécifiques à l'application
    └── img/
        └── icons/              Icônes PNG de la barre d'outils de l'éditeur

PocketBase/
└── README.md                   Configuration des collections du serveur PocketBase (source "Cloud")

Modules JS

Fichier Rôle
VKApp.js Routeur hash (#/, #/machines, …), rendu des pages, modales d'édition, simulateur
VKModels.js Constructeurs Machine, Version, Position, Hoist, Sequence, Timeway, …
VKData.js Lecture / écriture dans localStorage (source "Local")
VKCloud.js Client PocketBase : authentification email/mot de passe, CRUD Machines/Versions, partage (source "Cloud")
VKStore.js Façade Machines/Versions : route vers VKData ou VKCloud selon la source de données active, transparente pour le reste de l'application
VKDiagram.js Rendu canvas : axes, étapes, aides visuelles, détection collision
VKMachine.js Dessin SVG inline de la machine (cuves, robots) depuis la définition des positions
VKTimewayGen.js Génération automatique d'un timeway depuis une séquence
VKReport.js Rapports PDF via pdfmake : machine, séquence, timeway, diagramme
VKI18n.js Dictionnaire quadrilingue + injection dans le DOM (data-i18n)

Modèle de données

Machine                  Id, Name, Number, Client, Location, Remarks, CreatedAt, UpdatedAt
└── Version[]            Id, Number, Comment, Remarks, CreatedAt, UpdatedAt
    ├── Positions[]      id, name, tag, flag, group, tank, address, branch, lift, lower, distance
    ├── Hoists[]         id, pi, pf, width, front, back, speed1 (mm/s), accdec (ms), lifts[], lowers[]
    ├── Sequences[]      id, name, remarks, steps[]
    ├── Timeways[]       id, name, remarks, cycletime (ms), visible, steps[]
    ├── LiftTypes[]      10 types de montée nommés (id, name, time)
    └── LowerTypes[]     10 types de descente nommés (id, name, time)

En source Local, toutes les données sont stockées en JSON dans localStorage sous les clés tw_machines et tw_versions.

En source Cloud, le même modèle est persisté sur un serveur PocketBase : Machine et Version (métadonnées) deviennent chacune une collection, le contenu imbriqué de Version (Positions, Hoists, Sequences, Timeways, Programs, LiftTypes, LowerTypes) étant conservé tel quel dans un unique champ JSON data — voir PocketBase/README.md.

Fonctionnalités principales

Gestion des machines

Export / Import des données

Source de données Cloud (PocketBase)

Versions

Positions, robots (hoists), séquences

Visualisation de la machine

Types montées / descentes

Génération automatique de timeway

Éditeur graphique de timeway

Simulateur de production

Rapports PDF

Générés côté client via pdfmake (aucun serveur requis, fonctionne offline). Chaque rapport est téléchargé directement en .pdf.

Rapport Déclencheur Contenu
Fiche machine Bouton dans l'onglet Positions Positions · Robots · Types montées/descentes · Remarques
Fiche séquence Bouton par ligne dans l'onglet Séquences Étapes (position, groupe, montée, descente, Tmin/Tmax/Tégouttage) · Remarques
Fiche timeway Bouton par ligne dans l'onglet Timeway Étapes avec tous les temps (Ti, Tf, Tégouttage, Tmontée, Tdescente, Ttransfert) · Remarques
Rapport diagramme Bouton dans la toolbar de l'éditeur Capture du canvas + table des étapes · Remarques (orientation paysage si nécessaire)

Structure commune des rapports :

Internationalisation

Quatre langues supportées : Français (défaut), English, Deutsch, 中文 (chinois simplifié).

La langue est sélectionnable depuis la page d'accueil et persistée dans localStorage. Le changement est instantané sans rechargement de page.

Utilisation dans le HTML : data-i18n="clé" sur n'importe quel élément. Utilisation dans le JS : VKI18n.t('clé').

Installation / Démarrage

Développement

Aucune dépendance serveur pour la source de données "Local" — l'application fonctionne directement depuis un navigateur (la source "Cloud" nécessite un serveur PocketBase, voir plus bas).

  1. Cloner le dépôt
  2. Servir le dossier App/ via un serveur HTTP local (requis pour le Service Worker) : 
    npx serve App/
# ou
python -m http.server 8080 --directory App/
  3. Ouvrir http://localhost:8080 dans un navigateur moderne

Note : L'ouverture directe du fichier index.html (file://) ne fonctionnera pas avec le Service Worker. Un serveur HTTP est nécessaire.

Build de distribution (version minifiée)

Un script de build génère une version optimisée dans Dist/ :

npm install       # une seule fois
npm run build     # génère Dist/

Le build effectue :

Important : le nom du cache du sw.js généré (vktimeway-dist-v*) est dérivé automatiquement de VK_VERSION (tête de VKApp.js) — incrémenter cette constante (et CACHE_NAME dans App/sw.js pour le mode développement) à chaque nouveau déploiement pour forcer la mise à jour du cache chez les utilisateurs.

Pour servir la version de distribution :

npx serve Dist/

Source de données Cloud (optionnel)

La source "Local" (localStorage) fonctionne sans aucune configuration. Pour activer la source "Cloud", un serveur PocketBase est nécessaire :

  1. Configurer les collections machines, versions, machine_shares sur le serveur — voir PocketBase/README.md (champs, règles API à copier-coller)
  2. Renseigner son adresse dans VK_POCKETBASE_URL_DEFAULT (App/assets/js/VKCloud.js), ou directement dans le formulaire de connexion de l'application

Dépendances front-end (embarquées)

Librairie Version Usage
Bootstrap 5.x UI composants, grille, modales
Font Awesome 6.x Icônes vectorielles
pdfmake 0.2.10 Génération de rapports PDF côté client
pocketbase (SDK JS) 0.28.x Client de la source de données Cloud (auth, CRUD, partage)

Toutes les dépendances sont incluses dans App/assets/ — aucune connexion CDN requise.

Dépendances de build (développement uniquement)

Package Usage
terser Minification JavaScript
clean-css Minification CSS
fs-extra Opérations fichiers avancées

Structure des routes

Hash Page
#/ Accueil (sélection de langue, source de données Local/Cloud, export/import données)
#/machines Liste des machines
#/machines/create Nouvelle machine
#/machines/:id Détail machine + liste des versions
#/machines/:id/version/:vid Édition d'une version (positions, robots, séquences, timeway)

Versioning de l'application

La version est définie par la constante VK_VERSION en tête de VKApp.js :

var VK_VERSION = 'ver. 2.4.2';

Elle s'affiche automatiquement dans le footer de l'application et est intégrée dans les métadonnées et les noms de fichiers des rapports PDF générés.

Configuration PocketBase — VKTimeway

Ce dossier documente la configuration à effectuer une seule fois, dans l'interface d'administration de votre serveur PocketBase, pour activer la source de données "Cloud" de l'application (voir App/assets/js/VKCloud.js et App/assets/js/VKStore.js).

Testé avec le SDK client pocketbase v0.28.1 (vendored dans App/assets/js/pocketbase.umd.js) — utilisez une version de serveur PocketBase récente (≥ 0.23) qui expose le même format de règles.

0. Adresse du serveur

Ouvrez App/assets/js/VKCloud.js et remplacez la valeur par défaut :

var VK_POCKETBASE_URL_DEFAULT = 'http://localhost:8090';

par l'URL réelle de votre instance PocketBase. Ce n'est qu'une valeur par défaut : le champ "Adresse du serveur PocketBase" du formulaire de connexion (page d'accueil, source "Cloud") permet de la modifier à tout moment sans retoucher le code — la dernière adresse utilisée est mémorisée dans le navigateur. Changer d'adresse invalide la session en cours (un jeton d'authentification n'a de sens que pour le serveur qui l'a émis).

1. Collection users (déjà fournie par PocketBase)

Rien à créer — PocketBase inclut déjà une collection d'authentification users (email + mot de passe). Il faut seulement assouplir ses règles pour permettre à un utilisateur connecté de retrouver un autre utilisateur par son adresse e-mail (nécessaire pour partager une machine) :

Dans Collections → users → Edit → API Rules, remplacez :

Ceci permet à tout utilisateur connecté de lister/consulter les comptes (uniquement les champs publics : email, id — jamais le mot de passe), mais pas de les modifier ni les supprimer (ces règles restent inchangées).

2. Collection machines

Collections → New collection → Base collection, nom machines.

Champs :

Champ Type Requis Notes
name Text oui
number Text non
client Text non
location Text non
remarks Editor (ou Text) non
owner Relation → users oui Single, cascade delete conseillé
local_id Text non UUID généré côté client, pour réconcilier avec les données locales

API Rules :

List/Search rule :
  owner = @request.auth.id ||
  machine_shares_via_machine.user ?= @request.auth.id

View rule :  (identique au List rule ci-dessus)

Create rule :
  @request.auth.id != "" && @request.body.owner = @request.auth.id

Update rule :
  owner = @request.auth.id ||
  (machine_shares_via_machine.user ?= @request.auth.id &&
   machine_shares_via_machine.permission = "edit")

Delete rule :
  owner = @request.auth.id

3. Collection versions

New collection → Base collection, nom versions.

Champs :

Champ Type Requis Notes
machine Relation → machines oui Single, cascade delete conseillé
number Number oui
comment Text non
remarks Editor (ou Text) non
data JSON oui { Positions, Hoists, Sequences, Timeways, Programs, LiftTypes, LowerTypes }
local_id Text non UUID généré côté client

API Rules :

List/Search rule :
  machine.owner = @request.auth.id ||
  machine.machine_shares_via_machine.user ?= @request.auth.id

View rule :  (identique)

Create rule :
  machine.owner = @request.auth.id ||
  (machine.machine_shares_via_machine.user ?= @request.auth.id &&
   machine.machine_shares_via_machine.permission = "edit")

Update rule :  (identique au Create rule)

Delete rule :
  machine.owner = @request.auth.id

4. Collection machine_shares

New collection → Base collection, nom machine_shares.

Champs :

Champ Type Requis Notes
machine Relation → machines oui Single, cascade delete conseillé
user Relation → users oui Single, cascade delete conseillé
permission Select oui Options : view, edit — défaut view

API Rules :

List/Search rule :
  machine.owner = @request.auth.id || user = @request.auth.id

View rule :  (identique)

Create rule :
  machine.owner = @request.auth.id

Update rule :
  machine.owner = @request.auth.id

Delete rule :
  machine.owner = @request.auth.id || user = @request.auth.id

5. Comptes utilisateurs

Créez les comptes depuis Collections → users → New record (ou activez l'inscription publique si vous le souhaitez — non nécessaire pour ce projet, les comptes peuvent être créés uniquement par l'administrateur).

Notes / limites connues

Manuel d'utilisation

Pour lancer l'application, naviguer vers https://vkvision.ch/VKTimeway La page suivante s'affiche:

2026-03-24_10-48-36.PNG

Au premier lancement, la liste des machines est vide. Vous pouvez importer une configuration  qui se trouve dans le fichier joint.

L'application fonctionne avec le localstorage du navigateur. Le bouton [Importer les données] importe et remplace le localstorage. A l'inverse, le bouton [Exporter les données] exporte tous les fichiers du localstorage dans un fichier json.

Après avoir importer la configuration ci-jointe, la fenêtre affiche 5 machines configurées.

Vous pouvez travailler en local:

2026-09-21_19-26-45.PNG

Ou bien dans le cloud:

2026-09-21_19-23-49.PNG

Pour travailler dans le cloud, une base de données PocketBase doit être installé.

Cliquez sur le bouton [Voir les machines]. La liste des machines est affichée:

2026-09-21_19-29-10.PNG


Sur cette page, vous pouvez sélectionner une machine ou en créer une nouvelle.

Pour créer une nouvelle machine, cliquez sur [+ Nouvelle machine], la page suivante s'affiche:

2026-03-24_11-04-22.PNG

Vous pouvez définir tous les champs et cliquer sur [enregistrer]. La nouvelle machine sera créée. En cliquant sur [Importer depuis le disque], vous pouvez importer une configuration d'une machine de VKQuickView ou d'un diagramme exporté par l'ancienne version de VKTimeway.

Lorsque la nouvelle machine est créée, la page des versions s'affiche:

 2026-03-24_11-09-44.PNG

Si vous avez importé une configuration, une version sera créée dans la liste. Si vous avez uniquement rempli la fiche alors la liste sera vide. 

Pour créer une nouvelle version, cliquez sur [+Nouvelle version]. La page suivante s'affichera:

2026-03-24_11-13-32.PNG

Cette page affiche la liste des positions de la machine. Les différentes fonctions disponibles sont les suivantes:

2026-03-24_11-13-32.PNG

Le menu de navigation

Le menu latéral affiche les commandes possibles:

Commandes Description
Acceuil Retour à la page d'accueil de l'application
Positions Edition des positions de la machine
Robots Edition des robots
Type M/D Edition des types de montées/descentes effectués par les robots
Séquences Editeur de séquences
Diagrammes Editeur de diagrammes
Simulation Simulation des diagrammes

Edition des positions de la machine

Pour ajouter une nouvelle position, cliquez sur [+Ajouter]. La boîte de dialogue suivante s'affiche:

2026-03-24_11-40-25.PNG

Pour chaque position, les champs suivants sont disponibles:

Champ Description
Id Identifiant de la position
Nom Nom de la position
Flag Flag indiquant la fonctionnalité de la position (1=charge, 2=décharge, 3=Charge/décharge, etc...)
Groupe Lorsque la position fait partie d'un groupe ayant la même fonctionnalité, on l'indique dans ce champ. La valeur du champ doit être une valeur de dizaine soit 10, 20, 30, etc.. Un sous-groupe est défini dans les unité du groupe par exemple 12 = Groupe 10, sous-groupe 2 
Bain Numéro du bain
Adresse Adresse électronique de la position
Branche Numéro de la branche machine: une machine peut être formée de plusieurs branches
Montée Type de montée à utiliser sur cette position
Descente Type de descente à utiliser sur cette position
Distance Distance (en mm) du centre de la position précédente jusqu'au centre de la position.

Lorsque toutes les positions sont définies, la liste se présente comme suit:

2026-04-13_17-25-18.PNG

Sur chaque position, vous pouvez insérer une position [+] ou éditer une position ou effacer la position.

Edition des robots

Pour ajouter un robot, cliquez sur [+Ajouter]. La boîte de dialogue suivante s'affiche:

2026-03-24_11-54-03.PNG

Pour chaque robot, les champs suivants sont disponibles:

Champs Description
Id Identifiant du robot
Pos. initiale Première position sur laquelle le robot peut se déplacer
Pos. finales Dernière position sur laquelle le robot peut se déplacer
Largeur (mm) Largeur physique du robot en mm
Avant (mm) Largeur depuis le centre du robot jusqu'à son extrémité droite (en avant dans les positions)
Arrière (mm) Largeur depuis le centre du robot jusqu'à son extrémité gauche (en arrière dans les positions)
Vitesse (mm/s) Vitesse maximale du robot. Vitesse exprimée en mm/s
Acc/Dec (ms) Temps d'accélération/décélération exprimé en ms pour atteindre la vitesse maximale 

Dans la liste des robots, sur chaque robot vous pouvez déplacer le robot vers le haut ou vers le bas. Vous pouvez éditer les champs du robot. Vous pouvez copier un robot en ajoutant la copie à la fin de la liste. Vous pouvez également supprimer le robot.

Edition des types de montées/descentes

Il est possible de définir 10 types de montées et 10 types de descentes.

2026-03-24_12-05-53.PNG

Vous pouvez donner une nom à chaque type ainsi qu'une durée en ms.

Edition des séquences

Les séquences sont utilisées pour créer des diagrammes. Une séquence est un ensemble d'étapes à effectuer dans la machine. 

2026-04-13_17-26-53.PNG

Chaque fois que vous cliquez sur le bouton [+Ajouter une étape] ou sur une position de la machine, ajoute une ligne dans le tableau. Il faut ensuite remplir les champs de chaque étapes. Les champs suivants sont disponibles:

Champs Description
Position Position de l'étape
Groupe Groupe de la position. 
Montée Type de montée à utiliser
Descente Type de descente à utiliser
T.Min (s) Temps minimum autorisé en secondes
T.Max (s) Temps maximum autorisé en secondes
T.Egouttage (s) Temps d'égouttage sur la position en secondes

Dans la liste des séquences, il est possible pour chaque séquence de l'éditer, de copier la séquence (ajout en fin de liste), créer un diagramme, exporter la séquence sur un document pdf et effacer la séquence.

2026-03-24_12-24-09.PNG

Lorsque l'on clique sur le bouton de création d'un diagramme, la boîte de dialogue suivante s'affiche:

2026-03-24_12-27-33.PNG

Les options pour la création d'un diagramme sont:

En cliquant sur le bouton [Générer] génère un nouveau diagramme et le place en fin de liste des diagrammes. L'éditeur de diagramme s'affiche alors.

Editeur de diagrammes

La liste des diagrammes disponibles est affichée dans la page "Diagrammes".

2026-03-24_12-42-26.PNG

Pour chaque diagramme, vous pouvez lancer l'éditeur de diagrammes, éditer le diagramme, exporter la liste des étapes dans un document pdf ou effacer ce diagramme.

En cliquant sur une ligne d'un diagramme, vous changez la visibilité en arrière plan de celui-ci dans l'éditeur de diagramme.

Lorsque l'éditeur de diagramme est lancé, celui-ci s'affiche en pleine fenêtre:

2026-03-24_13-50-09.PNG

Bandeau de commandes
Icône Fonction
2026-03-24_13-00-16.PNG Réduction de l'échelle du temps
2026-03-24_13-00-37.PNG Afficher le digramme sur toute la largeur de l'espace de travail
2026-03-24_13-00-50.PNG Augmentation de l'échelle du temps
2026-03-24_13-01-11.PNG Afficher/cacher la grille des positions
2026-03-24_13-01-24.PNG Afficher/cacher la grille des minutes
2026-03-24_13-01-51.PNG Afficher/cacher les montées/descentes
2026-03-24_13-02-14.PNG Afficher/cacher les aides de positionnement d'un mouvement. Lorsque l'on déplace un mouvement, des lignes verticales sont dessinés pour vous aider à positionner correctement un mouvement. Des lignes de déplacement à vide sont également dessinées depuis et vers chaque mouvement du même robot.
2026-03-24_13-02-27.PNG Affiche/cacher l'empreinte d'encombrement du robot
2026-03-24_13-02-44.PNG Lier les mouvements lors du déplacement d'un mouvement. Si cette option est sélectionnée, si vous cliquez sur une montée du robot, tous les mouvements précédents dans la séquence sont également déplacés. Si vous cliquez sur la descente en destination d'un mouvement, tous les mouvements suivants dans la séquence sont déplacés. Si vous cliquez sur le déplacement du mouvement alors seul ce mouvement sera déplacé.
2026-03-24_13-03-04.PNG Etendre/réduire les positions des groupes. Lorsque cette option est activée une seule position du groupe est affichée (la première dans la ligne des positions machine). 
2026-03-24_13-16-02.PNG Sélection d'un mouvement. Lorsqu'un mouvement est sélectionné, les temps tmin teff et tmax sont affichés. Les aides ainsi que l'empreinte du robot sont affichés selon l'état des options.
2026-03-24_13-16-18.PNG Déplacer un mouvement sur le diagramme. 
2026-03-24_13-16-31.PNG Déplacer un mouvement sur le diagramme ainsi que tous les mouvements du même robot se trouvant à gauche du mouvement sélectionné
2026-03-24_13-16-46.PNG Déplacer un mouvement sur le diagramme ainsi que tous les mouvements du même robot se trouvant à droite du mouvement sélectionné
2026-03-24_13-17-02.PNG Attribution d'un robot à un mouvement
2026-03-24_13-17-17.PNG Modification des déplacements à vide avant de prendre la charge et après avoir déposer la charge. Pour modifier le déplacement à vide avant de prendre la charge, cliquez sur la montée. Pour modifier le déplacement à vide après avoir déposé la charge cliquez sur la descente du mouvement 
2026-03-24_13-17-29.PNG Ajouter un mouvement qui ne fait pas partie de la séquence
2026-03-24_13-17-47.PNG Ajouter un mouvement à vide qui n'est pas lié à un mouvement
2026-03-24_13-18-03.PNG Effacer les mouvements ajoutés.
2026-03-24_13-36-01.PNG Sélection du diagramme affiché en avant plan
2026-03-24_13-36-28.PNG Sélection des diagrammes à afficher en arrière plan
2026-03-24_13-36-43.PNG Calcul des mouvements à vide avant et après chaque mouvement
2026-03-24_13-36-57.PNG Efface tous les mouvements à vide
2026-03-24_13-37-14.PNG Recalcule le temps de déplacement
2026-03-24_13-37-31.PNG Recalcule les temps de montée/descente
2026-03-24_13-37-48.PNG Undo
2026-03-24_13-37-59.PNG Redo
2026-03-24_13-38-13.PNG Afficher les propriétés d'un mouvement
2026-03-24_13-38-27.PNG Exporter le diagramme dans un document pdf

Simulation des diagrammes

L'écran de simulation se présente comme suit:

2026-03-24_13-58-44.PNG

2026-03-24_14-02-57.PNG

2026-03-24_14-08-47.PNG