{"id":2119,"date":"2008-02-22T09:27:53","date_gmt":"2008-02-22T14:27:53","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/"},"modified":"2016-05-10T15:04:29","modified_gmt":"2016-05-10T19:04:29","slug":"gui-layout-part-2","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/","title":{"rendered":"GUI Layout (Part 2)"},"content":{"rendered":"<div class=\"content\">\r\n\r\nThis is Part 2 of 3 Pick of the Week entries on GUIs, written by guest blogger Jiro\r\n\r\nIn <a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/\">Part 1<\/a>, I talked about how I use the <tt>ResizeFcn<\/tt> property of the figure to adjust the layout of my UI controls. Well, I'm always looking for easier ways to do layouts.\r\n\r\nJerome Briot wrote these utility tools <a title=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/loadFile.do?objectId=13927&amp;objectType=file (link no longer works)\">SETPOS and GETPOS<\/a> that give you more flexibility in defining the positions of objects. With these, you can provide individual units for the\r\nfour numbers that define the <tt>Position<\/tt> property:\r\n<pre> % Use \"normalized\" for X and Width.\r\n % Use \"pixels\" for Y and Height.\r\n setpos(h,'0.25nz 100px 0.5nz 300px');<\/pre>\r\nThere are other nice features, such as incrementing by certain values:\r\n<pre> % Increase the width by 200 pixels\r\n setpos(h,'# # +200px #');<\/pre>\r\nOr positioning objects relative to other objects:\r\n<pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid #c8c8c8;\">  setpos(figure, <span style=\"color: #a020f0;\">'# # 400px 300px'<\/span>);\r\n  u(1) = uicontrol(<span style=\"color: #a020f0;\">'string'<\/span>, <span style=\"color: #a020f0;\">'(0,0) gcf'<\/span>);\r\n  setpos(u(1), <span style=\"color: #a020f0;\">'0 0 60px 40px'<\/span>)\r\n  u(2) = uicontrol(<span style=\"color: #a020f0;\">'string'<\/span>, <span style=\"color: #a020f0;\">'(0,0) gca'<\/span>);\r\n  setpos(u(2), <span style=\"color: #a020f0;\">'0 0 60px 40px'<\/span>, gca)<\/pre>\r\n<img decoding=\"async\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/gui_layout2_01.png\" alt=\"\" hspace=\"5\" vspace=\"5\" \/>\r\n\r\nThis function will allow me to do precise positioning of UIs with fewer lines of code. Thanks Jerome! Next week, I will introduce\r\na different tool that assists in the overal GUI design. Stay tuned for Part 3...\r\n\r\n<b>Comments?<\/b>\r\n\r\nTell us what you think about when you are laying out your GUI components. Is it readability? Or is it the level of informational\r\ncontent?\r\n\r\n<i>Written by Jiro Doke, Senior Applications Engineer, The MathWorks, Inc.<\/i>\r\n\r\n<script>\/\/ <![CDATA[\r\nfunction grabCode_325900619a3f41b787caae717e2efe85() {\r\n        \/\/ Remember the title so we can use it in the new page\r\n        title = document.title;\r\n\r\n        \/\/ Break up these strings so that their presence\r\n        \/\/ in the Javascript doesn't mess up the search for\r\n        \/\/ the MATLAB code.\r\n        t1='325900619a3f41b787caae717e2efe85 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 325900619a3f41b787caae717e2efe85';\r\n    \r\n        b=document.getElementsByTagName('body')[0];\r\n        i1=b.innerHTML.indexOf(t1)+t1.length;\r\n        i2=b.innerHTML.indexOf(t2);\r\n \r\n        code_string = b.innerHTML.substring(i1, i2);\r\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\r\n\r\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \r\n        \/\/ in the XML parser.\r\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\r\n        \/\/ doesn't go ahead and substitute the less-than character. \r\n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\r\n\r\n        author = 'Jiro Doke';\r\n        copyright = 'Copyright 2008, The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('\r\n\r\n<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add author and copyright lines at the bottom if specified.\r\n        if ((author.length > 0) || (copyright.length > 0)) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (author.length > 0) {\r\n                d.writeln('% _' + author + '_');\r\n            }\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\r\n\r\n\r\n\\n');\r\n      \r\n      d.title = title + ' (MATLAB code)';\r\n      d.close();\r\n      }\r\n\/\/ ]]><\/script>\r\n<p style=\"text-align: right; font-size: xx-small; font-weight: lighter; font-style: italic; color: gray;\">\r\n<a><span style=\"font-size: x-small; font-style: italic;\">Get\r\nthe MATLAB code\r\n<noscript>(requires JavaScript)<\/noscript><\/span><\/a>\r\n\r\nPublished with MATLAB\u00ae 7.5<\/p>\r\n\r\n<\/div>\r\n<!--\r\n325900619a3f41b787caae717e2efe85 ##### SOURCE BEGIN #####\r\n%%\r\n% This is Part 2 of 3 Pick of the Week entries on GUIs.\r\n%\r\n% In <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/ Part 1>,\r\n% I talked about how I use the |ResizeFcn| property of the figure to adjust\r\n% the layout of my UI controls. Well, I'm always looking for easier ways to\r\n% do layouts.\r\n%\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/loadAuthor.do?objectType=author&objectId=1094934 Jerome Briot>\r\n% wrote these utility tools\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/loadFile.do?objectId=13927&objectType=file SETPOS and GETPOS>\r\n% that give you more flexibility in defining the positions of objects. With\r\n% these, you can provide individual units for the four numbers that define\r\n% the |Position| property:\r\n%\r\n%   % Use \"normalized\" for X and Width.\r\n%   % Use \"pixels\" for Y and Height.\r\n%   setpos(h,'0.25nz 100px 0.5nz 300px');\r\n%\r\n% There are other nice features, such as incrementing by certain values:\r\n%\r\n%   % Increase the width by 200 pixels\r\n%   setpos(h,'# # +200px #');\r\n%\r\n% Or positioning objects relative to other objects:\r\n\r\nsetpos(figure, '# # 400px 300px');\r\nu(1) = uicontrol('string', '(0,0) gcf');\r\nsetpos(u(1), '0 0 60px 40px')\r\nu(2) = uicontrol('string', '(0,0) gca');\r\nsetpos(u(2), '0 0 60px 40px', gca)\r\n\r\n%%\r\n%\r\n% This function will allow me to do precise positioning of UIs with fewer\r\n% lines of code. Thanks Jerome! Next week, I will introduce a different\r\n% tool that assists in the overal GUI design. Stay tuned for Part 3...\r\n%\r\n% *Comments?*\r\n%\r\n% Tell us what you think about when you are laying out your GUI components.\r\n% Is it readability? Or is it the level of informational content?\r\n%\r\n% _Written by\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/loadAuthor.do?objectType=author&objectId=1094142 Jiro Doke>, Senior Applications Engineer, The MathWorks, Inc._\r\n##### SOURCE END ##### 325900619a3f41b787caae717e2efe85\r\n-->","protected":false},"excerpt":{"rendered":"<p>\r\n\r\nThis is Part 2 of 3 Pick of the Week entries on GUIs, written by guest blogger Jiro\r\n\r\nIn Part 1, I talked about how I use the ResizeFcn property of the figure to adjust the layout of my UI... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/\">read more >><\/a><\/p>","protected":false},"author":68,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,16],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2119"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/comments?post=2119"}],"version-history":[{"count":1,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2119\/revisions"}],"predecessor-version":[{"id":7087,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2119\/revisions\/7087"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=2119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=2119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=2119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}