Báo cáo lập trình guide giao diện

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

TRUONG DAI HOC KHOA HOC TU NHIEN KHOA VAT LY-VAT LY KI THUAT

BỘ MÔN : VẬT LÝ ĐIỆN TỬ

BÁO CÁO

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

DE TAI : LAP TRINH GUIDE GIAO DIEN

Sinh viên thưc 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 Wñ 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 (GŨI),

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à gi, làm thé nao dé 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

“2:19 4009) S17

4.4 Chạy chương trình trên matlab 555cc c1 S2 Phan 5 : Hướng dẫn xuất file ứng dụng đuôi eXe_ - ¿6 cccccceccsrsreở

Phần 6 : Giao diện chương trình sau khi hoàn thành: . ¿- - se + s+xxe2

PHAN CUOI

Tai lift tham Khao wu cccscccccccsssccccccucssssssceeceesssesceceucssssceceesuesceseeseusaseseeceueussces

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

TRONG MATLAB

11 GUIDELAGI?

- 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

- Ung dung 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 glao 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

- Hầu hết GUIchi 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, ham CALLBACK sẽ được gọi để thực thi

1.2 BAT DAU VOI GUI:

- C62 phuong phap để lập trình GUT:

e Cách đơn giản nhất là sử dụng công cụ có sẵn trong GUI Matlab dé lap

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.

e_ 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ó

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

* Purpose _ - Controls Add

« Initialization Test GUI(s)

Hình 1.3.1 So dé khéi mé ta hoat dong cua GUI khi thao tac trén giao dién

- Khi bat dau véi GUI, GUI tu động tạo ra các mã tập tin được thực thi bởi

ham Callback function GUI thao tac 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

PHAN 2: THAO TAC VOI GUI Day 1a phién ban 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” và enter: ta được

giao diện màn hình như sau:

+4 MATLAB R2012a -.ñ

e Edit Debug Parallel De Vind

ne @ & of FE) | @ | current Folder C\Users\HOANG\Desktop\Ve do thi v ||.) &

Shortcuts 2] Howto Add [2] What's New

Current Folder ' O a x) Command Window “OO a xX) Workspace “OH 4 xX} Dep +O 4 x

| & Desktop * Vede thi +| 2 & @- @® Newto MATLAB? Watch this Video, see Demos, or read Getting Started x Bl &) RO sel ~!) Select + @-

Ẩ cenhi f5] oe =] graph fig graph1.m Sx >> m GUIDE Quick Start z - oe or G| pen a project ject:

#) graph.m

©) graph.ig Create New GUI | Qpen Existing GUI

GUIDE templates Preview _ Blank GUI (Defaut)

| GUI with Uicontrols

@ GUI with Axes and Menu

@ Modal Question Dialog

Command History 0 @ x

graph1

0š 50*t,

“1 lot(t

[ ] Save new fig | raph

raphi

OK | Cancel Help 22/4

graphi

tai de Det ^

@ Start

Hình 2.1.1: Khởi động GUI

- - Ta có các lựa chon sau :

* Blank GUI (Default): Hép thoai GUI tréng khong có một điều khiển uicontrol nao ca

* GUI with Uicontrols: Hop thoai GUI voi mot vai uicontrol nhu button, Chương trình có thể chạy ngay

* GUI with Axes and Menu: Hộp thoại GŨI với một uicontrol axes và

button, cdc menu để hiển thị đồ thị

* Modal Question Dialog: Hộp thoại đặt cầu hoi Yes, No

* Open Exiting GUI: Đề mở 1 file có sẵn

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

File Edit Debug Parallel Desktop Window Help

86) & & BO © | Beh F | @ | curentFolder|C:\Users\HOANG\Desktop\Ve do thi v ||.)

Shortc s 2] How to Add (2) What's New

Current Folder "1a xi Com untitled.fig - 4 Ea Workspace “O # X)| Dep *O 4 X

J) « Desktop > Vedo thi POO GS Fie edit View Layout Tools Help me wR se set» i @-

Name © DGG 4B 482g ae Pp — = Click here to create

#) graph fig R be

Ê) graph.m

B graph.fig (oe |e

® wv EOIT | THT

2.2 MOTA 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ù

MO TA CHUC NANG CAC CONG CU CO BAN

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

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

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

- _ Phía bên trái là nhóm các biểu tượng được Matlab GUI hỗ trợ sẵn:

e Radio Button 2 : 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

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

° lich ` - ƑẸ 7 A ` ` ` " ` ` ¢ ` 2

e 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

e 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

chuột vào Chỉ chọn được 1 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 thị, khi nhấp chuột vào lần thứ 2, nút nhân nha ra, hủy bỏ lệnh vừa thực thị

e Table = : 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

Active Control x : 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

2.3 GIOI THIEU HOP THOAI INSPECTOR:

normal

MS Sans Serif s.0

on [0.01 0.1]

Push Button pushbutton pushbutton!

MOT SO THUOC TINH TRONG INSPECTOR

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

HitTest Lua chon 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

HorizontalAlignment | Căn ngang của chuỗi nhã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)

Sfring 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

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

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

13

e Nhap đú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 Command-line accessibility: Callback (GUI becomes Current Figure within Callbacks) v

Ts =x (@) Generate FIG file and MATLAB file

I2 Generate callback function prototypes

[Ww] GUI allows only one instance to run (singleton) [| Use system color scheme for background (recommended) (> Generate FIG file onty

Tag: figure] Current Point: [184, 329] Position: [520, 343, 611, 457]

Hinh 2.4.2 : GUI Options

- Trén hép thoai Resize behavior chon dong sé 2 (Proportional), dong nay 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

14

PHAN 3: THIET KE GIAO DIEN 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 thoai 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:

- Nhan té hop phim 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 dau),

nhân save Matlab sẽ tự động tạo ra 2 file gdm 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 , 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:

3.2 TẠO THUỘC TÍNH CHO CÁC DOI TUONG:

- Sau day la bang 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: