Scripting reference¶

Here you can find the reference for using JavaScript scripts in your Kanzi applications. You can use scripts after you add the Execute Script action to any trigger in your nodes. See Using scripts and Triggers.

Kanzi uses Google’s V8 JavaScript engine.

Note

You can use JavaScript only on Windows operating system and only for prototyping.

Script Editor¶

In your Kanzi Studio project scripts are stored in the Library > Resource Files > Scripts, and on the hard drive in the <ProjectName>/scripts directory.

You can write and edit scripts in the Kanzi Studio Script Editor, or in any other text editor.

Action	Description	Shortcut
Save	Saves the currently open script.	`Ctrl` `S`
Comment selection	Comments the currently selected lines of code.	`Ctrl` `K` `Ctrl` `C`
Uncomment selection	Uncomments the currently selected and commented lines of code.	`Ctrl` `K` `Ctrl` `U`

Action

Description

Shortcut

Save

Saves the currently open script.

Ctrl S

Comment selection

Comments the currently selected lines of code.

Ctrl K Ctrl C

Uncomment selection

Uncomments the currently selected and commented lines of code.

Ctrl K Ctrl U

General¶

Standard JavaScript API¶

In your Kanzi applications you can use the standard JavaScript API. For example, you can use:

Date and time functions:

var d = new Date();
print('Date: ' + d.toString());
print('Milliseconds since 1970: ' + d.getTime());
print('Year: ' + d.getFullYear());
print('Month: ' + (d.getMonth() + 1));
print('Day of the month: ' + d.getDate());
var minutes = String(d.getMinutes()).length < 2 ? '0' + d.getMinutes() : d.getMinutes();
var seconds = String(d.getSeconds()).length < 2 ? '0' + d.getSeconds() : d.getSeconds();
print('Time: ' + d.getHours() + ':' + minutes + ':' + seconds);

Math functions:

print('random number in [0, 1]: ' + Math.random());
print('pi: ' + Math.PI);
print('sqrt(3): ' + Math.sqrt(3));
print('pow(3, 3): ' + Math.pow(3, 3));
print('sin(PI / 2): ' + Math.sin(Math.PI / 2));
print('cos(PI): ' + Math.cos(Math.PI));
print('round(4.2): ' + Math.round(4.2));

Regular expressions:

var text = 'Kanzi Rules!';
print('The position of "!": ' + text.search(/!/));
print('Has "Kanzi": ' + /Kanzi/.test(text));
print('Replace: ' + text.replace(/Kanzi/, "Kanzi 3"));

instantiateNode¶

Creates a node.

Syntax

instantiateNode('type.node', 'name')

Parameters

type

the type name of the node. The type name for all Kanzi nodes is kanzi.

node

the node name

name

the name for the instantiated node

Examples

// Finds the Scene node using an alias named Scene.
var scene = node.lookupNode('#Scene');
// Creates a Flow Layout 3D node.
var flowLayout = instantiateNode('Kanzi.FlowLayout3D', 'NewFlowLayout');
// Adds the Flow Layout 3D node to the Scene node.
scene.addChild(flowLayout);

instantiatePrefab¶

Instantiates a prefab.

Syntax

instantiatePrefab('prefab', 'name')

Parameters

prefab

kzb URL of the prefab you want to instantiate

To get the kzb URL of a prefab, in the Prefabs right-click the prefab and select Copy .kzb URL.

name

the name for the root of the instantiated prefab

Examples

// Instantiates a prefab PrefabName as a child of the node from which
// the Execute Script action is triggered.
// node is a global variable and resolves to this node.
var prefab = instantiatePrefab('kzb://<project_name>/Prefabs/PrefabName', 'NewItem');
node.addChild(prefab);

lookupNode¶

Finds and returns a node in the node tree.

Syntax

lookupNode('node')

Parameters

node

alias or relative path to the node where you execute this script.

Returns

the node. If lookupNode cannot find the node, it returns null.

Examples

// Finds the node to which the alias named Item points.
var item = node.lookupNode('#Item');

// Finds the node Text Block 3D, which is relative to the
// node on which you call the method.
var textBlock3D = node.lookupNode('Text Block 3D');

// Prints the value of the Name property of the current node.
// node is a global variable and resolves to this node.
print(node.Name);

print¶

Prints to the Log window.

Syntax

print('content')

Parameters

content

content to print to the Log window

Examples

// Prints Hello world! to the Log window
print('Hello world!')

// Finds the node Grid List Box 3D called Grid List Box 3D.
var gridListBox = node.lookupNode('Grid List Box 3D');
// Prints to the Log window the number of items in the Grid List Box 3D.
print(gridListBox.getItemCount());

Properties¶

setProperty¶

Sets the value of a property. If the node does not have the property you are setting, Kanzi adds that property. Use setProperty to set material and attached properties, such as layout properties. You can set all other properties using the Kanzi Engine property name after calling the node.

Tip

You can see the Kanzi Engine property name when in Kanzi Studio you hover your mouse pointer over a property name.

See getProperty, removeLocalValue, and Color properties.

Syntax

setProperty('property', 'value')

Parameters

property

the Kanzi Engine name of the property to set

value

the value to which you want to set the property

Examples

// Finds a mesh named Plane and sets its Texture property to
// the texture located in Textures/Texture01.
var plane = node.lookupNode('Plane');
plane.setProperty('Texture', 'kzb://<project_name>/Textures/Texture01');

