ICE Igloo Core Engine offers the user another interaction method as an alternative to the desktop Desktop UI. This is called the Canvas UI because it works directly on the Igloo canvas. This UI is designed to be simpler and easier to use, with less functionality than the Desktop UI but enough to enable the most commonly used features.
| Info |
|---|
The following tutorials assume that you are able to interact with the Canvas using the Casting feature of Igloo Control Panel or by using the mouse in the Canvas preview tab of the Desktop UI. For more info see: Desktop UI - Controlling with a Keyboard and Mouse |
Tutorial Video
...
Enabling the Canvas UI
There is a toggle switch in the top right corner of the desktop UI called Immersive Mode Canvas UI.
...
Click this to enable or disable the Canvas UI.
...
Once the Canvas UI is enabled and mouse movement is detected on the Canvas, the immersive toolbar Canvas Toolbar is displayed on the canvas. By default it will appear in the top left corner of the screen and it can be moved by left click-drag on the left edge of the toolbar.
...
| Info |
|---|
The position of the toolbar will be stored when saving a Workspace |
Add a New Layer
Press the Add Content button on the Canvas Toolbar and select New > WebView. This will display a web page defaulting to the www.igloovision.com web site. The name of the layer defaults to the title of the website.
...
Show/Hide a Layer
Select the Layers button on the toolbar and move the mouse over Layer2 the first menu item to display the menu of layer actions.
...
Press the Hide button. This will stop the Layer2 layer from being drawn on the canvas.
Press the Hide button also for Layer1. The canvas will now be displaying the background image only.
Bring back the layers layer by pressing Show for Layer1 and Layer2 via the Layers buttonlayer actions menu.
Edit mode
...
Press the Edit button just to the right of the Layers button. This will switch to Edit mode and the currently selected layer will have resize handles drawn at each corner and along each edge.
Click on one of the handles and drag it so that the layer is reduced in size. Now click anywhere on the layer and drag it to a new position.
...
Click on another layer so that it becomes the selected layer. The resize handles will now be drawn on this layer instead. Try some more resizing and positioning and when completed press When finished with positioning and sizing, click the Exit edit mode button.
...
Next Section: Building a Homescreen Canvas UI - Layers and Sessions