{"id":2517,"date":"2025-04-16T04:51:42","date_gmt":"2025-04-16T04:51:42","guid":{"rendered":"https:\/\/webprojects.cloud\/wordpress\/splatco\/?post_type=spl_knowledgebase&#038;p=2517"},"modified":"2025-06-10T11:14:45","modified_gmt":"2025-06-10T11:14:45","slug":"ui-framework","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\/ui-framework\/","title":{"rendered":"UI Framework"},"content":{"rendered":"\n<p>There is no built-in method of managing multiple screens in the HMI series controllers, hence you are free to do it any way you please.&nbsp; However at SPLat we have found a project is far easier to tackle if you have a UI Framework to help control switching between active screens.&nbsp; All the files are here:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-499968f5 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-align-center wp-element-button\" href=\"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-content\/uploads\/2025\/04\/ui_framework.zip\">Download UI Framework<\/a><\/div>\n<\/div>\n\n\n\n<h6 class=\"wp-block-heading\">How it works<\/h6>\n\n\n\n<p>The key to this framework is:<br><strong>1) Screen ID<\/strong><br>Each screen has an ID, ref ui.spt:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">;-- screen ID's (these must match the order in the BRANCH below)<br>UIkScreenIdle           EQU   0<br>UIkScreenMenu           EQU   1<br>;..etc.. (add more ids as required)<\/pre>\n\n\n\n<p><strong>2) Branch Table<\/strong><br>In the same file, the Branch will load the screen:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">   BranchM        UIbScreenID<br>   Target         UIscreenIdle<br>   Target         UIscreenMenu<br>   ;..etc..  (add more targets as required)<\/pre>\n\n\n\n<p><strong>3) Show and Run routines<\/strong><br>We like to make each screen a file.&nbsp; So in each file there are two routines, a &#8220;show&#8221; and a &#8220;run&#8221;, eg, in ui_screen1.spt:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">UIsubScreenShowMenu:               ;show routine (calling this will schedule this screen be shown)<br>   LoadX          UIkScreenMenu<br>   Goto           UIsubSetScreen<br><br>UIscreenMenu:                      ;run routine, entry point when the screen gets (re)displayed<br>   ;.. draw the menu buttons..<br>   ;..then run the \"exit\" loop<br><br>_MNULoop<br>   Pause          20<br>   GoIfST         UIsNewScreen,UIDoNewScreen<br>   Goto           _MNULoop<\/pre>\n\n\n\n<p><strong>4)Screen exit<\/strong><br>Each screen must have a loop that can update items (like the time of day, or a range or pressure or tank level), but the loop MUST check the &#8220;new screen&#8221; semaphore and exit if it&#8217;s set.&nbsp; This is shown above, ref _MNULoop.<\/p>\n\n\n\n<p>In each screen&#8217;s exit loop, you could update items displayed on the screen (like counters or inputs), but you must always check the UIsNewScreen as this is what tells the current screen to exit when a new screen is scheduled for display.<\/p>\n\n\n\n<p>That&#8217;s it.&nbsp; Just 4 key steps.&nbsp; Then when your code or a button calls the &#8220;Show&#8221; routine, like<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">   #HMI ButtonEvent2( x:-8, y:-3, w:8, h:3, t:\"MENU\", ev:UIsubScreenShowMenu )<\/pre>\n\n\n\n<p>The menu will be displayed when the button is pressed.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Files<\/h6>\n\n\n\n<p>We&#8217;ve found it much easier if each screen is a separate .spt file, so either #include or builder will facilitate the use of individual files.&nbsp; In this example, we&#8217;ve used builder, so here&#8217;s an explanation of the files.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>_build.b1d<br>Holds the list of project files, used by SPLat\/PC to compile the project.<\/li>\n\n\n\n<li>common.spt<br>Colour list and other common equates.<\/li>\n\n\n\n<li>hmi430_io.spt<br>I\/O map for the HMI430.<\/li>\n\n\n\n<li>launch.spt<br>Runs at power on and coordinates initialisation of the controller and software tasks.<\/li>\n\n\n\n<li>ui.spt<br>UI Framework<\/li>\n\n\n\n<li>ui_idle.spt<br>&#8220;Idle&#8221; screen (aka main screen)<\/li>\n\n\n\n<li>ui_menu.spt<br>An example menu.<\/li>\n\n\n\n<li>ui_screen1.spt<br>ui_screen2.spt<br>ui_screen3.spt<br>ui_screen4.spt<br>A collection of example screens<\/li>\n\n\n\n<li>ui_utils.spt<br>A collection of UI utilities, especially useful for obtaining extra button information<\/li>\n\n\n\n<li>utils.spt<br>A collection of general purpose utilities<\/li>\n<\/ul>\n\n\n\n<h6 class=\"wp-block-heading\">Extras<\/h6>\n\n\n\n<p>There&#8217;s also a handler for going back to the previous screen, ref UIsubSetScreenPrevious.&nbsp; The framework also supported popup&#8217;s &#8211; if you&#8217;re interested drop us a line.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There is no built-in method of managing multiple screens in the HMI series controllers, hence you are free to do it any way you please.&nbsp;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2505,"menu_order":1,"template":"","class_list":["post-2517","spl_knowledgebase","type-spl_knowledgebase","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI Framework - 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=\"UI Framework - SPLat Controls\" \/>\n<meta property=\"og:description\" content=\"There is no built-in method of managing multiple screens in the HMI series controllers, hence you are free to do it any way you please.&nbsp;...\" \/>\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\/ui-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"SPLat Controls\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-10T11:14:45+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=\"2 minutes\" \/>\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\/ui-framework\/\",\"url\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/ui-framework\/\",\"name\":\"UI Framework - SPLat Controls\",\"isPartOf\":{\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/#website\"},\"datePublished\":\"2025-04-16T04:51:42+00:00\",\"dateModified\":\"2025-06-10T11:14:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/ui-framework\/#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\/ui-framework\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/ui-framework\/#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\":\"UI Framework\"}]},{\"@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":"UI Framework - 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":"UI Framework - SPLat Controls","og_description":"There is no built-in method of managing multiple screens in the HMI series controllers, hence you are free to do it any way you please.&nbsp;...","og_url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/ui-framework\/","og_site_name":"SPLat Controls","article_modified_time":"2025-06-10T11:14:45+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"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\/ui-framework\/","url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/ui-framework\/","name":"UI Framework - SPLat Controls","isPartOf":{"@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/#website"},"datePublished":"2025-04-16T04:51:42+00:00","dateModified":"2025-06-10T11:14:45+00:00","breadcrumb":{"@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/ui-framework\/#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\/ui-framework\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/ui-framework\/#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":"UI Framework"}]},{"@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\/2517","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=2517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}