Freigeben über

Mixed Reality-Fotos machen und hochladen

  • Artikel

In diesem Artikel erstellen wir eine App, mit der Fotos einer Mixed Reality-Sitzung aufgenommen und in einen Ordner in OneDrive hochgeladen werden können. Wir verwenden das In MR anzeigen Steuerelement in diesem Beispiel, aber die Steuerelemente Form in MR anzeigen und Messkamera würden auch funktionieren.

Folgende Aufgaben übernehmen wir:

  • Hinzufügen eines 3D-Objekt-Steuerelements zum Anzeigen und Bearbeiten eines Beispiel-3D-Objekts
  • Verbinden des Steuerelements 3D-Objekt zu einem Steuerelement In MR anzeigen, damit Sie das 3D-Objekt der realen Welt anzeigen können.
  • Hinzufügen eines Katalog-Steuerelements zum Anzeigen von Fotos, die mit In MR anzeigen-Steuerelement aufgenommen wurden
  • Hochladen von Fotos auf OneDrive mit einem Microsoft Power Automate Flow
  • Aktualisieren von in Mixed Reality aufgenommenen Fotos auf Dataverse

Anforderungen

Tipp

Die Mixed-Reality-Steuerelemente (MR) funktioniert am besten in gut beleuchteten Umgebungen mit flachen Oberflächen. Das Tracking ist auf LIDAR-fähigen Geräten besser.

Fügen Sie eine Schaltfläche hinzu, um ein Foto eines 3D-Objekts in mixed reality aufzunehmen

Dieses Beispiel besteht aus drei Teilen. Zuerst fügen wir eine Schaltfläche hinzu, mit der Benutzer ein Foto eines 3D-Objekts in einem Mixed Reality-Erlebnis aufnehmen können.

Fügen Sie ein Steuerelement 3D-Objekt ein.

Mit einer geöffneten App zum Bearbeiten in Power Apps Studio:

  1. Öffnen Sie die Einfügung-Registerkarte und erweitern Sie Medien.

  2. Wählen Sie 3D-Objekt, um ein 3D-Objekt auf dem App-Bildschirm zu platzieren. Ziehen Sie das Steuerelement auf den Bildschirm, um es genauer zu positionieren.

    Das Steuerelement hat eine transparente Würfelform. Wenn Sie möchten, ändern Sie die Source-Eigenschaft des Steuerelement, um ein anderes 3D-Modell zu laden. In diesem Beispiel verwenden wir die URL https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb.

    Ein Screenshot eines „3D-Objekt“-Steuerelements im Aufbau in Microsoft Power Apps Studio mit angezeigter Source-Eigenschaft.

Fügen Sie ein In MR anzeigen-Steuerelement ein und verbinden Sie es

  1. Öffnen Sie die Einfügung-Registerkarte und erweitern Sie Mixed Reality.

  2. Wählen Sie In MR anzeigen im App-Bildschirm aus, oder ziehen Sie es, um es an einer beliebigen Stelle präzise auf dem Bildschirm zu positionieren.

  3. Ändern Sie die Source-Eigenschaft des Steuerelements in 3DObject1.Source. (3DObject1 ist der Name des 3D-Objekt-Steuerelements, das wir zuvor hinzugefügt haben.) Dieser Ausdruck leitet das In MR anzeigen Steuerelement zum Überlagern des 3D-Modells auf dem Gerätekamera-Feed.

    Ein Screenshot eines „In MR anzeigen“-Steuerelements im Aufbau in Microsoft Power Apps Studio mit angezeigter Source-Eigenschaft.

  4. Speichern und veröffentlichen Sie die App und führen Sie sie auf Ihrem Mobilgerät aus.

  5. Wählen Sie In MR anzeigen, um das 3D-Objekt in mixed reality anzuzeigen. Wählen Sie das Kamerasymbol, um ein Foto der MR-Ansicht aufzunehmen.

Als Nächstes fügen wir eine Galerie hinzu, damit Benutzer die von ihnen aufgenommenen Fotos anzeigen können.

  1. Bearbeiten Sie Ihre App erneut. Öffnen Sie die Einfügung-Registerkarte und platzieren Sie ein Vertical gallery-Steuerelement auf dem Bildschirm.

  2. Ändern Sie die Items-Eigenschaft des Steuerelements in ViewInMR1.Photos. (ViewInMR1 ist der Name des In MR anzeigen-Steuerelement, das wir zuvor hinzugefügt haben.)

  3. Ändern Sie optional die Layout-Eigenschaft der Galerie in Bild und Titel.

    Ein Screenshot einer im Bau befindlichen vertikalen Galerie in Microsoft Power Apps Studio, angezeigt mit seinen Items- und Layout-Eigenschaften.

  4. Vorschau der App und Auswahl In MR anzeigen, um ein Beispielfoto zu erstellen. Die Galerie wird mit einem Beispielbild gefüllt.

    Ein Screenshot einer Canvas-App, die ein 3D-Modell und ein Foto des Modells in einem Katalog zeigt.

