ABSTRACT only 2 axis needed,

The assignment introduce a new function in which is:

Matlab which is Graphical User Interface (GUI). • y-axis
There are 2 way in creating a GUI i.e. using • x-axis
GUIDE or manual programming. GUIDE provides
a drag and drop interface to the programmer to
Let f = y-axis = f11
design the GUI layout while creating 2 file i.e. M- and x1 =x-axis = X11
file and FIG file to stores both programming and hence imax = 1 =n
layout. This Assignment, however, uses the f11=i=11i•xi2
another way of creating GUI, i.e. by plain f11=1(x1)2
(manual) programming. The difference between
programming a GUIDE created program and f11= x12
manually program GUI is that a manually since x1=X11
programming created GUI needs a position f11= X12
declaration in every layout button (character),
1. For 2D graph:
which is not needed in GUIDE created M-file.
This assignment shows the way to derive a 1D only 3 axis needed,
and 2D function from a summation equation, The which is
same method can be use at a higher level or • z-axis
dimension. This GUI uses, static text, popup • y-axis
menu, panel, bush button and toggle button as • x-axis
user interface control. Let f = z-axis = f12
x1 = x-axis = X12
Keywords: Matlab, Graphical User Interface, x2 = y-axis = Y12
callbacks, push button, Pop-up menu, hence, imax = 2 = n
f12=i=12i• xi2
INTRODUCTION
A graphical user interface(GUI) is a
f12=1x12+2(x22)
graphical display that contains devices, or f12= x12+2x22
components, that enable a user to perform since x1=X12
interactive tasks. To perform these task, the and x2=Y12
user of the GUI does not have to create a f12= X122+2Y122
script or type commands at the command 1. From the question, -5.12≤xi≤5.12
line. Often, the user does not have to know
All X11, X12, and Y12 comes from the
the detail of the task at hand. The GUI
components can be menus, toolbars, push root xi, hence these 3 item have to
buttons, radio buttons, list boxes, and fit this range
sliders- just to name a few. In Matlab Where:
software, a GUI can also display data in X11 = X12 = Xa
tabular form or as plots, and can group Y12 = Ya
related components.[1] Then,
-5.12≤Xa≤5.12
EQUIPMENTS AND MATERIAL -5.12≤Ya≤5.12
Hence,
➢ Computer For 1D graph, f11= Xa2
➢ Matlab software For 2D graph, f12= Xa2+2Ya2

RESULTS AND DISCUSSION Function 2:

Function 1:

1. This function is also known as

Griewangk’s function.
1. The function above is also known as 2. We only need to plot 1D and 2D
Axis parallel hyper-ellipsoid graphs.
function. 3. For 1D graph:
2. We only need to plot 1D and 2D only 2 axis needed,
graphs. which is:
3. For 1D graph: • y-axis
 • x-axis file and FIG file while programming
Let f = y-axis = f21 a GUI just need a M-file.
and x1 =x-axis = X21 2. Programming a GUI manually with
hence imax = 1 = n M-file will not link the FIG file when
⁡
f21=i=11xi24000-i=11cos(xii)+1 the file is run. Hence the position of
f21 = x124000-cosx11+1 every button should be define in the
programming
since x1=X21
3. To start a GUI programming, the
f21=X2124000-cosX21+1 rough sketch of intended layout
1. For 2D graph: should be done, so as to give clear
only 3 axis needed, big picture to the programmer, what
which is kind of output will he/she get at the
• z-axis end.
• y-axis
• x-axis Figure 1: Sketch of the GUI outcome
Let f = z-axis = f22 layout.
x1 = x-axis = X22
x2 = y-axis = Y22
hence, imax = 2 = n
⁡
f22=i=12xi24000-i=12cos(xi2i)
+1
f22=
x124000+x224000-
cosx11*cosx22+1
f22=x12+x224000-
cosx1cosx22+1
since x1=X22
and x2=Y22
f22=X222+Y2224000-
cosX22cosY222+1 4. Next, identify the required
components. We need an axis to
1. From the question, -600≤xi≤5.12 plot the 2 graphs, then make it into 2
All X21, X22, and Y22 comes from the subplots.
root xi, hence these 3 item have to 5. A popup menu to let the user
fit this range choose the function they wanted to
Where: see.
X11 = X12 = Xb 6. A text on top the popup menu to
Y12 = Yb label it, so the user can easy identify
Then, its contain.
-600≤Xa≤600 7. There are 6 way of sketching a 2D
-600≤Ya≤600 graph in MATLAB that is: Mesh,
Hence, Meshc, Meshz, surf,surfc, and
For 1D graph, f21=Xb24000- contour. Each of them van be
represent by a push button.
cosXb+1 However, Contour is a 1D graph
For 2D graph, that describe the characterictics of a
f22=Xb2+Yb24000- 2D graph. These functions, can be
cosXbcosYb2+1 subseperated into 3 groups, i.e.,
mesh group, surf group, and contour
Identify the GUI (Graphical User group.
Interfaces) layout: 8. To clearly label the 3 groups stated
1. There are 2 ways of designing a in no. 7 above, we need 3 panels to
GUI i.e. by GUIDE or program it separate each other and a parent
manually. A GUIDE create both M- (big) panel to include them.
 9. Next, we need 3 more buttons to
