{"id":52681,"date":"2023-10-24T15:47:19","date_gmt":"2023-10-24T13:47:19","guid":{"rendered":"https:\/\/www.myscada.org\/?post_type=docs&#038;p=52681"},"modified":"2023-12-20T17:40:59","modified_gmt":"2023-12-20T15:40:59","password":"","slug":"div-type","status":"publish","type":"docs","link":"https:\/\/amitomation.cz\/en\/documentation\/div-type\/","title":{"rendered":"DIV type"},"content":{"rendered":"<p style=\"text-align: justify;\">The <em>Active Area<\/em> element can also work as a placeholder for your web component. In the runtime, <em>mySCADA<\/em> will create an empty DIV component in the location and size of your active area. This DIV component can be manipulated in <em>View Scripts<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.1.jpg\" alt=\"9.5.1\" width=\"300\" height=\"113\" \/><\/p>\n<p style=\"text-align: justify;\">Select <em>HTML -&gt; Div Element<\/em>. Fill in the <em>ID<\/em> of your DIV (active area) component. With this <em>ID<\/em> you can access your component in the <em>View Scripts<\/em> using the function<\/p>\n<pre><span style=\"color: #0084c8;\">document.getElementById (\"ID\")<\/span><\/pre>\n<h3><span style=\"color: #4baddd;\">Example<\/span><\/h3>\n<p style=\"text-align: justify;\">In the following example, we will use the <em>Active Area<\/em> to display a <em>Google<\/em> map. First of all, create a view and insert it into the active area. Then set the type to <em>HTML -&gt; Div Element<\/em> in the <em>Init Value<\/em>. Type in \u2018googlemap\u2019 into the <em>ID type<\/em> field.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.2.jpg\" alt=\"9.5.2\" width=\"600\" height=\"541\" \/><\/p>\n<p style=\"text-align: justify;\">Now all we need to do is to initialize the <em>DIV<\/em> element with <em>Google<\/em> maps. This can be done in <em>View Scripts<\/em>. Open the view script and enter the code for initialization into the <em>Init function<\/em> field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.3.jpg\" alt=\"9.5.3\" width=\"600\" height=\"488\" \/><\/p>\n<p style=\"text-align: justify;\">There are two interesting parts in this code:<\/p>\n<p style=\"text-align: justify;\">1. This part dynamically loads external <em>JavaScript<\/em> from the Internet &#8211; in our case Google map API:<\/p>\n<pre style=\"text-align: justify;\"><span style=\"color: #0084c8;\">var script = document.createElement('script'); \/\/create script element<\/span>\r\n<span style=\"color: #0084c8;\">script.src = \"http:\/\/maps.google.com\/maps\/api\/js?sensor=true&amp;callback=gmap_draw\"; \/\/url to the script<\/span>\r\n<span style=\"color: #0084c8;\">document.head.appendChild(script);\u00a0 \/\/load and append js<\/span><\/pre>\n<p style=\"text-align: justify;\">2. This piece of code will find our DIV element (e.g. Active area) with googlemap id<\/p>\n<pre style=\"text-align: justify;\"><span style=\"color: #0084c8;\">document.getElementById(\"googlemap\")<\/span><\/pre>\n<p style=\"text-align: justify;\">3. And finally the result:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.4.jpg\" alt=\"9.5.4\" width=\"700\" height=\"470\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Active Area element can also work as a placeholder for your web component. In the runtime, mySCADA will create an empty DIV component in the location and size of your active area. This DIV component can be manipulated in View Scripts. Select HTML -&gt; Div Element. Fill in the ID of your DIV (active<a class=\"moretag excerpt orangelink\" href=\"https:\/\/amitomation.cz\/en\/documentation\/div-type\/\">[&#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-52681","docs","type-docs","status-publish","hentry","doc_category-mydesigner-v8"],"year_month":"2026-04","word_count":247,"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>DIV type - 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\/div-type\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DIV type - AMiT Automation\" \/>\n<meta property=\"og:description\" content=\"The Active Area element can also work as a placeholder for your web component. In the runtime, mySCADA will create an empty DIV component in the location and size of your active area. This DIV component can be manipulated in View Scripts. Select HTML -&gt; Div Element. Fill in the ID of your DIV (active[...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/amitomation.cz\/en\/documentation\/div-type\/\" \/>\n<meta property=\"og:site_name\" content=\"AMiT Automation\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-20T15:40:59+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/div-type\/\",\"url\":\"https:\/\/amitomation.cz\/en\/documentation\/div-type\/\",\"name\":\"DIV type - AMiT Automation\",\"isPartOf\":{\"@id\":\"https:\/\/amitomation.cz\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/div-type\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/div-type\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.1.jpg\",\"datePublished\":\"2023-10-24T13:47:19+00:00\",\"dateModified\":\"2023-12-20T15:40:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/div-type\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/amitomation.cz\/en\/documentation\/div-type\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/div-type\/#primaryimage\",\"url\":\"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.1.jpg\",\"contentUrl\":\"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/div-type\/#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\":\"DIV type\"}]},{\"@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":"DIV type - 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\/div-type\/","og_locale":"en_US","og_type":"article","og_title":"DIV type - AMiT Automation","og_description":"The Active Area element can also work as a placeholder for your web component. In the runtime, mySCADA will create an empty DIV component in the location and size of your active area. This DIV component can be manipulated in View Scripts. Select HTML -&gt; Div Element. Fill in the ID of your DIV (active[...]","og_url":"https:\/\/amitomation.cz\/en\/documentation\/div-type\/","og_site_name":"AMiT Automation","article_modified_time":"2023-12-20T15:40:59+00:00","og_image":[{"url":"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.1.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/amitomation.cz\/en\/documentation\/div-type\/","url":"https:\/\/amitomation.cz\/en\/documentation\/div-type\/","name":"DIV type - AMiT Automation","isPartOf":{"@id":"https:\/\/amitomation.cz\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/amitomation.cz\/en\/documentation\/div-type\/#primaryimage"},"image":{"@id":"https:\/\/amitomation.cz\/en\/documentation\/div-type\/#primaryimage"},"thumbnailUrl":"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.1.jpg","datePublished":"2023-10-24T13:47:19+00:00","dateModified":"2023-12-20T15:40:59+00:00","breadcrumb":{"@id":"https:\/\/amitomation.cz\/en\/documentation\/div-type\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/amitomation.cz\/en\/documentation\/div-type\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/amitomation.cz\/en\/documentation\/div-type\/#primaryimage","url":"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.1.jpg","contentUrl":"http:\/\/myscada.org\/downloads\/manuals_image\/img_9.5.1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/amitomation.cz\/en\/documentation\/div-type\/#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":"DIV type"}]},{"@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\/52681","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=52681"}],"version-history":[{"count":2,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs\/52681\/revisions"}],"predecessor-version":[{"id":54775,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs\/52681\/revisions\/54775"}],"wp:attachment":[{"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/media?parent=52681"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/doc_category?post=52681"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/doc_tag?post=52681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}