Scripting and Syntax

This page covers DGLux5 script.

Topics on this page are:

• When to use DGLux5 script
• The differences between DGLux5 script and JavaScript
• How to access the page model
• How to use script for debugging
• How to reuse script, or how to call a script function from another block

This page also contains a reference of some available operators, formats, and functions in the following categories:

• String, number, logical, and bit-wise operators
• String usage and functions
• Number formats, number functions, math functions, and constants
• DateTime formats and functions
• List functions
• JSON functions
• XML functions
• DGLux5 table functions

Finally, this page contains examples for:

• Custom latitude and longitude operations
• Custom easing functions

See also:

• Custom JS Components
• Using Custom div Elements

DGLux5 features a visual programming environment, the dataflow. However, in some situations, script is necessary or is more efficient than the dataflow.

You can use script in these dataflow blocks:

• Script
• JavaScript
• Filter (condition property)
• Column Mapping (from n property)

You can also use the page model syntax, which is described below, in binding paths. See Bindings.

Although DGLux5 script has some differences from JavaScript, JavaScript can be used in DGLux5 to accomplish many custom calculation tasks. The Internet is a good resource for finding JavaScript functions and excerpts.

Read this section if you are already familiar with JavaScript, ActionScript, or another ECMA262-based scripting language.

The differences between JavaScript and DGLux5 script are as follows:

• In DGLux5 script, list does not support dynamic properties. For example, the following code does not work in DGLux5:

  list = [];
  list.name = 'mylist'; // Error: this does not work in DGLux5.

• DGLux5 script uses the DateTime type instead of the JavaScript Date type. This is because January in DateTime corresponds to one, while January in Date corresponds to zero. For example, the following code demonstrates DateTime functioning correctly and Date functioning incorrectly in DGLux5.

  //Returns 2014-01-01.
  d = new DateTime(2014,1,1); 
   
  //Does not work in DGLux5. In JavaScript this would mean 2014-02-01.
  incorrect = new Date(2014,1,1); 

The script execution context and the block location both have an important relationship with the DGLux5 page model.

Use the at sign (@) to access the virtual model of the page and interact with other elements in the model. For example:

• @ refers to the current block.
• @parent refers to the logical parent of the current block or element. You can use this string more than once to refer to further ancestors, such as @parent.@parent.@parent.
• @params refers to the parameters of the symbol being referred to. For example, when used inside a symbol, in the symbol's root dataflow model, @parent.@params refers to the parameters of this symbol.
• @stage refers to the first immediate ancestor stage of the the current block or element.
  • If used in a page, @stage refers to the root for the page.
  • If used in a symbol, @stage refers to the root of the symbol.
• @lib refers to the root of the Project Dataflow.
• In a binding, @parent.@table.0_v1 refers to the cell in row zero, column v1, for a table that shares the same parent as the current block.
• @<pageModelName> refers to the page model name of the component at the specified path. For example, to refer to the width property of a shape component that is in a group, you might use @stage.@group1.@shape1.width.

To view the page model name of any property and the property's parent:

1. Hover over the property until a blue dot appears.

2. Hold Option and right-click the blue dot.

   A tooltip displays all of the following:

   • Parent element type and property name
   • Parent element name in page model syntax and property name
   • Property name

   The following images demonstrate this tooltip.

   

   

To change an element name in the page model syntax:

1. Double-click the element name in the Outline or the dataflow block header.
2. Type the new name.
3. Press Command + Enter on Mac or Ctrl + Enter on Windows.

If you press only Enter, the name is changed in the DGLux5 user interface but not in the page model.

The following example demonstrates how to use script to access and set a value in the page model.

//Sets the "a" property of the current block to 
//the value of the string block located on 
//the parent dataflow.
@.a = @parent.string.value;

Use = to set a runtime value for an object property, and use ~= to set a value that will be serialized as part of a subsequent save. The following examples demonstrate how to set both kinds of values.

//Sets the runtime "value" property of the 
//parent object's "string" block to 
//"stringValue".
@parent.string.value = "stringValue";
 
//Sets the serialized "value" property of the 
//parent object's "string" block to 
//"stringValue".
@parent.string.value ~= "stringValue";

To create a binding via script, use <targetPropertyPath> ~= ['<sourcePropertyPath>']. The following examples demonstrate how to create bindings via script.

//Creates a serialized binding of "height" to
//"width" of the parent component.
@parent.width ~= ['height'];

//Another binding example.
@parent.string.value ~= ['@parent.input.value'];

The following image shows the dataflow model before invoking a script. This script sets values, creates a binding, and returns an output value.

The following is the script in the example.

@parent.stringA.value = "abc123";
@parent.stringB.value = "def456";
@parent.stringC.value ~= ['@parent.stringB.value'];
@parent.stringD.value ~= @parent.stringA.value + "_" + @parent.stringB.value;
return "all done";

The following image shows the same dataflow model after invoking the script.

You can use while loops to traverse the page model. The following example shows how to search the parent object, then the parent's parent, and so on, until a symbol is found.

