đề tài lập trình guide giao diện

TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
KHOA VẬT LÝ-VẬT LÝ KĨ THUẬT
BỘ MÔN : VẬT LÝ ĐIỆN TỬ









BÁO CÁO

MÔN : THỰC TẬP CHUYÊN ĐỀ 4

ĐỀ TÀI : LẬP TRÌNH GUIDE GIAO DIỆN





Sinh viên thưc hiện:

NGUYỄN THÀNH NAM 1113554
NGUYỄN HUY HOÀNG 1113160

TPHCM 22/4/2014




i

LỜI NÓI ĐẦU

Ngày xưa những công cụ tính toán thủ công bằng tay, hoặc những bàn tính
cổ điển để hỗ trợ toán học, giờ đây với sự đổi mới của ngành điện tử, công nghệ
thông tin, các công cụ tính toán hỗ trợ các ngành kĩ thuật hiện đại ra đời, với sự
mạnh mẽ và nhanh chóng của các công cụ phần mềm, các công cụ phần lớn đã
thay thế cho việc thực hiện thủ công, giúp kiểm tra kết quả một cách nhanh chóng,
giảm chi phí. Cùng với đó chính là các phần mềm… các công cụ hỗ trợ kĩ thuật
như phần mềm Win cc, Protell, Protues, Mlap, Matlab…. Là những công cụ
không thể thiếu trong ngành kĩ thuật. Sau đây mình sẽ giới thiệu phần mềm
Matlab, một công cụ hỗ trợ tính toán và mô phỏng hệ thống hết sức trực quan và
chính xác.
Hẳn là phần mềm Matlab hiện nay không còn xa lạ gì với người dùng, nó là
một công cụ hỗ trợ tính toán và mô phỏng thực tế rất mạnh, ngoài các tính năng để
thực hiện những điều đó, Matlab còn hỗ trợ tạo giao diện người dùng (GUI),
Chúng ta lần lượt tìm hiểu ứng dụng từ cơ bản để hiểu rõ được dao diện GUI là gì,
làm thế nào để bắt đầu với GUI…
Với đề tài về giao diện GUI chúng ta sẽ đi sâu vào nghiên cứu ứng dụng và
phát triển GUI, phát triển giao diện người dùng.

ii

PHỤ LỤC
PHẦN ĐẦU
Lời nói đầu
PHẦN GIỮA
Phần 1 : Sơ lược về lập trình giao diện người dùng GUIDE trong matlab
1.1 GUI là gì?
1.2 Bắt đầu với GUI
1.3 Các bước thực hiện trước khi bắt đầu
Phần 2 : Thao tác với GUI
2.1 Khởi động GUI
2.2 Mô tả chức năng công cụ trong giao diện GUI
2.3 Giới thiệu hộp thoại Inspector
Phần 3 : Thiết kế giao diện GUI
3.1 Thiết kế giao diện
3.2 Tạo thuộc tính cho các đối tượng
3.3 Các tính năng mở rộng
Phần 4 : Thực thi hàm
4.1 Giao diện M.file
4.2 Một số hàm trong GUI
4.3 Lập trình
4.3.1 Nút nhấn START
iii

4.3.2 Bảng OPTIONS
4.3.3 Nút nhấn RESET
4.3.4 Nút nhấn EXIT
4.4 Chạy chương trình trên matlab
Phần 5 : Hướng dẫn xuất file ứng dụng đuôi exe

Phần 6 : Giao diện chương trình sau khi hoàn thành
PHẦN CUỐI
Tài liệu tham khảo



1

PHẦN 1: SƠ LƯỢC VỀ LẬP TRÌNH GIAO DIỆN NGƯỜI DÙNG (GUIDE)
TRONG MATLAB


1.1 GUIDE LÀ GÌ ?

