Lap trinh GUI

LOI NOI DAU 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

TRUONG ĐẠI HỌC KHOA HOC TV NHIEN KHOA VAT LY-VAT LY Ki THUAT

BO MON: VAT LY DIEN TU’

BAO CAO MON : THUC TAP CHUYEN DE 4

DE TAI: LAP TRINH GUIDE GIAO DIEN

Sinh vién thuc hién:

TPHCM 22/4/2014

LOI NOI DAU

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 dé hiểu rõ được dao diện GUI là gì,

lam thé nao dé bat dau 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.

PHU LUC

PHAN DAU LOG 101 GAUL ec eeceececccescsseccecssececssecsccucsussussucssesecsersavssecascussueseesuesnecaeseesavsatsassaeeeveaveneens

PHAN GIU'A

Phan 1 : So luge vé lap trình giao diện người dùng GUIDE trong matlab 1.1 GUI là gì? 7ĂcSCe22EE2EEE E111 2111715 7121.111111 crkee 1.2 Bắt đầu với GUI - s22 EEEEEEEEEEx E11 cEkrrkrrreee 1.3 Các bước thực hiện trước khi bắt đầu -s- 2c s2 s2 sczxerxsrxees

Phần 2 : Thao tác với GIUI - 2 - + se £k+E+E2xe£xz tre "mm

2.1 Khởi động GUI ¿52£SEtStSEEEEEEEEEEEEEEEEEEEEEEEkerkkrrrerrerrkee

2.2 Mô tả chức năng công cụ trong giao diện GUI - 5< 55s 5+ 2.3 Giới thiệu hộp thoại ÏnSp€CfOT - << 5 << 1xx vn ng

Phần 3 : Thiết kế giao điện ŒUI - 2-2 ¿+ + EEE£2E£+EE+Ek+EEE£EEeEEEEEErEkrrksrreee

3.1 Thiết kế giao điện - 2 E+CEcEEEEE2EE2EEEEEE71E1 712111 rxrree

4.3.2 Bang OPTIONS oo

4.3.3 Nút nhắn RESET -.-¿ 2+ H110 re 4.3.4 Nút nhắn EXÍT c -+22+trrrrrrrrtrtrrrirrrirrrrrrrrrirree

4.4 Chạy chương trình trên matlab - -cSxsssssserekrrrrrke

Phần 5 : Hướng dẫn xuất file ứng dụng đuôi exe_ -

Phan 6 : Giao diện chương trình sau khi hoàn thành . -2222 ©5252

PHAN CUOI

ec J, EA TS see reecrneasee cnr neecermncemreacnemnmmcnrenreneecennasmneenemeseoamenmeaurasmesnesmanmness

PHAN 1: SO LUQC VE LAP TRINH GIAO DIEN NGUOI DUNG (GUIDE)

TRONG MATLAB

1.1 GUIDELAGI?

- GUI (Graphical User Interface) 1a 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

- Ung dung cua Matlab lap trinh 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 day đủ 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

- Hau 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 đùng lên giao diện, người sử đụng không cần biết cấu trúc chương trình

CALLBACK, khi ngudi ding tác động lên giao điện bằng các cách khác nhau, hàm CALLBACK sẽ được gọi dé thực thị

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

Có 2 phương pháp đề lập trình GUI:

e_ Cách đơn giản nhất là sử đụ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 him FUNCTION duoc GUI tự tạo sẵn

e Cach khac được lập trình từ siêu tệp Mfile bằng cac ham 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 điệ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ó

13 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 do 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:

Designing a Graphical User Interface

Generate GUI(s) * Initialization * Unusual inputs

* Wa programming * Coordination © Error handling

+ Data management + Wrong results

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.

- Khi bat dau voi GUI, GUI tw độ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 điện GUI tương tự như những lệnh thực thi trong Comment Windowns

- _ Tất cd cdc ham 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

PHAN 2: THAO TAC VOI 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:

e Khởi động Matlab từ biểu tượng Matlab trên màn hình desktop

e_ Trong cửa số Comment Windowns gõ lệnh “guide” va enter: ta được giao dién màn hình như sau:

Curent folder oO + »| Command Window - _— “DB = x| Workspace tO x) Dep Or x

il * Desktop + Vedothi +) 2) G- D) Newre MATLAB? Watch this Widlee: see Demos, or read Getting Started % Sl mf SR | Bsa ~ cet = lh @-

