Vue D’ensemble
L’interface Studio est construite comme un espace de travail, pas comme un simple formulaire. L’écran est organisé en surfaces distinctes:
- la scène principale et ses barres d’outils pour les actions immédiates
- les widgets flottants attachés à la carte ou au board d’export
- les drawers qui portent les tâches d’édition plus longues sans quitter l’espace de travail
- les dialogs et modals qui interrompent le flux pour une décision, un identifiant ou une validation finale
La règle importante est simple: les boutons déclenchent une action, les widgets montrent un état, les drawers contiennent le travail et les dialogs demandent une décision.
Types De Contrôles
| Type | Ce qu’il fait | Exemple Studio |
|---|---|---|
| Bouton | Lance une action ou ouvre une surface. | Journey, Settings, Video, Import |
| Bouton popup | Ouvre un petit menu pour un choix court. | Popup d’action Journey, sélecteur de mode de scène |
| Bouton toggle | Bascule un état on/off. | Visibilité du parcours, plein écran, orbit |
| Badge | Affiche un état sans demander d’action. | Lien de synchronisation vidéo et flythrough |
| Widget | Affiche un contexte live sur la carte ou l’export. | Boussole, crédits, profil altimétrique |
| Drawer | Garde un panneau ouvert pendant l’édition. | Settings, Layers, Journey editor |
| Dialog | Bloque le flux jusqu’à la réponse utilisateur. | Prompt Cesium token, dialog d’export vidéo |
| Switch | Bascule un réglage en place dans un drawer. | Réglages applicatifs et options de sync |
Comportement Global
- La plupart des boutons de scène sont des contrôles carrés, icon-first, avec tooltip.
- L’interface garde la carte visible pendant que le contexte d’édition se déplace dans les drawers et dialogs.
- Les actions partagées sont regroupées dans les barres primaire et secondaire pour éviter de fouiller dans les menus.
- Les contrôles liés à un état ne restent visibles que lorsqu’ils ont du sens.
- Les pages du guide suivent le même modèle mental que Studio.
Boutons Principaux
La scène principale utilise deux barres: une barre d’actions primaire et une barre d’outils secondaire. Elles entourent l’espace de travail et utilisent des boutons icône avec tooltip court.
Barre Primaire
| Élément | Icône | Type | Ce qu’il fait | Notes |
|---|---|---|---|---|
| Journey | Bouton avec popup | Ouvre le popup d’actions Journey avec édition, import et groupes. Choisir edit ouvre le drawer Journey editor. | Le même bouton peut servir d’import quand aucun parcours n’est disponible. | |
| Settings | Bouton | Ouvre le drawer Settings. | Garde les réglages globaux au même endroit. | |
| Layers | Bouton | Ouvre le drawer Layers. | Utilisé pour les fonds, overlays et terrains. | |
| POI editor | Bouton | Ouvre le drawer POIs. | Oriente l’édition des points plutôt que la navigation carte. | |
| Text | Bouton | Ajoute un widget texte au board de scène courant. | Crée directement un overlay visible sur la scène. | |
| Information | Bouton | Ouvre le drawer Information. | Contient infos projet et changelog. | |
| Support | Bouton | Ouvre le dialog Support. | Surface d’aide, pas drawer d’édition. |
Barre Secondaire
| Élément | Icône | Type | Ce qu’il fait | Notes |
|---|---|---|---|---|
| Mode de scène | Bouton popup | Bascule entre les modes 2D, 2.5D et 3D. | L’icône change selon le mode actif. | |
| Géocodage | Bouton | Ouvre le dialog Geocoding. | Peut créer un POI temporaire depuis un résultat. | |
| Orbit | Bouton | Démarre ou arrête l’orbite autour de la cible courante. | Ne tourne que si une cible valide existe. | |
| Full screen | Bouton | Bascule le mode plein écran du navigateur. | L’icône reflète l’état courant. | |
| Video | Bouton | Ouvre la configuration d’enregistrement vidéo. | Masqué pendant l’enregistrement ou la finalisation. | |
| Flythrough | Bouton | Ouvre le drawer Flythrough. | Visible seulement quand un parcours est disponible. | |
| Badge de sync | Badge | Montre que vidéo et flythrough sont liés. | Informatif uniquement. |
Boutons De Session
| Élément | Icône | Type | Ce qu’il fait | Notes |
|---|---|---|---|---|
| Import journey | Bouton | Ouvre le dialog Journey loader depuis le banner de première session. | Point d’entrée de démarrage pour charger des données. | |
| Visibilité du parcours | Bouton toggle | Affiche ou masque le parcours courant. | Vit dans l’édition Journey, pas dans la top bar. |
Comment Lire La Toolbar
La toolbar est faite pour l’action directe, pas pour la navigation. Si l’utilisateur veut modifier du contenu, le bouton ouvre généralement un drawer. S’il veut changer la caméra ou l’état de lecture, le bouton bascule un mode. S’il a besoin d’un choix ponctuel, le bouton ouvre plutôt un popup ou un dialog.
Widgets
Les widgets sont les overlays visibles attachés à la scène ou au board d’export. Ce ne sont pas des panneaux latéraux. Ils se déplacent, se redimensionnent et s’empilent avec la composition.
La référence détaillée des widgets se trouve maintenant sur la page Widgets. Utilisez cette page pour la liste complète des widgets, leurs icônes et les vérifications à faire sur chacun.
Drawers
Les drawers sont des panneaux latéraux persistants. Ils gardent la scène principale visible pendant que l’utilisateur édite une tâche liée.
Chaque drawer a une page dédiée:
| Drawer | Icône | À quoi il sert | Page |
|---|---|---|---|
| Drawer Information | Explique l’application et les changements récents. | Ouvrir la page | |
| Drawer Settings | Contrôle les réglages globaux de l’application. | Ouvrir la page | |
| Drawer Layers | Gère les sources carte et terrain. | Ouvrir la page | |
| Drawer Journey editor | Édite le parcours actif. | Ouvrir la page | |
| Drawer Journey groups | Organise les parcours en groupes. | Ouvrir la page | |
| Drawer POIs | Édite les points d’intérêt. | Ouvrir la page | |
| Drawer Widgets editor | Édite en détail le widget sélectionné. | Ouvrir la page | |
| Drawer Widget management | Réordonne les widgets et les déplace entre boards. | Ouvrir la page | |
| Drawer Flythrough | Contrôle le travail de flythrough caméra. | Ouvrir la page |
Utilisez un drawer quand la tâche fait partie du flux d’édition. Utilisez un dialog quand l’utilisateur doit décider, confirmer ou fournir un jeton avant de continuer.
Dialogs
Les dialogs sont des surfaces bloquantes ou qui captent le focus. Ils apparaissent quand Studio a besoin d’attention, d’une décision ou d’un identifiant.
Chaque dialog a une page dédiée:
| Dialog | Icône | À quoi il sert | Page |
|---|---|---|---|
| Dialog d’erreur initiale | Affiche l’erreur de démarrage et la stack trace. | Ouvrir la page | |
| Dialog de mise à jour PWA | Gère les prompts d’installation et de mise à jour. | Ouvrir la page | |
| Dialog Journey loader | Charge des fichiers de parcours depuis le stockage local. | Ouvrir la page | |
| Dialog Geocoding | Recherche des lieux ou coordonnées. | Ouvrir la page | |
| Dialog Support | Affiche le contenu d’aide. | Ouvrir la page | |
| Prompt Cesium token | Demande un jeton Cesium Ion. | Ouvrir la page | |
| Modal Layer information | Affiche le disclaimer de couche. | Ouvrir la page | |
| Modal Layer token | Demande un jeton d’accès pour une couche ou un terrain. | Ouvrir la page | |
| Dialog Profile sync | Gère les actions de profil liées à la synchronisation. | Ouvrir la page | |
| Dialog Video download | Prévisualise et télécharge le média enregistré. | Ouvrir la page | |
| Dialog Widget mount error | Avertit que les widgets ne sont pas prêts pour la capture. | Ouvrir la page | |
| Dialog Backend restart | Montre que le backend redémarre. | Ouvrir la page | |
| Dialog Confirm | Gère la confirmation finale. | Ouvrir la page |
Utilisez un dialog quand l’utilisateur doit décider, confirmer ou fournir un jeton avant de continuer. Si l’utilisateur doit revenir souvent à la tâche, le contrôle doit probablement vivre dans un drawer.
Raccourcis
Le Studio utilise des raccourcis clavier pour les actions globales, l’édition des widgets, l’interaction avec la carte et les mouvements de caméra. Les actions du pointeur sont aussi listées ici car elles servent de raccourcis dans l’espace de travail.
Raccourcis De L’application
| Icône | Action | Raccourci | Portée | Résultat |
|---|---|---|---|---|
| Importer un parcours | Alt+Shift+I |
Application | Ouvre la boîte d’import de parcours. | |
| Afficher la barre parcours | Alt+Shift+J |
Application | Rend la barre de parcours disponible sur la carte. | |
| Masquer les autres parcours | Mod+Shift+J |
Application | Garde uniquement le parcours courant visible dans les scènes. | |
| Ouvrir le profil utilisateur | Alt+Shift+U |
Application | Ouvre la section des réglages du profil utilisateur. | |
| Afficher les groupes de parcours | Alt+Shift+G |
Application | Ouvre le drawer de gestion des groupes de parcours. | |
| Enregistrement vidéo | Alt+Shift+V |
Application | Ouvre la configuration vidéo, puis démarre l’enregistrement si elle est déjà ouverte. | |
| Afficher les contrôles Flythrough | Alt+Shift+W |
Mode Flythrough | Ouvre le drawer Flythrough. | |
| Gérer les widgets | Alt+W |
Application | Ouvre le drawer de gestion des widgets pour le board courant. | |
| Basculer la rotation | Alt+Shift+O |
Application | Démarre ou arrête la rotation autour de la cible courante. | |
| Basculer le widget Orbit | Alt+O |
Mode Orbit | Affiche ou masque le widget Orbit pendant la rotation. | |
| Basculer le panorama | Alt+Shift+P |
Application | Démarre ou arrête le mode panorama autour de la cible courante. | |
| Basculer le widget Panorama | Alt+P |
Mode Panorama | Affiche ou masque le widget Panorama pendant le panorama. | |
| Fermer le panneau actif | Escape |
Application | Ferme le drawer, le popup ou le dialog actif quand la vue le permet. |
Raccourcis Du Widget Sélectionné
| Icône | Action | Raccourci | Portée | Résultat |
|---|---|---|---|---|
| Éditer le widget sélectionné | Enter |
Widget sélectionné | Ouvre l’éditeur du widget sélectionné. | |
| Supprimer le widget sélectionné | Delete, Backspace |
Widget sélectionné | Supprime le widget sélectionné s’il est supprimable. | |
| Redimensionner le widget sélectionné | Plus, Minus |
Widget sélectionné | Augmente ou réduit la taille du widget sélectionné de 1%. | |
| Redimensionner plus vite | Ctrl+Plus, Ctrl+Minus |
Widget sélectionné | Augmente ou réduit la taille du widget sélectionné de 10%. | |
| Déplacer le widget sélectionné | ArrowUp, ArrowDown, ArrowLeft, ArrowRight |
Widget sélectionné | Déplace le widget sélectionné de 2 px. | |
| Déplacer plus vite | Ctrl+ArrowUp, Ctrl+ArrowDown, Ctrl+ArrowLeft, Ctrl+ArrowRight |
Widget sélectionné | Déplace le widget sélectionné de 20 px. |
Actions Du Pointeur
| Icône | Action | Raccourci | Portée | Résultat |
|---|---|---|---|---|
| Sélectionner un widget | Left click, Tap |
Interaction widget | Sélectionne un widget interactif sur la carte. | |
| Déplacer un widget | Left drag |
Interaction widget | Fait glisser un widget déplaçable sur la carte. | |
| Double-clic sur un widget | Double click, Double tap |
Interaction widget | Réduit ou agrandit un widget réductible; ouvre l’éditeur pour les widgets visuels. | |
| Capturer un widget | Alt+Shift+S |
Interaction widget | Exporte certains contenus de widget en PNG quand le widget le permet. | |
| Verrouiller ou déverrouiller | Ctrl+Left click |
Interaction widget | Verrouille ou déverrouille un widget verrouillable sur place. | |
| Ouvrir le menu du widget | Right click, Long tap |
Interaction widget | Ouvre le menu contextuel d’un widget sur la carte, y compris les widgets réduits. | |
| Basculer l’ouverture d’un POI | Left click, Tap |
Objets carte | Déplie ou replie un point d’intérêt sur la carte. | |
| Éditer un POI | Double click, Double tap |
Objets carte | Ouvre l’éditeur d’un point d’intérêt sur la carte. | |
| Ouvrir le menu du POI | Right click, Long tap |
Objets carte | Ouvre le menu contextuel d’un point d’intérêt sur la carte. | |
| Ouvrir le menu du point carte | Right click, Long tap |
Objets carte | Ouvre le menu contextuel à la position cliquée sur la carte. | |
| Focaliser le marqueur de trace | Left click, Tap |
Objets carte | Focalise la trace liée à un marqueur de repérage visible. | |
| Éditer le marqueur de trace | Double click, Double tap |
Objets carte | Ouvre l’éditeur de la trace liée à un marqueur de repérage visible. |
Rotation Et Panorama
| Icône | Action | Raccourci | Portée | Résultat |
|---|---|---|---|---|
| Ajuster l’angle | Left drag |
Mode rotation | Faites glisser sur le globe quand le mode rotation est actif. | |
| Ajuster la distance | Trackpad scroll |
Mode rotation | Change la distance de rotation sur macOS. | |
| Ajuster la distance | Wheel |
Mode rotation | Change la distance de rotation sur Windows et Linux. | |
| Ajuster les RPM | Plus, Minus |
Mode rotation | Change la vitesse de rotation. | |
| Ajuster la direction | ArrowLeft, ArrowRight |
Mode rotation | Change le sens de rotation. | |
| Ajuster l’angle | Left drag |
Mode panorama | Faites glisser pour changer l’angle du panorama. | |
| Ajuster la hauteur | Trackpad scroll, Option+Left drag, Shift+Left drag, Right drag |
Mode panorama | Change la hauteur du panorama sur macOS. | |
| Ajuster la hauteur | Wheel, Alt+Left drag, Shift+Left drag, Right drag |
Mode panorama | Change la hauteur du panorama sur Windows et Linux. | |
| Ajuster la hauteur | ArrowUp, ArrowDown |
Mode panorama | Change la hauteur au clavier. | |
| Ajuster la hauteur plus vite | Ctrl+ArrowUp, Ctrl+ArrowDown |
Mode panorama | Change la hauteur plus rapidement. | |
| Ajuster les RPM | Plus, Minus |
Mode panorama | Change la vitesse du panorama. | |
| Ajuster la direction | ArrowLeft, ArrowRight |
Mode panorama | Change le sens du panorama. |
Navigation Cesium
| Icône | Action | Raccourci | Portée | Résultat |
|---|---|---|---|---|
| Tourner ou déplacer | Left drag |
Navigation Cesium | Déplace la vue du globe. | |
| Zoomer | Right drag, Wheel, Pinch |
Navigation Cesium | Change la distance de caméra. | |
| Incliner ou pivoter | Middle drag, Pinch, Ctrl+Left drag, Ctrl+Right drag |
Navigation Cesium | Incline ou fait pivoter la vue. | |
| Regarder autour | Shift+Left drag |
Navigation Cesium | Regarde autour depuis la position courante. |
Comment Utiliser Le Tableau
Le tableau est organisé par comportement et non par composant. Si vous éditez un widget, utilisez la section des widgets sélectionnés. Si vous vous déplacez dans la carte, utilisez les sections rotation, panorama ou Cesium. Si vous avez besoin d’un contrôle global de l’application, utilisez les raccourcis de l’application.
Carte Du Guide
Cette page suit le flux de l’application. Elle part du bouton cliqué, montre ensuite le drawer ou le dialog qu’il ouvre, puis pointe de nouveau vers l’endroit précédent.
Comment Le Lire
- Commencez par la section des boutons de la scène principale pour voir ce qui s’ouvre depuis chaque bouton.
- Suivez le lien du bouton vers la page du drawer ou du dialog.
- Lisez d’abord la vue d’ensemble en haut de cette page.
- Utilisez le tableau de contrôles pour voir les boutons, switches, tabs et champs de la surface.
- Utilisez le lien de retour pour revenir à l’endroit d’où vous venez.
- Utilisez la page Widgets quand vous avez besoin d’un overlay live ou d’un élément d’export.