- GUI (Graphical User Interface) là giao diện đồ họa có điều khiển bởi nhiều thanh
công cụ được người lập trình tạo sẵn, cho tương tác giữa người dùng là giao diện
chương trình, mỗi chương trình được người lập trình tạp sẵn giao diện thực hiện
một vài chức năng được người lập tình tạo sẵn và giao tiếp với người sử dụng.
- Ứng dụng của Matlab lập trình giao diện rất mạnh và dễ thực hiện, nó có thể tạo
ra giao diện người dùng tương tự VBB, C++…
- GUI bao gồm đầy đủ các chương trình hỗ trợ như thực hiện phép toán LOGIC,
mô phỏng không gian 2D, 3D, đọc hiển thị dữ liệu, liên kết đa phương tiện. Giao
tiếp với người dùng thông qua hình ảnh, các nút nhấn thực thi
- Hầu hết GUI chỉ thực hiện (trả lời) lệnh người dùng thông qua các tác động của
người dùng lên giao diện, người sử dụng không cần biết cấu trúc chương trình
vẫn có thể thực hiện được. GUI được thực hiện thông qua các hàm
CALLBACK, khi người dùng tác động lên giao diện bằng các cách khác nhau,
hàm CALLBACK sẽ được gọi để thực thi.

1.2 BẮT ĐẦU VỚI GUI:

- Có 2 phương pháp để lập trình GUI:
 Cách đơn giản nhất là sử dụng công cụ có sẵn trong GUI Matlab để lập
trình. Ưu điểm của cách này là dễ thực hiện và các hàm FUNCTION được
GUI tự tạo sẵn.
2

 Cách khác được lập trình từ siêu tệp Mfile bằng các hàm FUNCTION do
người lập trình tự viết, nó có ưu điểm là tùy biến cao. Tuy nhiên cách này
khó hơn và đòi hỏi người lập trình phải có hiểu biết sâu và trình độ.
- Ở đây với những bài tập đơn giản về giao diện, ta thực hiện cách thứ nhất để
lập trình giao diện với nhưng công cụ được hỗ trợ sẵn trong Matlab.
- Khi thao tác trên giao diện chúng ta không thể thay đổi các hàm trong nó.

1.3 CÁC BƯỚC CẦN THỰC HIỆN TRƯỚC KHI BẮT ĐẦU:
- Trước tiên để bắt đầu lập trình ta cần phải xác định mục đích của chương
trình là gì?
- Sau đó tiến hành xác định các bước thực hiện để mô phỏng giao diện người
dùng sao cho hợp lí và chính xác.
- Bước cuối cùng là viết chương trình và thực thi.
Sơ đồ sau đây mô phỏng trình tự thực hiện với GUI:

Hình 1.3.1 . Sơ đồ khối mô tả hoạt động của GUI khi thao tác trên giao diện.
3

- Khi bắt đầu với GUI, GUI tự động tạo ra các mã tập tin được thực thi bởi
hàm Callback function. GUI thao tác trên những kí tự mà người dùng nhập
vào vào chuyển sang dạng số học, nói cách khác, giao diện GUI tương tự như
những lệnh thực thi trong Comment Windowns.
- Tất cả các hàm callback thực thi những lệnh chứa trong nó.
- Chúng ta nên sử dụng chức năng HELP của Matlab để tìm hiểu thêm tất cả

cách hàm thực thi trong GUI, cách tạo và thao tác với GUI …

4

PHẦN 2: THAO TÁC VỚI GUI
Đây là phiên bản Matlab R2012A, các phiên bản khác cũng có thể thao tác tương
tự.
2.1 KHỞI ĐỘNG GUI:
- Thực hiện khởi động Matlab đến GUI theo hình sau:
 Khởi động Matlab từ biểu tượng Matlab trên màn hình desktop.
 Trong cửa sổ Comment Windowns gõ lệnh “guide” và enter: ta được
giao diện màn hình như sau:

Hình 2.1.1: Khởi động GUI
- Ta có các lựa chọn sau :
* Blank GUI (Default): Hộp thoại GUI trống không có một điều khiển
uicontrol nào cả.
* GUI with Uicontrols: Hộp thoại GUI với một vài uicontrol như button,
… Chương trình có thể chạy ngay.
* GUI with Axes and Menu: Hộp thoại GUI với một uicontrol axes và
5

button, các menu để hiển thị đồ thị.
* Modal Question Dialog: Hộp thoại đặt câu hỏi Yes, No.
* Open Exiting GUI: Để mở 1 file có sẵn.
- Nhấp Blank GUI (Default) chọn OK để tạo một giao diện bắt đầu với giao
diện trống, ta được hình ảnh giao diện trong GUI như sau:

Hình 2.1.2: Giao diện GUI

6

2.2 MÔ TẢ CHỨC NĂNG GIAO DIỆN GUI:
Trong giao diện trên chúng ta có thể thao tác để tùy biến các thanh công cụ phù
hợp với mục đích sử dụng.

