TỔNG QUAN
Tổng quan
Từ khi xe ô tô xuất hiện, nhu cầu sử dụng thông tin giải trí trên xe ngày càng tăng. Bên cạnh sự phát triển của động cơ và các hệ thống khác như hệ thống lái, hệ thống phanh, hệ thống treo,…để thỏa mản nhu cầu sử dụng của người dùng, hệ thống giải trí được các hãng ngày càng phát triển và tích hợp nhiều ứng dụng Trãi qua quá trình lâu dài và cải tiến, đến nay hệ thống giải trí đã được tích hợp rất nhiều chức năng như: hiển thị thông tin ngày tháng, hiển thị thông tin bản đồ, bài hát đang chơi, nhiệt độ điều hòa, áp suất lốp,… Vì vậy nhóm chúng em thực hiện đề tài: Thiết kế ứng dụng Home thuộc hệ thống giải trí trên xe ô tô, với mong muốn có thể góp phần vào nguồn tài liệu tham khảo phụ vụ cho các bạn sinh viên, kỹ thuật viên trong ngành kỹ thuật ô tô cũng như những người muốn tìm tòi và tham khảo chủ đề này.
Mục tiêu đề tài
-Mục tiêu của chúng em là thiết kế ra một ứng đụng Home chứa các ứng dụng giải trí trên ô tô để xây dựng nguồn tài liệu tham khảo cho các bạn sinh viên, kỹ thuật viên trong ngành kỹ thuật ô tô và mọi người có nhu cầu tìm kiếm chủ đề này.
- Rèn luyện kỹ năng lập trình, tra cứu thông tin, tổng hợp và phân tích vấn đề, nâng cao kiến thức chuyên ngành.
Nội dung nghiên cứu
Tìm hiểu, nghiên cứu cách thức khởi tạo, thiết kế tạo ra một ứng dụng Home hoàn chỉnh với các chức năng: hiển thị thông tin ngày tháng, hiển thị thông tin bản đồ, điều hòa xe hơi, bài hát đang chơi, hiển thị danh sách ứng dụng, mở các ứng dụng trong hệ thống.
Phương pháp nghiên cứu
Kết hợp nhiều phương pháp, trong đó có các phương pháp sau:
- Tổng hợp tài liệu, phần mềm thiết kế.
- Chọn lọc nghiên cứu các chức năng cơ bản của hệ thống giải trí.
-Sử dụng ngôn ngữ lập trình C++, QML và lập trình trên Framework Qt
Creator để tạo ra một ứng dụng Home thuộc hệ thống giải trí.
Phạm vi nghiên cứu
Hệ thống giải trí được hầu hết đều được trang bị trên các dòng xe hiện nay Do đó, chúng em đã nghiên cứu để thiết kế ra một ứng dụng Home cơ bản có đầy đủ các chức năng hiện có trên các dòng xe để phục vụ xây dựng nguồn tài liệu tham khảo cho các bạn sinh viên, kỹ thuật viên trong ngành kỹ thuật ô tô và mọi người có nhu cầu tìm kiếm chủ đề này.
NGÔN NGỮ LẬP TRÌNH C++ VÀ
Ngôn ngữ lập trình C++
Ngôn ngữ lập trình C++ là một ngôn ngữ lập trình hướng đối tượng (OOP – Object Oriented Programming) được phát triển bởi Bjarne Stroustrup C++ là ngôn ngữ lập trình được phát triển trên nền tảng ngôn ngữ lập trình C Do đó, C++ có song song cả 2 phong cách lập trình hướng cấu trúc giống C và có thêm phong cách hướng đối tượng.
Ngôn ngữ lập trình C++ là một ngôn ngữ lập trình cấp trung Bởi vì nó các tính chất của cả ngôn ngữ lập trình bậc thấp (Pascal, C…) và ngôn ngữ lập trình bậc cao (C#, Java, Python…) Ngôn ngữ lập trình C++ (C plus plus) có đuôi mở rộng là cpp.
2.1.2 Điểm mạnh của ngôn ngữ C++
Nói đến C++ thì không thể không nhắc đến những điểm mạnh của nó dưới đây:
- Tính phổ biến: C++ là một trong những ngôn ngữ lập trình phổ biến trên thế giới.
-Tính thực thi nhanh: Nếu thành thục C++ thì có thể lập trình nhanh, một trong những khả năng của C++ là khả năng thực thi nhanh và nếu cần thêm các chức năng cho chương trình, C++ có thể cho phép dùng ngôn ngữ Assembly – ngôn ngữ lập trình bậc thấp nhất – để giao tiếp với các phần cứng của máy tính.
- Thư viện đầy đủ: Có rất nhiều tài nguyên cho người lập trình C++, bao gồm cả đồ họa API, 2D, 3D, vật lý các thiết bị âm thanh hỗ trợ giúp cho lập trình viên dễ dàng thực thi.
-Đa mô hình: C++ cho phép bạn lập trình theo cấu trúc tuyến tính, hướng chức năng, hướng đối tượng đa dạng tùy theo yêu cầu của người lập trình.
2.1.3 Ứng dụng của ngôn ngữ C++
Có rất nhiều ứng dụng thực tế sử dụng C++:
-Ứng dụng có giao diện người dùng
-Ứng dụng tính toán và đồ họa
-Phần mềm quản trị cơ sở dữ liệu
Ứng dụng Qt Creator
Qt là một framework phát triển ứng dụng đa nền tảng dành cho máy tính, nhúng và di động Các nền tảng được hổ trợ bao gồm: Linux, OS X, Windows, VxWorks, QNS, Android, IOS, BlackBerry, Sailfish OS và các nền tảng khác.
Mục tiêu của các nhà phát triển nên Qt chính là tạo ra một framework có khả năng thiết kế những phần mềm có thể chạy trên nhiều nền tảng phần mềm lẫn phần cứng khác nhau mà không phải thay đổi nhiều về code.
Qt không chỉ là thứ giúp viết giao diện cho phần mềm, nó có đầy đủ các khía cạnh để tạo nên một phần mềm hoàn chỉnh ở nhiều góc độ, cho dù phần mềm đó có giao diện hay không Có thể dùng Qt viết ra những phần mềm chạy bằng dòng lệnh, hoặc là các ứng dụng console chạy trên server, thậm chí là các web framework,….
2.2.2 Các thành phần của Qt
Qt creator có các thành phần và chức năng cơ bản như sau:
-Qt Core: Chứa các thành phần cơ sở, bao gồm các containers (tương tự thư viện chuẩn của các ngôn ngữ lập trình: QVector ,Qlist ,QMap,…), các thư viện nhập xuất đa nền tảng, lập trình đa luồng (threading) và xử lý song song (concurrency),…
- Qt GUI: Thành phần chính để lập trình giao diện.
-Qt Widgets: Các widget, button, hộp thoại và những thứ tương tự trong giao diện đều gọi là các widget.
-Qt QML: Hỗ trợ cho QML và Javacript QML là một ngôn ngữ để viết giao diện cho ứng dụng Qt, bên cạnh ngôn ngữ lập trình C++.
- Qt Quick: QML là một phần của Qt Quick.
- Qt Quick Control: Các widget điều khiển dành cho Qt Quick.
- Qt Quick Layouts: Bố trí các widget trong Qt Quick.
-Qt Network: Network abstraction layer (NAL – lớp trừu tượng dành cho network), đầy đủ các giao thức TCP, UDP, HTTP và SSL.
- Qt Multimedia: Thư viện về âm thannh, hình ảnh, camera,…
- Qt Multimedia Widgets: Các widget dành cho Qt Multimedia.
- Qt SQL: Module làm việc với cơ sở dữ liệu (ngôn ngữ SQL).
-Qt WebKit: WebKit là một module cho các web browser (Safari và Google
Chrome,…) dùng để hiển thị các trang web Qt WebKit là một thư viện giúp làm việc với WebKit.
- Qt WebKit Widgets: Các widget dành cho Qt WebKit.
- Qt Test: Hỗ trợ Unit Test cho các ứng dụng Qt.
2.2.3 Ưu điểm và nhược điểm của Qt
-Khả năng sử dụng cùng một mã cho các nền tảng máy tính, thiết bị di động và nhúng khác nhau.
- Qt sử dụng mô hình cấp phép kép Integra Sources thường chọn giấy phép nguồn mở cho các dự án, thiết kế ứng dụng cũng có sẵn theo giấy phép thương mại
Qt theo yêu cầu của khách hàng.
-Tài liệu API chi tiết, ví dụ, hỗ trợ kỹ thuật và cộng đồng lớn giúp Qt dễ sử dụng.
-Qt Creator IDE nhanh và phản hồi nhanh
-Ngôn ngữ C++ rất phức tạp, thật khó để các nhà thiết kế thiếu kinh nghiệm học và sử dụng nó.
-C++ thiếu tính linh hoạt đối với các công nghệ web.
- Tốc độ của các ứng dụng đa nền tảng có thể chậm hơn so với các ứng dụng khác.
-Biên dịch chéo có thể yêu cầu các bước bổ sung.
Cài đặt ứng dụng Qt
Bước 1: Tải Qt phiên bản 5.12 tại https:/download.qt.io/archive/qt/
Hình 2 1: Các phiên bản Qt hiện tại
Bước 2: Đăng nhập tài khoản
Hình 2 2: Đăng nhập tài khoản Bước 3: Bấm Next đến mục Select Components
Hình 2 3: Các thành phần cài đặt
Bước 4: Chọn các thành phần cài đặt cần thiết
Hình 2 4: Các phần cần cài đặt Bước 5: Tiến hành cài đặt
Hình 2 5: Tiến hành cài đặt
Bước 6: Hoàn tất cài đặt
Hình 2 6: Giao diện Qt Creator
CƠ SỞ LÝ THUYẾT
Khảo sát một số màn hình ô tô
3.1.1 Khảo sát một số màn hình ô tô phổ biến trên thị trường
- Ưu điểm của màn hình OLED là giá bình dân, màn hình trang bị kính cường lực 2.5D, có xử lý chống loá, cấu hình mạnh, có khuếch đại âm thanh, ngôn ngữ tiếng Việt… Các dòng màn hình ô tô OLED cao cấp có cả điều khiển bằng giọng nói.
-Loại xe: Lắp được hầu hết trên các dòng xe ở Việt Nam, tuy nhiên đối với những dòng xe như Mazda, Vinfast,…
-Ưu điểm: Hỗ trợ lái xe an toàn và các ứng dụng giải trí thông minh Đây là phân khúc màn hình tầm trung, phù hợp với hầu hết các dòng xe phổ thông và khắc phục được hầu hết những thiếu hụt của màn hình nguyên bản theo xe.
3.1.1.3 Màn hình Pyle Double DIN Car Stereo Receiver
-Ưu điểm: Màn hình cảm ứng 10" 1080P Màn hình lớn hơn cho phép cải thiện tầm nhìn, đặc biệt là khi lái xe Bạn có thể nhanh chóng lướt qua màn hình và truy cập thông tin mình cần mà không bị phân tâm nhiều Có tính năng định vị GPS Android 8.1 & hỗ trợ phát lại video HD 1080P để xem youtube, video HD, v.v.
3.1.2 Khảo sát một số màn hình trên xe thực tế của Toyota
3.1.2.1 Màn hình theo xe Toyota Lexus ES250
Hình 3 4: Giao diện Menu Toyota Lexus
Hình 3 5: Giao diện Climate Toyota Lexus ES250 3.1.2.2 Màn hình theo xe Toyota RUSH
Hình 3 6: Giao diện Menu Toyota
RUSH - Giao diện Media Player
Hình 3 7: Giao diện Media Player Toyota RUSH 3.1.2.3 Màn hình JBL của xe Toyota Camry 2.5Q
Hình 3 8: Giao diện Menu màn hình JBL Toyota Camry 2.5Q
Hình 3 9: Giao diện Map Toyota Camry 2.5Q 3.1.2.4 Màn hình theo xe Toyota Fortuner
Hình 3 10: Giao diện Menu Toyota
Fortuner - Giao diện Media Player
Yêu cầu chi tiết ứng dụng Home
Cung cấp một bản mô tả đầy đủ và chính xác về những yêu cầu mà ứng dụng Home cần phải thực hiện được và cách thiết kế ứng dụng Home.
Kết hợp nhiều phương pháp, trong đó có các phương pháp sau:
- Tổng hợp tài liệu, phần mềm thiết kế.
- Chọn lọc nghiên cứu các chức năng cơ bản của hệ thống giải trí.
Sử dụng ngôn ngữ lập trình C++, QML và lập trình trên Framework Qt Creator để tạo ra một ứng dụng Home thuộc hệ thống giải trí.
Những yêu cầu thiết kế và thực hiện ứng dụng Home
3.3.1 Thiết kế giao diện ứng dụng Home
- Ứng dụng Home được chia thành 3 vùng là Status Bar Area, Widget Area và Application Menu Area.
-Vùng Status Bar Area sẽ thể hiện thông tin về ngày tháng và thời gian thực của ứng dụng tương ứng với thực tế.
-Vùng Widget Area sẽ thể hiện thông tin về những tiện ích phần mềm như Map, Climate Controller và Media Player,
-Vùng Application Menu Area sẽ thể hiện danh sách các tiện ích phần mềm khác của ứng dụng Home.
3.3.2 Mô tả cách tương tác trên màn hình ứng dụng Home
- Nếu có trên 6 tiện ích phần mềm ở vùng Application Menu Area thì ta có thể kéo qua kéo lại để tương tác được hết với những tiện ích này.
-Thể hiện thông tin của những ứng dụng và tiện ích phần mềm như tiêu đề, icon.
- Trả về màn hình Home khi nhấn nút Back trên màn hình và khi nhấn phím Backspace.
-Mỗi tiện ích phần mềm sẽ có hiệu ứng trạng thái: bình thường, nhấn giữ và tập trung.
-Sử dụng phím mũi tên trên bàn phím để di chuyển qua lại các ứng dụng và tiện ích.
-Mở được ứng dụng và các tiện ích khi nhấn vào icon hoặc shortcut của nó.
3.3.3 Mô tả về vùng Status Bar Area
- Định dạng được ngày tháng theo format: MM.DD, thời gian theo format: hh:mm.
-Ngày tháng và thời gian luôn luôn được cập nhật theo thời gian thực
3.3.4 Mô tả về vùng Widget Area
-Thể hiện được giao diện Map trên vùng này, nhấn “M” để mở Map.
-Thể hiện được giao diện Climate Controller và khi người dùng nhấn vào thì sẽ có thể truy cập vào ứng dụng này hoặc nhấn “C” để mở ứng dụng.
+Có thể điều khiển ứng dụng này thông qua App Climate Simulator
+Nhiệt độ xe từ 16.5 độ C đến 31.5 độ C Nếu nhiệt độ xe là thấp nhất 16.5 độ
C thì sẽ hiện “LOW”, còn nếu nhiệt độ xe là cao nhất 31.6 độ C thì sẽ hiện “High”
+AUTO sẽ có 2 chế độ AUTO ON và AUTO OFF
+SYNC sẽ có 2 chế độ SYNC ON và SYNC OFF
+Đơn vị nhiệt độ là độ C
+Hướng gió sẽ có 3 sự lựa chọn: Mặt, chân hoặc cả mặt và chân.
- Thể hiện được giao diện Media Player, khi nhấn vào thì sẽ chuyển từ Home Screen sang ứng dụng Media Player.
+Media Player sẽ thể hiện các thông tin: tên ca sĩ, tên bài hát, playlist, thanh progress và hình ảnh album
+Những thông tin trong ứng dụng Media Player sẽ được cập nhật liên tục khi có thay đổi
+Nhấn “P” để mở ứng dụng Media Player.
3.3.5 Mô tả về vùng Application Menu Area
-Thể hiện được danh sách các tiện ích khi mở ứng dụng Home.
-Chỉ có thể tập trung vào 1 ứng dụng trên Home Screen tại 1 thời điểm.
-Sử dụng chuột để di chuyển thay đổi vị trí của các ứng dụng này Ngoài ra khi tắt mở lại ứng dụng Home thì vị trí các tiện ích này vẫn giữ nguyên không thay đổi.
Các quy chuẩn cơ bản về thiết kế giao diện và trải nghiệm người dùng
Ởphần này, chúng ta sẽ tìm hiểu về các quy chuẩn cơ bản để thiết kế 1 màn hìnhHMI trên xe ô tô theo các quy chuẩn thiết kế cơ bản của Apple và một số hãng khác.Homescreen là 1 cửa sổ chứa các chế độ xem và thành phần trình bày giao diện người dùng của ứng dụng hoặc trò chơi của người sử dụng.
Hình 3 12: Màn hình giao diện Homescreen cơ bản của Pyle Double DIN
-Để bắt đầu thiết kế hệ thống HMI, chúng ta cần xác nhận với nhà sản xuất ô tô về vùng kích thước của HMI có thể được thiết kế trong màn hình (Lưu ý: "màn hình" là không gian làm việc bình thường của ứng dụng chứ không phải toàn bộ không gian cạnh và một số nhà sản xuất nhúng các nút cố định vào khu vực này).
-Có những độ phân giải màn hình cơ bản:
Hình 3 13: Những độ phân giải cơ bản của màn hình Carplay HMI
Hình 3 14: Những độ phân giải cơ bản của màn hình Google HMI
Hình 3 15: Phần bố cục màn hình được thiết kế
-Apple's Carplay, Google's Android auto và Baidu carlife+ đều có hệ thống HMI của riêng mình Nếu độ phân giải màn hình của một số công ty ô tô không phù hợp với họ, họ sẽ không thể điều chỉnh thành công và sẽ xảy ra hiện tượng lỗi kéo dài và các hiện tượng khác, trừ khi họ xây dựng lại HMI thông qua các dịch vụ tùy chỉnh.
Màn hình liên quan đến dự án này có kích thước gần giống với Carplay, nhưng với ý tưởng riêng về cách bố trí bố cục và thiết kế Điều này sẽ được đề cập trong các quy chuẩn sau:
+ Quy chuẩn về khoảng cách giữa các thành phần
Theo quy chuẩn của Google HMI, các giá trị khoảng cách dọc và ngang cố định giữa các thành phần trong bố cục, được tạo trên lưới 8 pixel, có nghĩa là các thành phần giao diện người dùng và thành phần trong đặc tả được phân tách bằng bội số của 8px.
Hình 3 16: Quy chuẩn khoảng cách giữa các thành phần
Ta sẽ lấy ví dụ về màn hình HMI của Google, màn hình này sẽ bao gồm 8 giá trị về định nghĩa khoảng cách giữa các thành phần trên màn hình Lưu ý: Kích thước giãn cách 4px và 12px được cung cấp để căn chỉnh khoảng cách giữa các phần tử nhỏ hơn Hai giá trị này nên được sử dụng một cách thận trọng Trong hệ thống xe màn hình lớn cũng có nhiều khoảng cách cần lớn hơn 96px Do đó, yêu cầu là có thể sử dụng bội số của 8px.
Tuy vậy, ta cũng có thể sử dụng bội số của một số khác để thiết kế, miễn là các thành phần bố cục nhìn hài hòa, gần gũi và không bị rối mắt.
+ Các bố cục chung về thiết kế các thành phần trong màn hình
Hình 3 17: Bố cục tổng quan của màn hình và app icon
Hình 3 18: Bố cục tổng quan của điều khiển điều hòa Climate Controller, Media
Player và 1 số app khác
+ Quy chuẩn về các góc cạnh bo tròn.
Khi đặt quy định cho các góc bo tròn, có một điều cần chú ý là không nên có quá nhiều loại kích thước, nếu không sẽ lộn xộn.
Hình 3 19: Định nghĩa của Google HMI về 5 benchmarks của các góc bo tròn Mặc dù bố cục ứng dụng được tạo trên lưới 8dp (1dp = 2px), kích thước bán kính
4dp vẫn được cung cấp để giúp định hình các thành phần trong các thành phần nhỏ hơn Ta có thể kết luận rằng không có đúng sai giữa góc tròn và góc vuông, lựa chọn cách thiết kế phù hợp là tốt nhất.
+ Quy chuẩn về thiết kế icon
Dựa trên độ phân giải của màn hình, sẽ có cách tính toán PPI PPI chính hay còn gọi là Pixels Per Inch, là thông số được dùng để định lượng số lượng pixel (ảnh) tìm trên 1 mặt màn hình Khi mật độ điểm ảnh càng dày thì chất lượng hình ảnh càng sắc nét và sống động, ngược lại khi mật độ điểm ảnh thưa thì chất lượng hình ảnh bị mờ nhoè và vỡ nét.
Hình 3 20: Công thức tính PPI
Ví dụ nếu màn hình 8 inches có độ phân giải là 1280x720 thì:
PPI = 1280 2 8 + 720 2 183.57 mật độ điểm ảnh
Hình 3 21: Một số các kích thước cơ bản của Google icon
Biểu tượng cơ bản, biểu tượng chính: 44px, biểu tượng phụ: 36px, biểu tượng bên thứ ba: 24px
Sử dụng Avatar: Avatar nhỏ: 56px, Avatar vừa: 76px, Avatar lớn: 96px;
Biểu tượng cơ sở: 48px
Biểu tượng phụ 40px (kích thước biểu tượng tối thiểu).
+Quy chuẩn về thiết font chữ và cỡ chữ
• Khi thiết kế HMI, ta cần chọn font HMI cần sử dụng: tiếng Anh, số hay ngôn ngữ đa quốc gia Mỗi công ty khác nhau sẽ có cách thiết kế kiểu chữ khác nhau, nếu chúng ta muốn sử dụng font chữ của họ thì phải xin giấy phép hoặc trả phí trước khi sử dụng.
• Phông chữ nguồn mở được khuyến nghị (Tiếng Anh/Số: Roboto) Nếu có các dự án ở nước ngoài, nên sử dụng phông chữ Noto sans cho các ngôn ngữ không có trong Roboto Noto sans được bắt nguồn từ các số liệu tương tự như Roboto và nhằm mục đích đạt được sự quốc tế hóa hài hòa về mặt hình ảnh.
• Kích thước phông chữ phải được kiểm soát ở 20px, nên thận trọng khi sử dụng Kích thước phông chữ văn bản tối thiểu là 24px.
+Quy chuẩn về tiêu điểm và lựa chọn
Tiêu điểm giúp mọi người xác nhận một cách trực quan đối tượng mà họ nhắm đến khi tương tác Tập trung hỗ trợ điều hướng dựa trên thành phần được đơn giản hóa Sử dụng đầu vào như điều khiển từ xa hoặc bộ điều khiển trò chơi, bàn phím giúp mọi người tập trung vào các thành phần mà họ muốn tương tác.
Bảng 3 1: Các trang thái tiêu điểm và lựa chọn
STT Trạng thái Miêu tả
Người xem chưa tập trung vào mục, các mục
1 không tập trung xuất hiện ít nổi bật hơn các mục tập trung
Người xem tập trung vào mục tiêu, một mục tiêu điểm nổi bật trực quan so với nội dung
2 khác trên màn hình thông qua độ cao so với chiếu sáng nền trước và hoạt ảnh
Người xem chọn mục tiêu điểm, một mục tiêu tập trung cung cấp phản hồi trực quan ngay lập tức khi mọi người chọn nó Ví dụ: một nút có thể phát minh ra màu sắc và hoạt ảnh của nó
3 trong thời gian ngắn trước khi nó chuyển sang giao diện đã chọn
Người xem đã chọn hoặc kích hoạt mục theo một cách nào đó Ví dụ: một nút hình trái tim
4 mà mọi người có thể sử dụng để yêu thích một bức ảnh có thể xuất hiện được điền ở trạng thái được chọn và trống ở trạng thái được bỏ chọn.
Người xem không thể tập trung vào mục hoặc
5 chọn mục đó Một mục không hoạt động
+Quy ước đặt tên (Naming convention)
Các chuẩn giao tiếp giữa màn hình chính và các thiết bị ngoại vi trong hệ thống thông tin giải trí trên xe ô tô
3.5.1 Các giao thức giao tiếp
Màn hình HMI trong ô tô sử dụng nhiều giao thức truyền thông khác nhau để trao đổi dữ liệu và lệnh điều khiển với các thành phần khác trong hệ thống giải trí của xe Dưới đây là một số giao thức truyền thông phổ biến được sử dụng trong hệ thống màn hình HMI ô tô:
-CAN (Controller Area Network): CAN là một giao thức truyền thông phổ biến trong các hệ thống ô tô Nó cho phép giao tiếp giữa cácm module điều khiển điện tử (ECU) khác nhau trong xe, bao gồm cả màn hình HMI CAN được sử dụng để truyền dữ liệu và lệnh điều khiển liên quan đến điều khiển âm thanh, định vị, thông tin xe và các chức năng khác.
-Ethernet: Ethernet đang được áp dụng ngày càng nhiều trong các hệ thống ô tô hiện đại, bao gồm cả màn hình HMI Nó cung cấp truyền thông tốc độ cao và cho phép truyền dữ liệu lớn như phát trực tuyến đa phương tiện và cập nhật phần mềm. Ethernet trên ô tô dựa trên tiêu chuẩn IEEE 802.3, thường được sử dụng cho truyền thông Ethernet trong các ứng dụng ô tô.
-MOST (Media-Oriented Systems Transport): MOST là một giao thức giao tiếp được thiết kế đặc biệt cho hệ thống đa phương tiện và giải trí trong xe Nó hỗ trợ truyền dữ liệu tốc độ cao cho phát trực tuyến đa phương tiện, bao gồm âm thanh, video và tín hiệu dữ liệu Màn hình HMI có thể sử dụng MOST để truyền thông với các thành phần đa phương tiện khác như bộ khuếch đại âm thanh, máy phát CD/DVD.
- LVDS (Low-Voltage Differential Signaling): LVDS là một tiêu chuẩn truyền tín hiệu thường được sử dụng cho việc truyền dữ liệu tốc độ cao giữa các thành phần, bao gồm màn hình HMI và các bảng hiển thị LVDS cho phép truyền tín hiệu video và điều khiển với công suất tiêu thụ thấp và khả năng chống nhiễu.
- I2C (Inter-Intergrated Circuit): I2C là một giao thức giao tiếp nối tiếp tốc độ thấp được sử dụng để giao tiếp tầm ngắn giữa các thành phần trong hệ thống thông tin giải trí Màn hình HMI có thể sử dụng I2C để giao tiếp với bộ điều khiển cảm ứng, cảm biến tiệm cận hoặc các thiết bị ngoại vi khác.
- SPI (Serial Peripheral Interface): SPI là một giao thức truyền thông nối tiếp đồng bộ cho phép trao đổi dữ liệu giữa các bộ vi điều khiển hoặc hệ thống trên 1 vi mạch (System on a chip) và các thiết bị ngoại vi Màn hình HMI có thể sử dụng SPI để giao tiếp với trình điều khiển LCD, bộ điều khiển đèn nền hoặc các thành phần liên quan đến màn hình khác.
-USB (Universal Serial Bus): USB thường được sử dụng để kết nối các thiết bị bên ngoài với hệ thống HMI, chẳng hạn như điện thoại thông minh, ổ USB hoặc trình phát đa phương tiện Màn hình HMI có thể hỗ trợ các giao thức USB, chẳng hạn như USB 2.0 hoặc USB 3.0, để hỗ trợ truyền dữ liệu, kết nối thiết bị và cập nhật phần mềm.
- Các giao thức truyền thông cụ thể được sử dụng trong màn hình HMI ô tô có thể khác nhau tùy thuộc vào kiến trúc hệ thống, nhà sản xuất và các yêu cầu cụ thể của hệ thống thông tin giải trí Các giao thức khác nhau có thể được sử dụng cho các khía cạnh giao tiếp khác nhau trong hệ thống, chẳng hạn như các lệnh điều khiển, truyền dữ liệu hoặc truyền phát đa phương tiện.
3.5.2 Các giao thức giao tiếp hệ thống của General Motors
Các giao thức giao tiếp thường được sử dụng của hãng sản xuất ô tô General Motors (GM):
- UART (Universal Asynchronous Receiver / Transmitter): Đây là là một giao thức truyền thông đồng bộ không đồng thời UART sử dụng 1 mô-đun điều khiển chính được kết nối với 1 hoặc nhiều mô-đun từ xa Mô-đun điều khiển chính được sử dụng để kiểm soát lưu lượng thông tin trên dòng dữ liệu UART sử dụng chuyển đổi độ rộng xung cố định giữa 0 và 5 V BUS dữ liệu UART của GM thường hoạt động ởtốc độ truyền 8.192 bps UART có thể hỗ trợ giao tiếp giữa hệ thống thông tin giải trí và các thiết bị bên ngoài, chẳng hạn như điện thoại thông minh, máy tính bảng hoặc máy nghe nhạc di động Kết nối UART có thể được sử dụng để trao đổi dữ liệu, lệnh điều khiển và đồng bộ hóa giữa hệ thống thông tin giải trí và các thiết bị này Ngoài ra, các giao thức UART có thể được sử dụng để kết nối giao diện điều khiển của hệ thống thông tin giải trí, chẳng hạn như các nút hoặc núm vật lý đến bộ điều khiển hệ thống chính UART cho phép truyền tín hiệu điều khiển và cập nhật trạng thái giữa các phần tử HMI với hệ thống trung tâm.
- Giao tiếp Entertainment and Comfort (E & C): Dữ liệu truyền thông nối tiếp về giải trí và tiện nghi (E & C) của GM tương tự như UART, nhưng sử dụng chuyển đổi từ 0 đến 12 V Giống như UART, dữ liệu truyền thông nối tiếp E & C sử dụng mô-đun điều khiển chính được kết nối với các mô-đun từ xa khác, có thể bao gồm các phần sau:
+Bảng đồng hồ lái xe điện tử
+Hệ thống âm thanh radio
+Hệ thống điều khiển sưởi ấm, điều hòa
-Giao tiếp Keyword: Mạng truyền thông nối tiếp Keyword 81, 82 và 2000 cũng được sử dụng cho một số giao tiếp giữa mô-đun với mô-đun trên xe GM Tín hiệu BUS của giao tiếp này được chuyển đổi từ 0 đến 12 V khi giao tiếp Điện áp hoặc luồng dữ liệu bằng 0V khi không giao tiếp.
-Giao tiếp Class 2: là mạng truyền thông nối tiếp hoạt động bằng cách chuyển đổi giữa 0 và 7V tại tốc độ truyền 10,4 Kbs Class 2 được sử dụng cho hầu hết mạng truyển thông tốc độ cao giữa mô-đun điều khiển hệ thống truyền lực (PCM) và các mô-đun điều khiển khác, cộng với công cụ chẩn đoán Class 2 là mạng truyền thông nối tiếp tốc độ cao được sử dụng bởi GMCAN (CAN).
-Giao tiếp GMLAN: General Motors, giống như tất cả các nhà sản xuất xe, phải sử dụng dữ liệu truyền thông nối tiếp tốc độ cao để giao tiếp với các công cụ chẩn đoán trên tất cả các phương tiện từ năm 2008 Tiêu chuẩn GMLAN của GM khác với tiêu chuẩn CAN của SAE:
+ GMLAN tốc độ thấp: Được sử dụng cho các chức năng do người lái điều khiển như cửa sổ điện và khóa cửa Tốc độ truyền cho GMLAN tốc độ thấp là 33.300 bps.
Cách thiết kế giao diện người dùng (UI)
3.6.1 Phông chữ và kích thước
-Kích thước theo đơn vị: pixel (px)
Hình 3 25: Bố cục Layout 3.6.3 Background của ứng dụng Home
Hình 3 26: Backgruond ứng dụng Home
Area 3.6.5 Vùng Status Bar Area
Area 3.6.6 Giao diện các ứng dụng cơ bản
Hình 3 29: Giao diện ứng dụng Map
Hình 3 30: Giao diện ứng dụng Climate Controller
Hình 3 31: Giao diện ứng dụng Media Player
- Giao diện trạng thái vùng Status Bar
Hình 3 32: Giao diện trạng thái vùng Status Bar
-Giao diện trạng thái vùng Application Menu
Hình 3 33: Giao diện trạng thái vùng Application
Menu - Giao diện tiện ích phần mềm khi chọn
Hình 3 34: Giao diện tiện ích phần mềm khi chọn
Cách thiết kế trải nghiệm người dùng (UX)
3.7.1 Font chữ và kích thước
3.7.2 Định nghĩa các hành động tương tác trên màn hình
Bảng 3 2: Các hành động tương tác trên màn hình
4 Nhấn phím mũi tên lên
5 Nhấn phím mũi tên xuống
6 Nhấn phím mũi tên qua trái
7 Nhấn phím mũi tên qua phải
3.7.3 Thiết kế UX màn hình Home
Hình 3 35: Giao diện bố trí màn hình ứng dụng Home Bảng 3 3: Trạng thái điều khiển ứng dụng
STT Mô tả Loại Điều kiện
1 Tiện ích Map: đi điến màn hình Nút nhấn Luôn luôn
2 Ứng dụng Climate Controller: đi Nút nhấn Luôn luôn đến màn hình ứng dụng Climate Controller
3 Ứng dụng Media Nút nhấn Luôn luôn
4 Những tiện ích phần mềm (Map, Nút nhấn Luôn luôn video, phone, radio, setting, media)
5 Chỉ tập trung vào 1 ứng dụng tại 1 Khi ứng dụng thời điểm được nhấn chuột vào hoặc nhấn nút trên bàn phím
3.7.4 Thiết kế UX ứng dụng Climate Controller
Hình 3 36: Giao diện bố trí ứng dụng Climate Controller Bảng 3 4: Trạng thái ứng dụng Climate Controller
STT Mô tả Loại Điều kiện thực hiện/hiển thị
- Nếu nhiệt độ là thấp nhất 16.5 độ C hiển thị
1 Nhiệt độ tài xế, nhiệt độ Text - Nếu nhiệt độ là cao hành khách nhất 31.5 độ C hiển thị
Mức gió: hiển thị mức gió Hình ảnh Luôn luôn
Outside: Hiển thị nhiệt độ Text Luôn luôn
4 Hiển thị hướng gió từ quạt Hình ảnh Luôn luôn
5,6 AUTO/SYNC Text Trạng thái: ON/OFF
3.7.5 Thiết kế UX Media Player
Hình 3 37: Giao diện bố trí ứng dụng Media Player Bảng 3 5: Trạng thái ứng dụng Media Player
STT Mô tả Loại Điều kiện thực hiện/hiển thị
1 USB music: Hiển thị nguồn Text Luôn luôn media
2 Cover art: Hiển thị album bài hát Text Luôn luôn
3 Artist name: Hiển thị tên ca sĩ Text Luôn luôn
4 Song name: Hiển thị tên bài hát Text Luôn luôn
5 Thanh progress: Hiển thị thời Hình ảnh Luôn luôn gian phát của bài nhạc
3.7.6 Thiết kế UX danh sách các tiện ích phần mềm
Hình 3 38: Giao diện bố trí danh sách tiện ích phần mềm
Bảng 3 6: Tiện ích phần mềm
STT Mô tả Loại Điều kiện thực hiện/hiển thị
1 Scroll bar Hình ảnh Khi có hơn 6 ứng dụng
2 App icon Hình ảnh Luôn luôn hiển thị khi có thay đổi về vị trí
3 App icon: Hidden app Hình ảnh Luôn luôn
3.7.7 Ngôn ngữ mô hình hóa UML
- Kéo thanh Scroll Bar sang trái sang phải
Hình 3 41: Kéo thanh Scroll Bar sang trái sang phải
- Thay đổi vị trí của App icon
Hình 3 42: Thay đổi vị trí của App icon
- Sử dụng phím mũi tên để chuyển hướng tập trung trên màn hình Home
Hình 3 43: Sử dụng phím mũi tên để chuyển hướng tập trung
- Sử dụng phím tắt để mở ứng dụng
Hình 3 44: Sử dụng phím M dể mở ứng dụng Map
Hình 3 45: Sử dụng phím C để mở ứng dụng Climate Controller
Hình 3 46: Sử dụng phím P để mở ứng dụng Media Player
THIẾT KẾ KIẾN TRÚC CODE PHẦN MỀM ỨNG DỤNG HOME
Sơ đồ tổng quan của ứng dụng
Hình 4 1: Sơ đồ tổng quan ứng dụng
- View (qml): Đây là nơi để quản lý, hiển thị dữ liệu cho người dùng Các component được xây dựng bằng qml và các resources của việc xây dựng, thiết kế màn hình ứng dụng.
- Model (C++): Là nơi xây dựng dữ liệu cho việc quản lý trạng thái của giao diện từ C++, đây cũng là nơi thể hiện các dữ liệu cho việc xây dựng trạng thái của màn hình ứng dụng.
- Controller (C++): Đây là phần xử lý điều khiển chương trình, và chịu trách nhiệm kết nối với các services thứ 3 (cụ thể ở đây là Climate Services).
- Kiến trúc xây dựng cho trương trình được xây dựng dựa vào kiến trúc ModelView.
Hình 4 2: Kiến trúc Model View
- Data: xml chứa thông tin các ứng dụng có trong hệ thống.
- Model: Các class lưu trữ danh sách ứng dụng đọc từ file xml.
- View: qml hiển thị danh sách ứng dụng.
Các thành phần tổ chức code
1 Project file pro có chức năng chứa các thư viện và quản lý tổng thể ứng dụng. File pro này được xây dựng bằng CMake.
2 Thư mục App chứa các tài nguyên như source code, qml code của các app trong hệ thống IVI cụ thể là Climate, Instagram, Map, Media, Phone, Radio, Setting, Video.
3 Thư mục Dbus chứa file xml định nghĩa thông tin Dbus.
4 Thư mục Source chứ file C++ xây dựng dữ liệu cho việc quản lý trạng thái của giao diện, đây cũng là nơi thể hiện các dữ liệu cho việc xây dựng trạng thái của màn hình ứng dụng.
4 Thư mục Img chứa nguồn hình ảnh của ứng dụng Home.
5 Thư mục Qml chứa các file qml của ứng dụng Home.
6 Thư mục Simulator_Source chứa các file source code, qml và xml của phần mềm mô phỏng Climate Controller.
Hình 4 3: Các thành phần tổ chức code ứng dụng Home
Hình 4 4: Các thành phần tổ chức code trong thư mục InputData để mô phỏng điều khiển Climate Controller
Các Class lập trình hướng đối tượng OOP được sử dụng trong ứng dụng Home
Bảng 4 1: Thuộc tính Class PlaylistModel
Property Type Description m_data Qlist Chứa metadata của Song
Bảng 4 2: Phương thức Class PlaylistModel
Function Description Input Output addSong Thêm bài hát vào Biến kiểu
Model Song data Dùng để giao tiếp 2 biến kiểu là QVariant data với Model QmodelIdenx và int rowCount Trả lại số lượng int phần tử của Song roleNames Định nghĩa vai trò roles cho enums
Bảng 4 3: Thuộc tính Class ApplicationItem
Property Type Description m_title Qstring Chứa tiêu đề của ứng dụng m_url Qstring Chứa đường dẫn url của ứng dụng m_iconpath Qstring Chứa iconPath của ứng dụng
Bảng 4 4: Phương thức Class ApplicationItem
Function Description Input Output title Trả về tiêu đề của ứng Qstring dụng url Trả về đường dẫn url QString của ứng dụng iconPath Trả về đường dẫn của QString iconPath
Bảng 4 5: Thuộc tính Class ApplicationModel
Property Type Description m_data Qlist Chứa metadata của một ứng dụng
Bảng 4 6: Phương thức Class ApplicationModel
Function Description Input Output addApplication Thêm ứng dụng vào Model data Dùng để giao tiếp 2 biến kiểu là QVariant data với Model QmodelIdenx và int rowCount Trả lại số lượng int phần tử của ApplicationItem roleNames Định nghĩa vai trò roles cho enums getModel Lấy lớp ApplicationIt
ApplicationItem em từ Model writeData Đọc data trong QString file xml
Property Type Description m_title QString Chứa tiêu đề của ứng dụng m_singer QString Chứa tên ca sĩ m_source QString Chứa danh mục bài hát m_albumArt QString Chứa danh mục hình ảnh album bài hát
Function Description Input Output title Trả về tiêu đề của app QString singer Trả về tên ca sĩ QString source Trả về danh mục bài hát QString album_Art Trả về danh mục hình QString ảnh album bài hát
Property Type Description m_XmlDoc QdomDocument Chứa data của ứng dụng
ReadXmlFile Kiểm tra nếu file có thể Đường dẫn bool được đọc của file
PaserXml Trích xuất data và thêm Application vào ApplicationModel Model
Property Type Description document QDomDocument Chứa data của ứng dụng root QDomElement Tạo Element
APPLICATION m_path QString path app QDomElement document.createElement
PaserList() Kiểm tra nếu file có Đường dẫn bool thể được đọc của file writeXmlFile() Viết file Xml Application String
Model saveModelData(i nt index, QString Lưu data vào title, QString url, document
QString icon) clearFile(): void Xóa data trong document
Property Type Description m_player QMediaPlayer Điều khiển Media
Player m_playlist QMediaPlaylist Quản lý danh sách bài hát m_playlistModel PlaylistModel Data model
Function Description Input Output addToPlaylist Thêm bài hát vào Qlist
Playlist open Trích xuất url getTimeInfo Trả về thời gian thanh qint64 QString process bar chạy getAlbumArt Trích xuất data để lấy hình ảnh album từ bài hát
Bảng 4 15: Thuộc tính Climate Model
Property Type Description m_climate local::Climate Chứa data của app
Bảng 4 16: Phương thức Climate Model
GetDriverTem Trả về thông tin nhiệt double perature độ ghế tài xế
GetPassengerT Trả về thông tin nhiệt double emperature độ ghế hành khách
GetOutsideTe Trả về thông tin nhiệt double mperature độ bên ngoài môi trường
GetFanLevel Trả về tốc độ gió int
GetDriverWin Trả về hướng gió ghế int dMode tài xế
GetPassenger Trả về thông tin nhiệt int
WindMode độ ghế hành khách
GetAutoMode Bật chế độ ON/OFF int của Auto Mode
GetSyncMode Bật chế độ ON/OFF int của Sync Mode
Thiết kế sơ đồ quy trình ứng dụng Home
4.4.1 Quy trình xử lý khi khởi động ứng dụng Home
Hình 4 5: Quy trình xử lý khi khởi động ứng dụng Home Để khởi tạo ứng dụng Home có các bước sau đây:
B1: Tạo đối tượng engine của QqmlApplicationEngine
B2: Tạo đối tượng appsModel của ApplicationsModel
B3: Tạo đối tượng xmlReader của xmlReader với giá trị truyền là đường dẫn đến tệp xml và đối tượng appsModel
B5: Paser thông tin từ file xml đến đối tượng ApplicationsModel
B6: Binding appsModel đến Qml bằng cách thiết lập ContextProperty
B7: Khởi động engine Qml bằng cách load đường dẫn url từ file main qml
4.4.2 Quy trình xử lý khi kết nối Dbus để điều khiển Climate Controller
Hình 4 6: Quy trình xử lý khi kết nối Dbus để điều khiển Climate Controller
KẾT QUẢ THIẾT KẾ ỨNG DỤNG HOME
Sau khi đã hoàn thành thiết kế giao diện cũng như kiến trúc tổ chức Code cho ứng dụng thì ứng dụng sẽ có giao diện như sau:
Hình 5 1: Giao diện tổng quan ứng dụng Home
Hình 5 2: Giao diện ứng dụng Media Player
Hình 5 3: Giao diện ứng dụng Climate Controller
Hình 5 4: Phần mềm mô phỏng Climate Controller Simulator
Hình 5 5: Giao diện ứng dụng Home sau khi đã thay đổi vị trí các tiện ích phần mềm
