(TIỂU LUẬN) báo cáo môn học ỨNG DỤNG APP DESIGNER TRONG THIẾT kế GIAO DIỆN

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ínhtoá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 đó, Matlabcò

TRƯỜNG ĐẠI HỌC SƯ PHẠM KĨ THUẬT THÀNH PHỐ HỒ CHÍ MINH

KHOA CƠ KHÍ ĐỘNG LỰC

BÁO CÁO MÔN HỌC

ỨNG DỤNG APP DESIGNER TRONG THIẾT KẾ GIAO DIỆN

TRƯỜNG ĐẠI HỌC SƯ PHẠM KĨ THUẬT THÀNH PHỐ HỒ CHÍ MINH

KHOA CƠ KHÍ ĐỘNG LỰC

BÁO CÁO MÔN HỌC

ỨNG DỤNG APP DESIGNER TRONG

THIẾT KẾ GIAO DIỆN

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

KHOA CƠ KHÍ ĐỘNG LỰC

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Tên tiểu luận: ỨNG DỤNG APP DESIGNER TRONG THIẾT KẾ GIAO DIỆNNgành: Công nghệ kĩ thuật ô tô

Điểm đánh giá (theo thang điểm 10):

Tp Hồ Chí Minh, ngày 12 tháng 07 năm 2020

Giảng viên hướng dẫn

(Ký & ghi rõ họ tên)

Mục lục

Chương 1 TỔNG QUAN 4

Chương 2 PHẦN MỀM THIẾT KẾ GIAO DIỆN APP DESIGNER 5

2.1 Giới thiệu chung về APP DESIGNER 5

2.1.1 App Designer là gì 5

2.1.2 Phương pháp để lập trình với App Designer 6

2.2 Thao tác với APP DESIGNER 6

2.2.1 Khởi động APP DESIGNER 6

2.2.2 Mô tả chức năng và giao diện APP DESIGNER 8

2.2.3 Giới thiệu hộp thoại Inspector 10

2.3 Một số ví dụ cơ bản về thiết kế giao diện: 11

2.3.1 Bài toán tổng hai số 11

2.3.2 Cách đóng gói App 14

2.4 Liên kết APP DESIGNER với SIMULINK 15

2.4.1 Sự khác nhau giữa Simulink phiên bản 2017 và phiên bản 2020 15

2.4.2 Liên kết App Designer với Similink 15

Chương 3 THỰC HÀNH ÁP DỤNG APP DESIGNER VÀO MỘT SỐ BÀI TOÁN15 3.1 Thiết kế giao diện bên cửa sổ Design View 15

3.2 Viết code cho từng View bên cửa sổ Code View 16

3.3 Kết quả thu được 20

Chương 4 KẾT LUẬN 22

DANH MỤC CÁC CHỮ VIẾT TẮT VÀ KÝ HIỆU

DANH MỤC CÁC HÌNH

Hình 2 1: Sơ đồ khối việc thực hiện App Designer 5

Hình 2 2: Cửa sổ của App Designer 7

Hình 2 3: Một cửa số App Designer mới 8

Hình 2 4: Hộp thoại Inspector 10

Hình 2 5: Cửa sổ Design View 12

Hình 2 6: Cách chuyển sang cửa sổ Code View 12

Hình 2 7: Cửa sổ Code View 13

Hình 2 8: Phần code về bài toán tính tổng 14

Hình 2 9: App Design sau khi chạy 14

Hình 2 10: Các cách xuất App 15

Hình 2 11: Ví dụ đơn giản về sự liên kết App Designer và Simulink 16

YHình 3 1: Giao diện bài toán 17

Hình 3 2: Bài toán được mô phỏng bằng Simulink 18

Hình 3 3: Đồ thị vị trí và vận tốc vật năng, dạng đầu vào (Gate) của lực F 22

Hình 3 4: Đồ thị vị trí và vận tốc vật năng, dạng đầu vào (Gate) của lực F 22

Chương 1 TỔNG QUAN

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áccô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ểmtra 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áccông cụ hỗ trợ kĩ thuật như phần mềm Win cc, Protell, Protues, Mlap, Matlab… Là nhữngcô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ínhtoá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 đó, Matlabcòn hỗ trợ tạo giao diện người dùng (APP DESIGNER) Chúng ta lần lượt tìm hiểu ứngdụng từ cơ bản để hiểu rõ được dao diện APP DESIGNER là gì, làm thế nào để bắt đầu vớiAPP DESIGNER … Với đề tài về giao diện APP DESIGNER chúng ta sẽ đi sâu vào nghiêncứu ứng dụng và phát triển APP DESIGNER, phát triển giao diện người dùng

Chương 2 PHẦN MỀM THIẾT KẾ GIAO DIỆN APP DESIGNER

2.1 Giới thiệu chung về APP DESIGNER