Hình 2.2.1: Giao diện GUI




7

MÔ TẢ CHỨC NĂNG CÁC CÔNG CỤ CƠ BẢN
Công cụ
Mô tả
Layout editor
Chọn các thành phần từ bảng thành phần, trình bày,
và sắp xếp chúng trong các khu vực bố trí. (Tùy
chỉnh hiện tên các thành phần: File => Preferences)
Align Objects
Dùng để sắp xếp các đối tượng điều khiển.
Menu Editor
Tạo menu cho giao diện.
Tab Order Editor
Thiết lập các tab và sắp xếp thứ tự của các thành
phần trong bố trí của bạn .

Toolbar Editor
Thanh công cụ tạo ra có chứa các nút bấm được xác
định trước và tùy chỉnh và chuyển đổi nút.
Editor
Hiển thị , trong trình soạn thảo mặc định của bạn ,
các tập tin mã kết hợp với giao diện đồ họa .
M-file editor
Mở cửa sổ M-file.
Property Inspector
Thiết lập các thuộc tính cảu các đối tượng điều khiển.
Nó cung cấp một danh sách tất cả các thuộc tính bạn
có thể thiết lập và hiển thị các giá trị hiện tại của
chúng.
Object Browser
Hiển thị một danh sách phân cấp của các đối tượng
trong giao diện đồ họa.
Run
Lưu và chạy giao diện hiện tại.
Resize box
Tùy chỉnh kích thước giao diện.
Position Readouts
Liên tục hiển thị vị trí con trỏ chuột và vị trí của các
đối tượng được chọn.

8

- Phía bên trái là nhóm các biểu tượng được Matlab GUI hỗ trợ sẵn:
 Push Button : là nút nhấn, khi nhấn vào sẽ thực thi lệnh trong cấu trúc
hàm callback của nó.

 Slider : là thanh trượt cho phép người dùng di chuyển thanh trượt để
thực thi lệnh.
 Radio Button : nó giống như Check Box nhưng thường được sử dụng
để tạo sự lựa chọn duy nhất, tức là 1 lần chỉ được chọn 1 trong số các nhóm
nhiều nút. Khi một ô được chọn thì các ô còn lại trong nhóm bị bỏ chọn.
 Check box : sử dụng để đánh dấu tích (thực thi) vào và có thể check
nhiều ô để thực thi.
 Edit Text : là nơi các kí tự được nhập vào từ người dùng, người dùng có
thể thay đổi được.
 Static Text : là các kí tự được hiển thị thông qua các callback, hoặc
thông thường để viết nhãn cho các biểu tượng, người dùng không thể thay
đổi nội dung.
 Pop-up Menu : mở ra danh sách các lực chọn khi người dùng nhấp
chuột vào. Chỉ chọn được 1 mục trong danh sách các mục.
 List Box : hộp thoại danh sách cách mục, cho phép người dùng chọn
một hoặc nhiều mục.
 Toggle Button : là nút nhấn có 2 điều khiển, khi nhấp chuột và nhả ra,
nút nhấn được giữ và lệnh thực thi, khi nhấp chuột vào lần thứ 2, nút nhấn
nhả ra, hủy bỏ lệnh vừa thực thi.
 Table : tạo ra một bảng tương tự trong Excel.
9

 Axes : đây là giao diện đồ họa hiển thị hình ảnh, nó có nhiều thuộc tính
bao gồm: không gian 2D (theo trục đứng và trục ngang), 3D (hiển thị không
gian 3 chiều).
 Panel : tạo ra một mảng nhóm các biểu tượng lại với nhau giúp ta dễ
kiểm soát và thao tác khi di chuyển.
 Button Group : quản lí sự lựa chọn của nút Radio Button.
 Active Control : quản lí một nhóm các bút hoặc các chương trình liên
quan với nhau trong Active.

10


2.3 GIỚI THIỆU HỘP THOẠI INSPECTOR:


Hình 2.3.1: Hộp thoại Inspector

11

MỘT SỐ THUỘC TÍNH TRONG INSPECTOR

