{"id":2519,"date":"2025-04-16T04:52:10","date_gmt":"2025-04-16T04:52:10","guid":{"rendered":"https:\/\/webprojects.cloud\/wordpress\/splatco\/?post_type=spl_knowledgebase&#038;p=2519"},"modified":"2025-06-10T11:15:03","modified_gmt":"2025-06-10T11:15:03","slug":"colours","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\/colours\/","title":{"rendered":"Colours"},"content":{"rendered":"\n<p>Colour values can be specified in SetColours() and ButtonEvent2() and may be in either:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>RGB format, or<\/li>\n\n\n\n<li>ARGB format<\/li>\n<\/ul>\n\n\n\n<p>Each of A (Alpha), R (Red), G (Green) and B (Blue) values may range from 0 thru 255.&nbsp; While a colour specifier may be written as a decimal number, it&#8217;s far easier to write is as a 2 digit hexadecimal format, so would range from 00 thru FF.<\/p>\n\n\n\n<p>(Note in SPLat a hexadecimal number is prefixed with an apostrophe, &#8216;.)<\/p>\n\n\n\n<p>As an example, say you wanted to use this particular shade of blue:<\/p>\n\n\n\n<p>The RGB hexadecimal code for this is &#8216;1E5AA0, meaning:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Red = &#8216;1E<\/li>\n\n\n\n<li>Green = &#8216;5A<\/li>\n\n\n\n<li>Blue = A0<\/li>\n<\/ul>\n\n\n\n<p>Thus in hexadecimal format it&#8217;s easy to see the value of each colour, but &#8216;1E5AA0 in decimal is 1989280, we&#8217;ve no idea what colour this would be.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Alpha<\/h6>\n\n\n\n<p>Alpha defines how &#8220;solid&#8221; the colour is.&nbsp; All &#8220;RGB&#8221; colours are assumed to be totally solid.&nbsp; However, SimpleHMI allow this to be changed, so button background, or text can be &#8220;ghostly&#8221; and allow some of the background to show through.&nbsp; A good use case would be drawing a disabled button as a faded button.&nbsp; But normal everyday text can be transparent too.<\/p>\n\n\n\n<p>Using the blue above, if we wanted to print a message with 50% transparency, we&#8217;d do this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><br>   ;--core colour names<br>   HUEkWhite            #EQU 'FFFFFF<br>   HUEkBlack            #EQU '000000<br>   HUEkTransparent      #EQU  '00000000<br><br>   ;--application colours<br>   HUEkTitleText        #EQU  HUEkWhite<br>   HUEkTitleBackground  #EQU  '801E5AA0 ;our favourite blue, 50% transparent<br><br>      #HMI  SetColours( f:HUEkTitleText, b:HUEkTitleBackground )<br>      #HMI  SetBounds( x:0, y:0, w:100%, h:1.2 )<br>      #HMI  Cls()<br>      #HMI  Print( \"Hello World\" )<br>      #HMI  SetBounds()<br><br><\/pre>\n\n\n\n<p>In this example we&#8217;ve used good programming practice and given the colours names.&nbsp; As its name implies, HUEkTransparent is completely see through which makes sense as its alpha value is zero.&nbsp; This example will draw a title bar at the top of the screen, making its background 50% transparent, allowing some of a background image to leak through.&nbsp; We&#8217;ve also made sure we clear the bounds once we&#8217;ve finished.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Finding Colour Values<\/h6>\n\n\n\n<p>SPLat\/PC contains a colour picker under the Window menu, which returns the RGB-Hex value on the clipboard, i.e. the hex number without Alpha. You can pre-pend you own Alpha. Here are some representative Alpha values:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Hex<\/th><th>Opacity<\/th><\/tr><tr><td>&#8216;FF<\/td><td>100% (it&#8217;s solid)<\/td><\/tr><tr><td>&#8216;C0<\/td><td>75%<\/td><\/tr><tr><td>&#8217;80<\/td><td>50%<\/td><\/tr><tr><td>&#8217;40<\/td><td>25%<\/td><\/tr><tr><td>&#8217;20<\/td><td>12.5%<\/td><\/tr><tr><td>&#8217;00<\/td><td>0% (it&#8217;s transparent)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h6 class=\"wp-block-heading\">The Nothing Colour<\/h6>\n\n\n\n<p>There&#8217;s a special colour number which is useful when you want to print text without refreshing the background.&nbsp; It means &#8220;do absolutely nothing with the background just print on top of whatever is there now.&nbsp; This differs to &#8220;Transparent&#8221; which actually means &#8220;redraw the area under the text&#8221;.&nbsp; The nothing colour is:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">   HUEkNothing   #EQU '00010101<\/pre>\n\n\n\n<p>We have commonly used this to print a value in a\u00a0<a href=\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/hbar\/\">HBar<\/a><a href=\"https:\/\/www.splatco.com\/skb\/3601.htm\">()<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Colour values can be specified in SetColours() and ButtonEvent2() and may be in either: Each of A (Alpha), R (Red), G (Green) and B (Blue)&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2505,"menu_order":2,"template":"","class_list":["post-2519","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>Colours - 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=\"Colours - SPLat Controls\" \/>\n<meta property=\"og:description\" content=\"Colour values can be specified in SetColours() and ButtonEvent2() and may be in either: Each of A (Alpha), R (Red), G (Green) and B (Blue)...\" \/>\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\/colours\/\" \/>\n<meta property=\"og:site_name\" content=\"SPLat Controls\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-10T11:15:03+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\/colours\/\",\"url\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/colours\/\",\"name\":\"Colours - SPLat Controls\",\"isPartOf\":{\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/#website\"},\"datePublished\":\"2025-04-16T04:52:10+00:00\",\"dateModified\":\"2025-06-10T11:15:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/colours\/#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\/colours\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/colours\/#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\":\"Colours\"}]},{\"@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":"Colours - 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":"Colours - SPLat Controls","og_description":"Colour values can be specified in SetColours() and ButtonEvent2() and may be in either: Each of A (Alpha), R (Red), G (Green) and B (Blue)...","og_url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/colours\/","og_site_name":"SPLat Controls","article_modified_time":"2025-06-10T11:15:03+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\/colours\/","url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/colours\/","name":"Colours - SPLat Controls","isPartOf":{"@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/#website"},"datePublished":"2025-04-16T04:52:10+00:00","dateModified":"2025-06-10T11:15:03+00:00","breadcrumb":{"@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/colours\/#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\/colours\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/programming-reference\/instructions-arranged-by-function\/hash-commands-and-functions\/hmi-controller-instructions\/colours\/#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":"Colours"}]},{"@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\/2519","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=2519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}