function as rotate, zoom and pan.
However, these function creates a
unrevertable effect to the graphs. To
undo the settings, we should create
some methods revert it after the Callback
user finish using it. Hence these
function can be put as a toggle
button, where when the button is
on, it enable the stated function.
When the toggle button is off, the
graphs reverse to its original setting.
10. These 3 toggle button are then put
into a panel to differentiate it with
the other functions. Creates a popup menu Labels the popup menu
that consist of 2 functions
3. The function htext1 defines
(describe) the popup menu below it.
The keyword, uicontrol is the abb.
keyword which creates a user
interface control objects.
4. Function hpopup consist of 2 items
GUI programming: i.e. Axis parallel hyper-ellipsoid
function and Griewangk"s function.
The callback triggers a callback
1. Step one is to create a GUI: function that performs the intended
task. It will be define later.
Creates a global function 5. As stated in Identify the GUI
(Graphical User Interfaces)
layout, no.8, 4 panels are needed,
which is 1 parent panel and 3
subpanels.
Parent panels, a child of f
(figure function) and parent
for 3 sub panel
Creates a The Window’s position
figure (new window (will change
window) and will according to it
set it to non display contain)
visible. this name.
The position (360,500,550,350) is in
pixel which represents distance from
left, distance from bottom, width
then height, accordingly.

Function that represents the

