Tài liệu 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 NGUYỄN HUY HOÀNG 1113554 1113160 TPHCM 22/4/2014 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. i 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 ........................................................................... ii 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 ...................................................................................................... iii 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. 1  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. 2 - 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 … 3 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à 4 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 5 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 6 MÔ TẢ CHỨC NĂNG CÁC CÔNG CỤ CƠ BẢN Công cụ Layout editor Mô tả 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. 7 - 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. 8  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  Active Control : quản lí sự lựa chọn của nút Radio Button. : 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. 9 2.3 GIỚI THIỆU HỘP THOẠI INSPECTOR: Hình 2.3.1: Hộp thoại Inspector 10 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. 11 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. 12 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) : 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:  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. 14 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. 15 - 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 16