Chụp và tải lên ảnh thực tế kết hợp

Bài viết
04/18/2023

Trong bài viết này, chúng ta sẽ tạo một ứng dụng có thể chụp ảnh một phiên thực tế kết hợp và tải chúng lên một thư mục trên OneDrive. Chúng ta sẽ sử dụng điều khiển Xem trong MR trong ví dụ này, nhưng các điều khiển Xem hình dạng trong MR và Camera đo lường cũng sẽ hoạt động.

Chúng ta sẽ bao gồm các nhiệm vụ sau đây:

Thêm điều khiển Đối tượng 3D để xem và xử lý đối tượng 3D mẫu
Kết nối điều khiển Đối tượng 3D với một điều khiển Xem trong MR để xem đối tượng 3D trong thế giới thực
Thêm điều khiển thư viện để xem ảnh được chụp bằng điều khiển Xem trong MR
Tải các ảnh lên OneDrive với một dòng Microsoft Power Automate
Tải các ảnh được chụp trong thực tế kết hợp lên Dataverse

Điều kiện tiên quyết

Tạo một ứng dụng canvas trống.
Tạo một thư mục có tên là MRPhotos trên OneDrive. Bạn sẽ sử dụng thư mục này để lưu trữ ảnh đã tải lên của mình.

Mẹo

Các mục kiểm soát thực tế kết hợp (MR) hoạt động tốt nhất trong môi trường nhiều ánh sáng với bề mặt có kết cấu phẳng. Tính năng theo dõi hoạt động tốt hơn trên các thiết bị hỗ trợ LIDAR.

Thêm một nút để chụp ảnh đối tượng 3D trong thực tế kết hợp

Ví dụ này có ba phần. Đầu tiên, chúng ta sẽ thêm một nút cho phép người dùng chụp ảnh đối tượng 3D trong trải nghiệm thực tế kết hợp.

Chèn một điểu khiển Đối tượng 3D

Khi bạn mở ứng dụng để chỉnh sửa trong Power Apps Studio:

Mở tab Chèn và mở rộng Phương tiện.
Lựa chọn Đối tượng 3D để đặt một đối tượng 3D trên màn hình ứng dụng. Kéo điều khiển vào màn hình để định vị chính xác hơn.

Điều khiển đi kèm với một hình khối lập phương trong suốt. Nếu bạn thích, hãy thay đổi thuộc tính Nguồn của điều khiển để tải một mô hình 3D khác. Trong ví dụ này, chúng tôi sẽ sử dụng URL https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb.

Chèn và kết nối một điều khiển Xem trong MR

Mở tab Chèn và mở rộng Thực tế kết hợp.
Chọn Xem trong MR để đặt điều khiển trên màn hình ứng dụng hoặc kéo điều khiển vào màn hình để định vị chính xác hơn.
Thay đổi thuộc tính Nguồn của điều khiển thành 3DObject1.Source. (3DObject1 là tên của điều khiển Đối tượng 3D mà chúng ta đã thêm trước đó). Biểu thức này hướng dẫn điều khiển Xem trong MR tạo lớp phủ mô hình 3D trên nguồn cấp camera của thiết bị.
Lưu và xuất bản ứng dụng và chạy ứng dụng đó trên thiết bị di động của bạn.
Chọn Xem trong MR để xem đối tượng 3D trong thực tế kết hợp. Chọn biểu tượng camera để chụp ảnh dạng xem MR.

Chèn điều khiển thư viện để xem ảnh được chụp trong ứng dụng

Tiếp theo, chúng ta sẽ thêm một thư viện để người dùng có thể xem ảnh mà họ đã chụp.

Chỉnh sửa lại ứng dụng của bạn. Mở tab Chèn và đặt một điều khiển Thư viện dọc trên màn hình.
Thay đổi thuộc tính Mục của điều khiển thành ViewInMR1.Photos. (ViewInMR1 là tên của điều khiển Xem trong MR mà chúng ta đã thêm trước đó).
Tùy ý thay đổi thuộc tính Bố cục của thư viện thành Hình ảnh và tiêu đề.
Xem trước ứng dụng và chọn Xem trong MR để tạo ra một ảnh mẫu. Thư viện có một hình ảnh mẫu.

Lưu ý

Nếu người dùng thoát khỏi dạng xem MR để xem thư viện, sau đó vào lại dạng xem MR và chụp thêm ảnh, các ảnh mới sẽ thay thế ảnh họ đã chụp trước đó.

Thêm lớp phủ lớn hơn vào các hình ảnh thu nhỏ trong thư viện

Để làm cho ảnh trong thư viện dễ xem hơn, bạn có thể thêm lớp phủ kích thước đầy đủ xuất hiện khi người dùng chọn một hình ảnh thu nhỏ.

Chỉnh sửa lại ứng dụng của bạn. Mở tab Chèn và mở rộng Phương tiện.
Chọn Hình ảnh để đặt điều khiển hình ảnh trên màn hình. Di chuyển và định cỡ tùy theo cách mà bạn muốn ảnh lớn hơn xuất hiện khi hình ảnh thu nhỏ được chọn.
Thay đổi thuộc tính của điều khiển hình ảnh như sau: | Thuộc tính | Giá_trị | | - | - | | OnSelect | UpdateContext({vVisibleImageZoom:false}) | | Image | Gallery1.Selected.Image2 (giả sử điều khiển thư viện là Gallery1 và hình ảnh thu nhỏ đầu tiên là Image2) | Hiển thị | vVisibleImageZoom
Chọn hình ảnh thu nhỏ đầu tiên trong điều khiển thư viện. Thay đổi thuộc tính OnSelect thành UpdateContext({vVisibleImageZoom:true}).
Lưu và xuất bản ứng dụng và chạy ứng dụng đó trên thiết bị di động của bạn.
Chọn Xem trong MR và sau đó chọn biểu tượng camera để chụp ảnh. Chọn mũi tên quay lại ở đầu màn hình để thoát khỏi dạng xem MR.
Chọn hình thu nhỏ trong thư viện để hiển thị phiên bản lớn hơn của ảnh. Chọn hình ảnh để ẩn đi.