axes’s properties
Children of ph (panel function)
6. Note that these panel states the title
without using a static text like the
popup menu. The title position is set
as centertop
7. It is obvious that the position is
created with a different manner. The
position of these 4 panels are stated
in ratio form which 1.0 is all and 0.1
is 10% from the overall proposition.
8. Next, we need to create the push
button in the subpanel. Which is
mesh, meshc and meshz in mesh
panel; surf and surfc in surf panel
and contour in contour panel.
9. All these function declaration holds
a same pattern, which starts which
the function name, then keyword:
unicontrol, parent of which panel,
the style(type) of the unicontrol
used, the push button label,it’s
position and the callback function
that perform the intended task when
triggered.
10. As stated in Identify the GUI
(Graphical User Interfaces)
layout, no.9 and 10, 3 toggle
buttons need to be create and be
put under a panel.
11. The declaration is same as the
panel and push button discuss in
number 5 and 8.The difference is
that their style is different, we use
toggle button here instead of push
button to enable toggle function
when the button is hit.
12. Although all the function
declarations includes it position in
the figure, but when the size of the
Window is change (manually) by
user, the position of all the function
will be change, hence we need to
align each the button groups, so that
when the figure size is change, it will
still align with the button it should
be.
13. To avoid unnecessary position in
the figure when user resize the
figure, we set all functions to
normalized, so that the computer
automatically, adjust all the button
position, so that it will looks same as
the original size although the size of
the user interface control objects
increases in size.
14. Then, we can add in our function’s user will encounter a lagging time.
(Axis parallel hyper-ellipsoid To over comes this problem, we
function and Griewangk"s function) have previously set the figure to
equation into the global declaration. visible = off. When the compiler read
until the plotting and mesh function
in number 19, all the predefine
function has been execute, hence
the figure can be set back to visible
15. All these function has been discuss = on again. Note that when the
in function 1 and function 2 above. figure is set to visible = off, the
16. When the user change function in compiler still working background,
popup menu, the graph will need to reading the program, hence when
change also (both 1D and 2D run button is push, the MATLAB
graphs). However, when the 2D plot compiler shows busy sign on bottom
setting is changed, it only needs to left space on the window.
trigger the change in 2D graph,
hence a function should be creates
to hold the data of the 2D function,
so whenever the 2D plot setting is
change, the 2D graph is change
without changing the 1D graph.
17. Since the popup menu starts label
Axis parallel hyper-ellipsoid function
when the f figure pops up, the Axis
parallel hyper-ellipsoid function
should be hold by the function that
holds the 2D data.

18. As define in number 14,

function12d_data is the 2D data of Figure 2: GUI layout without callback
the Axis parallel hyper-ellipsoid function
function.
19. Until this moment, he axes that
defines on the 3rd line of program
have not been plot. To avoid user
see plan graph when the window is
popup, the graph should be pre-plot.The 1D graph is
having an ‘x’ sign on
Creates 2 subplots every point, which is
in red color

Title and axis label

20. It is clear that subplot 1 is plotting a
1D graph while subplot 2 consists of
a mesh of 2D graph.
21. The is all we need to do to create
the layout of the GUI. When we run
the program, the compiler will read
the program function by function
and performs it one by one, so the
22. Although the GUI layout have
completed, but all the buttons are
not working. This is due to no call
back function is define.
23. Now, defining the callback function
one by one, staring from popup
menu:
Defining itself as the
popup menu callback
 Get the string
value from hpopup

24. When user chooses Axis parallel

hyper-ellipsoid function, it will
perform the stated task, i.e. let
current_data holds the 2D data of its
function. Then plot 1D and 2D graph
and labeling it properly just like the
predefine global declaration.
25. When the Griewangk"s function is
choose, thing goes all the same
28. The last callback function needed is
except the graph and value holds
the toggle button. Toggle button
are its equation i.e. function
have 2 states, i.e. Max or Min,
22d_data.
hence the programmer can define
26. Function that starts and ends with
the action to be taken when the
one line will not need the keyword
“end” to terminate it, but since this
popup_menu_Callback function Action when
excedd one line, it will need a end to button is ON
Off
terminate it. Same goes to switch
case function. Hence 2 keyword
“end” is required.
27. Next, we need to define the callback
function of the push button. There
are a total of 6 push button, hence
there are 6 similar call backs. Note
that since the push button define
that changes of the 2D graphs,
hence only subplot 2 are triggers to
change, without disturbing subplot
1.

If else function’s end
Toggle button function’s end
End of global function, f
29. This is the end of programming. The
output of the programming will be
same as figure 2, except all it button
is functioning.
Figure 3: Plotting a contour graph of Axis
parallel hyper-ellipsoid function
Figure 4: Rotated and zoomed meshc
Griewangk"s function
CONCLUSION
In this assignment, Graphical User
Interface (GUI) is introduced. There are 2 way in
creating a GUI i.e. using GUIDE or manual
programming. GUIDE provides a drag and drop
interface to the programmer to design the GUI
layout while creating 2 file i.e. M-file and FIG file
to stores both programming and layout. Most GUI
programmer prefers to use GUIDE because the
layout can be created easily. However, it is not
the best way of designing an GUI. A M-file
created by GUIDE consists of many unknown
keyword and function. That is not something
good to a programmer when the program created
by him/her is not fully mastered by him/her. This
Assignment, however, uses another way of
creating GUI, i.e. by plain (manual) programming.
The difference between programming a GUIDE
created program and manually program GUI is
that a manually programming created GUI needs
a position declaration in every layout button
(character), which is not needed in GUIDE
created M-file. The position stated may need
some try and error procedures before it reaches
best layout. However, this problem can be
overcome by aligning them with each other and
set them (unicintrols) to normalize. It should be
note that MATLAB programming are very similar
to C++ programming language. It is case
sensitive, i.e. an upper case and it lower case are
mutually exclusive. Wrong case will result in non
functionable function or program.This assignment
shows the way to derive a 1D and 2D function
from a summation equation, The same method
can be use at a higher level or dimension. This
GUI uses, static text, popup menu, panel, bush
button and toggle button as user interface
control.
References
1. MATLAB e-book (pdf file),
MATLAB programming,
Build GUI.