PRIMJENA INŽENJERSKIH

SOFTVERSKIH PAKETA

Predavanje 8: Grafički korisnički interfejs

Dr. sc. Emir Skejić, vanr. prof.

 Kratak pregled

(1) Uvod
(2) Programska izgradnja GUI-a
(3) GUIDE

2
 Definicija GUI-a

• Korisnički interfejs (engl. User Interface – UI)

 Dodirna tačka ili metoda interakcije između osobe i
računara ili računarskog programa.
• UI definira "look and feel" aplikacije

3
 Definicija GUI-a

• Grafički korisnički interfejs (engl. Graphical User Interface –

GUI) je grafički prikaz koji sadrži uređaje ili komponente
koji korisniku omogućavaju da obavlja interaktivne
zadatke.

• Da bi obavio ove zadatke, korisnik GUI-a ne mora kreirati

skriptu ili ukucavati naredbe u komandnoj liniji.

• Često korisnik ne mora poznavati detalje zadatka koji se

razmatra.

4
 O GUI-u

• GUI komponente su:

 MENUS
 TOOLBARS
 PUSHBUTTON
 RADIO BUTTON
 LIST BOXES
 SLIDERS

• GUI može:
 prikazati podatke u tabelarnom obliku
 iscrtavati
 grupirati povezane komponente

5
 Kako GUI radi?

• Svaka komponenta GUI-a povezana je s jednom

ili više callback funkcija.
• Callback funkcije piše Komponenta
programer GUI-a:
% --- Izvršava se na pritisak na dugme u pushbutton1-u.
function pushbutton1_Callback (hObject, eventdata, handles)
• Izvršavanje callback-a se okida određenom
korisničkom akcijom (engl. event) kao npr:
 pritisak na dugme (engl. push button)
 klik mišem (engl. mouse click)
Callback
 odabir stavke menija (menu item selection)
funkcija
 prelazak kursora preko komponente
• Kreator GUI-a obezbjeđuje ove callback-ove
6
 Kako kreirati GUI?

• Matlab omogućava da se GUI kreira:

 programski
 interaktivno, pomoću GUIDE-a, koji je interaktivni GUI
builder

 GUIDE (Graphical User Interface Development

Environment) pruža skup alata za kreiranje grafičkog
korisničkog interfejsa. Ovi alati pojednostavljuju
postupak izrade rasporeda elemenata (engl. layout) i
programiranja GUI-ova.

7
 Kratak pregled

(1) Uvod
(2) Programska izgradnja GUI-a
(3) GUIDE

8
 Kreiranje GUI-a

• GUI se može kreirati u programskom môdu

pomoću sljedećih naredbi:
 uicontrol – za kreiranje GUI komponenti
 uimenu – za kreiranje padajućih menija
 uicontextmenu – za kreiranje pop-up menija
• Dodatni objekti:
 image – 2D slika
 light – izvor svjetlosti
 line – linija
 patch – poligon
 rectangle – elipsa ili pravougaonik
 text – string u grafičkom okruženju
9
 Uicontrol elementi

• MATLAB pruža veliki broj osnovnih GUI elemenata:

 Check boxes
 Editable text fields
 Frames
 List boxes
 Pop-up menus
 Push buttons
 Radio buttons
 Toggle buttons
 Sliders
 Static text labels

10
 Manualno kreiranje uicontrol
elemenata
• Da biste kreirali uicontrol element, koristite MATLAB
naredbu:
handle = uicontrol('Property1Name', Property1Value, ...
'Property2Name', Property2Value, ...
.
.
);

• Da bi se kreirala specifična vrsta uicontrol objekta,

svojstvo Style uzima neku od vrijednosti: check box,
slider, itd.
• Imena ostalih svojstava specificiraju atribute tog objekta.
• Jednostavan primjer:
h_slider = uicontrol('Style','slider',...
'units','normalized',...
'position',[.3 .6 .15 .05],...
'String','Radio Button'); 11
 Manualno kreiranje uicontrol
elemenata
• Dakle, funkcija uicontrol uzima parove
PropertyName/PropertyValue, strukture i ćelije kao ulazne
argumente i opciono vraća handle kreiranog objekta. Nakon
kreiranja objekta, mogu se također postaviti i ispitati
vrijednosti svojstava (PropertyValue) korištenjem funkcija
set i get.
• Svojstvima koja nisu speficirana pridružuju se
podrazumijevane vrijednosti. Podrazumijevani uicontrol
stil je pushbutton.
• Uicontrol objekti su "djeca" figure-a i zbog toga ne
zahtijevaju axes da bi postojali kada su smješteni u figure
window.
• Naredba
handle = uicontrol(parent,'Name1',Value1,...)
kreira uicontrol u objektu specificiranom pomoću handle-
a parent. 12
 uicontrol: Primjer

