{"id":2394,"date":"2009-03-06T12:39:11","date_gmt":"2009-03-06T12:39:11","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/2009\/03\/06\/gui-layout-part-5\/"},"modified":"2009-03-06T12:43:05","modified_gmt":"2009-03-06T12:43:05","slug":"gui-layout-part-5","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2009\/03\/06\/gui-layout-part-5\/","title":{"rendered":"GUI Layout (Part 5)"},"content":{"rendered":"<div xmlns:mwsh=\"https:\/\/www.mathworks.com\/namespace\/mcode\/v1\/syntaxhighlight.dtd\" class=\"content\">\r\n   <introduction>\r\n      <p><a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/15007\">Jiro<\/a>'s pick this week is <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/22936-easygui\"><tt>EasyGUI<\/tt><\/a> by a fellow MathWorker, <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/29091\">Gautam<\/a>.\r\n      <\/p>\r\n   <\/introduction><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\"><span style=\"color: #0000FF\">function<\/span> potw_easygui()<\/pre><p>This is a continuation of our GUI series:<\/p>\r\n   <div>\r\n      <ul>\r\n         <li><a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/\">Part 1<\/a><\/li>\r\n         <li><a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/\">Part 2<\/a><\/li>\r\n         <li><a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/29\/gui-layout-part-3\/\">Part 3<\/a><\/li>\r\n         <li><a href=\"https:\/\/blogs.mathworks.com\/pick\/2009\/02\/27\/gui-layout-part-4\/\">Part 4<\/a><\/li>\r\n      <\/ul>\r\n   <\/div>\r\n   <p>The last week's pick (Part 4) significantly simplified the programmatic layout process by providing simple control for the\r\n      placement and size of the graphical components. EasyGUI takes it to the next level so that you don't need to worry about the\r\n      layout at all. Sometimes, you just want a functional GUI with the graphical controls in the \"right\" place.\r\n   <\/p>\r\n   <p><tt>EasyGUI<\/tt> is implemented using the <a href=\"https:\/\/www.mathworks.com\/help\/releases\/R2009a\/techdoc\/matlab_oop\/ug_intropage.html\">MATLAB Class System<\/a>. GUIs lend itself to object-oriented programming, because you can think of graphical components as objects.\r\n   <\/p>\r\n   <p>Let's take a look at an example. I want to create a pedagogical GUI that shows how a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Damping#Differential_equation\">damped mass-spring<\/a> system behaves. Here are the controls that I want:\r\n   <\/p>\r\n   <div>\r\n      <ul>\r\n         <li>Slider to manipulate the mass<\/li>\r\n         <li>Slider to manipulate the spring stiffness<\/li>\r\n         <li>Slider to manipulate the damping coefficient<\/li>\r\n         <li>Edit box to change the initial position<\/li>\r\n         <li>Edit box to change the initial velocity<\/li>\r\n         <li>Push button to \"Simulate\"<\/li>\r\n      <\/ul>\r\n   <\/div>\r\n   <p>This is how I would create it using <tt>EasyGUI<\/tt>:\r\n   <\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\"><span style=\"color: #228B22\">% Main GUI window (with auto layout)<\/span>\r\nmygui = gui.autogui;\r\nmygui.Position.width = 550;     <span style=\"color: #228B22\">% Set the width of GUI<\/span>\r\n\r\n<span style=\"color: #228B22\">% Mass with min of 1 and max of 10<\/span>\r\nparam.mass = gui.slider(<span style=\"color: #A020F0\">'Mass:'<\/span>, [1 10], mygui);\r\nparam.mass.Value = 5;           <span style=\"color: #228B22\">% Set initial value<\/span>\r\n\r\n<span style=\"color: #228B22\">% Spring stiffness with min of 0 and max of 20<\/span>\r\nparam.spring = gui.slider(<span style=\"color: #A020F0\">'Spring Stiffness:'<\/span>, [0 20], mygui);\r\nparam.spring.Value = 10;        <span style=\"color: #228B22\">% Set initial value<\/span>\r\n\r\n<span style=\"color: #228B22\">% Damping with min of -5 and max of 10<\/span>\r\nparam.damping = gui.slider(<span style=\"color: #A020F0\">'Damping Coefficient:'<\/span>, [-5 10], mygui);\r\nparam.damping.Value = 1;        <span style=\"color: #228B22\">% Set initial value<\/span>\r\n\r\n<span style=\"color: #228B22\">% Initial Position<\/span>\r\nparam.iX = gui.editnumber(<span style=\"color: #A020F0\">'Initial Pos:'<\/span>, mygui);\r\nparam.iX.Value = 3;             <span style=\"color: #228B22\">% Set initial value<\/span>\r\nparam.iX.LabelLocation = <span style=\"color: #A020F0\">'left'<\/span>;\r\nparam.iX.LabelAlignment = <span style=\"color: #A020F0\">'right'<\/span>;\r\n\r\n<span style=\"color: #228B22\">% Initial Velocity<\/span>\r\nparam.iV = gui.editnumber(<span style=\"color: #A020F0\">'Initial Vel:'<\/span>, mygui);\r\nparam.iV.Value = 0;             <span style=\"color: #228B22\">% Set initial value<\/span>\r\nparam.iV.LabelLocation = <span style=\"color: #A020F0\">'left'<\/span>;\r\nparam.iV.LabelAlignment = <span style=\"color: #A020F0\">'right'<\/span>;\r\n\r\n<span style=\"color: #228B22\">% Simulate Button<\/span>\r\nparam.simulate = gui.pushbutton(<span style=\"color: #A020F0\">'Simulate'<\/span>, mygui);\r\n\r\n<span style=\"color: #228B22\">% Create Subplots<\/span>\r\nparam.ax(1) = subplot(2,1,1);\r\nparam.ax(2) = subplot(2,1,2);<\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/potw_easygui_01.png\"> <p>Notice that each block of commands corresponds to a GUI component, and the properties that I defined were straight-forward.\r\n      <b><i>But more importantly, I didn't need to worry about the layout. The commands automatically placed the components in the order\r\n            that they were created.<\/i><\/b><\/p>\r\n   <p>Now, we can assign a function to be evaluated for the push button. I pass in <tt>param<\/tt> (which is a structure containing the GUI component object) as an additional input to the function.\r\n   <\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\"><span style=\"color: #228B22\">% Assign Callback<\/span>\r\nparam.simulate.ValueChangedFcn = @(obj) runSimulation(obj, param);<\/pre><p><tt>runSimulation.m<\/tt> simply integrates the ODE using the parameters specified in the GUI and plots the results\r\n   <\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\"><span style=\"color: #0000FF\">function<\/span> runSimulation(obj, param)<\/pre><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\"><span style=\"color: #228B22\">% Integrate for 30 seconds using ODE45<\/span>\r\n[t, y] = ode45(@(t, x) msdSystem(t, x, param), <span style=\"color: #0000FF\">...<\/span>\r\n  0:.1:30, [param.iX.Value, param.iV.Value]);\r\n\r\n<span style=\"color: #228B22\">% Plot position and velocity<\/span>\r\naxes(param.ax(1));\r\nplot(t, y(:,1), <span style=\"color: #A020F0\">'LineWidth'<\/span>, 2);\r\nxlabel(<span style=\"color: #A020F0\">'Time (sec)'<\/span>);\r\nylabel(<span style=\"color: #A020F0\">'Position'<\/span>);\r\n\r\naxes(param.ax(2));\r\nplot(t, y(:,2), <span style=\"color: #A020F0\">'LineWidth'<\/span>, 2);\r\nxlabel(<span style=\"color: #A020F0\">'Time (sec)'<\/span>);\r\nylabel(<span style=\"color: #A020F0\">'Velocity'<\/span>);<\/pre><p><tt>msdSystem.m<\/tt> is the 2nd-order ODE for the damped mass-spring system:\r\n   <\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\"><span style=\"color: #0000FF\">function<\/span> dy = msdSystem(t, y, param)<\/pre><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\"><span style=\"color: #228B22\">% Parameters<\/span>\r\nm = param.mass.Value;\r\nk = param.spring.Value;\r\nb = param.damping.Value;\r\n\r\n<span style=\"color: #228B22\">% System of linear equations for a damped mass-spring system<\/span>\r\ndy(1,1) = y(2);\r\ndy(2,1) = 1\/m * (-k*y(1) - b*y(2));<\/pre><p>If I click on \"Simulate\", then I get this:<\/p>\r\n   <p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/msdguiexample.png\"> <\/p>\r\n   <p><b>Try it out<\/b><\/p>\r\n   <p>There's so much more to this great tool. What I showed was an auto-layout option, where you let the tool determine the placement\r\n      of components, but it also allows you to manually control the placement. It has a very detailed PDF documentation as well\r\n      as a number of example files.\r\n   <\/p>\r\n   <p>Give it a try and you'll be building sophisticated GUIs in no time.<\/p>\r\n   <p><a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=2394#respond\"><b>Comments?<\/b><\/a><\/p><script language=\"JavaScript\">\r\n<!--\r\n\r\n    function grabCode_f47109a4843e48d19539b7e0e514afa9() {\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='f47109a4843e48d19539b7e0e514afa9 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' f47109a4843e48d19539b7e0e514afa9';\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('<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>\\n');\r\n      \r\n      d.title = title + ' (MATLAB code)';\r\n      d.close();\r\n      }   \r\n      \r\n-->\r\n<\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_f47109a4843e48d19539b7e0e514afa9()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n            the MATLAB code \r\n            <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; 7.8<br><\/p>\r\n<\/div>\r\n<!--\r\nf47109a4843e48d19539b7e0e514afa9 ##### SOURCE BEGIN #####\r\n%%\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/15007\r\n% Jiro>'s pick this week is\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/22936-easygui\r\n% |EasyGUI|> by a fellow MathWorker,\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/29091\r\n% Gautam>.\r\n\r\n%%\r\nfunction potw_easygui()\r\n%%\r\n% This is a continuation of our GUI series:\r\n%\r\n% * <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/ Part 1>\r\n% * <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/ Part 2>\r\n% * <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/29\/gui-layout-part-3\/ Part 3>\r\n% * <https:\/\/blogs.mathworks.com\/pick\/2009\/02\/27\/gui-layout-part-4\/ Part 4>\r\n%\r\n% The last week's pick (Part 4) significantly simplified the programmatic\r\n% layout process by providing simple control for the placement and size of\r\n% the graphical components. EasyGUI takes it to the next level so that you\r\n% don't need to worry about the layout at all. Sometimes, you just want a\r\n% functional GUI with the graphical controls in the \"right\" place.\r\n%\r\n% |EasyGUI| is implemented using the\r\n% <https:\/\/www.mathworks.com\/help\/releases\/R2009a\/techdoc\/matlab_oop\/ug_intropage.html\r\n% MATLAB Class System>. GUIs lend itself to object-oriented programming,\r\n% because you can think of graphical components as objects.\r\n%\r\n% Let's take a look at an example. I want to create a pedagogical GUI that\r\n% shows how a <http:\/\/en.wikipedia.org\/wiki\/Damping#Differential_equation\r\n% damped mass-spring> system behaves. Here are the controls that I want:\r\n%\r\n% * Slider to manipulate the mass\r\n% * Slider to manipulate the spring stiffness\r\n% * Slider to manipulate the damping coefficient\r\n% * Edit box to change the initial position\r\n% * Edit box to change the initial velocity\r\n% * Push button to \"Simulate\"\r\n%\r\n% This is how I would create it using |EasyGUI|:\r\n\r\n% Main GUI window (with auto layout)\r\nmygui = gui.autogui;\r\nmygui.Position.width = 550;     % Set the width of GUI\r\n\r\n% Mass with min of 1 and max of 10\r\nparam.mass = gui.slider('Mass:', [1 10], mygui);\r\nparam.mass.Value = 5;           % Set initial value\r\n\r\n% Spring stiffness with min of 0 and max of 20\r\nparam.spring = gui.slider('Spring Stiffness:', [0 20], mygui);\r\nparam.spring.Value = 10;        % Set initial value\r\n\r\n% Damping with min of -5 and max of 10\r\nparam.damping = gui.slider('Damping Coefficient:', [-5 10], mygui);\r\nparam.damping.Value = 1;        % Set initial value\r\n\r\n% Initial Position\r\nparam.iX = gui.editnumber('Initial Pos:', mygui);\r\nparam.iX.Value = 3;             % Set initial value\r\nparam.iX.LabelLocation = 'left';\r\nparam.iX.LabelAlignment = 'right';\r\n\r\n% Initial Velocity\r\nparam.iV = gui.editnumber('Initial Vel:', mygui);\r\nparam.iV.Value = 0;             % Set initial value\r\nparam.iV.LabelLocation = 'left';\r\nparam.iV.LabelAlignment = 'right';\r\n\r\n% Simulate Button\r\nparam.simulate = gui.pushbutton('Simulate', mygui);\r\n\r\n% Create Subplots\r\nparam.ax(1) = subplot(2,1,1);\r\nparam.ax(2) = subplot(2,1,2);\r\n%%\r\n% Notice that each block of commands corresponds to a GUI component, and\r\n% the properties that I defined were straight-forward. *_But more\r\n% importantly, I didn't need to worry about the layout. The commands\r\n% automatically placed the components in the order that they were\r\n% created._*\r\n%\r\n% Now, we can assign a function to be evaluated for the push button. I pass\r\n% in |param| (which is a structure containing the GUI component object) as\r\n% an additional input to the function.\r\n\r\n% Assign Callback\r\nparam.simulate.ValueChangedFcn = @(obj) runSimulation(obj, param);\r\n\r\n%%\r\n% |runSimulation.m| simply integrates the ODE using the parameters\r\n% specified in the GUI and plots the results\r\n\r\nfunction runSimulation(obj, param)\r\n% Integrate for 30 seconds using ODE45\r\n[t, y] = ode45(@(t, x) msdSystem(t, x, param), ...\r\n  0:.1:30, [param.iX.Value, param.iV.Value]);\r\n\r\n% Plot position and velocity\r\naxes(param.ax(1));\r\nplot(t, y(:,1), 'LineWidth', 2);\r\nxlabel('Time (sec)');\r\nylabel('Position');\r\n\r\naxes(param.ax(2));\r\nplot(t, y(:,2), 'LineWidth', 2);\r\nxlabel('Time (sec)');\r\nylabel('Velocity');\r\n\r\n%%\r\n% |msdSystem.m| is the 2nd-order ODE for the damped mass-spring system:\r\n\r\nfunction dy = msdSystem(t, y, param)\r\n% Parameters\r\nm = param.mass.Value;\r\nk = param.spring.Value;\r\nb = param.damping.Value;\r\n\r\n% System of linear equations for a damped mass-spring system\r\ndy(1,1) = y(2);\r\ndy(2,1) = 1\/m * (-k*y(1) - b*y(2));\r\n\r\n%%\r\n% If I click on \"Simulate\", then I get this:\r\n%\r\n% <<msdguiexample.png>>\r\n%\r\n% *Try it out*\r\n%\r\n% There's so much more to this great tool. What I showed was an auto-layout\r\n% option, where you let the tool determine the placement of components, but\r\n% it also allows you to manually control the placement. It has a very\r\n% detailed PDF documentation as well as a number of example files.\r\n%\r\n% Give it a try and you'll be building sophisticated GUIs in no time.\r\n%\r\n% <https:\/\/blogs.mathworks.com\/pick\/?p=2394#respond *Comments?*>\r\n\r\n\r\n##### SOURCE END ##### f47109a4843e48d19539b7e0e514afa9\r\n-->","protected":false},"excerpt":{"rendered":"<p>\r\n   \r\n      Jiro's pick this week is EasyGUI by a fellow MathWorker, Gautam.\r\n      \r\n   function potw_easygui()This is a continuation of our GUI series:\r\n   \r\n      \r\n   ... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2009\/03\/06\/gui-layout-part-5\/\">read more >><\/a><\/p>","protected":false},"author":35,"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\/2394"}],"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\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/comments?post=2394"}],"version-history":[{"count":0,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2394\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=2394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=2394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=2394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}