{"id":52652,"date":"2023-10-24T15:47:11","date_gmt":"2023-10-24T13:47:11","guid":{"rendered":"https:\/\/www.myscada.org\/?post_type=docs&#038;p=52652"},"modified":"2023-10-24T15:47:11","modified_gmt":"2023-10-24T13:47:11","password":"","slug":"on-touch-actions","status":"publish","type":"docs","link":"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/","title":{"rendered":"On touch actions"},"content":{"rendered":"<p style=\"text-align: justify;\">On Touch Actions are used to modify the visual appearance of your component when a user touches it. Usage is very simple: when a user touches the component, the component can change its color or text to denote the action for the end user. When the user releases their touch, the component will return to its default look.<\/p>\n<p style=\"text-align: justify;\">You can modify visibility, fill, and stroke color of any object in your component. Select the object you would like to modify based on user touch and, in Properties, fill in the On Touch section:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.1.jpg\" alt=\"7.6.1\" width=\"300\" height=\"94\" \/><\/p>\n<h3><span style=\"color: #4baddd;\">Example:<\/span><\/h3>\n<p style=\"text-align: justify;\">We will create a simple button that will change the background color on touch.<\/p>\n<ul style=\"list-style-type: square;\">\n<li style=\"text-align: justify;\">Create a new component with a rectangle inside<\/li>\n<li style=\"text-align: justify;\">Enter in the text \u201cPress me.\u201d<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.2.jpg\" alt=\"7.6.2\" width=\"300\" height=\"193\" \/><\/p>\n<ul style=\"list-style-type: square;\">\n<li style=\"text-align: justify;\">Click on the rectangle and in Properties set the color to red in On Touch -&gt; Fill<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.3.jpg\" alt=\"7.6.3\" width=\"400\" height=\"175\" \/><\/p>\n<ul style=\"list-style-type: square;\">\n<li style=\"text-align: justify;\"><span style=\"text-align: justify;\">When you set the fill color, a new dialog is presented:<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.4.jpg\" alt=\"7.6.4\" width=\"300\" height=\"175\" \/><\/p>\n<ul style=\"list-style-type: square;\">\n<li style=\"text-align: justify;\">Save the component and insert it into a view<\/li>\n<li style=\"text-align: justify;\">Now, you can test your component.<\/li>\n<li style=\"text-align: justify;\">When a button is not pressed, it looks like this:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.5.jpg\" alt=\"7.6.5\" width=\"200\" height=\"53\" \/><\/p>\n<ul style=\"list-style-type: square;\">\n<li style=\"text-align: justify;\">When a user is pressing the button, it looks like this:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.6.jpg\" alt=\"7.6.6\" width=\"200\" height=\"54\" \/><\/p>\n<h3><span style=\"color: #4baddd;\">Creating Complete Component:<\/span><\/h3>\n<p style=\"text-align: justify;\">In the following example, we will create a simple slide bar showing the variable progress and its Min and Max values. Create a new component and draw a rectangle, as seen in the picture below. Copy the selected rectangle and apply <em>Paste on same location<\/em> to it. Set the Fill property to \u201cnone\u201d then put the element in the background with the function\u00a0<em>Lower to the background. <\/em>We have now created a frame of the scale.<\/p>\n<p style=\"text-align: justify;\">Now create 3 text fields; your component will look like this:<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.7.jpg\" alt=\"7.6.7\" width=\"300\" height=\"32\" \/><\/p>\n<p style=\"text-align: justify;\">Now fill in the Component Variables as shown in the picture below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.8.jpg\" alt=\"7.6.8\" width=\"600\" height=\"298\" \/><\/p>\n<p style=\"text-align: justify;\">As you can see, we have created 3 local variables. For the tag value, you have used a variable tag; for specifying the minimum and maximum values, you have used the min and max variables.<\/p>\n<p style=\"text-align: justify;\">You can make indicator out of the rectangle by resizing it according to the value read from the PLC; set the <em>Scale animation <\/em>as shown in the following picture:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.9.jpg\" alt=\"7.6.9\" width=\"600\" height=\"415\" \/><\/p>\n<p style=\"text-align: justify;\">We also want to show the actual value in the middle of the slide bar. Click on the text field in the middle of the rectangle, select the Anim tab in the <em>Properties window<\/em> and click on the Tag (Address) field in the <em>Show Value <\/em>section. Then, fill in the Tag field with \u201ctag,\u201d which corresponds to our local variable name.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.10.jpg\" alt=\"7.6.10\" width=\"600\" height=\"209\" \/><\/p>\n<p style=\"text-align: justify;\">As you can see, we have used one of our local variables. You can use the same variable (especially the tag type) for multiple animations\/effects to achieve a better effect. We will also show the <em>Min<\/em> and <em>Max<\/em> limits of our tag. Click on the right text field, then select the Rep. tab from the <em>Properties window<\/em> and set <em>\u201cmax\u201d<\/em> for <em>Text<\/em> in the <em>Replacements.<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.11.jpg\" alt=\"7.6.11\" width=\"600\" height=\"416\" \/><\/p>\n<p style=\"text-align: justify;\">Now do the same for the other text field but place the <em>min<\/em> variable there.\u00a0The final component should look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.12.jpg\" alt=\"7.6.12\" width=\"300\" height=\"32\" \/><\/p>\n<p style=\"text-align: justify;\">Save the component and test its functionality.<\/p>\n<h3><span style=\"color: #4baddd;\">Testing Component<\/span><\/h3>\n<p style=\"text-align: justify;\">Create a new view and open it, then navigate to the <em>Library<\/em>. Select your component and press the <em>Insert<\/em> button.<\/p>\n<p style=\"text-align: justify;\">Now click on the component and look at the <em>Properties window:<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.13.jpg\" alt=\"7.6.13\" width=\"600\" height=\"65\" \/><\/p>\n<p style=\"text-align: justify;\">In the <em>Component<\/em> section, you can see all the local variables that you have defined.<\/p>\n<p style=\"text-align: justify;\">Set the <strong>Tag (address)<\/strong> and the <strong>Minimum<\/strong> and <strong>Maximum<\/strong> values:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.14.jpg\" alt=\"7.6.14\" width=\"293\" height=\"75\" \/><\/p>\n<p style=\"text-align: justify;\">Now, save the view and send to a supported device; the screen should look as follows:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.15.jpg\" alt=\"7.6.15\" width=\"500\" height=\"160\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>On Touch Actions are used to modify the visual appearance of your component when a user touches it. Usage is very simple: when a user touches the component, the component can change its color or text to denote the action for the end user. When the user releases their touch, the component will return to<a class=\"moretag excerpt orangelink\" href=\"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/\">[&#8230;]<\/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-52652","docs","type-docs","status-publish","hentry","doc_category-mydesigner-v8"],"year_month":"2026-04","word_count":581,"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":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>On touch actions - 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\/on-touch-actions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"On touch actions - AMiT Automation\" \/>\n<meta property=\"og:description\" content=\"On Touch Actions are used to modify the visual appearance of your component when a user touches it. Usage is very simple: when a user touches the component, the component can change its color or text to denote the action for the end user. When the user releases their touch, the component will return to[...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/\" \/>\n<meta property=\"og:site_name\" content=\"AMiT Automation\" \/>\n<meta property=\"og:image\" content=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.1.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/\",\"url\":\"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/\",\"name\":\"On touch actions - AMiT Automation\",\"isPartOf\":{\"@id\":\"https:\/\/amitomation.cz\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.1.jpg\",\"datePublished\":\"2023-10-24T13:47:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/#primaryimage\",\"url\":\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.1.jpg\",\"contentUrl\":\"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/#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\":\"On touch actions\"}]},{\"@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":"On touch actions - 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\/on-touch-actions\/","og_locale":"en_US","og_type":"article","og_title":"On touch actions - AMiT Automation","og_description":"On Touch Actions are used to modify the visual appearance of your component when a user touches it. Usage is very simple: when a user touches the component, the component can change its color or text to denote the action for the end user. When the user releases their touch, the component will return to[...]","og_url":"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/","og_site_name":"AMiT Automation","og_image":[{"url":"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.1.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/","url":"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/","name":"On touch actions - AMiT Automation","isPartOf":{"@id":"https:\/\/amitomation.cz\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/#primaryimage"},"image":{"@id":"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/#primaryimage"},"thumbnailUrl":"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.1.jpg","datePublished":"2023-10-24T13:47:11+00:00","breadcrumb":{"@id":"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/#primaryimage","url":"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.1.jpg","contentUrl":"http:\/\/myscada.org\/downloads\/manuals_image\/img_7.6.1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/amitomation.cz\/en\/documentation\/on-touch-actions\/#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":"On touch actions"}]},{"@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\/52652","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=52652"}],"version-history":[{"count":1,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs\/52652\/revisions"}],"predecessor-version":[{"id":53682,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs\/52652\/revisions\/53682"}],"wp:attachment":[{"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/media?parent=52652"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/doc_category?post=52652"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/doc_tag?post=52652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}