Layer Menu ########## | Layers are the actual containers of the 3D representation of data. Due to their nature, they are the core feature of Vision. | They can be added or removed through the **Layer** sub-menu, in the top Menu Bar. When a layer is added and selected, the UI is fully displayed in all of its main parts. .. figure:: ../images/4/1.png :width: 85% :align: center [UPDATE] UI Panels: Menu Bar (top), Tools Panel, Camera Panel, Hierarchy Panel (left), Timeline (bottom), Inspector Panel (right) Add Layer Sub-Menu ================== If you wish to add a Layer to the current Show, click on the **Layer > Add Layer**, to see the list of all available layer types. .. figure:: ../images/4/2.png :width: 25% :align: center Add layer, with the list of available layer types Here are the available Layer types: * **Surface Layer** | A surface Layer contains data in the form of 2D images. It is capable of blending up to five geo-referenced surface data onto a single geometry. These data can originate from various sources, WMS, videos, or images sourced either locally or from the internet. | Check Chapter "Canvases, Layers and Data Sources" > "Layers" > "Surface Layer" for more details. * **Volume Layer** | A Volume Layer is designed to render geo-referenced 3D volume data sourced from local device storage. | See Chapter "Canvases, Layers and Data Sources" > "Layers" > "Volume Layer" for more details. * **3D Objects Layer** | A 3D Objects Layer is equipped to render geo-referenced 3D models, images, labels, and overlay images or labels. | See Chapter "Canvases, Layers and Data Sources" > "Layers" > "Objects Layer" for more details. * **Power Network Layer** | The Power Network Layer is capable of rendering geo-referenced histograms and charts derived from a collection of CSV (Comma-Separated Values) files stored locally on the device. These files typically contain data related to energy production and demand. | See Chapter "Canvases, Layers and Data Sources" > "Layers" > "Power Network Layer" for more details. * **Viewpoint Layer** | The Viewpoint Layer can be populated with single points in the space to fix the camera position and rotation at a certain instant. | See Chapter "Canvases, Layers and Data Sources" > "Layers" > "Viewpoint Layer" for more details. The Geometry of a Layer is constructed depending on the type of Canvas (Planar or Ellipsoidal). | Selecting the layer type to add, a popup window opens to set the layer parameters and the data source to create it. | This window may differ depending on the layer type, but some settings are in common, including the Layer name and the Canvas to which the Layer is added. .. figure:: ../images/4/3.png :width: 35% :align: center Common Layer elements found in any popup window (i.e. Surface Layer) You can select an existing Canvas or create a new one using the dropdown list. More details about Canvases, Layers and Data Sources are described in Chapter "Canvases, Layers and Data Sources". Remove Layer Sub-Menu ===================== | You can remove a Layer with **Remove Layer** option from the Layer sub-menu. | The options shows the list of all existing Layers within the current Show (therefore it matches the list in the Hierarchy Panel). Selecting one deletes it. .. figure:: ../images/4/4.png :width: 20% :align: center Remove Layer, with the list of existing layers in the scene Layers and UI ============= As mentioned previously (Chapter "User Interface Overview" > "In App UI"), some UI sections are fully explorable when the scene is populated with objects, layers in particular. After adding and selecting layers, i's possible to see the effects on the hierarchy, inspector and timeline panels. This paragraph covers more in detail the feature that can be found in this UI. Hierarchy Panel --------------- | The Hierarchy Panel provides a visual representation of the composition of the 3D scene, displaying nested trees of Canvases, Layers, and Data Sources. | A Canvas may contain multiple Layers, while each Layer may consist of several Data Sources. | It's designed to show the user a clear overview of the different elements and how they are organized. Each item in the hierarchy has an icon for its type (e.g., camera, overlay, object layer). .. figure:: ../images/4/5.png :width: 25% :align: center Hierarchy Panel UI | Any item with nested elements can be expanded to show its children. If it's a layer, you can use the arrows to move up or down the data sources within it and change their order, affecting the rending order in 3D. | Layers can be shown or hidden with the eye icon. Selecting an item displays its information in the Inspector Panel. Inspector Panel --------------- | The **Inspector Panel** shows the properties of the currently selected element in the Hierarchy Panel. Each property can be edited to affect the behaviour and appearance of the object in the 3D view. .. figure:: ../images/4/6.png :width: 25% :align: center Inspector Panel UI example (Daniel SWH data source) | This panel displays information of any kind of 3D object in the scene, whether it's a canvas, a layer or a data source. | Each object type holds different properties, so the information visible in the inspector may vary according to the object selected. Moreover, different layers and data sources display different information on the inspector. | In this section we will showcase the recurring components of this panel, while the specific features of each layer and data source type, and their effect on the inspector panel, will be covered in detail in chapter "Canvases, Layer and Data Sources". The inspector panel it's a collapsible element, where the information is labelled with the name of the selected object. Those are the most common information visible in the panel for each object type : - **Canvases** hold little information, consisting in the scale and elevation factors, and it's the same for each canvas type. A canvas can be deleted with the button below. .. figure:: ../images/4/7.png :width: 30% :align: center Inspector panel for a canvas (Default Canvas) - | **Layers** store several information and settings, and often includes a section with graphic settings, a section with geographical settings to change the longitude, latitude and altitude limit to cap when rendering. On the top right corner their inspector shows the same eye icon in the hierarchy panel, which works in the same way. As canvas inspector, they provide a “Delete” button down the data. | Layer inspector may include a tool to change the colors of the 3D representation of the data, the Colormap Picker (check next sub-paragraph "Colormap Picker"). If a layer holds multiple data sources, colormap picker is usually absent because each data source can have its own colormap, therefore the colormap picker is inside its inspector. In this scenario, the inspector may show a small info collapsible sub-panel for each data source. .. table:: :class: align-center +----------------------------------------------------------+-------------------------------------------------------------------------+ | .. figure:: ../images/4/8.png | .. figure:: ../images/4/9.png | | :width: 67% | :width: 55% | | :align: center | :align: center | | | | | Inspector panel of a layer, with graphics settings, | Inspector panel of the Earth layer with graphics and other settings, | | | | | geographical setting and a colormap picker | plus sub-panels containing settings for the nested data sources | +----------------------------------------------------------+-------------------------------------------------------------------------+ | Data source sub-panels contain a few settings that can be made directly from the parent layer, including deleting the data source or hiding it with the specific buttons. It's possible to set the geographical range by cropping the coordinates with the sliders, and set the blending factor, which affects the opacity of the rendering of the data source. | Additionally, the parameter section may contain a small menu to add a data source, which looks and works like the one found inside the add-layer pop up panel for some data types (e.g. surface). .. figure:: ../images/4/10.png :width: 30% :align: center Parameters section with Height Offset settings and the add layer mini menu - | **Data sources** store many other specific information as well as information related to their parent layer, plus many settings. | The info button on the corner shows the raw data of the data source as a Json text. .. figure:: ../images/4/11.png :width: 30% :align: center Collapsed inspector panel of a data source with name and info button .. figure:: ../images/4/12.png :width: 65% :align: center Raw JSON data of a data source | Depending on the data type, information displayed in the inspector may vary. This section contains | o **Dataset and Sub dataset name** | o **Layer Type** | o **Min and Max values** | o **Area of Interest (AOI) and Time of Interest (TOI)** to set the coordinate range and the time range. | o **Cancel button** to undo the changes made in AOI and TOI and reset to the previously saved ones (since changes do not occur in real time but they need to be manually applied). | o **Apply button** to confirm any changes made in AOI and TOI. | **Area of Interest** provides sliders to crop longitude and latitude of the data in 3D view. Area Of Interest can be changed only for data sources attached to a surface layer. | **Time Of Interest** provides sliders to set the Time Extent and Scaled Time Extent and the Time Resolution. Time resolution is the time step. For instance, if the it's hourly, the data are covered hour by hour. Time Extent is the time range for that data source and Scaled Time Extent fits the selected Time Range inside the selected scaled range. The start and end timestamps always match Time Resolution.Time Extent can be edited only for data sources attached to a surface layers. .. table:: :class: align-center +-----------------------------------------------+----------------------------------------------+ | .. figure:: ../images/4/13.png | .. figure:: ../images/4/14.png | | :width: 75% | :width: 75% | | :align: center | :align: center | | | | | Area of Interest | Time of Interest | +-----------------------------------------------+----------------------------------------------+ .. figure:: ../images/4/15.png :width: 30% :align: center Bilinear Filter, Min Value and Max Value .. figure:: ../images/4/16.png :width: 65% :align: center Bilinear Filter off (left) and on (right) comparison Somne data types allow for color customization. If available, the layer inspector shows an additional element, the **Colormap Picker**. Colormap Picker ~~~~~~~~~~~~~~~ **Colormap Picker** provides a convenient way to change the colors of the 3D data, allow to choose, load and save custom or predefined colormaps. .. figure:: ../images/4/17.png :width: 30% :align: center Colormap Picker | To expand the widget, click on **Load button** to show loading options. You can choose predefined colormaps from the **presets**, and click on "set" to confirm it for the selected data. .. table:: :class: align-center +-----------------------------------------------+----------------------------------------------+ | .. figure:: ../images/4/18.png | .. figure:: ../images/4/19.png | | :width: 90% | :width: 90% | | :align: center | :align: center | | | | | Colormap Picker presets selection | Colormap Picker with new selection | +-----------------------------------------------+----------------------------------------------+ Alternatively you can load colormaps by browsing files locally, with **folder button**. The path of the selected colormaps is visible in the text box. Notice that colormaps must be formatted as JSON files. In the same way of the presets, the **set button** on the label side confirms the selection. .. figure:: ../images/4/20.png :width: 30% :align: center Colormap picker after confirming browsing selection For more customization, you can click on the **colormap preview** and open the **Gradient Picker**, to make the gradient by setting specifics color keys and alpha keys. Gradient picker appears above the Colormap Picked and is explained in the next paragraph. The chosen colormap can be saved in a local directory for future uses with the corresponding button. Gradient Picker ~~~~~~~~~~~~~~~ **Gradient Picker** is a nested inside the Colormap Picker. It's equipped with two multi-sliders to change the color keys and the alpha keys (opacity) of a gradient. .. figure:: ../images/4/21.png :width: 30% :align: center Gradient Picker The displayed gradient is the result of the transition between the values of one key to the other. Transparency and color can be changed independently. Gradient can be adjusted by changing handles positions, and gradient keys can be freely added or removed (maximum 8). To add a handle, just click on the empty space of the slider at the desired position. The new value is automatically interpolated. To delete a key, first click its handle and then in the bottom part click on the "X" button to remove it. .. table:: :class: align-center +-----------------------------------------------+----------------------------------------------+ | .. figure:: ../images/4/22.png | .. figure:: ../images/4/23.png | | :width: 90% | :width: 90% | | :align: center | :align: center | | | | | Gradient Picker after adding alpha handle | Gradient Picker after adding color handle | +-----------------------------------------------+----------------------------------------------+ The bottom area shows other properties of the selected keys as well. You can change the opacity or the color (depending on the key type) and the position. You can directly set the exact position of a key with the textbox, for more precision. The position can be expressed as a 0% - 100% value relative to the gradient interval, or within the range of the original values of the of the dataset. You can switch between the two display options with the **unit button**. .. table:: :class: align-center +-----------------------------------------------+----------------------------------------------+ | .. figure:: ../images/4/24.png | .. figure:: ../images/4/25.png | | :width: 150% | :width: 150% | | :align: center | :align: center | | | | | Relative value toggled | Absolute value toggled | +-----------------------------------------------+----------------------------------------------+ For **color keys**, a small box shows the color. The color of the key can be changed by clicking on the box, opening up another UI widget, the **Color Picker**. Color Picker ~~~~~~~~~~~~ **Color Picker** is a nested inside the Gradient Picker. It offers many different ways to easily select and adjust colors. .. figure:: ../images/4/26.png :width: 25% :align: center Color Picker The **wheel slider** allows to change the hue (the tone) of the color, by dragging the handle along the ring. The **2D square slider** inside the wheel is to adjust **brightness and saturation**. Vertical position of the handle affects brightness, while horizontal position affects saturation. .. figure:: ../images/4/27.png :width: 25% :align: center Color Picker while changing color You can change specific components of the color with the **channel sliders** below. Color can be expressed in different formats: | o **RGB 0-255** as a combination of red, green and blue components expressed as an integer value range 0-255 | o **RGB 0-1** as a combination of red, green and blue components with decimal value range 0.0-1.0 | o **HSV** as a combination of hue, saturation and value channels, ranging from 0 to 360 for the hue (in degrees of the color wheel), and 0 to 100 for saturation and value. You can switch **color format** with the dropdown. Sliders are paired with textboxes to set the wished value with precision. .. table:: :class: align-center +--------------------------------------+--------------------------------------+--------------------------------------+ | .. figure:: ../images/4/28.png | .. figure:: ../images/4/29.png | .. figure:: ../images/4/30.png | | :width: 100% | :width: 100% | :width: 100% | | :align: center | :align: center | :align: center | | | | | | RGB 0-255 sliders | RGB 0-1 sliders | HSV sliders | +--------------------------------------+--------------------------------------+--------------------------------------+ Another way to represent the color is as an hex string, which can be set in the **hexadecimal textbox** at the bottom of the widget. .. figure:: ../images/4/31.png :width: 40% :align: center Hexadecimal textbox Timeline Panel -------------- | The **Timeline Panel** is designed as a playback system, to reproduce the evolution of data over time, similarly to audio and video players. You can **Play and Pause** the reproduction, or **Speed Up/Down** the playback (when available) with the respective buttons. | The time range in the timeline corresponds to the time range of the original data. The start and end time are above the time bar, and the currently selected instant is in the middle. | You can play it from the start to the end or stop at a specific time for a more detailed analysis. You can also click directly on the timeline or drag the slider to jump to a different instant. .. figure:: ../images/4/32.png :width: 100% :align: center Timeline UI .. | It's worth to mention that not every layer can be animated, especially the ones that make use of multi-resolution data, since it's practically impossible to have a smooth animation in that context. .. | Animation for volumetric data requires a preliminary buffering, so it may take a while before animation gets smooth. Currently this is not available for the XR version, due to the limited hardware capabilities of the headset devices. .. | Animation runs fairly smoothly when using georeferenced videos or fixed-resolution surface data from the backend as the data source for surface layers, as well as with unit vector fields.