This tutorial shows you how you can display multiple images as stacked layers which can be configurated with FSI Layers.

Creating FSI Layers

First, add the FSI Layers viewer to the head of your document:

Copy to Clipboard

Afterwards, add the FSI Layers with some groups and layers to the part of the document you would like to display it in:

Copy to Clipboard

Afterwards you can use the JavaScript Interface to control the layers.

Here are few examples of what you can do:

Adding Groups and Layers

Copy to Clipboard

This adds a new group called deco to FSI Layers. Since no parent group is set, the group is added to the top level group.

A layer called wall-art is then added to the new group and alignment and width are defined.

Move Groups

We now want to have the layer deco-tree integrated in the deco group, so we move it:

Copy to Clipboard

This moves the layer deco-tree to the group deco. We have set the optional targetIndex so that the layer appears first in the group. If you omit this, the layer will be appended to the target group.

Dulicate Layers/Groups

We duplicate the layer deco-tree within the deco group:

Copy to Clipboard

This moves the layer deco-tree to the group deco. We have set the optional targetIndex so that the layer appears first in the group. If you omit this, the layer will be appended to the target group.

Copy to Clipboard

If you want to duplicate the layer, it would look like this. If the property withChildren is set to true like above, the content of the group is also duplicated.
The names of the duplicated layers are appended with “copy”, e.g. “deco-tree copy”.

Remove Layers/Groups

Lets remove the second group deco-new:

Copy to Clipboard

This removes the group and its children.

Select Layers/Groups and make them visible

We now want to select all the groups that are currently set to hidden and want to show them:

Copy to Clipboard

This selects all specified layers. showSelected sets all selected layers to hidden:false.

Copy to Clipboard

This selects all specified layers. showSelected sets all selected layers to hidden:false.

Deselect layers

Copy to Clipboard

You can also deselect certain layers. In the example above, only the layer table would still be selected.

With selectNone all layers are deselected.

Set properties

It is also possible to set the properties of certain layers/groups or all selected layers.
You can see all properties which can be set in the FSI Layers manual.

If a property is set individually on a layer, this will overwrite the group property.
Example: If the group opacity is set to 50%, but one layer is set to 80%, for this layer only the layer property will apply.

Copy to Clipboard

The first method centers the specified layers with top and left centered.

The second method would flip the selected layers with the horizontal axis.

Retrieving information

A few examples of how to retrieve information of the layers/groups:

Copy to Clipboard

toggleInfo toggles the info (name, dimensions, clipping state) and direction arrows of all layers and groups and is helpful for setting everything up.

getHTML returns the HTML code of all current groups and layers.

getSelectedLayerNames retrieves the names of the currently selected layers.

getProperties retrieves the properties of a specific layer.

getLayerNames returns an information object for each layer and group.

getTypeOf returns the type of a layer (“layer” or “group”) or false if it doesn’t exist.

Rendering FSI Layers/ Resetting

Copy to Clipboard

Render renders the current state of FSI Layers and must be called after changing properties or adding/removing layers.

You can empty the root group and reset FSI Layers by using reset.