# 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.1.0** — © 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 :

- Les **machines** (lignes de traitement) avec leur historique de versions
- Les **positions** (bains, postes de dépose/prise) par ligne
- Les **robots** (hoists) avec leurs paramètres cinématiques
- Les **séquences** de traitement par produit
- Les **timeway** (diagrammes espace-temps) générés automatiquement ou édités manuellement
- L'**éditeur graphique canvas** interactif des timeway
- Le **simulateur de production** avec visualisation multi-cycles
- La **génération de rapports PDF** pour chaque entité

---

## 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
    │   ├── VKDiagram.js        Moteur de rendu canvas du timeway
    │   ├── 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)
    ├── css/
    │   └── app.css             Styles spécifiques à l'application
    └── img/
        └── icons/              Icônes PNG de la barre d'outils de l'éditeur
```

### 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` |
| `VKDiagram.js` | Rendu canvas : axes, étapes, aides visuelles, détection collision |
| `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, 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)
```

Toutes les données sont stockées en JSON dans `localStorage` sous les clés `tw_machines` et `tw_versions`.

---

## Fonctionnalités principales

### Gestion des machines
- Création / modification / suppression de machines
- Champs : nom, numéro, client, localisation, remarques
- Horodatage automatique de création et de dernière modification
- Export / import d'une machine au format JSON (transfert entre postes)