// Finds the node to which the TextBlock alias points,
// and sets the value of the Text property in that node to Menu.
var textBlock = node.lookupNode('#TextBlock');
textBlock.Text = 'Menu';
// Sets the Name property of the node to NewName.
textBlock.Name = 'NewName';

getProperty¶

Returns the value of a property. You can get properties using the Kanzi Engine property name after calling a node.

Tip

You can see the Kanzi Engine property name when in Kanzi Studio you hover your mouse pointer over a property name.

See setProperty, removeLocalValue, and Color properties.

Syntax

getProperty('property')

Parameters

property

the Kanzi Engine name of the property the value of which you want to get

Returns

the value of the property

Examples

// Finds the node to which the TextBlock alias points,
// gets the value of the Text property in that node,
// and prints it to the Log window.
var textBlock = node.lookupNode('#TextBlock');
var text = textBlock.getProperty('TextConcept.Text');
print(text);

// Finds the Image1 and Image2 nodes using a relative path
// from the node where you execute this script.
var image1 = node.lookupNode('../Image1');
var image2 = node.lookupNode('../Image2');
// Sets the value of the Layout Width property in the Image1
// node to the Layout Height property in the Image2 node.
image2.Height = image1.Width;

// Finds the RootPage node using a relative path from
// the node where you execute this script.
var rootPage = node.lookupNode('../../RootPage');
// If in the RootPage node the Default Subpage property is set,
// prints to the Log window the relative path to that node.
if (rootPage.DefaultSubPage)
{
    print(rootPage.DefaultSubPage);
}
else
{
    print("The Default Subpage property is not set!");
}

removeLocalValue¶

Delete a property from a node.

Tip

You can see the Kanzi Engine property name when in Kanzi Studio you hover your mouse pointer over a property name.

See setProperty, getProperty, and Color properties.

Syntax

removeLocalValue('property')

Parameters

property

the Kanzi Engine name of the property which you want to delete

Examples

// Finds the node to which the TextBlock alias points
// and removes the Text property from that node.
var textBlock = node.lookupNode('#TextBlock');
var text = textBlock.removeLocalValue('TextConcept.Text');

Color properties¶

Set the values of color properties using an array.

See getProperty, setProperty, and removeLocalValue.

Syntax

[r, g, b, a]

Parameters

r

0…1 range: red color channel value

g

0…1 range: green color channel value

b

0…1 range: blue color channel value

a

0…1 range: alpha channel value

Examples

// Finds the node to which Point Light alias points
// and sets the Point Light Color property of that node to green.
var light = node.lookupNode('#Point Light');
light.setProperty('PointLightColor.Color', [0, 1, 0, 0]);

// You can set the color of the Color Brush property for a node only
// when that node has the Foreground Brush or Background Brush property
// set to a Color Brush.
// Finds the node to which Button alias points,
// overrides the color set in a Color Brush in the Foreground Brush
// and Background Brush properties, and sets the color of the Color Brush
// property of the node to red and opaque.
var button = node.lookupNode('#Button');
button.setProperty('ColorBrush.Color', [1, 0, 0, 1]);

Child nodes¶

All nodes can have child nodes, except list box nodes (Trajectory List Box 3D, Grid List Box 3D, Grid List Box 2D) that have items. See Items.

addChild¶

Adds a child node to a node.

Syntax

addChild(node)

Parameters

node

node to add

Examples

// Instantiates a prefab called Sphere and names it NewSphere.
var sphere = instantiatePrefab('kzb://<project_name>/Prefabs/Sphere', 'NewSphere');
// Finds the Empty Node 3D node called Empty Node 3D.
var emptyNode = node.lookupNode('Empty Node 3D');
// Adds the NewSphere node to the Empty Node 3D node.
emptyNode.addChild(sphere);

getChild¶

Gets a child node of a node.

Syntax

getChild()

Examples

// Finds the Empty Node 3D node called Empty Node 3D.
var emptyNode = node.lookupNode('Empty Node 3D');
// Gets the second child of the emptyNode node.
emptyNode.getChild(1);

getChildCount¶

Gets the number of child nodes of a node.

Syntax

getChildCount()

Examples

// Finds the Empty Node 3D node called Empty Node 3D.
var emptyNode = node.lookupNode('Empty Node 3D');
// Gets the number of child nodes of the emptyNode.
emptyNode.getChildCount();

removeChild¶

Removes a child node from a node.

Syntax

removeChild(node)

Parameters

node

node to remove

Examples

// Instantiates a prefab called Sphere and names it NewSphere.
var sphere = instantiatePrefab('kzb://<project_name>/Prefabs/Sphere', 'NewSphere');
// Finds the Empty Node 3D node called Empty Node 3D.
var emptyNode = node.lookupNode('./Empty Node 3D');
// Adds the NewSphere node to the Empty Node 3D node.
emptyNode.addChild(sphere);
// Removes the NewSphere node from the Empty Node 3D node.
emptyNode.removeChild(sphere);

removeAllChildren¶

Removes all child nodes from a node.

Syntax

removeAllChildren()

Examples

// Finds the node to which EmptyNode alias points.
var emptyNode = node.lookupNode('#EmptyNode');
// Removes all child nodes from the emptyNode node.
emptyNode.removeAllChildren();

Parent nodes¶

getParent¶

Gets the parent node of the current node.

Syntax

getParent()

Examples