Thuộc tính
Mô tả
BackgroundColor
Màu nền của đối tượng.
BeingDeleted
Đối tượng đã được xóa.
BusyAction
Callback thường xuyên gián đoạn.
ButtonDownFcn
Nút nhấn Callback thường xuyên.
CData
Hình ảnh màu thật hiển thị trên điều khiển.
Callback
Điều khiển hoạt động.
Clipping
Thuộc tính này không có tác dụng trên các đối tượng điều
khiển.

CreateFcn


Thường xuyên thực hiện Callback trong quá trình tạo đối
tượng.
DeleteFcn
Thường xuyên thực hiện Callback trong quá trình xóa đối
tượng.
Enable
Kích hoạt hoặc vô hiệu hóa các đối tượng điều khiển.
Extent
Vị trí hình chữ nhật (chỉ đọc).
FontAngle
Kiểu chữ nghiêng.
FontName
Kiểu chữ.
FontSize
Cỡ chữ.
FontUnits
Đơn vị kích thước font chữ.
FontWeight
Nét chữ.
ForegroundColor
Màu chữ.
HandleVisibility
Cho dù xử lý có thể truy cập từ dòng lệnh và ảnh minh hoạ.
HitTest
Lựa chọn bằng cách click chuột. Thuộc tính này không có
tác dụng trên các đối tượng điều khiển.
12

HorizontalAlignment
Căn ngang của chuỗi nhãn.
SliderStep
Chế độ Callback gián đoạn thường xuyên.
KeyPressFcn
Nhấn phím Callback thường xuyên.
ListboxTop
Chỉ số trên hầu hết các chuỗi hiển thị trong hộp danh sách
Max
Giá trị lớn nhất (phụ thuộc vào đối tượng điều khiển)
Min
Giá trị nhỏ nhất (phụ thuộc vào đối tượng điều khiển)
Position
Kích thước và vị trí của đối tưỡng điều khiển.
SliderStep
Kích thước bước nhảy của thanh trượt.
String
Nhãn của các đối tượng điều khiển, các mục hộp danh sách,
lựa chọn trình đơn pop-up.
Style
Kiểu của đối tượng điều khiển.
Tag
Dùng để phân biệt giữa các đối tượng điều khiển.
TooltipString
Tạo tip cho đối tượng điều khiển.
UIContextMenu
Kết hợp một trình đơn ngữ cảnh với đối tượng điều khiển.
Units
Đơn vị đo lường.

UserData
Dữ liệu liên kết với đối tượng điều khiển.
Value
Giá trị hiện thời của đối tượng điều khiển.
Visible
Điều khiển thuộc tính nhìn thấy của các đối tượng.

13

2.4 MỘT VÀI CHỨC NĂNG MỞ RỘNG:

Chú ý, để tạo sự thẳng hàng, cột của các hộp thoại cho đẹp mắt ta làm như sau:
- Nhấn giữ phím Ctrl và nhập vào các hộp thoại muốn chỉnh sửa, trên Menu
chọn Align Objects . Hộp thoại Align hiện ra như sau:

Hình 2.4.1 : Hộp thoại Align Objects

- Trong hộp thoại trên ta có thể cân chỉnh các nút, nhóm nút sao cho chúng thẳng
hàng, thẳng cột và đều nhau. Sau khi cân chỉnh nhấn nút Apply để lưu thay đổi.
- Bây giờ ta thiết lập thuộc tính chung cho giao diện (toàn bộ vùng thiết kế hay
nền giao diện) :
14

 Nhấp đúp chuột vào bất cứ vị trí nào trên nền giao diện để vào hộp thoại
Inspector (hoặc trên menu chọn View -> Property Inspector), hộp thoại
Inspector hiện ra như sau:
 Thiết lập Tag là “exit”
- Tiếp tục tùy chọn nâng cao , vào Menu Tools => GUI Options

Hình 2.4.2 : GUI Options

- Trên hộp thoại Resize behavior chọn dòng số 2 (Proportional), dòng này cho
phép người dùng thay đổi khích thước của giao diện và các đối tượng cũng tự
động thay đổi kích thước phù hợp với nền giao diện, nhấn OK để lưu thay đổi.

15

