3. User Interface Overview

This is the main menu of the application on startup.

DestinE Main Menu

Fig. 3.1 DestinE Main Menu

You can choose to start a session directly, or go to the Advanced Options screen.

From the collapsible Multi-user options menu, you can create your own multi-user session, or join an existing one from the list. Multi-user session can be joined by other users beside the host. You can also search for a session by its IP address.

The clear cache button at the bottom, allow to free cache space, which contains various files related to show or stories. Clearing cache deletes those files. For more information about Shows and Stories, refer to respective chapters.

../_images/2.png

Fig. 3.2 Advanced Options with the panel expanded

When the application starts, if there is an existing session hosted by another user connected in the same LAN, the client automatically detects it and connects to that session after a 10 seconds countdown. If multiple host sessions are present, the first created has the highest priority.

A session is started with an overview of existing shows and stories. You can open them by selecting and clicking on “Load” or “Close” the panel, loading the default empty scene.

../_images/3.png

Fig. 3.3 Shows and Stories Overview

The default view shows the 3D digital Earth model, and the 3D viewport surrounded by the UI panels. If you wish to check again the existing content in the overview panel, you can click on the home button at the top left corner. Below is the default scene view in a single user session. For a more detailed description check the paragraph “In App UI”.

../_images/4.png

Fig. 3.4 Default 3D view at start

3.1. Multiuser session

In multi-user sessions, only one user can make modifications at a time to avoid conflicts. To ensure conflict avoidance, multi-user mode provides an additional set of features, displaying scene control options at the top right of the screen, grouped together on the top (click on triangle button to expand the menu).

../_images/5.png

Fig. 3.5 Multi user options panel in the UI scene

At the start of a new host session, no one has control on the scene and all the commands and UI elements that can have effect on the scene are disabled.

To take control click on “Grab”, this will unlock the UI and allow any modification. Click on “release” to return the access to the other users. No one else can grab until the control is released with the exception of the host user, who can do it at any time.

If the holder is inactive, to avoid waiting indefinitely it’s possible to launch a countdown with “Timeout”. The countdown lasts 30 seconds and automatically releases the scene. If the holder is still active and wishes to keep editing the scene, they can reset the timeout with “Reset”.

../_images/6.png

Fig. 3.6 Multi user option panel with reset enabled for the holder

3.2. In app UI

UI is made of these parts:

  • Menu Bar

  • Tools Panel

  • Camera Panel

  • Hierarchy Panel

  • Inspector Panel

  • Timeline Panel

The default view does not fully display the UI features. The Hierarchy Panel shows information when additional layers are present, otherwise it’s empty. Inspector and Timeline are hidden and they become visible when a scene object is selected.

Below, an overview of the appearance of the UI with a fully populated scene.

../_images/7.png

Fig. 3.7 Example of UI with a fully populated scene, with a wind rendering on the 3D Earth and the related description.

Layer UI panels, specifically Hierarchy, Inspector and Timeline panels are briefly presented in this section, but will be explained in detail in “Layer Menu” chapter. Menu Bar, Tools Panel, and Camera Panel will be delved into in the next sub-chapter.

3.2.2. Tools Panel

The Tools Panel on the left side, provides several visual options.

../_images/13.png

Fig. 3.13 Tools Panel

If available, the current show name and the currently selected 3D object (“Picked Object”) are displayed. Enable Gizmo shows the bounding boxes of layers and data sources in the 3D scene, while Scale UI allows to change the size of the UI. You can also use the keyboard shortcuts to scale UI:

  • CTRL + “.” Or CTRL + “+” increase UI size

  • CTRL + “,” or CTRL + “-” decrease UI size

The selected size is retained on app reboot.

Check “Enable Gizmo” and select a layer to adjust the boundaries. You can do it by dragging the handles for cropping (works for data sources of surfaces layers and volume layers).

../_images/14.png

Fig. 3.14 A volume layer (temperature volumetric dataset of Ianos Medicane)

../_images/15.png

Fig. 3.15 Draggable handles of the bounding box of a volumetric dataset (Ianos Medicane)

3.2.3. Camera Panel

Below the Tools Panel is the Camera Panel to help the user with the navigation in the 3D view.

../_images/16.png

Fig. 3.16 Camera Panel

The collapsible settings are below the label “Navigation”. | User can move the camera inside the 3D scene through a Radial navigation or a Fly navigation.

A quick overview of the options provided in this panel.
  • Radial and Fly radio buttons enable the respective navigation mode. With radial navigation the camera rotates around a 3D pivot point, while in fly navigation the camera movement is free.

Radial mode comes with two extra options.
  • With ROTATE AROUND PICKED OBJECT button, the bounding sphere of the current selected object is set as rotational pivot. If no object is selected the button is disabled. By default, the Earth center is the default pivot point.

  • With RADIAL NORTH button, camera orientation is reset toward the North.

Notice that both buttons are disabled with fly mode on.

  • Surface Collider checkbox toggles the camera collision with the bounding volumes of the objects in the scene. When toggled off, camera can go forward to the pivot point without limitations. The checkbox has to be enabled when rotating around the Earth so the camera can go forward until it reaches the surface, stopping at the Earth bounding sphere.

  • Speed shows the current camera movement onward/backward speed.

  • Speed Factor collapsible panel (collapsed by default) contains three speed parameters

  • Move for the translation speed of the camera

  • Rotate for the rotation speed of the camera around an object

  • Tilt for the rotation speed of the camera field of view around itself

  • SET VIEW AS DEFAULT set the current camera position and orientation as default, so that the camera is set back to those values upon reset. Those values are stored in the show information, which means that if the show is saved, the file will keep the camera values, and those values will be restored when the show is loaded.

../_images/172.png

Fig. 3.17 Camera Panel with Speed Factor options expanded

3.2.3.1. Camera Controls

The camera can be controlled through keyboard and mouse controls. Commands behave differently depending on the navigation mode. Here is a list of controls for both the modes.

Radial Navigation controls
  • Move On/Backward (Zoom In/Out): mouse wheel - W/S keys;

  • Rotate: mouse left click and drag - A/D keys - Up/Down/Right/Left Rotate arrows;

  • Tilt Up/Down: mouse right click and drag;

  • Roll Left/Right: mouse middle click and drag - J/L keys;

  • Reset camera position: Spacebar key.

Fly Navigation controls
  • Move On/Backward: W/S keys;

  • Increase/Decrease move speed: mouse wheel;

  • Rotate Point of View: mouse left click - A/D keys;

  • Roll Left/Right: mouse right click - J/L keys;

  • Tilt Up/Down (pitch): Up/Down arrow keys;

  • Pan Left/Right: Left/Right arrow keys.

3.2.4. Hierarchy Panel

Below the Camera Panel, the Hierarchy Panel provides a visual representation of the 3D scene structure in the form of a hierarchy tree, reflecting the relationship and dependencies between the object in the scene.
Detailed overview in chapter “Layer Menu” > “Layers and UI” > “Hierarchy Panel”.

3.2.5. Inspector Panel

At the right side of the window, the Inspector Panel displays all available parameters for fine-tuning the representation of the selected Layer or Data Source.
Detailed overview in chapter “Layer Menu” > “Layers and UI” > “Inspector Panel”.

3.2.6. Timeline Panel

At the bottom of the window, the Timeline Panel enables user to adjust the current timeline across the entire available time range.
This range spans from the minimum to the maximum timestamp of all the data sources and layers within the current Show or Story.
Detailed overview in chapter “Layer Menu” > “Layers and UI” > “Timeline Panel”.