// Gets the parent of the current node.
// node is a global variable and resolves to this node.
var parentNode = node.getParent();

// Gets the parent of the current node.
var nodeParent = node.lookupNode('..');

Items¶

You can add items to controls that inherit from item collection. These controls are all list box nodes (Trajectory List Box 3D, Grid List Box 3D, Grid List Box 2D). See Kanzi Engine API reference.

All other nodes have child nodes. See Child nodes.

addItem¶

Adds an item to a node.

Syntax

addItem(node)

Parameters

node

the node to add as an item

Examples

// Instantiates a prefab called Text Block 3D and names it NewText.
var text = instantiatePrefab('kzb://<project_name>/Prefabs/Text Block 3D', 'NewText');
// Finds the Grid List Box 3D node called Grid List Box 3D.
var gridListBox = node.lookupNode('Grid List Box 3D');
// Adds the NewText node to the Grid List Box 3D node.
gridListBox.addItem(text);

getItem¶

Gets an item from its host.

Syntax

getItem(index)

Parameters

index

the position of the item in its host

Returns

the item

Examples

// Finds the Grid List Box 3D node called Grid List Box 3D.
var gridListBox = node.lookupNode('Grid List Box 3D');
// Gets the second item of the gridListBox.
gridListBox.getItem(1);

getItemCount¶

Gets the number of items that belong to a node.

Syntax

getItemCount()

Returns

the number of items in the node the method is called on

Examples

// Finds the Grid List Box 3D node called Grid List Box 3D.
var gridListBox = node.lookupNode('Grid List Box 3D');
// Prints to the Log window the number of items in the Grid List Box 3D.
print(gridListBox.getItemCount());

removeAllItems¶

Removes all items from a node.

Syntax

removeAllItems()

Examples

// Finds the Grid List Box 3D node called Grid List Box 3D.
var gridListBox = node.lookupNode('Grid List Box 3D');
// Removes all items from the Grid List Box 3D node.
gridListBox.removeAllItems();

removeItem¶

Removes an item from a node.

Syntax

removeItem(node)

Parameters

node

the node to remove

Examples

// Instantiates a prefab called Text Block 3D and names it NewText.
var text = instantiatePrefab('kzb://<project_name>/Prefabs/Text Block 3D', 'NewText');
// Finds the Grid List Box 3D node called Grid List Box 3D.
var gridListBox = node.lookupNode('Grid List Box 3D');
// Adds NewText node to the Grid List Box 3D node.
gridListBox.addItem(text);
// Removes NewText node from the Grid List Box 3D node.
gridListBox.removeItem(text);

Focus¶

You can set keyboard focus to nodes and move focus in the focus chain. See Focus and Using focus.

getFocusedNode¶

Gets the node that currently has focus.

See trySetFocus.

Syntax

getFocusedNode()

Returns

the node that has focus.

Examples

// Gets the node that currently has focus.
var nodeInFocus = getFocusedNode();
// Prints to the Log window the Name of the node.
print(nodeInFocus.Name);

trySetFocus¶

Sets focus to a node. For example, use trySetFocus to set the focus on a specific node in a project so that it can receive input from the keyboard. See Using triggers and getFocusedNode.

Syntax

trySetFocus()

Examples

// Finds the node to which the Button alias points.
var buttonNode = node.lookupNode('#Button');
// Sets the focus to the buttonNode node.
buttonNode.trySetFocus();

tryMoveFocusForward¶

Moves the focus from the currently focused node to the next node in the focus chain in the forward direction. Kanzi automatically includes in the focus chain all nodes in your project for which you enable the Focusable property. By default the focus manager moves the focus from each node to the next focusable child node. The forward direction chain uses the pre-order traversal of the node hierarchy. If the next node is a focus scope, the first focusable node in that scope receives focus.

See tryMoveFocusBackward.

Syntax

tryMoveFocusForward()

Examples

// Moves the focus from the currently focused node to the next child node
// that has the Focusable property enabled. If there is no child node,
// this function moves the focus down in the project tree to the next
// node that has the Focusable property enabled.
tryMoveFocusForward();

tryMoveFocusBackward¶

Moves the focus from the currently focused node to the next node in the focus chain in the backward direction. Kanzi automatically includes in the focus chain all nodes in your project for which you enable the Focusable property. By default the focus manager moves the focus from each node to the previous focusable child node. The backward direction chain uses reverse pre-order traversal of the node hierarchy. If the previous node is a focus scope, the first focusable node in that scope receives focus.

See tryMoveFocusForward.

Syntax

tryMoveFocusBackward()

Examples

// Moves the focus from the currently focused node to the previous child
// or parent node which has the Focusable property enabled.
// If there is no child or parent node, this function moves the focus up
// in the project tree to the next node that has the Focusable property
// enabled.
tryMoveFocusBackward();

Page and Page Host nodes¶

Use the Page and Page Host nodes functions to navigate between the Page and Page Host nodes in your application.

navigateToThisPage¶

Navigates to the Page or Page Host node.

Syntax

navigateToThisPage()

Examples

// Finds the node to which the alias points. The alias can point to either
// a Page or a Page Host node.
var settingsPageHost = node.lookupNode('#SettingsPageHost');
// Navigates to the settingsPageHost node.
settingsPageHost.navigateToThisPage();

navigateToNextPage¶

Navigates to the next child Page or Page Host node of a Page Host node.

Syntax

navigateToNextPage()

