# 🖥️​ Interface ViewBox # Vue d’ensemble #### **Vue d’ensemble** **ViewBox** est une solution de suivi visuel de chantier basée sur la capture d’images automatisée et leur consultation via une interface web intuitive. Elle permet de visualiser l’évolution d’un site dans le temps, de manière simple, fluide et accessible à distance. #### **Principe de fonctionnement** Un dispositif de capture (caméra timelapse) est installé sur le chantier afin de prendre des images à intervalles réguliers. Ces images sont ensuite stockées et mises à disposition sur une plateforme en ligne, permettant aux utilisateurs autorisés de consulter l’historique visuel du chantier à tout moment. #### **Objectifs** **ViewBox** répond à plusieurs besoins essentiels : \- Suivre l’avancement des travaux de manière visuelle \- Faciliter la communication entre les différents intervenants \- Conserver un historique précis du chantier \- Valoriser le projet auprès des clients et partenaires #### **Cas d’usage** La solution peut être utilisée dans différents contextes : \- Suivi de chantier pour les entreprises de construction \- Communication client (partage d’avancement) \- Création de contenus marketing (timelapse, avant/après) \- Archivage et documentation des projets #### **Points forts** \- Accès à distance via une interface web \- Navigation dans le temps (historique complet des images) \- Outils de comparaison visuelle \- Visualisation fluide même sur de grandes quantités d’images **ViewBox** transforme un simple flux d’images en un véritable outil d’analyse, de suivi et de communication. # Navigation générale La navigation dans **VueChantier** est conçue pour être simple et rapide, afin de permettre à l’utilisateur d’accéder facilement aux images et de parcourir l’historique du chantier. L'interface se veut minimaliste afin de favoriser une meilleure visualisation des images. #### **Navigation dans les images** L’utilisateur peut se déplacer dans les images grâce à plusieurs outils : - *Flèches de navigation* : en mode Timeline ou Diaporama, elles sont situées sur les bords de l'écran, permettent d’avancer ou de reculer image par image ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/fYEimage.png) ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/cYkimage.png) - *Panneau de contrôle* : au survol du bouton "Home", le panneau de contrôle s'affiche. Il permet de sélectionner les différents modes de vue et d'utiliser les fonctionnalités associées [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/4Asimage.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/4Asimage.png) Ces outils permettent d’explorer facilement les différentes étapes du chantier. #### **Changement de mode** Le panneau de contrôle propose plusieurs modes de visualisation accessibles à tout moment. [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/image.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/image.png) L’utilisateur peut passer facilement d’un mode à un autre afin d’adapter l’affichage en fonction de son besoin : - Timeline - Côte à côte - Slider - Diaporama Le changement est instantané et n’interrompt pas la navigation. #### **Zoom et Plein écran** Le zoom est disponible lorsqu'une seule image est affichée. Il suffit à l’utilisateur de faire défiler la molette de la souris sur un point précis. Il peut ensuite se déplacer dans l’image tout en conservant le même niveau de zoom. Il est possible de passer en mode plein écran en double-cliquant sur l’image, quel que soit le mode utilisé. Pour quitter ce mode, trois options sont disponibles : - double-cliquer à nouveau - appuyer sur la touche Échap - utiliser le bouton dédié à côté du bouton "Home" [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/OGOimage.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/OGOimage.png) #### **Date et informations** Différentes informations sont accessibles via l'icône "Informations" : ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/iQUimage.png) - Nom du chantier - Nombres d'images disponibles - Date de la première image - Date de la dernière image - Date de la dernière mise à jour (tension et batterie) - Tension - Pourcentage de batterie restant - Lien vers la documentation #### **Fluidité et performance** La navigation est optimisée pour fonctionner de manière fluide, même avec un grand nombre d’images. Les actions sont immédiates : - chargement rapide des images - transitions sans interruption - navigation continue sans rechargement de page #### **Résumé** La navigation dans VueChantier repose sur trois éléments principaux : - se déplacer dans les images - accéder rapidement à une date précise - plusieurs modes de vue selon le besoin Ces outils permettent à l’utilisateur de consulter et d’analyser l’évolution du chantier de manière simple et efficace. # Mode Timeline Le mode Timeline permet de parcourir chronologiquement les images du chantier. [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/mvAimage.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/mvAimage.png) #### **Fonctionnement** L’utilisateur navigue dans le temps en affichant une image à la fois. Il peut : - **avancer** ou **reculer** avec les flèches ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/N6ximage.png) ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/Zvoimage.png) - se rendre directement à la **première** ou à la **dernière image** ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/Hcgimage.png) [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/Ql8image.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/Ql8image.png) - sélectionner une **date** et une **heure** précise, soit en les saisissant, soit via le **calendrier** [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/ckAimage.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/ckAimage.png) L’image affichée correspond à l’instant choisi ou, si aucune image n’existe à cet instant précis, à l’image la plus proche disponible. L'utilisateur peut également naviguer à l'aide de la timeline coulissante : [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/lEeimage.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/lEeimage.png) L'utilisateur peut **télécharger** l'image qui est affichée version HD à l'aide du bouton suivant : ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/4NAimage.png) L'utilisateur peut passer en **mode plein écran** avec le bouton suivant (ou en double-cliquant sur l’image) : [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/g79image.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/g79image.png) #### **Utilisation** Ce mode est idéal pour : \- suivre l’évolution du chantier étape par étape \- vérifier un moment précis #### **Résumé** Le mode Timeline offre une navigation simple, précise et intuitive dans l’historique des images. # Mode Côte à côte Le mode Côte à côte permet d’afficher deux images côte à côte afin de visualiser les différences entre deux moments du chantier. [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/q0Oimage.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/q0Oimage.png) #### **Fonctionnement** L’utilisateur sélectionne deux dates distinctes : - une image affichée à gauche - une image affichée à droite Chaque image peut être choisie indépendamment à l’aide des outils de navigation ou du sélecteur de date. Outils de navigation : - **avancer** ou **reculer** avec les flèches ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/N6ximage.png) ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/Zvoimage.png) - se rendre directement à la **première** ou à la **dernière image** ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/Hcgimage.png) [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/Ql8image.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/Ql8image.png) - sélectionner une **date** et une **heure** précises, soit en les saisissant, soit via le **calendrier** [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/ckAimage.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/ckAimage.png) #### **Utilisation** Ce mode est particulièrement utile pour : - visualiser l’évolution entre deux étapes du chantier - comparer un avant / après - vérifier l’avancement des travaux - illustrer des changements auprès d’un client #### **Résumé** Le mode Comparaison permet d’identifier rapidement les évolutions du chantier en confrontant deux images à des dates différentes. # Mode Slider Le mode **Slider** permet de comparer deux images de manière interactive à l’aide d’un curseur. [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/5utimage.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/5utimage.png) #### **Fonctionnement** L’utilisateur sélectionne deux dates distinctes : - une image affichée en arrière-plan - une image superposée au premier plan La navigation est similaire au mode **Timeline** et **Côte à Côte.** Un curseur permet de révéler progressivement l’une ou l’autre des images. ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/0NSimage.png) Un double-clic sur le curseur permet de le recentrer. #### **Utilisation** Ce mode est particulièrement adapté pour : - visualiser précisément les différences entre deux états du chantier - comparer un avant / après de manière intuitive - mettre en évidence des zones spécifiques L’interaction rend la comparaison plus naturelle et plus lisible qu’un affichage classique. #### **Résumé** Le mode **Slider** permet d’explorer les évolutions du chantier de manière interactive et visuelle, en superposant deux images et en contrôlant leur affichage avec un simple mouvement. # Mode Diaporama Le mode Diaporama permet de visualiser automatiquement une succession d’images afin d’observer l’évolution du chantier dans le temps. [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/s4wimage.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/s4wimage.png) #### **Fonctionnement** Les images défilent automatiquement les unes après les autres, dans l’ordre chronologique. L’utilisateur peut : - sélectionner la date de début de visionnage ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/g8uimage.png) - choisir l'intervalle de temps entre chaque photos affichées ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/KJaimage.png) - ajuster la vitesse de défilement ![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/js0image.png) - lancer ou mettre en pause la lecture (il peut arrêter la lecture en cours en cliquant sur l'image) [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/HdWimage.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/HdWimage.png) - choisir le sens de lecture [![image.png](https://doc.viewbox.ch/uploads/images/gallery/2026-04/scaled-1680-/Q40image.png)](https://doc.viewbox.ch/uploads/images/gallery/2026-04/Q40image.png) - l'option téléchargement de la vidéo sera prochainement implémentée #### **Utilisation** Ce mode est particulièrement adapté pour : - obtenir une vue globale de l’avancement du chantier - visualiser rapidement une période complète - créer un effet timelapse #### **Résumé** Le mode Diaporama offre une visualisation continue et automatisée de l’évolution du chantier.