Giáo trình MATLAB cơ bản - Chương 3: Giao diện đồ hoạ GUI

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). Để tạo ra và xử lí layout ciủa GUI 
ta nhập lện guide và nhận đ−ợc một layout rỗng và cửa sổ Guide Control Panel. 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: 
 f = input('Enter temperature(degree K): '); 
c = (f - 32)*5/9; 
fprintf(1,'Temperature(degree C) is: %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ạ nào đó. Để 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 ta nhập vào các lệnh sau: 
set(gcf,'DefaultUicontrolUnit','Normalized') 
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]); 
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ốígc 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. 
 - 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 đây 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. Đạon lệnh sau dùng Edit để viết chuỗi kí rự “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','68.0’... 
 ,'Position',[0.6 0.7 0.2 
 0.05],'HorizontalAlignment','Right,’Callback’,’fc_calc'); 
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 
 callback: fc_calc. 
 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'); 
Để thuận tiện ta nên viết các lệnh này này trong một file script. 
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 ạch 
chuỗi Celcius. Đoạn ch−ơng trình này phục vụ mục đích callback (hoàn trả giá trị) đ−ợc l−u 
vào file fc_calc.m và có nội dung nh− sau: 
 f = get(edit_f_,'String'); 
 f = str2num(f); 
 c = (f-32)*5/9; 
 c = num2str(c); 
 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ìa cách nhập số liệu từ bàn phím, ta có thể nhập số liệu từ thanh tr−ợt. MATLAB 
chỉ hỗ trự các thanh tr−ợt nằm ngang chứ không hỗ trợ các thanh tr−ợt thẳng đứng. Để 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],... 
 'Callback','fc_slider_f;fc_calc'); 
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 fc_silder_f.m: 
 f = get(slider_f_,'Value'); 
 f = num2str(f); 
 set(edit_f_,'String',f); 
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 fc_calc.m để tính quy đổi giá trị nhiệt độ và gán vào 
ô cạnh chuỗi “Celcius”. Tuy nhiên để nhập đ−ợc giá trị mới do ng−ời dùng thanh tr−ợt gây 
nên , ta phải thay đổi lại chuỗi lệnh nh− sau: 
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','fc_edit_f, fc_calc'); 
Trong đó file fc_edit_f.m nh− sau: 
 f = get(edit_f_,'String'); 
 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 đó fc_calc.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”. 
Đ4. nhập số liệu tuỳ chọn 
1. Khái niệm chung: Ngoài khả năng nhập dữ liệu cố định theo kiểu string hay kiểu số, ta 
có thể nhập dữ liệu theo một danh mục nào đó. Để minh hoạ, ta tạo file test.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); 
 elseif choice==3 
 fprintf(2,'Nhiet do (do C) la: %g\n',c); 
 end 
Từ cửa sổ lệnh, nhập lệnh test thì MATLAB sẽ hỏi nhiệt độ và đích quy đổi rồi hiển thị kết 
quả. Tuy hhiê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 án nhập dữ liệu sau đây: 
 - dùng menu 
 - dùng list box 
 - dùng radio button 
 - dùng check box 
2. Dùng menu: ta xoá bỏ chuỗi “Celcius” trong lệnh text_c1_ và thay vào đó khả năng chọn 
theo popup menu nh− sau: 
 delete(text_c1_); 
 pop_c_ = uicontrol( gcf, 
 ‘Style’, ‘Popupmenu’,... 
 ‘String’, ‘Rankine|Celcius|Kelvin’,... 
 ‘Value’, 2,... 
 ‘Position’, [0.0 .3 0.2 0.05],... 
 ‘Callback’, ‘fc_popup_c;fc_calc2’); 
Khi kích chuột vào Popup Menu , 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 đó , Popup Menu 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 ch−ơng trình trên, giá trị ‘Value’ đặt sẵn là 2. Khi Callback 
gọi fc_popup_c.m: 
 choice = get(popup_c_,’Value’); 
hì giá trị của biến choice đ−ợc đ−a tới ‘Value’. Sau đó Callback gọi tiếp fc_calc2.m để xem 
kết quả giữ trong choice. File fc_calc2.m nh− sau: 
 f = get(edit_f_,'String'); 
 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; 
 elseif choice==2 
 t = c; 
elseif choice==3 
 t= k 
 end 
 t = num2str(t); 
 set(text_c2_,'String',t); 
Cần l−u ý rằng để đạt đ−ợc kết quả , ta còn phải báo cho edit và slider uicontrol biết để dùng 
fc_calc2.m bằng cách bổ sung thêm các dòng sau: 
 set(edit_f_,... 
 ‘Callback’,’fc_edit_f;fc_calc2’); 
 set(edit_f_,... 
 ‘Callback’,’fc_slider_f;fc_calc2’); 
Bằng cách thay ‘Popupmenu’ bằng ‘Listbox’ uicontrol ta có ph−ơng án listbox. Điểm 
khác duy nhất là khi chọn, Popupmenu chỉ chứa một phần tử thì listbox có thể đồng thời 
chứa nhiều phần tử, phụ thuộc duy nhất vào chiều cao tại vị trí(‘Position’ property). 
3. Dùng radio button: Ta dùng lệnh delete(popup_c_) để xoá uicontrol tạo Popup Menu 
“Rankine | Celcius | Kelvin” và thêm vào 3 uicontrol tạo 3 nút chọn thứ nguyên nhiệt độ sau: 
 delete(popup_c_); 
strings = [‘Rankine’;’Celcius’;’Kelvin’]; 
show = [ 0 ; 1 ; 0 ]; 
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),... 
 ‘Posiotion’, [0.3 ys(i) 0.0 0.05],... 
 ‘Callback’, ‘fc_radio_c;fc_calc2’); 
ta dùng một chuỗi Callback cho cả 3 nút. Tr−ớc hết Callbackgọi fc_radio_c.m để nhậ biết 
nút nào(1, 2 hay 3) đ−ợc chọn, sau đó cất giá trị biến đ−ợc chọn vào choice. 
 for i = 1:3 
 if gcbo == radio_c_(i) 
 choice = i; 
set(radio_c_(i),’Value’,1); 
 else 
set(radio_c_(i),’Value’,0); 
 end; 
 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 nut. Nút nào có só trùng sẽ đ−ợc đóng (turn on, ‘Value’ 
= 1) và nútnào khác số sẽ bị ngắt (turn off,’Value’ = 0). Cuối cùng Callback gọi fc_calc2.m 
để thực hiện việc tính quy đổi đ−ợc chọn và hiển thị kết quả. 
Đ5. các ph−ơng pháp 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ạ để 
sạon thảo layout. Kết quả đầu tiên là ta có một layout rỗng. Việc đầu tiên