Skip to main content

Methods

Initialization Example:
// create the Layers node and set parameters
const instance =  $FSI.createNode("fsi-layers", {
    id: "myLayers",
    width: '600px',
    height: '400px',
    skin: 'white',
    debug: true
})
document.body.appendChild(instance);

// create the layers root
const layersRoot = $FSI.createNode("fsi-layers-root", {});
instance.appendChild(layersRoot);

// add a layers group
const layersContainer = $FSI.createNode("fsi-layer-group", {
        name: "container",
        width: '100%',
        height: '100%'
      });
layersRoot.appendChild(layersContainer);

addGroup​

addGroup(parentGroupName, [parameters], [index])
Adds a new group.
parentGroupName
string
Name of parent group. Use undefined or _root for parentGroupName to add the group to the top level group.
parameters
object
Optional parameters
index
string
Optional: defines the position to insert the new element at. Default is appending the new element. Instead of a target index, you can also add a layer name which will then set BEFORE the existing group. (implemented in 23.02)
RETURN
void
This function does not return a value.
instance.addGroup("someExistingGroup", {"name": "my new Group"});
Example

addLayer​

addLayer(parentGroupName, [parameters], [index], content)
Adds a new layer.
parentGroupName
string
Name of parent group. Use undefined or _root for strParentGroupName to add the group to the top level group.
parameters
object
Optional parameters
index
string
Optional: defines the position to insert the new element at. Default is appending the new element. Instead of a target index, you can also add a layer name which will then set BEFORE the existing group. (implemented in 23.02)
content
object
HTML content
RETURN
void
This function does not return a value.
instance.addLayer("_root", {"name": "myLayer", "src": "images/foo.tif", "left": "30%"});

// or

instance.addLayer("targetGroup", {name: "new layer"}, "some existing layer or group");
Example

addListener​

const success = addListener(listenerName, fn, iScope)
Calls a specific listener. Listeners which are added via addListener(), remain valid when changeConfig() is called.
listenerName
string
Name of listener
fn
string
Name of function executed when listener is called
iScope
string
The scope of variables in which the callback function is called. This determines what the variable `this` means within the specified callback function. If iScope is not passed, iScope will be the instance of the viewer to which the listener has been added.
RETURN
boolean
Returns `true` if successful.
const success = instance.addListener('onRenderLayer',
  (layer) => {
  // code
})
Example

Consult Callbacks for an overview of all available listeners.

debugError​

debugError()
Returns the corresponding viewer error messages in the console.
RETURN
mixed
error message
instance.debugError()
Example

debugLog​

debugLog()
Returns the corresponding viewer debug log messages in the console.
RETURN
mixed
log message
instance.debugLog()
Example

debugWarn​

debugWarn()
Returns the corresponding viewer debug warn messages in the console.
RETURN
mixed
warning messages
instance.debugWarn()
Example

deselect​

deselect(layerName, layerName, ...)
Deselects selected layers.
layerName
string
Layer name
RETURN
void
This function does not return a value.
instance.deselect('yourLayer')
Example

destroy​

destroy()
Destroys the FSI Layers instance leaving the empty container div only.
RETURN
void
This function does not return a value.
instance.destroy()
Example

dumpLayers​

dumpLayers()
Shows all layers in the browser console
RETURN
void
This function does not return a value.
instance.dumpLayers()
// return example
/*
FSI Layers [myFSILayers]> Current Layers:
0: [Group] container
{name: 'container', right: 'centered', bottom: 'centered', width: '100%', height: '100%'}
children of 'container':
0: [Layer] 'background'
{name: 'background', src: 'images/samples/layers/background.png', width: '100%', height: '100%', left: '0'}
1: [Group] foreground
{name: 'foreground', width: '400rpx', height: '400rpx', refwidth: '400', refheight: '400'}
children of 'foreground':
0: [Layer] 'tree'
{name: 'flower', width: '60%', height: '60%', opacity: '0.5', hidden: '0'}
1: [Layer] 'house'
{name: 'vase', width: '10%', height: '10%', top: '10%', left: '10%'}
*/
Example

dumpListeners​

dumpListeners()
Lists all listeners in the console and how often they were called.
RETURN
void
This function does not return a value.
instance.dumpListeners()
Example

duplicate​

