Document toolboxDocument toolbox

(1.4.0) Control Panel UI - Layers Tab

The Layers tab in Igloo Control Panel gives a single screen view of the current layers in the workspace and provides contextual UI controls per layer. This tutorial guides you through using the Layer tab with some example sessions.

Using the Layer tab

For the first example, load the Video Example session using either the Desktop UI or Canvas UI.

Next run Igloo Control Panel on your chosen device.

Note that the Layers tab has been designed to work well on monitors and tablets and is not currently optimised for smartphone screens. The following message will be shown for smartphone devices: The layers tab is coming soon for smaller devices.

Video Example

With the Video Example session loaded, the video layer should appear in the Layers tab as shown below.

Note that the Home layer and Background layer are not shown in the list of layers, and this matches the behaviour of the Canvas UI.

Explore the controls by starting and stopping the video, hiding and showing the video layer and muting and unmuting the volume.

layers_tab_video.png

You can also adjust the scale and position of the layer by clicking the properties button and then select Geometry. Use the sliders to move and resize the video layer.

layers_tab_geometry.png

Next press the Home icon in the top-right of the Layers tab. This will clear the Video layer from the workspace and display the homescreen.

WebView Example

Press the Add Content button in the Layers tab and select WebView from the choice of WebView, NDI and YouTube.

Using the address bar shown for the WebView, set the URL to http://www.bbc.co.uk/news. Press the layer properties button and select Geometry. Move the WebView to Region 1 using the dropdown list at the bottom of the Geometry controls.

Repeat the above steps to add a second WebView, set the URL to http://www.bbc.co.uk/sport and move the layer to Region 2.

When completed, press the Home button to clear the layers ready for the last example.

Streetview Example

Switch to the Mouse tab, press ‘Start casting’ and select the Streetview icon from the homescreen (if there isn't a Streetview icon, select Load Content from the Canvas Toolbar and load the Streetview session).

Note that despite the layers being WebView type layers, the contextual UI for both the ‘Streetview - Control’ and ‘Streetview - Pano’ layers is the same as the Streetview App page (from the Apps tab). This behaviour saves the user from needing to switch from the Layers tab to the Apps tab when loading Streetview or Matterport sessions.

The method to define custom control pages for a layer is by using the layer’s metadata field, for more details see (1.4.0) Metadata

Â