拍摄和上传混合现实照片

在本文中,我们将创建一个应用,此应用可以拍摄混合现实会话照片并将其上传到 OneDrive 上的文件夹。 在此示例中,我们将使用 在 MR 中查看 控件,但也可以使用 在 MR 中查看形状度量相机 控件。

我们将介绍以下任务:

  • 添加 3D 对象 控件以查看和处理示例三维对象
  • 3D 对象 控件连接到 在 MR 中查看 控件,以查看现实世界中的三维对象
  • 添加库控件以查看使用 在 MR 中查看 控件拍摄的照片
  • 使用 Microsoft Power Automate 流将照片上载到 OneDrive
  • 将混合现实中捕获的照片上载到 Dataverse

先决条件

  • 创建空白画布应用
  • 在 OneDrive 上创建一个称为 MRPhotos 的文件夹。 您将使用此文件夹存储上传的照片。

提示

混合现实 (MR) 控件在光线充足、表面平坦的环境中效果最佳。 在支持 LIDAR 的设备上进行跟踪更好。

添加按钮以在混合现实中拍摄 3D 对象的照片

此示例包括三个部分。 首先,我们将添加一个按钮,此按钮允许用户在混合现实体验中拍摄 3D 对象的照片。

插入 3D 对象 控件

Power Apps Studio 中让您的应用打开以进行编辑

  1. 打开插入选项卡并展开媒体

  2. 选择 3D 对象 将三维对象放在应用屏幕上。 将此控件拖到屏幕以更精确地放置它。

    此控件附带一个透明立方体形状。 如果愿意,请更改控件的 Source 属性以加载其他 3D 模型。 在此示例中,我们将使用 URL https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb

    Microsoft Power Apps Studio 中正在构建的 3D 对象 控件的屏幕截图,一起显示的还有其 Source 属性。

插入和连接 在 MR 中查看 控件

  1. 打开插入选项卡并展开混合现实

  2. 选择 在 MR 中查看 以将此控件放在应用屏幕中,或将此控件拖到屏幕上以更精确地放置。

  3. 将此控件的 Source 属性更改为 3DObject1.Source。 (3DObject1 是我们以前添加的 3D 对象 控件的名称。)此表达式指示 在 MR 中查看 控件在设备相机源上覆盖 3D 模型。

    Microsoft Power Apps Studio 中正在构建的 在 MR 中查看 控件的屏幕截图,一起显示的还有其 Source 属性。

  4. 保存并发布应用程序 ,并在 您的移动设备上运行它

  5. 选择在混合现实中查看以在混合现实中查看 3D 对象。 选择相机图标以拍摄 MR 视图的照片。

接下来,我们将添加一个库,以便用户可以查看他们拍摄的照片。

  1. 再次编辑您的应用。 打开插入选项卡,将 Vertical gallery 控件放在屏幕上。

  2. 将控件的 Items 属性更改为 ViewInMR1.Photos。 (ViewInMR1 是我们之前添加的 在 MR 中查看 控件的名称。)

  3. 或者,将库的 Layout 属性更改为图像和标题

    Microsoft Power Apps Studio 中正在构建的垂直库的屏幕截图,一起显示的还有其 Items 和 Layout 属性。

  4. 预览应用并选择在混合现实中查看以生成示例照片。 库中填充了示例图片。

    画布应用的屏幕截图,其中显示了 3D 模型和库中模型的照片。

备注

如果用户退出 MR 视图以查看库,然后再次进入 MR 视图并拍摄更多照片,新照片将替换之前拍摄的照片。

为了使库中的照片更易于查看,您可以添加在用户选择缩略图时显示的全尺寸覆盖层。

  1. 再次编辑您的应用。 打开插入选项卡并展开媒体

  2. 选择图像以将图像控件放在屏幕上。 移动此控件,并根据您希望在选择缩略图图像时显示较大照片的方式调整此控件的大小。

    Microsoft Power Apps Studio 中正在构建的图像控件的屏幕截图。

  3. 按以下方式更改图像控件的属性: | 属性 | 价值 | | - | - | | OnSelect | UpdateContext({vVisibleImageZoom:false}) | | 图像 | Gallery1.Selected.Image2(假设库控件是 Gallery1,第一个缩略图图像是 Image2) | Visible | vVisibleImageZoom

  4. 选择库控件中的第一个缩略图图像。 将其 OnSelect 属性更改为 UpdateContext({vVisibleImageZoom:true})

    Microsoft Power Apps Studio 内库中缩略图图像的屏幕截图,一起显示的还有其 OnSelect 属性。

  5. 保存并发布应用程序 ,并在 您的移动设备上运行它

  6. 选择在混合现实中查看,然后选择相机图标拍照。 选择屏幕顶部的返回箭头以退出 MR 视图。

  7. 选择库中的缩略图以显示较大版本的照片。 选择图像以隐藏它。

