Dali 3D User Interface Engine
script-overview

Scripting Overview

DALi has:

JSON support is built in to DALi.

JavaScript support is via a plugin held in DALi Toolkit, which builds automatically if Google's V8 engine is installed. The V8 version required by DALi can be built and installed using dali-core/scripts/dali_env script.

Files can be loaded inside any DALi application, or from command line using the launcher ( part of dali-demo).

scripting.example hello-world.json hello-world.js

We currently have JSON and JavaScript example files held in dali-demo/resources/scripts

scripting-overview.png

JSON

JSON file contains different sections:

Examples

JSON templates section

“templates”:
{
"name":"users",
"type":"Actor",
"parentOrigin":"TOP_CENTER",
"anchorPoint":"TOP_CENTER",
"size":"{DEFAULT_MENU_USER_SIZE}",
"colorMode":"USE_OWN_COLOR",
"actors":
[
{
"name":"usersBackground",
"type":"ImageActor",
"parentOrigin":"CENTER",
"anchorPoint":"CENTER",
"size":"{DEFAULT_MENU_USER_SIZE}",
"colorMode":"USE_OWN_COLOR",
"image":{ "filename":"{IMAGE_PATH}white-pixel.png" },
"color":"{DEFAULT_MENU_BACKGROUND_COLOR}"
},
{
"name":"icon",
"type":"ImageActor",
"parentOrigin":"TOP_CENTER",
"anchorPoint":"TOP_CENTER",
"position":[0,41,1],
"image":{ "filename":"{IMAGE_PATH}ico_man_nor.png" }
},
]
},

JavaScript example

var builder = new dali.Builder();
builder.loadFromFile( "my-app.json");
var userActorTree = builder.create( { template:"users"} );

C++ example

Builder builder = Builder::New();
std::string jsonData = loadFile("my-app.json");
builder.LoadFromString( jsonData );
Actor userActorTree = builder.Create("users");

JSON styles section

“styles”:
{
“live-tv-focus":
{
"actors":
{
"background":
{
"image":{ "filename":"{IMAGE_PATH}live_tv_background.png" },
"color":"{DEFAULT_MENU_ITEM_COLOR_1}"
},
"icon":
{
"image":{ "filename":"{IMAGE_PATH}icn_live_tv_foc.png" }
},
"label":
{
"colorAlpha":1,
"text":"<font size='20' weight='bold'><b>LIVE</b></font>"
}
}
},
}

JavaScript example

builder.applyStyle( "live-tv-focus", tvIcon );

C++ example

builder.ApplyStyle( "live-tv-focus", tvIcon );

JSON animations section

"animations":
{
"animate-show":
{
"duration":0.5,
"properties":
[
{
"actor":"background",
"property":"positionX",
"value":30,
"alphaFunction":"EASE_IN_OUT"
},
{
"actor":"itemsBackground",
"property":"colorAlpha",
"value":0.85,
"timePeriod": {"delay": 0.25, "duration": 0.25 },
"alphaFunction":"EASE_IN_OUT"
},
{
"actor":"usersBackground",
"property":"colorAlpha",
"value":0.85,
"timePeriod": {"delay": 0.25, "duration": 0.25 },
"alphaFunction":"EASE_IN_OUT"
}
]
},

JavaScript example

// JavaScript
var anim = builder.createAnimation( { animation:"animate-show", actor: myActor } );
// C+++
Animation anim = builder.createAnimation( "animate-show", propertyMap );

JSON stage section

“stage": [{
"name":"simple-table",
"type":"TableView",
"backgroundColor": [0.5,0.5,0,1],
"parentOrigin": "CENTER",
"size":[400,500,1],
"rows": 4,
"columns":4,
"cellPadding": [10, 5],
"layoutAnimationDuration": 0.5,
"layoutRows": { // set the height of the rows
"0": { "policy": "fixed", "value": 40 },
"1": { "policy": "relative", "value": 0.33 },
"2": { "policy": "fixed", "value": 120 }
},
"layoutColumns": { // set the widths of the columns
"1": { "policy": "fixed", "value": 150 },
"2": { "policy": "relative", "value": 0.35 },
"3": { "policy": "relative", "value": 0.15 }
},
"actors": [{
"name":"gallery-1",
"type":"ImageActor",
"image": {
"filename": "{DALI_IMAGE_DIR}gallery-large-1.jpg"
},
"customProperties": { // properties registered dynamically
"cellIndices": [0,0],// property to specify the top-left cell this child occupies
"rowSpan":4, // property to specify how many rows this child occupies, if not set, default value is 1
"columnSpan":1 // property to specify how many columns this child occupies
....

JavaScript example

// add all actors under stage section to the root layer
builder.addActors( dali.stage.getRootLayer() );

C++ example

// add all actors under stage section to the root layer
builder.AddActors( Stage::GetCurrent().GetRootLayer() );

JavaScript

For the JavaScript API please build dali-toolkit with YUIDOC installed. This will generate the documentation. See dali-toolkit/plugins/dali-script-v8/docs/README.txt

To execute JavaScript from C++

script.ExecuteFile( scriptFileName );
Dali Docs Home
Read more about Dali