Chương 3 : Giao diện đồ họa GUI

HorizontalAlignment , Left ; Bây gi ta s xem các l nh trên ho tđ ng nh th nào... Cu i cùng ta xét ph ng án dùng listbox... Trong thuôc tính String ghi chu i Bam chuot ; ghi và Tag chu i

Trang 1

CH NG 3: GIAO DI N Đ HO GUI

§1 KHÁI NI M CHUNG

Đ ti n d ng ta có th t o nên giao di n đ ho (GUI Graphic User Interface) gi a ng i dùng và MATLAB Trong giao di n này ta có th xu t d

li u d i 2 d ng: văn b n và đ ho M i m t GUI có m t hay nhi u layout(di n m o) Vi c t o GUI t o nên m t công c đ ho ph c v nh p xu t

d li u m t cách tr c giác, r t thu n ti n Ngoài ra có th dùng GUI đ giám sát các quá trình, hi n th cácđ i t ng

§2 NH P XU T KÝ T , S LI U RA GUI

1 T o khung hình: Ta xét các l nh sau(l u vào file ct3_0.m):

f = input( Nhap nhiet do(do K): );

c = (f 32)*5/9;

fprintf(1, nhiet do(do C) la: %g\n ,c)

Ba dòng l nh trên th c hi n các công vi c sau:

nh p giá tr đ u vào

th c hi n phép tính quyđ i nhi t đ

xu t k t qu ra màn hình

Bây gi ta tìm cách cài các dòng l nh trên sao cho chúng th c hi n trên khuôn kh m t khungđ ho có d ng sau:

Các l nh sau(l u vào file ct3_1.m) th c hi n công vi c trên:

Trang 2

set(gcf, DefaultUicontrolUnit , Normalized )

frame_1 = uicontrol(gcf, Style , Frame ,

Position ,[0.1 0.1 0.8 0.3]);

Position ,[0.1 0.6 0.8 0.3]);

set(frame_1, BackgroundColor , [0.5 0.5 0.5]);

text_f = uicontrol(gcf, Style , Text ,

String , Fahrenheit: ,

Position , [0.3 0.7 0.2 0.05], HorizontalAlignment , Left ); edit_f = uicontrol(gcf, Style , Edit ,

String , 168.0 ,

Position , [0.6 0.7 0.1 0.05 ],

HorizontalAlignment , Right ,

Callback , ct3_3 );

text_c1 = uicontrol(gcf, Style , Text ,

String , Celcius: ,

Position , [0.3 0.3 0.2 0.05],

HorizontalAlignment , Left );

String , 100.0 ,

Position , [0.6 0.3 0.1 0.05],

Bây gi ta s xem các l nh trên ho tđ ng nh th nào Các l nh sau:

frame1 = uicontrol(gcf, Style , Frame ,

Position , [0.1 0.1 0.8 0.3]);

frame2 = uicontrol(gcf, Style , Frame ,

Position , [0.1 0.6 0.8 0.3]);

set(frame1, BackgroundColor , [0.5 0.5 0.5]);

set(frame2, BackgroundColor , [0.5 0.5 0.5]);

t o hai khung hình ch nh t trong c a s Figure hi n hành v i n n màu xám Hai khung (Frames) có to đ các góc d i trái là (0.1, 0.1) và (0.1, 0.6), cùng chi u cao 0.3 đ n v và b r ng 0.8 đ n v Đ n v đ c tính b ng % c a kích

c ngoài c a Figure V y ta có th di n gi i nh sau:

Khung th nh t có góc trái d i t i đi m có to đ 10% chi u ngang và 10% chi u cao c a khung ngoài Figure

Trang 3

Khung th 2 có góc trái phía d i t i đi m có to đ ng v i 10% chi u ngang và 60% chi u cao c a khung ngoìa Figure

C hai khung có chi u cao b ng 30% chi u cao và b ngang b ng 80%

b ngang c a khung ngoài Figure

2 Dùng l nh edit và text đ nh p xu t kí t và s li u: Trên đây ta đã dùng

l nh uicontrol đ t o và xác đ nh v trí hai khung hình Đo n l nh sau s d ng uicontrol đ vi t chu i kí t “Fahrenheit” lên khung bên trên:

text_ f = uicontrol(gcf, Style , Text , String , Fahrenheit: ,

Position ,[0.3 0.7 0.2 0.05], HorizontalAlignment , Left );

Chu i kí t “Fahrenhaeit” đ c đ t vào đúng v trí d n trái c a ô có Position ghi trong đo n ch ng trình trên Đo n l nh sau dùng Edit đ vi t chu i kí t “68.0” vào v trí bên c nh c a “Fahrenheit” Chu i kí t có v trí

d n ph i trong ô (Position Box)

edit_f = uicontrol(gcf, Style , Edit ,

String , 168.0 ,

Position , [0.6 0.7 0.1 0.05 ],

Do s d ng edit, chu i kí t “68.0” là chu i có th vi t l i đ c tr c ti p trên GUI Sau khi nh n nút trên, giá tr m i vi t l i đ c ti p nh n và MATLAB

s g i l nh vi t trong ph n callbac ct3_3

Cu i cùng ta còn ph i dùng uicontrol đ t o ta chu i text, hi n th chu i

“Celcius” và “20.0” trong khung bên d i

text_c1 = uicontrol(gcf, Style , Text , String , Celcius: ,

Position ,[0.3 0.3 0.2 0.05], HorizontalAlignment , Left ); text_c2 = uicontrol(gcf, Style , Text , String , 20.0 , Position ,

[0.6 0.3 0.1 0.05], HorizontalAlignment , Left );

3 T đ ng c p nh t giá tr lên GUI: Đ hoàn thi n ví d GUI ta th c hi n

ch ng trình v i nhi m v tính quy đ i t đ K sang đ C và t đ ng đi n k t

qu vào các ô bên c nh chu i Celcius Đo n mã sau ph c v m c đích callback (hoàn tr giá tr ) đ c l u vào file ct3_3.m và có n i dung nh sau:

f = get(edit_f, String );

f = str2num(f);

c = ( f 32)*5/9;

c = num2str(c);

Trang 4

set(text_c2, String ,c);

Đo n mã trên nh n giá tr do l nh uicontrol “edit” đ c vào d i d ng chu i (string) và sau đó:

bi nđ i t d ng string sang d ng s

tính quyđ i t nhi t đ fahrenheit sang nhi t đ celcius

bi nđ i t s sang string

xu t k t qu d i d ng string ra GUI nh text_c2

§3 NH P S LI U T THANH TR T

Ngoài cách nh p s li u t bàn phím, ta có th nh p s li u t thanh

tr t Ta mu n t o ra m t giao di n nh sau:

Trong giao di n này, con tr t s làm thay đ i giá tr nhi t đ đua vào và nhi t

đ quy đ i tính theo đ C cũng s thay đ i t ng ng Các l nh t o ra giao

di n này (l u trong file ct3_2.m) là:

frame_1 = uicontrol(gcf, Style , Frame , Position ,[0.1 0.1 0.8 0.3]);

set(frame_1, BackgroundColor ,[0.5 0.5 0.5]);

text_ f = uicontrol(gcf, Style , Text , String , Fahrenheit: , Position ,

Trang 5

String , 168.0 ,,, Position , [0.6 0.7 0.1 0.05 ],

String , Celcius: ,

Position , [0.3 0.3 0.2 0.05],

String , 100.0 ,

Position , [0.6 0.3 0.1 0.05],

slider_f = uicontrol(gcf, Style , Slider ,

Min , 32.0, Max , 212.0,

Value , 68.0,

Position , [0.6 0.8 0.2 0.05],

Callback , ct3_4; ct3_3 );

Đ t o thanh tr t ta dùng l nh:

slider_f = uicontrol(gcf, Style , Slider , Min ,32.0, Max ,212.0,

Value ,68.0, Position ,[0.6 0.8 0.2 0.05],

Nh v y Callback có th g i m t chu i các l nh MATLAB, phân cách nhau

b ng d u ch m than hay d u ph y Chu i callback g i ct3_4.m:

f = get(slider_f, Value );

f = num2str(f);

set(edit_f, String ,f, CallBack , ct3_5;ct3_3 );

v i tác d ng nh p nhi t đ gi t i ‘Value’ c a slider_f vào v trí bên c nh ô

ch a chu i “Fahrenheit” Sau đó Callback g i ti p ct3_3.m đ tính quy đ i giá

tr nhi t đ và gán vào ô c nh chu i “Celcius” File ct3_5.m nh sau:

f = str2num(f);

set(slider_f, Value ,f);

có nhi m v c p nh t giá tr gi t i ‘Value’ c a slider_f đ r i sau đó ct3_3.m

làm n t ph n vi c còn l i: tính đ i nhi t đ và gán vào v trí c nh ô ch a chu i

“Celcius”

Trang 6

§4 CH N L A KHI XU T S LI U

1 Khái ni m chung: Ngoài kh năng xu t d li u c đ nh theo ki u string hay

ki u s , ta có th xu t d li u theo m t danh m c nào đó Đ minh ho , ta t o

file ct3_6.m nh sau:

f = input( Nhap nhiet do: );

r = f + 459.7;

c = (f 32)*5/9;

k = c + 273.15;

choice = input([ Nhap 1 cho Rankie , 2 cho Celcius , 3 cho Kelvin: ]);

if choice = = 1

fprintf(1, Nhiet do (do R) la: %g\n ,r);

elseif choice = = 2

fprintf(2, Nhiet do (do C) la: %g\n ,c);

end

T c a s l nh, nh p l nh ct3_6 thì MATLAB s h i nhi t đ và đích quy đ i

r i hi n th k t qu Tuy nhiên công c GUI c a MATLAB cho phép ta th c

hi n vi c l a ch n thu n l i h n Ta có th ch n m t trong 4 ph ng xu t d

li u sau đây:

dùng popupmenu

dùng list box

dùng radio button

dùng check box

2 Dùng popupmenu: Ta t o ra giao di n nh sau:

Trang 7

Các l nh th c hi n công vi c trên (l u trong file ct3_7.m) là:

Position , [0.1 0.1 0.8 0.3]);

Position , [0.1 0.6 0.8 0.3]);

text_f = uicontrol(gcf, Style , Text ,

String , Fahrenheit: ,

Position , [0.3 0.7 0.2 0.05],

String , 168.0 ,

Position , [0.6 0.7 0.1 0.05 ],

popup_c = uicontrol(gcf,

Style , Popupmenu ,

String , Rankine|Celcius|Kelvin ,

Value ,2,

Position ,[0.3 0.3 0.2 0.05],

String , 100.0 ,

Position , [0.6 0.3 0.1 0.05],

slider_f = uicontrol(gcf, Style , Slider ,

Min , 32.0, Max , 212.0,

Value , 68.0,

Position , [0.6 0.8 0.2 0.05],

Khi kích chu t vào Popupmenu , có ba kh năng ch n l a s xu t hi n Ti p

t c nháy chu t vào m t trong 3 kh năng đó , Popupmenu bi n m t ch còn l i

đ n v đ c ch n Khi dùng chu t kéo thanh tr t frame phía trên, ta có

đ c giá tr quy đ i sang đ n v đ c ch n hi n th phía d i Trong đo n

mã trên, giá tr ‘Value’ đ t s n là 2 Khi Callback g i ct3_8.m:

Trang 8

choice = get(popup_c,’Value’);

thì giá tr c a bi n choice đ c đ a t i ‘Value’ Sau đó Callback g i ti p

ct3_10.m đ xem k t qu gi trong choice File ct3_10.m nh sau:

f = str2num(f);

r = f + 459.7;

c = (f 32)*5/9;

k = c + 273.15;

choice = input([ Nhap 1 cho Rankie , 2 cho Celcius , 3 cho Kelvin: ]);

if choice = = 1

t = r;

t = c;

t = k

end

t = num2str(t);

set(text_c2, String ,t);

B ng cách thay ‘Popupmenu’ b ng ‘Radiobutton’ uicontrol ta có ph ng

án radiobutton Giao di n s có d ng:

Các l nh th c hi n công vi c này (l u trong file ct3_11.m) là:

frame_1 = uicontrol(gcf, Style , Frame , Position , [0.1 0.1 0.8 0.3]);

Trang 9

frame_2 = uicontrol(gcf, Style , Frame , Position , [0.1 0.6 0.8 0.3]);

text_f = uicontrol(gcf, Style , Text , String , Fahrenheit: , Position ,

edit_f = uicontrol(gcf, Style , Edit , String , 168.0 , Position ,

[0.6 0.7 0.1 0.05 ], HorizontalAlignment ,

Right , Callback , ct3_6 );

strings = [ Rankine ; Celcius ; Kelvine ];

ys = [ 3; 2; 1]*0.075 + 0.075;

for i = 1:3

radio_c(i) = uicontrol(gcf,

Style , Radiobutton ,

String , strings(i),

Value , show(i),

Position , [0.3 ys(i) 0.2 0.05],

end

text_c2= uicontrol(gcf, Style , Text , String , 100.0 , Position ,

Value ,68.0, Position ,[0.6 0.8 0.2 0.05],

File ct3_12.m:

for i = 1:3

if gcbo = = radio_c(i)

choice = i;

set(radio_c(i), Value ,1);

elseif

set(radio_c(i), Value ,0);

end;

Đo n script trên là m t vòng l p, so sánh s (handle) Callback thu đ c (giá tr

do hàm gcbo tr v ) v i handle c a m i nút Nút nào có s trùng s đ c đóng (turn on, ‘Value’ = 1) và nút nào khác s s b ng t (turn off,’Value’ = 0) Cu i cùng Callback g i ct3_10.m đ th c hi n vi c tính quy đ i đ c ch n và hi n

Trang 10

th k t qu Đi m khác duy nh t là khi ch n, Popupmenu ch ch a m t ph n

t thì radiobutton có th đ ng th i ch a nhi u ph n t

Cu i cùng ta xét ph ng án dùng listbox Giao di n c n t o nh sau:

Các mã t o ra giao di n trên (l u trong file ct3_13.m) là:

text_f = uicontrol(gcf, Style , Text , String , Fahrenheit: , Position ,

edit_f = uicontrol(gcf, Style , Edit , String , 168.0 , Position ,

[0.6 0.7 0.1 0.05 ], HorizontalAlignment ,

Right , Callback , ct3_3 );

listbox_c = uicontrol(gcf,

Style , Listbox ,

String , Rankine|Celcius|Kelvin ,

Value ,2,

Position ,[0.3 0.3 0.2 0.05],

Callback , ct3_14;ct3_10 );

text_c2 = uicontrol(gcf, Style , Text , String , 100.0 , Position ,

Trang 11

Value ,68.0, Position ,[0.6 0.8 0.2 0.05],

§5 CÔNG C Đ HO T O GUI

1 T o GUI b ng công c đ ho : Trên đây ta đã xem xét cách t o GUI b ng

ph ng pháp th công Ta có th t o GUI b ng công c đ ho Khi nh p l nh guide ta g i trình đ ho (Graphics User Interface Development Environment)

đ so n th o layout K t qu đ u tiên là ta có m t layout r ng nh sau:

Ch y th

So n th o thu c tính Alignment

So n menu

Vùng thi t

k Các ph n t

Vi c đ u tiên là ta thi t k giao di n mong mu n Ta s dùng chu t kéo các ph n t c n dùng t bên trái và th vào layout r ng bên ph i Ta có th

d ch chuy n các ph n t này đ các v trí mong mu n và cân ch nh b ng công

c Alignment V i m i ph n t ta c n xác đ nh thu c tính cho nó b ng cách

b mđúp vào ph n t hay b m vào công c so n th o th c tính

Sau khi thi t k xong ta l u nó l i Lúc này MATLAB t đ ng t o ra file

*.fig dùng l u giao di n v a t o và file *.m ch a các mã l nh c n th c hi n

Vi c cu i cùng là vi t các mã l n vào file *.m Trong quá trình thi t k ta có th

ch y th xem sau m i b c thi t k đã đ t yêu c u ch a b ng cách b m vào ô

ch y th

2 M t s ví d t o GUI:

a Đ m s l n b m chu t: Ta thi t k m t giao di n nh sau:

Trang 12

Ta mu n là khi b m chu t, s l n b m s đ c đ m và ghi l i Tr c h t

ta g i guide và có đ c m t layout r ng Vào Property Inspector (ô so n th o thu c tính) và ghi vào Name chu i ct3_17 và ch p nh n thu c tích Tag m c

đ nh c a nó là figure1; dùng Font ch m c đ nh, c ch 12, bold Ta dùng ô Edit Text đ ghi l i s l n b m Ta vào Property Inspector r i ch n String Ta

nh p vào ô này chu i So lan bam chuot: 0 Ta ghi vào ô Tag chu i editmot

và cũng dùng Font ch m c đ nh, c ch 12 và bold Ti p theo kéo Pushbutton vào layout và so n th o thu c tính cho nó v i Font ch m c đ nh, c ch 12, bold Trong thuôc tính String ghi chu i Bam chuot ; ghi và Tag chu i pushbuttonmot Nh v y là ta đã thi t k xong Bây gi ta l u l i v i tên là ct3_17.fig và ct3_17.m

Nhi m v ti p theo là ghi các l nh c n thi t vào file ct3_17.m File này đã

đ c MATLAB t đ ng t o ra Ta ph i thêm vào đó các mã l nh đ khi b m chu t thì s l n b m đ c th hi n trên ô Edit Text Ta s ghi các mã l nh này vào ph n:

function varargout = pushbuttonmot_Callback(h, eventdata, handles, varargin)

do l nh c n đ c th c hi n khi g i pushbutton N i dung c a ct3_17.m là:

function varargout = Ct3_17(varargin)

if nargin = = 0

fig = openfig(mfilename, reuse );

set(fig, Color ,get(0, defaultUicontrolBackgroundColor ));

handles = guihandles(fig);

guidata(fig, handles);

if nargout > 0

Trang 13

varargout{1} = fig;

end elseif

ischar(varargin{1})

try

[varargout{1:nargout}] = feval(varargin{:});

catch

disp(lasterr);

end end

function varargout = pushbuttonmot_Callback(h, eventdata, handles, varargin) persistent dem;%bien dem la persistent de no ton tai giua lan goi ham

if isempty(dem)

dem = 0;

end

dem = dem + 1;

str = sprintf( So lan bam chuot: %d ,dem);

set(handles.editmot, String ,str);

Trong ph n này, đ ng n g i, ta b b t các dòng gi i thích và các dòng l nh không dùng đ n Bây gi ta ch y ch ng trình và nó s c p nh t s l n b m chu t

b Chuy n đ i t đ Fahrenheit sang đ Celcius: Ta thi t k m t GUI đ

chuy n đ i nhi t đ Giao di n có d ng nh sau:

Tiêu đề	Chương 3: Giao diện đồ họa GUI
Thể loại	Chương

Định dạng
Số trang	13
Dung lượng	349,36 KB