Bài viết nằm trong loạt bài viết tự học OpenCV qua ví dụ thực tế. Ứng dụng nhận diện biển số xe là một ứng dụng rất có ý nghĩa trong thực tế, nó giúp cho việc quản lý, giảm sát,... các phương tiện một cách nhanh chóng, dễ dàng, ít sai sót. Trong bài viết này sẽ hướng dẫn về thiếp lập thư viện thiết kế giao diện MFC trên Window.
Khoa học máy tính Trương Xuân Đạt 2015-08-26 08:39:10

Giới thiệu

Với một chiếc xe (Ô tô, xe máy,...) với những biển số xe, bằng mắt con người có thể dễ dàng phân biệt được, nhưng với máy tính thì sao? Ứng dụng nhận diện biển số xe là một ứng dụng rất có ý nghĩa trong thực tế, nó giúp cho việc quản lý, giám sát,... các phương tiện một cách nhanh chóng, dễ dàng, ít sai sót.

Ở bài viết Ứng Dụng Nhận Diện Biển Số Xe: Xây Dựng Giao Diện - Phần 1, tôi đã giới thiệu về thư viện MFC và chuyển đổi một số kiểu dữ liệu để có thể thao tác với control trong MFC. Ở bài viết này, tôi tiếp tục giới thiệu về các control, các thao tác để thiết kế hoàn chỉnh giao diện ứng dụng nhận diện biển số xe.

Tiền đề bài viết

Là bài viết nằm trong loạt bài viết chương trình Tự Học OpenCV Qua Các Ví Dụ Thực Tế tài trợ bởi STDIO. Trong bài viết này sẽ hướng dẫn xây dựng một giao diện cho ứng dụng nhận diện biển số xe, sau đó với những kiến thức xử lý khác của OpenCV để hoàn thiện ứng dụng này.

Đối tượng hướng đến

Dành cho bạn đọc hiểu được các vận hành / sử dụng thư viện OpenCV, muốn xây dựng ứng dụng nhận diện biển số xe và chưa có kiến thức tương đương.

Trong bài viết này tôi sử dụng Windows 10 (64-bit) và Visual Stdio 2013 Ultimate.

Làm việc với control của MFC

Để làm việc với các control, điều đầu tiên bạn cần phải đặt tên biến (Variable name) cho control. 

Right mouse click > control trong giao diện Dialog > Add Varible

ss_1

Trong hộp thoại Add Member Varible Wizard > Varible name (Đặt tên biến control ở đây) > Finish.

ss_2

ID Control cũng là một giá trị bạn cần phải chú ý.  Với những control có các ID dạng ABC (không có chữ số ở kí tự cuối cùng), bạn nên thay đổi lại ID cho nó trước khi đặt tên biến (Variable name). Ví dụ IDC_STATIC thành IDC_STATIC_1.

Để thay đổi giá trị ID Control. Bạn truy cập vô Properties và thay đổi giá trị ở mục ID: Right mouse click > control trong giao diện Dialog > Propertices.

ss_3

Một số thao tác với control

Hiển thị chuỗi (Text) lên control

Để hiển thị một chuỗi (Text) lên một control (Button, Static Text, Edit Control,...), bạn sử dụng phương thức SetWindowText*().

// www.stdio.vn
// 1 control Static Text có variable name là m_staticText
m_staticText.SetWindowTextA("Hello Stdio.vn");

m_staticText.SetWindowTextW(_T("Hello Stdio.vn")); 

ss_4

Thiết lập giá trị Enable cho control

Để thiết lập rằng bạn có muốn cho phép một control hoạt động hay không? Bạn sử dụng phương thức EnableWindow(). Giá trị mặc định là true;

m_button.EnableWindow(true);
m_button.EnableWindow(false);

Mở tập tin (Open file) và lưu tập tin (Save file)

Để mở tập tin (Open file) và lưu tập tin (Save file), bạn sử dụng một loại dialog cho phép tạo ra một hộp thoại để giúp người dùng chọn đến nơi lưu trữ tập tin để thực hiện các thao tác mở (Open) và lưu (Save) tập tin.

// cStringFiler sẽ chọn lọc các tập tin quan tâm. 
// Ở đây là file ảnh có phần mở rộng .png và .jpg.
CString cStringFiler = _T("image file (*.png, *.jpg) | *.png; *.jpg | All file(*.*) | *.* || ");

// Mở tập tin (Open file)
CFileDialog OpenDialog(TRUE, _T("*.png"), NULL, OFN_FILEMUSTEXIST | 
                       OFN_PATHMUSTEXIST| OFN_HIDEREADONLY, cStringFiler, NULL);

// Lưu tập tin (Save file)
CFileDialog SaveDialog(FALSE, _T("*.png"), NULL, OFN_FILEMUSTEXIST |
                       OFN_PATHMUSTEXIST | OFN_HIDEREADONLY, cStringFiler, NULL);

Để lấy đường dẫn đầy đủ (Path) mà người dùng đã chọn, bạn sử dụng phương thức GetPathName()

if ( OpenDialog.DoModal() == IDOK) {
    CString cStringPathName = OpenDialog.GetPathName();
}
// Tương tự nếu bạn muốn lấy đường dẫn (Path) với SaveDialog

