Mô hình thực tế khối nhận dữ liệu của xe:- 123docz.net

5.5 Thiết kế app hiển thi ̣ thông tin xe trên điê ̣n thoa ̣i:

Hình 5.14: Thiết kế các khối lệnh

Đối với viê ̣c thiết kế app hiển thi ̣ thông tin xe trên điê ̣n thoa ̣i thông qua phần mềm App Inventor2 chú ng ta cần thiết kế 2 phần đó là:

- phần Designer hay còn có thể hiểu đây là phần chúng ta sẽ thiết kế các giao diê ̣n, các hình ảnh khi sử du ̣ng app.

- phần Blocks hay còn có thể hiểu là phần lâ ̣p trình hoa ̣t đô ̣ng cho app.

5.5.1 kết nối HC-06 và điê ̣n thoa ̣i:

5.5.1.1.Phần Designer

Để kết nối HC-06 và điê ̣n thoa ̣i chúng ta cần đối tượng ListPicker

Hình 5.15: Đối tượng ListPicker

ListPicker là mô ̣t nút nhấn có chức năng là khi nhấn vào sẽ hiển thi ̣ mô ̣t danh sách những lựa cho ̣n như là đi ̣a chỉ Bluetooth, các danh sách có thể được xác định thông qua

Designer hoặc Blocks Editor bằng cách thiết lập thuộc tính Elements cho sự ghép nối bằng cách tách chuỗi hoặc bằng cách thiết lập thuộc tính Element cho một List trong bộ biên tập Blocks.

Đối với đối tượng Listpicker này chúng ta có thể thay đổi các tính chất như: màu nền (BackgroupColor), chiều cao (Height), chiều rô ̣ng (Width), hình ảnh (Image), màu chữ (TextColor), ...

5.5.1.2.Phần Blocks

Đối với phần lâ ̣p trình, chúng ta cần thiết lâ ̣p 2 chế đô ̣ trước và sau khi nút ListPicker này được nhấn.

Chế đô ̣ trước khi nút ListPicker được nhấn: ở chế đô ̣ này chúng ta sẽ thiết lâ ̣p thuộc tính Elements sẽ go ̣i tất cả những đi ̣a chỉ Bluetooth đã ghép nối từ trước với điê ̣n thoại.

Hình 5.16: Khối lệnh kết nối với HC-06

Chế đô ̣ sau khi nút ListPicker được nhấn: ở chế đô ̣ này chúng ta sẽ thiết lâ ̣p thuô ̣c tính Selection của ListPicker sẽ kết nối với đi ̣a chỉ Bluetooth mà chúng ta đã cho ̣n.

Hình 5.17: Khối lệnh kết nối với HC-06

Sau khi nú t ListPicker được nhấn sẽ hiển thi ̣ các đi ̣a chỉ Bluetooth đã được ghép nối trước với điê ̣n thoa ̣i như này:

Hình 5.18: Địa chỉ bluetooth của thiết bị kết nối

Bên cạnh viê ̣c lâ ̣p trình cho app như vâ ̣y chúng ta cũng có thể nâng cấp phần kết nối này lên bằng viê ̣c thêm các công cu ̣ như là:

- Notifier : công cụ này có chức năng sẽ thông báo mô ̣t text lên màn

-TextToSpeech : công cụ này có chức năng là đo ̣c các kí tự mà chú ng ta cài đă ̣t

Hình 5.19: Khối lệnh hiển thị thông báo khi chưa bật bluetooth

Trước khi nút ListPicker này được nhấn nếu điê ̣n thoa ̣i chưa bâ ̣t Bluetooth thì TextToSpeech sẽ thông báo câu lê ̣nh là “hãy bâ ̣t bluetooth lên” và ngoài ra trên màn hình điê ̣n thoa ̣i cũng sẽ thông báo câu “bâ ̣t bluetooth” như thế này.

Hình 5.20: Thông báo khi bluetooth chưa bật

5.5.2 Tá ch dữ liê ̣u và hiển thi ̣ dữ liê ̣u:

Sau khi kết nối được với thiết bi ̣ HC-06 viê ̣c tiếp theo sẽ là thu nhâ ̣n dữ liê ̣u từ hô ̣p ECU, xử lý dữ liê ̣u và hiển thi ̣ dữ liê ̣u lên điê ̣n thoa ̣i. Để làm được việc này chúng ta cần có mô ̣t cái Clock để xử lý. Đối với Clock1 này chúng ta cái đă ̣t thời gian là 200 mili giây.

Hình 5.21: Đối tượng Clock Về phần Blocks chúng ta sẽ thiết lâ ̣p điều kiê ̣n là:

Nếu Bluetooth đã được kết nối và đối tượng BluetoothClient1 đã nhâ ̣n dữ liê ̣u thì sẽ dùng 1 biến tên là “input” để nhâ ̣n dữ liê ̣u từ đối tượng BluetoothClient1, dữ liê ̣u biến này có da ̣ng là byte1| byte2| byte3| byte4| byte5| byte6| byte7| byte8| byte9| byte10. Sau đó nếu biến “input” không bi ̣ trống sẽ thực hiê ̣n câu lê ̣nh là tách chuỗi dữ liê ̣u ngay ta ̣i vi ̣ trí có dấu “|” và lưu những dữ liê ̣u đã được tách vào trong biến “list”. Sau đó nếu chuỗi dữ liê ̣u này có đô ̣ dài bằng 10 byte sẽ cho hiển thi ̣ lên các lable đã được thiết kế ở phần Designer.

5.5.3 Tạo đồng hồ đếm thời gian:

Để ta ̣o đồng hồ đếm thời gian này chúng ta cần 1 cái Clock2. Thời gian hoa ̣t đô ̣ng củ a Clock2 là 1000 mili giây. Ngoài ra cần ta ̣o thêm 2 biến để thiết lâ ̣p. Khi Clock2 hoa ̣t đô ̣ng thì biến tên “data” sẽ tăng lên 1 đơn vi ̣ và đồng thời sẽ hiển thi ̣ vào lable tên “giaylap”. Nếu giá tri ̣ của biến tên “data” bằng 60 sẽ tăng biến tên “data2” lên 1 đơn vi ̣ và hiển thị giá tri ̣ biến “data2” vào lable “phutlap”, đồng thời thiết lâ ̣p biến tên “data” về giá tri ̣ 0.

Hình 5.23: Khối lệnh tạo đồng hồ đếm thời gian

Tương tự viê ̣c ta ̣o Clock2 ta ta ̣o thêm 1 Clock4 cho app. Đối với Clock4 này chú ng ta vẫn ta ̣o 2 biến (data3, data4) để lưu giá tri ̣, vẫn thiết lâ ̣p thời gian hoa ̣t đô ̣ng của Clock4 này là 1000 mili giây. Nhưng chúng ta không hiển thi ̣ giá tri ̣ các biến ở da ̣ng Text trong lable như Clock2 mà chúng ta sẽ hiển thi ̣ giá tri ̣ các biến bằng hình ảnh. Để làm được điều này chúng ta cần ta ̣o các hình ảnh từ 1 đến 9 tương ứng với giá tri ̣ của các biến.

Sau khi tạo được những con số từ 1 đến 9 chúng ta lưu từng con số với tên trùng vớ i con số Vd hình chúng sẽ lưu tên là 00.png để tiê ̣n cho viê ̣c go ̣i hình khi lâ ̣p trình. Tiếp sau đó chúng ta sẽ upload tất cả các file ảnh của các con số lên app để sử du ̣ng. Chú ng ta click vào nút Upload File ... trong mu ̣c Media tiếp theo click vào nút Choose File vào cho ̣n file cần tải lên.

Hình 5.25: Cách chèn file ảnh Chú ng ta cần đă ̣t 4 đối tượng Image để hiển thi ̣ lên điê ̣n thoa ̣i.

Hình 5.26: Đồng hồ đếm thời gian

Khi Clock4 hoạt đô ̣ng biến “data3” sẽ tăng lên 1 đơn vi ̣ và sẽ hiển thi ̣ giá tri ̣ lên Image12 và Image13.

Hình 5.27: Khối lệnh thiết lập hiển thị thời gian

Đối với Image12 sẽ thiết lâ ̣p hiển thi ̣ phần dư giá tri ̣ của biến “data3” còn Image13 sẽ thiết lâ ̣p hiển thi ̣ phần nguyên giá tri ̣ của biến “data3”.

Tương tự như Clock2 chúng ta lâ ̣p trình được đoa ̣n code như thế này.

Hình 5.28: Khối lệnh thiết lập hiển thị thời gian

Sau khi hoàn thành viê ̣c thiết kế phần Designer và phần Blocks chúng ta sẽ được phần hiển thi ̣ trên app như thế này.

Hình 5.29: Đồng hồ hiển thị thời gian tổng và thời gian từng vòng đấu

5.5.4 Tạo đồng hồ báo vâ ̣n tốc và tua máy của xe:

Để ta ̣o được mô ̣t đồng hồ báo vâ ̣n tốc và tua máy cho xe đe ̣p, sinh đô ̣ng và dễ nhìn hơn chúng ta cần thiết kế mô ̣t mă ̣t đồng hồ. Nhóm em đã ta ̣o mô ̣t mă ̣t đồng hồ bằng phần mềm Photoshop CC 2017. Mă ̣t đồng hồ này được sử du ̣ng để làm nền cho các giá tri ̣ cần hiển thị như vâ ̣n tốc và tua máy của xe

Hình 5.30: Đồng hồ vận tốc và tua máy Đến với phần Designer, chúng ta cần sử du ̣ng các đối tượng là:

- Canvas trong mục Drawing and Animation

- ImageSprite trong mục Drawing and Animation

Hình 5.31: Đối tượng dùng để thiết lập đồng hồ vận tốc và tua máy

Đồng hồ báo tổng thời gian thi đấu (Clock4)

Đồng hồ báo thời gian thi đấu từng vòng (Clock2)

Sau khi thiết kế và kết hợp với tất cả các phần trên nhóm em đã thiết kế ra mô ̣t app sử dụng trên điê ̣n thoa ̣i.

Hình 5.32: Ứng dụng hiển thi ̣ thông số của xe được thiết kế bằng App Inventor2

CHƯƠNG 6: KẾT LUẬN VÀ ĐỀ NGHỊ 6.1 Kết luận:

Sau hơn 3 tháng nghiên cứu và thực hiện đồ án tốt nghiệp, bằng sự cố gắng của nhóm cùng với sự hướng dẫn tận tình của GVHD ThS. Nguyễn Trọng Thức, nhóm thực hiện đã hoàn thành đưa ra sản phẩm cuối cùng và thử nghiệm thành công trong điều kiện thực tế.

Đề tài đã mang lại cho chúng em những trải nghiệm mới, những kiến thức mới mà chỉ trong quá trình tự tìm hiểu, tự nghiên cứu mới có được. Đây cũng là tiền đề quan trọng để mỗi thành viên trong nhóm tích lũy những kiến thức mới, những kĩ năng mới chuẩn bị hành trang bước vào doanh nghiệp.

Kết quả đã ta ̣o ra 3 ứng du ̣ng trên điê ̣n thoa ̣i để hiển thi ̣ thông số của xe. Đồng thời, nhóm cũng đã gửi được dữ liê ̣u của xe ra bên ngoài ở khoảng cách tối đa có thể đa ̣t được là 1km với điều kiê ̣n ít vâ ̣t cản, cây xanh và nhà cao tầng.

6.2 Đề nghị:

Cuộc thi Shell Eco-marathon là mô ̣t cuô ̣c thi không còn xa la ̣ gì đối với sinh viên khoa Cơ khí Động lực trường ĐH Sư phạm Kỹ thuật TP.HCM nhưng viê ̣c truyền thông tin và thông số của xe giữa lái xe và thành viên bên ngoài còn rất ha ̣n chế. Vì thế, đề tài này còn rất nhiều nội dung cần phải cải thiện và phát triển để cho ra sản phẩm hoàn chỉnh nhất có thể ứng dụng rộng rãi và giúp hỗ trợ cho những đô ̣i thi Shell Eco-marathon của trường ĐH Sư pha ̣m kỹ thuâ ̣t TP.HCM. Chính vì lẽ đó, nhóm đưa ra 1 số hướng phát triển tiếp theo cho đề tài:

• Có thể trao đổi các thông tin và thông số của đô ̣ng cơ giữa lái xe và các thành viên bên ngoài mô ̣t cách nhanh chóng và ki ̣p thời.

• Có thể hiển thi ̣ bản đồ thi đấu trên điê ̣n thoa ̣i để lái xe dễ quan sát và có chiến thuật cha ̣y hợp lý.

TÀI LIỆU THAM KHẢO

https://iotvietnam.com/tong-quan-ve-cong-nghe-zigbee/ http://automation.net.vn/CNTT-voi-TDH/Mot-so-net-khai-quat-ve-chuan-Zigbee.html https://accounts.google.com/ServiceLogin?service=ah&passive=true&continue=https%3 A%2F%2Fappengine.google.com%2F_ah%2Fconflogin%3Fcontinue%3Dhttp%3A%2F %2Fai2.appinventor.mit.edu%2Flogin%2Fgoogle%253Flocale%253Den http://appinventor.mit.edu/explore/ai2/tutorials

Mô hình thực tế khối nhận dữ liệu của xe:

Thông số động cơ Honda Wav eS 110cc

Sơ đồ mạch điện Air Blade