9/3/2019
1
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
Giảng viên: Ths. Trần Kim Bằng
Bộ môn Cơ Kỹ Thuật, P.106B4
Khoa Khoa Học Ứng Dụng
Đại học Bách Khoa TpHCM
1
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
Chương 10. Graphical User
Interfaces - GUI - MATLAB
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật
Matlab® – Matrix Laboratory
10.1. Tổng quan về GUIDE
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật
Matlab® – Matrix Laboratory
• GUIDE là viết tắt của Graphical User Interface Development
Environment tức là công cụ dùng để thiết kế GUI.
• GUIDE sẽ tự động tạo ra M-file khi người dùng chạy GUI lần đầu tiên.
10.1.1. Giới thiệu
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
10.1.2. Tạo giao diện
File New GUI
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
10.1.3. Bắt đầu tạo GUIDE
Để tạo GUIDE, bấm vào biểu tượng GUI trên thanh menu MATLAB, hộp
thoại sau sẽ xuất hiện
9/3/2019
2
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
• Từ hộp thoại Quick Start, người dùng có thể:
• Tạo GUI mới từ một template GUIDE có sẵn và chỉnh sửa lại cho phù
hợp mục đích.
• Mở một GUI đã có.
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
Khi người dùng tạo ra một giao diện (GUI) mới, nó sẽ được hiển thị trên
một vùng gọi là Layout Editor, hay là bảng điều khiển của tất cả các
công cụ để tạo GUI.
10.1.4. Layout Editor
Từ bảng đối tượng,
người dùng có thể
tạo các đối tượng
như push buttons,
pop-up menus, axes
… là các biểu tượng
ở bên trái Layout
Editor
Component Palette
Layout Area
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật
Matlab® – Matrix Laboratory
10.1.5. Khởi động phần thiết kế giao diện GUI (Layout Editor)
Cần chú ý các biểu tượng
quan trọng sau:
• Component Pallete:
bảng chứa các đối tượng
• Menu editor: công cụ tạo
menu cho GUI
• M-file editor: lập trình
code cho GUI
• Alignment Tool: dùng để
canh chỉnh các đối tượng
ngay hàng thẳng lối
• Undo, Redo: quay trở lại
thao tác trước
• Run: dùng để chạy
chương trình GUI
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật
Matlab® – Matrix Laboratory
Để hiển thị tên của các đối tượng trong bảng đối tượng, chọn
Preferences từ menu File, đánh dấu check vào ô cạnh dòng Show
names in component palette và click OK
7.1.6. Các đối tượng trong Component Pallete
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
•Push Button: push button sẽ thực thi một đoạn code khi được click vào.
Khi nhấn vào push button, nó sẽ bị chìm xuống và khi bỏ ra nó sẽ nổi lên
và phần callback của nó sẽ được thực thi.
•Toggle Button: toggle button sẽ thực hiện một hành động khi nó được bật
lên hay tắt đi. Khi nhấn vào toggle button, nó sẽ bị chìm xuống, tức là nó
đang ở trạng thái “on”, thực thi một đoạn code nào đó ở trạng thái on.
Khác với push button, toggle button sẽ giữa nguyên trạng thái “on” khi di
chuyển chuột ra chỗ khác. Người dùng phải click chuột một lần nữa thì nó
mới nổi lên, và trở về trạng thái off và sẽ thực thi một hành động nào đó ở
trạng thái “off”.
•Check Box: check box sẽ thực thi một hành động khi nó được đánh dấu
(check) hay bỏ dấu (uncheck). Check box được sử dụng để bật tắt một số
chức năng độc lập của chương trình, tức là có thể lựa chọn nhiều trường
hợp một lúc.
•Slider: slider cho phép thay đổi giá trị số khi di chuyển con trượt. Vị trí của
con trượt trên slider (tức là nó đang cách vị trí đầu và cuối một khoảng
cách bao nhiêu, bằng bao nhiêu % đối với độ dài slider) sẽ tác động đến
giá trị số đi kèm với slider
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
•Radio Button: radio button có chức năng tương tự như check box, sẽ thực
thi một hành động khi nó được đánh dấu (check) hay bỏ dấu (uncheck).
Radio Button được sử dụng để bật tắt một số chức năng độc lập của
chương trình, tức là có thể lựa chọn nhiều trường hợp một lúc. Nhưng radio
button khác check box ở chổ là người dùng có thể tạo một group radio
button bằng cách dùng Button Group và chỉ có thể check một radio button
trong group đó, còn những nút còn lại là uncheck, tức là chỉ có thể chọn một
trong nhiều trường hợp
•Edit Text: edit text cho phép người dùng nhập vào một chuỗi ký tự. Bằng
một số đoạn code, người dùng có thể sử dụng các chuỗi ký tự này để tác
động vào chương trình, thay đổi một số trạng thái …
•Static Text: static text cho phép người dùng nhập vào một chuỗi ký tự,
nhưng chuỗi kỹ tự này không tác động vào hoạt động của chương trình. Do
đó, static text được dùng để chú thích hay hướng dẫn chức năng một đối
tượng nào đó trong GUI.
•List box: list box thể hiện một danh sách các lựa chọn và người dùng có thể
chọn một hay nhiều lựa chọn tại một thời điểm.
9/3/2019
3
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
•Pop-Up Menu: pop-up menu thể hiện một danh sách các lựa chọn khi
người dùng click vào mũi tên và người dùng chỉ có thể chọn một lựa chọn
tại một thời điểm.
•Axes: axes cho phép người dùng vẽ đồ thị hay các hình ảnh lên nó.
•Panel: panel dùng để nhóm một số đối tượng trong GUI. Panel làm giao
diện rõ ràng hơn. Người dùng có thể đặt tiêu đề cho panel hay chỉnh sửa
hình dạng đường biên của panel. Khi nhiều đối tượng được đặt vào
panel (nhóm một đối tượng), khi di chuyển panel, các đối tượng di
chuyển theo mà vẫn không bị xáo trộn vị trí trong panel.
•Button Group: button group dùng đề nhóm các radio button lại. Khi đó,
chỉ có thể check một radio button trong group đó, còn những nút còn lại là
uncheck, tức là chỉ có thể bật một radio button ở trạng thái “on” tại một
thời điểm.
•Table: table cho phép người dùng thể hiện các kết quả thu được dưới
dạng bảng số liệu
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
• Nếu kéo đối
tượng push
button vào layout
area, nó sẽ xuất
hiện như sau
• Người dùng có
thể sử dụng
Layout Editor để
gán các tính chất
cơ bản cho các
đối tượng trong
GUI
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật
Matlab® – Matrix Laboratory
Để sửa lại chuỗi
trong Edit Text, chọn
Property Inspector.
Tất cả các tính chất
của đối tượng như
màu sắc, kích thước,
tên chuỗi (string),
callback,… sẽ được
chỉnh sửa trong đây
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật
Matlab® – Matrix Laboratory
Đây là chuỗi mặc
định ban đầu trong
Push Button hay
cũng là tên của đối
tượng
Kiểu của đối
tượng. Ở đây là
Push Button
Tên Callback của đối
tượng hay chính là
dòng function mặc
định của đối tượng.
Khi đối tượng được
tương tác, các dòng
code ở dưới Callback
của đối tượng trong
M-file sẽ thực thi
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
Để xem hay đưa code vào
Callback của đối tượng
trong M-file, ta chọn như sau
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
Xuất hiện hộp thoại yêu cầu lưu giao diện vừa tạo lại
9/3/2019
4
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
Ta chọn thư mục để lưu giao diện vừa tạo với tên là giaodien4
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
Sau khi lưu lại, hai file là giaodien4.fig và giaodien4.m sẽ xuất hiện trong thư mục
vừa lưu. Đồng thời, file giaodien4.m cũng được Matlab tự động mở ra.
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật
Matlab® – Matrix Laboratory
M-file của chương trình sẽ
được mở ra và đây là phần
Callback có tên là
pushbutton1 của đối tượng
Push Button
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật
Matlab® – Matrix Laboratory
10.1.7. Chạy chương trình giao diện (GUI)
Để chạy một GUI, chọn Run từ menu Tools, hay chọn biểu tượng mũi
tên run màu xanh lá cây trên toolbar. Ví dụ khi người dùng chạy một
GUI with Axes and Menu được tạo sẵn, nó sẽ xuất hiện như sau
Chú ý, nếu người dùng lần đầu
tiên chạy một GUI nhưng chưa
lưu lại, GUIDE sẽ hỏi người
dùng có muốn lưu figure và M-
files của GUI đó không? Nếu
chọn Yes, GUIDE sẽ hiển thị
hộp thoại Save as. Sau khi đã
lưu lại, GUIDE sẽ chạy GUI và
mở M-files của GUI đó trong
phần text editor.
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
• GUI sẽ được lưu trữ thành hai file:
•FIG file sẽ lưu trữ hình ảnh phần giao diện với các đối tượng như
push buttons, menus, axes…
•M file sẽ lưu trữ các đoạn code để điều khiển hoạt động của GUI
• Hai file trên sẽ tương ứng với việc thiết kế và lập trình GUI. Khi người
dùng thiết kế GUI trong phần Layout Editor, công việc sẽ được lưu trữ
trong FIG file.
• Khi người dùng lập trình GUI, công việc sẽ được lưu trong M file.
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
M-file của giao diện sẽ xuất hiện khi ta lưu lại
9/3/2019
5
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
Lưu FIG-file lại và khi đó M-file sẽ sinh ra Callback của đối tượng push button
vừa tạo và thay đổi các tính chất nếu được chỉnh sửa. Nếu thêm các đoạn code
dưới đây thì khi push button hoạt động, đoạn code sẽ được thực thi.
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory 26
10.2. Lập trình cho các đối
tượng trong GUIDE
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật
Matlab® – Matrix Laboratory
10.2.1. Giới thiệu
• Sau khi đã thiết kế xong phần bề mặt của giao diện, người dùng có thể
lập trình M-file của GUI bằng cách sử dụng M-file editor. GUIDE sẽ tự
động sinh ra M-file khi người dùng lần đầu tiên chạy GUI. Vậy thì M-file
của GUI sẽ có tác dụng:
oKhởi tạo GUI
oChứa các đoạn code để thực thi các nhiệm vụ nhất định khi GUI xuất
hiện trên màn hình. Chẳng hạn như hiển thị dữ liệu hay hình vẽ.
oChứa đựng các hàm callback, sẽ hoạt động mỗi lần người dùng click
vào một đối tượng của GUI
• Khi mới xuất hiện, mỗi callback sẽ chứa một dòng function mặc định.
Người dùng sẽ dùng M-file editor để thêm các đoạn code dưới dòng
fuction mặc định này để đối tượng có thể hoạt động theo ý muốn. Để
mở M-file:
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật
Matlab® – Matrix Laboratory
10.2.2. Cấu trúc handles trong Matlab GUI
Trong Matlab GUI, có thể dùng cấu trúc handles để chia sẻ dữ liệu giữa
các hàm callback của các đối tượng (tương tự như biến toàn cục). Có thể
định nghĩa và gọi cấu trúc handles ở bất kỳ hàm callback nào trong GUI.
Cách dùng:
1.Chọn tên cho cấu trúc handles mình muốn chia sẻ dữ liệu với mọi
callback. (vd: handles.var1)
2.Gán giá trị cho cấu trúc handles đó. (tương tự như dùng biến)
(vd: handles.var1 = x)
3.Lưu cấu trúc handles bằng cách dùng hàm guidata
guidata(hObject, handles)
4.Gọi lại var1 ở một callback khác:
y = handles.var1
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
Ý nghĩa của đoạn code khi thêm dưới function pushbutton1 là khi ta bấm push button
có callback là pushbutton1, biến a được gán giá trị 3, biến b được gán giá trị 2, tính c
từ a và b, rồi hiển thị c trên command window.
10.2.3. Push button
Khoa Khoa học ứng dụng
Bộ môn Cơ kỹ thuật
Đại học Quốc gia Thành phố Hồ Chí Minh
Trường đại học Bách Khoa
Lập trình tính toán Cơ kỹ thuật Matlab® – Matrix Laboratory
• Edit Text sẽ cho
người dùng nhập các
thông số của bài toán
dưới dạng chuỗi
• Trong Edit Text, có
thể để trống hoặc để
chuỗi ban đầu cũng
được
10.2.4. Edit_text