### Export / Import des données
- **Export global** (page d'accueil) : télécharge un snapshot complet du `localStorage` (toutes les machines et versions) au format JSON
- **Import global** : restaure un snapshot précédemment exporté (remplace toutes les données existantes après confirmation)
- **Export machine** : exporte une machine et toutes ses versions dans un fichier JSON individuel
- **Import machine** : importe un fichier machine JSON dans l'application

### Versions
- Chaque machine peut avoir plusieurs versions indépendantes
- Commentaire et remarques sur chaque version
- Copie et suppression de versions

### Positions, robots (hoists), séquences
- Édition en liste avec validation
- Copie de séquences existantes
- Identifiants de séquences auto-incrémentés

### Types montées / descentes
- 10 types nommés par version pour les montées et les descentes
- Le type de montée et de descente est conservé dans chaque étape de timeway généré (`liftType`, `lowerType`)
- Référencés par chaque position et chaque étape de séquence

### Génération automatique de timeway
- Calcul des temps de transfert avec profil de vitesse trapézoïdal :
  - Distance longue : `t = (d/v + ta/2) × 1000` ms
  - Distance courte : `t = √(2 × ta × d / v) × 1000` ms
  - où `v` = vitesse en mm/s, `ta` = temps acc/déc en s
- Attribution automatique des robots aux étapes
- Calcul optionnel des mouvements à vide (retours)

### Éditeur graphique de timeway
- Canvas interactif avec zoom et pan
- **Redimensionnement automatique** du canvas lorsque la fenêtre de l'éditeur change de taille (`ResizeObserver`)
- Sélection du timeway actif via menu déroulant (titre mis à jour dynamiquement)
- Outils : sélection, déplacement, déplacement bloc gauche/droite, ajout d'étapes, effacement, ajustement des temps
- Options d'affichage persistées dans `localStorage` :
  - Grille des temps (`timeGrid`)
  - Grille des positions (`posGrid`)
  - Marques montée/descente (`upDown`)
  - Aides mouvement vides (`emptyMove`)
  - Empreinte bras (`hoistRange`)
  - Liens (`showLink`)
  - **Regroupement des positions** (`collapseGroups`) — les positions d'un même groupe sont affichées sur une seule ligne
- Icônes actives en jaune, inactives en blanc, survol en gris
- Détection visuelle des collisions entre robots
- Cercles d'intersection sur les zones de croisement de temps clés
- Robot sélectionné mis en évidence en jaune (légende mise à jour en conséquence)
- **Curseur interactif** : nom de la position en jaune au survol + ligne verticale pointillée sur l'axe du temps

### Simulateur de production
- Fenêtre plein écran de simulation multi-cycles
- Ajout de diagrammes dans la file de simulation avec vérification des conflits :
  - Détection d'occupation de bain (positions sans groupe)
  - Substitution automatique de position dans un groupe (flag `gf`) si la position cible est occupée
  - Collision de robots entre cycles
- **Algorithme de décalage de cycle** :
  - Les temps `ti`/`tf` sont arrondis à la seconde
  - Si un step dépose dans un groupe (`gf != 0`) et que `tminf > cycleTime`, le temps d'immersion effectif est calculé : `(tf−ti) + floor(tminf / cycleTime) × cycleTime`
  - L'ajout de cycles basé sur `tminf` ne s'applique qu'aux positions avec groupe
- **Positions avec flag 1, 2, 3 ou 7** : le test d'occupation de bain est ignoré
- Visualisation canvas interactive :
  - Axe du temps avec graduation en minutes (`#N` par slot de cycle)
  - Axe des positions avec défilement vertical (clic + glisser)
  - Position survolée mise en évidence en jaune
  - Barres d'immersion colorées (cyan = normal, orange = < tminf, rouge = > tmaxf)
  - Pan temporel par clic + glisser horizontal
  - Zoom temporel par molette de la souris
- Liste des cycles chargeables repliable (panneau latéral)
- Impression du diagramme de simulation

### 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 :
- Bandeau d'en-tête (machine, version, titre du rapport, client/localisation)
- Tables avec lignes alternées et en-têtes répétés sur chaque page
- Footer : copyright · numéro de page · date de génération

---

## 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. L'application fonctionne directement depuis un navigateur.

1. Cloner le dépôt
2. Servir le dossier `App/` via un serveur HTTP local (requis pour le Service Worker) :
   ```bash
   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/` :

```bash
npm install       # une seule fois
npm run build     # génère Dist/
```

Le build effectue :
- Concaténation + minification des 7 fichiers JS applicatifs → `app.bundle.min.js` (~54% de réduction)
- Minification de `app.css` → `app.min.css` (~37% de réduction)
- Copie des librairies tierces déjà minifiées
- Mise à jour de `index.html` pour référencer les fichiers minifiés
- Génération d'un `sw.js` avec un nom de cache dédié (`vktimeway-dist-v*`)

> **Important :** Incrémenter `SW_CACHE_VERSION` dans `build.js` à chaque nouveau déploiement pour forcer la mise à jour du cache chez les utilisateurs.

Pour servir la version de distribution :
```bash
npx serve Dist/
```

---

## 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 |

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, 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` :

```javascript
var VK_VERSION = 'ver. 2.1.0';
```

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.

# Manuel d'utilisation

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

[![2026-03-24_10-48-36.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-10-48-36.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/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 4 machines configurées.

[![2026-03-24_10-59-31.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-10-59-31.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-10-59-31.PNG)

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

[![2026-03-24_11-01-12.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-11-01-12.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-11-01-12.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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-11-04-22.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-11-09-44.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-11-13-32.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/9Pt2026-03-24-11-13-32.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/9Pt2026-03-24-11-13-32.PNG)

#### Le menu de navigation

Le menu latéral affiche les commandes possibles:

<table id="bkmrk-commandes-descriptio" style="border-collapse:collapse;width:100%;"><colgroup><col style="width:23.1548%;"></col><col style="width:76.9644%;"></col></colgroup><thead><tr><td>Commandes</td><td>Description</td></tr></thead><tbody><tr><td>Acceuil</td><td>Retour à la page d'accueil de l'application</td></tr><tr><td>Positions</td><td>Edition des positions de la machine</td></tr><tr><td>Robots</td><td>Edition des robots</td></tr><tr><td>Type M/D</td><td>Edition des types de montées/descentes effectués par les robots</td></tr><tr><td>Séquences</td><td>Editeur de séquences</td></tr><tr><td>Diagrammes</td><td>Editeur de diagrammes</td></tr><tr><td>Simulation</td><td>Simulation des diagrammes</td></tr></tbody></table>

#### 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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-11-40-25.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-11-40-25.PNG)

Pour chaque position, les champs suivants sont disponibles:

<table id="bkmrk-champ-description-id" style="border-collapse:collapse;width:100%;"><colgroup><col style="width:20.1786%;"></col><col style="width:79.9405%;"></col></colgroup><thead><tr><td>Champ</td><td>Description</td></tr></thead><tbody><tr><td>Id</td><td>Identifiant de la position</td></tr><tr><td>Nom</td><td>Nom de la position</td></tr><tr><td>Flag</td><td>Flag indiquant la fonctionnalité de la position (1=charge, 2=décharge, 3=Charge/décharge, etc...)</td></tr><tr><td>Groupe</td><td>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 </td></tr><tr><td>Bain</td><td>Numéro du bain</td></tr><tr><td>Adresse</td><td>Adresse électronique de la position</td></tr><tr><td>Branche</td><td>Numéro de la branche machine: une machine peut être formée de plusieurs branches</td></tr><tr><td>Montée</td><td>Type de montée à utiliser sur cette position</td></tr><tr><td>Descente</td><td>Type de descente à utiliser sur cette position</td></tr><tr><td>Distance</td><td>Distance (en mm) du centre de la position précédente jusqu'au centre de la position.</td></tr></tbody></table>

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

[![2026-04-13_17-25-18.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-04/scaled-1680-/2026-04-13-17-25-18.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-04/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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-11-54-03.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-11-54-03.PNG)

Pour chaque robot, les champs suivants sont disponibles:

<table id="bkmrk-champs-description-i" style="border-collapse:collapse;width:100%;"><colgroup><col style="width:20.2672%;"></col><col style="width:79.7328%;"></col></colgroup><thead><tr><td>Champs</td><td>Description</td></tr></thead><tbody><tr><td>Id</td><td>Identifiant du robot</td></tr><tr><td>Pos. initiale</td><td>Première position sur laquelle le robot peut se déplacer</td></tr><tr><td>Pos. finales</td><td>Dernière position sur laquelle le robot peut se déplacer</td></tr><tr><td>Largeur (mm)</td><td>Largeur physique du robot en mm</td></tr><tr><td>Avant (mm)</td><td>Largeur depuis le centre du robot jusqu'à son extrémité droite (en avant dans les positions)</td></tr><tr><td>Arrière (mm)</td><td>Largeur depuis le centre du robot jusqu'à son extrémité gauche (en arrière dans les positions)</td></tr><tr><td>Vitesse (mm/s)</td><td>Vitesse maximale du robot. Vitesse exprimée en mm/s</td></tr><tr><td>Acc/Dec (ms)</td><td>Temps d'accélération/décélération exprimé en ms pour atteindre la vitesse maximale </td></tr></tbody></table>

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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-12-05-53.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/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](https://docs-03.vkvision.net/uploads/images/gallery/2026-04/scaled-1680-/2026-04-13-17-26-53.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-04/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:

<table id="bkmrk-champs-description-p" style="border-collapse:collapse;width:100%;"><colgroup><col style="width:18.631%;"></col><col style="width:81.4882%;"></col></colgroup><thead><tr><td>Champs</td><td>Description</td></tr></thead><tbody><tr><td>Position</td><td>Position de l'étape</td></tr><tr><td>Groupe</td><td>Groupe de la position. </td></tr><tr><td>Montée</td><td>Type de montée à utiliser</td></tr><tr><td>Descente</td><td>Type de descente à utiliser</td></tr><tr><td>T.Min (s)</td><td>Temps minimum autorisé en secondes</td></tr><tr><td>T.Max (s)</td><td>Temps maximum autorisé en secondes</td></tr><tr><td>T.Egouttage (s)</td><td>Temps d'égouttage sur la position en secondes</td></tr></tbody></table>

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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-12-24-09.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-12-27-33.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-12-27-33.PNG)

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

- Type de temps dans les bains: Temps minimum: les temps TMin sont utilisés pour créer le diagramme, Temps moyen (Tmin+Tmax)/2 ou Temps max.
- Temps de cycle: Calculer automatiquement : le système calcul automatiquement le temps de cycle selon la liste des étapes définies, Définir manuellement en secondes
- Calculer les déplacements à vide des robots.

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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-12-42-26.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/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](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-50-09.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-50-09.PNG)

##### Bandeau de commandes

<table id="bkmrk-ic%C3%B4ne-fonction-r%C3%A9duc" style="border-collapse:collapse;width:100%;height:1445.11px;"><colgroup><col style="width:6.31662%;"></col><col style="width:93.6834%;"></col></colgroup><thead><tr style="height:29.7969px;"><td class="align-center" style="height:29.7969px;">Icône</td><td style="height:29.7969px;">Fonction</td></tr></thead><tbody><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-00-16.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-00-16.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-00-16.PNG)</td><td style="height:47.3906px;">Réduction de l'échelle du temps</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-00-37.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-00-37.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-00-37.PNG)</td><td style="height:47.3906px;">Afficher le digramme sur toute la largeur de l'espace de travail</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-00-50.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-00-50.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-00-50.PNG)</td><td style="height:47.3906px;">Augmentation de l'échelle du temps</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-01-11.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-01-11.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-01-11.PNG)</td><td style="height:47.3906px;">Afficher/cacher la grille des positions</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-01-24.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-01-24.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-01-24.PNG)</td><td style="height:47.3906px;">Afficher/cacher la grille des minutes</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-01-51.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-01-51.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-01-51.PNG)</td><td style="height:47.3906px;">Afficher/cacher les montées/descentes</td></tr><tr style="height:63.3906px;"><td style="height:63.3906px;">[![2026-03-24_13-02-14.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-02-14.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-02-14.PNG)</td><td style="height:63.3906px;">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.</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-02-27.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-02-27.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-02-27.PNG)</td><td style="height:47.3906px;">Affiche/cacher l'empreinte d'encombrement du robot</td></tr><tr style="height:80.1875px;"><td style="height:80.1875px;">[![2026-03-24_13-02-44.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-02-44.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-02-44.PNG)</td><td style="height:80.1875px;">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é.</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-03-04.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-03-04.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-03-04.PNG)</td><td style="height:47.3906px;">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). </td></tr><tr style="height:46.5938px;"><td style="height:46.5938px;">[![2026-03-24_13-16-02.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-16-02.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-16-02.PNG)</td><td style="height:46.5938px;">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.</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-16-18.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-16-18.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-16-18.PNG)</td><td style="height:47.3906px;">Déplacer un mouvement sur le diagramme. </td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-16-31.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-16-31.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-16-31.PNG)</td><td style="height:47.3906px;">Déplacer un mouvement sur le diagramme ainsi que tous les mouvements du même robot se trouvant à gauche du mouvement sélectionné</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-16-46.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-16-46.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-16-46.PNG)</td><td style="height:47.3906px;">Déplacer un mouvement sur le diagramme ainsi que tous les mouvements du même robot se trouvant à droite du mouvement sélectionné</td></tr><tr style="height:42.8125px;"><td style="height:42.8125px;">[![2026-03-24_13-17-02.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-17-02.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-17-02.PNG)</td><td style="height:42.8125px;">Attribution d'un robot à un mouvement</td></tr><tr style="height:63.3906px;"><td style="height:63.3906px;">[![2026-03-24_13-17-17.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-17-17.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-17-17.PNG)</td><td style="height:63.3906px;">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 </td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-17-29.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-17-29.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-17-29.PNG)</td><td style="height:47.3906px;">Ajouter un mouvement qui ne fait pas partie de la séquence</td></tr><tr style="height:46.3906px;"><td style="height:46.3906px;">[![2026-03-24_13-17-47.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-17-47.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-17-47.PNG)</td><td style="height:46.3906px;">Ajouter un mouvement à vide qui n'est pas lié à un mouvement</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-18-03.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-18-03.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-18-03.PNG)</td><td style="height:47.3906px;">Effacer les mouvements ajoutés.</td></tr><tr style="height:35.3906px;"><td style="height:35.3906px;">[![2026-03-24_13-36-01.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-36-01.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-36-01.PNG)</td><td style="height:35.3906px;">Sélection du diagramme affiché en avant plan</td></tr><tr style="height:43.9531px;"><td style="height:43.9531px;">[![2026-03-24_13-36-28.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-36-28.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-36-28.PNG)</td><td style="height:43.9531px;">Sélection des diagrammes à afficher en arrière plan</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-36-43.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-36-43.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-36-43.PNG)</td><td style="height:47.3906px;">Calcul des mouvements à vide avant et après chaque mouvement</td></tr><tr style="height:46.3906px;"><td style="height:46.3906px;">[![2026-03-24_13-36-57.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-36-57.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-36-57.PNG)</td><td style="height:46.3906px;">Efface tous les mouvements à vide</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-37-14.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-37-14.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-37-14.PNG)</td><td style="height:47.3906px;">Recalcule le temps de déplacement</td></tr><tr style="height:46.3906px;"><td style="height:46.3906px;">[![2026-03-24_13-37-31.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-37-31.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-37-31.PNG)</td><td style="height:46.3906px;">Recalcule les temps de montée/descente</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-37-48.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-37-48.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-37-48.PNG)</td><td style="height:47.3906px;">Undo</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-37-59.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-37-59.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-37-59.PNG)</td><td style="height:47.3906px;">Redo</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-38-13.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-38-13.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-38-13.PNG)</td><td style="height:47.3906px;">Afficher les propriétés d'un mouvement</td></tr><tr style="height:47.3906px;"><td style="height:47.3906px;">[![2026-03-24_13-38-27.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-38-27.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-38-27.PNG)</td><td style="height:47.3906px;">Exporter le diagramme dans un document pdf</td></tr></tbody></table>

#### Simulation des diagrammes

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

[![2026-03-24_13-58-44.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-13-58-44.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-13-58-44.PNG)

[![2026-03-24_14-02-57.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-14-02-57.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-14-02-57.PNG)

[![2026-03-24_14-08-47.PNG](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/scaled-1680-/2026-03-24-14-08-47.PNG)](https://docs-03.vkvision.net/uploads/images/gallery/2026-03/2026-03-24-14-08-47.PNG)