{"id":632,"date":"2021-03-25T14:28:22","date_gmt":"2021-03-25T14:28:22","guid":{"rendered":"https:\/\/imperix.com\/doc\/?p=632"},"modified":"2025-11-25T14:29:31","modified_gmt":"2025-11-25T14:29:31","slug":"gui-with-matlab-app-designer","status":"publish","type":"post","link":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer","title":{"rendered":"GUI with MATLAB App Designer"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-right-text counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\/#Software-resource\" >Software resource<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\/#Making-a-GUI-with-App-Designer\" >Making a GUI with App Designer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\/#Implementation-principles-in-App-Designer\" >Implementation principles in App Designer<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\/#Creating-UI-components\" >Creating UI components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\/#Share-data-within-a-GUI-in-App-Designer\" >Share data within a GUI in App Designer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\/#Defining-callback-functions\" >Defining callback functions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\/#Timer-implementation-for-background-tasks\" >Timer implementation for background tasks<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\/#Closing-comments\" >Closing comments<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>This note provides step-by-step guidance for implementing a basic Graphical User Interface (GUI) using MATLAB App Designer. A typical application of such a GUI could be to implement a remote interface similar to a control panel for a power converter, as presented in <a href=\"https:\/\/imperix.com\/doc\/help\/build-custom-user-interface\">PN175<\/a>.<\/p>\n\n\n\n<p>The application developed herein incorporates essential UI components, callback functions, timers, and background tasks. However, it does not implement communication with the controller, which is rather addressed in <a href=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\">PN175<\/a>. For that, the OPC UA protocol could be used, as specifically documented in <a href=\"https:\/\/imperix.com\/doc\/help\/opc-ua-toolbox-for-matlab-and-simulink\">PN178<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-simple-alerts-for-gutenberg-alert-boxes sab-alert sab-alert-info\" role=\"alert\">It is here chosen to use Matlab App Designer as the software environment for building the GUI. Similar capabilities are also offered directly within <a href=\"https:\/\/imperix.com\/doc\/help\/cockpit-user-guide\">Cockpit<\/a>, thanks to its <a href=\"https:\/\/imperix.com\/doc\/help\/gui-builder-module\">GUI builder<\/a> module. <\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"519\" height=\"487\" src=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-6.png\" alt=\"Basic example of a GUI with App Designer\" class=\"wp-image-12572\" srcset=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-6.png 519w, https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-6-300x282.png 300w\" sizes=\"auto, (max-width: 519px) 100vw, 519px\" \/><figcaption class=\"wp-element-caption\">Figure 1: <strong>Basic example of a GUI with App Designer<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-software-resource\"><span class=\"ez-toc-section\" id=\"Software-resource\"><\/span>Software resource<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The code of the application (MATLAB version R2022a or newer required) used as an example throughout this page can be downloaded below. This basic GUI simply plots three-phase sinusoidal voltages with adjustable amplitude and phase.<\/p>\n\n\n\n<div class=\"wp-block-file aligncenter\"><a href=\"https:\/\/cdn.imperix.com\/doc\/wp-content\/uploads\/2022\/03\/ExampleApp.zip\" class=\"wp-block-file__button wp-element-button\" download>Download <strong>ExampleApp.zip<\/strong><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-making-a-gui-with-app-designer\"><span class=\"ez-toc-section\" id=\"Making-a-GUI-with-App-Designer\"><\/span>Making a GUI with App Designer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Introduced in MATLAB version R2016a and part of the <a href=\"https:\/\/www.mathworks.com\/products\/matlab\/app-designer.html\">MATLAB basic package<\/a>, App Designer allows to conveniently design graphical user interfaces by dragging and dropping visual components. Actions and processes are meant to be implemented in the well-known MATLAB programming language.<\/p>\n\n\n\n<p>As mentioned, no add-ons or toolboxes are required. However, at a later stage, the <a href=\"https:\/\/ch.mathworks.com\/products\/compiler.html\">MATLAB compiler<\/a> add-on can be used to share\u202fMATLAB programs as standalone applications. Applications can then be launched on any computer using the free <a href=\"https:\/\/www.mathworks.com\/products\/compiler\/matlab-runtime.html\">MATLAB Runtime<\/a> libraries (a standalone set of shared libraries, MATLAB code, and other files that enables the execution of MATLAB files on computers without an installed version of MATLAB).<\/p>\n\n\n\n<div class=\"wp-block-simple-alerts-for-gutenberg-alert-boxes sab-alert sab-alert-info\" role=\"alert\">MATLAB Help Center provides many tutorials on their App Designer product, e.g. <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/creating_guis\/create-a-simple-app-or-gui-using-app-designer.html\">Create and Run a Simple App Using App Designer<\/a>.<\/div>\n\n\n\n<p>To introduce the main concepts, the example from Figure 1 will be recreated from scratch throughout this page. This example plots three sinewaves whose amplitude and phase can be modified using a slider and an edit field, respectively. Also, the GUI incorporates a lamp that changes color according to the amplitude of the sinewaves.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-implementation-principles-in-app-designer\"><span class=\"ez-toc-section\" id=\"Implementation-principles-in-App-Designer\"><\/span>Implementation principles in App Designer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Starting in version R2019b, App Designer can be opened by clicking the Design App button in the Apps tab. Alternatively, it can be opened using the <code>appdesigner<\/code> command.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading632_cf0f98-73, .wp-block-kadence-advancedheading.kt-adv-heading632_cf0f98-73[data-kb-block=\"kb-adv-heading632_cf0f98-73\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading632_cf0f98-73 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading632_cf0f98-73[data-kb-block=\"kb-adv-heading632_cf0f98-73\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading632_cf0f98-73 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading632_cf0f98-73[data-kb-block=\"kb-adv-heading632_cf0f98-73\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading632_cf0f98-73 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading632_cf0f98-73\"><span class=\"ez-toc-section\" id=\"Creating-UI-components\"><\/span>Creating UI components<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Upon opening a blank project in MATLAB App Designer, the first step is to add UI components. To recreate the example from Figure 1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add the widgets: <em>Axes<\/em>, <em>Edit Field (Numeric)<\/em>, <em>Slider, <\/em>and <em>Lamp<\/em> from the component library<\/li>\n\n\n\n<li>Rename their labels to match the screenshot below<\/li>\n<\/ul>\n\n\n\n<p> Note that App Designer will then automatically add these widgets to the Component Browser and name them according to their labels. <\/p>\n\n\n\n<p>At this point, the <em>Design View<\/em> should look similar to the screenshot from Figure 2.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"646\" src=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-1-1024x646.png\" alt=\"Preview of the GUI in App Designer\" class=\"wp-image-12562\" srcset=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-1-1024x646.png 1024w, https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-1-300x189.png 300w, https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-1-768x485.png 768w, https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-1.png 1188w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Figure 2: <strong>Preview of the GUI in App Designer<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-share-data-within-a-gui-in-app-designer\"><span class=\"ez-toc-section\" id=\"Share-data-within-a-GUI-in-App-Designer\"><\/span>Share data within a GUI in App Designer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>When designing a GUI with App Designer, it is often useful to be able to access variables from multiple callbacks or functions. This can be done using properties as they are accessible from anywhere inside the application.<\/p>\n\n\n\n<p>To declare properties proceed as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Under the <em>Code View<\/em>, in the <em>Editor<\/em> tab, click on <em>Property<\/em>. The code to declare a property is automatically added.<\/li>\n\n\n\n<li>Add the code below inside the properties section to declare the required variables for the example.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"Matlab\" data-shcb-language-slug=\"matlab\"><span><code class=\"hljs language-matlab\">timer01;\namplitude = <span class=\"hljs-number\">0<\/span>;\nphase = <span class=\"hljs-number\">0<\/span>;\nx = <span class=\"hljs-number\">0<\/span>:<span class=\"hljs-number\">0.01<\/span>:<span class=\"hljs-number\">5<\/span>*<span class=\"hljs-built_in\">pi<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Matlab<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">matlab<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Your code should look somewhat like the screenshot below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"223\" height=\"102\" src=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-21.png\" alt=\"\" class=\"wp-image-12930\"\/><\/figure>\n<\/div>\n\n\n<p>The <code>timer01<\/code> property will later be used to instantiate a timer while the three other properties are used to store the sinewaves&#8217; parameters. To then get or set a property in your code, use the dot notation: <code>app.myProperty<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-defining-callback-functions\"><span class=\"ez-toc-section\" id=\"Defining-callback-functions\"><\/span>Defining callback functions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The next step is to add callbacks to the action widgets. Callbacks basically contain the code that will be executed when the user interacts with the corresponding widget.<\/p>\n\n\n\n<p>To do so: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Switch to the <em>Code View<\/em> in App Designer and, under the <em>Editor<\/em> tab, click on <em>Callback<\/em>. A pop-up window like the one shown in Figure 3 should open.<\/li>\n\n\n\n<li>In this pop-up window, select the <em><em>AmplitudeSlider<\/em><\/em> component and the <em>ValueChangingFcn<\/em> callback and click on <em>Add Callback<\/em>. MATLAB App Designer will automatically add the corresponding callback function in the code.<\/li>\n\n\n\n<li>Add the following code inside the newly created function to update the <em>Axes<\/em> UI scaling and the <code>amplitude <\/code>property.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"Matlab\" data-shcb-language-slug=\"matlab\"><span><code class=\"hljs language-matlab\"><span class=\"hljs-comment\">%Update the amplitude<\/span>\napp.UIAxes.XLim = &#91;<span class=\"hljs-number\">-0<\/span> <span class=\"hljs-number\">5<\/span>*<span class=\"hljs-built_in\">pi<\/span>];\napp.UIAxes.YLim = &#91;<span class=\"hljs-number\">-350<\/span> <span class=\"hljs-number\">350<\/span>];\napp.amplitude = event.Value; <\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Matlab<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">matlab<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"396\" height=\"199\" src=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-4.png\" alt=\"Add callback functions to widgets\" class=\"wp-image-12565\" srcset=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-4.png 396w, https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/06\/image-4-300x151.png 300w\" sizes=\"auto, (max-width: 396px) 100vw, 396px\" \/><figcaption class=\"wp-element-caption\">Figure3: <strong>Add callback functions to widgets<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>As done before, add a callback to the <em>Phase EditField<\/em> UI but this time select the <em>ValueChangedFcn<\/em> callback.<\/li>\n\n\n\n<li>Enter the code below to the slider&#8217;s callback function to store the <em><em>Phase EditField<\/em><\/em>&#8216;s value:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"Matlab\" data-shcb-language-slug=\"matlab\"><span><code class=\"hljs language-matlab\"><span class=\"hljs-comment\">%Retrieves the phase value<\/span>\napp.phase = app.PhaseEditField.Value;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Matlab<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">matlab<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Note that the components and their corresponding callback functions (seen in Figure 3) are automatically named by App Designer according to the user-defined components&#8217; label. The code for these two callbacks should look like the screenshot below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"373\" height=\"226\" src=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-19.png\" alt=\"\" class=\"wp-image-12928\" srcset=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-19.png 373w, https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-19-300x182.png 300w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/figure>\n<\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading632_519160-f1, .wp-block-kadence-advancedheading.kt-adv-heading632_519160-f1[data-kb-block=\"kb-adv-heading632_519160-f1\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading632_519160-f1 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading632_519160-f1[data-kb-block=\"kb-adv-heading632_519160-f1\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading632_519160-f1 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading632_519160-f1[data-kb-block=\"kb-adv-heading632_519160-f1\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading632_519160-f1 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading632_519160-f1\"><span class=\"ez-toc-section\" id=\"Timer-implementation-for-background-tasks\"><\/span>Timer implementation for background tasks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Implementing timers allows for performing background tasks that can be repeated periodically. It can be used to update variables&#8217; values or in this case to refresh the function plotted inside the <em>Axes<\/em> UI. The first step to implement a timer is to create a startup function. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-timer-declaration\">Timer declaration<\/h4>\n\n\n\n<p>Timers are usually declared in the startup function when developing a GUI in App Designer. A startup function is a specific function that is executed when the application is first launched before the user can even interact with the GUI. This is where the timer will be configured and started.<\/p>\n\n\n\n<p>To do so:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Right-click on the app&#8217;s name (top node) in the Component Browser, hover Callbacks, and select Add StartupFcn callback. The code for the startup function will be added to the Code View.<\/li>\n\n\n\n<li>Add the code below inside the newly created function. It declares a timer with a period of 0.1 seconds, assigns a callback function to it, and starts the timer.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"Matlab\" data-shcb-language-slug=\"matlab\"><span><code class=\"hljs language-matlab\"><span class=\"hljs-comment\">%Instanciate timer<\/span>\napp.timer01 = timer(<span class=\"hljs-string\">'Period'<\/span>, <span class=\"hljs-number\">0.1<\/span>,<span class=\"hljs-string\">'ExecutionMode'<\/span>, ...\n                    <span class=\"hljs-string\">'fixedSpacing'<\/span>, <span class=\"hljs-string\">'TasksToExecute'<\/span>, Inf);\napp.timer01.TimerFcn = @app.TimerCallback;\nstart(app.timer01);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Matlab<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">matlab<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"474\" height=\"214\" src=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-23.png\" alt=\"\" class=\"wp-image-12932\" srcset=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-23.png 474w, https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-23-300x135.png 300w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-timer-callback-background-task-definition\">Timer callback\/background task definition<\/h4>\n\n\n\n<p>Timer callbacks are functions that are executed at a frequency defined by the timer&#8217;s period. In this specific case, the timer callback can be seen as a background task, used to update the three sinewaves plotted in the <em>Axes<\/em> UI.<\/p>\n\n\n\n<p>To define the timer callback, proceed as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Under the <em>Code View<\/em>, in the <em>Editor<\/em> tab, click on <em>Function<\/em><\/li>\n\n\n\n<li>Replace the function code with the code below. This code plots three sinewaves, multiplied by the amplitude defined by the <em>Slider <\/em>UI and phase shifted by the value entered in the <em><em>EditField<\/em><\/em> UI.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"Matlab\" data-shcb-language-slug=\"matlab\"><span><code class=\"hljs language-matlab\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">TimerCallback<\/span><span class=\"hljs-params\">(app, ~, ~)<\/span><\/span>\n            \n    <span class=\"hljs-comment\">% Plot three sinewave functions<\/span>\n    <span class=\"hljs-built_in\">plot<\/span>(app.UIAxes, app.x, app.amplitude.*<span class=\"hljs-built_in\">sin<\/span>(app.x+<span class=\"hljs-built_in\">mod<\/span>(app.phase, <span class=\"hljs-number\">2<\/span>*<span class=\"hljs-built_in\">pi<\/span>)), <span class=\"hljs-string\">'LineWidth'<\/span>,<span class=\"hljs-number\">2<\/span>);\n    <span class=\"hljs-built_in\">hold<\/span>(app.UIAxes,<span class=\"hljs-string\">'on'<\/span>);\n    <span class=\"hljs-built_in\">plot<\/span>(app.UIAxes, app.x, app.amplitude.*<span class=\"hljs-built_in\">sin<\/span>(app.x+<span class=\"hljs-built_in\">mod<\/span>(app.phase, <span class=\"hljs-number\">2<\/span>*<span class=\"hljs-built_in\">pi<\/span>) - <span class=\"hljs-number\">2<\/span>*<span class=\"hljs-built_in\">pi<\/span>\/<span class=\"hljs-number\">3<\/span>), <span class=\"hljs-string\">'LineWidth'<\/span>,<span class=\"hljs-number\">2<\/span>);\n    <span class=\"hljs-built_in\">plot<\/span>(app.UIAxes, app.x, app.amplitude.*<span class=\"hljs-built_in\">sin<\/span>(app.x+<span class=\"hljs-built_in\">mod<\/span>(app.phase, <span class=\"hljs-number\">2<\/span>*<span class=\"hljs-built_in\">pi<\/span>) + <span class=\"hljs-number\">2<\/span>*<span class=\"hljs-built_in\">pi<\/span>\/<span class=\"hljs-number\">3<\/span>), <span class=\"hljs-string\">'LineWidth'<\/span>,<span class=\"hljs-number\">2<\/span>);\n    <span class=\"hljs-built_in\">hold<\/span>(app.UIAxes,<span class=\"hljs-string\">'off'<\/span>);\n    <span class=\"hljs-built_in\">legend<\/span>(app.UIAxes, <span class=\"hljs-string\">'Va'<\/span>, <span class=\"hljs-string\">'Vb'<\/span>, <span class=\"hljs-string\">'Vc'<\/span>);\n    grid(app.UIAxes, <span class=\"hljs-string\">'on'<\/span>);\n            \n    <span class=\"hljs-comment\">%Change lamp colors<\/span>\n    <span class=\"hljs-keyword\">if<\/span> app.amplitude &lt; <span class=\"hljs-number\">325<\/span>\/<span class=\"hljs-number\">3<\/span>\n        app.HighvoltageWarningLamp.Color = <span class=\"hljs-string\">'green'<\/span>;\n    <span class=\"hljs-keyword\">elseif<\/span> app.amplitude &gt; <span class=\"hljs-number\">325<\/span>\/<span class=\"hljs-number\">3<\/span> &amp;&amp; app.amplitude &lt; <span class=\"hljs-number\">2<\/span>*<span class=\"hljs-number\">325<\/span>\/<span class=\"hljs-number\">3<\/span>\n        app.HighvoltageWarningLamp.Color = <span class=\"hljs-string\">'yellow'<\/span>;\n    <span class=\"hljs-keyword\">else<\/span> \n        app.HighvoltageWarningLamp.Color = <span class=\"hljs-string\">'red'<\/span>;\n    <span class=\"hljs-keyword\">end<\/span>\n<span class=\"hljs-keyword\">end<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Matlab<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">matlab<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"966\" height=\"626\" src=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-28.png\" alt=\"\" class=\"wp-image-12937\" srcset=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-28.png 966w, https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-28-300x194.png 300w, https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-28-768x498.png 768w\" sizes=\"auto, (max-width: 966px) 100vw, 966px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-timer-shutdown\">Timer shutdown<\/h4>\n\n\n\n<p>Finally, timers need to be stopped when closing the application. Similar to the startup function, the <code>UIFigureCloseRequest<\/code> function is called when the application is closed and can therefore be used to stop timers.<\/p>\n\n\n\n<p>To do so:<\/p>\n\n\n\n<ul id=\"block-a1840074-616e-461c-b1bb-14a255cd6393\" class=\"wp-block-list\">\n<li>Right click on the UI Figure (second node) in the <em>Component Browser<\/em>, hover <em>Callbacks, <\/em>and select <em>Add UIFigureCloseRequest callback<\/em>. The function&#8217;s code will be added to the <em>Code View<\/em>.<\/li>\n\n\n\n<li>Add the code below inside the newly created function. It stops and deletes the timer used for the background task.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"C++\" data-shcb-language-slug=\"cpp\"><span><code class=\"hljs language-cpp\">%<span class=\"hljs-function\">Stop timer\n<span class=\"hljs-title\">stop<\/span><span class=\"hljs-params\">(app.timer01)<\/span><\/span>;\n<span class=\"hljs-keyword\">delete<\/span>(app.timer01);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C++<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cpp<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"311\" height=\"141\" src=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-29.png\" alt=\"\" class=\"wp-image-12940\" srcset=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-29.png 311w, https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/07\/image-29-300x136.png 300w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-closing-comments\"><span class=\"ez-toc-section\" id=\"Closing-comments\"><\/span>Closing comments<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"has-text-align-left\">Overall, the development of a Graphical User Interface (GUI) using MATLAB&#8217;s App Designer offers a rapid prototyping capability with minimal required programming expertise. However, a principal limitation of this methodology is the limited performance due to interpreted MATLAB code, which constitutes a CPU-intensive task for the host machine.<\/p>\n\n\n\n<p>Finally, it can be attractive to use GUIs to easily interact with power converters. It can, as further discussed on the page <a href=\"https:\/\/imperix.com\/doc\/implementation\/build-custom-user-interface\">Custom user interface to operate Imperix converters<\/a>, greatly simplify the operation of more complex converters.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This note provides step-by-step guidance for implementing a basic Graphical User Interface (GUI) using MATLAB App Designer. A typical application of such a GUI could&#8230;<\/p>\n","protected":false},"author":11,"featured_media":12973,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[13,3],"tags":[],"software-environments":[103],"provided-results":[],"related-products":[50,31,32,92,166,51,110],"guidedreadings":[],"tutorials":[],"user-manuals":[],"coauthors":[64],"class_list":["post-632","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-going-further-acg-sdk","category-help","software-environments-matlab","related-products-acg-sdk","related-products-b-board-pro","related-products-b-box-rcp","related-products-b-box-micro","related-products-b-box-rcp-3-0","related-products-cpp-sdk","related-products-tpi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>GUI with MATLAB App Designer - imperix<\/title>\n<meta name=\"description\" content=\"This note presents how MATLAB App Designer can be used to build a GUI and exchange data with an imperix controller in real time.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GUI with MATLAB App Designer - imperix\" \/>\n<meta property=\"og:description\" content=\"This note presents how MATLAB App Designer can be used to build a GUI and exchange data with an imperix controller in real time.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer\" \/>\n<meta property=\"og:site_name\" content=\"imperix\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-25T14:28:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-25T14:29:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/03\/3_2_ratio_PN130.png\" \/>\n\t<meta property=\"og:image:width\" content=\"450\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jessy An\u00e7ay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jessy An\u00e7ay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer\"},\"author\":{\"name\":\"Jessy An\u00e7ay\",\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/#\\\/schema\\\/person\\\/53bdc49b53b03a52afee023feef62ea4\"},\"headline\":\"GUI with MATLAB App Designer\",\"datePublished\":\"2021-03-25T14:28:22+00:00\",\"dateModified\":\"2025-11-25T14:29:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer\"},\"wordCount\":1244,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/imperix.com\\\/doc\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/3_2_ratio_PN130.png\",\"articleSection\":[\"Going further with ACG SDK\",\"Product notes\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer\",\"url\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer\",\"name\":\"GUI with MATLAB App Designer - imperix\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/imperix.com\\\/doc\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/3_2_ratio_PN130.png\",\"datePublished\":\"2021-03-25T14:28:22+00:00\",\"dateModified\":\"2025-11-25T14:29:31+00:00\",\"description\":\"This note presents how MATLAB App Designer can be used to build a GUI and exchange data with an imperix controller in real time.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer#primaryimage\",\"url\":\"https:\\\/\\\/imperix.com\\\/doc\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/3_2_ratio_PN130.png\",\"contentUrl\":\"https:\\\/\\\/imperix.com\\\/doc\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/3_2_ratio_PN130.png\",\"width\":450,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/help\\\/gui-with-matlab-app-designer#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Knowledge base\",\"item\":\"https:\\\/\\\/imperix.com\\\/doc\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Product notes\",\"item\":\"https:\\\/\\\/imperix.com\\\/doc\\\/category\\\/help\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"GUI with MATLAB App Designer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/#website\",\"url\":\"https:\\\/\\\/imperix.com\\\/doc\\\/\",\"name\":\"imperix\",\"description\":\"power electronics\",\"publisher\":{\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/imperix.com\\\/doc\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/#organization\",\"name\":\"imperix\",\"url\":\"https:\\\/\\\/imperix.com\\\/doc\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/imperix.com\\\/doc\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/imperix_logo.png\",\"contentUrl\":\"https:\\\/\\\/imperix.com\\\/doc\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/imperix_logo.png\",\"width\":350,\"height\":120,\"caption\":\"imperix\"},\"image\":{\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/imperix.com\\\/doc\\\/#\\\/schema\\\/person\\\/53bdc49b53b03a52afee023feef62ea4\",\"name\":\"Jessy An\u00e7ay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ee54f075f5969fcfd2bf6f348058cf40ca40d54a6472ac7c0a9855d036190d0a?s=96&d=mm&r=g3826f6cf12d7359812a917063d7db3c1\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ee54f075f5969fcfd2bf6f348058cf40ca40d54a6472ac7c0a9855d036190d0a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ee54f075f5969fcfd2bf6f348058cf40ca40d54a6472ac7c0a9855d036190d0a?s=96&d=mm&r=g\",\"caption\":\"Jessy An\u00e7ay\"},\"description\":\"Jessy is a power electronics engineer. At imperix, he is mostly involved with sales and project engineering. On the knowledge base, he is an active contributor to numerous notes and examples on a broad variety of topics.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/jessy-ancay-a47615237\\\/\"],\"url\":\"https:\\\/\\\/imperix.com\\\/doc\\\/author\\\/ancay\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"GUI with MATLAB App Designer - imperix","description":"This note presents how MATLAB App Designer can be used to build a GUI and exchange data with an imperix controller in real time.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer","og_locale":"en_US","og_type":"article","og_title":"GUI with MATLAB App Designer - imperix","og_description":"This note presents how MATLAB App Designer can be used to build a GUI and exchange data with an imperix controller in real time.","og_url":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer","og_site_name":"imperix","article_published_time":"2021-03-25T14:28:22+00:00","article_modified_time":"2025-11-25T14:29:31+00:00","og_image":[{"width":450,"height":300,"url":"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/03\/3_2_ratio_PN130.png","type":"image\/png"}],"author":"Jessy An\u00e7ay","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jessy An\u00e7ay","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer#article","isPartOf":{"@id":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer"},"author":{"name":"Jessy An\u00e7ay","@id":"https:\/\/imperix.com\/doc\/#\/schema\/person\/53bdc49b53b03a52afee023feef62ea4"},"headline":"GUI with MATLAB App Designer","datePublished":"2021-03-25T14:28:22+00:00","dateModified":"2025-11-25T14:29:31+00:00","mainEntityOfPage":{"@id":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer"},"wordCount":1244,"commentCount":0,"publisher":{"@id":"https:\/\/imperix.com\/doc\/#organization"},"image":{"@id":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer#primaryimage"},"thumbnailUrl":"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/03\/3_2_ratio_PN130.png","articleSection":["Going further with ACG SDK","Product notes"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer#respond"]}]},{"@type":"WebPage","@id":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer","url":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer","name":"GUI with MATLAB App Designer - imperix","isPartOf":{"@id":"https:\/\/imperix.com\/doc\/#website"},"primaryImageOfPage":{"@id":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer#primaryimage"},"image":{"@id":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer#primaryimage"},"thumbnailUrl":"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/03\/3_2_ratio_PN130.png","datePublished":"2021-03-25T14:28:22+00:00","dateModified":"2025-11-25T14:29:31+00:00","description":"This note presents how MATLAB App Designer can be used to build a GUI and exchange data with an imperix controller in real time.","breadcrumb":{"@id":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer#primaryimage","url":"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/03\/3_2_ratio_PN130.png","contentUrl":"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2022\/03\/3_2_ratio_PN130.png","width":450,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/imperix.com\/doc\/help\/gui-with-matlab-app-designer#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Knowledge base","item":"https:\/\/imperix.com\/doc\/"},{"@type":"ListItem","position":2,"name":"Product notes","item":"https:\/\/imperix.com\/doc\/category\/help"},{"@type":"ListItem","position":3,"name":"GUI with MATLAB App Designer"}]},{"@type":"WebSite","@id":"https:\/\/imperix.com\/doc\/#website","url":"https:\/\/imperix.com\/doc\/","name":"imperix","description":"power electronics","publisher":{"@id":"https:\/\/imperix.com\/doc\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/imperix.com\/doc\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/imperix.com\/doc\/#organization","name":"imperix","url":"https:\/\/imperix.com\/doc\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/imperix.com\/doc\/#\/schema\/logo\/image\/","url":"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2021\/03\/imperix_logo.png","contentUrl":"https:\/\/imperix.com\/doc\/wp-content\/uploads\/2021\/03\/imperix_logo.png","width":350,"height":120,"caption":"imperix"},"image":{"@id":"https:\/\/imperix.com\/doc\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/imperix.com\/doc\/#\/schema\/person\/53bdc49b53b03a52afee023feef62ea4","name":"Jessy An\u00e7ay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ee54f075f5969fcfd2bf6f348058cf40ca40d54a6472ac7c0a9855d036190d0a?s=96&d=mm&r=g3826f6cf12d7359812a917063d7db3c1","url":"https:\/\/secure.gravatar.com\/avatar\/ee54f075f5969fcfd2bf6f348058cf40ca40d54a6472ac7c0a9855d036190d0a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ee54f075f5969fcfd2bf6f348058cf40ca40d54a6472ac7c0a9855d036190d0a?s=96&d=mm&r=g","caption":"Jessy An\u00e7ay"},"description":"Jessy is a power electronics engineer. At imperix, he is mostly involved with sales and project engineering. On the knowledge base, he is an active contributor to numerous notes and examples on a broad variety of topics.","sameAs":["https:\/\/www.linkedin.com\/in\/jessy-ancay-a47615237\/"],"url":"https:\/\/imperix.com\/doc\/author\/ancay"}]}},"_links":{"self":[{"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/posts\/632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/comments?post=632"}],"version-history":[{"count":42,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/posts\/632\/revisions"}],"predecessor-version":[{"id":37545,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/posts\/632\/revisions\/37545"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/media\/12973"}],"wp:attachment":[{"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/media?parent=632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/categories?post=632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/tags?post=632"},{"taxonomy":"software-environments","embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/software-environments?post=632"},{"taxonomy":"provided-results","embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/provided-results?post=632"},{"taxonomy":"related-products","embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/related-products?post=632"},{"taxonomy":"guidedreadings","embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/guidedreadings?post=632"},{"taxonomy":"tutorials","embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/tutorials?post=632"},{"taxonomy":"user-manuals","embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/user-manuals?post=632"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/imperix.com\/doc\/wp-json\/wp\/v2\/coauthors?post=632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}