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

iệ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: 
47
Các lệnh thực hiện công việc trên (lưu trong file ct3_7.m) là: 
set(gcf,ʹDefaultUicontrolUnitʹ,  ʹNormalizedʹ) 
frame_1 = uicontrol(gcf,ʹStyleʹ,  ʹFrameʹ,... 
                               ʹPositionʹ,   [0.1 0.1  0.8 0.3]); 
frame_2 = uicontrol(gcf,ʹStyleʹ,   ʹFrameʹ,... 
                                ʹPositionʹ,   [0.1 0.6  0.8 0.3]); 
set(frame_1,ʹBackgroundColorʹ,  [0.5 0.5 0.5]); 
set(frame_2,ʹ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ʹ); 
popup_c = uicontrol(gcf,... 
                                ʹStyleʹ,ʹPopupmenuʹ,... 
                       ʹStringʹ,ʹRankine|Celcius|Kelvinʹ,... 
                      ʹValueʹ,2,... 
                       ʹPositionʹ,[0.3 0.3 0.2 0.05],... 
                      ʹCallbackʹ,ʹct3_8; ct3_10ʹ); 
text_c2 =  uicontrol(gcf,ʹStyleʹ,   ʹTextʹ,... 
                                ʹStringʹ,   ʹ100.0ʹ,... 
                                ʹPositionʹ,   [0.6 0.3 0.1 0.05],... 
                                ʹHorizontalAlignmentʹ,   ʹLeftʹ); 
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_10ʹ); 
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: 
48
  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 = 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); 
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à: 
set(gcf,ʹDefaultUicontrolUnitʹ,   ʹNormalizedʹ) 
frame_1 = uicontrol(gcf,ʹStyleʹ, ʹFrameʹ, ʹPositionʹ,  [0.1 0.1  0.8 0.3]); 
49
frame_2 = uicontrol(gcf,ʹStyleʹ, ʹFrameʹ, ʹPositionʹ,  [0.1 0.6  0.8 0.3]); 
set(frame_1,ʹBackgroundColorʹ,  [0.5 0.5 0.5]); 
set(frame_2,ʹ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_6ʹ); 
strings = [ʹRankineʹ;ʹCelciusʹ;ʹKelvineʹ]; 
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),... 
                                       ʹPositionʹ,  [0.3 ys(i)  0.2 0.05],... 
              ʹCallbackʹ,   ʹct3_12; ct3_10ʹ); 
end 
text_c2= uicontrol(gcf,ʹStyleʹ,ʹTextʹ,ʹStringʹ,ʹ100.0ʹ,ʹPositionʹ,... 
                 [0.6 0.3 0.1 0.05],ʹHorizontalAlignmentʹ,ʹLeftʹ); 
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_10ʹ); 
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; 
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 
50
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à: 
set(gcf,ʹDefaultUicontrolUnitʹ,ʹNormalizedʹ) 
frame_1 = uicontrol(gcf,ʹStyleʹ,ʹFrameʹ,ʹPositionʹ,[0.1 0.1  0.8 0.3]); 
frame_2 = uicontrol(gcf,ʹStyleʹ,ʹFrameʹ,ʹPositionʹ,[0.1 0.6  0.8 0.3]); 
set(frame_1,ʹBackgroundColorʹ,[0.5 0.5 0.5]); 
set(frame_2,ʹ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ʹ); 
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ʹ,... 
51
                 [0.6 0.3 0.1 0.05],ʹHorizontalAlignmentʹ,ʹLeftʹ); 
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_10ʹ); 
§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: 
52
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 
53
    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: 
54