{"id":3594,"date":"2012-06-01T08:54:44","date_gmt":"2012-06-01T13:54:44","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/?p=3594"},"modified":"2012-06-01T08:54:44","modified_gmt":"2012-06-01T13:54:44","slug":"use-matlab-guis-with-simulink-models","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2012\/06\/01\/use-matlab-guis-with-simulink-models\/","title":{"rendered":"Use MATLAB GUIs with Simulink Models"},"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\/32620\">Greg's<\/a> picks this week are\r\n      <\/p>\r\n      <p><a href=\"\">Simulink-GUI Synchronization Example<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/76890\">Will Campbell<\/a>,\r\n      \r\n       <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/32888-gui-development-for-simulink-models\">GUI development for SIMULINK models<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/17400\">Nitin Skandan<\/a>,\r\n      <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/24294-simulink-signal-viewing-using-event-listeners-and-a-matlab-ui\">Simulink Signal Viewing using Event Listeners and a MATLAB UI<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/19101\">Phil Goddard<\/a>.\r\n      <\/p>\r\n   <\/introduction>\r\n   <h3>Contents<\/h3>\r\n   <div>\r\n      <ul>\r\n         <li><a href=\"#1\">Not Everyone Needs to See the Simulink Model<\/a><\/li>\r\n         <li><a href=\"#2\">Why Three Picks?<\/a><\/li>\r\n         <li><a href=\"#3\">Method 1: Change Model Parameters with SET_PARAM API<\/a><\/li>\r\n         <li><a href=\"#4\">Method 2: Custom MATLAB Code S-Function<\/a><\/li>\r\n         <li><a href=\"#5\">Method 3: Use Simulink Event Listeners<\/a><\/li>\r\n         <li><a href=\"#6\">How do these methods compare?<\/a><\/li>\r\n      <\/ul>\r\n   <\/div>\r\n   <h3>Not Everyone Needs to See the Simulink Model<a name=\"1\"><\/a><\/h3>\r\n   <p>Often those who run simulations want to change a few inputs and parameters and see how the model responds without needing\r\n      to understand the intricacies of the model itself. Providing a graphical user interface (GUI) to the model is a common approach\r\n      to meet the desire to abstract the model&#8217;s internal structure for an end user of the simulation.\r\n   <\/p>\r\n   <h3>Why Three Picks?<a name=\"2\"><\/a><\/h3>\r\n   <p>As a field engineer, I work a great deal with a number of our customers who use Simulink, and I often get questions about\r\n      how to provide a GUI for a Simulink model. So I set about searching the File Exchange for a good example, but instead I\r\n      found three.\r\n   <\/p>\r\n   <p>Each of the File Exchange entries approach adding a GUI to Simulink model differently. Each of the chosen File Exchange entries\r\n      provides relatively simple examples along with documentation.\r\n   <\/p>\r\n   <h3>Method 1: Change Model Parameters with SET_PARAM API<a name=\"3\"><\/a><\/h3>\r\n   <p>Fundamentally the strategy that Will Campbell takes is to change properties and parameters of the various blocks in the Simulink\r\n      model using the <a href=\"https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/slref\/set_param.html\">SET_PARAM<\/a> application programming interface (API) for Simulink.\r\n   <\/p>\r\n   <p><img decoding=\"async\" width = 600 vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/greg\/SimulinkGUIs_Writeup\/sl_synch.png\"> <\/p>\r\n   <p>For example, in the callback function for the slider bar that appears in the GUI, the value of the Gain block in the model is\r\n      updated using:\r\n   <\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\"><span style=\"color: #228B22\">% Update the model's gain value<\/span>\r\nset_param([bdroot <span style=\"color: #A020F0\">'\/Gain'<\/span>],<span style=\"color: #A020F0\">'Gain'<\/span>,value)<\/pre><p><\/p><p>The control of the model execution is performed using SET_PARAM in conjunction with the model&#8217;s <a href=\"https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/ug\/f11-61851.html\">simulation status<\/a>.\r\n   <\/p>\r\n   <p>Finally, the synchronization from the model to the GUI during model open, simulation start, etc. is handled using <a href=\"https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/ug\/f4-122589.html\">callback functions<\/a> for the model and blocks within the Simulink diagram.\r\n   <\/p>\r\n   <p>The way this example is constructed, the GUI and the Simulink model execute in an asynchronous fashion. The elements that\r\n      Will includes in this example are an effort to enable handshaking between the GUI and the Simulink model in order to maintain\r\n      synchronicity between GUI elements and Simulink model parameters.\r\n   <\/p>\r\n   <h3>Method 2: Custom MATLAB Code S-Function<a name=\"4\"><\/a><\/h3>\r\n   <p>Nitin Skandan approaches the GUI attachment to the model by using GUIs as Sink and Source blocks. That is, as blocks to either provide input to, or display outputs from, a Simulink model.\r\n   <\/p>\r\n   <p><img decoding=\"async\" width = 600 vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/greg\/SimulinkGUIs_Writeup\/sfunction_gui.png\"> <\/p>\r\n   <p>This means that the execution of the GUI code occurs during the process of model simulation and therefore less handshaking\r\n      is required between the GUI and the model because of their inherent relationship using this method.\r\n   <\/p>\r\n   <p>In order to create the sink block that displays the signal in a plot inside a figure window as shown in the example above,\r\n      Nitin uses a <a href=\"https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/sfg\/f7-67622.html\">MATLAB S-Function<\/a>.\r\n   <\/p>\r\n   <p>Nitin also provides some nice documentation to describe what was required to create this type of GUI via custom Simulink\r\n      blocks.\r\n   <\/p>\r\n   <h3>Method 3: Use Simulink Event Listeners<a name=\"5\"><\/a><\/h3>\r\n   <p>The most sophisticated approach is to listen for events generated by the Simulink model during various phases of editing and\r\n      execution.\r\n   <\/p>\r\n   <p><img decoding=\"async\" width = 600 vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/greg\/SimulinkGUIs_Writeup\/event_listener_gui.png\"> <\/p>\r\n   <p>This is the approach that Phil Goddard takes.<\/p>\r\n   <p>In some ways it is similar to the approach that Will took. But instead of using the Model and Block callback functions to\r\n      maintain synchronicity between the model and the GUI, Phil creates <a href=\"https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/slref\/add_exec_event_listener.html\">event listeners<\/a> that execute a function when a particular event occurs in the Simulink model.\r\n   <\/p>\r\n   <p>Using this method allows for a very tight integration between the model and the GUI without the need to populate model callback\r\n      functions. Therefore the code for the GUI can be maintained completely independently of the model, and won&#8217;t interfere with\r\n      using the model for other applications such as manual simulations without the GUI or <a href=\"https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/ug\/bq_5wvg-1.html\">model referencing<\/a>.\r\n   <\/p>\r\n   <h3>How do these methods compare?<a name=\"6\"><\/a><\/h3>\r\n   <p>In summary, how do the methods addressed in the three File Exchange entries above compare?<\/p>\r\n   <p>\r\n      <table width=\"100%\">\r\n      <tr style=\"color: #e36c0a\">\r\n      <td><\/td>\r\n      <th>Block<\/th>\r\n      <th>Model Callback<\/th>\r\n      <th>Signal Access<\/th>\r\n      <th>Difficulty<\/th>\r\n      <\/tr>\r\n      <tr style=\"background-color: #FDE4D0; text-align: center; color: #e36c0a\">\r\n      <th>SET_PARAM_API<\/th>\r\n      <td>No<\/td>\r\n      <td>Yes<\/td>\r\n      <td>No<\/td>\r\n      <td>Medium<\/td>\r\n      <\/tr>\r\n      <tr style=\"text-align: center; color: #e36c0a\">\r\n      <th>MATLAB S-Function<\/th>\r\n      <td>Yes<\/td>\r\n      <td>Maybe<\/td>\r\n      <td>Yes<\/td>\r\n      <td>Medium<\/td>\r\n      <\/tr>\r\n      <tr style=\"background-color: #FDE4D0; text-align: center; color: #e36c0a\">\r\n      <th>Event Listeners<\/th>\r\n      <td>No<\/td>\r\n      <td>No<\/td>\r\n      <td>Yes<\/td>\r\n      <td>High<\/td>\r\n      <\/tr>\r\n      <\/table>\r\n      \r\n   <\/p>\r\n   <div>\r\n      <ul>\r\n         <li>Block - requires adding a block to the model to enable the GUI<\/li>\r\n         <li>Model Callback - requires populating the callback properties of the model or blocks in the model<\/li>\r\n         <li>Signal Access - able to access signal values during simulation<\/li>\r\n         <li>Difficulty - relative difficulty of creating these types of GUI implementations<\/li>\r\n      <\/ul>\r\n   <\/div>\r\n   <p><b>Comments<\/b><\/p>\r\n   <p>If you would like to leave any comments regarding this post, please click <a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=3594#respond\">here<\/a>.\r\n   <\/p><script language=\"JavaScript\">\r\n<!--\r\n\r\n    function grabCode_917a4a28776e41df8a1efb4131727686() {\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='917a4a28776e41df8a1efb4131727686 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 917a4a28776e41df8a1efb4131727686';\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 = 'Greg Wolff';\r\n        copyright = 'Copyright 2012 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_917a4a28776e41df8a1efb4131727686()\"><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.14<br><\/p>\r\n<\/div>\r\n<!--\r\n917a4a28776e41df8a1efb4131727686 ##### SOURCE BEGIN #####\r\n%% Use MATLAB GUIs on Simulink Models\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/32620 Greg's>\r\n% picks this week are \r\n% \r\n% < Simulink-GUI Synchronization Example>\r\n% by <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/76890\r\n% Will Campbell>, \r\n% \r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/32888-gui-development-for-simulink-models\r\n% GUI development for SIMULINK models> by\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/17400 Nitin Skandan>, \r\n% \r\n% \r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/24294-simulink-signal-viewing-using-event-listeners-and-a-matlab-ui\r\n% Simulink Signal Viewing using Event Listeners and a MATLAB UI> by <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/19101  Phil Goddard>.\r\n%\r\n%% Not Everyone Needs to See the Simulink Model\r\n% \r\n% Often those who run simulations want to change a few inputs and parameters and see how the model responds without needing to understand the intricacies of the model itself. Providing a graphical user interface (GUI) to the model is a common approach to meet the desire to abstract the model\u00e2\u20ac\u2122s internal structure for an end user of the simulation.\r\n% \r\n%% Why Three Picks?\r\n% As a field engineer, I work a great deal with a number of our customers who use Simulink, and I often get questions about how to provide a (GUI) for a Simulink model. So I set about searching the File Exchange for a good example, but instead I found three.\r\n% \r\n% Each of the File Exchange entries approach adding a GUI to Simulink model differently.\r\n% Each of the chosen File Exchange entries provides relatively simple examples along with documentation.\r\n% \r\n% \r\n%% Method 1: Change Model Parameters with SET_PARAM API\r\n% \r\n% Fundamentally the strategy that Will Campbell takes is to change properties and parameters of the various blocks in the Simulink model using the <https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/slref\/set_param.html SET_PARAM> application programming interface (API) for Simulink.\r\n%\r\n% <<sl_synch.png>>\r\n%\r\n%\r\n% For example, in callback function for the slider bar that appears in the GUI, the value of the Gain block in the model is updated using:\r\n%  \r\n%   % Update the model's gain value\r\n%   set_param([bdroot '\/Gain'],'Gain',value)\r\n% \r\n% The control of the model execution is performed using SET_PARAM in conjunction with the model\u00e2\u20ac\u2122s <https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/ug\/f11-61851.html simulation status>.\r\n% \r\n% Finally, the synchronization from the model to the GUI during model open, simulation start, etc. is handled using <https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/ug\/f4-122589.html callback functions> for the model and blocks within the Simulink diagram.\r\n% \r\n% The way this example is constructed, the GUI and the Simulink model execute in an asynchronous fashion. The elements that Will includes in this example are an effort to enable handshaking between the GUI and the Simulink model in order to maintain synchronicity between GUI elements and Simulink model parameters. \r\n% \r\n%% Method 2: Custom MATLAB Code S-Function\r\n% Nitin Skandan\r\n% approaches the GUI attachment to the model by using GUIs as Sink and Source blocks. That is a block to either provide input to, or display outputs from a Simulink model.\r\n%\r\n% <<sfunction_gui.png>>\r\n%\r\n%\r\n% This means that the execution of the GUI code occurs during the process of model simulation and therefore less handshaking is required between the GUI and the model because of their inherent relationship using this method.\r\n% \r\n% In order to create the sink block that displays the signal in a plot inside a figure window as shown in the example above, Nitin uses a <https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/sfg\/f7-67622.html MATLAB S-Function>.\r\n% \r\n% Nitin also provides some nice documentation to describe what was required to create these types of GUI via custom Simulink blocks.\r\n% \r\n% \r\n%% Method 3: Use Simulink Event Listeners\r\n% The most sophisticated approach is to listen for events generated by the Simulink model during various phases of editing and execution.\r\n%\r\n% <<event_listener_gui.png>>\r\n%\r\n%\r\n% This is the approach that Phil Goddard takes.\r\n% \r\n% In some ways it is similar to the approach that Will took. But instead of using the Model and Block callback functions to maintain synchronicity between the model and the GUI, Phil creates <https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/slref\/add_exec_event_listener.html event listeners> that execute a function when a particular event occurs in the Simulink model.\r\n% \r\n% Using this method allows for a very tight integration between the model and the GUI without the need to populate model callback functions. Therefore the code for the GUI can be maintained completely independently of the model, and won\u00e2\u20ac\u2122t interfere with using the model for other applications such as manual simulations without the GUI or <https:\/\/www.mathworks.com\/help\/releases\/R2012a\/toolbox\/simulink\/ug\/bq_5wvg-1.html model referencing>.\r\n% \r\n% \r\n%% How do these methods compare?\r\n%\r\n% In summary, how do the methods addressed in the three File Exchange\r\n% entries above compare?\r\n%\r\n%\r\n% <html>\r\n% <table width=\"100%\">\r\n%     <tr style=\"color: #e36c0a\">\r\n%         <td><\/td>\r\n%         <th>Block<\/th>\r\n%         <th>Model Callback<\/th>\r\n%         <th>Signal Access<\/th>\r\n%         <th>Difficulty<\/th>\r\n%     <\/tr>\r\n%     <tr style=\"background-color: #FDE4D0; text-align: center; color: #e36c0a\">\r\n%         <th>SET_PARAM_API<\/th>\r\n%         <td>No<\/td>\r\n%         <td>Yes<\/td>\r\n%         <td>No<\/td>\r\n%         <td>Medium<\/td>\r\n%     <\/tr>\r\n%     <tr style=\"text-align: center; color: #e36c0a\">\r\n%         <th>MATLAB S-Function<\/th>\r\n%         <td>Yes<\/td>\r\n%         <td>Maybe<\/td>\r\n%         <td>Yes<\/td>\r\n%         <td>Medium<\/td>\r\n%     <\/tr>\r\n%     <tr style=\"background-color: #FDE4D0; text-align: center; color: #e36c0a\">\r\n%         <th>Event Listeners<\/th>\r\n%         <td>No<\/td>\r\n%         <td>No<\/td>\r\n%         <td>Yes<\/td>\r\n%         <td>High<\/td>\r\n%     <\/tr>\r\n% <\/table>\r\n% <\/html>\r\n% \r\n% \r\n% \r\n% * Block - requires adding a block to the model to enable the GUI\r\n% * Model Callback - requires populating the callback properties of the\r\n% model or blocks in the model.\r\n% * Signal Access - able to access signal values during simulation\r\n% * Difficulty - relative difficulty of creating these types of GUI\r\n% implementations.\r\n\r\n\r\n\r\n%%\r\n% *Comments*\r\n%\r\n% If you would like to leave any comments regarding this post, please click \r\n% <https:\/\/blogs.mathworks.com\/pick\/?p=3594#respond here>. \r\n##### SOURCE END ##### 917a4a28776e41df8a1efb4131727686\r\n-->","protected":false},"excerpt":{"rendered":"<p>\r\n   \r\n      Greg's picks this week are\r\n      \r\n      Simulink-GUI Synchronization Example by Will Campbell,\r\n      \r\n       GUI development for SIMULINK models by... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2012\/06\/01\/use-matlab-guis-with-simulink-models\/\">read more >><\/a><\/p>","protected":false},"author":44,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/3594"}],"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\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/comments?post=3594"}],"version-history":[{"count":22,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/3594\/revisions"}],"predecessor-version":[{"id":3640,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/3594\/revisions\/3640"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=3594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=3594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=3594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}