Examples

// Finds the Page Host node to which the alias points.
var applicationsPageHost = node.lookupNode('#ApplicationsPageHost');
// Navigates to the next Page or Page Host child node of
// the applicationsPageHost node.
applicationsPageHost.navigateToNextPage();

navigateToPreviousPage¶

Navigates to the previous child Page or Page Host node of a Page Host node.

Syntax

navigateToPreviousPage()

Examples

// Finds the Page Host node to which the alias points.
var applicationsPageHost = node.lookupNode('#ApplicationsPageHost');
// Navigates to the previous Page or Page Host child node of the applicationsPageHost node.
applicationsPageHost.navigateToPreviousPage();

navigateToParentPage¶

Navigates to the parent Page or Page Host node of a Page or Page Host node.

Syntax

navigateToParentPage()

Examples

// Navigates to the parent Page or Page Host node of the current node.
node.navigateToParentPage();

// Finds the node to which the alias points. The alias can point to either
// a Page or a Page Host node.
var mediaPage = node.lookupNode('#MediaPage');
// Navigates to the parent Page or Page Host node of the mediaPage node.
mediaPage.navigateToParentPage();

State manager¶

Use the state manager functions to control the state of your application.

goToState¶

Sets the application to a state in the state group of the state manager of the node where you call this function.

See goToNextDefinedState and goToPreviousDefinedState.

Syntax

goToState('stateGroup.state')

Parameters

stateGroup

the name of the state group that contains the state to which you want to set your application

state

the name of the state to which you want to set your application

Examples

// Gets the value of the Layout Height property of the node where you execute the script.
var height = node.getProperty('Node.Height');

// Checks the value of the Layout Height property.
// If the value of the Layout Height property is less than or equals 50,
// sets the application to the state named Empty in the state group named
// FuelGauge, which is in the state manager of the current node.
if (height <= 50)
{
    node.goToState('FuelGauge.Empty');
}
// If the value of the Layout Height property is more than 50 and less
// than or equals 250, sets the application to the state named Half
// in the state group named FuelGauge, which is in the state manager
// of the current node.
else if (height > 50 && height <= 250)
{
    node.goToState('StateGroup.Half');
}
// For all other values of the Layout Height property, sets
// the application to the state named Full in the state group
// named FuelGauge, which is in the state manager of the current node.
else
{
    node.goToState('StateGroup.Full');
}

goToNextDefinedState¶

Sets the application to the next state in a state group of the state manager. When you reach the last state in a state group, the function sets the application to the first state in that state group.

See goToState and goToPreviousDefinedState.

Syntax

goToNextDefinedState('stateGroup')

Parameters

stateGroup

the name of the state group where you want to set the next state

Examples

// Sets the next state in the state group named MenuControl of the node where you execute the script.
node.goToNextDefinedState('MenuControl');

goToPreviousDefinedState¶

Sets the application to the previous state in a state group of the state manager. When you reach the first state in a state group, the function sets the application to the last state in that state group.

See goToState and goToNextDefinedState.

Syntax

goToPreviousDefinedState('stateGroup')

Parameters

stateGroup

the name of the state group where you want to set the previous state

Examples

// Sets the previous state in the state group named MenuControl of the node where you execute the script.
node.goToPreviousDefinedState('MenuControl');

Layout transformation¶

You can apply transformations in these ways:

Layout transformation transforms the item before it applies the layout pass.
Render transformation transforms the item after it applies the layout pass, but before it renders the item.

See Render transformation.

rotateLayout¶

Applies the layout rotation of a node. You can use this function only with 2D nodes.

Syntax

rotateLayout(angle)

Parameters

angle

the angle of the layout rotation in degrees

Examples

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Applies 90 degree layout rotation.
text.rotateLayout(90);

rotateXLayout¶

Applies the layout rotation of a node around the x axis to the already existing rotation. You can use this function only with 3D nodes.

Syntax

rotateXLayout(angle)

Parameters

angle

the angle of the layout rotation in degrees around the x axis

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Applies 120 degree rotation around the x axis.
text.rotateXLayout(120);

rotateYLayout¶

Applies the layout rotation of a node around the y axis to the already existing rotation. You can use this function only with 3D nodes.

Syntax

rotateYLayout(angle)

Parameters

angle

the angle of the layout rotation in degrees around the y axis

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Applies 120 degree layout rotation around the y axis.
text.rotateYLayout(120);

rotateZLayout¶

Applies the layout rotation of a node around the z axis to the already existing rotation. You can use this function only with 3D nodes.

Syntax

rotateZLayout(angle)

Parameters

angle

the angle of the layout rotation in degrees around the z axis

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Applies 120 degree layout rotation around the z axis.
text.rotateZLayout(120);

setLayoutRotation¶

Sets the layout rotation of a node. You can use this function with both 2D and 3D nodes.

See getLayoutRotation, extractLayoutTransformEulerX, extractLayoutTransformEulerY, and extractLayoutTransformEulerZ.

Syntax

For 2D nodes: setLayoutRotation(x)

For 3D nodes: setLayoutRotation(x, y, z)

Parameters

x

the angle of layout rotation in degrees for the x axis

y

the angle of layout rotation in degrees for the y axis

z

the angle of layout rotation in degrees for the z axis

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Sets the layout rotation around the:
// - x axis to 15 degrees
// - y axis to 10 degrees
// - z axis to 0 degrees
text.setLayoutRotation(15, 10, 0);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Sets the layout rotation to 90 degrees.
image.setLayoutRotation(90);