searchObject = @parent;
while(searchObject != null && typeof(searchObject) != 'symbol'){
  searchObject = searchObject.@parent;
}
 
if (searchObject != null){
  // set the value
}

The following examples print script output to the block's print property or to the browser console.

To print the results of an expression to the current block's print property:

//Prints 2 + 2 = 4
print("2 + 2 = ", 2 + 2);

To print results of expressions to the browser console:

/*Prints the following output to the browser's console:
1
2
3
4
5
*/
 
json = JSON.parse("[1,2,3,4,5]");
for (var i = 0; i < json.length; i++) {
    printConsole(json[i]);
}

You can refer to a script from within another Script, Column Mapping, or Filter block. When you do this, you can use $params, which is a special list that is only available when a script is called as a function from another script.

The following example creates a script and then calls it from a Script block and a Column Mapping block:

1. Create a Script block, and change its page model name to multiplyAndAdd.

2. For the script property of multiplyAndAdd, add a script that multiplies two $params values and adds some other variable to the product:

   return $params[0] * $params[1] + @.a;

   For this example, you must also add an a property to multiplyAndAdd by clicking the plus sign, and set the value of a as 1.

3. Add a second Script block, and change its name to callFunction.

4. For the script property of callFunction, add a script that calls multiplyAndAdd and provides some parameter values:

   return @parent.multiplyAndAdd(2,3); 

   In this example, callFunction returns 7, as shown in the following image.

   

5. Add a Table block and Column Mapping block.
6. Bind the Table block value to the Column Mapping block input.
7. For name 0, enter v4.

8. For from 0, enter script that calls multiplyAndAdd:

   =@parent.multiplyAndAdd(v1,v2)

   In each row, the new column contains the product of v1 and v2 in this row, plus the value of @.a in multiplyAndAdd. The following image demonstrates the input and output tables.

   

This section demonstrates some operators, formats, and functions that can be used in DGLux5. For example, the Column Mapping block, Filter block, and Date Time Operations blocks use some of these items.

These operators can be used in DGLux5.

Logical operators appear in expressions that can be evaluated to TRUE or FALSE.

You can use the following bitwise operators:

The following example demonstrates string literals in DGLux5:

str1 = 'Single quotes';
str2 = "Double quotes";
str3 = 'Double quotes in "single" quotes';
str4 = "Single quotes in 'double' quotes";
str5 = "escape quote \"";

In strings, you can use a backslash (\) to escape the following reserved characters:

• Single quotation mark (')
• Double quotation mark (")
• Backslash (\)

For example, the following code sets the string block's value to C:\:

@parent.string.value = "C:\\"; 

In strings, you can use the following special character sequences to create these effects:

• \n creates a new line.
• \r creates a carriage return.
• \t creates a tab.
• \uXXXX uses a Unicode code point.

The following functions perform an operation on an input string.

String(123);

String(27,16);

"acbd".length;

"abc".charAt(1);

"abc".charCodeAt(1);

"abc".indexOf("bc");

"abb".lastIndexOf("b");

"1,2,3".split(",");

[1,2,3].join("/");

"abcd".subStr(1,2);

"abcd".subString(1,2);

"DabcG DdefG".replace(/D(\w+)/g, "d");

"1#2#3".replaceAll("#","_");

"DG".toLowerCase();

"dg".toUpperCase();

"a b".encodeUriComponent();

"a%20b".decodeUriComponent();

"a%20b=1&c=d".splitQuery();

"abc123".encodeBase64();

"YWJjMTQ0".decodeBase64();

"abc123".md5();

"abc123".sha1();

"abc123".sha256();

You can specify a number format using the following subset of ICU formatting patterns:

The following are examples of date and time strings that have been formatted using date and time formatting strings:

• 2012-02-27 13:27:00
• 2012-02-27 13:27:00.123456z
• 20120227 13:27:00
• 20120227T132700
• 20120227
• +20120227
• 2012-02-27T14Z
• 2012-02-27T14+00:00

The following table lists date and time pattern components. These components can be included within a date and time format string.

The following table lists ICU date and time skeleton components. These components can be combined to create an ICU dateFormat skeleton, which can format DateTime values.

The following example quickly finds the number of days in the previous month.

dt = new DateTime();
lastMonth = new DateTime(dt.year,dt.month, 0, dt.hour, dt.minute, dt.second, dt.millisecond);
print (lastMonth.day);

The following example returns the most recent Sunday before the current date.

dt = new DateTime(); 
lastSunday = new DateTime(dt.year, dt.month, dt.day - dt.weekday);

The following example uses a for loop to print the id values for each item in a JSON object and to print rows of dashes to represent null items.

json = {"menu": {
    "header": "SVG Viewer",
    "items": [
        {"id": "Open"},
        {"id": "OpenNew", "label": "Open New"},
        null,
        {"id": "ZoomIn", "label": "Zoom In"},
        {"id": "ZoomOut", "label": "Zoom Out"},
        {"id": "OriginalView", "label": "Original View"},
        null,
        {"id": "Quality"},
        {"id": "Pause"},
        {"id": "Mute"},
        null,
        {"id": "Find", "label": "Find..."},
        {"id": "FindAgain", "label": "Find Again"},
        {"id": "Copy"},
        {"id": "CopyAgain", "label": "Copy Again"},
        {"id": "CopySVG", "label": "Copy SVG"},
        {"id": "ViewSVG", "label": "View SVG"},
        {"id": "ViewSource", "label": "View Source"},
        {"id": "SaveAs", "label": "Save As"},
        null,
        {"id": "Help"},
        {"id": "About", "label": "About SVG Viewer..."}
    ]
}};
 
print(json.menu.header);
 
for (var i = 0; i < json.menu.items.length; i++) {
    if (json.menu.items[i] == null)
    {
        print("----");
    }
    else
    {
        print(json.menu.items[i].id);
    }
}

The output for this example is the following:

SVG ViewerOpenOpenNew----ZoomInZoomOutOriginalView----QualityPauseMute----FindFindAgainCopyCopyAgainCopySVGViewSVGViewSourceSaveAs----HelpAbout

This section contains some custom functions that can be used in script.

The following example contains some custom latitude and longitude functions.

function toRad(num) {return num * Math.PI / 180;}
function toDeg(num) {return num * 180 / Math.PI;}
 
function calcDistance(lat1, lon1, lat2, lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = (lat2 - lat1) * Math.PI / 180;  // deg2rad below
  var dLon = (lon2 - lon1) * Math.PI / 180;
  var a = 
     0.5 - Math.cos(dLat)/2 + 
     Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
     (1 - Math.cos(dLon))/2;
 
  return R * 2 * Math.asin(Math.sqrt(a));
}
 
function calcBearing (lat1,lng1,lat2,lng2) 
{
    var dLon = (lng2-lng1);
    var y = Math.sin(dLon) * Math.cos(lat2);
    var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
    var brng = toDeg(Math.atan2(y, x));
    return 360 - ((brng + 360) % 360);
}
 
function calcSpeed(lat1,lon1,lat2,lon2,time1,time2)
{
	var d = calcDistance(lat1,lon1,lat2,lon2);
	var time = dateParse(time2)-dateParse(time1);
	return d/(time/1000/60/60);
}

The following example contains some custom easing functions.

easing =
{
	// t: current time, b: begInnIng value, c: change In value, d: duration
 
	swing: function (t, b, c, d) {
		return easing[easeOutQuad](t, b, c, d);
	},
	easeInQuad: function (t, b, c, d) {
		return c*(t/=d)*t + b;
	},
	easeOutQuad: function (t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	},
	easeInOutQuad: function (t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},
	easeInCubic: function (t, b, c, d) {
		return c*(t/=d)*t*t + b;
	},
	easeOutCubic: function (t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	},
	easeInOutCubic: function (t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	},
	easeInQuart: function (t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	},
	easeOutQuart: function (t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
	easeInOutQuart: function (t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},
	easeInQuint: function (t, b, c, d) {
		return c*(t/=d)*t*t*t*t + b;
	},
	easeOutQuint: function (t, b, c, d) {
		return c*((t=t/d-1)*t*t*t*t + 1) + b;
	},
	easeInOutQuint: function (t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
		return c/2*((t-=2)*t*t*t*t + 2) + b;
	},
	easeInSine: function (t, b, c, d) {
		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	},
	easeOutSine: function (t, b, c, d) {
		return c * Math.sin(t/d * (Math.PI/2)) + b;
	},
	easeInOutSine: function (t, b, c, d) {
		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	},
	easeInExpo: function (t, b, c, d) {
		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
	},
	easeOutExpo: function (t, b, c, d) {
		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	},
	easeInOutExpo: function (t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	},
	easeInCirc: function (t, b, c, d) {
		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
	},
	easeOutCirc: function (t, b, c, d) {
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	},
	easeInOutCirc: function (t, b, c, d) {
		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	},
	easeInElastic: function (t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	},
	easeOutElastic: function (t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	},
	easeInOutElastic: function (t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
	},
	easeInBack: function (t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*(t/=d)*t*((s+1)*t - s) + b;
	},
	easeOutBack: function (t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	},
	easeInOutBack: function (t, b, c, d, s) {
		if (s == undefined) s = 1.70158; 
		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	},
	easeInBounce: function (t, b, c, d) {
		return c - easing.easeOutBounce (d-t, 0, c, d) + b;
	},
	easeOutBounce: function (t, b, c, d) {
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
	},
	easeInOutBounce: function (t, b, c, d) {
		if (t < d/2) return easing.easeInBounce (t*2, 0, c, d) * .5 + b;
		return easing.easeOutBounce (t*2-d, 0, c, d) * .5 + c*.5 + b;
	}
};
return easing[@.a](0+@.b,0,1,1,0+@.e)*@.c+@.d;