Summer 2022 - Igloo Home Reference Guide - Layouts

Each layout represents a home screen that can be used to launch content from the Igloo screen. Multiple layouts can be created and they are accessed via the Layouts node in the Properties section. Layouts are stored in an XML file in the layouts folder and automatic backups are kept in the backup folder.

Layouts have four subsections: Canvas size, Components, and Scenes.

Canvas size

The width and height of the layout canvas are specified here in pixel resolution.

Themes

Themes are used to modify the background, text colour and text font. The background image is scaled across the whole canvas size. Multiple themes can be attached to a layout but only one is active at a time.

All changes to the active theme properties are reflected in the layout after pressing the ‘Apply’ button.

Components

Components are the widgets that are drawn on the layout including labels, images, buttons, and groups of buttons called Content Grids. Each component can be selected by clicking on it in the Canvas edit section or by selecting it on the Properties tree view under the Components node. The currently selected component is highlighted with a green bounding box. The screenshot below shows an image type component with name ‘logo’ selected.

Label - this is a text string, the height of the font can be controlled using the height property. The width property is used as follows: width < 0 causes the text to be right-justified so the location_x property indicates the ‘end’ of the label, width > 0 causes the text to be centered in the space specified by width, width = 0 causes the text to be left-justified.

Image - as shown in the screenshot above, this is a good component to use for corporate logos. The image path property specifies the png or jpg image to display with bottom-left given by location_x, location_y, and the size of the image in pixels given by width and height.

DateTime - this is a special type of label used for showing the time and date and it auto-updates as the time and date changes. The format property controls what is displayed, and is fully described here: https://strftime.org/ e.g. %H - hours, %M - minutes, %A - weekday, %d - date, %B - month.

ContentButton - this is the same as the Image component but has an additional property content-id so that it can be used to launch the corresponding content.

ContentGrid - this is effectively a group of ContentButtons that are arranged in a grid and are specified using filters based on content type and content tags. For example, a grid of movies will have a type filter of ‘movie’, and a grid of mixed content types but all related to a particular use-case might have a tag filter of ‘training’ and no type filter. NB the location_x, location_y properties for a ContentGrid correspond to top-left. The ContentGrid title uses the theme heading size, colour, and font. The ContentGrid labels, which appear on each thumbnail, use the theme label size, colour, and font.

Layout - An additional feature in the content grid is the ability to add a content grid that will enable a user to switch between layouts by selecting a thumbnail. To do this you simply need to add a content grid and select the type “Layout”. The layout thumbnails will be automatically generated once a layout has been created and activated. The screenshot used will be automatically generated from the center of the layout.

Scenes

Scenes are content records that are designed to be easy to create, edit and delete and can be managed without using the Content user interface. All scenes are added to a special Content Grid called ‘Scenes’. Each scene is based on a template that determines the type of content it will launch. Scenes can combine 4 layers of content (movie or panorama, web, capture, external, and a custom command) which can all be launched at the same time and form part of the overall Igloo display.

When adding a new scene, a pop-up window is displayed to enable the scene name to be entered and the relevant template to be selected.

Once added, the scene name is displayed in the list of Scenes in the properties tree of the current layout. A thumbnail icon is also added to the ‘Scenes’ Content Grid. When the scene name is selected from the list, the properties edit window shows the content form for editing the scene.

Test - Launch the scene content.

Reset - Resets Igloo Home to the home screen. Similar to the “Home” button in run mode.

Thumb - Capture the current Warper screen and use it to generate a thumbnail for the scene. This operation can take several seconds to complete.

Up - Moves the scene up in the content grid.

Down - Moves the scene down in the grid.