Các control cơ bản của MFC

Bắt sự kiện (Listen Event)

Để bắt sự kiện (Listen Event) với các control có event.  Right mouse click > control trong giao diện Dialog Properties > Hộp thoại Properties > Control Event (Icon hình tia sét màu vàng) > Trong hộp thoại Properties sẽ xuất hiện các mục event. 

ss_5

Edit Control

Là một nơi dùng để nhập một văn bản (Text). Kiểu dữ liệu của văn bản (Text) là Cstring. Để lấy văn bản (Text) được nhập vào một control Edit Control, bạn sử dụng phương thức GetWindowText*()

// Tên biến (Varible name) của Edit Control là m_editControl
CString cStringExample;

m_editControl.GetWindowTextA(cStringExample);

m_editControl.GetWindowTextW(cStringExample); 

Slider Control

Thiết lập giá trị bẳng cách di chuyển một chỉ số. Để lấy giá trị hiện tại của Slider Control, bạn sử dụng phương thức GetPos()

// Tên biến (Varible name) của Slider Control là: m_sliderControl
int value = m_sliderControl.GetPos();

Để thiết lập giá trị lớn nhất (Max) và nhỏ nhất (Min), bạn sử dụng phương thức SetRange()

#define VALUE_MIN 0
#define VALUE_MAX 100

m_sliderControl.SetRange(VALUE_MIN, VALUE_MAX);
Ví dụ

Đoạn code dưới đây giới thiệu sự kiện (Event) click (NM_CUSTOMDRAW).

void CMFCApplication2Dlg::OnNMCustomdrawSlider1(NMHDR *pNMHDR, LRESULT *pResult)
{
    LPNMCUSTOMDRAW pNMCD = reinterpret_cast<LPNMCUSTOMDRAW>(pNMHDR);
    // TODO: Add your control notification handler code here
    *pResult = 0;

#define MAX_WORLD 20
    int value = this->m_slider.GetPos();
    char s1[MAX_WORLD];
    sprintf_s(s1, "%d", value);
    CString stringValue;
    stringValue.Format(_T("%d"), value);

    this->m_staticText.SetWindowTextW(stringValue);
}

ss_6

Button

Là một đối tượng mà khi người dùng chọn (Click) vào sẽ có một hiện tượng gì đó xảy ra, có thể là một thông báo,... Đoạn code dưới đây giới thiệu sự kiện (Event) click (BN_CLICKED).

void CMFCApplication2Dlg::OnBnClickedButton1()
{
    // Khi click vào button sẽ hiện lên một thông báo.
    MesageA(0, "Hello Stdio.vn", "Thông báo", NULL);
}

ss_7

Combo Box

Là một Window Control chứa một danh sách các Items. Với thao tác lên Combo Box và chỉ định một item. Sau khi tạo một Combox Box và đã thiết lập varible name, để thêm Items bạn sử dụng phương thức AddString().

// Tôi có ở đây một control Combo Box có variable name là combo_box 

combo_box.AddString(L"0");
combo_box.AddString(L"1");
combo_box.AddString(L"2");
combo_box.AddString(L"3");

ss_8

 Sự kiện thay đổi lựa chọn của Combo Box là CBN_SELENDOK.

void CMFCApplication2Dlg::OnCbnSelendokCombo3()
{
	int index = combo_box.GetCurSel();

	switch (index) {
	case 0: 
		MessageBoxA(NULL, "Hello Stdio.vn 0", "Thông báo", 0);
		break;
	case 1:
		MessageBoxA(NULL, "Hello Stdio.vn 1", "Thông báo", 0);
		break;
	case 2:
		MessageBoxA(NULL, "Hello Stdio.vn 2", "Thông báo", 0);
		break;
	case 3:
		MessageBoxA(NULL, "Hello Stdio.vn 3", "Thông báo", 0);
	}
}

ss_9

Menu

Menu Control là nơi chứa các chức năng nhỏ (Items). Menu control sẽ giúp cho việc thiết kế các chức năng của ứng dụng được tập trung, dễ quản lý, tiết kiệm được không gian, làm cho giao diện của bạn thêm đẹp mắt,... 

Để Thêm một Menu Control vào project: VIEW > Other Windows > Resource View

ss_10

Trong hộp thoại Resource View > Right mouse click > Add Resource...

ss_11

Trong hộp thoại Add Resource > Menu > New.

ss_12

Bây giờ bạn đã có thể thiết kế các items cho Menu của bạn.

ss_13

 Nhưng khi bạn thiết kế xong, Menu này vẫn chỉ ở thư mục Resource View. Để có thể gắn vào giao diện Dialog khi ứng dụng chạy, bạn cần vào mục Propertices của giao diện Dialog > Menu > ID Menu bạn vừa tạo.

ss_14

Để bắt sự kiện (Listen Event) cho các item của Menu, trong giao diện thiết kế Menu > Right mouse click Item > Add Event Handler...

ss_15

Trong hộp thoại Event Handler Wizard bạn chọn class mà bạn muốn thêm Menu vào đó > Edit Code.

ss_16

Build/Run

ss_17

Tham khảo

https://msdn.microsoft.com/en-us/library/d06h2x6e.aspx