getLayoutRotation¶

Gets the rotation in degrees of the Layout Transformation property of 2D nodes. To get the rotation of the Layout Transformation property of 3D nodes use extractLayoutTransformEulerX, extractLayoutTransformEulerY, and extractLayoutTransformEulerZ.

See setLayoutRotation.

Syntax

getLayoutRotation()

Returns

int or float

Examples

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Gets the rotation from the Layout Transformation property of the selected node.
var imageRotation = image.getLayoutRotation();

extractLayoutTransformEulerX¶

Gets the X Euler angle from the Layout Transformation Rotation X property field of 3D nodes. To get the rotation of the Layout Transformation property of 2D nodes use getLayoutRotation.

See setLayoutRotation.

Syntax

extractLayoutTransformEulerX()

Returns

float: the value of the X Euler angle in degrees

Examples

// Finds the Plane node called Plane.
var plane = node.lookupNode('./Viewport 2D/Scene/Plane');
// Extracts the X Euler angle from the Layout Transformation property of the selected node.
var xEulerAngle = plane.extractLayoutTransformEulerX();

extractLayoutTransformEulerY¶

Gets the Y Euler angle from the Layout Transformation Rotation Y property field of 3D nodes. To get the rotation of the Layout Transformation property of 2D nodes use getLayoutRotation.

See setLayoutRotation.

Syntax

extractLayoutTransformEulerY()

Returns

float: the value of the Y Euler angle in degrees

Examples

// Finds the Button 3D node called Button 3D.
var button = node.lookupNode('./Viewport 2D/Scene/Button 3D');
// Extracts the Y Euler angle from the Layout Transformation property of the selected node.
var yEulerAngle = button.extractLayoutTransformEulerY();

extractLayoutTransformEulerZ¶

Gets the Z Euler angle from the Layout Transformation Rotation Z property field of 3D nodes. To get the rotation of the Layout Transformation property of 2D nodes use getLayoutRotation.

See setLayoutRotation.

Syntax

extractLayoutTransformEulerZ()

Returns

float: the value of the Z Euler angle in degrees

Examples

// Finds the Box node called Cube.
var box = node.lookupNode('./Viewport 2D/Scene/Cube');
// Extracts the Z Euler angle from the Layout Transformation property of the selected node.
var zEulerAngle = box.extractLayoutTransformEulerZ();

scaleLayout¶

Applies the layout scaling of a node. You can use this function with both 2D and 3D nodes.

Syntax

For 2D nodes: scaleLayout(x, y)

For 3D nodes: scaleLayout(x, y, z)

Parameters

x

apply the layout scale of the node in x axis in percent

y

apply the layout scale of the node in y axis in percent

z

apply the layout scale of the node in z axis in percent

Examples

// Finds the Sphere node named Ball.
var ball = node.lookupNode('Ball');
// Applies the layout scaling of the node:
// - Increases the layout scale in the x axis by 100%.
// - Decreases the layout scale in the y axis by 10%.
// - Increases the layout scale in the z axis by 50%.
ball.scaleLayout(2, 0.9, 1.5);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Applies the layout scaling of the node:
// - Increases the layout scale in the x axis by 50%.
// - Decreases the layout scale in the y axis by 25%.
image.scaleLayout(1.5, 0.75);

setLayoutScale¶

Increases or decreases the layout scale of a node. You can use this function with both 2D and 3D nodes.

See getLayoutScale.

Syntax

For 2D nodes: setLayoutScale(x, y)

For 3D nodes: setLayoutScale(x, y, z)

Parameters

x

the layout scale of the node in x axis in percent

y

the layout scale of the node in y axis in percent

z

the layout scale of the node in z axis in percent

Examples

// Finds the Sphere node named Ball.
var ball = node.lookupNode('Ball');
// Sets the layout scale of the node:
// - In the x axis to 200%.
// - In the y axis to 10%.
// - In the z axis to 50%.
ball.setLayoutScale(2, 0.1, 0.5);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Sets the layout scale of the node:
// - In the x axis to 150%
// - In the y axis to 75%.
image.setLayoutScale(1.5, 0.75);

getLayoutScale¶

Gets the current layout scale values of a node. You can use this function with both 2D and 3D nodes.

See setLayoutScale.

Syntax

getLayoutScale()

Returns

the layout rotation values for the x, y, and z axes

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Gets the layout scale values for the x, y, and z axes.
text.getLayoutScale();
// Gets the layout scale value only for the x axis.
text.getLayoutScale()[0];
// Gets the layout scale value only for the z axis.
text.getLayoutScale()[2];

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Gets the layout scale values for the x and y.
image.getLayoutScale();
// Gets the layout scale value only for the x axis.
image.getLayoutScale()[0];

translateLayout¶

Applies the layout translation to a node. You can use this function with both 2D and 3D nodes.

Syntax

For 2D nodes: translateLayout(x, y)
For 3D nodes: translateLayout(x, y, z)

Parameters

x

apply the layout translation of the node on the x axis:

For 3D nodes in device independent units
For 2D nodes in pixels

y

apply the layout translation of the node on the y axis:

For 3D nodes in device independent units
For 2D nodes in pixels

z

apply the layout translation of the node on the z axis in device independent units

Examples

