{"id":2531,"date":"2025-04-16T05:10:58","date_gmt":"2025-04-16T05:10:58","guid":{"rendered":"https:\/\/webprojects.cloud\/wordpress\/splatco\/?post_type=spl_knowledgebase&p=2531"},"modified":"2025-06-10T11:16:06","modified_gmt":"2025-06-10T11:16:06","slug":"z-index","status":"publish","type":"spl_knowledgebase","link":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/","title":{"rendered":"Z-Index"},"content":{"rendered":"\n

The HMI430 supports z-indexnig, which means it allows things to be drawn on top of or under each other.  In its simplest form, it means you can have a background image and draw text and buttons on top.<\/p>\n\n\n\n

In the HMI430, z-ordering is organised as per this table, working from top-most to bottom-most:<\/p>\n\n\n\n

z-order<\/th>type<\/th>item<\/th><\/tr>
254<\/td>–<\/td>Top-most<\/td><\/tr>
128<\/td>fixed<\/td>Text, HBar   <\/td><\/tr>
96<\/td>moveable<\/td>Button   <\/td><\/tr>
64<\/td>moveable<\/td>Image (not background image)   <\/td><\/tr>
32<\/td>fixed<\/td>Background image<\/td><\/tr>
0<\/td>–<\/td>Bottom-most<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

As the table shows, text and hbar are all drawn on z-order 128 and can’t be changed.  So #HMI Print() will always print with a z-order of 128 and by default this means it will print on top of buttons and images.  Note text is currently not managed, so pressing the buttons or moving the image will erase any text on top.<\/p>\n\n\n\n

The background image is set via #HMI Reset() and is also at a fixed z-order.  If your background image has transparency, then you may draw images “under” it.  This isn’t a typical thing to do.<\/p>\n\n\n\n

Buttons and images may be drawn at any z-order.  If you don’t specify the z-order, then the default will be applied.  Note, you can change the z-order after you’ve created the button or image and it will move to the new level.<\/p>\n","protected":false},"excerpt":{"rendered":"

The HMI430 supports z-indexnig, which means it allows things to be drawn on top of or under each other.  In its simplest form, it means…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2505,"menu_order":6,"template":"","class_list":["post-2531","spl_knowledgebase","type-spl_knowledgebase","status-publish","hentry"],"acf":[],"yoast_head":"\nZ-Index - SPLat Controls<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Z-Index - SPLat Controls\" \/>\n<meta property=\"og:description\" content=\"The HMI430 supports z-indexnig, which means it allows things to be drawn on top of or under each other.  In its simplest form, it means...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/\" \/>\n<meta property=\"og:site_name\" content=\"SPLat Controls\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-10T11:16:06+00:00\" \/>\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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/\",\"url\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/\",\"name\":\"Z-Index - SPLat Controls\",\"isPartOf\":{\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/#website\"},\"datePublished\":\"2025-04-16T05:10:58+00:00\",\"dateModified\":\"2025-06-10T11:16:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Programming reference\",\"item\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Instructions arranged by function\",\"item\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"# Hash commands and functions\",\"item\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"# HMI Controller Instructions\",\"item\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"Z-Index\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/#website\",\"url\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/\",\"name\":\"SPLat Controls\",\"description\":\"OEM Embedded Machine Controllers\",\"publisher\":{\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/#organization\",\"name\":\"SPLat Controls\",\"url\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-content\/uploads\/2024\/10\/logo.svg\",\"contentUrl\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-content\/uploads\/2024\/10\/logo.svg\",\"caption\":\"SPLat Controls\"},\"image\":{\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Z-Index - SPLat Controls","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Z-Index - SPLat Controls","og_description":"The HMI430 supports z-indexnig, which means it allows things to be drawn on top of or under each other.  In its simplest form, it means...","og_url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/","og_site_name":"SPLat Controls","article_modified_time":"2025-06-10T11:16:06+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/","url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/","name":"Z-Index - SPLat Controls","isPartOf":{"@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/#website"},"datePublished":"2025-04-16T05:10:58+00:00","dateModified":"2025-06-10T11:16:06+00:00","breadcrumb":{"@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/z-index\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webprojects.cloud\/wordpress\/splatco\/"},{"@type":"ListItem","position":2,"name":"Programming reference","item":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/"},{"@type":"ListItem","position":3,"name":"Instructions arranged by function","item":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/"},{"@type":"ListItem","position":4,"name":"# Hash commands and functions","item":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/"},{"@type":"ListItem","position":5,"name":"# HMI Controller Instructions","item":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/"},{"@type":"ListItem","position":6,"name":"Z-Index"}]},{"@type":"WebSite","@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/#website","url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/","name":"SPLat Controls","description":"OEM Embedded Machine Controllers","publisher":{"@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webprojects.cloud\/wordpress\/splatco\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/#organization","name":"SPLat Controls","url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/#\/schema\/logo\/image\/","url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-content\/uploads\/2024\/10\/logo.svg","contentUrl":"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-content\/uploads\/2024\/10\/logo.svg","caption":"SPLat Controls"},"image":{"@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-json\/wp\/v2\/spl_knowledgebase\/2531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-json\/wp\/v2\/spl_knowledgebase"}],"about":[{"href":"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-json\/wp\/v2\/types\/spl_knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-json\/wp\/v2\/users\/1"}],"up":[{"embeddable":true,"href":"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-json\/wp\/v2\/spl_knowledgebase\/2505"}],"wp:attachment":[{"href":"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-json\/wp\/v2\/media?parent=2531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}