2.1.1 App Designer là gì

App Designer là giao diện đồ họa có điều khiển bởi nhiều thanh công cụ đượcngười lập trình sẵn, cho tương tác giữa người dùng là giao diện chương trình, mỗichương trình được người lập trình tạo sẵn giao diện thực hiện một vài chức năng đượcngười lập trình tạo sẵn và giao tiếp với người dùng Nó có thể tạo ra giao diện ngườidùng tương tự như VBA, C++,… App Designer bao gồm đầy đủ các chương trình hỗtrợ thực hiện các phép toán LOGIC, mô phỏng không gian 2D, 3D, liên kết đa phươngtiện

Hình 2 : Sơ đồ khối việc thực hiện App Designer

Hầu hết App Designer chỉ thực hiện lệnh người dùng thông qua các tác động củangười dùng lên giao diện, người dùng không cần biết cấu trúc của chương trình vẫn cóthể thực hiện được App Designer thực hiện thông qua 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 thì hàm CALLBACK được gọi ra

để thực thi

2.1.2 Phương pháp để lập trình với App Designer

Cách đơn giản là sử dụng công cụ có sẵn trong App Designer Matlab để lập trình

Ưu điểm của cách này là dễ thực hiện, các hàm FUNCTION được tự tạo sẵn

Cách thứ hai là lập trình tự 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ậptrình phải có hiểu biết sâu Đối với những bài tập đơn giản thì ta nên sử dụng 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

Các bước cần thực hiện trước khi bắt đầu với App Designer:

Trước khi để bắt đầu lập trình ta cần phải xác định mục tiêu 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í chính xác

Bước cuối cùng là viết chương trình và thực thi

Khi bắt đầu với App Designer, nó tự động tạo ra các tập tin được thực hiện bởihàm Callback function App Designer thao tác trên những kí tự mà người dùngnhập vào chuyển sang dạng số học, nói cách khác, giao diện App Designer tương tựnhư những lệnh thực thi trong Comment Windows

Tất cả các hàm Callback thực thi những lệnh chứ trong nó

Ngoài ra, chúng ta nên sử dung chức năng HELP để tìm thêm tất cả hàm thực thi trong App Designer, cách tạo và thao tác với App Designer…

2.2 Thao tác với APP DESIGNER

2.2.1 Khởi động APP DESIGNER

Thực hiện hởi động Matlab đến APP DESIGNER như sau:

Khởi động Matlab

Có thể mở bằng một số cách sau:

 Chọn thẻ APPS → Design App.

 Trong cửa sổ Command Windown gõ lệnh “appdesigner” và Enter

Ta được giao diện màn hình như sau:

Hình 2 : Cửa sổ của App Designer

Ta có các lựa chọn sau:

Blank App (Default): Hộp thoại trống không chưa được thiết kế điều khiển gì cả

Một số ví dụ đã được thiết kế sẵn có thể ngay như button, axes, các menu hiển thị đồ thị

Nhấp Blank App (Default) để bắt đầu với giao diện trống, ta được hình ảnh giao diện trong App như sau:

Hình 2 : Một cửa số App Designer mới 2.2.2 Mô tả chức năng và giao diện APP DESIGNER

Trong giao diện trên chúng ta có thể thao tác tùy biến các ô công cụ phù hợp với mục đích sử dụng

điều khiển

tượng điều khiển Nó cung cấpmột danh sách tất cả các thuộctính bạn có thể thiết lập và hiểnthị các giá trị hiện tại của chúng

các đối tượng trong giao diện đồhọa

Bảng mô tả chức năng các công cụ cơ bản

Phía bên trái là COMPONENT LIBRARY nhóm các biểu tượng được APP

Table tạo ra một bảng tương tự Excel

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ễ hiểu kiểm soát và thao tác khi di chuyển

Ngoài ra còn có một số công cụ hiển thị bằng hình ảnh như Gauge , Switch

, Lamp ,…

2.2.3 Giới thiệu hộp thoại Inspector

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

tượng điều khiển

của các đối tượng

Horizontal Alignment Căn ngang của chuỗi nhãn

khiểnNgoài ra còn một số tính năng khác

2.3 Một số ví dụ cơ bản về thiết kế giao diện:

Đầu tiên ta sử dụng hai View là Edit Field (Numberic) và Button để tạo giao diện chobài toán Ta có thể thay đổi tên các đối tượng hoặc tạo màu cho đối tượng nhờ các thuộctính của nó.

Hình 2 : Cửa sổ Design View

Sau khi tạo xong giao diện ban đầu thì sẽ tới phần viết code cho bài toán Ta clickchuột phải vào Button, nhấn vào Callback và chọn Add ButtonPushedFCn Callback nhưhình bên dưới

Hình 2 : Cách chuyển sang cửa sổ Code View

Sau đó màn hình sẽ hiện lên cửa sổ Code View và vị trí mà ta cần nhập code vào.Khoảng trắng là chỗ để viết code lên, còn khoảng màu xám là code mà hệ thống đã tạosẵn nên ta không thể nhập hoặc sửa được.

Hình 2 : Cửa sổ Code View

Trước khi viết code thì ta cần chú ý tên của các đối tượng mà cần lấy ra khi triển khai.Tên của các đối tượng có thể thấy ở bên phải màn hình Các bạn có thể thay đổi tên đốitượng để tiện cho việc viết code

Tiếp theo qua phần Code View, ta có thể viết code theo cách mô tả ở hình bên dướiDòng lệnh a = app.EditField.Value có nghĩa là ta gán giá trị của ô Edit Field đầu tiên cho

a, “app” là đường dẫn của App Design, EditField là tên đối tượng (có thể nhìn bên phải màn hình), Value là lấy giá trị của nó Tương tự các dòng lệnh b = app.EditField.Value.Dòng lệnh c = a +b là ta gán tổng hai giá trị a và b cho một biến c nào đó

Dòng lệnh app.TongButton.Text = num2str(c) là ta lấy giá trị của c để gán vào giá trị củaButton để khi tính hiện lên giá trị tổng Mà Button định dạng kiểu string, c hiện tại là kiểu Numberic nên phải chuyển từ kiểu số sáng kiểu chuỗi Dùng lệnh num2str() để chuyển kiểu số sáng kiểu chuỗi Nếu muốn chuyển ngược lại có thể dùng str2num() Sauk hi hoàn thành ta được kết quả như hình bên dưới

Hình 2 : Phần code về bài toán tính tổng

Sau khi lập trình xong ta nhấn RUN để chạy chương trình thì màn hình sẽ hiển thị mộtgiao diện giống như ta đã thiết kế ở bên cửa sổ Design View Ta nhập 2 số bất kì và nhấn

‘Tong’ thì ta sẽ được kết quả như trong hình dưới đây

Hình 2 : App Design sau khi chạy

2.3.2 Cách đóng gói App

Đầu tiên ta click vào Share thì sẽ hiện ba cách đóng gọi App:

MATLAB App tạo ra một file cài đặt dành cho người dùng chỉ có cài Matlab không cũng sử dụng được

Web App tạo ra ứng dụng WEB sử dụng MATLAB Compiler

Standalone Desktop App tạo ra ứng dụng máy tính độc lập cho máy không cài Matlab sử dụng MATLAB Compiler.

Hình 2 : Các cách xuất App

2.4 Liên kết APP DESIGNER với SIMULINK

2.4.1 Sự khác nhau giữa Simulink phiên bản 2019 và phiên bản 2020

Trong phiên bản 2019 Simulink liên hệ với Matlab (Commandwindow) bằng các dòng lệnh như:

add_block: để thêm một khối vào Simulink mà không cần vào Simulink để kéokhối

set_param: để thay đổi giá trị của một khối đầu vào trên Simulink thông qua Command Window

sim: lấy kết quả chạy được bên Simulink gửi về Command window thông qua khối To workspace

Đối với phiên bản 2020a thì nó cung cấp thêm Simulink Compiler dùng để phiêndịch từ Simulink để tiếp tục chương trình mà không cần Simulink phải chạy Tiện íchcủa phiên bản này là có thể giúp cho người dùng không cài Simulink vẫn sài được App.

2.4.2 Liên kết App Designer với Similink

Để cho phần này dễ hiểu hơn, thì ta đi đến một ví dụ nhỏ về việc tạo App tính tổngcủa hai số A và B Ban đầu ta sẽ viết code tổng hai số bên Simulink như trên Hình 2.11.Sau đó cqua cửa Code View để viết các dòng lệnh như sau:

% Biên dịch chương trình Simulink để chạy ở sau simOut = sim(simInp);

% Từ các biến đầu vào ta tính được biến đầu ra simOut

Hình 2 : Ví dụ đơn giản về sự liên kết App Designer và Simulink

Chương 3 THỰC HÀNH ÁP DỤNG APP DESIGNER VÀO MỘT SỐ BÀI TOÁN

19

Cho bài toán tính vận tốc v và vị trí x của lò xo sau khi tác dụng một lực F, với các thông

số liên quan như hệ số đàn hồi k, khối lượng vật nặng m, hệ số giảm chấn b và vị trí ban đầucủa vật nặng x0

Ta có phương trình như sau: ma = F – kx – bx’

3.1 Thiết kế giao diện bên cửa sổ Design View

Hình 3 : Giao diện bài toán

Các View được sử dụng trong việc thiết kế giao diện này:

Spinner: dùng để thay đổi giá trị của các hệ số đàn hồi k, hệ số giảm chấn b, khối lượng vật nặng b, lực F và thời gian Stop Time

Edit Field: dùng để nhập giá trị vị trí ban đầu của vật nặng x0

List Box: dùng để nhập các dạng đầu vào của lực F như dạng Gate, Step, Ramp và Bumpy

Button: để chạy chương trình và hiển thị trạng thái nhấn và không nhấn

Image: đưa hình minh họa cho bài toán đang thực hiện

Axes: hiển thị đồ thị kết quả của vị trí, vận tốc theo thời gian và hiển thị dạng đầu vàocủa lực F

Từ phương trình của bài toán, ta viết được code tính toán vị trí và vận tốc của vật nặngbên Simulink bằng cách sử dụng các khối như Gain, Constant, Add, Integrator, Second-Order, inport, outport.

Hình 3 : Bài toán được mô phỏng bằng Simulink

Sau khi có chương trình chạy bài toán bên Simulink thì ta bắt đầu viết code bên phầnCode View của App Designer bằng cách click chuột phải vào app.SimulateButton sau đóchọn CallBack để đi đến phần mà App Designer cho ta viết code vào đó

% Button pushed function: SimulateButton function SimulateButtonPushed(app, event)

try

% Khi nhấn Simulate thì trạng thái của các View sẽ chuyển sang ‘off’ và button label sẽ chuyển thành Simulating

app.toggleUIC(‘off’, ‘Simulating…’);

% tạo ra một biến simInp

simInp = Simulink.SimulationInput(‘MassSpringDamperModel’);

% set các giá trị của các biến ‘k’, ‘m’, ‘b’, ‘x0’ vào biến simInp simInp =

simInp.setVariable(‘k’,app.StiffnessSpinner.Value);

21

simInp = simInp.setVariable(‘m’,app.MassSpinner.Value); simInp =

simInp.setVariable(‘b’,app.DampingSpinner.Value); simInp =

simInp.setVariable(‘x0’,app.InitialPositionEditField.Value);

% set giá trị thời gian chạy chương trình vào biến simInp stopTimeStr =

num2str(app.StopTimeSpinner.Value); simInp = simInp.setModelParameter(‘StopTime’, stopTimeStr);

%set các giá trị của biến extInp (các dạng đầu vào của lực F) vào biến

simInp simInp.ExternalInput = app.externalInput();

% biên dịch chương trình Simulink và cho chạy ở phía dưới simInp =

Simulink.compiler.configureForDeployment(simInp);

% xét dòng cho việc gỡ lỗi nhanh hơn

% khi chạy Simulink sẽ không hoạt động để tiện cho những người cài Matlab không cài Simulink

%Từ các giá trị đầu vào khi chạy ta được các giá trị đầu ra

simOut simOut = sim(simInp);

% Lấy các giá trị đầu ra như thời gian t, giá trị vận tốc yv và vị trí yp t = simOut.y.time;

% Nếu các dòng lệnh trên hàm try bị sai thì các dòng lệnh ở hàn catch sẽ được thực thi errordlg(ME.message); % Hiện hộp báo lỗi

endapp.toggleUIC(‘on’, ‘Simulate’);

% Sau khi chạy xong các trạng thái của các View trở lại ‘on’ và button label

sẽ hiển thị lại chứ Simulate

end

Ta sẽ giải thích thêm dòng lệnh app.ToggleUIC, nó là một hàm chương trình con được ta viết ở ngoài hàm try-catch:

function toggleUIC(app, state, label)

% Khi ta nhấn ButtonSimulate thì chương trình con sẽ tìm hết tất cả các View trên app để chuyển trạng thái từ ‘on’ sang ‘off’ và Button label chuyển từ ‘Simulate’ sang ‘Simulatinguics = findall(app.MassSpringDamperUIFigure);

for idx = 1:length(uics)

Sau đây là chương trình con để tạo nên các dạng đầu vào cho lực

F function extInp = externalInput(app)Tstop = app.StopTimeSpinner.Value;

T0 = Tstop/20;

F = app.InputForceShapeDropDown.Value;

% Các trường hợp dạng đầu vào của lực F sử dụng hàm switch case

switch (app.InputForceShapeDropDown.Value)Case ‘Gate’

3.3 Kết quả thu được

Sau khi chạy chương trình thì màn hình sẽ hiển thị một giao diện giống như ta đã thiết

kế ở cửa sổ Design View Ta thay đổi các thông số và click vào Button Simulate Ở Hình 3.3

ta chọn dạng đầu vào của lực F là dạng Gate (cổng), còn ở Hình 3.4 ta chọn dạng đầu vàocủa lực F là dạng Step (bước)

Hình 3 : Đồ thị vị trí và vận tốc vật năng, dạng đầu vào (Gate) của lực F

Hình 3 : Đồ thị vị trí và vận tốc vật năng, dạng đầu vào (Gate) của lực F