Create a graphical user interface using App Designer that obtains input from a user and marks locations on a map as specified by the user.

Preparation:

Refer to the class lecture and book chapter on Object Oriented Programming to obtain a good understanding of object classes and properties.

Watch the three videos posted on the course website related to App Designer.

Deliverables:

After completion of the lab project, you are required to submit the output files on Canvas (the .m file of the Application along with the associated .mlapp)        More information on are found later in the document. You can create the .m     file by the export to .m option in the save section.

Introduction to App Designer

APP Designer

App Designer lets you create professional apps without having to be a                professional software developer. Drag and drop visual components to lay out the design of your graphical user interface (GUI) and use the integrated editor to quickly program its behavior.

Share your apps using MATLAB Drivem, or by creating standalone desktop or web apps with MATLAB Compilerm and Simulink Compilerm.

The below Mathworks link gives you an overall idea of the App Designer.

Mathworks AppDesginer

Guide to Create a new app:

You can either in the command windows type in the command appdesigner or

From the top left part of the Matlab Home page open a new app then press “Blank App” to create a new app.

You will see, a blank app as below,

In the center, access is provided to two programming windows. One programming window is the Design View and the other programming window is Code View.

On the left of the screen is the Component Library.

Explore more about the various components in the component library by referring to the link Component Library

On  the  right  of  the  screen  are  found  the  Component  Browser  and  the  Component Properties.

The layout is done in the Design View window, in the following manner:

From the Component Browser menu, drag the following component and drop them on the light grey area in the app designer. The Design View is the interface that programmer wants to interact with the user. It’s easy to add and delete components in the Design View at any stage of programming making it flexible to program.

For this lab project from the component browser select Axes, to plot the Map image provided so it is easy to map the points provided by the user on to map.

Two Buttons  (change the name into “Import Image” and “Mark the Image” using double click), These buttons are used to improve user interface.

Two Edit Fields (change name to x1 and y1) are for the user to enter the points to be plotted. And create the following design by changing the name of each element.

While this is the basic version of designing you are encouraged to use more components and make your app more creative and interesting to work with.

At this point if you change the view from design to code you will see the following codes in dark grey corresponding to the components you have added. The app designer adds the basic code to the components added in the design view which cannot be modified, any extra code to be added can be added as callbacks to the components or as methods or you could add startup functions which runs as soon as the app is run, this could be helpful to add any default functionalities of the app without any user input. For ex, for this lab project the x1 and y1 field could default be 100 respectively.

Go back to Design view and right click on the “Import Image” button and select the callback function.

Action such as pressing a button or entering a value in a field component are performed by “callback functions” .  A callback function will execute the block of code of that component whenever the predefined event happens. You can add a call back from the following section or by doing the right click on the component.

Write the following lines in the white space for the callback function to the Import Image button. The following code is used to load the image onto the axis component of the app to plot the points.

[filename,filepath] =uigetfile({'*.jpg;*.png;*.bmp'}, 'Select File to Open');

fullname = [filepath, filename];

im = imread(fullname);

image(app.UIAxes,'CData',im);

(**use the flip(im) in the image function if the image is plotted in reverse**)

Now save and run the program. Then in the app pop up press the Import Image button and select the “Campus Map.png” image provided for this Mini Project in Canvas.

You can adjust the axis to just the range of the image size using size(im) and setting the axis limits using xlim( ) and ylim( ) functions.

Now we would like to write a code that takes the input as the pixel value in the format of (x1, y1) and mark on the picture at the specified x1,y1 axis point when the mark the image button is pressed.

(A good question to have in mind while coding is in which callback you should write your code).

For doing the following code you will need to make the variable “im” into a property of the class by pressing the plus button in the following picture and change the name of property into im.

You can access to this property named im within any function/callback by referring to it as app.im.