HƯỚNG DẪN THIẾT KẾ GIAO DIỆN SỬ DỤNG VISUAL STUDIO 2010

1. Tạo chương trình mới

2. Đối tượng Form

3. Đối tượng Lable

4. Đối tượng Button

5. Đối tượng TextBox

6. Đối tượng OvalShape

7. Đối tượng SerialPort

8. Đối tượng Timer

9. Giao diện điều khiển động cơ một chiều

10. Đối tượng HscrollBar

Bài tập

1
1-Tạo chương trình mới:
Flie – New Project (Ctrl+N)

Đặt tên cho

chương trình

Thiết kế
giao diện

Thanh Toolbox

(để lấy các đội tượng)

2
2- Đối tượng Form: Chọn vào thuật tính Name để sửa tên lập trình của Form

Tên của Form khi

chạy chương trình

Tên dùng để
lập trình

+ Chọn vào thuộc tính Text để sửa tên hiển thị của Form

Tên của Form khi

chạy chương trình

Sửa tên hiện

thị cho Form

Phóng to, thu

nhỏ Form

3
3- Đối tượng Lable: Ghi các nội dung chữ lên giao diện

Sửa font và kích thướt

chữ như ý muốn

Ghi nội dung của chữ

Chọn Label, kéo chuột lên giao diện

Muốn thay đổi màu của chữ ta chọn thuật tính ForeColor (dưới thuộc tính Font)
4- Đối tượng Button:

Đổi tên, tên

sử dụng lúc
Chọn Button, lập trình
kéo chuột trên
giao diện

4
 Thay đổi font và
kích thướt chữ

Thay đổi nội dung

của tên nút

Để lập trình cho nút, ta click vào đối tượng nút trên giao diện

Đoạn chương trình viết cho NÚT

THUẬN, khi click vào NÚT
THUẬN thì Visual sẽ thực hiện
đoạn chương trình tại vị trí này,
Mỗi lần click làm 1 lần

5
5- Đối tượng TextBox: Dùng để hiển thị nội dung/giá trị

Chọn TextBox rồi kéo

thả trên giao diện

Thay đổi tên,

tên dùng khi
lập trình

Thay đổi font, kích

thướt

Khi lập trình, muốn hiển thị nội dụng lên TextBox (giả sử TextBox có tên là hien_thi_gia_tri) thi
ta viết như sau:
hien_thi_gia_tri.Text = “chuỗi cần hiển thị”
hien_thi_gia_tri.Text = nhan(0) ‘ với nhan() là biến dạng mãng, kiểu Byte

6
6- Đối tượng OvalShape: Dùng làm đối tượng ‘tượng trưng’ thay thế cho LED hiển thị trạng
thái.

Tên lập
trình
Màu nền của
đối tượng

Chọn OvalShape, kéo

thả trên giao diện

Kiểu nền của

đối tượng

Chọn thuộc tính FillSyte để chọn kiểu nền (chọn Solid), Chọn thuộc tính FillColor để chọn màu
cho đối tượng
7- Đối tượng SerialPort: Là đối tượng giúp giao diện truyền và nhận dữ liệu nối tiếp không đồng
bộ (UART) thông qua cổng COM(RS232)

Tên, dùng để
sử dụng trong
lập trình

Chọn SerialPort, kéo

thả trên giao diện

+ Để có thể truyền/nhận dữ liệu nối tiếp từ cổng COM, ta cần mở cổng. Giả sử trên giao diện có
nút MỞ CỔNG COM (dùng để mở cổng COM để chuẩn bị truyền thông). Ta lập trình cho nút
như sau: (hình dưới)
7
+ Để đóng cổng ta sử dụng nút MỞ CỔNG COM, lập trình cho nút bằng lệnh sau:
*Lưu ý: Để không bị báo lỗi, trước khi thực hiện lệnh mở hoặc đóng cổng ta phải chắc chắn máy
tính hiện tại có cổng COM (cổng vật lý/cổng ảo)

Lệnh mở
cổng COM

Lệnh đóng
cổng COM

+ Để truyền dữ liệu ra cổng COM ta sử dụng lệnh sau: Giả sử khi bấm vào NÚT THUẬN thì ta
truyền xuống VĐK (truyền ra cổng COM) giá trị 10 (thập phân)

Khai báo biến

mãng truyen(1)
kiểu Byte

Gán cho biến

truyen(0) = 10
(chuẩn bị truyền)

Truyền giá trị 10 (chứa trong

truyen(0)) ra cổng COM

+ Để nhận dữ liệu từ cổng COM, ta sử dụng ngắt nhận, sau khi máy tính nhận được sô byte dữ
liệu bằng giá trị cài đặt trong thuật tính ReceivedBytesThreshold (mặc định bằng 1, tức khi máy
tính nhận được 1 byte sẽ xãy ra ngắt), khi ngắt Visual thực hiện đoạn chương trình ngắt của cổng

8
COM, cách tạo ra chương trình ngắt nhận. (chọn đối tượng cổng COM, chọn tab Events, chọn
thuộc tính DataReceived, đánh tên chương trình ngắt khi nhận dữ liệu từ cổng COM, Enter)

Chọn tab
Events

Tên chương
Chọn đối
trình ngắt
tượng COM
nhận dữ liệu

Chương trình tự động tạo ra chương trình con khi xãy ra ngắt nhận dữ liệu từ cổng COM

Đoạn chương trình con

khi có nhận dữ liệu

Để có thể nhận dữ liệu ta khai báo thêm 1 biến nhan(1) dạng mãng, kiểu byte.
Trong chương trình con ngắt ta sử dụng lệnh: COM.Read (nhan,0,1)
Dữ liệu nhận được (1 byte) chứa trong biến nhan(0)

9
 Lệnh nhận
dữ liệu từ
Biến nhan(1) dạng
cổng COM
mãng, kiểu Byte

* SAU KHI NHẬN ĐƯỢC DỮ LIỆU TA LÀM GÌ

- Trong VD này, giả sử dữ liệu nhận được từ VĐK để hiển thị lên TextBox (hien_thi_gia_tri)
+ Để thực hiện được điều này ta làm như sau: Ta sử dụng 1 bộ Timer
8-Đối tượng Timer: (Timer là đối tượng dùng để định thời gian, sau 1 khoảng thời gian đặt trước
chương trình sẽ thực hiện đoạn chương trình của Timer đó 1 lần)

Chọn Timer, kéo

thả chuột lên giao
diện

Đối tượng Cho

phép/cấm Thời gian
Timer
Timer làm đặt cho
việc Timer làm
việc

+ Để viết chương trình cho Timer ta click vào đối tượng Timer.
Giải sử, trong VD này ta sẽ liên tục cập nhật giá trị nhận từ cổng COM (nhan(0)) lên TextBox
(hien_thi_gia_tri), để làm được điều đó ta sử dụng lệnh sau:

10
 Đoạn chương trình tạo
ra tự động khi click
vào Timer

Hiển thị giá trị nhận được

từ cổng COM (chứa trong
nhan(0)) ra ngoài TextBox
(hien_thi_gia_tri)