Hinweis

Wenn Benutzer die MR-Ansicht verlassen, um den Katalog anzuzeigen, rufen Sie die MR-Ansicht erneut auf und nehmen Sie weitere Fotos auf und ersetzen die neuen Fotos, die zuvor aufgenommen wurden.

Um die Fotos in der Galerie besser sichtbar zu machen, können Sie ein Overlay in voller Größe hinzufügen, das angezeigt wird, wenn der Benutzer ein Miniaturbild auswählt.

  1. Bearbeiten Sie Ihre App erneut. Öffnen Sie die Einfügung-Registerkarte und erweitern Sie Medien.

  2. Wählen Bild aus, um ein Bildsteuerelement auf dem Bildschirm zu platzieren. Verschieben und skalieren Sie es entsprechend, wie das größere Foto angezeigt werden soll, wenn ein Miniaturbild ausgewählt wird.

    Ein Screenshot eines im Aufbau befindlichen Bildsteuerelements in Microsoft Power Apps Studio.

  3. Ändern Sie die folgenden Eigenschaften für das Bild-Steuerelement: | Eigenschaft | Wert | | - | - | | OnSelect | UpdateContext({vVisibleImageZoom:false}) | | Image | Gallery1.Selected.Image2 (vorausgesetzt, das Katalog-Steuerelement ist Gallery1 und das erste Vorschaubild ist Image2) | Visible | vVisibleImageZoom

  4. Wählen Sie im Katalog-Steuerelement die erste Miniaturansicht aus. Ändern Sie die OnSelect-Eigenschaft in UpdateContext({vVisibleImageZoom:true}).

    Ein Screenshot eines Miniaturbilds in einem Katalog in Microsoft Power Apps Studio, dargestellt mit seiner OnSelect-Eigenschaft.

  5. Speichern und veröffentlichen Sie die App und führen Sie sie auf Ihrem Mobilgerät aus.

  6. Wählen Sie In MR anzeigen und dann das Kamera-Symbol, um ein Foto aufzunehmen. Wählen Sie den Zurück-Pfeil oben auf dem Bildschirm, um die MR-Ansicht zu verlassen.

  7. Wählen Sie das Miniaturbild im Katalog aus, um eine größere Version des Fotos anzuzeigen. Wählen Sie das Bild aus, um es auszublenden.

Hochladen von Fotos auf OneDrive mit einem Power Automate-Flow

Zuletzt erstellen wir einen Workflow mithilfe des Power Automate Bereichs. Der Workflow lädt Fotos aus der App in einen Ordner mit dem Namen MRPhotos in OneDrive hoch.

Erzeugen Sie einen Flow in Power Automate

  1. Bearbeiten Sie Ihre App. Wählen Sie im App-Authoring-Menü Power Automate > Neuen Ablauf erstellen.

  2. Suchen Sie die gewünschte Power Apps-Schaltflächenvorlage, und wählen Sie sie aus.

    Ein Screenshot der Power Automate-Vorlagenseite, mit der Power Apps-Schaltflächenvorlage ausgewählt.

  3. Wählen Sie im Fenster Erstellen Sie Ihren Ablauf die Option Im erweiterten Modus bearbeiten.

  4. Wählen Sie Power Apps-Schaltfläche oben im Fenster und geben Sie einen neuen Namen für Ihren Flow ein. In diesem Beispiel benennen wir den Flow MR-Foto hochladen.

    Ein Screenshot des Power Automate-Bearbeitungsfensters mit hervorgehobenem Workflow-Namen.

  5. Wählen Sie Power Apps-Schaltfläche oben im Fenster und geben Sie einen neuen Namen für Ihren Flow ein. In diesem Beispiel benennen wir den Flow MR-Foto hochladen.

    Ein Screenshot des Power Automate-Bearbeitungsfensters, mit dem PowerApps-Schritt zum Löschen ausgewählt.

  6. Suchen Sie nach PowerApps (V2) und wählen Sie den PowerApps (V2)-Trigger aus.

    Ein Screenshot des Power Automate-Bearbeitungsfensters mit ausgewähltem PowerApps (v2)-Trigger.

  7. Wählen Sie Eingabe hinzufügen und Datei aus.

  8. Ändern Sie die Beschriftung Dateiinhalt in Bild.

    Ein Screenshot des Power Automate-Bearbeitungsfensters, wobei die Eingabebezeichnung Datei in Bild geändert wurde.

  9. Wählen Sie Neuer Schritt aus. Suchen Sie nach OneDrive Datei erstellen, und wählen Sie die Aktion Datei erstellen aus.

    Ein Screenshot des Power Automate-Bearbeitungsfensters, mit ausgewähltem Schritt OneDrive Datei erstellen.

  10. Wählen Sie in Ordnerpfad das Ordnersymbol aus und navigieren Sie zum zuvor erstellten Ordner MRPhotos.

  11. Geben Sie in Dateiname @{triggerBody()?['file']?['name']} ein (Ihr Text ändert sich zu „file.name.“)

  12. Geben Sie in Dateiinhalt @{triggerBody()['file']['contentBytes']} ein (Ihr Text ändert sich zu „Image.“)

  13. Den Flow speichern.