const success = duplicate(layerName, newLayerName, withChildren)
Duplicates a certain layer or layer group.
layerName
string
Name of layer
newLayerName
string
New layer name
withChildren
boolean
`true` = children layers will also be duplicated
RETURN
boolean
Returns `true` if successful.
const success = instance.duplicate('background','new background', true)
Example

getBuild​

const version = getBuild()
Returns a string containing the FSI Layers software build number.
RETURN
string
software build number
const version = instance.getBuild()
Example

getChildNameAt​

const name = getChildNameAt(groupName, index)
Returns name of a child layer.
groupName
string
Name of group
index
integer
Index number
RETURN
string
Returns the name of the requested child layer or `false` if the index does not exist.
const success = instance.getChildNameAt('foreground', 1)
Example

getConfigValue​

const value = getConfigValue(name)
Returns the value of any configuration parameter addressed with `name`.
name
string
Any FSI Layers parameter, e.g. `effects` or `useDevicePixelRatio`
RETURN
mixed
Requested parameter value
const value = instance.getConfigValue('useDevicePixelRatio')
Example

getHTML​

const code = getHTML()
Returns the HTML code of all current groups and layers.
RETURN
HTML
HTML code
const code = instance.getHTML()
Example

getInitDone​

const success = getInitDone()
Returns if the initialization process is done.
RETURN
boolean
`true` = initialization process completed
const success = instance.getInitDone()
Example

getInstanceID​

const getID = getInstanceID()
Returns the number of the viewer object.
RETURN
integer
Viewer ID
const getID = instance.getInstanceID()
Example

getInstanceName​

const name = getInstanceName()
Returns the type of the viewer (e.g. FSI Layers) and the id attribute of the viewer object.
RETURN
string
Viewer ID attribute
const name = instance.getInstanceName()
Example

getSelectedLayerNames​

const name = getSelectedLayerNames()
Returns the names of the currently selected layers.
RETURN
array
Layer names
const name = instance.getSelectedLayerNames()
Example

getLayerNames​

const name = getLayerNames()
Returns an information object for each layer and group.
RETURN
object
Layer names
const name = instance.getLayerNames()
Example

getProperties​

const prop = getProperties(layerName)
Returns the properties of a specific layer.
layerName
string
Name of layer
RETURN
object
Layer properties
const prop = instance.getProperties('vase')
Example

getParameters​

const param = getParameters()
Returns an object containing all parameters set via javascript or custom tag attributes.
RETURN
object
Object containing all parameters currently set
const param = instance.getParameters()

// return example:
/*
{
  debug: "1"
  id: "myFSILayers"
  onready: "ready"
  usedevicepixelratio: "true"
}
*/
Example

getTypeOf​

const type = getTypeOf(layerName)
Returns the type of a layer.
layerName
string
Name of layer
RETURN
string
Layer type, e.g. `group` or `layer`, or `false` if layer does not exist.
const prop = instance.getTypeOf('background')
Example

getVersion​

const version = getVersion()
Returns a string containing the FSI Layers software version number.
RETURN
string
Software version number
const version = instance.getVersion()
Example

hide​

hide(layerName, layerName, ...)
Hides specified layers.
layerName
string
Layer name
RETURN
void
This function does not return a value.
instance.hide('yourLayer')
instance.render()
Example

hideSelected​

hideSelected()
Hides all currently selected layers.
RETURN
void
This function does not return a value.
instance.hideSelected()
instance.render()
Example

init​

const success = init(id, options, debug)
Initialises the chosen viewer element.
id
string
FSI Layers Element ID
options
object
Object with start parameters. The same parameters as in configuration files can be used
debug
boolean
debug mode at initialization
RETURN
boolean
Returns `true` if the initialization succeeded.

This method is only needed if a FSI Layers has not been started automatically (default).

const success = instance.init('fsi-123', {
  usedevicepixelratio: true,
  debug: true
}, true)
Example

move​

const success = move(layerName,targetGroup,targetIndex)
Moves the specified layer to the specified target group.
layerName
string
Name of layer
targetGroup
string
New target group
targetIndex
string
Index for the layer. If you omit targetIndex the layer will be appended to the target group. You can also use a layer name instead of a target index. (implemented in 23.02)
RETURN
boolean
Returns `true` if successful.
const success = instance.move('vase','background', 2)
Example

printAPI​

printAPI()
Shows all API methods, listeners and button IDs in the console in alphabetical order.
RETURN
void
This function does not return a value.
instance.printAPI()
Example