• Sljedeća naredba kreira dugme na pritisak (engl. push

button) koje, kada se pritisne, briše trenutni axes:
» h = uicontrol('Style', 'pushbutton',...
'String', 'Clear', 'Position', [20 150 100 70],...
'Callback', 'cla');
• Možete kreirati uicontrol objekt koji mijenja palete boja
grafičkog prozora tako što ćete specificirati pop-up meni i
navesti ime m-datoteke kao Callback funkciju objekta:
» hpop = uicontrol('Style', 'popup',...
'String', 'hsv|hot|cool|gray',...
'Position', [20 320 100 50],...
'Callback', 'setmap');
• Gore navedeni poziv funkciji uicontrol definira četiri
pojedinačna izbora u meniju: hsv, hot, cool i gray. Ove
izbore specificirate sa svojstvom String, razdvajajući ih
znakom "|".
13
 uicontrol: Primjer

• Callback, u ovom slučaju setmap, je ime m-datoteke koja

definira kompliciraniji skup instrukcija nego samo jedna
MATLAB naredba. setmap sadrži ove naredbe:
val = get(hpop,'Value');
if val == 1
colormap(hsv)
elseif val == 2
colormap(hot)
elseif val == 3
colormap(cool)
elseif val == 4
colormap(gray)
end
• Svojstvo Value sadrži broj koji pokazuje selektirani izbor.
Izbori su sekvencijalno pobrojani od jedan do četiri. M-
datoteka setmap može pribaviti i zatim testirati sadržaje
svojstva Value da bi odredila koja akcija će se preduzeti. 14
 Svojstva figure-a: Tag

• Korisnički specificirana oznaka objekta

• Svojstvo Tag obezbjeđuje sredstvo za identifikaciju
grafičkih objekata pomoću korisnički specificirane oznake.
Osnovna vrijednost je prazan string.
• Koristite svojstvo Tag i funkciju findobj za manipulaciju
specifičnim objektima unutar hijerarhije iscrtavanja.
• Naprimjer, pretpostavimo da sve grafičke izlazne podatke
želimo usmjeriti iz datoteke u određeni figure, bez obzira
na korisničke akcije koje mogu promijeniti trenutni figure.
Da biste to uradili, identificirajte figure pomoću Tag-a.
» figure('Tag','Plotting Figure')
• Zatim taj figure učinite trenutnim figure-om prije
iscrtavanja tragajući za Tag-om pomoću funkcije findobj.
» figure(findobj('Tag','Plotting Figure'))

15
 Primjer 1

• Napisati program koji kreira grafički prozor (engl. figure) sa

pushbutton kontrolom
• Program u početku pozicionira kontrolu na sredinu
grafičkog prozora
• Zatim povezuje proizvoljnu (engl. random) promjenu
pozicije pushbutton-a sa klikom na kontrolu (callback
svojstvo)

16
 Primjer 1

• Napisati program koji kreira grafički prozor (engl. figure) sa

pushbutton kontrolom
• Program u početku pozicionira kontrolu na sredinu
grafičkog prozora
• Zatim povezuje proizvoljnu (engl. random) promjenu
pozicije pushbutton-a sa klikom na kontrolu (callback
svojstvo)

primjer1.m
f1 = figure('Tag','figure1','Position',[200 200 400 400]);
a = uicontrol('Style','pushbutton',...
'Units','normalized','Position',...
[.5 .5 .2 .1],'String','Klikni me');
s = 'set(a,''Position'',[.8*rand .9*rand .2 .1])';
eval(s)
set(a,'Callback',s)

17
 Primjer 2

• Napisati program koji u grafičkom prozoru

kreira sljedeće kontrole
» popup
» axes
» edit
• U zavisnosti od pet opcija koje su ponuđene u
popup kontroli, axes će prikazati različite
tipove grafika od matrice koju korisnik unosi
u edit box.
• Callback funkciju od popup kontrole napisati u
zasebnoj m-datoteci pod nazivom crtaj.m

18
 Primjer 2

popup
edit

axes

19
 Primjer 2

primjer2.m

f1 = figure('Tag','figure1','Position',[200 200 400 400]);

grafik = axes('Position',[0.1 0.1 .8 .8],'parent',f1);
izbor = uicontrol('Style','popup','Units'...
,'normalized','Position',[0.72 0.92 0.17 0.05],...
'String',' |bar|barh|pie|pie3','parent',f1,...
'Callback','crtaj');
unos = uicontrol('Style','edit','Units',...
'normalized','Position',[0.1 0.92 0.6 0.05],...
'HorizontalAlignment','right','parent',f1);

20
 Primjer 2
crtaj.m
try
vektor=eval(get(unos,'String'));
catch
text(0.35,0.5,'Greska u unosu');
break
end
t_izbor=get(izbor,'Value');
switch t_izbor
case 1
cla;
case 2
bar(vektor);
case 3
barh(vektor);
case 4
pie(vektor);
case 5
pie3(vektor);
end
 Primjer 3

• Implementirati kalkulator u grafičkom okruženju

• Implementaciju izvršiti u dvije funkcije
 kalkulatorgui.m – kreira sve potrebne kontrole
 racunaj.m – funkcija koja se aktivira na osnovu izbora
korisnika unutar GUI-a

