Ứ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 LÊ HẬU ĐỨC MSSV: 17145277 MAI NGUYỄN ANH ĐỨC MSSV: 17145278 VÕ NGUYÊN THỊNH MSSV: 17145 PHAN TRẦN TRỌNG HIẾU MSSV:17145 DƯƠNG NGỌC TRỌNG MSSV: 17145 GVHD: ThS HUỲNH QUỐC VIỆT TP.Hồ Chí Minh, tháng năm 2020 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 LÊ HẬU ĐỨCDỤNG APP DESIGNER MSSV: 17145277 TRONG MAI NGUYỄN ANH ĐỨC 17145278 THIẾT KẾMSSV: GIAO DIỆN VÕ NGUYÊN THỊNH MSSV: 17145 PHAN TRẦN TRỌNG HIẾU MSSV:17145 DƯƠNG NGỌC TRỌNG MSSV: 17145 GVHD: ThS HUỲNH QUỐC VIỆT TP.Hồ Chí Minh, tháng năm 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA CƠ KHÍ ĐỘNG LỰC Tên tiểu luận: NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ỨNG DỤNG APP DESIGNER TRONG THIẾT KẾ GIAO DIỆN Ngành: Công nghệ kĩ thuật ô tô Họ tên: MSSV: Lê Hậu Đức 17145277 Mai Nguyễn Anh Đức 17145278 Võ Nguyên Thịnh 17145 Phan Trần Trọng Hiếu 17145 Dương Ngọc Trọng 17145 I NHẬN XÉT Về hình thức trình bày & tính hợp lý cấu trúc tiểu luận: ……………………………………………………………………………………………… ……………………………………………………………………………………………… Về nội dung (đánh giá chất lượng tiểu luận, ưu/khuyết điểm giá trị thực Tiễn): ……………………………………………………………………………………………… II NHỮNG NỘI DUNG CẦN ĐIỀU CHỈNH, BỔ SUNG: ……………………………………………………………………………………………… III ĐỀ NGHỊ VÀ ĐÁNH GIÁ: Đ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 TỔNG QUAN Chương PHẦN MỀM THIẾT KẾ GIAO DIỆN APP DESIGNER 2.1 Giới thiệu chung APP DESIGNER .5 2.1.1 App Designer 2.1.2 Phương pháp để lập trình với App Designer 2.2 Thao tác với APP DESIGNER 2.2.1 Khởi động APP DESIGNER 2.2.2 Mô tả chức giao diện APP DESIGNER 2.2.3 Giới thiệu hộp thoại Inspector 10 2.3 Một số ví dụ 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 Simulink phiên 2017 phiên 2020 15 2.4.2 Liên kết App Designer với Similink 15 Chương 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 View bên cửa sổ Code View 16 3.3 Kết thu .20 Chương 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 1: Sơ đồ khối việc thực App Designer .5 Hình 2: Cửa sổ App Designer .7 Hình 3: Một cửa số App Designer .8 Hình 4: Hộp thoại Inspector 10 Hình 5: Cửa sổ Design View 12 Hình 6: Cách chuyển sang cửa sổ Code View 12 Hình 7: Cửa sổ Code View 13 Hình 8: Phần code tốn tính tổng 14 Hình 9: App Design sau chạy 14 Hình 10: Các cách xuất App 15 Hình 11: Ví dụ đơn giản liên kết App Designer Simulink 16 YHình 1: Giao diện tốn 17 Hình 2: Bài tốn mơ Simulink .18 Hình 3: Đồ thị vị trí vận tốc vật năng, dạng đầu vào (Gate) lực F 22 Hình 4: Đồ thị vị trí vận tốc vật năng, dạng đầu vào (Gate) lực F 22 Chương TỔNG QUAN Ngày xưa cơng cụ tính tốn thủ cơng tay, bàn tính cổ điển để hỗ trợ tốn học, với đổi ngành điện tử, cơng nghệ thơng tin, cơng cụ tính tốn hỗ trợ ngành kĩ thuật đại đời, với mạnh mẽ nhanh chóng cơng cụ phần mềm, công cụ phần lớn thay cho việc thực thủ công, giúp kiểm tra kết cách nhanh chóng, giảm chi phí Cùng với phần mềm… cơng cụ hỗ trợ kĩ thuật phần mềm Win cc, Protell, Protues, Mlap, Matlab… Là công cụ thiếu ngành kĩ thuật Sau giới thiệu phần mềm Matlab, cơng cụ hỗ trợ tính tốn mơ hệ thống trực quan xác Hẳn phần mềm Matlab khơng cịn xa lạ với người dùng, cơng cụ hỗ trợ tính tốn mơ thực tế mạnh, ngồi tính để thực điều đó, Matlab cịn hỗ trợ tạo giao diện người dùng (APP DESIGNER) Chúng ta tìm hiểu ứng dụng từ để hiểu rõ dao diện APP DESIGNER gì, làm để bắt đầu với APP DESIGNER … Với đề tài giao diện APP DESIGNER sâu vào nghiên cứu ứng dụng phát triển APP DESIGNER, phát triển giao diện người dùng Chương PHẦN MỀM THIẾT KẾ GIAO DIỆN APP DESIGNER 2.1 Giới thiệu chung APP DESIGNER 2.1.1 App Designer App Designer giao diện đồ họa có điều khiển nhiều cơng cụ người lập trình sẵn, cho tương tác người dùng giao diện chương trình, chương trình người lập trình tạo sẵn giao diện thực vài chức người lập trình tạo sẵn giao tiếp với người dùng Nó tạo giao diện người dùng tương tự VBA, C++,… App Designer bao gồm đầy đủ chương trình hỗ trợ thực phép tốn LOGIC, mơ khơng gian 2D, 3D, liên kết đa phương tiện Hình : Sơ đồ khối việc thực App Designer Hầu hết App Designer thực lệnh người dùng thông qua tác động người dùng lên giao diện, người dùng khơng cần biết cấu trúc chương trình thực App Designer thực thông qua hàm CALLBACK, người dùng tác động lên giao diện cách khác hàm CALLBACK gọi để thực thi 2.1.2 Phương pháp để lập trình với App Designer Cách đơn giản sử dụng cơng cụ có sẵn App Designer Matlab để lập trình Ưu điểm cách dễ thực hiện, hàm FUNCTION tự tạo sẵn Cách thứ hai lập trình tự tệp Mfile hàm FUNCTION người lập trình tự viết, có ưu điểm tùy biến cao Tuy nhiên cách khó đồi hỏi người lập trình phải có hiểu biết sâu Đối với tập đơn giản ta nên sử dụng cách thứ để lập trình giao diện với cơng cụ hỗ trợ sẵn Matlab Các bước cần thực trước bắt đầu với App Designer:  Trước để bắt đầu lập trình ta cần phải xác định mục tiêu chương trình gì?  Sau tiến hành xác định bước thực để mô giao diện người dùng cho hợp lí xác  Bước cuối viết chương trình thực thi  Khi bắt đầu với App Designer, tự động tạo tập tin thực hàm Callback function App Designer thao tác kí tự mà người dùng nhậ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ự lệnh thực thi Comment Windows  Tất hàm Callback thực thi lệnh  Ngoài ra, nên sử dung chức HELP để tìm thêm tất hàm thực thi App Designer, cách tạo 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 hởi động Matlab đến APP DESIGNER sau:  Khởi động Matlab  Có thể mở số cách sau:  Chọn thẻ Home → New → App  Chọn thẻ APPS → Design App  Trong cửa sổ Command Windown gõ lệnh “appdesigner” Enter Ta giao diện sau: Hình : Cửa sổ App Designer Ta có lựa chọn sau:  Blank App (Default): Hộp thoại trống khơng chưa thiết kế điều khiển  Một số ví dụ thiết kế sẵn button, axes, menu hiển thị đồ thị Nhấp Blank App (Default) để bắt đầu với giao diện trống, ta hình ảnh giao diện App sau: 10 Phía bên trái COMPONENT LIBRARY nhóm biểu tượng APP DESIGNER hỗ trợ sẵn  Button nút nhấn, nhấn vào thwucj thi lệnh cấu trúc hàm callback  Slider trượt cho phép người dùng di chuyển trượt để thực thi lệnh  Axes giao diện đồ họa hiển thị hình ảnh, có nhiều thuộc tính bao gồm: khơng gian 2D (theo trục đứng trục ngang), 3D (hiển thị khiing gian chiều)  Check Box sử dụng để đánh dấu tích (thực thi) vào check nhiều để thực thi  List Box hộp thoại danh sách mục, cho phép người dùng chọn nhiều mục  Edit Field nơi số, kí tự nhập từ người dùng, họ thay đổi  State Button nút nhấn có hai điều khiển, nhấp chuột nhả ra, nút nhấn giữ lệch thực thi, nhấp chuột vào lần thứ hai, nút nhấn nhả ra, hủy bỏ lệnh vừa thực thi  Radio Button Group quản lí lựa chọn nút Radio Button Radio Button giống Check Box thường sử dụng để tạo lựa chọn nhất, tức lần chọn số nhóm nhiều nút Khi chọn cịn lại nhóm bỏ chọn  Table  Panel tạo bảng tương tự Excel tạo mảng nhóm biểu tượng lại với giúp ta dễ hiểu kiểm soát thao tác di chuyển 12  Ngồi cịn có số cơng cụ hiển thị hình ảnh Gauge , Lamp 2.2.3 , Switch ,… Giới thiệu hộp thoại Inspector 13 Hình : Hộp thoại Inspector Thuộc tính Mơ tả BackgroundColor Màu đối tượng 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ữ Handle Visibility BusyAction Enable Visible Value Units Tag Cho dù xử lý truy cập từ dịng lệnh ảnh minh họa Callback thường xuyên gián đoạn Kích hoạt vơ hiệu hóa đối tượng điều khiển Điều khiển thuộc tính nhìn thấy đối tượng Giá trị thời đối tượng điều khiển Đơn vị đo lường Dùng để phân biệt đối tượng điều khiển Style Kiểu đối tượng điều khiển Horizontal Alignment Căn ngang chuỗi nhãn Position Kích thước vị trí đối tượng điều khiển Ngồi cịn số tính khác 2.3 Một số ví dụ thiết kế giao diện: 2.3.1 Bài toán tổng hai số 14 Đầu tiên ta sử dụng hai View Edit Field (Numberic) Button để tạo giao diện cho tốn Ta thay đổi tên đối tượng tạo màu cho đối tượng nhờ thuộc tính Hình : Cửa sổ Design View Sau tạo xong giao diện ban đầu tới phần viết code cho toán Ta click chuột phải vào Button, nhấn vào Callback chọn Add ButtonPushedFCn Callback hình bên Hình : Cách chuyển sang cửa sổ Code View 15 Sau hình lên cửa sổ Code View vị trí mà ta cần nhập code vào Khoảng trắng chỗ để viết code lên, khoảng màu xám code mà hệ thống tạo sẵn nên ta nhập sửa Hình : Cửa sổ Code View Trước viết code ta cần ý tên đối tượng mà cần lấy triển khai Tên đối tượng thấy bên phải hình Các bạn thay đổi tên đối tượng để tiện cho việc viết code Tiếp theo qua phần Code View, ta viết code theo cách mơ tả hình bên  Dịng lệnh a = app.EditField.Value có nghĩa ta gán giá trị ô Edit Field cho a, “app” đường dẫn App Design, EditField tên đối tượng (có thể nhìn bên phải hình), Value lấy giá trị Tương tự dòng lệnh b = app.EditField.Value  Dòng lệnh c = a +b ta gán tổng hai giá trị a b cho biến c  Dịng lệnh app.TongButton.Text = num2str(c) ta lấy giá trị c để gán vào giá trị Button để tính lên giá trị tổng Mà Button định dạng kiểu string, c 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 dùng str2num() Sauk hi hồn thành ta kết hình bên 16 Hình : Phần code tốn tính tổng Sau lập trình xong ta nhấn RUN để chạy chương trình hình hiển thị giao diện giống ta thiết kế bên cửa sổ Design View Ta nhập số nhấn ‘Tong’ ta kết hình Hình : App Design sau chạy 2.3.2 Cách đóng gói App Đầu tiên ta click vào Share ba cách đóng gọi App:  MATLAB App tạo file cài đặt dành cho người dùng có cài Matlab khơng sử dụng  Web App tạo ứng dụng WEB sử dụng MATLAB Compiler 17  Standalone Desktop App tạo ứ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 : Các cách xuất App 2.4 Liên kết APP DESIGNER với SIMULINK 2.4.1 Sự khác Simulink phiên 2019 phiên 2020 Trong phiên 2019 Simulink liên hệ với Matlab (Commandwindow) dòng lệnh như:  add_block: để thêm khối vào Simulink mà không cần vào Simulink để kéo khối  set_param: để thay đổi giá trị khối đầu vào Simulink thông qua Command Window  sim: lấy kết chạy bên Simulink gửi Command window thông qua khối To workspace  Nhược điểm chạy App Designer cần phải mở Simulink phải chạy Simulink 18 Đối với phiên 2020a cung cấp thêm Simulink Compiler dùng để phiên dịch từ Simulink để tiếp tục chương trình mà khơng cần Simulink phải chạy Tiện ích phiên giúp cho người dùng không cài Simulink sài App 2.4.2 Liên kết App Designer với Similink Để cho phần dễ hiểu hơn, ta đến ví dụ nhỏ việc tạo App tính tổng hai số A B Ban đầu ta viết code tổng hai số bên Simulink Hình 2.11 Sau cqua cửa Code View để viết dòng lệnh sau:  simInp = Simulink.SimulationInput('Tong'); % Khởi tạo biến đầu vào simInp  simInp = simInp.setVariable('A','2');  simInp = simInp.setVariable('B','3'); % Set giá trị khối A, B bên Simulink vào biến simInp  simInp = simulink.compiler.configureForDeployment(simInp); % Biên dịch chương trình Simulink để chạy sau  simOut = sim(simInp); % Từ biến đầu vào ta tính biến đầu simOut Hình : Ví dụ đơn giản liên kết App Designer Simulink Chương THỰC HÀNH ÁP DỤNG APP DESIGNER VÀO MỘT SỐ BÀI TỐN 19 Cho tốn tính vận tốc v vị trí x lị xo sau tác dụng lực F, với thông số liên quan hệ số đàn hồi k, khối lượng vật nặng m, hệ số giảm chấn b vị trí ban đầu vật nặng x Ta có phương trình sau: ma = F – kx – bx’ 3.1 Thiết kế giao diện bên cửa sổ Design View Hình : Giao diện tốn Các View sử dụng việc thiết kế giao diện này:  Spinner: dùng để thay đổi giá trị 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 thời gian Stop Time  Edit Field: dùng để nhập giá trị vị trí ban đầu vật nặng x  List Box: dùng để nhập dạng đầu vào lực F dạng Gate, Step, Ramp Bumpy  Button: để chạy chương trình hiển thị trạng thái nhấn khơng nhấn  Image: đưa hình minh họa cho toán thực  Axes: hiển thị đồ thị kết vị trí, vận tốc theo thời gian hiển thị dạng đầu vào lực F 3.2 Viết code cho View bên cửa sổ Code View 20 Từ phương trình tốn, ta viết code tính tốn vị trí vận tốc vật nặng bên Simulink cách sử dụng khối Gain, Constant, Add, Integrator, SecondOrder, inport, outport Hình : Bài tốn mơ Simulink Sau có chương trình chạy tốn bên Simulink ta bắt đầu viết code bên phần Code View App Designer cách click chuột phải vào app.SimulateButton sau chọn CallBack để đế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 trạng thái View chuyển sang ‘off’ button label chuyển thành Simulating app.toggleUIC(‘off’, ‘Simulating…’); % tạo biến simInp simInp = Simulink.SimulationInput(‘MassSpringDamperModel’); % set giá trị 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 giá trị biến extInp (các dạng đầu vào lực F) vào biến simInp simInp.ExternalInput = app.externalInput(); % biên dịch chương trình Simulink cho chạy phía simInp = Simulink.compiler.configureForDeployment(simInp); % xét dòng cho việc gỡ lỗi nhanh % chạy Simulink không hoạt động để tiện cho người cài Matlab không cài Simulink %Từ giá trị đầu vào chạy ta giá trị đầu simOut simOut = sim(simInp); % Lấy giá trị đầu thời gian t, giá trị vận tốc yv vị trí yp t = simOut.y.time; yp = simOut.y.signals(1).values; yv = simOut.y.signals(2).values; % Thực vẽ đồ thị dựa giá trị lấy plot(app.PositionUIAxes, t, yp); plot(app.VelocityUIAxes, t, yv); catch ME 22 % Nếu dòng lệnh hàm try bị sai dịng lệnh hàn catch thực thi errordlg(ME.message); % Hiện hộp báo lỗi end app.toggleUIC(‘on’, ‘Simulate’); % Sau chạy xong trạng thái View trở lại ‘on’ button label hiển thị lại Simulate end Ta giải thích thêm dịng lệnh app.ToggleUIC, hàm chương trình ta viết ngồi hàm try-catch: function toggleUIC(app, state, label) % Khi ta nhấn ButtonSimulate chương trình tìm hết tất View app để chuyển trạng thái từ ‘on’ sang ‘off’ Button label chuyển từ ‘Simulate’ sang ‘Simulating uics = findall(app.MassSpringDamperUIFigure); for idx = 1:length(uics) uic = uic(idx); if isprop(uic, ‘Enable’) uic.Enable = state; end end Sau chương trình để tạo nên 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 lực F sử dụng hàm switch case switch (app.InputForceShapeDropDown.Value) Case ‘Gate’ 23 tv = [0 T0 T0 2*T0 2*T0 Tstop]; uv = [0 F F 0]; Case ‘Step’ tv = [0 T0 T0 Tstop]; uv = [0 F F]; Case ‘Ramp’ tv = [0 T0 Tstop]; uv = [0 F]; Case ‘Bumpy’ tv = [0 linspace(T0, Tstop-T0,10) Tstop]; uv = [0 2*F*(rand(1,10)-0.5) 0]; otherwise error(‘invalid input signal type’); end 3.3 Kết thu Sau chạy chương trình hình hiển thị giao diện giống ta thiết kế cửa sổ Design View Ta thay đổi thông số click vào Button Simulate Ở Hình 3.3 ta chọn dạng đầu vào lực F dạng Gate (cổng), cịn Hình 3.4 ta chọn dạng đầu vào lực F dạng Step (bước) 24 Hình : Đồ thị vị trí vận tốc vật năng, dạng đầu vào (Gate) lực F Hình : Đồ thị vị trí vận tốc vật năng, dạng đầu vào (Gate) lực F 25 Chương KẾT LUẬN Sau nghiên cứu tìm hiểu đề tài này, nhóm em nắm kiến thức việc sử dụng App Designer việc thiết kế giao diện toán chương trình mơ động Simulink Bằng cách ta không cần phải mở Simulink vào phần khai báo để thay đổi biến số tốn mà ta cần xuất app nhập thơng số thu kết toán cách nhanh chóng 26 ... dụng phát triển APP DESIGNER, phát triển giao diện người dùng Chương PHẦN MỀM THIẾT KẾ GIAO DIỆN APP DESIGNER 2.1 Giới thiệu chung APP DESIGNER 2.1.1 App Designer App Designer giao diện đồ họa... THIẾT KẾ GIAO DIỆN APP DESIGNER 2.1 Giới thiệu chung APP DESIGNER .5 2.1.1 App Designer 2.1.2 Phương pháp để lập trình với App Designer 2.2 Thao tác với APP DESIGNER. .. đồ thị Nhấp Blank App (Default) để bắt đầu với giao diện trống, ta hình ảnh giao diện App sau: 10 Hình : Một cửa số App Designer 2.2.2 Mô tả chức giao diện APP DESIGNER Trong giao diện thao tác