Tải ảnh lên OneDrive với một dòng Power Automate

Cuối cùng, chúng ta sẽ tạo một dòng công việc bằng ngăn Power Automate. Dòng công việc tải ảnh từ ứng dụng lên một thư mục có tên là MRPhotos trên OneDrive.

Tạo một dòng trong Power Automate

Chỉnh sửa ứng dụng của bạn. Trên menu tạo ứng dụng, hãy chọn Power Automate > Tạo dòng mới.
Tìm kiếm và chọn mẫu nút Power Apps.
Trong cửa sổ Tạo dòng của bạn, hãy chọn Chỉnh sửa ở chế độ nâng cao.
Chọn nút Power Apps ở đầu cửa sổ và nhập tên mới cho dòng của bạn. Trong ví dụ này, chúng ta sẽ đặt tên cho dòng là Tải lên ảnh MR.
Chọn nút Power Apps ở đầu cửa sổ và nhập tên mới cho dòng của bạn. Trong ví dụ này, chúng ta sẽ đặt tên cho dòng là Tải lên ảnh MR.
Tìm kiếm PowerApps (V2) và chọn trình kích hoạt PowerApps (V2).
Chọn Thêm một đầu vào và sau đó chọn Tệp.
Thay đổi nhãn Nội dung tệp thành Hình ảnh.
Chọn Bước mới. Tìm kiếm Tạo tệp OneDrive và chọn hành động Tạo tệp.
Trong Đường dẫn thư mục, hãy chọn biểu tượng thư mục và điều hướng đến thư mục MRPhotos mà bạn đã tạo trước đó.
Trong Tên tệp, hãy nhập @{triggerBody()?['file']?['name']} (Văn bản của bạn thay đổi thành "file.name.")
Trong Nội dung tệp, hãy nhập @{triggerBody()['file']['contentBytes']} (Văn bản của bạn thay đổi thành "Image.")
Lưu dòng của bạn.

Dòng hoàn chỉnh phải trông giống như thế này:

Ảnh chụp màn hình của cửa sổ chỉnh sửa Power Automate, với dòng công việc hoàn chỉnh được hiển thị.

Kết nối dòng công việc với một nút trong ứng dụng của bạn

Quay lại ứng dụng của bạn trong Power Apps Studio. Dòng của bạn bây giờ được liệt kê trong Các dòng có sẵn.
Mở tab Chèn và chọn Nút. Đặt nút điều khiển trên màn hình và thay đổi kích thước nếu cần.
Thay đổi thuộc tính Văn bản của điều khiển nút thành Tải lên ảnh.
Trong thanh công thức ở đầu cửa sổ Power Apps, hãy chọn thuộc tính OnSelect. Chọn Hành động > Power Automate > Tải lên ảnh MR.

Thuộc tính OnSelect của điều khiển nút thay đổi thành UploadMRPhoto.Run(.
Để tải lên ảnh cuối cùng được chụp, hãy dán mã sau đây phía sau dấu ngoặc đơn mở: {file:{name:GUID() & ".png", contentBytes: Last(ViewInMR1.Photos).ImageURI}})

Nếu bạn đã đặt điều khiển nút bên trong thư viện, thay vào đó hãy dán mã sau đây: {file: {name:GUID() & ".png", contentBytes:ThisItem.ImageURI}})

Để làm cho nút tải lên tất cả ảnh được chụp, hãy xóa UploadMRPhoto.Run( và dán mã sau đây: ForAll(ViewInMR1.Photos, UploadMRPhoto.Run({file:{name:GUID() & ".png", contentBytes:ImageURI}}))
Xem trước ứng dụng và chọn Xem trong MR và sau đó chọn Tải ảnh lên. Kiểm tra thư mục MRPhotos trên OneDrive và xác nhận rằng ảnh mẫu đã được tải lên.

Thêm khả năng ngoại tuyến vào ứng dụng của bạn

Bạn có thể sử dụng ứng dụng của mình ngay cả khi kết nối mạng bị hạn chế hoặc không có kết nối Các chức năng SaveData và LoadData.

Tải ảnh được chụp trong thực tế kết hợp lên Dataverse

Bạn có thể thêm ảnh vào bảng Dataverse thông qua cột kiểu dữ liệu Hình ảnh. Các cột hình ảnh trong Dataverse có hai trường bắt buộc - Đầy đủ và Giá trị - có thể được đặt thành đầu ra ImageURI của các điều khiển MR.

Ví dụ: nếu bạn muốn tải ảnh đầu tiên được chụp bằng điều khiển Đánh dấu trong MR lên cột Dataverse có tên là Hình ảnh:

    Image: {Full: First(MarkupInMR.Photos).ImageURI, Value: First(MarkupInMR.Photos).ImageURI}

Xem thêm