Material on Creating Apps with App Designer

Through a sequence of three videos, we describe the development of an interactive MATLAB program that enables the user to view data about the production and consumption of different energy sources in the US. The program incorporates a graphical user interface (GUI) and was created with a MATLAB tool called App Designer. The first video provides an overview of App Designer and the process of building a GUI based program with this tool. The second video delves more deeply into the creation of the visual layout for the graphical user interface. Finally, the third video walks you through the process of writing code to implement actions that the program performs in response to the user's interaction with the GUI.

New! Three new videos have been created that explore two more examples of Apps. The first two videos describe an App that demonstrates the visual phenomenon of Change Blindness, our remarkable inability to notice large changes taking place in our visual environment. The first of this video sequence demonstrates the program and describes new aspects of the visual layout used in this App. The second video examines the code that implements the actions in this program. The final video explores some fun things you can do with MATLAB, including built-in MATLAB demos, and also introduces some new GUI components along the way.

Lecture Videos

The following links take you to the three videos on the creation of an App using MATLAB's App Designer, posted on YouTube (unlisted videos):

The video files are also stored in a folder on Google Drive that we will share with you separately. The three video files in this folder are named introAppDesigner.mp4 (348 MB), appLayout.mp4 (310 MB), and appCoding.mp4 (699 MB).

New! The three new videos on the Apps for demonstrating Change Blindness and having fun with MATLAB, are also posted on YouTube:

These videos are also contained in our shared folder on Google Drive and are named changeBlind.mp4 (245 MB), changeBlindCode.mp4 (369 MB), and funApp.mp4 (244 MB).

Video Transcripts

The following pdf files provide transcripts of the three videos, including images of screenshots and code segments shown at a higher resolution than you will see on the video:

These pdf files are also stored in the shared folder on Google Drive.

New! Transcripts for the three new videos can be found here:

These pdf files are also stored in the shared folder on Google Drive.

Code Files

Code for the energyApp program can be found in the download folder in the cs112 course directory on the CS file server, in a folder named energy (also stored in the shared Google folder).

New! Code for the Change Blindness App can be found in the changeBlind folder, and code for the Fun MATLAB Demonstrations App can be found in the fun folder, both in the course download folder on the CS server. These code folders can also be found in the shared folder on Google Drive.

MATLAB Documentation

Additional videos and documentation about App Designer can be found at the Mathworks website. It is not essential that you review this material, as we will provide essential background in our own videos and documentation, but if you would like to explore other sources, here are some useful starting points: