Поделиться через

Делайте и отправляйте фотографии смешанной реальности

  • Статья

В этой статье мы создадим приложение, которое может делать фотографии сеанса смешанной реальности и загружать их в папку в OneDrive. Мы будем использовать элемент управления Просмотр в СР, но элементы управления Просмотр фигуры в СР и Измерение камерой также будут работать.

Мы рассмотрим следующие задачи:

  • Добавление элемента управления Трехмерный объект для просмотра и управления образцом 3D-объекта
  • Подключение элемента управления Трехмерный объект к элементу управления Просмотр в СР, чтобы просматривать трехмерный объект в реальном мире
  • Добавление элемента управления gallery для просмотра фотографий, сделанных с помощью элемента управления Просмотр в СР
  • Отправка фотографий в OneDrive с помощью потока Microsoft Power Automate
  • Отправка фотографий, снятых в смешанной реальности, в Dataverse

Предварительные условия

Совет

Элементы управления mixed-reality (MR) лучше всего работают в хорошо освещенных средах с плоской текстурой поверхностей. Отслеживание лучше на устройствах с поддержкой LIDAR.

Добавьте кнопку, чтобы сфотографировать 3D-объект в смешанной реальности

Этот пример состоит из трех частей. Во-первых, мы добавим кнопку, которая позволит пользователям сфотографировать трехмерный объект в смешанной реальности.

Вставить элемент управления Трехмерный объект

С вашим приложением, открытым для редактирования в Power Apps Studio:

  1. Откройте вкладку Вставить и разверните Мультимедиа.

  2. Выберите 3D object для размещения 3D-объекта на экране приложения. Перетащите элемент управления на экран, чтобы точнее расположить его.

    Элемент управления имеет форму прозрачного куба. Если хотите, измените свойство Source на загрузить другую 3D-модель. В этом примере мы будем использовать URL https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb.

    Снимок экрана элемента управления Трехмерный объект в процессе разработки в Microsoft Power Apps Studio, рядом со свойством Source.

Вставьте и подключите элемент управления Просмотр в СР

  1. Откройте вкладку Вставить и разверните Смешанная реальность.

  2. Выберите Просмотр в СР, чтобы разместить элемент управления на экране приложения, или перетащите элемент управления на экран, чтобы расположить его более точно.

  3. Измените свойство Source элемента управления на 3DObject1.Source. (3DObject1 это имя элемента управления Трехмерный объект, который мы добавили ранее.) Это выражение указывает элементу управления Просмотр в СР наложить 3D-модель на изображение с камеры устройства.

    Снимок экрана элемента управления Просмотр в СР в процессе разработки в Microsoft Power Apps Studio, рядом со свойством Source.

  4. Сохраните и опубликуйте приложение и запустите его на своем мобильном устройстве.

  5. Выберите Просмотреть в СР для просмотра 3D-объекта в смешанной реальности. Выберите значок камеры, чтобы сделать снимок изображения СР.

Далее мы добавим коллекцию, чтобы пользователи могли просматривать сделанные ими фотографии.

  1. Снова отредактируйте приложение. Откройте вкладку Вставить и поместите элемент управления Vertical gallery на экран.

  2. Измените свойство Items элемента управления на ViewInMR1.Photos. (ViewInMR1 — это имя элемента управления Просмотр в СР, который мы добавили ранее.)

  3. При желании измените свойство Layout коллекции на Изображение и название.

    Снимок экрана вертикальной галереи в процессе разработки в Microsoft Power Apps Studio, рядом со свойствами Items и Layout.

  4. Сделайте предварительный просмотр приложения и выбор Просмотреть в СР для создания образца фотографии. Коллекция заполняется образцом изображения.

    Снимок экрана приложения на основе холста, в котором показана 3D-модель и фотография модели в коллекции.

Примечание

Если пользователи выйдут из режима СР, чтобы просмотреть коллекцию, а затем снова войдут в режим СР и сделают больше фотографий, новые фотографии заменят сделанные ранее.

Чтобы фотографии в галерее было легче просматривать, можно добавить полноразмерное наложение, которое появляется, когда пользователь выбирает уменьшенное изображение.

  1. Снова отредактируйте приложение. Откройте вкладку Вставить и разверните Мультимедиа.

  2. Выберите Изображение для размещения элемента управления image на экране. Переместите и измените его размер в соответствии с тем, как вы хотите, чтобы большая фотография отображалась при выборе миниатюры.

    Снимок экрана элемента управления image в процессе создания в Microsoft Power Apps Studio.

  3. Измените свойства элемента управления image следующим образом: | Свойство | Значение | | - | - | | OnSelect | UpdateContext({vVisibleImageZoom:false}) | | Image | Gallery1.Selected.Image2 (при условии, что элемент управления галереей — Gallery1 и первое миниатюрное изображение — Image2) | Visible | vVisibleImageZoom

  4. Выберите первую миниатюру в элементе управления галереей. Изменить свойство OnSelect на UpdateContext({vVisibleImageZoom:true}).

    Снимок экрана уменьшенного изображения в галерее в Microsoft Power Apps Studio со своим свойством OnSelect.

  5. Сохраните и опубликуйте приложение и запустите его на своем мобильном устройстве.

  6. Выберите Просмотреть в СР и выберите значок камеры, чтобы сделать фотографию. Нажмите стрелку назад в верхней части экрана, чтобы выйти из режима СР.

  7. Выберите миниатюру в галерее, чтобы открыть увеличенную версию фотографии. Выберите изображение, чтобы скрыть его.