- Nếu dữ liệu gửi lên là để bật/tắt đèn báo hiệu trạng thái động cơ ở dưới mạch VĐK
+ Để bật/tắt đèn phù hợp với trạng thái động cơ ta làm như sau:
Đặt tên cho 3 LED: LED_T, LED_N, LED_D
+ Trong chương trình của Timer (dùng Timer như một đối tượng tạo ra vòng lặp, sau khoảng thời
gian ta cập nhật dữ liệu nhận từ cổng COM một lần) viết chương trình kiểm tra giá trị nhận được
từ cổng COM (tức giá trị truyền lên từ VĐK, nhan(0)). Giả sử giá trị nhận được là: 1 – Động cơ
chạy Thuận, 2 – ĐC chạy Ngược, 3 – ĐC dừng từ đó ta bật các LED sáng tắt tương ứng với các
trạng thái của động cơ.
If nhan(0) = 10 Then ' VĐK sau khi bật động cơ chạy THUẬN xong thì truyền lên giá trị 10
LED_T.FillColor = Color.Green 'LED_T sang mau xanh lá
LED_N.FillColor = Color.Black 'LED_N và LED_D tắt, màu đen
LED_D.FillColor = Color.Black
End If
If nhan(0) = 20 Then ' VĐK sau khi bật động cơ chạy NGƯỢC xong thì truyền lên giá trị 10
LED_T.FillColor = Color.Black 'LED_T và LED_D tắt, màu đen
LED_N.FillColor = Color.Blue 'LED_N sáng màu xanh dương
LED_D.FillColor = Color.Black
End If
If nhan(0) = 30 Then ' VĐK sau khi cho động cơ DỪNG xong thì truyền lên giá trị 10
LED_T.FillColor = Color.Black 'LED_T và LED_N tắt, màu đen
LED_N.FillColor = Color.Black
LED_D.FillColor = Color.Red ' LED_D sáng màu đỏ
End If

11
9. Giao diện hoàn thiện cho ứng dụng điều khiển ĐM

Mạch dưới Proteus: Gồm VĐK nối với mạch đảo chiều động cơ ĐM (2 role 5 chân) và IC
Max232 nối với máy tính thông qua cổng COM

