View Categories

View script function – Animations

4 min read

Set Canvas

(document) background colour

myscada.setBackgroundColor('green');

Visibility

You can pass either id as a string, or array of ids:

myscada.setVisibleOn('id'); //pass just id of one element as string

myscada.setVisibleOn(['id1', 'id2', 'id3']); //pass multiple ids at once as an array



myscada.setVisibleOff('id');

myscada.setVisibleOff(['id1', 'id2', 'id3']);

Opacity

You can control transparency of any element you wish. To do so, please use provided function. You can pass either id as a string, or array of ids, second parameter is opacity value in the range of 0.0 to 1.0:

myscada.setOpacity('id',0.3); //will make object 30 percent transparent.

myscada.setOpacity((['id1', 'id2', 'id3'],0.3);

Fill Color

You can pass either id as a string, or array of ids, second parameter is color value:

myscada.setFillColor('id', '#ff0000'); 

myscada.setFillColor(['id1', 'id2', 'id3'] , '#ff0000');

Stroke Color

You can pass either id as a string, or array of ids, second parameter is color value:

myscada.setStrokeColor('id', '#ff0000'); 

myscada.setStrokeColor(['id1', 'id2', 'id3'] , '#ff0000');

Height

You can pass either id as a string, or array of ids, second parameter is new height of object in pixels:

myscada.setHeight('id',30);

myscada.setHeight(['id1', 'id2', 'id3'],30);

Width

You can pass either id as a string, or array of ids, second parameter is new width of object in pixels:

myscada.setWidth('id',30);

myscada.setWidth(['id1', 'id2', 'id3'],30);

Scale

You can control the scale of the object. Following function will apply transformation matrix to the provided object. You can pass either id as a string, or array of ids, second parameter is the fixed point for scale, third parameter is scale along x axis, third is scale along the y axis of object in percent.

myscada.setScale(type, type,sx,sy);

PARAMETERS:

Id: you can pass either id as a string, or array of ids

type:     x          y

cc         center   center

lb          left       bottom

cb         center   bottom

rb         right     bottom

lt          left       top

ct         center   top

rt         right      top

lc         left        center

rc         right     center

sx: scale along the x axis in percent

sy: scale along the y axis in percent

myscada.setScale('id', 'cc',30,30); // will scale object to 30 percent of original size.

Will scale with center as a fixed point (eg. object will shrink and center of object after the shring will stay the same.

Rotating Elements

To change rotation angle, use following function. First parameter is id or array of ids, second is angle in degrees. The center of rotation is geometric center of given element.

myscada.setRotationAngle('id',90);

myscada.setRotationAngle(['id1', 'id2', 'id3'],90);

You can also specify the center of rotation, by providing third and fourth parameter. They specify the distance of new center of rotation from geometric center of object. Provided parameters (eg. deltaX and deltaY) are in pixels.

myscada.setRotationAngle('id',90,-30,0); //we are moving center of rotation by 30 pixels to the left

Moving Objects

You can move an object along the path. First parameter is id (or array of ids), second parameter is id of the path along which object should move and last parameter is the value by which object should move. Value is in absolute length in respect to path.

myscada.setAbsoluteMove('objectId', 'pathId',50);  //if total length of path object is 200 pixels, this will move object to the 1/4.

myscada.setAbsoluteMove(['objectId1', 'objectId2'], 'pathId',50); 

Also, you can move objects relatively to the path length. To do so, use function myscada.setRelativeMove. Now you pass the value as relative eg. in the range 0 to 100 as 100 percent.

myscada.setRelativeMove('objectId', 'pathId',50);  //this will move object to the half of the path (irrespectively of the real length of the path).

Circle Sector

You can create a circular or elliptical sector from circle or ellipse. To do so, use following function

myscada.circleSector(id, percent, anglefrom, angleto);

Text

For text elements, you can read current value of text element using function

var text=myscada.getText('id');

Also, you can set new text to an text element using a function

myscada.setText('id', 'text value');  //or

myscada.setText(['id1', 'id2', 'id3'], 'text value'); 

Tooltip

You can also set a tooltip for element or set of elements. To do so, please use following function

myscada.setTooltip('id', 'text value');  //or

myscada.setTooltip(['id1', 'id2', 'id3'], 'text value');