Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Combining multiple layers together can be a powerful way to display different sources of related content side-by-side. These are known as dashboards and can give an at-a-glance view of the status of a complex design, project or system.

This tutorial uses the Layouts feature of Igloo Core Engine for defining regions on the canvas. Layouts can be created and modified using the Desktop UI.

Tutorial Video

...

Creating a Simple Dashboard

...

Press the Add Content button and select New > WebView. Repeat this 3 more times so that you have 4 WebViews.

For Layer1one of the WebViews, set the URL to http://www.bbc.co.uk/news .

...

In the Geometry tabthe Layers action menu on the Canvas Toolbar, set the Aspect Ratio to ‘Container’ and Resize Mode to ‘Scale to fit h’. Set the Position Mode to ‘Lock to Region’ and set the Layout and Region to ‘Default Layout’ and ‘Region 1’BBC News layer to Region 1 in the Default Layout. This will move the WebView layer to one of the preset regions and ensure it resizes to fill the space.

...

Repeat the above settings for the other 3 layers using the following names, urls and regions:

Weather, a specific area of the Canvas.

Image Added

Next, select Maximise from the Geometry menu. This will resize the WebView so that it fills the region it is contained in.

Set the URLs of the other WebViews to the following:

http://www.bbc.co.uk/weather, Region 2

Sport, http://www.bbc.co.uk/sport, Region 3

Technology, http://www.bbc.co.uk/news/technology

Set the WebViews to Region 2, Region 3 and Region 4 of the Default Layout and Maximise each one. This will give a WebView dashboard which fills the entire canvas.

...

Once completed, save all the WebViews into a single session, called ‘News Dashboard'.

Next Section: Canvas UI - Exploring Google Street View