CHƯƠNG 5 : TẠO GIAO DIỆN NGƯỜI DÙNG
5.3. Các trang của giao diện
Để người dùng hiểu hơn về hệ thống gương tương tác và dễ dàng thao tác, một giao diện người dùng được tạo ra, bao gồm:
- Information : Cung cấp thông tin về cách thức hoạt động và công dụng của hệ thống gương tương tác thông minh.
- Show: Trang này hiện thị ảnh các khớp xương của cơ thể và hình ảnh point cloud (đám mây điểm) của người dùng.
- Interaction: Tại đây khách hàng sẽ tương tác trực tiếp với gương để lựa chọn sản phẩm phù hợp.
5.3.1. Information
Như khi gặp một món đồ mới, việc đầu tiên là tìm hiểu xem nó là cái gì, được sử dụng để làm gì và cách thức hoạt động ra sao. Trang information này cũng vậy, trang cung cấp thông tin cơ bản về chiếc gương tương tác thông minh trước mắt của khách hàng như: tác dụng của chiếc gương và làm thế nào để người dùng có thể tương tác với hệ thống.
88
Hình 5-2 Trang information
5.3.2. Show
Hiển thị các kết quả đã thực hiện trong được trong quá trình thực hiện đề tài, tiêu biểu là ảnh skeleton 3D và ảnh pointcloud thu được. Giao diện được xây dựng dựa trên html và nhận dữ liệu từ sever, giúp gương có thể tương tác online, gửi và lưu trữ dữ liệu online thông qua mạng nội bộ hoặc internet.
Hệ thống sẽ xử lý những dữ liệu thu được từ camera sau đó hiển thị lên hình ảnh 18 khớp xương trên cơ thể họ, bên cạnh đó là hình ảnh point cloud qua q trình xử lý ghép hai hình ảnh thu được từ hai camera. Những hình ảnh này cũng giúp cho người dùng hiểu rõ hơn hệ thống gương tương tác hoạt động ra sao và có đang thu phát hình ảnh theo thời gian thực không.
Để hiển thị hình ảnh liên tục lên giao diện của website có nhiều cách, nhưng để tương tác với hệ thống gương tương tác thì Flask là thư viện được tin sử dụng trong đồ án này.
Khi hệ thống mở, Flask sẽ gọi mở tệp html, chỉ cần truy cập vào địa chỉ sever của Flask để mở giao diện.
89 Ở HTML, vùng hiển thị ảnh sẽ được quy định trước cũng như kích thước của nó. Tại đây, nguồn của ảnh sẽ được gọi từ nguồn của Flask và đưa lên liên tục.
Hình 5-3 Trang show skeleton và point cloud
5.3.3. Interaction
Giao diện tương tác với hệ thống được chia làm hai, một là code chạy máy ảnh, thu thập và xử lý dữ liệu, hai là code chạy sever để hiển thị các html.
Phần code chạy máy ảnh sẽ nhận diện người bước vào phịng thơng qua nhận diện ID và 18 khớp của cơ thể.
Nhận diện được cơ thể người thì hệ thơng sẽ gửi tín hiệu hiển thị cho hệ thống, thông báo cho người dùng biết hệ thơng đang tính tốn kích thước cơ thể, yêu cầu người dùng đứng n để có kết quả chính xác.
Khi xác định được kích thước cơ thể người dùng đã đứng yên, hệ thống sẽ đưa thông tin lưu vào database và đồng thời hiển thị kết quả số đo ba vòng cho người dùng. Tiếp theo, quần áo sẽ được hiển thị cho người dùng xem. Người dùng dùng tay để gạt trái phải lên xuống để lựa chọn quần áo. Khi người dùng ra lệnh, hệ thống sẽ phát hiện và đưa giá trị động tác vào trong database, javasrcipt sẽ lấy dữ liệu từ đó mà bắt đầu điều chỉnh hình ảnh ứng với lệnh của người dùng.
90
Hình 5-4 Database
Hình 5-5 Trang tương tác
91