7/24/2019 GUI Design Matlab Report
1/24
EC 247 COMPUTING FOR ENGINEERS
ASSIGNMENT 1
GRAPHICAL USER INTERFACE DESIGN
LECTURERS IN-CHARGE MS. LAKMINI MALASINGHE /MS. SWAPNA PREMASIRI
Submitted By:EN 14535468 Kau!a"#a S$A$D$T$P
On 4thof September 2015
7/24/2019 GUI Design Matlab Report
2/24
Abstract
7/24/2019 GUI Design Matlab Report
3/24
This report describes the working process of a MATLAB-based GUI which is useful for image
processing and image qualit assessment!This Image "rocessing Application helps user to easil modif
images# the Image $ualit Ad%ustment Application enables to create series of pictures with different
qualit! Image processing is one of the most important area of multimedia applications and it is known#
these applications can be found almost e&erwhere in the modern world! Because of that# the number of
people working with images is rapidl increasing which means# that demand for image processing toolsalso grows!The Image "rocessing Application helps user to easil modif images!
Table of Contents
7/24/2019 GUI Design Matlab Report
4/24
Table of figures
7/24/2019 GUI Design Matlab Report
5/24
Introduction
7/24/2019 GUI Design Matlab Report
6/24
In imaging science# image processing is processing of images using mathematical operations b using
an form of signal processing for which the input is an image# such as a photograph or &ideo frame' the
output of image processing ma 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 e&er
growing importance of scientific &isuali(ation )*+
MATLAB is built around a programming language# and as such it,s reall designed with tool-building in
mind! Guide etends 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! .ust 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# ou can la out a comple graphical tool in minutes! /nce our buttons and plots are
in place# the Guide 0allback 1ditor lets ou set up the MATLAB code that gets eecuted when a
particular button is pressed!
GUI21 is MATLAB,s Graphical User Interface 3GUI4 2e&elopment 1n&ironment! A graphical user
interface 3GUI4 is a user interface built with graphical ob%ects# such as buttons# tet fields# sliders# and
menus! In general# these ob%ects alread ha&e meanings to most computer users!The Image "rocessing
Application helps user to easil modif images# the Image $ualit Ad%ustment Application enables to
create series of pictures with different qualit! Applications that pro&ide GUIs are generall easier to
learn and use since the person using the application does not need to know what commands are a&ailable
or how the work! The action that results from a particular user action can be made clear b 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 e&erwhere in the modern world! Because of that# the number of
people working with images is rapidl increasing which means# that demand for image processing tools
also grows! Images are being compressed# decompressed# sent o&er the internet# modified or distorted in
&arious was and all these things affect their qualit! It is the ke element for multimedia to be able to
assess the qualit changes# predict them and e&entuall correct them! The best wa of qualit assessment
is sub%ecti&e testing b a group of human obser&ers but it is time-consuming and costl# the conditions
of measurement must be precise and obser&ers must be well instructed! )5+
Design Objectives
7/24/2019 GUI Design Matlab Report
7/24
Designingthe GUI
Laying outthe GUI
Programming the GUI
Saingan!
Runningthe GUI
Main purpose of this assignment is to designing a Matlab GUI to load an image and perform &arious
image pre-processing operations! "ro%ect ob%ecti&es can be subdi&ided in to following!
Application of se&eral methods to anal(e and impro&e digital images!
Anal(e the effect of each method when it is applied on to an image!
0ompare and contrast methods according to the qualit of the final image obtained! Anal(ing further impro&ements that can be made to impro&e the image qualit!
Design Process
MATLAB implements GUIs as figure windows containing &arious stles of uicontrol ob%ects! 6ou must
program each ob%ect to perform the intended action when acti&ated b the user of the GUI! In addition#
ou must be able to sa&e graphical user interface de&elopment en&ironment! The process of
implementing a GUI in&ol&es two basic tasks )7+
Laing out the GUI components
"rogramming the GUI component!
Tpical stages of creating image processing GUI can be epressed as follows!
GUI Structure
Figure 1: GUI Design P
7/24/2019 GUI Design Matlab Report
8/24
User In"ut#"tions
$uttonPress
#"tion
%omman!Entering#"tion
S&i!er $ar
In'$ui&t(un)tions
mage (i&ters $rightness %o&orings We*)am #rientations
Figure 2: Design structure
Design Functions
GUI Implementation
8hile it is possible to write an M-file that contains all the commands to la
out a GUI# it is easier to use GUI21 to la out the components
interacti&el and to generate two files that sa&e and launch the GUI namel
Rotate
(&i"
Hori+ont (&i" ,ert
$&a)-
White Grays)a&e
Negatie
(i&ters
E!ges
%ontrast
Re!
Green
$&ue
7/24/2019 GUI Design Matlab Report
9/24
9IG-file
0ontains a complete description of the GUI figure and all of its children 3uicontrols and aes4#
as well as the &alues of all ob%ect properties!
M-file
0ontains the functions that launch and control the GUI and the callbacks# which are defined assub 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 las out the
uicontrols' this information is sa&ed in the 9IG-file!
The following diagram illustrates the parts of a GUI implementation!
Figure 3: GUI layout
7/24/2019 GUI Design Matlab Report
10/24
Uicontrols
"ush buttons
:adio buttons
0heckboes
UI editable tet
UI static tet
;liders
9rames
List boes
"op-up menus
Callbac !ditor
0allback 1ditor lets user modif the callbacks of selected ob%ects! User can change multiple lines of
code at once using the 1dit Bo! The 1dit Bo also makes it easier to enter
7/24/2019 GUI Design Matlab Report
11/24
In this section# we suggest a road map adopted for creating GUI in MATLAB! Like e&erthing
associated with design# this reall amounts to some suggestions about how to think# rather than a step-
b-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! )=+
Design Goals
;implicit
;implicit in this design is our chief goal! This GUI has a clean look and a sense of unit! It,s &er eas
to add functionalit to the GUI but if that functionalit reall doesn,t belong# take it out! This design
a&oid screen clutter# and onl present users with choices that ad&ance them toward the completion of the
task!
0onsistenc
The further users are from their base of eperience# the more likel the are to feel disoriented! Anthing
ou one can do to keep the user from feeling confused is etraordinaril important!
9amiliarit
This GUI that created is in some sense familiar to its users# then the user can generall learn how to use
it more quickl! User,s real world eperience can bridge the gap between the onscreen eperience and
the data it represents!
Figure 5: DesignPhase
7/24/2019 GUI Design Matlab Report
12/24
Final Design
Figure 6: Final GUI layout
Figure 7: GUI interace once !un
7/24/2019 GUI Design Matlab Report
13/24
Design Functions
"o# to $oad an image on to A%es
In this design user can simpl load whate&er the image he want to edit using the L/A2 pushbutton!/nce it is pressed it automaticall goes to windows file browser to select image from the file browser of
the computer!
If the user clicks cancels without selecting an image properl# it will print 1rror! /therwise the selected
image will load on to the aes *! "ath name of the image will be displaed automaticall!
Color Filters
In this function user has the capabilit change the color of the image which has loaded on to the aes!
This GUI basicall supports 7 color filters namel :ed Green > Blue! 7 separate buttons are a&ailable
for the user to select whate&er the color filter he wish! 0orresponding filtered image will then be loaded
on to the aes 5 of the GUI!
Figure ": !esults i user cancels
Figure # $oa% &utton
Figure 1': Final !esults o $oa% option
7/24/2019 GUI Design Matlab Report
14/24
Orientation Options
;et of buttons are a&ailable for the user tochange the orientation of the image he has loaded on to the aes *! This GUI supports basicall 7 main
orientation &ariations! ?amel 9lip &ertical #9lip
7/24/2019 GUI Design Matlab Report
15/24
Figure 13: +rientation &uttons
Image !ffects
This GUI basicall supports @ main effects which can be applied on to the image which has been
selected on to the aes *! 0orresponding edited image will be displaed on the aes 5! User has to insert
a command b clicking on the corresponding push button! Image effects a&ailable for this GUI 2esign
are Black > 8hite# Grascale# ?egati&e# 9ilters# 1dges# 0ontrast! In edges option# this GUI uses
0ann, method of edge detection!
Figure 14 : ,ori-ontal Flip
Figure 15: .s/ing user input in
Figure 16: !otate the image )y an angle o 12'0
7/24/2019 GUI Design Matlab Report
16/24
Ot&er Options
:eset 0ommand will undo all the effects which has been brought about to the image in aes 5 itwill simpl shows the original image which is simpl loaded on to the GUI intiall b the user!
1it command will shutdown and close the ongoing GUI without sa&ing anthing
;a&e option enables the user to sa&e edited image on aes 5 on to the computer! /nce it is
pressed it asks the user to gi&e a image name and the file folder loaction which needs to be sa&ed
at!
7/24/2019 GUI Design Matlab Report
17/24
'rig&tness
In this GUI a slider has been used to change the brightness le&el! B dragging the slider user can change
the brightness le&el as he desired!
Command !ntering Option
/ne of the basic features a&ailable on this GUI design is 0ommand 1ntering option! It gi&es the abilit
of entering the command on the edit tet bo and eecute rather than pressing the switch buttons! ?ow
the user has the abilit tpe the command and press eecute button to run whate&er the imageprocessing! GUI design takes the inputs as a string and eecute the command as switch statements!
User has the capabilit to change the switch statements using the callback function!
Figure 17: ae imageoutput
Figure 1": (omman% ntering
7/24/2019 GUI Design Matlab Report
18/24
Call bac Functions
UI and graphics components ha&e certain properties that one can associate with specific callback
functions! 1ach of these properties corresponds to a specific user action! 1ach uicontrol has a propert
called 0allback! User can set the &alue of this propert to be a handle to a callback function# an
anonmous function# or a string containing MATLABcommands! ;etting this propert makes UI
respond when the user interacts with the uicontrol! If the 0allback propert has no specified &alue# then
nothing happens when the end user interacts with the uicontrol! )C+
0oding the beha&ior of a UI component in&ol&es specific tasks that are unique to the tpe of component
ou are working with! This section of the report contains callbacks for each tpe of components we ha&e
used in image processing!
7/24/2019 GUI Design Matlab Report
19/24
To $oad an image on to A%es
To save t&e edited image
To reset t&e edited image
Call bacs on image effects
7/24/2019 GUI Design Matlab Report
20/24
Call bacs on Image Orientations
7/24/2019 GUI Design Matlab Report
21/24
Call bacs on 'rig&tness Slider
Call bacs on color filters
7/24/2019 GUI Design Matlab Report
22/24
Call bacs on triggering t&e (ebcam
Conclusions
7/24/2019 GUI Design Matlab Report
23/24
MATLAB is well known for its numerical problem sol&ing power! Traditionall programs written b
engineers ha&e &er simple interfaces# and often onl the author is the one who uses the program once it
is completed! There are occasions where a more polished user interface# specificall a graphical user
interface 3GUI4 is desired! The main purpose of this assignment is to build a GUI for image processing!
The Image "rocessing Application helps user to easil modif images# the Image $ualit Ad%ustment
Application enables to create series of pictures with different qualit! Applications that pro&ide GUIs aregenerall easier to learn and use since the person using the application does not need to know what
commands are a&ailable or how the work!
Main functions a&ailable on the GUI designed were broadl discussed in this report! 9inall I can
conclude that this Image "rocessing GUI gi&es a new eperience for the user! Most of the functions used
here are adopted in a user-friendl manner! As final recommendations# it is suggested that this GUI
2esign can be further de&eloped b adding more functions! :eaction time for the button eecutions can
be further brought down b using smart and efficient coding in the callbacks!
)eferences
0
1
htt"s2//en.3i-i"e!ia.org/3i-i/Image4"ro)essing5 6Image "ro)essing6.
71
M. K. E. R. E. 8. Lu-9: KRASULA5 6MA;LA$'*ase! A""&i)ations
7/24/2019 GUI Design Matlab Report
24/24