remove​

const success = remove(layerName, layerName, ...)
Removes specific layers.
layerName
string
Layer name
RETURN
boolean
Returns `true` if successful.
const success = instance.remove('vase','flower')
instance.render()
Example

removeListener​

const success = removeListener(listenerName, fn)
Removes a specific listener.
listenerName
string
Name of listener.
fn
string
Name of function executed when listener is called
RETURN
boolean
Returns `true` if successful.
const success = instance.removeListener('onRenderLayerDone', yourFunction)
Example

removeSelected​

const success = removeSelected()
Removes all currently selected layers.
RETURN
void
This function does not return a value.
const success = instance.removeSelected()
instance.render()
Example

render​

render()
Render the current state of FSI Layers. Must be called after changing properties or adding/removing layers.
RETURN
void
This function does not return a value.
instance.render()
Example

reset​

reset()
Resets FSI Layers emptying the root group.
RETURN
void
This function does not return a value.
instance.reset()
Example

selectAll​

selectAll()
Selects all layers and groups.
RETURN
void
This function does not return a value.
instance.selectAll()
Example

select​

select(layerName, layerName, ...)
Selects specified layers.
layerName
string
Layer name
RETURN
void
This function does not return a value.
instance.select('yourLayer')
Example

selectNone​

selectNone()
Deselects all layers.
RETURN
void
This function does not return a value.
instance.selectNone('yourLayer')
Example

setContent​

const success = setContent(layerName, content)
Sets the content in background.
layerName
string
Layer name
content
string
content
RETURN
void
This function does not return a value.
const success = instance.setContent('yourLayer', 'Your content goes here')
Example

setHTML​

setHTML(HTMLCode)
Resets FSI layers and renders the fsi-layers and fsi-layer-group tags as given in the HTMLCode argument.
HTMLCode
HTML
FSI Layers in HTML code
RETURN
void
This function does not return a value.
instance.setContent('<fsi-layers useDevicePixelRatio="true" debug="1"><fsi-layer-group></fsi-layer-group>...</fsi-layers>')
Example

setProperties​

const success = setProperties(layerNames, properties)
Sets the properties of the specified layers.
layerNames
array
Layer names
properties
object
Properties to be set. Use a property value of "null" to remove a property.
RETURN
void
This function does not return a value.
const success = instance.setProperties(["layer1", "layer2"], {"left":"20%", "hidden":false})
Example

setPropertiesOfSelected​

const success = setPropertiesOfSelected(properties)
Sets the properties of all selected layers.
properties
object
Properties to be set. Use a property value of "null" to remove a property.
RETURN
void
This function does not return a value.
const success = instance.setPropertiesOfSelected({"left":"20%", "hidden":false});
Example

show​

show(layerName, layerName, ...)
Shows specified layers if hidden before.
layerName
string
Layer name
RETURN
void
This function does not return a value.
instance.show('yourLayer')
instance.render()
Example

showSelected​

showSelected()
Shows selected layers if hidden before.
RETURN
void
This function does not return a value.
instance.showSelected()
instance.render()
Example

start​

start()
Starts FSI Layers.
RETURN
void
This function does not return a value.
instance.start()
Example

testAPIListenersStart​

testAPIListenersStart()
Starts the API test and shows all called listeners and the parameters which they return.
RETURN
void
This function does not return a value.
instance.testAPIListenersStart()
Example

testAPIListenersStop​

testAPIListenersStop()
Stops the API test.
RETURN
void
This function does not return a value.
instance.testAPIListenersStop()
Example

toggleInfo​

toggleInfo()
Toggles the info (name, dimensions, clipping state) and direction arrows of all layers and groups.
RETURN
void
This function does not return a value.
instance.toggleInfo()
Example

traceConfigValue​

const show = traceConfigValue(strName)
Traces a config value and enables you to see where (by parameter/attribute, in config files, the _default.xml, etc) a specific value is set.
name
string
Any FSI Layers parameter e.g. `showInfo` or `useDevicePixelRatio`
RETURN
mixed
Returns where parameter is set
const show = instance.traceConfigValue('useDevicePixelRatio')

// return example:
// Tracing parameter "useDevicePixelRatio"
// By Parameter/Attribute:
// true
// RESULT:
// useDevicePixelRatio = "true"
Example