{"id":52861,"date":"2023-10-24T15:48:36","date_gmt":"2023-10-24T13:48:36","guid":{"rendered":"https:\/\/www.myscada.org\/?post_type=docs&p=52861"},"modified":"2023-10-24T15:48:36","modified_gmt":"2023-10-24T13:48:36","password":"","slug":"view-script-function-animations","status":"publish","type":"docs","link":"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/","title":{"rendered":"View script function – Animations"},"content":{"rendered":"

Set Canvas <\/span><\/h3>\n

(document) background colour<\/p>\n

myscada.setBackgroundColor('green');<\/span><\/pre>\n
Visibility<\/span><\/h3>\n
You can pass either id as a string, or array of ids:<\/p>\n
myscada.setVisibleOn('id'); \/\/pass just id of one element as string<\/span>\n\nmyscada.setVisibleOn(['id1', 'id2', 'id3']); \/\/pass multiple ids at once as an array<\/span>\n\n\n\nmyscada.setVisibleOff('id');<\/span>\n\nmyscada.setVisibleOff(['id1', 'id2', 'id3']);<\/span><\/pre>\n
Opacity<\/span><\/h3>\n
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:<\/p>\n
myscada.setOpacity('id',0.3); \/\/will make object 30 percent transparent.<\/span>\n\nmyscada.setOpacity((['id1', 'id2', 'id3'],0.3);<\/span><\/pre>\n
Fill Color<\/span><\/h3>\n
You can pass either id as a string, or array of ids, second parameter is color value:<\/p>\n
myscada.setFillColor('id', '#ff0000');\u00a0<\/span>\n\nmyscada.setFillColor(['id1', 'id2', 'id3'] , '#ff0000');<\/span><\/pre>\n
Stroke Color<\/span><\/h3>\n
You can pass either id as a string, or array of ids, second parameter is color value:<\/p>\n
myscada.setStrokeColor('id', '#ff0000');\u00a0<\/span>\n\nmyscada.setStrokeColor(['id1', 'id2', 'id3'] , '#ff0000');<\/span><\/pre>\n
Height<\/span><\/h3>\n
You can pass either id as a string, or array of ids, second parameter is new height of object in pixels:<\/p>\n
myscada.setHeight('id',30);<\/span>\n\nmyscada.setHeight(['id1', 'id2', 'id3'],30);<\/span><\/pre>\n
Width<\/span><\/h3>\n
You can pass either id as a string, or array of ids, second parameter is new width of object in pixels:<\/p>\n
myscada.setWidth('id',30);<\/span>\n\nmyscada.setWidth(['id1', 'id2', 'id3'],30);<\/span><\/pre>\n
Scale<\/span><\/h3>\n
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.<\/p>\n
myscada.setScale(type, type,sx,sy);<\/span><\/pre>\n
PARAMETERS:<\/strong><\/span><\/p>\n
Id: you can pass either id as a string, or array of ids<\/p>\n
type:\u00a0 \u00a0 \u00a0x<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 y<\/strong><\/p>\n
cc\u00a0 \u00a0 \u00a0 \u00a0 \u00a0center\u00a0 \u00a0center<\/p>\n
lb\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 left\u00a0 \u00a0 \u00a0 \u00a0bottom<\/p>\n
cb\u00a0 \u00a0 \u00a0 \u00a0 \u00a0center\u00a0 \u00a0bottom<\/p>\n
rb\u00a0 \u00a0 \u00a0 \u00a0 \u00a0right\u00a0 \u00a0 \u00a0bottom<\/p>\n
lt\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 left\u00a0 \u00a0 \u00a0 \u00a0top<\/p>\n
ct\u00a0 \u00a0 \u00a0 \u00a0 \u00a0center\u00a0 \u00a0top<\/p>\n
rt\u00a0 \u00a0 \u00a0 \u00a0 \u00a0right\u00a0 \u00a0 \u00a0 top<\/p>\n
lc\u00a0 \u00a0 \u00a0 \u00a0 \u00a0left\u00a0 \u00a0 \u00a0 \u00a0 center<\/p>\n
rc\u00a0 \u00a0 \u00a0 \u00a0 \u00a0right\u00a0 \u00a0 \u00a0center<\/p>\n
sx: scale along the x axis in percent<\/em><\/p>\n
sy: scale along the y axis in percent<\/em><\/p>\n
myscada.setScale('id', 'cc',30,30); \/\/ will scale object to 30 percent of original size.<\/span><\/pre>\n
Will scale with center as a fixed point (eg. object will shrink and center of object after the shring will stay the same.<\/p>\n
Rotating Elements<\/span><\/h3>\n
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.<\/p>\n
myscada.setRotationAngle('id',90);<\/span>\n\nmyscada.setRotationAngle(['id1', 'id2', 'id3'],90);<\/span><\/pre>\n
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.<\/p>\n
myscada.setRotationAngle('id',90,-30,0); \/\/we are moving center of rotation by 30 pixels to the left<\/span><\/pre>\n
Moving Objects<\/span><\/h3>\n
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.<\/p>\n
myscada.setAbsoluteMove('objectId', 'pathId',50);\u00a0 \/\/if total length of path object is 200 pixels, this will move object to the 1\/4.<\/span>\n\nmyscada.setAbsoluteMove(['objectId1', 'objectId2'], 'pathId',50);\u00a0<\/span><\/pre>\n
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.<\/p>\n
myscada.setRelativeMove('objectId', 'pathId',50);\u00a0 \/\/this will move object to the half of the path (irrespectively of the real length of the path).<\/span><\/pre>\n
Circle Sector<\/strong><\/p>\n
You can create a circular or elliptical sector from circle or ellipse. To do so, use following function<\/p>\n
myscada.circleSector(id, percent, anglefrom, angleto);<\/span><\/pre>\n
Text<\/span><\/h3>\n
For text elements, you can read current value of text element using function<\/p>\n
var text=myscada.getText('id');<\/span><\/pre>\n
Also, you can set new text to an text element using a function<\/p>\n
myscada.setText('id', 'text value');\u00a0 \/\/or<\/span>\n\nmyscada.setText(['id1', 'id2', 'id3'], 'text value');\u00a0<\/span><\/pre>\n
Tooltip<\/span><\/h3>\n
You can also set a tooltip for element or set of elements. To do so, please use following function<\/p>\n
myscada.setTooltip('id', 'text value');\u00a0 \/\/or<\/span>\n\nmyscada.setTooltip(['id1', 'id2', 'id3'], 'text value');<\/span><\/pre>\n","protected":false},"excerpt":{"rendered":"
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[…]<\/a><\/p>\n","protected":false},"author":2555,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[325],"doc_tag":[],"class_list":["post-52861","docs","type-docs","status-publish","hentry","doc_category-mydesigner-v8"],"year_month":"2026-04","word_count":743,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Musilda","author_nicename":"musilda","author_url":"https:\/\/amitomation.cz\/en\/author\/musilda\/"},"doc_category_info":[{"term_name":"AMiTDesigner","term_url":"https:\/\/amitomation.cz\/en\/docs-category\/mydesigner-v8\/"}],"doc_tag_info":[],"yoast_head":"\nView script function - Animations - AMiT Automation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"View script function - Animations - AMiT Automation\" \/>\n<meta property=\"og:description\" content=\"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[...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"AMiT Automation\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/\",\"url\":\"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/\",\"name\":\"View script function - Animations - AMiT Automation\",\"isPartOf\":{\"@id\":\"https:\/\/amitomation.cz\/en\/#website\"},\"datePublished\":\"2023-10-24T13:48:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/amitomation.cz\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation\",\"item\":\"https:\/\/amitomation.cz\/en\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"View script function – Animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/amitomation.cz\/en\/#website\",\"url\":\"https:\/\/amitomation.cz\/en\/\",\"name\":\"AMiT Automation\",\"description\":\"Czech manufacturer of Control Systems and Industrial Automation Electronics\",\"publisher\":{\"@id\":\"https:\/\/amitomation.cz\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/amitomation.cz\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/amitomation.cz\/en\/#organization\",\"name\":\"AMiT, spol. s r.o.\",\"url\":\"https:\/\/amitomation.cz\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/amitomation.cz\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/amitomation.cz\/wp-content\/uploads\/2017\/07\/amit_automation_100x42.gif\",\"contentUrl\":\"https:\/\/amitomation.cz\/wp-content\/uploads\/2017\/07\/amit_automation_100x42.gif\",\"width\":100,\"height\":42,\"caption\":\"AMiT, spol. s r.o.\"},\"image\":{\"@id\":\"https:\/\/amitomation.cz\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/organization\/10939938\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"View script function - Animations - AMiT Automation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/","og_locale":"en_US","og_type":"article","og_title":"View script function - Animations - AMiT Automation","og_description":"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[...]","og_url":"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/","og_site_name":"AMiT Automation","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/","url":"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/","name":"View script function - Animations - AMiT Automation","isPartOf":{"@id":"https:\/\/amitomation.cz\/en\/#website"},"datePublished":"2023-10-24T13:48:36+00:00","breadcrumb":{"@id":"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/amitomation.cz\/en\/documentation\/view-script-function-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/amitomation.cz\/en\/"},{"@type":"ListItem","position":2,"name":"Documentation","item":"https:\/\/amitomation.cz\/en\/documentation\/"},{"@type":"ListItem","position":3,"name":"View script function – Animations"}]},{"@type":"WebSite","@id":"https:\/\/amitomation.cz\/en\/#website","url":"https:\/\/amitomation.cz\/en\/","name":"AMiT Automation","description":"Czech manufacturer of Control Systems and Industrial Automation Electronics","publisher":{"@id":"https:\/\/amitomation.cz\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/amitomation.cz\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/amitomation.cz\/en\/#organization","name":"AMiT, spol. s r.o.","url":"https:\/\/amitomation.cz\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/amitomation.cz\/en\/#\/schema\/logo\/image\/","url":"https:\/\/amitomation.cz\/wp-content\/uploads\/2017\/07\/amit_automation_100x42.gif","contentUrl":"https:\/\/amitomation.cz\/wp-content\/uploads\/2017\/07\/amit_automation_100x42.gif","width":100,"height":42,"caption":"AMiT, spol. s r.o."},"image":{"@id":"https:\/\/amitomation.cz\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/organization\/10939938\/"]}]}},"_links":{"self":[{"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs\/52861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/users\/2555"}],"replies":[{"embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/comments?post=52861"}],"version-history":[{"count":1,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs\/52861\/revisions"}],"predecessor-version":[{"id":53587,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs\/52861\/revisions\/53587"}],"wp:attachment":[{"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/media?parent=52861"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/doc_category?post=52861"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/doc_tag?post=52861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}