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');