12
Chương trình cho VĐK: TY = getc();
#include <VDK 2.h> if(TY==1)
#use delay(clock=20Mhz) {
#use DC_T = 1;
RS232(baud=9600,parity=N,xmit= DC_N = 0;
PIN_C6,rcv=PIN_C7) putc(10);
#use fast_IO(E) }
#define RE 0x09//khai bao dia if(TY==2)
chi
{
#bit DC_T = RE.0
DC_T = 0;
#bit DC_N = RE.1
DC_N = 1;
int8 TY;
putc(20);
void main()
}
{
if(TY==3)
set_tris_E(0x00);//chon
chuc nang IO {
set_tris_C(0x80);//0x80 = DC_T = 0;
0b10000000 DC_N = 0;
DC_T = 0;//dung dong co putc(30);
DC_N = 0; }
while(TRUE) }
{ }
if(kbhit()==1) }
{
13
10. Đối tượng HscrollBar: Dạng con trượt, tương đương với biến trở, đặt giá trị cho vi điều
khiển, có thể là nhiệt độ, tốc độ, khối lượng, lưu lượng, áp suất,…

Chọn HscrollBar, kéo Tên lập trình

thả trên giao diện
Đặt lại giá trị LargeChange = 1
Max và Min
phù hợp

SmallChange = 1

Để lập trình cho đối tượng này ta click và đối tượng. Giả sử ta có ứng dụng điều khiển nhiệt độ từ
máy tính như sau:

Con_truot

Hien_thi_nhiet_do_dat

Trong đó, nhiệt độ đặt được đặt từ máy tính thông qua con_trượt (HscrollBar) trên giao diện, ta
lập trình cho con_truot bằng cách click vào nó và viết chương trình như sau:
Private Sub con_truot_Scroll(ByVal sender As System.Object, ByVal e As
System.Windows.Forms.ScrollEventArgs) Handles con_truot.Scroll
Dim nhiet_dat(1) As Byte
nhiet_dat(0) = con_truot.Value
COM.Write(nhiet_dat, 0, 1)
hien_thi_nhiet_dat.Text = nhiet_dat(0) & " độ C"
End Sub
 BÀI TẬP GHÉP NỐI THIẾT BỊ NGOẠI VI
(SV xem lưu ý phía cuối tài liệu để thực hiện cho đúng)
1. Hệ thống điều khiển động cơ một chiều:
- 1 động cơ một chiều (đảo chiều dùng 2 ROLE 5 chân, RL_T, RL_N)
- 3 nút bấm (N_T, N_N, N_D)
- 3 đèn (LED) hiển thị trạng thái của động cơ (LED_T, LED_N, LED_D)
Yêu cầu:
a. Hãy vẽ mạch Proteus để mô phỏng hệ thống trên.
b. Lập bảng phân công IO.
c. Vẽ lưu đồ thuật toán.
d. Viết chương trình điều khiển.
e. Thiết kế giao diện(Visual Studio 2010) để giám sát và điều khiển được ứng dụng trên.

15
 2. Hệ thống đo điều khiển nhiệt độ:
- 1 cảm biến nhiệt LM35.
- 1 biến trở để đặt giá trị nhiệt độ đặt từ máy tính.
- 1 dây điện trở (dây mayso), 1 quạt làm mát
- 1 LCD16x2 để hiển thị nhiệt độ đặt từ biết trở (hoặc máy tính) và nhiệt độ thực từ LM35. Ngoài ra LCD
còn hiển thị được trạng thái của dây điện trở và quạt
- 1 công tấc(CT) 3 cực để chuyển trạng thái nhận tín hiệu nhiệt độ đặt từ máy tính(CT=1) hoặc biến
trở(CT=0).
Yêu cầu:
a. Hãy vẽ mạch Proteus để mô phỏng hệ thống trên.
b. Lập bảng phân công IO.
c. Vẽ lưu đồ thuật toán.
d. Viết chương trình điều khiển.
e. Thiết kế giao diện(Visual Studio 2010) để giám sát và điều khiển được ứng dụng trên.

16
 3. Hệ thống giám sát thiết bị điện trong nhà:
- 3 bóng đèn, 3 nút bấm điều khiển đèn
- 3 quạt, 3 nút bấm điều khiển quạt
- 1 bơm nước, 2 phao phát hiện trạng thái đầy nước và hết nước(giúp bơm làm việc tự động), 1 nút bấm
bật/tắt bơm (nếu cần)
- 1 hệ thống cửa tự động: 1 động cơ, 2 CTHT, 3 nút bấm (mở, đóng, dừng)
Yêu cầu:
a. Hãy vẽ mạch Proteus để mô phỏng hệ thống trên.
b. Lập bảng phân công IO.
c. Vẽ lưu đồ thuật toán.
d. Viết chương trình điều khiển.
e. Thiết kế giao diện(Visual Studio 2010) để giám sát và điều khiển được ứng dụng trên.
4. Hãy thiết kế giao diện điều khiển và giám sát hệ thống đèn giao thông ngã tư với những yêu cầu
sau:
- Hệ thống đèn giao thông ngã tư gồm: 10 đèn tín hiệu: (X, V, Đ, XĐB, Đ ĐB)x2 tuyến
- Trên giao diện có thể quan sát được trạng thái các đèn, cài đặt được thời gian sáng của các đèn.
Yêu cầu:
a. Hãy vẽ mạch Proteus để mô phỏng hệ thống trên.
b. Lập bảng phân công IO.
c. Vẽ lưu đồ thuật toán.
d. Viết chương trình điều khiển.
e. Thiết kế giao diện(Visual Studio 2010) để giám sát và điều khiển được ứng dụng trên.
5. Hãy thiết kế giao diện trên phần mềm Visual Studio 2010 với những yêu cầu sau:
- Có chức năng chọn cổng COM để truyền thông, có thể chọn được tốc độ baud, có thể đóng mở cổng.
- Nhận dữ liệu cổng nối tiếp hiển thị trên TextBox.
- Truyền dữ liệu nhập vào từ TextBox.

Lưu ý:
1. Khi thực hành tại phòng máy, sinh viên phải nghiêm túc, tự giác, không copy bài của nhau, có
thắc mắc thì chủ động hỏi GV.
2. Cuối buổi thực hành, SV gửi bài đã làm được qua mail của GVD: vinhlv@donga.edu.vn
3. Nội dung của bài gửi vào cuối buổi là: (đưa vào 1 file nén, đặt tên file nén: Anh_TD14A2.1)
a. Bảng phân công IO,
b. Lưu đồ thuật toán,
c. Chương trình VĐK,
d. Toàn bộ chương trình Visual (giao diện + chương trình).

17