EC 247 – COMPUTING FOR ENGINEERS

ASSIGNMENT 1

GRAPHICAL USER INTERFACE DESIGN

LECTURERS IN-CHARGE –MS. LAKMINI MALASINGHE /

MS. SWAPNA PREMASIRI

Submitted By:
EN 14535468 – Kaushalya S.A.D.T.P
On 4th of September 2015
Abstract
This report describes the working process of a MATLAB-based GUI which is useful for image
processing and image quality assessment. This Image Processing Application helps user to easily modify
images, the Image Quality Adjustment Application enables to create series of pictures with different
quality. Image processing is one of the most important area of multimedia applications and it is known,
these applications can be found almost everywhere in the modern world. Because of that, the number of
people working with images is rapidly increasing which means, that demand for image processing tools
also grows. The Image Processing Application helps user to easily modify images.

Table of Contents
Table of figures
Introduction
In imaging science, image processing is processing of images using mathematical operations by using
any form of signal processing for which the input is an image, such as a photograph or video frame; the
output of image processing may be either an image or a set of characteristics or parameters related to the
image. In modern sciences and technologies, images also gain much broader scopes due to the ever
growing importance of scientific visualization [1]
MATLAB is built around a programming language, and as such it’s really designed with tool-building in
mind. Guide extends MATLAB’s support for rapid coding into the realm of building GUIs. Guide is a
set of MATLAB tools designed to make building GUIs easier and faster. Just as writing math in
MATLAB is much like writing it on paper, building a GUI with Guide is much like drawing one on
paper. As a result, you can lay out a complex graphical tool in minutes. Once your buttons and plots are
in place, the Guide Callback Editor lets you set up the MATLAB code that gets executed when a
particular button is pressed.
GUIDE is MATLAB’s Graphical User Interface (GUI) Development Environment. A graphical user
interface (GUI) is a user interface built with graphical objects, such as buttons, text fields, sliders, and
menus. In general, these objects already have meanings to most computer users. The Image Processing
Application helps user to easily modify images, the Image Quality Adjustment Application enables to
create series of pictures with different quality. Applications that provide GUIs are generally easier to
learn and use since the person using the application does not need to know what commands are available
or how they work. The action that results from a particular user action can be made clear by the design
of the interface.
Image processing is one of the most important area of multimedia applications and it is known, these
applications can be found almost everywhere in the modern world. Because of that, the number of
people working with images is rapidly increasing which means, that demand for image processing tools
also grows. Images are being compressed, decompressed, sent over the internet, modified or distorted in
various ways and all these things affect their quality. It is the key element for multimedia to be able to
assess the quality changes, predict them and eventually correct them. The best way of quality assessment
is subjective testing by a group of human observers but it is time-consuming and costly, the conditions
of measurement must be precise and observers must be well instructed. [2]

Design Objectives
Main purpose of this assignment is to designing a Matlab GUI to load an image and perform various
image pre-processing operations. Project objectives can be subdivided in to following.
 Application of several methods to analyze and improve digital images.
 Analyze the effect of each method when it is applied on to an image.
 Compare and contrast methods according to the quality of the final image obtained.
 Analyzing further improvements that can be made to improve the image quality.

Design Process

MATLAB implements GUIs as figure windows containing various styles of uicontrol objects. You must
program each object to perform the intended action when activated by the user of the GUI. In addition,
you must be able to save graphical user interface development environment. The process of
implementing a GUI involves two basic tasks [3]
 Laying out the GUI components
 Programming the GUI component.

Typical stages of creating image processing GUI can be expressed as follows.

Saving
Designing Laying out Programmi and
the GUI the GUI ng the GUI Running
the GUI

Figure 1: GUI Design Process

GUI Structure
 User Input
Options

Button Command
Press Entering Slider Bar
Option Option

Figure 2: Design structure

Design Functions

In-Built
Functions

Image Filters
Black & Brightness
White
Colorings
 Red Webcam Orientations  Rotate
 Green  Flip
 Grayscale Horizontally
 Blue
 Negative  Flip Vertically
 Filters
 Edges
 Contrast

GUI Implementation

While it is possible to write an M-file that contains all the commands to lay
out a GUI, it is easier to use GUIDE to lay out the components
interactively and to generate two files that save and launch the GUI namely
  FIG-file
Contains a complete description of the GUI figure and all of its children (uicontrols and axes),
as well as the values of all object properties.

 M-file
Contains the functions that launch and control the GUI and the callbacks, which are defined as
sub functions. This M-file is referred to as the application M-file in this documentation. It is
important to note that the application M-file does not contain the code that lays out the
uicontrols; this information is saved in the FIG-file.

The following diagram illustrates the parts of a GUI implementation.

Figure 3: GUI layout

 Figure 4: GUI Implementation Parts

Uicontrols

 Push buttons
 Radio buttons
 Checkboxes
 UI editable text
 UI static text
 Sliders
 Frames
 List boxes
 Pop-up menus

Callback Editor

Callback Editor lets user modify the callbacks of selected objects. User can change multiple lines of
code at once using the Edit Box. The Edit Box also makes it easier to enter Handle Graphics code
because it allows user to omit nested quotes and enter code on multiple lines. User can initialize the
Callback editor by entering cbedit from the MATLAB prompt, or by clicking on the appropriate button
in the Control Panel.

Design Principles
In this section, we suggest a road map adopted for creating GUI in MATLAB. Like everything
associated with design, this really amounts to some suggestions about how to think, rather than a step-
by-step recipe. It’s helpful to think about the GUI creation process as breaking into a design phase and
an implementation phase. This concept is illustrated in the diagram below. [4]

Figure 5: Design
Design Goals Phase

 Simplicity