// Finds the Sphere node named Ball.
var ball = node.lookupNode('Ball');
// Applies the layout translation of the node:
// - Moves along the x axis by 2 device independent units.
// - Moves along the y axis by 0.5 device independent unit.
// - Moves along the z axis by 0.1 device independent unit.
ball.translateLayout(2, 0.5, 0.1);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Applies the layout translation of the node:
// - Moves along the x axis by 100 pixels.
// - Moves along the y axis by 50 pixels.
image.translateLayout(100, 50);

setLayoutTranslation¶

Sets the layout translation of a node. You can use this function with both 2D and 3D nodes.

See getLayoutTranslation.

Syntax

For 2D nodes: setLayoutTranslation(x, y)
For 3D nodes: setLayoutTranslation(x, y, z)

Parameters

x

the layout translation of the node on the x axis

For 3D nodes in device independent units
For 2D nodes in pixels

y

the layout translation of the node on the y axis

For 3D nodes in device independent units
For 2D nodes in pixels

z

the layout translation of the node on the z axis in device independent units

Examples

// Finds the Sphere node named Ball.
var ball = node.lookupNode('Ball');
// Sets the layout translation of the node:
// - Moves along the x axis by 2 device independent units.
// - Moves along the y axis by 0.5 device independent unit.
// - Moves along the z axis by 0.1 device independent unit.
ball.setLayoutTranslation(2, 0.5, 0.1);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Sets the layout translation of the node:
// - Moves along the x axis by 100 pixels.
// - Moves along the y axis by 50 pixels.
image.setLayoutTranslation(100, 50);

getLayoutTranslation¶

Gets the current layout translation values of a node. You can use this function with both 2D and 3D nodes.

See setLayoutTranslation.

Syntax

getLayoutTranslation()

Returns

For 2D nodes: an array containing int or float for the layout translation values for the x and y axes.
For 3D nodes: an array containing int or float for the layout translation values for the x, y, and z axes.

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Gets the layout translation values for the x, y, and z axes.
text.getLayoutTranslation();
// Gets the layout translation value only for the x axis.
text.getLayoutTranslation()[0];
// Gets the layout translation value only for the z axis.
text.getLayoutTranslation()[2];

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Gets the layout translation value of the node.
image.getLayoutTranslation();
// Gets the layout translation value only for the x axis.
image.getLayoutTranslation()[0];
// Gets the layout translation value only for the y axis.
image.getLayoutTranslation()[1];

Render transformation¶

You can apply transformations in these ways:

Layout transformation transforms the item before it applies the layout pass.

See Layout transformation.
Render transformation transforms the item after it applies the layout pass, but before it renders the item.

rotateRender¶

Applies the render rotation of a node. You can use this function only with 2D nodes.

Syntax

rotateRender(angle)

Parameters

angle

the angle of the render rotation in degrees

Examples

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Applies 90 degree render rotation.
text.rotateRender(90);

rotateXRender¶

Applies the render rotation of a node around the x axis to the already existing rotation. You can use this function only with 3D nodes.

Syntax

rotateXRender(angle)

Parameters

angle

the angle of the render rotation in degrees around the x axis

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Applies 120 degree rotation around the x axis.
text.rotateXRender(120);

rotateYRender¶

Applies the render rotation of a node around the y axis to the already existing rotation. You can use this function only with 3D nodes.

Syntax

rotateYRender(angle)

Parameters

angle

the angle of the render rotation in degrees around the y axis

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Applies 120 degree render rotation around the y axis.
text.rotateYRender(120);

rotateZRender¶

Applies the render rotation of a node around the z axis to the already existing rotation. You can use this function only with 3D nodes.

Syntax

rotateZRender(angle)

Parameters

angle

the angle of the render rotation in degrees around the z axis

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Applies 120 degree render rotation around the z axis.
text.rotateZRender(120);

setRenderRotation¶

Sets the render rotation of a node. You can use this function with both 2D and 3D nodes.

See getRenderRotation, extractRenderTransformEulerX, extractRenderTransformEulerY, and extractRenderTransformEulerZ.

Syntax

For 2D nodes: setRenderRotation(x)
For 3D nodes: setRenderRotation(x, y, z)

Parameters

x

the angle of render rotation in degrees for the x axis

y

the angle of render rotation in degrees for the y axis

z

the angle of render rotation in degrees for the z axis

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Sets the render rotation around the:
// - x axis to 15 degrees
// - y axis to 10 degrees
// - z axis to 0 degrees
text.setRenderRotation(15, 10, 0);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Sets the render rotation to 90 degrees.
image.setRenderRotation(90);

getRenderRotation¶

Gets the rotation in degrees of the Render Transformation property of 2D nodes. To get the rotation of the Render Transformation property of 3D nodes use extractRenderTransformEulerX, extractRenderTransformEulerY, and extractRenderTransformEulerZ.

See setRenderRotation.

Syntax

getRenderRotation()

Returns

int or float

Examples

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Gets the rotation from the Render Transformation property of the selected node.
var imageRotation = image.getRenderRotation();

extractRenderTransformEulerX¶

Gets the X Euler angle from the Render Transformation Rotation X property field of 3D nodes. To get the rotation of the Render Transformation property of 2D nodes use getRenderRotation.

See setRenderRotation.

Syntax

extractRenderTransformEulerX()

Returns

float: the value of the X Euler angle in degrees

Examples

