Overview
The Studio interface is built as a workspace, not as a single form. The screen is organized into distinct surfaces:
- the main scene and its toolbars for immediate actions
- floating widgets that stay attached to the map or the export board
- drawers that hold longer editing tasks without leaving the workspace
- dialogs and modals that interrupt the flow for decisions, credentials, or final validation
The important rule is simple: buttons trigger action, widgets show state, drawers hold work, and dialogs ask for a decision. A single control can still open more than one surface, but its job stays the same.
Control Types
| Type | What it does | Studio example |
|---|---|---|
| Button | Starts an action or opens a surface. | Journey, Settings, Video, Import |
| Popup button | Opens a small menu for a short choice. | Journey action popup, scene mode selector |
| Toggle button | Switches a state on or off. | Journey visibility, full screen, orbit |
| Badge | Shows state without asking for input. | Video and flythrough sync link |
| Widget | Shows live map or export context. | Compass, credits, elevation profile |
| Drawer | Keeps a panel open while editing. | Settings, Layers, Journey editor |
| Dialog | Blocks the flow until the user answers. | Cesium token prompt, video export dialog |
| Switch | Flips a setting in-place inside a drawer. | Application settings and sync options |
Global Behavior
- Most main-scene buttons are square, icon-first controls with tooltips.
- The interface keeps the map visible while editing context moves into drawers and dialogs.
- Shared actions are grouped in the primary and secondary toolbars so the user does not have to hunt through menus.
- State-based controls stay visible only when they make sense, for example during recording, orbit, panorama, or full-screen transitions.
- The guide pages below follow the same mental model as the Studio itself.
Main Scene Buttons
The main scene uses two bars: a primary action bar and a secondary tool bar. Both sit around the workspace and use icon buttons with short tooltips.
Primary Bar
| Element | Icon | Type | What it does | Notes |
|---|---|---|---|---|
| Journey | Button with popup | Opens the journey action popup with edit, import, and group actions. Choosing edit opens the journey editor drawer, where track settings are edited too. | The same button can act as import when no journey is available. | |
| Settings | Button | Opens the settings drawer. | Keeps global settings in one place. | |
| Layers | Button | Opens the layers drawer. | Used for base layers, overlays, and terrain. | |
| POI editor | Button | Opens the points of interest drawer. | Focuses point editing instead of map browsing. | |
| Text | Button | Adds a text widget to the current scene board. | Creates a visible overlay directly on the scene. | |
| Information | Button | Opens the information drawer. | Holds project info and changelog content. | |
| Support | Button | Opens the support dialog. | A help surface, not a workspace drawer. |
Secondary Bar
| Element | Icon | Type | What it does | Notes |
|---|---|---|---|---|
| Scene mode | Popup button | Switches between 2D, 2.5D, and 3D scene modes. | The icon changes with the active mode. | |
| Geocoding | Button | Opens the geocoding dialog. | Can create a temporary POI from a place result. | |
| Orbit | Button | Starts or stops orbit around the current target. | Spins only when a valid target exists. | |
| Full screen | Button | Toggles browser full-screen mode. | The icon reflects the current state. | |
| Video | Button | Opens the video recording setup. | Hidden while recording or finalizing. | |
| Flythrough | Button | Opens the flythrough drawer. | Only shown when the journey is available. | |
| Sync badge | Badge | Shows that video and flythrough are linked. | Informational only, not clickable. |
Session Buttons
| Element | Icon | Type | What it does | Notes |
|---|---|---|---|---|
| Import journey | Button | Opens the journey loader dialog from the first-session banner. | This is the startup entry point for loading data. | |
| Journey visibility | Toggle button | Shows or hides the current journey. | Lives in journey editing, not in the top bar. |
How To Read The Toolbar
The toolbar is meant for direct actions, not for navigation. If the user wants to change content, the button usually opens a drawer. If the user wants to change the camera or playback state, the button usually toggles a mode. If the user needs a one-off choice, the button opens a popup or dialog instead of navigating away.
Widgets
Widgets are the visible overlays that stay attached to the scene or export board. They are not side panels. They move, resize, and stack with the composition.
The detailed widget reference now lives on the dedicated Widgets page. Use that page for the full list of widgets, their icons, and the checks to run on each one.
Drawers
Drawers are persistent side panels. They keep the main scene visible while the user edits a related task.
Each drawer has a dedicated page:
| Drawer | Icon | What it is for | Page |
|---|---|---|---|
| Information drawer | Explains the app and recent changes. | Open page | |
| Settings drawer | Controls global application settings. | Open page | |
| Layers drawer | Manages map and terrain sources. | Open page | |
| Journey editor drawer | Edits the active journey. | Open page | |
| Journey groups drawer | Organizes journeys into groups. | Open page | |
| POIs drawer | Edits points of interest. | Open page | |
| Widgets editor drawer | Edits the selected widget in detail. | Open page | |
| Widget management drawer | Reorders widgets and moves them between boards. | Open page | |
| Flythrough drawer | Controls camera flythrough work. | Open page |
Use a drawer when the task is part of the editing flow. Use a dialog when the user must decide, confirm, or provide a token before continuing.
Dialogs
Dialogs are blocking or focus-stealing surfaces. They appear when the Studio needs attention, a decision, or a credential.
Each dialog has a dedicated page:
| Dialog | Icon | What it is for | Page |
|---|---|---|---|
| Initial error dialog | Shows the startup error and stack trace. | Open page | |
| PWA update dialog | Manages install prompts and update messages. | Open page | |
| Journey loader dialog | Loads route files from local storage. | Open page | |
| Geocoding dialog | Searches places or coordinates. | Open page | |
| Support dialog | Shows help content. | Open page | |
| Cesium token prompt | Requests a Cesium Ion token. | Open page | |
| Layer information modal | Shows the layer disclaimer. | Open page | |
| Layer token modal | Requests an access token for a layer or terrain source. | Open page | |
| Profile sync dialog | Manages sync-related profile actions. | Open page | |
| Video download dialog | Previews and downloads the recorded media. | Open page | |
| Widget mount error dialog | Warns that widgets are not ready for capture. | Open page | |
| Backend restart dialog | Shows that the backend is restarting. | Open page | |
| Confirm dialog | Handles final confirmation. | Open page |
Use a dialog when the user must decide, confirm, or provide a token before continuing. If the user will come back to the task repeatedly, the control should probably live in a drawer instead.
Shortcuts
The Studio uses keyboard shortcuts for app-wide actions, widget editing, map interaction, and camera movement. Pointer shortcuts are listed here too because they behave like shortcuts in the workspace.
App Shortcuts
| Icon | Action | Shortcut | Scope | Result |
|---|---|---|---|---|
| Import journey | Alt+Shift+I |
App | Opens the journey import dialog. | |
| Show journey toolbar | Alt+Shift+J |
App | Makes the journey toolbar available on the map. | |
| Hide other journeys | Mod+Shift+J |
App | Keeps only the current journey visible in the scenes. | |
| Open user profile settings | Alt+Shift+U |
App | Opens the user profile settings section. | |
| Show journey groups | Alt+Shift+G |
App | Opens the journey groups management drawer. | |
| Video recording | Alt+Shift+V |
App | Opens video setup, then starts recording when setup is already open. | |
| Show Flythrough controls | Alt+Shift+W |
Flythrough mode | Opens the Flythrough drawer. | |
| Manage widgets | Alt+W |
App | Opens the widget management drawer for the current board. | |
| Toggle orbit | Alt+Shift+O |
App | Starts or stops map orbit around the current target. | |
| Toggle Orbit widget | Alt+O |
Orbit mode | Shows or hides the Orbit widget while Orbit is running. | |
| Toggle panorama | Alt+Shift+P |
App | Starts or stops panorama mode around the current target. | |
| Toggle Panorama widget | Alt+P |
Panorama mode | Shows or hides the Panorama widget while Panorama is active. | |
| Close active panel | Escape |
App | Closes the active drawer, popup, or dialog when supported by the current view. |
Selected Widget Shortcuts
| Icon | Action | Shortcut | Scope | Result |
|---|---|---|---|---|
| Edit selected widget | Enter |
Selected widget | Opens the editor for the selected widget. | |
| Remove selected widget | Delete, Backspace |
Selected widget | Deletes the selected removable widget. | |
| Resize selected widget | Plus, Minus |
Selected widget | Increases or decreases the selected widget size by 1%. | |
| Resize selected widget faster | Ctrl+Plus, Ctrl+Minus |
Selected widget | Increases or decreases the selected widget size by 10%. | |
| Move selected widget | ArrowUp, ArrowDown, ArrowLeft, ArrowRight |
Selected widget | Moves the selected widget by 2 px. | |
| Move selected widget faster | Ctrl+ArrowUp, Ctrl+ArrowDown, Ctrl+ArrowLeft, Ctrl+ArrowRight |
Selected widget | Moves the selected widget by 20 px. |
Pointer Actions
| Icon | Action | Shortcut | Scope | Result |
|---|---|---|---|---|
| Select widget | Left click, Tap |
Widget interaction | Selects an interactive on-map widget. | |
| Move widget | Left drag |
Widget interaction | Drags a movable on-map widget. | |
| Double-click widget | Double click, Double tap |
Widget interaction | Reduces or expands a reducible widget; opens the editor for visual widgets. | |
| Snapshot widget | Alt+Shift+S |
Widget interaction | Snapshots some widget content in PNG when the widget supports it. | |
| Lock or unlock widget | Ctrl+Left click |
Widget interaction | Locks or unlocks a lockable on-map widget in place. | |
| Open widget menu | Right click, Long tap |
Widget interaction | Opens the context menu for an on-map widget, including reduced widgets. | |
| Toggle POI expansion | Left click, Tap |
Map objects | Expands or shrinks a point of interest on the map. | |
| Edit POI | Double click, Double tap |
Map objects | Opens the editor for a point of interest on the map. | |
| Open POI menu | Right click, Long tap |
Map objects | Opens the context menu for a point of interest on the map. | |
| Open map point menu | Right click, Long tap |
Map objects | Opens the context menu at the clicked map position. | |
| Focus track marker | Left click, Tap |
Map objects | Focuses the track linked to a visible locator marker. | |
| Edit track marker | Double click, Double tap |
Map objects | Opens the editor for the track linked to a visible locator marker. |
Rotation And Panorama
| Icon | Action | Shortcut | Scope | Result |
|---|---|---|---|---|
| Adjust angle | Left drag |
Rotation mode | Drag on the globe while rotation mode is active. | |
| Adjust distance | Trackpad scroll |
Rotation mode | Changes rotation distance on macOS. | |
| Adjust distance | Wheel |
Rotation mode | Changes rotation distance on Windows and Linux. | |
| Adjust RPM | Plus, Minus |
Rotation mode | Changes the rotation speed. | |
| Adjust direction | ArrowLeft, ArrowRight |
Rotation mode | Changes rotation direction. | |
| Adjust angle | Left drag |
Panorama mode | Drag to change panorama angle. | |
| Adjust height | Trackpad scroll, Option+Left drag, Shift+Left drag, Right drag |
Panorama mode | Changes panorama height on macOS. | |
| Adjust height | Wheel, Alt+Left drag, Shift+Left drag, Right drag |
Panorama mode | Changes panorama height on Windows and Linux. | |
| Adjust height | ArrowUp, ArrowDown |
Panorama mode | Changes panorama height by keyboard. | |
| Adjust height faster | Ctrl+ArrowUp, Ctrl+ArrowDown |
Panorama mode | Changes panorama height more quickly. | |
| Adjust RPM | Plus, Minus |
Panorama mode | Changes panorama speed. | |
| Adjust direction | ArrowLeft, ArrowRight |
Panorama mode | Changes panorama direction. |
Cesium Navigation
| Icon | Action | Shortcut | Scope | Result |
|---|---|---|---|---|
| Rotate or pan | Left drag |
Cesium navigation | Moves the globe view. | |
| Zoom | Right drag, Wheel, Pinch |
Cesium navigation | Changes camera distance. | |
| Tilt or twist | Middle drag, Pinch, Ctrl+Left drag, Ctrl+Right drag |
Cesium navigation | Tilts or twists the view. | |
| Look around | Shift+Left drag |
Cesium navigation | Looks around from the current position. |
How To Use The Table
The table is organized by behavior rather than by component. If you are editing a widget, use the selected-widget section. If you are moving around the map, use the rotation, panorama, or Cesium sections. If you need app-wide control, use the app shortcuts.
Guide Map
This page follows the app flow. It starts from the button you click, then shows the drawer or dialog it opens, and finally points you back to the previous place.
Read It This Way
- Start with the main scene buttons section when you want to see what opens from each button.
- Follow the link from that button to the drawer or dialog page.
- Read the overview at the top of that page first.
- Use the control table to see the buttons, switches, tabs, and fields inside the surface.
- Use the back link to return to the place you came from.
- Use the widgets page when you need a live overlay or export element.