Отправка фотографий в OneDrive с помощью потока Power Automate

Наконец, мы создадим рабочий поток, используя область Power Automate. Рабочий процесс отправляет фотографии из приложения в папку с именем MRPhotos в OneDrive.

Создание потока в Power Automate

  1. Отредактируйте приложение. В меню разработки приложения выберите Power Automate > Создать новый поток.

  2. Выполните поиск и выберите шаблон кнопки Power Apps.

    Снимок экрана страницы шаблона Power Automate с выбранным шаблоном кнопки Power Apps.

  3. В окне Создайте свой поток выберите Изменить в расширенном режиме.

  4. Выберите Кнопка Power Apps в верхней части окна и введите новое имя для вашего потока. В этом примере мы назовем поток Отправить фото СР.

    Снимок экрана окна редактирования Power Automate с выделенным именем рабочего процесса.

  5. Выберите кнопку Power Apps в верхней части окна и введите новое имя для вашего потока. В этом примере мы назовем поток Отправить фото СР.

    Снимок экрана окна редактирования 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']} (Ваш текст изменится на "Image.")

  13. Сохраните свой поток.

Готовый поток должен выглядеть следующим образом:

Снимок экрана окна редактирования Power Automate с выполненным рабочим потоком.

Подключите рабочий процесс к кнопке в вашем приложении

  1. Вернитесь к своему приложению в Power Apps Studio. Ваш поток теперь указан в разделе Доступные потоки.

    Снимок экрана панели данных Power Apps Studio с показанным новым потоком.

  2. Откройте вкладку Вставить и выберите Кнопка. Поместите элемент управления Кнопка на экран и измените его размер по мере необходимости.

  3. Измените свойство Text элемента управления Кнопка на Отправить фотографии.

  4. В строке формул в верхней части окна Power Apps, выберите свойство OnSelect. Выберите Действие > Power Automate > Отправить фото СР.

    Снимок экрана элемента управления Кнопка в процессе создания в Power Apps Studio, с потоком, добавленным к свойству OnSelect элемента управления.

    Свойство OnSelect элемента управления Кнопка изменяется на UploadMRPhoto.Run(.

  5. Чтобы загрузить последнюю сделанную фотографию, вставьте следующий код после открывающей скобки: {file:{name:GUID() & ".png", contentBytes:Last(ViewInMR1.Photos).ImageURI}})

    Снимок экрана со свойством OnSelect элемента управления Кнопка в строке формул Power Apps Studio, которое отправляет последнюю сделанную фотографию.

    Если вы поместили элемент управления Кнопка в галерею, вместо этого вставьте следующий код: {file: {name:GUID() & ".png", contentBytes:ThisItem.ImageURI}})

    Снимок экрана со свойством OnSelect элемента управления Кнопка в строке формул Power Apps Studio, когда кнопка в галерее.

    Чтобы кнопка отправляла все сделанные фотографии, удалите UploadMRPhoto.Run( и вставьте следующий код: ForAll(ViewInMR1.Photos, UploadMRPhoto.Run({file:{name:GUID() & ".png", contentBytes:ImageURI}}))

    Снимок экрана со свойством OnSelect элемента управления Кнопка в строке формул Power Apps Studio, которое отправляет все сделанные фотографии.

  6. Выполните предварительный просмотр приложения и выберите Просмотреть в СР, а затем выберите Отправить фотографии. Проверьте папку MRPhotos в OneDrive и подтвердите, что образец фотографии был отправлен.

Добавьте возможность работы в автономном режиме в свое приложение

Вы можете использовать свое приложение даже при ограниченном сетевом подключении или при его отсутствии с помощью функций SaveData и LoadData.

Отправка фотографий, снятых в смешанной реальности, в Dataverse

Вы можете добавить фотографии в таблицы Dataverse через столбец типа данных изображения. Столбцы изображений в Dataverse имеют два обязательных поля — Full и Value — которые могут быть установлены для выходных данных ImageURI элементов управления MR.

Например, если вы хотите загрузить первую фотографию, сделанную элементом управления Разметка в СР, в столбец Dataverse с именем "Изображение":

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

См. также

Примечание

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).