使用 Power Automate 流将照片上传到 OneDrive

最后,我们将使用 Power Automate 窗格创建一个工作流。 工作流将应用中的照片上传到 OneDrive 上名为 MRPhotos 的文件夹。

在 Power Automate 中创建流

  1. 编辑您的应用。 在应用创作菜单上,选择 Power Automate > 创建新流

  2. 搜索并选择 Power Apps 按钮模板。

    Power Automate 模板页面的屏幕截图,其中选择了 Power Apps 按钮模板。

  3. 创建流窗口中,选择在高级模式下编辑

  4. 选择窗口顶部的 Power Apps 按钮,然后为您的流程输入一个新名称。 在此示例中,我们将此流命名为上传 MR 照片

    Power Automate 编辑窗口的屏幕截图,其中突出显示了工作流名称。

  5. 选择窗口顶部的 Power Apps 按钮,然后为您的流输入一个新名称。 在此示例中,我们将此流命名为上传 MR 照片。

    Power Automate 编辑窗口的屏幕截图,其中选择了要删除的 PowerApps 步骤。

  6. 搜索 PowerApps (V2) 并选择 PowerApps (V2) 触发器。

    Power Automate 编辑窗口的屏幕截图,其中选择了 PowerApps (v2) 触发器。

  7. 选择添加输入,然后选择文件

  8. 将标签文件内容更改为图像

    Power Automate 编辑窗口的屏幕截图,其中文件输入标签已更改为图像。

  9. 选择新建步骤。 搜索 OneDrive 创建文件,然后选择创建文件操作。

    Power Automate 编辑窗口的屏幕截图,其中选择了 OneDrive 创建文件操作。

  10. 文件夹路径中,选择文件夹图标,然后导航到之前创建的 MRPhotos 文件夹。

  11. 文件名中,输入 @{triggerBody()?['file']?['name']}(您的文本会更改为“file.name”。)

  12. 文件内容中,输入 @{triggerBody()['file']['contentBytes']}(您的文本会更改为“图像”。)

  13. 保存流。

完成的流应如下所示:

Power Automate 编辑窗口的屏幕截图,其中显示了完成的工作流。

将工作流连接到应用中的按钮

  1. 在 Power Apps Studio 中返回到您的应用。 您的流现在列在可用流下面。

    Power Apps Studio 数据窗格的屏幕截图,其中显示了新流。

  2. 打开插入选项卡并选择按钮。 将按钮控件放在屏幕上并根据需要调整其大小。

  3. 将按钮控件的 Text 属性更改为上传照片

  4. 在 Power Apps 窗口顶部的编辑栏中,选择 OnSelect 属性。 选择操作 > Power Automate > 上传 MR 照片

    Power Apps Studio 中正在构建的按钮控件的屏幕截图,其中向控件的 OnSelect 属性添加了一个流。

    按钮控件的 OnSelect 属性更改为 UploadMRPhoto.Run(

  5. 要上传最后拍摄的照片,请在左括号后粘贴以下代码:{file:{name:GUID() & ".png", contentBytes:Last(ViewInMR1.Photos).ImageURI}})

    Power Apps Studio 编辑栏中按钮控件的 OnSelect 属性的屏幕截图,其中上传了上次拍摄的照片。

    如果您将按钮控件放在库中,请改为粘贴以下代码:{file: {name:GUID() & ".png", contentBytes:ThisItem.ImageURI}})

    此按钮在库中时 Power Apps Studio 编辑栏中按钮控件的 OnSelect 属性的屏幕截图。

    要让按钮上传所有拍摄的照片,请删除 UploadMRPhoto.Run( 并粘贴以下代码:ForAll(ViewInMR1.Photos, UploadMRPhoto.Run({file:{name:GUID() & ".png", contentBytes:ImageURI}}))

    Power Apps Studio 编辑栏中按钮控件的 OnSelect 属性的屏幕截图,其中上传了所有拍摄的照片。

  6. 预览应用并选择在混合现实中查看,然后选择上传照片。 检查 OneDrive 上的 MRPhotos 文件夹并确认已上传示例照片。

向您的应用添加脱机功能

即使网络连接受限或没有网络连接,您也可以通过 SaveDataLoadData 函数 来使用您的应用。

将混合现实中捕获的照片上载到 Dataverse

您可以通过图像数据类型列将照片添加到 Dataverse 表。 Dataverse 中的图像列有两个必需字段 - 完全和值,这两个字段可以设置为 MR 控件的 ImageURI 输出。

例如,如果您想要将 Markup in MR 控件捕获的第一张照片上载到名为“图像”的 Dataverse 列:

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

另请参见

备注

您能告诉我们您的文档语言首选项吗? 进行简短调查。(请注意,此调查是英文版调查)

此调查大约需要七分钟。 不会收集个人数据(隐私声明)。