Appendix AF. Developing Matlab Live Scripts and Apps


The usual way of developing programs in Matlab is to write scripts or functions, developed and used in a screen environment similar that I have shown before. In these environments, you can change the values of parameters by typing them into the editor window or the command line. If there are many parameters and selections to explore, the cycle of editing and re-running can be slow and cumbersome, For example, “DenomAdditionDemo.m” has nine adjustable interacting variables. Its purpose is to demonstrate the Fourier self-deconvolution of a pair overlapping peaks, with the aim of increasing the resolution of the peaks and thus improving the accuracy of the peak areas measured by the perpendicular drop method. The sequence of computations is:
(1) create the simulated signal with two peaks and random noise,
(2) create a zero-centered convolution function of the same shape and with variable width,
(3) divide the Fourier transform of the simulated signal by the modified Fourier transform of a calculated convolution function of the same shape,
(4) add a constant to the numerator of that division to reduce noise spikes,
(5) compute the inverse transform that result, and
(6) apply low-pass filtering to reduce noise.

To demonstrate the performance of this method, several factors must be adjusted: the shape, width, sampling interval, and separation of the two peaks, the noise amplitude, the width of the deconvolution function, the denominator addition, and the filter cutoff frequency. To do this, you would have to edit the script, save it, and re-run it, potentially many times. In this appendix, we will develop two different alternative ways to code this deconvolution demo with a more modern graphical user interface (GUI) that uses sliders, drop-down menus, check boxes, etc., to control the adjustable variables, rather than editing the script itself.

Matlab Live Scripts. A very easy alternative is to use Live Scripts (available starting in MATLAB R2016b), which are interactive documents that combines code, output, controllers, and formatted text in a single environment. To convert the plain script DenomAdditionDemo.m into a Live Script, click Editor, Save as, Save as type > Live Code files (.mlx). To add controllers for the assignment statements, (e.g. delta=0.64), select the value, click Control, and select the an appropriate control, for example a numeric slider or spinner for continuous variables. Then in the pop-up box, type in the min, max, and step values for that control. The editor adds a numeric slider like this:   You can also use a drop down menu for discrete selections, such as peak shape menu in this example. PeakShape= and then adding items to the menu and a switch/case statement in the code to process the different choices.

You edit any of the controls by double-clicking on them. The edit pop-up box for sliders allows you to set the minimum, maximum, and step of its numerical range. Sliders can be set to run on "Value changing" or on "Value changed". The former means that the program recalculates continuously as the slider is moved back and forth, and the later means that the program recalculates only when the mouse button is released. The latter setting is better if the recalculation is slow. You can also create and run "sections" of code, as explained in the Matlab documentation.

Here is a Live Script version of the self-deconvolution demonstration app, computationally equivalent to the “DenomAdditionDemo.m” function. It has sliders for each of the adjustable variables, which allows those variables to be changed simply by sliding the pointers. Each slider has a numerical range that you can set to be in a “reasonable range” for that variable simply by double-clicking on the slider. Moreover, the app has a pull-down menu to choose the peak shape (Gaussian, Lorentzian, etc.) and checkboxes for optional computation of frequency spectrum and of the peak area measurement accuracy. When any of these controls is changed, the app recalculates and updates the plots continuously as the slider pointer is moved.




Note 1: to view the graphic plots to the right of the code, as shown above, right-click on the empty space on the right and select "Disable synchronous scrolling".

Note 2: To make very small adjustments to the numerical sliders, you can click once on the little pointer to turn it green, then use your left and right cursor control keys on your keyboard to make incremental single-step adjustments. To increase tor decrease the numerical range of any slider, just double-click on it and modify the min, max and/or step values.

For users to do not need access to the code, you can hide it from view by clicking on the View tab and clicking “Hide Code”. For more details, see this page, or these examples.

In addition to this demonstration script, there is also a version for applying the method to experimental data stored on disk in .xlsx or .csv format, called DeconvoluteData.mlx (screen image). Clicking the Open data file button in line 1 opens a file browser, allowing you to navigate to your data file.  The script assumes that your x,y data are in .csv or .xlsx format and in the first two columns.

Other example of Live scripts include tools for smoothing, peak detection, and iterative peak fitting.

Matlab Apps. There is another development path that results in programs with an even more contemporary and polished graphical user interface (GUI). This is ideal for deployment to users who do not need to have access to the underlying code, to prevent accidental editing or deletion of portions of the script. These are called Matlab “apps”. There are examples of them in the toolboxes that may be included in your version of Matlab (or can be optionally purchased from Matlab); type “ver” at the command line to see which ones are included in yours. The process of development of such apps is more complex than coding the mathematically equivalent Live Script or function. But fortunately, Matlab has a built-in drag-and-drop development environment to build user interfaces; just click on the APPS button at the top left. This brings up several app-related buttons as well as a list of apps already installed.

Clicking the Design App button, or typing “appdesigner” at the command prompt, brings up the App Designer screen, which has two main modes, selected by buttons on the right: the Design View and the Code View. In the Design View, you build your user interface - the "look" of your app - which might include menus, buttons, controls, tables, graphs, etc. You do this by selecting from a large list of components (displayed on the left), dragging and dropping the ones your need onto the blank layout on the right, and arranging them as you wish. Each of these is automatically accompanied by the computer code for its own operation. For example, if you add a Drop Down menu, it already knows how to operate itself, that is, to animate the menu dropping down and your mouse pointer selecting an item. Of course, what happens when you make a selec tion depends on the purpose of  your app, and so naturally you must provide that code, which is called a "callback function". The same goes for all those components. All this code is shown when you click the "Code View" button, both the code that is automatically generated when you add components to your design (shown with a grey background), which you cannot mod ify directly, and the code that you can type in to perform the desired calculations (shown with a white background).

Rather than detail all the required steps here, I will defer to the many excellent tutorials and YouTube videos already available.

For example, there is a video tutorial titled "Getting Started and Hello World app" at https://www.youtube.com/watch?v=iga-YS6VbyE. "Hello World" refers to very first simple example often used for learning a new programming language, which simply writes that phrase on the display.

A more pertinent example is shown on the right. "Create and Run a Simple App Using App Designer" displays a waveform whose amplitude you can interactively control with a slider. There are many such examples that are built into the App Designer. When you click "New" in the Designer mode, you'll get a display (shown below) of several examples that are already constructed. You can learn a lot by studying these.

The advantage of apps, compared to scripts and functions, is that they are easier to use, especially for users who are not programmers. The disadvantage is that they are more complex for the programmer. In fact, the amount of code and of coding time and effort that goes into the user interface design and interactivity usually far exceeds the code that is required for the actual mathematical computations.

  Here is a Matlab app that is the equivalent of the Live Script above. The app has a neater and more refined look than the Live Script above.

You can download the installer from Self-decovolution demo.mlappinstall. The coding required to get all this to work is more complex and a simple script, but the app ends up looking like a finished end-user application. It is easier and more fool-proof for an inexperienced person to operate, but it is significantly more complex that writing a Live Script.

Unfortunately, Octave and Python do not have built-in mobile development capabilities, but there are packages you can use to create mobile applications in Python, like Kivy, PyQt, or Beeware's Toga library. These libraries are all major players in the Python mobile space.

This page is part of "A Pragmatic Introduction to Signal Processing", created and maintained by Prof. Tom O'Haver , Department of Chemistry and Biochemistry, The University of Maryland at College Park. Comments, suggestions and questions should be directed to Prof. O'Haver at toh@umd.edu. Updated May, 2023.