Der komplette Flow sieht möglicherweise wie folgt aus:

Ein Screenshot des Power Automate-Bearbeitungsfensters mit angezeigtem abgeschlossenen Workflow.

Verbinden Sie den Workflow mit einer Schaltfläche in Ihrer App

  1. Kehren Sie zu Ihrer App in Power Apps Studio zurück. Ihr Flow wird nun unter Verfügbare Flows aufgelistet.

    Ein Screenshot des Power Apps Studio-Datenbereichs mit angezeigtem neuen Flow.

  2. Öffnen Sie die Registerkarte Einfügen und wählen Sie dann Schaltfläche. Platzieren Sie das Schaltflächen-Steuerelement auf dem Bildschirm und ändern Sie die Größe nach Bedarf.

  3. Ändern Sie die Text-Eigenschaft des Steuerelements in Fotos hochladen.

  4. In der Formelleiste oben im Power Apps Fenster wählen Sie die OnSelect-Eigenschaft. Wählen Sie Aktion > Power Automate > MR-Foto hochladen.

    Ein Screenshot eines im Bau befindlichen Schaltflächensteuerelements in Power Apps Studio, wobei der OnSelect-Eigenschaft des Steuerelements ein Flow hinzugefügt wurde.

    Die OnSelect-Eigenschaft des Schaltflächensteuerelements wird in UploadMRPhoto.Run( geändert.

  5. Um das zuletzt aufgenommene Foto hochzuladen, fügen Sie den folgenden Code nach der öffnenden Klammer ein: {file:{name:GUID() & ".png", contentBytes:Last(ViewInMR1.Photos).ImageURI}})

    Ein Screenshot der OnSelect-Eigenschaft eines Schaltflächensteuerelements in der Power Apps Studio Formelleiste, die das zuletzt aufgenommene Foto hochlädt.

    Wenn Sie das Schaltflächen-Steuerelement im Katalog platziert haben, fügen Sie stattdessen den folgenden Code ein: {file: {name:GUID() & ".png", contentBytes:ThisItem.ImageURI}})

    Ein Screenshot der OnSelect-Eigenschaft eines Schaltflächensteuerelements in der Power Apps Studio Formelleiste, die das zuletzt aufgenommene Foto hochlädt.

    Damit die Schaltfläche alle aufgenommenen Fotos hochlädt, löschen Sie UploadMRPhoto.Run( und fügen Sie den folgenden Code ein: ForAll(ViewInMR1.Photos, UploadMRPhoto.Run({file:{name:GUID() & ".png", contentBytes:ImageURI}}))

    Ein Screenshot der OnSelect-Eigenschaft eines Schaltflächensteuerelements in der Power Apps Studio Formelleiste, die das alle aufgenommenen Fotos hochlädt.

  6. Zeigen Sie die Vorschau der App an und wählen Sie In MR anzeigen, und wählen Sie dann Fotos hochladen aus. Überprüfen Sie den MRPhotos-Ordner in OneDrive und bestätigen Sie, dass das Beispielfoto hochgeladen wurde.

Fügen Sie Ihrer App Offline-Fähigkeit hinzu

Sie können Ihre App auch dann mit den Funktionen SaveData und LoadData verwenden, wenn Sie nur eine eingeschränkte oder keine Netzwerkverbindung haben.

Hochladen von in Mixed Reality aufgenommenen Fotos auf Dataverse

Sie können Fotos zu Dataverse-Tabellen über eine Bilddatentyp-Spalte hinzufügen. Bildspalten in Dataverse haben zwei erforderliche Felder – Full und Value – die auf die ImageURI-Ausgabe der MR-Steuerelemente gesetzt werden können.

Wenn Sie beispielsweise das erste von Markup aufgenommene Foto im MR-Steuerelement in eine Dataverse-Spalte namens Bild hochladen möchten:

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

Siehe auch

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).