// Finds the Plane node called Plane.
var plane = node.lookupNode('./Viewport 2D/Scene/Plane');
// Extracts the X Euler angle from the Render Transformation property of the selected node.
var xEulerAngle = plane.extractRenderTransformEulerX();

extractRenderTransformEulerY¶

Gets the Y Euler angle from the Render Transformation Rotation Y property field of 3D nodes. To get the rotation of the Render Transformation property of 2D nodes use getRenderRotation.

See setRenderRotation.

Syntax

extractRenderTransformEulerY()

Returns

float: the value of the Y Euler angle in degrees

Examples

// Finds the Button 3D node called Button 3D.
var button = node.lookupNode('./Viewport 2D/Scene/Button 3D');
// Extracts the Y Euler angle from the Render Transformation property of the selected node.
var yEulerAngle = button.extractRenderTransformEulerY();

extractRenderTransformEulerZ¶

Gets the Z Euler angle from the Render Transformation Rotation Z property field of 3D nodes. To get the rotation of the Render Transformation property of 2D nodes use getRenderRotation.

See setRenderRotation.

Syntax

extractRenderTransformEulerZ()

Returns

float: the value of the Z Euler angle in degrees

Examples

// Finds the Box node called Cube.
var box = node.lookupNode('./Viewport 2D/Scene/Cube');
// Extracts the Z Euler angle from the Render Transformation property of the selected node.
var zEulerAngle = box.extractRenderTransformEulerZ();

scaleRender¶

Applies the render scaling of a node. You can use this function with both 2D and 3D nodes.

Syntax

For 2D nodes: scaleRender(x, y)
For 3D nodes: scaleRender(x, y, z)

Parameters

x

apply the render scale of the node in x axis in percent

y

apply the render scale of the node in y axis in percent

z

apply the render scale of the node in z axis in percent

Examples

// Finds the Sphere node named Ball.
var ball = node.lookupNode('Ball');
// Applies the render scaling of the node:
// - Increases the render scale in the x axis by 100%.
// - Decreases the render scale in the y axis by 10%.
// - Increases the render scale in the z axis by 50%.
ball.scaleRender(2, 0.9, 1.5);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Applies the render scaling of the node:
// - Increases the render scale in the x axis by 50%.
// - Decreases the render scale in the y axis by 25%.
image.scaleRender(1.5, 0.75);

setRenderScale¶

Increases or decreases the render scale of a node. You can use this function with both 2D and 3D nodes.

See getRenderScale.

Syntax

For 2D nodes: setRenderScale(x, y)
For 3D nodes: setRenderScale(x, y, z)

Parameters

x

the render scale of the node in x axis in percent

y

the render scale of the node in y axis in percent

z

the render scale of the node in z axis in percent

Examples

// Finds the Sphere node named Ball.
var ball = node.lookupNode('Ball');
// Sets the render scale of the node:
// - In the x axis to 200%.
// - In the y axis to 10%.
// - In the z axis to 50%.
ball.setRenderScale(2, 0.1, 0.5);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Sets the render scale of the node:
// - In the x axis to 150%
// - In the y axis to 75%.
image.setRenderScale(1.5, 0.75);

getRenderScale¶

Gets the current render scale values of a node. You can use this function with both 2D and 3D nodes.

See setRenderScale.

Syntax

getRenderScale()

Returns

the render rotation values for the x, y, and z axes

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Gets the render scale values for the x, y, and z axes.
text.getRenderScale();
// Gets the render scale value only for the x axis.
text.getRenderScale()[0];
// Gets the render scale value only for the z axis.
text.getRenderScale()[2];

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Gets the render scale values for the x and y.
image.getRenderScale();
// Gets the render scale value only for the x axis.
image.getRenderScale()[0];

translateRender¶

Applies the render translation to a node. You can use this function with both 2D and 3D nodes.

Syntax

For 2D nodes: translateRender(x, y)
For 3D nodes: translateRender(x, y, z)

Parameters

x

apply the render translation of the node on the x axis:

For 3D nodes in device independent units
For 2D nodes in pixels

y

apply the render translation of the node on the y axis:

For 3D nodes in device independent units
For 2D nodes in pixels

z

apply the render translation of the node on the z axis in device independent units

Examples

// Finds the Sphere node named Ball.
var ball = node.lookupNode('Ball');
// Applies the render translation of the node:
// - Moves along the x axis by 2 device independent units.
// - Moves along the y axis by 0.5 device independent unit.
// - Moves along the z axis by 0.1 device independent unit.
ball.translateRender(2, 0.5, 0.1);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Applies the render translation of the node:
// - Moves along the x axis by 100 pixels.
// - Moves along the y axis by 50 pixels.
image.translateRender(100, 50);

setRenderTranslation¶

Sets the render translation of a node. You can use this function with both 2D and 3D nodes.

See getRenderTranslation.

Syntax

For 2D nodes: setRenderTranslation(x, y)
For 3D nodes: setRenderTranslation(x, y, z)

Parameters

x

the render translation of the node on the x axis

For 3D nodes in device independent units
For 2D nodes in pixels

y

the render translation of the node on the y axis

For 3D nodes in device independent units
For 2D nodes in pixels

z

the render translation of the node on the z axis in device independent units

Examples