PHẦN 3 : THIẾT KẾ GIAO DIỆN GUI
***Trong phần này, giải thích các thông số trong Inspector đồng thời chỉnh
sửa trên từng hộp thoại sẽ được trình bày song song.
*** Yêu cầu : thiết kế ứng dụng có chức năng vẽ các tín hiệu tương tự cơ bản (
sóng vuông , sin , cos , răng cưa ) . yêu cầu nhập vào tần số và thời gian .
3.1 KHỞI TẠO CÁC ĐỐI TƯỢNG ĐIỀU KHIỂN:
- Nhấn tổ hợp phím Ctrl + S để thực hiện lưu file, sau khi chọn đường dẫn để lưu
file (Chú ý không lưu file với các biến đặc biệt hoặc bằng các con số khởi đầu),
nhấn save Matlab sẽ tự động tạo ra 2 file gồm một file .m và một file .fig, trong đó
file .m là Mfile chứa các hàm Matlab đã tạo sẵn hỗ trợ giao diện.
- Lần lượt kéo thả các nút như hình sau:

Hình 3.1.1: Khởi tạo các đối tượng điều khiển.
16

- Mỗi hộp thoại có Inspector , bằng cách nhâp đúp chuột vào hoặc chuột phải
chọn Property Inspector.
- Sau đây là hình ảnh được đánh số để đánh dấu từng thay đổi một:

Hình 3.1.2

17

3.2 TẠO THUỘC TÍNH CHO CÁC ĐỐI TƯỢNG:
- Sau đây là bảng mô tả các giá trị và thuộc tính của các hộp thoại trong hình,
chúng ta tiến hành thay đổi các giá trị tương ứng theo bảng sau:
STT
Tên thuộc tính
Giá trị thuộc tính
1
string
Frequency
2
String

tag
tanso
3
String
Time
4
String

Tag
thoigian
5
String
Function
6
String
Square
Sin

Cos
sawtooth
Tag
ham
7
Title
Options
8
String
START
Tag
Start
9
String
Hold on
Tag
hold
10
String
Grid on
Tag
grid
11
String
RESET
Tag
reset
12
String
EXIT

Tag
exit
13
Tag
axes1
Visible
off

18

- Hình sau mô tả cách thay đổi giá trị trong ô String của Select Function:


Hình 3.2.1: Thiết lập các thuộc tính trong hộp thoại Inspector.
- Sau khi viết xong, nhấn OK để lưu lại.

19

- Sau khi chỉnh sửa các thông số ta dùng chuột để di chuyển các hộp thoại, bố
trí hộp thoại theo mong muốn, ta được giao diện như sau:

Hình 3.2.2: Giao diện của ứng dụng.

20


3.3 MỘT SỐ TÍNH NĂNG MỞ RỘNG:
Chú ý, để tạo sự thẳng hàng, cột của các hộp thoại cho đẹp mắt ta làm như sau:
- Nhấn giữ phím Ctrl và nhập vào các hộp thoại muốn chỉnh sửa, Trên Menu
chọn Align Objects . Hộp thoại Align hiện ra:

Hình 3.3.1: Hộp hoại Align Objects.

- Trong hộp thoại trên ta có thể cân chỉnh các nút, nhóm nút sao cho chúng
thẳng hàng,thẳng cột và đều nhau. Sau khi cân chỉnh nhấn nút Apply để lưu
thay đổi.
- Trên hộp thoại Resize behavior chọn dòng số 2 (Proportional), dòng này
cho phép người dùng thay đổi khích thước của giao diện và các đối tượng
cũng tự động thay đổi kích thước phù hợp với nền giao diện, nhấn OK để
lưu thay đổi.

21

PHẦN 4 : THỰC THI HÀM
4.1 GIAO DIỆN TRONG MFILE:
- Khi đã cân chỉnh xong toàn bộ giao diện trong GUI, nhấn F5 (hoặc nhân tổ
hợp phím Ctrl + T hoặc nhấp vào biểu tượng trên thanh Menu).
- Khi Run, Matlab sẽ tự chạy file .m và hiển thị doa diện đồ họa lên màn
hình. ở đây ta bắt đầu thao tác với file .m

Hình 4.1.1: Giao diện Mfile.
- Khi ta chưa thao tác trong Trong file .m xuất hiện như trên hình, trong đó,
tất cả các hàm function đều được Matlab hỗ trợ tạo sẵn các hàm chức năng
có liên quan, ta chỉ việc thao tác trên đó.
- Mỗi sau một hàm bất kì đều có các chú thích bên dưới (sau dấu %), ta có
thể xóa toàn bộ chúng đi đễ dễ nhìn cũng không ảnh hưởng đến các hàm.