Working with FSI Layers

This tutorial will show you how to display multiple images as stacked layers that can be configured using FSI Layers.

Creating FSI Layers

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

<head>
  <script src="http://yourserver.com/fsi/viewer/applications/layers/js/fsilayers.js"></script>
</head>

Then add the FSI layers with some groups and layers to the part of the document where you want to display it:

<fsi-layers
  id="myLayers"
  useDevicePixelRatio="true"
  debug="1"
  width="800"
  height="700">
  <fsi-layer
    name="Background"
    src="images/configurate/kitchen.png"
    width="100%"></fsi-layer>

  <fsi-layer
    name="deco-tree"
    width="100%"
    hidden="1"
    src="images/configurate/tree.png">
  </fsi-layer>

  <fsi-layer-group name="lamps">
    <fsi-layer
      name="small-lamp"
      width="100%"
      hidden="1"
      src="images/configurate/lamp-small.png">
    </fsi-layer>
    <fsi-layer
      name="big-lamp"
      width="100%"
      hidden="1"
      src="images/configurate/lamp-big.png">
    </fsi-layer>
  </fsi-layer-group>

  <fsi-layer
    name="table"
    width="100%"
    hidden="1"
    src="images/configurate/table.png">
  </fsi-layer>
</fsi-layers>

To ensure the correct aspect ratio of the layers when the screen is resized, or when viewed on different devices, the root node or groups can be given reference dimensions to ensure the correct proportions. It's important that both refWidth and refHeight are set and a refMode is defined. To maintain proportions, the dimensions of subsequent layers and contained groups must be set to rpx instead of % or px.

Example:

<fsi-layers
  id="myLayers"
  useDevicePixelRatio="true"
  debug="1"
  width="100%"
  height="100%">
  <fsi-layer-group
    name="container"
    right="centered"
    bottom="centered"
    width="100%"
    height="100%"
    refMode="fit"
    refWidth="3840"
    refHeight="2400">
    <fsi-layer
      name="Background"
      src="images/configurate/kitchen.png"
      width="100%"
      height="100%"></fsi-layer>

    <fsi-layer
      name="deco-tree"
      left="0"
      bottom="0"
      width="1441 rpx"
      height="1166 rpx"
      hidden="1"
      src="images/configurate/tree.png">
    </fsi-layer>

    <fsi-layer-group name="lamps">
      <fsi-layer
        name="small-lamp"
        left="986 rpx"
        top="0 rpx"
        width="165 rpx"
        height="787 rpx"
        hidden="1"
        src="images/configurate/lamp-small.png">
      </fsi-layer>
      <fsi-layer
        name="big-lamp"
        left="2646 rpx"
        top="0 rpx"
        width="753 rpx"
        height="993 rpx"
        hidden="1"
        src="images/configurate/lamp-big.png">
      </fsi-layer>
    </fsi-layer-group>

    <fsi-layer
      name="table"
      left="1704 rpx"
      top="1291 rpx"
      width="1975 rpx"
      height="1109 rpx"
      hidden="1"
      src="images/configurate/table.png">
    </fsi-layer>
  </fsi-layer-group>
</fsi-layers>

In this tutorial we will focus on an example without refWidth/refHeight.

You can use the JavaScript interface to control the layers.

Here are some examples of what you can do:

Adding groups and layers

var layers = document.getElementById('myLayers');

layers.addGroup('', {name: 'deco'});

layers.addLayer('deco', {
  src: 'images/configurate/wall-art.png',
  name: 'wall-art',
  width: '20%',
  left: '58%',
  top: 20,
});

This adds a new group called deco to FSI Layers. As 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.

Moving groups

We now want the deco layer to be integrated into the deco group, so we move it:

layers.move("deco-tree", "deco", 0);

This moves the layer deco-tree into 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.

layers.duplicate("deco", "deco-new", 1);

This is what it would look like if you wanted to duplicate the layer. If the property withChildren is set to true as above, the content of the group will also be duplicated. The names of the duplicated layers are appended with copy, e.g. deco-tree copy.

Remove Layers/Groups

This will remove the second group deco-new:

layers.remove('deco-new');

This will remove the group and its children.

Select Layers/Groups and make them visible

Now we want to select all the groups that are currently hidden and make them visible:

layers.select('deco-tree', 'small-lamp', 'big-lamp', 'table');

layers.showSelected();

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

layers.hideSelected();

hideSelected sets all selected layers to hidden:true.

layers.show('deco-tree1');

layers.hide('table');

This sets one specific layer to hidden:false or hidden:true.

Deselecting layers

layers.deselect('deco-tree', 'small-lamp', 'big-lamp');

layers.selectNone();

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

With selectNone all layers are deselected.

Setting properties

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

If a property is set individually on a layer, it will override the group property. For example: If the group opacity is set to 50%, but a layer is set to 80%, only the layer property will apply to this layer.

layers.setProperties(['table', 'wall-art', 'deco-tree'], {
  left: 'centered',
  top: 'centered',
});

layers.setPropertiesOfSelected({flip: 'horizontal'});

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:

layers.toggleInfo();

layers.getHTML();

layers.getSelectedLayerNames();

layers.getProperties('wall-art');

layers.getLayerNames();

layers.getTypeOf();

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 layer (layer or group) or false if it does not exist.

Rendering FSI Layers/ Resetting

layers.render();

layers.reset();

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

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

Working with FSI Layers

Creating FSI Layers​

Adding groups and layers​

Moving groups​

Remove Layers/Groups​

Select Layers/Groups and make them visible​

Deselecting layers​

Setting properties​

Retrieving information​

Rendering FSI Layers/ Resetting​