{"id":3380,"date":"2025-04-18T05:56:22","date_gmt":"2025-04-18T05:56:22","guid":{"rendered":"https:\/\/webprojects.cloud\/wordpress\/splatco\/?post_type=spl_knowledgebase&#038;p=3380"},"modified":"2025-06-10T11:02:30","modified_gmt":"2025-06-10T11:02:30","slug":"simplehmi-specifying-the-size-of-buttons-and-other-items","status":"publish","type":"spl_knowledgebase","link":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/","title":{"rendered":"SimpleHMI: Specifying the size of buttons and other items"},"content":{"rendered":"\n<p>This applies to (at time of writing) buttons and horizontal bar graphs.<\/p>\n\n\n\n<p>The size of buttons can be specified as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A multiple of the default character width and height, need not be an integer.<\/li>\n\n\n\n<li>A decimal fraction of the screen width or height, for example 0.2 for one 5th.<\/li>\n<\/ul>\n\n\n\n<p>In addition to being simple numbers, the width and height coordinates may also be specified in relative or proportional terms. The following table illustrates the possibilities.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>Format (example)<\/th><th>As a height specifier<\/th><th>As a width specifier<\/th><\/tr><tr><td><code>5<\/code><\/td><td>5 character rows in height<\/td><td>5 character rows in width<\/td><\/tr><tr><td><code>0.25<\/code><\/td><td>One quarter of (0.25 times) the screen height. Always calculated as a full number of rows, always rounded down, but forced to be at least 1.<\/td><td>One quarter of (0.25 times) the screen width. Always calculated as a full number of columns, always rounded down, but forced to be at least 1.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This applies to (at time of writing) buttons and horizontal bar graphs. The size of buttons can be specified as: In addition to being simple&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3377,"menu_order":2,"template":"","class_list":["post-3380","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>SimpleHMI: Specifying the size of buttons and other items - 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=\"SimpleHMI: Specifying the size of buttons and other items - SPLat Controls\" \/>\n<meta property=\"og:description\" content=\"This applies to (at time of writing) buttons and horizontal bar graphs. The size of buttons can be specified as: In addition to being simple...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/\" \/>\n<meta property=\"og:site_name\" content=\"SPLat Controls\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-10T11:02:30+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\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/\",\"url\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/\",\"name\":\"SimpleHMI: Specifying the size of buttons and other items - SPLat Controls\",\"isPartOf\":{\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/#website\"},\"datePublished\":\"2025-04-18T05:56:22+00:00\",\"dateModified\":\"2025-06-10T11:02:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorials, application notes and white papers\",\"item\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tutorial: SimpleHMI programming of SPLat controllers\",\"item\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"SimpleHMI: Getting fancy with cursor positioning and screen sizes\",\"item\":\"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"SimpleHMI: Specifying the size of buttons and other items\"}]},{\"@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":"SimpleHMI: Specifying the size of buttons and other items - 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":"SimpleHMI: Specifying the size of buttons and other items - SPLat Controls","og_description":"This applies to (at time of writing) buttons and horizontal bar graphs. The size of buttons can be specified as: In addition to being simple...","og_url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/","og_site_name":"SPLat Controls","article_modified_time":"2025-06-10T11:02:30+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\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/","url":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/","name":"SimpleHMI: Specifying the size of buttons and other items - SPLat Controls","isPartOf":{"@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/#website"},"datePublished":"2025-04-18T05:56:22+00:00","dateModified":"2025-06-10T11:02:30+00:00","breadcrumb":{"@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/simplehmi-specifying-the-size-of-buttons-and-other-items\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webprojects.cloud\/wordpress\/splatco\/"},{"@type":"ListItem","position":2,"name":"Tutorials, application notes and white papers","item":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/"},{"@type":"ListItem","position":3,"name":"Tutorial: SimpleHMI programming of SPLat controllers","item":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/"},{"@type":"ListItem","position":4,"name":"SimpleHMI: Getting fancy with cursor positioning and screen sizes","item":"https:\/\/webprojects.cloud\/wordpress\/splatco\/knowledgebase\/tutorials-application-notes-and-white-papers\/tutorial-simplehmi-programming-of-splat-controllers\/simplehmi-getting-fancy-with-cursor-positioning-and-screen-sizes\/"},{"@type":"ListItem","position":5,"name":"SimpleHMI: Specifying the size of buttons and other items"}]},{"@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\/3380","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\/3377"}],"wp:attachment":[{"href":"https:\/\/webprojects.cloud\/wordpress\/splatco\/wp-json\/wp\/v2\/media?parent=3380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}