// Finds the Sphere node named Ball.
var ball = node.lookupNode('Ball');
// Sets the render translation of the node:
// - Moves along the x axis by 2 device independent units.
// - Moves along the y axis by 0.5 device independent unit.
// - Moves along the z axis by 0.1 device independent unit.
ball.setRenderTranslation(2, 0.5, 0.1);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Sets the render translation of the node:
// - Moves along the x axis by 100 pixels.
// - Moves along the y axis by 50 pixels.
image.setRenderTranslation(100, 50);

getRenderTranslation¶

Gets the current render translation values of a node. You can use this function with both 2D and 3D nodes.

See setRenderTranslation.

Syntax

getRenderTranslation()

Returns

For 2D nodes: an array containing int or float for the render translation values for the x and y axes.
For 3D nodes: an array containing int or float for the render translation values for the x, y, and z axes.

Examples

// Finds the Text Block 3D node named Text.
var text = node.lookupNode('Text');
// Gets the render translation values for the x, y, and z axes.
text.getRenderTranslation();
// Gets the render translation value only for the x axis.
text.getRenderTranslation()[0];
// Gets the render translation value only for the z axis.
text.getRenderTranslation()[2];

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Gets the render translation value of the node.
image.getRenderTranslation();
// Gets the render translation value only for the x axis.
image.getRenderTranslation()[0];
// Gets the render translation value only for the y axis.
image.getRenderTranslation()[1];

setRenderTransformationOrigin¶

Sets the render transformation origin of the node.

The values of the render transformation origin are in percent of the node width and height. For example, see how these values define the render transformation origin of a node:

0, 0 the origin is in the top left corner of the node.
0.5, 0.5 the origin is in the center of the node.
1, 1 the origin is in the bottom right corner of the node.
2, 2 the origin is one entire width and height of the node as measured from the bottom right corner of the node. For example, if the node measures 100 by 100 pixels, render transformation origin 2, 2 means that the origin is 100 pixels along both x and y axes from the bottom right corner.
Negative values position the render transformation origin upwards and to the left from the top left corner of the node.

You can use this function only with 2D nodes.

See getRenderTransformationOrigin.

Syntax

setRenderTransformationOrigin(x, y)

Parameters

x

int or float: the render transformation origin of the node on the x axis in percent

y

int or float: the render transformation origin of the node on the y axis in percent

Examples

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Sets the render transformation origin of the node to the
// bottom right corner of the node
image.setRenderTransformationOrigin(1, 1);

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Sets the render transformation origin of the node to the
// center of the node
image.setRenderTransformationOrigin(0.5, 0.5);

getRenderTransformationOrigin¶

Gets the current render transformation origin.

The values of the render transformation origin are in percent of the node width and height. For example, see how these values define the render transformation origin of a node:

0, 0 the origin is in the top left corner of the node.
0.5, 0.5 the origin is in the center of the node.
1, 1 the origin is in the bottom right corner of the node.
2, 2 the origin is one entire width and height of the node as measured from the bottom right corner of the node. For example, if the node measures 100 by 100 pixels, render transformation origin 2, 2 means that the origin is 100 pixels along both x and y axes from the bottom right corner.
Negative values position the render transformation origin upwards and to the left from the top left corner of the node.

You can use this function only with 2D nodes.

See setRenderTransformationOrigin.

Syntax

getRenderTransformationOrigin()

Returns

an array containing int or float for the render transformation origin values for the x and y axes in percent.

Examples

// Finds the Image node named Photo.
var image = node.lookupNode('Photo');
// Gets the render transformation origin value of the node.
image.getRenderTransformationOrigin();
// Gets the render translation value only for the x axis.
image.getRenderTransformationOrigin()[0];
// Gets the render translation value only for the y axis.
image.getRenderTransformationOrigin()[1];

Scripting reference¶

Script Editor¶

General¶

Standard JavaScript API¶

instantiateNode¶

instantiatePrefab¶

lookupNode¶

print¶

Properties¶

setProperty¶

getProperty¶

removeLocalValue¶

Color properties¶

Child nodes¶

addChild¶

getChild¶

getChildCount¶

removeChild¶

removeAllChildren¶

Parent nodes¶

getParent¶

Items¶

addItem¶

getItem¶

getItemCount¶

removeAllItems¶

removeItem¶

Focus¶

getFocusedNode¶

trySetFocus¶

tryMoveFocusForward¶

tryMoveFocusBackward¶

Page and Page Host nodes¶

navigateToThisPage¶

navigateToNextPage¶

navigateToPreviousPage¶

navigateToParentPage¶

State manager¶

goToState¶

goToNextDefinedState¶

goToPreviousDefinedState¶

Layout transformation¶

rotateLayout¶

rotateXLayout¶

rotateYLayout¶

rotateZLayout¶

setLayoutRotation¶

getLayoutRotation¶

extractLayoutTransformEulerX¶

extractLayoutTransformEulerY¶

extractLayoutTransformEulerZ¶

scaleLayout¶

setLayoutScale¶

getLayoutScale¶

translateLayout¶

setLayoutTranslation¶

getLayoutTranslation¶

Render transformation¶

rotateRender¶

rotateXRender¶

rotateYRender¶

rotateZRender¶

setRenderRotation¶

getRenderRotation¶

extractRenderTransformEulerX¶

extractRenderTransformEulerY¶

extractRenderTransformEulerZ¶

scaleRender¶

setRenderScale¶

getRenderScale¶

translateRender¶

setRenderTranslation¶

getRenderTranslation¶

setRenderTransformationOrigin¶

getRenderTransformationOrigin¶

See also¶