Simplicity in this design is our chief goal. This GUI has a clean look and a sense of unity. It’s very easy
to add functionality to the GUI but if that functionality really doesn’t belong, take it out. This design
avoid screen clutter, and only present users with choices that advance them toward the completion of the
task.
 Consistency
The further users are from their base of experience, the more likely they are to feel disoriented. Anything
you one can do to keep the user from feeling confused is extraordinarily important.
 Familiarity
This GUI that created is in some sense familiar to its users, then the user can generally learn how to use
it more quickly. User’s real world experience can bridge the gap between the onscreen experience and
the data it represents.
Final Design

Figure 6: Final GUI layout

Figure 7: GUI interface once Run

Design Functions

How to Load an image on to Axes

In this design user can simply load whatever the image he want to edit using the LOAD pushbutton.
Once it is pressed it automatically goes to windows file browser to select image from the file browser of
the computer.
If the user clicks cancels without selecting an image properly, it will print Error. Otherwise the selected
image will load on to the axes 1. Path name of the image will be displayed automatically.

Figure 9 Load Button

Results
Figure 8: Results if user cancels

Figure 10: Final Results of Load option

Color Filters
In this function user has the capability change the color of the image which has loaded on to the axes.
This GUI basically supports 3 color filters namely Red Green & Blue. 3 separate buttons are available
for the user to select whatever the color filter he wish. Corresponding filtered image will then be loaded
on to the axes 2 of the GUI.
 Figure 11: Color selection Push
buttons

Orientation Figure 12: Corresponding Results for Green Color

Options
filter
Set of buttons are available for the user to
change the orientation of the image he has loaded on to the axes 1. This GUI supports basically 3 main
orientation variations. Namely Flip vertical ,Flip Horizontal and Rotate option. One important feature of
this GUI is that it ask the user to enter the no. of degrees that the user expects to rotate the final image.
Once the value enters GUI rotates the image by exact angle which user asked.
Figure 13: Orientation Buttons

Figure 14 : Horizontal Flip

Figure 15: Asking user input in

rotate option

Figure 16: Rotate the image by an angle of 120'

Image Effects

This GUI basically supports 6 main effects which can be applied on to the image which has been
selected on to the axes 1. Corresponding edited image will be displayed on the axes 2. User has to insert
a command by clicking on the corresponding push button. Image effects available for this GUI Design
are Black & White, Grayscale, Negative, Filters, Edges, Contrast. In edges option, this GUI uses
‘Canny’ method of edge detection.
 Other Options

 Reset Command will undo all the effects which has been brought about to the image in axes 2 it
will simply shows the original image which is simply loaded on to the GUI intially by the user.
 Exit command will shutdown and close the ongoing GUI without saving anything
 Save option enables the user to save edited image on axes 2 on to the computer. Once it is
pressed it asks the user to give a image name and the file folder loaction which needs to be saved
at.
 Figure 17: Save image
output

Brightness
In this GUI a slider has been used to change the brightness level. By dragging the slider user can change
the brightness level as he desired.

Command Entering Option

One of the basic features available on this GUI design is Command Entering option. It gives the ability
of entering the command on the edit text box and execute rather than pressing the switch buttons. Now
the user has the ability type the command and press execute button to run whatever the image
processing. GUI design takes the inputs as a string and execute the command as switch statements.
User has the capability to change the switch statements using the callback function.

Figure 18: Command Entering

prompt
 Call back Functions
UI and graphics components have certain properties that one can associate with specific callback
functions. Each of these properties corresponds to a specific user action. Each uicontrol has a property
called Callback. User can set the value of this property to be a handle to a callback function, an
anonymous function, or a string containing MATLAB® commands. Setting this property makes UI
respond when the user interacts with the uicontrol. If the Callback property has no specified value, then
nothing happens when the end user interacts with the uicontrol. [5]
Coding the behavior of a UI component involves specific tasks that are unique to the type of component
you are working with. This section of the report contains callbacks for each type of components we have
used in image processing.
To Load an image on to Axes

To save the edited image

To reset the edited image

Call backs on image effects

Call backs on Image Orientations
Call backs on Brightness Slider

Call backs on color filters

Call backs on triggering the Webcam

Conclusions
MATLAB is well known for its numerical problem solving power. Traditionally programs written by
engineers have very simple interfaces, and often only the author is the one who uses the program once it
is completed. There are occasions where a more polished user interface, specifically a graphical user
interface (GUI) is desired. The main purpose of this assignment is to build a GUI for image processing.
The Image Processing Application helps user to easily modify images, the Image Quality Adjustment
Application enables to create series of pictures with different quality. Applications that provide GUIs are
generally easier to learn and use since the person using the application does not need to know what
commands are available or how they work.
Main functions available on the GUI designed were broadly discussed in this report. Finally I can
conclude that this Image Processing GUI gives a new experience for the user. Most of the functions used
here are adopted in a user-friendly manner. As final recommendations, it is suggested that this GUI
Design can be further developed by adding more functions. Reaction time for the button executions can
be further brought down by using smart and efficient coding in the callbacks.

References

[1 https://en.wikipedia.org/wiki/Image_processing, "Image processing".

]

[2 M. K. E. R. E. J. Lukáš KRASULA, "MATLAB-based Applications for Image Processing,"

] http://www.radioeng.cz/fulltexts/2011/11_04_1009_1015.pdf.

[3 Y. Moshi, "Advanced MATLAB Graphics & GUI".

]

[4 "Build GUI," https://courses.cit.cornell.edu/bionb442/GUIdesign/BUILDGUI.PDF.

]

[5 Mathworks, "Writting callbacks,"

] http://in.mathworks.com/help/matlab/creating_guis/write-callbacks-using-the-
programmatic-workflow.html.