22
kalkulatorgui.m
function kalkulatorgui
razmak_h = 0.04;
razmak_v = 0.057;
dugme_sirina = 0.2;
dugme_visina = 0.1;
oznake = ['0','.','=','+','1','2','3','-',...
'4','5','6','*','7','8','9','/',...
'(',')','d','c'];
figure('menubar','none','position',[300,300,200,200]);
t_pozicija_h = razmak_h;
t_pozicija_v = razmak_h;
for j = 1:5
t_pozicija_h = razmak_h;
for i = 1:4
g = uicontrol('Style','pushbutton','Units',...
'normalized','Position',...
[t_pozicija_h t_pozicija_v dugme_sirina dugme_visina]);
t_pozicija_h = t_pozicija_h+dugme_sirina+razmak_h;
set(g,'string',oznake((j-1)*4+i),'callback','racunaj');
end
t_pozicija_v=t_pozicija_v+dugme_visina+razmak_v;
end
uicontrol('Style','text','tag','rezultat',...
'units','normalized','position',...
[razmak_h t_pozicija_v 0.92 0.1],...
'BackgroundColor',[1 1 1],...
'HorizontalAlignment','right');
 Primjer 3
racunaj.m
function racunaj
odabrano = get(gco,'string')
t_vrijednost = get(findobj('tag','rezultat'),'string')

switch odabrano
case 'd'
rezultat = t_vrijednost(1:end-1);
case 'c'
rezultat = [];
case '='
try
rezultat = eval(t_vrijednost);
catch
rezultat = 'E'
end
otherwise
rezultat = strcat(t_vrijednost,odabrano);
end
set(findobj('tag','rezultat'),'string',rezultat);
24
 Primjer 4

• Implementirati funkciju meniji(x,y,tip)

• Funkcija iscrtava y u ovisnosti od x
• Ako je varijabla tip jednaka 1, program kreira context
meni koji se aktivira desnim klikom na grafički prikaz. Meni
daje tri opcije za vrstu linije
• Ako varijabla tip nije jednaka 1, program kreira klasični
padajući meni sa tri opcije za vrstu linije

25
 Primjer 4

GUI za tip jednako 1 GUI za tip različito od 1

26
 Primjer 4
meniji.m
function meniji(x,y,tip)
f1 = figure('menubar','none');
if tip == 1
meni1 = uicontextmenu;
linija = plot(x,y,'UIContextMenu', meni1,'Tag','linija');
else
meni1 = uimenu('Label','Vrsta linije');
linija = plot(x,y,'Tag','linija');
end

set(linija,'LineWidth',3);
cb1 = ['set(findobj(''Tag'',''linija''), ''LineStyle'', ''--'')'];
cb2 = ['set(findobj(''Tag'',''linija''), ''LineStyle'', '':'')'];
cb3 = ['set(findobj(''Tag'',''linija''), ''LineStyle'', ''-'')'];

opcija1 = uimenu(meni1, 'Label', 'isprekidana', 'Callback', cb1);

opcija2 = uimenu(meni1, 'Label', 'tackasta', 'Callback', cb2);
opcija3 = uimenu(meni1, 'Label', 'puna', 'Callback',
cb3,'separator','on');
 Kratak pregled

(1) Uvod
(2) Programska izgradnja GUI-a
(3) GUIDE

28
 Kreiranje GUI-a

• Zbilja je lako napraviti grafički korisnički interfejs u Matlabu

• Za otvaranje okruženja za razvoj grafičkog korisničkog
interfejsa, ukucajte guide
» guide
 Odaberite Blank GUI

29
 Crtanje GUI-a

• Odaberite objekte s lijeve strane i povucite ih ondje gdje

želite

30
 Izmjena postavki objekata

• Uradite dvostruki klik na objekte da biste otvorili Inspector.

Ovdje se mogu promijeniti sva svojstva objekta.
 Spremanje GUI-a

• Kada ste izmijenili sva svojstva, možete spremiti GUI

• Matlab sprema GUI kao .fig datoteku i generira m-
datoteku!
Dodavanje funkcionalnosti M-fajlu

• Da biste dodali funkcionalnost dugmadima, dodajte naredbe

'Callback' funkcijama u m-datoteci. Naprimjer, kada korisnik
klikne na Draw Image gumb, biće pozvana i izvršena funkcija
drawimage_Callback
• Svi podaci za GUI se pohranjuju u handle-ove, te koristite get
i set za dobijanje podataka i njihovu promjenu ako je
potrebno
• Svaki put kada promijenite handle-ove, spremite ih
korištenjem guidata
» guidata(handles.Figure1,handles);

33
 Pokretanje GUI-a

• Da biste pokrenuli GUI, samo ukucajte njegovo ime u

komandnom prozoru i GUI će se pojaviti. Debugger je
zaista koristan za pisanje GUI-a zato što vam omogućuje
da vidite unutar GUI-a

34
 Kratak pregled

(1) Uvod
(2) Programska izgradnja GUI-a
(3) GUIDE

Nadam se da nije bilo

previše!

35