Comentários

Tirar e carregar fotos de realidade misturada

  • Artigo
  • 2 minutos para o fim da leitura

Neste artigo, vamos criar um aplicativo que possa tirar fotos de uma sessão de realidade misturada e carregá-las em uma pasta no OneDrive. Vamos usar o controle View in MR neste exemplo, mas os controles View shape in MR e Measuring camera também funcionariam.

Abordaremos as seguintes tarefas:

  • Adicionar um controle 3D object para exibir e manipular um objeto 3D de amostra
  • Conectar o controle 3D object a um controle View in MR para ver o objeto 3D no mundo real
  • Adicionando um controle de galeria para ver fotos tiradas com o controle View in MR
  • Carregando as fotos no OneDrive com um fluxo do Microsoft Power Automate

Pré-requisitos

Dica

Os controles de MR (realidade misturada) funcionam melhor em ambientes bem iluminados com superfícies de textura plana. O acompanhamento é melhor em dispositivos habilitados para LIDAR.

Adicionar um botão para tirar uma foto de um objeto 3D em realidade misturada

Este exemplo tem três partes. Primeiro, adicionaremos um botão que permite aos usuários tirar uma foto de um objeto 3D em uma experiência de realidade misturada.

Inserir um controle 3D object

Com o aplicativo aberto para edição no Power Apps Studio:

  1. Abra a guia Inserir e expanda Mídia.

  2. Selecione 3D object para colocar um objeto 3D na tela do aplicativo. Arraste o controle para a tela de modo a posicioná-lo com mais precisão.

    O controle vem com uma forma de cubo transparente. Se quiser, altere a propriedade Source do controle para carregar um modelo 3D diferente. Neste exemplo, usaremos o URL https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb.

    Uma captura de tela de um controle 3D object em construção no Microsoft Power Apps Studio, mostrado com sua propriedade Source.

Inserir e conectar um controle View in MR

  1. Abra a guia Inserir e expanda Realidade Misturada.

  2. Selecione View in MR para colocar o controle na tela do aplicativo ou arraste o controle para a tela de modo a posicioná-lo com mais precisão.

  3. Altere a propriedade Source do controle para 3DObject1.Source. (3DObject1 é o nome do controle 3D object que adicionamos anteriormente.) Essa expressão direciona o controle View in MR para sobrepor o modelo 3D no feed da câmera do dispositivo.

    Uma captura de tela de um controle View in MR em construção no Microsoft Power Apps Studio, mostrado com sua propriedade Source.

  4. Salve e publique o aplicativo e execute-o em seu dispositivo móvel.

  5. Selecione View in MR para ver o objeto 3D em realidade misturada. Selecione o ícone da câmera para tirar uma foto da exibição MR.

Em seguida, adicionaremos uma galeria para que os usuários possam ver as fotos que tiraram.

  1. Edite o aplicativo novamente. Abra a guia Inserir e coloque um controle Vertical gallery na tela.

  2. Altere a propriedade Items do controle para ViewInMR1.Photos. (ViewInMR1 é o nome do controle View in MR que adicionamos anteriormente.)

  3. Opcionalmente, altere a propriedade Layout da galeria para Imagem e título.

    Uma captura de tela de uma galeria vertical em construção no Microsoft Power Apps Studio, mostrada com suas propriedades Items e Layout.

  4. Visualize o aplicativo e selecione View in MR para gerar uma foto de amostra. A galeria é preenchida com uma imagem de amostra.

    Uma captura da tela do aplicativo que mostra um modelo 3D e uma foto do modelo em uma galeria.

Observação

Se os usuários saírem da exibição MR para ver a galeria, depois entrarem na exibição MR novamente e tirarem mais fotos, as novas fotos substituirão as que foram tiradas anteriormente.

Para facilitar a visualização das fotos na galeria, você pode adicionar uma sobreposição em tamanho real que aparece quando o usuário seleciona uma imagem em miniatura.

  1. Edite o aplicativo novamente. Abra a guia Inserir e expanda Mídia.

  2. Selecione Imagem para colocar um controle de imagem na tela. Mova e dimensione de acordo com o tamanho maior desejado que você quer que apareça quando uma imagem em miniatura é selecionada.

    Uma captura de tela de um controle de imagem em construção no Microsoft Power Apps Studio.

  3. Altere as propriedades do controle de imagem da seguinte maneira: | Propriedade | Valor | | - | - | | OnSelect | UpdateContext({vVisibleImageZoom:false}) | | Imagem | Gallery1.Selected.Image2 (supondo que o controle de galeria seja Gallery1 e a primeira imagem em miniatura seja Image2) | Visível | vVisibleImageZoom

  4. Selecione a primeira imagem em miniatura no controle de galeria. Altere sua propriedade OnSelect para UpdateContext({vVisibleImageZoom:true}).

    Uma captura de tela de uma imagem em miniatura em uma galeria no Microsoft Power Apps Studio, mostrada com a propriedade OnSelect.

  5. Salve e publique o aplicativo e execute-o em seu dispositivo móvel.

  6. Selecione View in MR e selecione o ícone da câmera para tirar uma foto. Selecione a seta para trás na parte superior da tela para sair da exibição MR.

  7. Selecione a miniatura na galeria para mostrar uma versão maior da foto. Selecione a imagem para ocultá-la.