#2) graph

©) graphfig Create New GUI Open Existing GUI

GUIDE templates Preview

# Modal Question Dialog

* Blank GUI (Deƒfaulr): Hộp thoại GUI trống không có một điều khiển

uicontrol nao ca

* GUI with Uicontrols: Hép thoại GUI với một vài uicontrol nhu 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 va

button, cac menu dé hién thi do thi

* Modal Question Dialog: Hép thoai dat cau hoi Yes, No

* Open Exiting GUI: Dé mé 1 file có sẵn

- Nhap Blank GUI (Default) chon OK dé tao 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:

File Edit Debug Parallel Desktop Window Help

h ee 4s%are h đ B @ | Current Folder: (C:\Users\HOANG\Desktop\Ve do thi v

Shortcuts 2] Hewlo Add 2] What's New

Current folder On x) Cry untitled.fig = ok Workspace *“O7X Dep Ox

a « Desktop * Ve do thi xi & O- @ File Edit View Layout Tools Help ñ| | | đả Hà | [i sel *| | Select * i @-

“| Name ¥ nữøR | 42B9 & | 48g fe? > Name Value Click here to create

8 graphÏ.m | 5 oF open a project

i graph graphi El-3 22/4/2014 9:02 AM

~~ graph Tag: figure! Current Point: [167, 2] Position: [520, 380, 560, 420] guide ¥

2.2 MO TA CHUC NANG GIAO DIEN 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ù

let Edit Text

(eT) Static Text

MO TA CHUC NANG CAC CONG CU CO BAN

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 Dung dé sắp xếp các đối tượng điều khiên

phần trong bố trí của bạn

đị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

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

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

- Phia bén trái là nhóm các biểu tượng được Matlab GUI hỗ trợ sẵn:

e 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 I 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

e Check box `“ : sử dụng để đánh dấu tích (thực thi) vào và có thể check

e 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 l mục trong danh sách các mục

e 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

e 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

nha ra, huy bỏ lệnh vừa thuc thi

e Table a : tạo ra một bảng tương tự trong Excel

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

"3

Active Control ™ : quan 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

2.3 GIOLTHIEU HOP THOAI INSPECTOR:

MOT SO THUOC TINH TRONG INSPECTOR

BackgroundColor Màu nên của đối tượng

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

Clipping Thuộc tính này không có tác dụng trên các đối tượng điêu

HitTest Lua chọn bang 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

11

KeyPressFcn Nhân phím Callback thường xuyê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

TooltipString Tao 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

Visible Điều khiến thuộc tính nhìn thấy của các đôi tượng

12

2.4 MOT VAI CHUC NANG MO RONG:

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 chon Align Objects & Hộp thoại Align hiện ra như sau:

Distribute Leal dle! Ullal!

Set spacing |20 pixels

Ok Cancel Apply

mY

< > Tag: figurel Current Point: [610, 100] Position: [520, 343, 611, 457]

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 điện (toàn bộ vùng thiết kế hay

nên giao diện) :

13

* 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:

e Thiết lập Tag là “exit”

-_ Tiếp tục tùy chọn nâng cao , vào Menu Tools => GUI Options

ie (@) Generate FIG file and MATLAB file

{¥] Generate callback function prototypes [¥] GUI allows only one instance to run (singleton) [¥] Use system color scheme for background (recommended)

() Generate FIG file only

PHAN 3 : THIET KE GIAO DIEN GUI

***T yong phan nay, 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 DIEU KHIEN:

- 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:

- Mỗi hộp thoại có Inspector , bang cach nhap dup chuột vào hoặc chuột phải

chon Property Inspector

® Radio Button | 7m | Edi Text |

M Check Box 3 4 | axes!

fa Edit Text | Static al Edit Text | LI

Hinh 3.1.2

16

3.2 TAO THUOC TINH CHO CAC DOI TUONG:

- Sau day la bang m6 ta cac gia tri va 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:

- Hinh sau mé tả cách thay đổi giá trị trong 6 String cia Select Function

& Inspector: uicontrol (ham "Square”) o

on

on center

on

si

1.0 1.0 0.0 [21.8 17.385 20.2 5,154]

on

[0.01 0.1]

=) Square popupmenu ham

|

[ OK [ Cancel