Carregar fotos no OneDrive com um fluxo do Power Automate

Por último, criaremos um fluxo de trabalho no Power Automate. O fluxo de trabalho carrega fotos do aplicativo em uma pasta chamada MRPhotos no OneDrive.

Criar um fluxo no Power Automate

  1. Edite o aplicativo. Selecione Ação > Power Automate > Criar um fluxo. (Talvez você precise entrar no Power Automate primeiro.)

    Uma captura de tela de um aplicativo no Microsoft Power Apps Studio, com um novo fluxo do Power Automate selecionado.

  2. Procure e selecione o modelo de botão do Power Apps.

    Uma captura de tela da página do modelo do Power Automate, com o modelo de botão do Power Apps selecionado.

  3. Selecione o botão Power Apps na parte superior da janela e insira um novo nome para o fluxo. Neste exemplo, nomearemos o fluxo Carregar foto de MR.

    Uma captura de tela da janela de edição do Power Automate, com o nome do fluxo de trabalho realçado.

  4. Na etapa do PowerApps no fluxo de trabalho, selecione ... e, em seguida, Excluir.

    Uma captura de tela da janela de edição do Power Automate, com a etapa do PowerApps selecionada para exclusão.

  5. Procure PowerApps (V2) e selecione o gatilho do PowerApps (V2).

    Uma captura de tela da janela de edição do Power Automate, com o gatilho do PowerApps (v2) selecionado.

  6. Selecione Adicionar uma entrada e, em seguida, Arquivo.

  7. Altere o rótulo Conteúdo do arquivo para Imagem.

    Uma captura de tela da janela de edição do Power Automate, com o rótulo de entrada Arquivo alterado para Imagem.

  8. Selecione Nova etapa. Procure por Criar arquivo do OneDrive e selecione a ação Criar arquivo.

    Uma captura de tela da janela de edição do Power Automate, com a ação Criar arquivo do OneDrive selecionada.

  9. No Caminho da Pasta, selecione o ícone de pasta e navegue até a pasta MRPhotos criada anteriormente.

  10. Em Nome do Arquivo, digite @{triggerBody()?['file']?['name']} (Seu texto muda para "file.name.")

  11. Em Conteúdo do Arquivo, digite @{triggerBody()['file']['contentBytes']} (Seu texto muda para "Image.")

  12. Salve seu fluxo.

O fluxo completo deverá ter a seguinte aparência:

Uma captura de tela da janela de edição do Power Automate, com o fluxo de trabalho concluído.

Conectar o fluxo de trabalho a um botão em seu aplicativo

  1. Retorne ao seu aplicativo no Power Apps Studio. Seu fluxo agora está listado em Fluxos disponíveis.

    Uma captura de tela do painel Dados do Power Apps Studio com o novo fluxo.

  2. Abra a guia Inserir e selecione Botão. Coloque o controle de botão na tela e redimensione-o conforme necessário.

  3. Altere a propriedade Text do controle de botão para Carregar fotos.

  4. Na barra de fórmulas na parte superior da janela do Power Apps, selecione a propriedade OnSelect. Selecione Ação > Power Automate > Carregar foto de MR.

    Uma captura de tela de um controle de botão em construção no Power Apps Studio, com um fluxo adicionado à propriedade OnSelect do controle.

    A propriedade OnSelect do controle de botão muda para UploadMRPhoto.Run(.

  5. Para carregar a última foto tirada, cole o seguinte código após o parêntese de abertura: {file:{name:GUID() & ".png", contentBytes:Last(ViewInMR1.Photos).ImageURI}})

    Uma captura de tela da propriedade OnSelect de um controle de botão na barra de fórmulas do Power Apps Studio, que carrega a última foto tirada.

    Se você colocou um controle de botão dentro da galeria, cole o seguinte código: {file: {name:GUID() & ".png", contentBytes:ThisItem.ImageURI}})

    Uma captura de tela da propriedade OnSelect de um controle de botão na barra de fórmulas do Power Apps Studio, quando o botão está em uma galeria.

    Para que o botão carregue todas as fotos tiradas, exclua UploadMRPhoto.Run( e cole o seguinte código: ForAll(ViewInMR1.Photos, UploadMRPhoto.Run({file:{name:GUID() & ".png", contentBytes:ImageURI}}))

    Uma captura de tela da propriedade OnSelect de um controle de botão na barra de fórmulas do Power Apps Studio, que carrega todas as fotos tiradas.

  6. Visualize o aplicativo e selecione View in MR e, em seguida, selecione Carregar fotos. Verifique a pasta MRPhotos no OneDrive e confirme se a foto de amostra foi carregada.

Adicionar recurso offline ao seu aplicativo

Você pode usar seu aplicativo mesmo quando tiver conectividade de rede limitada ou inexistente usando as funções SaveData e LoadData.

Confira também

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).